웹 애플리케이션 만들기

자바스크립트 실습

 실습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

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

Sound of coding

적은 시간으로 공부한 것을 동기화할 수 있도록 제공되는 뮤직 비디오입니다. 전체 뮤직 비디오 보러가기

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

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

소스코드

github 

댓글

댓글 본문
작성자
비밀번호
  1. 김현태
    아... 집에 와서 보니 그 문제는 아닌 듯 합니다 제대로 ById 로 코딩했네요... 정말 이상하네요... 입력한 코딩은 다음과 같습니다.

    <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
    <input type="button" value="black" onclick="document.getElementById('target').className='black'" />

    저와 같은 현상이 있는 분 계신가요?
    대화보기
    • 김현태
      ㅜㅜ 정말 엄청 감사합니다. 복받으실 겁니다. 대단하십니다. 저는 정말 못찾았었거든요. 감사드려요!^^
      대화보기
      • Kissing
        ByID가 오타입니다. 대소문자 구분이 엄격합니다. ById B와 I만 대문자입니다.
        대화보기
        • 김현태
          <input type="button" value="white" onclick="document.getElementByID('target').className='white'"/>
          <input type="button" value="black" onclick="document.getElementByID('target').className='black'"/> 여기서 에러가 난다고 하는데 이해할 수 가 없습니다..
        • 김현태
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8" />
          <link rel="stylesheet" type="text/css" href="http://localhost/examples/style.css">
          </head>
          <body id="target">
          <header>
          <h1><a href="http://localhost/">JavaScript</a></h1>
          </header>
          <nav>
          <ul>
          <li><a href="http://localhost/examples/page_html.html">JavaScript란?</a></li>
          <li><a href="http://localhost/examples/page_vc.html">변수와 상수</a></li>
          <li><a href="http://localhost/examples/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일때 왼쪽항인 x는 오른쪽 항인 10에 따라</li>
          </ul>
          </article>
          </body>
          </html>
          -----------------------------------------------------------------------------------------아래는 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;
          }
          ---------------------------------------------------------------------------------------
          저는 블랙 버튼을 클릭했을때 색깔이 바뀌지 않아서 이렇게 올립니다. 어디가 잘못된 것인지 도무지 찾을 수 가 없어서요. ^^;;
        • 요요마
          document.getElementbyId('user_input').value에서
          .value는 뭐예요?
        • 이근환
          감사합니다!!:)

          궁금증이 해결됬어요!!:)
          대화보기
          • onoff
            잘 하셨는데 조금만 바꾸면 될 거 같네요ㅎㅎ
            하나의 버튼에 두개의 이벤트를 엮으신 거 같은데 한 번만 엮으시고,
            if/else문을 사용하시면 됩니다.

            <input type="button" value="형광등 켜기/끄기" id = "light"/>
            <script>
            flash = document.getElementById('light');
            off = true;
            flash.addEventListener('click',function(){
            if(off){
            document.getElementById('bg').className="yellow";
            off=false;
            } else {
            document.getElementById('bg').className="white";
            off=true;
            }
            })
            </script>
            대화보기
            • 실습2
              alert onfocus onblur 무한반복

              우선 onfocus onblur 이벤트를 자세히 아는 게 중요한 거 같습니다.
              여기서 onfocus는 텍스트박스에 focus 즉 집중이 되엇을 때 실행되는 이벤트인데요.
              텍스트박스에 집중이 되었다는 건 텍스트를 칠 수 있게 준비가 되어있다는 거죠.
              onclick과 다른 점은, onfocus도 텍스트박스를 클릭을 함으로서 포커스시킬 수 있지만,
              tab키를 누르거나의 식으로도 focus를 시킬 수 있습니다.
              sunday00님의 답변을 참고하자면,
              alert가 되면서 focus가 취소되고 확인을 누르면 다시 focus되었던 상태로 돌아감으로서 무한반복이 일어난다고 볼 수 있습니다.
              blur(포커스를 잃었을 때 실행되는 이벤트)도 마찬가지로 이 과정이 반복되면서 같이 반복이 되는 것이죠.

              alert와 focus 또는 blur를 같이 쓰시고 싶은 경우에는,
              if-else문을 사용해서 한번만 실행되게 만들 수 있습니다.
              예를 들자면,
              <script>
              x=true
              </script>
              <input type="text" onfocus="if(x){alert('focus');}" onblur="if(x){alert('blur'); x=false;}"/>
              대화보기
              • 이근환
                배운것을 활용하여 형광등처럼 효과를 넣어보고 싶은데요!
                버튼 두개로는 배운대로 하여 원하는 대로 구현할수 있었습니다!
                버튼 한개로 두번클릭하여 배경을 바꾸고 싶을때는 어떻게 할지 고민하다가
                제가 최대로 해본 코드를 올립니다!
                혹시 아시는 분은 어떻게 해결을 하면
                버튼하나로 한번 누르면 켜지고 한번 더 누르면 꺼지는지 알려주시면 감사드리겠습니다!

                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="utf-8">
                <title>복습</title>
                <link rel="stylesheet" type="text/css" href="http://localhost:8080/복습/style.css" />
                </head>
                <body id="bg">
                <h1>복습리스트</h1>
                <ul>
                <li>조건문</li>
                <div id="select"><li>반복문</li></div>
                <li>배열</li>
                </ul>
                <input type="button" value="뭔가요?" onclick="document.getElementById('select').className='yes'"/>
                <input type="button" value="형광등 켜기/끄기" id = "light"/>
                <script>
                flash = document.getElementById('light');
                flash.addEventListener('click',function(){
                document.getElementById('bg').className="yellow";
                })
                flash_off = document.getElementById('light');
                flash_off.addEventListener('click',function(){
                document.getElementById('bg').className="white";
                })
                </script>
                </body>
                </html>
              • 이근환
                2017-12-03 수강6일차

                수강완료하였습니다.

                감사합니다!:)
              • 2017년 11월 29일 수강완료
              • 코끼리와호랑이
                멘붕이었는데 [command + shift + r] 누르니까 반영 되네요. 감사합니다 ㅠㅠ
                대화보기
                • 박가린
                  제 소스는 왜 이상하게 될까요??
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">

                  </head>
                  <body>

                  <input type="button"value="white" onclick="alert('Hello world')"/>
                  <input type="text"onfocus="alert('focus')"
                  onblur="alert('blur')"/>
                  </body>
                  </html>
                • 박인호
                  11-24
                  수강완료.
                  점점 강력해지고 있다는게 느껴집니다.
                • atnskynst
                  11/19
                • 부건혁
                  div에 id 갑을 넣지 않고
                  div{
                  float; right;
                  }로 하면 안되나요?
                • 서성진
                  잘 봤습니다.
                • 나그네
                  최소 소스를 올려주셔야 뭐가 잘못 됐는지 알겠죠. 나중에 회사에 가셔서 버그리포트를 하게 되시면 최대한 상세하게 적어서 넘기세요. 웹사이트라면 익스플로러인지 크롬인지 버젼은뭔지 운영체제는 뭔지까지도!! 질문자도 답답해서 올린것이겠지만 이렇게 질문하시면 질문을 보는 사람도 답답합니다.
                  대화보기
                  • 부건혁
                    id 대신 다른 이름을 사용해도 되나요?
                  • 수업쭉 따라오면서 자주 있는 문제가 제가 코드를 똑같이 적었을 때는 뭔가 오류가 있어 실행이 안되는데..
                    코드 적힌것을 그대로 따오면 잘 작동이되는데.. 문제가 무엇일까요 ㅠ.. 조금 구체적이지 않은 질문이기는 해도..
                    코드를 적는 순서라던가.. 영역이 잘못 설정된 것일까요..? 답답한 감이 있어서 질문 드립니다.
                  • sediments
                    <header>에 javascript가 실종되서 댓글 남깁니다. ㅠㅠㅠㅠㅠ


                    아무리 코드 비교해보고 복붙해도 나오질 않네요... 도움 부탁드립니다..ㅠㅠㅠㅠ
                  • sediments
                    onfocus와 alert 창이 무한 반복되서 댓글 남깁니다.


                    밑에 댓글에 저와 같은 문제를 겪고 계신분들도 있는 것 같은데


                    그것에 대한 솔루션은 못찾아서 댓글 남깁니다.


                    도움 부탁드립니다. ㅠㅠ
                  • sediments
                    안녕하세요. 댓글 감사드립니다.


                    focus와 alert를 같이 사용 못한다면 뭐라고 타입해야 할지 혹시 아시나요?
                    대화보기
                    • 유상원
                      2017-11-11 완료!
                    • 김지원
                      저도 float:right을 했을때 우상단에 위치하지 않더군요.. 다른 분들이 하신것 처럼 shift+cmd+f5를 해봐도 바뀌지 않더라고요 그래서 이것저것 하던 중 style.css파일의 모든 float들을 좌우로 바꿔줬더니 적용이 되면서 다시 float:right를 하니깐 되더라고요
                      코드에서 무엇인가 꼈던것 같아요
                      대화보기
                      • Noel J Park
                        자바스크립트 역시 쉽지 않네요. 이제 시작인데 ㅎㅎ css까지는 '아 그렇구나~' 하는 생각이 들었는데 자바스크립트는 함수의 등장에서 '뭐지 이건 ㅠㅠ'이라는 생각이 확 오네요.
                      • 장고한
                        getElementById는 Element를 Id를 통해서 가져온거라고 보시면돼요.
                        예를들면) 실습2에서 alert(getElementById('user_input').value 중 getElementById('user_input')로 id가 그 윗줄에서
                        user_input인 <input>을 불러온것이구요.
                        실습4에서getElementById('target').className='em' 중 getElementById('target')를 통해 id가 target인 <ol>을 불러온거라고 보시면 되요.

                        두개의 방향이 다른 이유는 실습2는 .value를 통해 불러온 element의 값을 읽은 것이고
                        실습4는 .className을 통해 불러온 element를 'em'이라는 class로 정의시키는 거죠.

                        방향이 다르다고 느낀건 하나는 값을 읽는거고 다른 하나는 정의하는 것으로 느껴져서 그럴꺼에요.
                        getElementById의 다양한 기능이라고 보시면 되겠습니다
                        대화보기
                        • 정문경
                          실습2에서 alert(getElementById('user_input').value 여기에선 user_input의 값을 alert에 반환해주었고,
                          실습4에서 getElementById('target').className='em' 에서는 target 에다가 값을 반환해주었는데..뭔가 이 둘간의 방향이 다른것 같아서요.. 전자에서는 필요한 값을 "user_input"에서부터 가져왔고, 후자에서는 값을 "targer"으로 보내준 셈이라고 생각되는데요.. getElementById를 어떤 기능이라고 이해해야 할까요..도와주세요 ㅠㅠ
                        • 정문경
                          잘봤습니다~ getElementById <-- 요 기능이..많이 아리쏭하네요..ㅠ
                        • 송성태
                          와, 대단하네요.
                          HTML, CSS, Java의 삼각관계.
                          감사합니다!
                        • 리브
                          채팅 코드를 붙이고 관리자 화면에서 제가 채팅치고 채팅이 왔는데 채팅이 없다고 뜨네요.. 이건 무슨 경우일까요?
                        • 리브
                          아! 해결됐습니다! 사이트 하단 부분에 있더라구요! 혹시나 못찾으시는 분들을 위해 댓글 남겨놓습니당~
                          대화보기
                          • 리브
                            마지막 동영상에서 4:02 초에 나오는 universal code 라는 항목이 없는데 뭘 선택하면 되나요?
                          • 베타고
                            ul에 해당하는 버튼을 하나 더 만들어주시던지 아니면 ID지정을 body에다가 해주셔야합니다.
                            동일한 id값 주게되고 이것이 중복되버리면 코드실행 순서에 따라 가장 상위의 지정 값만 한번만 실행하고 맙니다.
                            하나의 버튼으로 전체 지정을 하고싶으면 body에 id값을 지정해 주시던지 하시면 될 것같습니다. 간단하지만 꽤 여러 방법이 나오더군요.
                            대화보기
                            • PassBy
                              @알파고
                              id는 마치 주민등록번호와 같아서 서로 다른 태그 사이에서 중복되어 사용될 수 없습니다.
                              만약에 여러 태그를 동시에 선택해서 한꺼번에 클래스를 바꿔주고 싶으면 클래스를 사용하시는 것이 좋습니다.
                              다만 getElementsByClassName()은 어떤 한 element가 아니라 배열(array)를 반환하기 때문에 써주신 방법으로는 코드 적용이 안 되구요.

                              다음을 참고 해주시기 바랍니다 :)
                              <!-- 이 스크립트 코드를 적당한 곳에 넣어주세요. -->
                              <script>
                              function changeClass() {
                              var elements = document.getElementsByClassName('target');
                              var i = 0;
                              while( i < elements.length) {
                              elements[i].className= 'target em';
                              i = i + 1;
                              }
                              }
                              </script>

                              <!-- 버튼 태그와 ul, ol 태그를 다음과 같이 바꿔주세요 -->
                              <ol class='target'>
                              <ul class='target'>
                              <input type="button" value="강조" onclick="changeClass()" />
                            • 파이쏭
                              9월28일시작 스크립트 실습 끝~
                            • 완료! 어려워서 복습했어요
                            • Dongwon Shin
                              수강완료했습니다.
                            • 알파고
                              제가 짠 코드인데요.

                              <ol id="target">
                              <li>html</li>
                              <li>css</li>
                              <li>javascript</li>
                              </ol>
                              <ul id="target">
                              <li>최진혁</li>
                              <li>최유빈</li>
                              <li>한이람</li>
                              <li>한이은</li>
                              </ul>
                              <input type="button" value="강조" onclick="document.getElementById('target').className='em'" />

                              보시면
                              예재에서는 ol태그에만 id값을 줘서 버튼을 누르면 효과가 들어가는데

                              제가 한것처럼 ul테그에도 id값을 주면 같이 효과가 들어가야되는거 아닌가요?
                              저는 해보니 ol태그만 효과가 들어가서요.

                              혹시나해서 전체 코드 올려봐요~
                            • 9.27 완료
                            • 9/26완료
                            • 효근
                              대소문자는 구분이 필요하군요
                            • 다시시작
                              완료
                            • 정문경
                              왜 전 onfocus , onblur 두가지가.. 한번 클릭하면 끝없이 실행될까요 ㅠㅠ
                            • 주주맘마
                              완료
                            • 왓떠뻐꺼
                              완료했습니다. 감사합니다.
                            • 재밌습니다. 얼른 코드에 익숙해져서 사이트 구축 해보고싶네요..
                            • SanFrancisco
                              맨 뒤의 댓글이랑 채팅 위젯 붙이는 거는 정말 흥미롭고 실용적이네요! 앞으로도 이렇게 실용적인 예제들로 프로그래밍 실력을 확인시켜주세요 ㅎ
                            • Lee Seulgi
                              우아 정말 너무 신기해요!!!!
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기