웹 애플리케이션 만들기

자바스크립트 실습

 실습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. 양수
    CSS 선택자에 대한 학습이 필요하신 것 같습니다.

    - id
    - class
    - element

    CSS는 위 3가지를 기준으로 스타일을 사용자가 지정합니다.


    각각의 사용 용도에 대해서 확인하실 필요가 있는 것 같습니다.


    =======================================================

    참고로 id는 스타일을 지정할 때 한 가지만 지정해서 쓰는 고유(유니크)한 이름입니다.

    엘리먼트를 기준으로 스타일을 지정하면 문서상에 또 다른 div가 추가될 시,

    추가되는 div에도 기존에 부여했던 스타일이 지정됩니다.
    대화보기
    • 지나가던학생
      실습4번에서
      div를 css로 꾸며주는데 왜 id값을 지정해주어야하나요?
      nav나 article은 그대로 선택자로 쓸수있는데
      마찬가지로 div도 그냥 선택자로 지정하면안되는건가요?
    • 해달별
      결과물을 컨트롤 누른채로 f5로 리프레시 해보세요.
      캐쉬관련해서 CSS의 즉시 적용이 되지 않아 그런 현상이 일어나는 것 같습니다.
      저는 일단 이 방식으로 해결했습니다.
      대화보기
      • Seo Yun Seok Tudoistube
        무료로 쓸 수 있는 Disqus 랑 tawk 있어서 참 유용할거 같습니다. 감사합니다^____^
      • 허스키
        완주했습니다
      • ysmin
        style.css 파일이 아예 적용이 안되요ㅠㅠ 왜일까요?
        그래서 page_vc.html 파일에 style 코드써서 하긴 했어요
      • 송재욱
        너무 좋습니다 !!!!
      • 송재욱
        완주 완료 !!!!
      • 쿠쿠다스
        후.. 감사합니다^^
      • namimoon
        작업한 source code 올려주시면 분석해서 답변 드릴게요
        대화보기
        • Kyungmin Noh
          저도 아래 "행인" 님과 동일한 증상이 발생하네요.
          (alert 사용 시 확인 눌러도 무한반복 메시지 뜨는 이슈)

          그런데 크롬이 아닌 엣지에서 페이지를 불러오니 해당 이슈가 발생 안 하네요.

          왜 그런지 이유 아시는 분 문의드립니다~
          대화보기
          • 슈퍼디벨로퍼
            완료!!!!
          • 행인
            alert 사용 시 확인을 눌러도 무한반복으로 alert 메세지가 뜹니다.
            해결방법을 아시는 분 계신가요?
          • Mijin Jeon
            재미있어요 ㅠㅠㅠ!!
          • 안녕하세요 nakra님, 지나가다가 답변 드립니다.
            브라우저의 판단에 따라서 생길 수 있는 문제입니다.
            간단히 설명을 드리면,
            (1) 마우스로 클릭해서 onfocus가 생겼고
            (2) onfocus니까 창을 띄웠는데,
            (3) 창이 뜨면서 아까 마우스로 클릭한 곳이 onblur 되었다고 브라우저가 판단하는 경우입니다.
            그냥 그럴 수도 있다는 말씀이 드리고 싶었습니다.
            대화보기
            • 이응
              disqus랑 tawk 서비스 정말 신기하네요!! ㅎㅎ
            • nnbetter
              아 너무 재밌어요 !!! 히힛
            • 3.29. 신세계네용~
            • 14번째
              3.21.
            • Jaemoc Jung
              오... ㅠ_ㅠ 너무 감사요. 캐쉬파일 때문에 적용이 안되었어군요. 막힌 속이 확 뚫린 기분입니다 ㅎㅎ.
              대화보기
              • 안녕하세요! 맥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
                아, 그렇군요~ 친절한 답변 감사합니다 ㅋ
                대화보기
                • 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 파일만 그러네요
                      • 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를 가지고 있는 부분에만
                                  적용하고자 한 것입니다.
                                  대화보기
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기