웹 애플리케이션 만들기

자바스크립트 실습

 실습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

아래 수업은 실습을 하지 마시고 설명만 들어주세요.  안들어도 됩니다! 왠만하면 듣지 마세요. ㅎㅎ 차라리 아래에 나오는 활용을 보시는 것을 추천드립니다. 

Sound of coding

적은 시간으로 공부한 것을 동기화할 수 있도록 제공되는 뮤직 비디오입니다. 전체 뮤직 비디오 보러가기

지금까지 배운 것만으로도 할 수 있는 일 

댓글 기능인 disqus, 채팅 기능인 tawk을 여러분의 웹에플리케이션에 붙이는 방법을 알아봅니다. 수업의  흐름과는 무관한 양념 같은 수업입니다. 안 보셔도 됩니다. 

소스코드

github 

댓글

댓글 본문
작성자
비밀번호
  1. 항상 잘보고 있습니다!! 그런데 실습3에서 부터 갑자기 한글이 깨져보이던데 어떻게 해야 해결가능한가요ㅠㅠ 재부팅도 해봤는데 달라지는게 없네요 비트나미자체를 지웠다가 다시 설치해야하나요?
  2. 손은정
    진도 잘 나가다가 막히면 몇일 끙끙~~해결 되었을때의 쾌감
    코딩의 매력이네요^^
  3. 김경태
    잘 봤습니다~
  4. 김정은
    늦었지만 감사합니다 아래 글처럼 캐쉬때문에 고생한 1인입니다 다른분들의 댓글때문에 확인할수 있었네요
  5. egoing
    웹페이지가 갱신되지 않는 이유

    웹브라우저는 한번 다운로드 받은 파일을 저장했다가 다음에는 다운로드 받지 않고 저장한 파일을 이용하곤 합니다. 이런 경우 갱신된 내용이 반영되지 않는 현상이 있을 수 있습니다. 아래와 같이 단축키를 이용하시면 강제로 다운로드 받게 할 수 있습니다.

    Windows: ctrl + F5
    Mac/Apple: Apple + R or command + R
    Linux: F5
  6. Youmin Choi
    인터넷 브라우저 사용기록 삭제에서 캐쉬를 한번 지워보세요 댓글 3개 아래보시면 AngelPlayer님의 답변을 참고하시면 될 것 같습니다. 저도 같은 문제였는데 해결됬어요!
    대화보기
    • Aamirkang
      Ctrl + F5
      대화보기
      • 호기심천국
        style.css 가 적용이 안되는 이유는 뭘까요?
        뭐가 문제인지 모르겠네요
        위에 있는 소스코드를 다시 복사해서 붙여놓고 다시 저장을 해봐도안되는데,
        제가 폴더를 바탕화면으로 옮겨놓고 공부(작업)를 했었는데, 그것때문일지 몰라서 다시
        c 드라이브안에 있는 bitmami 안에 있는 htdoc 폴더를 찾아 거기다 다시 넣어놓고 해봤는데도
        안됩니다. 뭐가 문제인지 당췌 모르겠습니다. 이것때문에 진도가 안나가지네요.
        아실만한 분들 좀 알려주시겠어요?
      • pass
      • JUNY
        완료!
      • AngelPlayer
        2017. 07. 12. 11:51
        흠.. 갑자기 페이지의 색상 변경이 안되서 코드의 문제인줄 알고 소스를 그대로 긁어서 집어넣기도 하고,
        브라켓의 문제인가 싶어 브라켓 자동 연결없이 localhost로 들어갔는데도 오류가 나서 찾아보니 브라우저에 캐시가 쌓이면 그것을 읽어오기 때문에 이전에 작업한 내용을 불러와서 그럴 수 도 있다고 하더군요..

        *해결 방안(크롬)
        1. 시크릿 모드로 실행
        2. control+shift+delete 누른 후 캐시 지우기
        IE는 컴퓨터 종료마다 지우게 했는데 크롬은 학교나 다른 컴퓨터에서 연동해서 쓴다고 일부러 냅뒀더니 오류가 나타나네요..
      • 손정은
        아래 이승욱님 저도 같은 문제로 엄청 끙끙 앓았는데 결국은 오타였더라구요 ㅠ.. 저같은 경우는 clAssName 이라고 쳐서 계속 안먹혔었습니다 ㅜㅜ 오타문제인건 아닌지 한번 확인해보세요 ~
      • 정원
        style.css에
        body{
        }
        를 추가해보세요. 저도 댓글에서 찾았는데 왜 그런지는 모르겠지만 이렇게 하면 기능이 제대로 동작합니다.
        대화보기
        • 이승욱
          실습 4 영상에서
          코드를 다 입력하고 새로고침을 해보면
          black 버튼만 기능을 하지 않네요..ㅠ
          F12 키를 눌러서 보면, white 버튼은 정상적으로 작동하는데 black 버튼만 작동하지 않네요..
          어떻게 해결해야 할까요?
        • 정원
          그러게요.. 저도 이 댓글보고 해보니 작동하네요
          대화보기
          • Amore Chang
            JavaScript 재밌습니다!
          • dobedh
            disqus에서 작성자 아이디의 색상을 바꾸는 방법이 있을까요? 코딩야학의 후기 게시판(https://code-live.ga......ory)에서는 작성자 아이디의 색상이 rgb(65, 131, 196)으로 설정되어 있는데 어떻게 바꾸신건지 궁금합니다. 기존에 disqus에서는 rgb(0, 0, 238)으로 설정되어 있더라고요. 처음 댓글을 남기네요. 여러모로 배울 수 있는 기회를 주셔서 감사합니다.
          • Kim Kunhee
            재미있네요!!
          • 김영미
            신기방기 간단하게 되네요~
            처음해본 제겐 간단하지 않았지만 하고 나니 이렇게 간단한걸.ㅎㅎ
            ㅠㅠㅠㅠ 진땀 뺐어요.
          • 박우진
            봤어요!
          • 이창호
            input에 담긴 코드는 자바스크립트인건가요? html은 아닌거죠?
          • Scia
            id 와 class 헷갈리네요.
          • 풋사과
            3
          • 이인태
            이해가.될듯 말듯.. 아.. 아리송 하네요..
            많은..다양한 태그들의 기능을 암기하고 이해해야 하는 것은 중요한 필수 네요.

            html 파일.
            css 파일..
            js 파일... 을 잘 활용해야 하는것도 중요한듯 하구요..

            복잡한것을 단순화 시켜가는 것도 중요한 일인듯 싶습니다.
            정리 해보기가 어렵네요... ㄷㄷ
          • 질문하는나그네
            저 질문하나 드려요!

            자바스크립트로 로그인앱구현할때 prompt코드를 써서 변수로 매긴뒤 조건문으로 하는데요
            실습강의에서 배운 걸토대로 이렇게 로그인앱을 구현할수는 없나요?
            로직에 무슨 문제가있는지 피드백 부탁드립니다!!
            <input type="text" id="haha" />
            <input type="button" value="로그인"
            onclick="document.getElementById('haha').value=password;
            if(password==1111){
            document.write("hi");
            }else{
            document.write("bye");
            }
          • Amore Chang
            무언가 될것 같은 이 느낌적인 느낌..
          • lee dae hoon
            ,끝까지 다봤는데 마지막에 로그인을 않했네요...
          • <ol id"target> 을
            <ol id="target>으로 바꾸니까 됬네요

            괜히
            onclick="document.getElementById('target').className='black'" 에서 오류있나 엄청찾아봄 ㅠ

            와 이런게 디버깅인가 만약에 해당라인에는 문제없는데 전혀 엉뚱한데서 어이없이 실수나오면 이렇게되네요;
            개빡세네요..
          • 2.html:23 Uncaught TypeError: Cannot set property 'className' of null
            at HTMLInputElement.onclick (2.html:23)

            라고떠요 동영상3번에 그래서 className이적용이안되요
          • 권광범
            저만 disqus.com에서 가입하고 등록할 때, 'universal code'가 안 나타나는건가요??
          • 권광범
            아..확 어려워졌네요...배경색이 안 바뀌는 어려움에 처했네요 하핳...
          • 마시리스
            codeanywhere 로 javascript 폴더를 만들면 접근이 안되네요 403에러가 뜹니다.
            왜그런지는 모르겠으나 폴더명을 바꾸면 됩니다.
            저는 js폴더로 했어요
          • script.js 내 코드 혹시 필요하신 분들 있을까 하여 올립니다.

            wbtn=document.getElementById('white_btn');
            wbtn.addEventListener('click',function(){
            document.getElementById('target').className='white';
            })

            bbtn=document.getElementById('black_btn');
            bbtn.addEventListener('click',function(){
            document.getElementById('target').className='black';
            })
          • dogn
            자바스크립트 짱이네여 ! 빨리 적용해보고 싶네요!
          • 김윤호
            잘 봤습니다.
          • 개기쁨
            저도 같은 문제가 있어 구글링으로 찾아보니,
            브라우저에 캐시가 쌓여 있어
            새로운 css적용된 거를 모르고
            브라우저 녀석이 바보같이 그냥 원래꺼를 그대로 쓰고 있었네요.

            브라우저의 캐시만 전부 지워주시고
            새로 고침 하시면 잘 되실 겁니다~
            대화보기
            • 개기쁨
              저도 같은 문제가 있어 구글링으로 찾아보니,
              브라우저에 캐시가 쌓여 있어
              새로운 css적용된 거를 모르고
              브라우저 녀석이 바보같이 그냥 원래꺼를 그대로 쓰고 있었네요.

              브라우저의 캐시만 전부 지워주시고
              새로 고침 하시면 잘 되실 겁니다~
              대화보기
              • html이랑 자바스크립트랑 php는 서로의 영역을 절대 침범하면 안되고 문법도 다 다ㅡㄹ고 섞이면 안되는줄 알았는데 되는건가 어떻게 해야 하는지ㅠ 강의 넘넘 잘보고 있습니다!1
              • 이인태
                어려워요... 오늘 다시...
              • 남상대
                Gimyo 님 감사합니다ㅠㅠ
              • 황준상
                오호 흥미롭습니다!
              • 코딩
                마지막 영상에서 원래있던 style.css 에 추가시킨 명령어들이 갑자기 적용이 안되는데 뭐가 문제일까요??
                희안한게 예전에 적은 nav나 article 등에 적용한 명령어는 잘 먹히는데 추가로 적은 float이랑 배경색 바꾸는것 등 추가한것만 적용이 안되네요 ㅠ
                .... 헐.. 혹시나 해서 css 파일들에 들어있는 명령어들 수정해서 저장하고 f5 눌러봤는데 코드도 없는데 예전 글자크기 컬러들이 그대로 있네요... 이건 무슨경우 일까요??;;;;
              • 2gic
                허허.. ㅠㅠ 맨날 하다말다 하니 머릿속에 남는게 없네요... 꾸준히 해야 할 것 같습니다!
              • Awon
                오오 사용자 정보 삭제도 하고나니 크롬에서도 되어요 오오 신기해라 ㅋㅋㅋ 꿀팁!!
              • Awon
                오 저 방금 크롬에서 아무리봐도 코드가 잘못될 코드가 아닌데 안됐거든요~~ 이 댓글 보고 익스플로어에서 여니까 잘 적용되네요!!!!!!! 감사합니다!!!! 우왕
                대화보기
                • 토올
                  길지만 잘봤습니다.^^
                • 여류몰스퀘어
                  오호!! 멋집니다.
                • Jaehyun Kim
                  댓글과 채팅기능까지 추가가 가능하네요!^^ 감사합니다!^^
                • 감사
                  오 크롬에서 말씀하신 대로 하니 리프레시가 되네요 감사합니다
                  대화보기
                  • Kayse
                    저도 실습상에서 지금까지 문제없이 잘 따라가고 있었습니다만,
                    코드를 수정한 이후 브라우저 적용이 안됩니다.

                    브라우저에서 새로고침을 수 차례 해보기도 하고, 코드 작성에 에러가 있나 싶어 기재되어 있는 소스코드를 그대로 붙여넣고 재적용시켜도 적용이 안됩니다.

                    Bitnami Manager 에서 restart해봐도 문제는 해결되지 않습니다.
                    어떻게 해결해야 할까요?
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기