웹 애플리케이션 만들기

자바스크립트 실습

 실습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. 최규선
    유익한 강의 감사합니다.
  2. wskang45
    안녕하세요.
    좋은 강의 정말 감사드립니다.

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

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

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

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

      설정 초기화도 해봤는데 안되고 어떻게 해결해야되나요ㅠㅠ?
    • Lucas
      혹시 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는 꼭 필요없는 부분이었던것인지, 그 의미는 무엇인지 궁금해요!
                  • 박민우
                    디스커스 따라가는중 get started 후 터치하고 한국어 한 다음에 그 다음 창이 같은 창이 안나오고
                    Let's get started ! 라는 버튼이 뜨는데... 어찌 해야할까요 ㅠㅠ
                  • 저도 안돼서 익스플로러로 해보니 되네요, 확인해보세요~
                    대화보기
                    • chocozero
                      li{color:blue}; ->li{color:blue;} 이렇게 세미콜론 위치를 바꿔보세요~
                      대화보기
                      • 이병정
                        1번영상 실습 중
                        onfocus="alert('focus')" 가 멈주치지 않고 반복적으로 실행됩니다.^^);;
                        @크롬브라우주, 파이어폭스
                      • 고칼슘
                        따라서 하는데 일부가 작동을 안합니다..제가 무엇을 잘못했을 까요?
                        fonti-size 변경하고 style.css에서 #control이 동작을 안합니다.
                        <style >
                        li{ color:blue};
                        ul li{
                        font-size: 40px; <- 작동을 않합니다..
                        }
                        .em{
                        text-decoration:underline;
                        }
                        </style>
                      • 완료
                      • 폭스킴
                        중복의 악취란 말이 제 코를 파고 드는군요~
                      • getgoing
                        저도 동일한 문제가 있었는데, 이렇게 하니 해결되었네요. 감사합니다.
                        대화보기
                        • querencia
                          답변해주셔서 감사합니다.
                          알려주신 방법으로^^ 버튼위치는 해결되었답니다.
                          하나 더 질문하고 싶은데 disqus 코드도 입력해서 확인해보려고 하니 깨져서 보이는 이유는 왜그럴까요?
                          초보자라.. 따라하는 것만으로는 이제 점점 힘들어지네요^^ㅎ
                          대화보기
                          • unixforever
                            혹시 버튼을 눌러도 아무 일이 없거나 버튼 위치가 제대로 되어 있지 않다면, 브라우저 캐시/쿠키/히스토리 등을 한번 삭제해 보세요. 제 경우는 그렇게 해결했습니다.
                          • querencia
                            MAC 사용
                            질문
                            style.css 파일에서의
                            #control {
                            float:right;
                            }
                            가 적용되지 않습니다.
                            어떤 해결방법이 있을까요..
                          • 활화산
                            온전히 따라 오진 못했네요. 두 세가지 정도 구현 안된 경우가 있어서, 머리가 좀 개운치는 않습니다. 완전 초보인데 서버 프로그램 강의를 진행할까 말까 고민이 좀. ㅎ ㅎ
                          • Kijin Roh
                            채팅기능을 테스트 해보는 순간 .. 약간의 희열이 ㅋ.. 좋은 강의 감사드립니다.
                          • 수강완료
                            좀 어려워지네요
                            감사합니다
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기