웹 애플리케이션 만들기

자바스크립트 실습

 실습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. 14번째
    3.21.
  2. Jaemoc Jung
    오... ㅠ_ㅠ 너무 감사요. 캐쉬파일 때문에 적용이 안되었어군요. 막힌 속이 확 뚫린 기분입니다 ㅎㅎ.
    대화보기
    • nakra
      안녕하세요! 맥os사용자입니다 ㅎㅎ

      실습1을 진행하는중에

      onblur="alert('blur')" 를 넣으니 무한 alert가 뜨더라구요

      onfocus까지는 괜찮았는데 ㅠ 뭔가 문제가 있는것 같은데 혼자 해결하기 어려워서요~
    • 고은정
      마지막엔 html와 자바스크립트 코드를 분리하는군요..
      유지보수를 쉽게할 수 있겠어요..

      실습은안하고 중요한 내용만 메모하고갑니다

      body 닫히는 부분 위에
      <script scr=링크> </script>
      </body>
    • Jaeeui Kwon
      20170314
    • 백한승
      안녕하세요?
      열심히 수업 듣고 있는 만학도입니다!

      "Uncaught RangeError: Invalid string length

      C:/Users/user/AppData/Local/atom/app-
      1.15,0/resources/app/asar/node_modules/text-buffer
      /node_module/pathwatcher/lib/file.js:310

      +Show Stack Trace
      ----------------------------------------------------------------
      This is likely a bug in Atom. This issue has already~~~"

      이런 창이 뜬 후 수업을 좀 하다보니
      메모리가 꽉 찼다는 창이 자꾸 뜹니다.
      아톰의 메모리 사용량이 3기가를 넘는 것 같은데 이게 정상인가요?


      참고로 지금 제 컴퓨터는 RAM이 8 GB입니다.
    • Seung Heo
      아, 그렇군요~ 친절한 답변 감사합니다 ㅋ
      대화보기
      • Jonny
        input 태그안의 onclick이라는 속성이 자바스크립트를 불러오겠다는 뜻이어서
        <script>태그가 따로 없어도 적용이 되는 것입니다.
        그래서 onclink="이 안의 내용은 자바스크립트 문법을 사용해야 합니다."
        대화보기
        • 오잉
          감사합니다 ㅠㅠ 덕분에 겨우 해결했네요
          대화보기
          • 170304
            ctrl+alt+화살표 방향->

            그리고 ccs파일 바로 적용 안되는 분들은
            쿠키, 캐시파일 지워주시면 됩니다.
            대화보기
            • 종고수
              그 실습3하실때 li안에 이름 새기실때
              어떻게 바로 li사이로 넘어가요??
              저는 엔터누르면 걍 줄이 바뀌어요
            • Seung Heo
              이 전 강의부터 궁금했는데, <script> 태그 없이, 본문 안에 자바스크립트 태그를 써도 적용이 되네요? 어떻게 그렇게 되는 건가요?
              이전 자바스크립트랑 php 실습 때 배운 코드를 스크립트 태그 없이 써보면 적용이 전혀 안 되는데 말입니다. 궁금합니다.
            • 고수가 되어보자
              Uncaught TypeError: Cannot set property 'className' of null
              at HTMLInputElement.onclick
              블랙버튼을 누르면 블랙으로 바뀌지 않고 이런 글이 뜨는데 어떻게 해야 하나요?
              다른 파일은 잘되는데 page_vc.html 파일만 그러네요
            • InSoo
              170223
              감사합니다.
            • 최규선
              유익한 강의 감사합니다.
            • wskang45
              안녕하세요.
              좋은 강의 정말 감사드립니다.

              저도 후이메이 님처럼 DISQUS를 웹사이트에 연동시키면 댓글을 다는 버튼이 없습니다.
              로그인을 해야할거 같아서 로그인을 눌러봐도 팝업창이 실행이 안되는데요.

              해결방법을 알려주실 수 있을까요?

              감사합니다.
            • funlife
              강의 감사합니다.
            • 강경호
              감사합니다
              170210
            • 후이메이
              DISQUS 페이지에 있는 소스코드를 복사해서 붙이고 리로드를 하엿는데 댓글 텍스트 창 아래에 캡쳐 버튼은 있는데 댓글 을 다는 버튼이 왜 없을까요...
            • 율율이
              브라우저 설정에서 그 페이지에대한 쿠키 초기화 시키면 됩니다~
              찾기어려우시면 그냥 브라우저 쿠기 전체를 초기화~
              전체 쿠기 초기화방법
              브라우저를 열고 단축키( Ctrl + Shift + Del ) ~
              대화보기
              • araababab
                실습 1 도중에,,, 실수로 '이 페이지가 추가 알림을 차단합니다' 버튼을 눌러버렸는데

                그 이후로 alert 창이 안뜨네요....

                설정 초기화도 해봤는데 안되고 어떻게 해결해야되나요ㅠㅠ?
              • 혹시 disqus 댓글 창 길이를 화면의 길이에 맞게 수정할 수 있는 방법은 없을까요? ㅠㅠ
                너무 가로로 짧은 것 같은데, 조절하는 방법을 잘 모르겠습니다.
              • 맛스타
                혹시 CSS파일을 수정 후 적용이 안되시는 분들 ! (크롬의 경우)

                1. F5를 통해 새로고침 하셨는데, 적용이 안되신다면 Ctrl + Alt + R 키를 눌러서 새로고침 해보세요!
                2. 그래도 안바뀐다면 Bitnami manager를 실행해 서버들을 Restart 해보세요

                같은 문제로 고생하다가 해결해 작성합니다.ㅎㅎ 모두 즐거운 코딩합시다.
              • sohnryang
                그래도 돌아가긴 하지만 다시 div태그를 다는 등의 유지보수를 할 때는 id를 이용하는 게 더 나을 거 같은데요
                대화보기
                • TEBENE
                  실습4강의에서

                  div에 id값을 붙이는데

                  안붙이고 그냥 css에서 div {~~}이렇게

                  div에 css를 걸면안되나요?
                • 주선민
                  디스커스 유니버셜코드 복붙했는데..ㅠㅠ깨져서 안나오네요
                • tij03105
                  css, js 수정후 반영되지 않으신분은 이 게시물 참조하시면 될듯하네요.
                  http://kanu.tistory.com/30
                • 노노재노재노창
                  css 파일에서 버튼의 float:right하고 black, white가 적용이 안되네요.
                  css에 있는 나머지 코딩은 다 적용이 되는데요..
                  페이지소스보면 버튼누름에 따라 body의 클래스가 바뀌는것 보면 css 실행에 문제가 있는것 같아요.
                  혹시나 코딩실수했나해서 css하고 html다 강연자님 코드 복붙해서 실행했는데도
                  똑같이 float:right하고 black, white만 적용이 안되요.
                  제 컴퓨터가 이상한 건가요?
                • 저도 이런 문제가 있는데
                  이 페이지가 추가 알림 안뜨게 차단합니다를 누르기 전까지 onclick과 onblur가 무한히 뜨는데
                  이게 무슨 문제일까요ㅠㅠ
                  대화보기
                  • 문돌이
                    저도 이 현상 계속 일어나는데 무슨 문제일까요..?
                    대화보기
                    • 유튜브 API를 사용하시는 것으로 기술력은 충분하니 집중력을 위한 것으로 보여집니다.
                      대화보기
                      • 이번 강의에서는 div를 한 번만 사용하셨는데, 큰 프로그램에서는 div를 단 한번만 사용한다는 보장이 없죠.
                        그래서 모든 div에 float: right를 지정하는 것이 아니라 div 중에서도 그 id를 가지고 있는 부분에만
                        적용하고자 한 것입니다.
                        대화보기
                        • KwonJun Jeong
                          이고잉님 감사합니다. 덕분에 코딩에 대해 잘 배우고 있습니다.
                          그런데 갑자기 궁금한 것이, 강의들이 대부분 10분 내외로 짧게 끊어져 있는데, 그것은 사이트의 기술적 이유로 그렇게 하는 것인가요? 아니면 공부하는 사람들의 집중력을 고려해서 그렇게 하는 것인가요?
                        • 쌘진
                          2017-01-04 완료

                          어렵지만 너무 재밌네요!

                          강의 감사합니다
                        • 헬리사우드
                          궁금한게 있는데요,클래스를 숫자로 지정하면 왜 안되는건가요?
                        • 아파프리카
                          강의 감사합니다.
                          질문이 있어 올립니다.
                          white, black button을 오른쪽으로 이동시킬 때
                          div tag가 아닌 id="control"로 지정해서 하셨는데

                          css에서
                          div {float:right;}
                          이렇게 해도 오른쪽으로 가더라구요. control로 지정해서 하신 이유를 알 수 있을까요?
                        • 김남경
                          감사합니다~
                        • 완료
                        • 강의 수업 들은지 이틀째인데... 여러가지 많은 도움이 되고 있습니다.

                          마지막 댓글과 채팅을 보고 나만의 사이트를 만들어서 해보고 싶다는 생각이 많이 들었어요

                          egoing님~

                          정말 도움 많이 되고 있습니다.

                          감사합니다.
                        • #코스머스#
                          16-12-26 완료
                        • 서라
                          실습 1에서 input text가 클릭하면 alert(focus)가 계속 떠요 onblur도 그렇고... 왜 무한 반복?이 되는거죵...
                        • 김광연
                          감사합니다
                        • 와 다른게아니라
                          사람에 순서를 두면 안되죠에서 소름돋았네영.
                          평소에 인성이 어떠신지 알것같아요,
                          잘 듣고갑니다.
                        • SeungWoo Baek
                          style.css 가 웹브라우저 캐쉬에 남아있거나, 웹브라우저에서 동일한 style.css라고 생각하여 기존의 로딩된 내용을 그대로 쓰기 때문에, style.css의 내용을 바꾸고 저장을 했음에도 제대로 반영되지 않는 에러입니다.

                          http://kanu.tistory.com/30 참고하세요~
                        • 161124
                        • 박인우
                          같은 현상이 발생해서 이것저것 만지던 중 해결했습니다.
                          크롬에서 localhost/style.css 로 들어간 후 새로고침을 해주었더니 정상작동되었습니다.
                          대화보기
                          • San Koh
                            161121 완료 감사합니다~
                          • 고산
                            아....해결했네요... #control에서 #과 c 사이를 띄어쓰기 했다가 다시 붙이니 해결되는군요...이유는 뭔지 모르겠습니다.
                            대화보기
                            • San Koh
                              style.css 수정하는데에서 두 가지 문제가 생기네요
                              하나는 h2{font-size:50px;}를 지워도 글자 크기가 안 줄어듭니다.
                              하나는 #control{float:right;}를 입력해도 버튼 위치가 그대로이며 오른쪽으로 이동하지 않습니다.
                              윈도우 사용자이며 브라우저는 크롬입니다.
                            • 김종신
                              질문있습니당. JS. PHP 프로그래밍 5번 영상에서 이벤트 리스너를 보고 든 의문인데요.
                              제가 어디선가 이벤트 리스너의 매개변수로 리스너('click', function(), 'false'); 를 봤던 기억이 있습니다.
                              저기서 false는 꼭 필요없는 부분이었던것인지, 그 의미는 무엇인지 궁금해요!
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기