웹 애플리케이션 만들기

자바스크립트 실습

 실습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. SeungWoo Baek
    style.css 가 웹브라우저 캐쉬에 남아있거나, 웹브라우저에서 동일한 style.css라고 생각하여 기존의 로딩된 내용을 그대로 쓰기 때문에, style.css의 내용을 바꾸고 저장을 했음에도 제대로 반영되지 않는 에러입니다.

    http://kanu.tistory.com/30 참고하세요~
  2. kkkk
    161124
  3. 박인우
    같은 현상이 발생해서 이것저것 만지던 중 해결했습니다.
    크롬에서 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 완료
                • Code.Math
                  감사합니다~~!!
                • egoing
                  head 태그에 넣으면 script 태그의 파일에 대한 다운로드가 완전히 끝났을 때 화면이 랜더링 되기 시작하고요. body 태그의 끝에 넣으면 화면 랜더링이 우선되고 script 파일을 다운로드 받습니다. body에 넣는 것이 더 바람직합니다.
                  대화보기
                  • 김종엽
                    2016.08.09 완료!
                  • Wookiiis
                    잘 보았습니다. :)
                  • 닥터
                    저도 똑같은 증상이 있네요.. 크롬에서.. 지금 어찌 해결하셨나요? 아님 다른 브라우저로 하시나요?
                    explorer에서는 되고요...
                    대화보기
                    • 닥터
                      실습2따라가다보니.. 아톰쪽에서 문제를 발생시키는 군요...(아톰 버그인 듯) 다음과 같은 핑크창 뜨면서...

                      "Uncaught RangeError: Invalid string length"

                      아톰이 작동 안합니다..

                      캡쳐해서 이미지 올리려 했으나 업로드할 길이 없네요.

                      현재로선 아톰 재설치로 진행해야 겠습니다... ㅠㅠ
                    • 차누
                      수강완료
                    • delbert
                      script 태그를 head 태그 내에 넣는 것과 body 태그 내에 넣는것의 차이가 있나요?
                    • 이현아
                      감사합니다.
                    • wbtn, bbtn을 변수로 따로 설정한 이유는 코드를 간결하게 하기 위함으로 보여집니다.
                      만약 wbtn을 변수로 설정하지 않았을 경우 필수적으로 필요한 addEventListener코드부분이 원래보다 훨씬 길어지게 됩니다.
                      대화보기
                      • 지금까지 지루함 없이 너무 잘봤습니다!
                        자바와 HTML을 배우는 중인데 뭔가 고구마 먹은듯한 느낌을 해소해 주는 강의였어요!

                        다만 한가지 궁금한점은. 마지막 동영상에서(따라하지 말라고 하신..)
                        script.js로 빼신 코드에서 wbtn 으로 변수값 설정하신 부분이 잘 이해가 안됩니다ㅜㅜ
                        따로 wbtn을 HTML안에서 사용한것은 아니고 getElementById로 target을 찾아서 className을 지정해주는 형식인데 변수에 저장하는 이유는 무엇인가요? 뭔가 클래스에 _class()_ 이름을 붙히고 사용하지 않는 느낌이라 헷갈려서요..
                      • egoing
                        ="alert(document.getElementById('user_input').value)"

                        만약 위의 코드에서 큰 따옴표를 사용한다면 아래와 같이 되겠죠?

                        ="alert(document.getElementById("user_input").value)"

                        이렇게 되면 onclick의 속성값이 alert(document.getElementById(까지가 됩니다. 왜냐면 큰 따옴표가 다시 등장하는 부분까지가 속성의 경계가 되니까요.
                        대화보기
                        • 안녕하세요 ㅎ, 선생님 덕분에 강의 잘 듣고 있는 사람입니다 ㅎ

                          마지막 강의에서 wbtn은 그냥 'white_btn' <<에서 btn이라 임의(?)로 설정한 거에서 나온 건가요?

                          그냥 너무 궁금해서 여쭈어 봅니다 ㅎ
                          대화보기
                          • 강의 정말 잘 들었습니다 ㅎ

                            두 번째, 강의 중 onclick="alert(document.getElementById('user_input').value)" << 에서 무언가 막히는 것 같습니다.

                            큰 따움표를 사용하면 작동하지를 않고, 작은 따움표를 사용하면 작동하는 것 같습니다 ㅠㅠ

                            강의 내용 중에는 상관 없다고 말씀하셨는데 ㅠ, 혹시 조금 더 자세하게 알려주실 수 있으신가요 ?

                            실습 3 영상에 그 답이 나와 있었네요 ㅎ 감사합니다 선생님 ㅎ
                          • egoing
                            아래 수업을 보시고 크롬 개발자 도구로 해당 엘리먼트에 어떤 효과가 적용되고 있는지 확인해보시면 도움이 될 것 같습니다. https://opentutorials.org......866
                            대화보기
                            • 한가지 궁금한 점이 있습니다. style tag를 style.css에 내용을 옮겨 한꺼번에 style의 효과들을 관리할 때, 링크를 걸면 적용이 안되는 효과ex(border-bottom)가 있습니다. style.css로 링크를 걸어 관리하면 문제가 되구요, 링크를 걸지 않고 일일이 style 적용할 때는 이상없이 관리가 됩니다. 코드 상에서는 아무리 봐도 이상이 없는 것 같은데.. 어떻게 하면 style.css에서도 html에 일일이 style 적용한 것과 동일한 효과를 보일 수 있을까요?

                              * style link
                              <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
                              style.css
                              <style>
                              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;
                              }
                              h2{
                              font-size:30px;
                              color:red;
                              }
                              </style>
                            • 김준형
                              수강했어요. 쉬운강의 감사합시다.
                            • 긍정긍정맨
                              질문있습니다!!
                              아톰에디터쓰는데 키면 바로 5초뒤에 atom editor has crashed 라고뜨면서
                              계속 꺼지네요.. 해결법 아시는분 계신가요?
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기