웹 애플리케이션 만들기

자바스크립트 실습

 실습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. tij03105
    css, js 수정후 반영되지 않으신분은 이 게시물 참조하시면 될듯하네요.
    http://kanu.tistory.com/30
  3. 노노재노재노창
    css 파일에서 버튼의 float:right하고 black, white가 적용이 안되네요.
    css에 있는 나머지 코딩은 다 적용이 되는데요..
    페이지소스보면 버튼누름에 따라 body의 클래스가 바뀌는것 보면 css 실행에 문제가 있는것 같아요.
    혹시나 코딩실수했나해서 css하고 html다 강연자님 코드 복붙해서 실행했는데도
    똑같이 float:right하고 black, white만 적용이 안되요.
    제 컴퓨터가 이상한 건가요?
  4. 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 완료
                        • 임지호
                          너무 유용한 수업 감사합니다 ㅠㅠㅠ
                        • 일전에 후원동의관련 내용으로 통화할때
                          기대된다고 말씀드렸던 기능이 이 강의에 포함되어있네요 ㅋ
                          아직은 구상만 하는 단계이고 구체적인 것은 이 강의 마치고 진행 할려고 하는데
                          암튼 좋은 정보 감사합니다.
                          사실 이런건 동영상으로 실제 따라하지 않고서 캡춰같은거 보면서 하면 이해하기가 쉽지 않거든요.
                          동영상을 위한 교육방법이 강력하다는걸 새삼느낍니다.
                        • 제리피
                          2016.08.17 완료
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기