웹 애플리케이션 만들기

자바스크립트 실습

 실습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. TEBENE
    실습4강의에서

    div에 id값을 붙이는데

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

    div에 css를 걸면안되나요?
  2. 주선민
    디스커스 유니버셜코드 복붙했는데..ㅠㅠ깨져서 안나오네요
  3. tij03105
    css, js 수정후 반영되지 않으신분은 이 게시물 참조하시면 될듯하네요.
    http://kanu.tistory.com/30
  4. 노노재노재노창
    css 파일에서 버튼의 float:right하고 black, white가 적용이 안되네요.
    css에 있는 나머지 코딩은 다 적용이 되는데요..
    페이지소스보면 버튼누름에 따라 body의 클래스가 바뀌는것 보면 css 실행에 문제가 있는것 같아요.
    혹시나 코딩실수했나해서 css하고 html다 강연자님 코드 복붙해서 실행했는데도
    똑같이 float:right하고 black, white만 적용이 안되요.
    제 컴퓨터가 이상한 건가요?
  5. ICan
    저도 이런 문제가 있는데
    이 페이지가 추가 알림 안뜨게 차단합니다를 누르기 전까지 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로 지정해서 하신 이유를 알 수 있을까요?
          • 김남경
            감사합니다~
          • 완료
          • Jake
            강의 수업 들은지 이틀째인데... 여러가지 많은 도움이 되고 있습니다.

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

            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
                        채팅기능을 테스트 해보는 순간 .. 약간의 희열이 ㅋ.. 좋은 강의 감사드립니다.
                      • 수강완료
                        좀 어려워지네요
                        감사합니다
                      • 히스토
                        1. document.getElementbyId("") 는 함수인가요?

                        2. 이 함수 리턴값이 C언어에서의 주소값과 비슷한 의미인가요?
                      • 최현승
                        161005완료
                      • 이성진
                        수강 완료!
                        좋은 강의 항상 감사 드립니다~
                      • egoing
                        플랫폼을 고도화하는 과정에서 자연스럽게 말씀하신 기능도 포함될 수 있을 것 같습니다. ^^
                        대화보기
                        • ricosuave
                          egoing님 강의 감사합니다!

                          건의사항이 있는데 meta나 link, input 같은 요소들은 self-closing이 되고
                          script 같은 경우는 void element일 것 같은데 또 알고보면 end tag가 꼭 있어야 하네요.
                          저는 개인적으로 찾아보았지만 다른 분들도 이런 부분에 대해서 의구심이 있지 않을까 하는 생각이 듭니다.

                          그리고 간혹 댓글로 좋은 질문이나 답변들이 있는데, 새로운 댓글에 밀려 공유가 잘 되지 않는 것 같은데
                          중요하다가 생각하는 이슈는 따로 모아서 볼 수 있는 포럼형식의 공간이 있다면 좋지 않을까요?
                          매번 강의를 덧붙이시고 수정하기에는 힘이 드실 것 같고 유저들끼리 확대재생산하면서 보완해나가는것도 좋을 것 같습니다.

                          운영 취지가 너무 좋으시고 많은 도움이 되고 있습니다. 더 많이 알려지고 더 많은 컨텐츠도 생산되길 기대합니다..
                        • DECIMO
                          2016.09.28 감사합니다.
                        • 이수재
                          수강완료 09/24
                        • 2016 / 09 / 18 완료
                        • 임지호
                          너무 유용한 수업 감사합니다 ㅠㅠㅠ
                        • 일전에 후원동의관련 내용으로 통화할때
                          기대된다고 말씀드렸던 기능이 이 강의에 포함되어있네요 ㅋ
                          아직은 구상만 하는 단계이고 구체적인 것은 이 강의 마치고 진행 할려고 하는데
                          암튼 좋은 정보 감사합니다.
                          사실 이런건 동영상으로 실제 따라하지 않고서 캡춰같은거 보면서 하면 이해하기가 쉽지 않거든요.
                          동영상을 위한 교육방법이 강력하다는걸 새삼느낍니다.
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기