생활코딩

Coding Everybody

코스 전체목록

닫기

자바스크립트 실습

 실습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. 기픈
    제일 힘든 과정이었어요~ㅠ.ㅠ.
    앞으로 잘할 수 있을지 벌써 걱정이지만...
    아자 아자 화이팅 해봅니다.
    감사합니다^^
  2. sunday00
    이게 크롬버젼에 따라 실습1을 비롯한 모든 onfocus, onblur가 작동 할 수도, 안 할 수도 있는 것 같습니다.
    해외사이트를 봐도 끝나지 않는 alert창이 반복된다는 불만이 꽤 검색되는 것을 알 수 있는데, 그 중 그럴듯한 답이 있더군요.

    그러니까, 텍스트박스에 마우스를 클릭하면 일단 얼럿이 작동하고, 얼럿이 작동하면서 텍스트박스의 온포커스가 자동으로 취소되어 버립니다. 확인을 누르면 크롬의 특성상 버튼 누르기 직전의 장소에 다시 자동으로 프롬프트를 클릭시켜줍니다. 이 과정이 순식간에 작동하기 때문에 마치 사용자의 눈에는 무한히 얼럿창만 보이는 듯한 현상을 보인다고 합니다.

    다른 브라우저나 크롬의 이전 버젼에서는 얼럿창이 떠도, 얼럿창을 새로운 창이 떳을 뿐 마우스 클릭은 그냥 유지되기 때문에 작동하는 듯 합니다.

    때문에 외국의 어느 사이트에서는 크롬사용자를 타겟으로 하는 경우에는 아애 focus와 alert를 같이 쓰지 말것을 조언하기도 하더군요...;;

    참고하시기 바랍니다...;;
  3. 김대관
    7/26 잘봤습니다
  4. 봤어요!
  5. 포아송분포
    7/25 쿵쾅
  6. sheis
    잘 봤습니다.
  7. aga159
    완료
  8. JeonSeon
    어렵지만, 흥미로운 내용입니다.
    다만, 링크를 타고 페이지를 이동하면, 새로 클릭해줘야하는 번거로움이 있습니다.

    좋은 강의 감사합니다.
  9. 정지호
    수강완료
  10. hoyabbang@google.com
  11. disqus가 들어갈 영역의 크기를 미리 할당해 줘야 해요
    예를 들어
    <div >...< div/>
    <article>
    디스쿼스복붙
    <article/>을 하면 article의 disqus가 div에게 가려져서 안보였네요.
  12. 우분투
    아 가장 밑에 있네요
    대화보기
    • 우분투
      우분투 쓰고 있는데 파일 폭스도 유니버셜 코드를 쓰나요?
      유니버셜 코드고르는것도 없네요 하핳
    • 손자이
      disqus가 코드를 붙여넣기 까진 했는데 실행이 안 돼요ㅜㅜ
    • 손자이
      disqus가 코드를 붙여넣기 까진 했는데 실행이 안 돼요ㅜㅜ
    • nevertoolate
      AngelPlayer 님 감사합니다.
      저도 화면이 바뀌지 않아서, 눈이 아프도록 코딩을 다시 확인하고 확인하고 또 해도 안되어서,
      댓글 올려 주신 것 읽고 햇더니 되더라구요. 와~~~ 오늘 밤 잠 제대로 잘 수 있겠어요. 감사해요 꾸뻑...
    • Kisoo Ahn
      언어들의 조화가 절묘하구요 댓글,채팅창 차용 프로그램도 유용하군요.
      언제나 쉽고 명쾌한 강의 감사드립니다.
    • Alyn
      실습 4에서 사용자가 첫 화면에서 Black버튼을 눌러서 검정색으로 바꾸었을 경우, 이것이 다른 페이지까지 그대로 적용되는 방법은 어떻게 할 수 있을지... 의문이 들었습니다... 혹시 조력자님들 중에 코딩의 방향에 대한 힌트를 주실 수 있을까요? :)
    • 이인규
      오 마지막에 실용적인것까지 !! 감사합니다.
    • 컴공과
      JS // 다른이름으로 저장하기 누르시고 인코딩을 확인해보세요 UTF-8로 하시고 저장해보세요
    • 항상 잘보고 있습니다!! 그런데 실습3에서 부터 갑자기 한글이 깨져보이던데 어떻게 해야 해결가능한가요ㅠㅠ 재부팅도 해봤는데 달라지는게 없네요 비트나미자체를 지웠다가 다시 설치해야하나요?
    • 손은정
      진도 잘 나가다가 막히면 몇일 끙끙~~해결 되었을때의 쾌감
      코딩의 매력이네요^^
    • 김경태
      잘 봤습니다~
    • 김정은
      늦었지만 감사합니다 아래 글처럼 캐쉬때문에 고생한 1인입니다 다른분들의 댓글때문에 확인할수 있었네요
    • egoing
      웹페이지가 갱신되지 않는 이유

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

      Windows: ctrl + F5
      Mac/Apple: Apple + R or command + R
      Linux: F5
    • 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'가 안 나타나는건가요??
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기