웹 애플리케이션 만들기

자바스크립트 실습

 실습1

실습2

1.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <input type="text" id="user_input" />
  <input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
</body>
</html>

실습3

2.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     .em{
       text-decoration:underline;
     }
   </style>
</head>
<body>
  <ol id="target">
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
  </ol>
  <ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>
  <input type="button" value="강조" onclick="document.getElementById('target').className='em'" />
</body>
</html>
참고로 위의 코드에서 onclick 속성의 값인 document.getElementById('target').className='em' 부분이 자바스크립트입니다. 

실습4

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
  		<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost/page_op.html">연산자</a></li>
		</ol>
	</nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
</body>
</html>

page_html.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>

page_op.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ul>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ul>
  </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
  <article>
    <h2>연산자</h2>
    계산을 할 때 사용되는 것입니다.
  </article>
</body>
</html>

page_vc.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ul>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ul>
  </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
  <article>
    <h2>변수와 상수</h2>
    변수란
    <ul>
      <li>변하는 값</li>
      <li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
    </ul>
    상수란
    <ul>
      <li>변하지 않는 값</li>
      <li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
    </ul>
  </article>
</body>
</html>

style.css

body.black {
  background-color:black;
  color:white;
}
body.white {
  background-color:white;
  color:black;
}
header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav {
  border-right:1px solid gray;
  width:200px;
  height:600px;
  float:left;
}
nav ol{
  list-style:none;
}
article{
  float:left;
  padding:20px;
}
#control {
  float:right;
}

실습5

아래 수업은 실습을 하지 마시고 설명만 들어주세요.  안들어도 됩니다! 왠만하면 듣지 마세요. ㅎㅎ 차라리 아래에 나오는 활용을 보시는 것을 추천드립니다. 

지금까지 배운 것만으로도 할 수 있는 일 

댓글 기능인 disqus, 채팅 기능인 tawk을 여러분의 웹에플리케이션에 붙이는 방법을 알아봅니다. 수업의  흐름과는 무관한 양념 같은 수업입니다. 안 보셔도 됩니다. 

소스코드

github 

댓글

댓글 본문
작성자
비밀번호
  1. 진수
    li*3 한후 탭키 누르면 됩니다
    대화보기
    • 김혜령
      잘 따라가다가 화면 색이 바뀌는 부분에서 적용이 안되네요 ㅜㅜ style.css가 문제인것 같은데 코드상 문제는 없어 보이는데 왜 안되는지는 ㅜㅜ
    • 봉봉
      1번 실습에서 input태그 onfocus, onblur 를 지정해도 커서해제가 안되어 번갈아가면서 계속 경고창이 뜹니다.
      무엇이 문제일까요 ㅠㅠ

      + 크롬이 말썽이었네요.. 파폭으로 해보니 잘 됩니다.. 흑
    • hy
      실습4 코드를 동일하게 작성했는데,
      body.black은 인식하는데 body.white가 인식이 안되길래,
      css 파일 맨 첫줄에 body {} 를 추가했더니 body.white, body.black 모두 인식이 되네요.
      이건 왜 그런걸까요?
    • 강응택
      아 몇일 쉬다 하니 더 힘드네요.
    • hy
      감사합니다!
      대화보기
      • tazo
        폴더 안만들고 바로 1.html로 하니깐 실행됐어요~
        대화보기
        • getElement의 속성에 대해 거듭 설명해주시니 처음에는 제 안에 두루뭉실했던 개념이 지금은 단단하게 형태를 잡았네요^^ 언제나 영상의 예제 작성 파트 전에 제가 제대로 이해했나를 테스트할 겸 미리 코드를 작성해보는데, 에러 없이 원하는대로 실행될 때의 쾌감이 짜릿합니다.
        • ㅇㅎ
          2.html을 작성해보았는데 한번도 이러지 않다가 한글이 깨져서 나오는데요
          이거는 어떻게 해결해야하나요?
        • 첫 영상(실습1)에서 1.html 파일을 만드는데 codeanywhere에서 프리뷰가 안됩니다.
          크롬, 익스 모두 시도해봤는데 둘다 오류 문구가 나오는 건 왜 그런걸까요.

          The requested URL /javascript/1.html was not found on this server.
        • 전부터 궁금했는데 영상에서는 li * 3을 하면 li태그가 세개씩 생겨나는데 저는 안되더라구요.
          제가 아톰 최신버전을 다운 받아서 사용하고 있는데 최신버전에서 기능이 삭제가 된건지,
          다른걸로 바뀐건지를 모르겠네요.

          점점 더 어렵긴하지만 그래도 결과물이 나오니까 뿌듯한게 재밌네용.
          할땐 재밌는데 공부하러 들어오기까지 결심이 오래걸리는 이 마음은 무엇인고..
        • 이희태
          6월 21일 자바스크립트 실습 수강완료하였습니다. 수련시간에 다시한번들어봐야겠어요 ㅠㅠ
        • 이진선
          당신의 지식에 감탄하고 갑니다!
          대화보기
          • Soocheul Park
            와우~ 여기서부터는 정말..많은 정보가 넘쳐 나네요 ~ 따라가기 힘드네요 ㅎㅎ..그래도 꾸준하게 하는게 중요하겠죠? ^^;;
          • 김재훈
            참 신기한 세상이네요^^
          • goodist
            화면을 나눠서 왼쪽에는 강의를 틀어 두고 오른쪽에는 실습창을 띄워서 공부하고 있는데요.
            page_vc.html 에서 '변수란 ~~~~' 부분의 문장 길이가 길어서 페이지의 내용이 전부 밑으로 내려가 버리는 현상이 생깁니다.
            브라우저의 크기를 키워서 공간이 충분해지면 다시 올라오긴 합니다.

            그런데 경험에 비추어 봤을 때 스크롤바가 생기면서 넘어가는 것이 보통인데 이 문제를 어떻게 해결할 수 있을까요?
            검색해보니 overflow 나 scroll 같은 것들이 나오는데 이런걸 적용해야만 해결할 수 있는 문제 인건지 궁금합니다.
          • 정영현
            GIMYO 님 감사합니다.
          • GIMYO
            크롬브라우저의 경우 간혹 코드가 정상임에도 불구하고
            CSS나 JS가 적용이 되지 않을 때가 있습니다.
            이 경우 우선 익스플로어 혹은 파이어폭스 같은 다른 웹브라우저로 실행 해 보시고
            타 웹브라우저에서 정상작동 되는데 크롬에서만 되지 않는다면
            우선은 코드 오류는 아니니 안심하셔도 됩니다.
            저같은 경우 크롬에서 적용이 안될 경우 해결 방법으로
            크롬 우측상단 탭 > 도구더보기 > 인터넷 사용자정보 삭제 를 한 후
            크롬을 재실행하면 JS 또는 CSS가 정상작동했습니다.
            원인이 뭔지 찾아봤지만 인터넷에도 정확한 원인은 뭐다하는 정보는 없네요.

            PS. CSS나 JS가 중요한 부분은 맞지만 작동하지 않는다고 해서 멈춰있지마시고
            다른 브라우저에서 정상 작동되면 그냥 넘어가세요.
            이고잉 선생님이 말씀하신 것 처럼 우리수업은 JS나 CSS 하나하나 작동하는게 중요한 것이 아닌
            큰 그림을 그릴 수 있는게 중요하니까요.
          • GIMYO
            CSS나 JS의 경우 브라우저 2개 이상에서 테스트 해보시는 것을 추천해드립니다.
            예) 익스플로어 + 크롬 / 크롬 + 파이어폭스
            그리고 특정 브라우저에서는 코드가 정상적용되는데
            다른 브라우저에서 안되는 경우에는 해당 브라우저의 캐시를 찾아서 삭제하고
            브라우저 창을 재 실행해 보세요.
            Ps. 주로 CSS나 JS가 바로 적용 안되는 경우는 크롬브라우저에서 있는데
            이게 정확한 원인이 뭔지 인터넷에 검색 해 봐도 잘 안나오네요..
            대화보기
            • 정영현
              실습3번 강의에서
              따옴표 관련해서 에러나는데 왜 에러나는지 생각해보라고 말씀하시네요
              그이유가 바로 밑에 제가 말한 이유인듯 합니다.
            • 정영현
              이재희 님
              큰 따옴표, 작음 따옴표 문제요
              구분자 문제인거 같은데

              alert 를 묶을때 " " 사용했으면 user_input 을 감쌀때 ' ' 이걸로 해야 되고요
              alert 를 묶을때 ' ' 를 사용했으면 user_input 을 감쌀대 " " 이걸로 해야 되네요
              동일한 구분자를 사용할 경우 중간에서 인식오류로 끊어지니깐 그런거 같습니다.

              아놔 코드 예제 올리라니깐
              댓글에 코드치니깐 안올라가네요;;;;
            • 이재희
              실습 2 예제에서 아래부분 타겟을 작은 따옴표로 감쌌는데
              설명은 끈 따옴표, 작은 따옴표 상관없다고 하셨지만
              큰 따옴표로 하니까 실행이 안 되네요.
              작은 따옴표로 해야 됩니다
              document.getElementById('target')
            • 치우천황
              뻥이님 아마 tawk 사이트가 로그 아웃 되어 있어서 그런게 아닌가 생각됩니다.
              저도 설정 테스트 후 관리자 창에서 종료 하고 로그아웃 하고 나오니
              체팅 입력 폼이 오프라인으로 출력되더군요
              로그인 하면 아마 정상적으로 테스트 할 수 있을겁니다.
              그럼 수고하세요
              대화보기
              • 치우천황
                강의 잘 봤습니다.
                자바 스크립트로 이용하는 간단한 예제 잘 봤습니다.
                그리고 댓글 토론과 채팅으로 토론을 할 수 있는걸 적용해 봤는대 무척 신기하네요
                언젠가는 이런걸 개발할 수 있어야 하는대
                나중에 이걸 잘 이용해 봐야겠습니다.
              • 김명준
                맨 마지막 동영상은 안봐도 되는거죠?
              • 나은별
                감사합니다.
              • 현재 베트남에서 강좌보고 따라하는데요.... disqus 홈페이지 들어가면 DNS를 찾을 수없다면서 들어가지지 않아요 ㅜㅜ

                그래서 따라 하지 못하고 있는데 그냥 넘어가도 될까요? 아님 다른 사이트를 disqus와 같이 적용하면 되는건가요?
              • 뼝이
                tawk설치하고 적용했는데 사이트 상에서 오프라인으로 되는 이유가 뭘까요? ㅠㅜㅠ!! 온라인이 안되네요
              • 여우
                꿀팁 감사해요!!
                대화보기
                • 이재희
                  익스로 실습1 공부했는데요
                  크롬으로 저장된 파일을 열고 텍스트 상자를 클릭하니
                  포커스 경고 창이 열리는데 확인 누르니까 이번엔 블러 경고 창이뜹니다.
                  확인 눌러도 없어지지 않고 종료 버튼을 눌러도 없어지지 않네요
                  익스로는 문제 없이 잘 됐는데 크롬은 또 이러네요
                • 이재희
                  크롬 최신 버전 사용중인데 뭔지 모르겠지만
                  실습 1 화이트 상자 만드는 부분부터 하나도 안 됩니다.
                  지금까지 문제 없이 잘 따라가고 있었는데
                  갑자기 Not Found

                  The requested URL /javascript/1.html/ was not found on this server.
                  이러면서 안 됩니다.
                  그런데 익스로 하니까 한번에 되네요
                  그때의 그 기분이란...
                • Lydia
                  감사합니다!
                • 이지훈
                  잘 보았습니다.^^
                • 준일
                  실용 예제가 아주 흥미로웠읍니다.
                • 준일
                  잘들었읍니다.
                • skekogo
                  잘 들었어요. 감사합니다!
                • 권규형
                  li * 3> 이렇게 해도 안되나요?
                  대화보기
                  • 코드에 문제가 없는데로 css 스타일이 바로 적용되지 않는 문제는,
                    대부분 캐시설정때문에 안되시는 것 같습니다.
                    캐시를 무시하고 페이지를 리로드하는 단축키 Ctrl + Shift + R 을 눌러보세요.
                  • 신정숙
                    ㅎㅎ 표현이 재미있으세요
                    들으며 혼자 웃는답니다
                    어려운 코스 재밌게 강의 잘들었어요~~
                  • 예상되는 가장 큰 오류는 <a> 태그가 제대로 안닫힌 경우 입니다.

                    소스코드를 확인해보세요.
                    대화보기
                    • javascirpt 를 사용해서 body 에 추가한 것은 id 값이 아닌 class 값 입니다.

                      id = #
                      class = .

                      이라고 생각하시면 되요.

                      body 의 id는 target 이고, class 는 white or black 이 되겠죠.

                      body#target
                      body.white
                      body.black
                      대화보기
                      • 이용호
                        chrome 말고 explore로 실행 하니 되네요.

                        아마 사용하고있는 chrome 설정 때문에 그런 것 같아요.

                        해당 text box를 클릭 하는 순간 계속 그 안에 갇혀있어서 그런 것 같은데..아무튼 explore로 해서 잘 되시면 무시하고 진행하면 될 것 같은데요~?
                        대화보기
                        • li*3 하시고 tab 누르시면 되지 않나요?
                          대화보기
                          • 노미래
                            코드에 오타도 없고 예시랑 비교해도 다른 것이 없는데,
                            버튼에 white 는 나와도 Black은 안나오고,
                            버튼을 클릭해도 변화가 생기지 않네요... ㅠㅠ
                          • twowinsh
                            실습5 혹시 적용안되시는분 있나요..
                            js파일 따로 빼거나, vs.html 안에 script에 코드 넣어도 둘다 적용이 안되네요...
                            기존에 실습1~4까지는 적용이 잘되는데..
                            아시는분 답변좀 부탁드립니다ㅠㅠ
                          • 저도 동일한 문제가 ㅠㅠ
                            대화보기
                            • 임명숙
                              크롬씨 업데이트가 안돼 계속 안되는 줄 알고 못따라기기도...
                              아래 Ctrl+shift+R 댓글 달아주셔서 해보니 적용되네요~
                              감사합니다. 고맙습니다.
                            • goeka71
                              맥이랑 크롬 쓰고있습니다. 다른건 몇번 새로고침하면 되는데, style.css는 아무리해도 적용이 안되네요.. 어떻게 해결해야하나요?
                            • Bank in
                              유용한 정보 감사합니다.
                            • 정종원
                              완료!
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기