생활코딩

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. 9/26완료
  2. 효근
    대소문자는 구분이 필요하군요
  3. 다시시작
    완료
  4. 정문경
    왜 전 onfocus , onblur 두가지가.. 한번 클릭하면 끝없이 실행될까요 ㅠㅠ
  5. 주주맘마
    완료
  6. 왓떠뻐꺼
    완료했습니다. 감사합니다.
  7. jjung
    재밌습니다. 얼른 코드에 익숙해져서 사이트 구축 해보고싶네요..
  8. SanFrancisco
    맨 뒤의 댓글이랑 채팅 위젯 붙이는 거는 정말 흥미롭고 실용적이네요! 앞으로도 이렇게 실용적인 예제들로 프로그래밍 실력을 확인시켜주세요 ㅎ
  9. Lee Seulgi
    우아 정말 너무 신기해요!!!!
  10. Youngil Jin
    왜 안되나했는데... 한참 밑에 누가 적어놔서 알았네요!!!
    ctrl+f5 눌러서 캐쉬를 재부팅 해야 된답니다...
  11. 슈팅스타
    자바스크립트는 HTML을 프로그래밍 적으로 제어하기 위한 언어
  12. healer
    완료 으악~~~~~~~~~~~~
  13. 호로로로로롤
    <input type="button" value="white" onclick="document.getElementById('target1','target2').className='white'>를 하니까 target1 밖에 안 바뀌고
    <input type="button" value="white" onclick="document.getElementById('target2').className='white',
    document.getElementById('target1').className='white'"> 이렇게 하니까 2개 다 바뀌더라구요...
    getElementById()는 인자 값을 1개 밖에 못 받나요??ㅠㅠ 다중으로 받으려면 어떻게 해야 하나요?
  14. 실습 4 에서 body에 id를 주지 않고 onclick="body.className='white' 이런식으로 해도 괜찮겠죠?
  15. 이예강
    아마 by를 대문자로 써야 할겁니다 ㅎㅎ
    대화보기
    • Michael
      완료!
      감사합니다~
    • 클로버
      항상 감사합니다!
    • 안태인
      계속 버튼을 눌러도 색깔이 안바뀌어서 요소검사를해봣더니 getElementbyId "개체가 'getElementbyId' 속성이나 메서드를 지원하지 않습니다. " 라고 뜨네요. 뭐가 문제인가요
    • jayxwoo
      강의 잘 들었습니다^^ 감사합니다.
    • 김태윤
      중간에 좀 멘붕이 오기도 했지만 제일 마지막 댓글 게시판과 온라인 채팅방 붙이는 거 보면서 전율이 돋네요.. 크~
    • 카라멜팝콘
      ctrl+F5로 오케이군요. 감사합니다!
      대화보기
      • minjoon0514@gmail.com
        저도 처음에 css가 적용이 안되서 멘붕이 왔었습니다...
        하지만 다른 계정을 사용해 보거나 캐시를 무시하고 페이지를 새로고침 해보았더니 (윈도우의 경우 ctrl+F5, 맥의 경우 shift+cmd+r) css가 적용이 됐습니다.
        참고로 <link rel="stylesheet" type="text/css" href="http://localhost/style.css">을
        <link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1">으로 바꿔도 된다고 하시네요.^^
      • GoldPenguin
        완료했습니다.
      • bm.hmbl@gmail.com
        감사합니다.
      • Baekkyu Han
        자바스크립트 실습
        JS 웹 어플 만들기
        White Black 단추
        실습1~5
        CSS HTML JS 각각의 역할
        CSS style
        HTML 정보
        JS 제어
      • 박예지
        감사합니다!!!
      • Molang
        ㅠㅠ 버튼 다 했는데 색이 안변해요
        코드 틀린거 없는데 왜 변하지 않죠? 캐시지우는건 어떻게 하나요 그건 css?ver1로해서 실헹되는데...
        그리고 주석처리하는데 될 때가 있고 안 될때가 있는데 저만 그런가요...?
      • 가영
        black 으로 바꾼 상태에서 다른 페이지로 이동하면 다시 white로 바뀌는데 default값이 white라서 뜨는건가요??
        그러면 black으로 바꾼 페이지에서 다른 페이지로 넘어갔을 때도 black을 유지하는 건 어떻게하면 되나요??
      • 가영
        완료!
      • 완료 ^^
      • 고맙습니다. 캐쉬 지우니 되네요. ^__^
        대화보기
        • GoldenBough
          감사합니다.
        • shonny
          감사합니다.
        • 현지
          page.vc.html 파일을 열고 localhost페이지에 들어가니까 큰제목(?)인 Javascript가 안보이네요...어찌 된건지...
          코드 다 비교해봐도 똑같이 했는데...나오게 하려면 어떤 방법이 있을까요...?
        • 박해민
          기존에 css수업할 때 chrome 기술자 도구에서 디자인을 이리 저리 바꾸고 저장되 있어서 그런지 이번 수업을 따라하면 계속 변화없는 화면이 보여지네요.
          safari에서 실행하면 문제 없는데 크롬에서만요.
          이거 reset 할 수 있는 방법이 있을까요?
        • FirstSubject
          감사합니다
          대화보기
          • 김범진
            좋네요 완료
          • Seul_Lee
            마지막 활용부분에서요 저는 지금 mac에서 chrome이랑 codeanywhere를 쓰고있는데요, disqus를 넣어보니까 안보이길래 inspect에 들어가서 console에 보니까 "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT"라고 뜨는데 요건 무슨 뜻인가요?
          • Myeongjin Ko
            완료
          • ㄱㅁ
            크롬에서는 캐쉬안에 기존 css를 읽어서 변경된 css가 적용이 안되는데
            캐쉬를 비워주면 변경된 css가 적용된다.
          • markerss2
            완료!
          • 정재욱
            ok
          • ㅁㅁ
            css적용이 안되시면 ctrl+F5를 누르셔서 캐시를 지우고 다시 새로고침하는 기능을 사용해보세요
          • Kim SeungChan
            css 적용이 안되어서 뭘 실수했지,.. 저번에 크롬에 'css'라는 extension을 설치해서 이것저것 바꿔놨더니 오류가 발생했나 싶어서 internet explorer로 실행해보니 그대로 작동하더라구요.
            나중에 아래댓글 보고 ?ver=1 입력하니깐, 크롬에서도 이상없이 작동하네요.(explorer로도 작동) 이유가 궁금하네요..
          • 조용히나와
            저도 css적용이 안되서 어리둥절했는데
            왜 ver=1을 써야 하는거죠?
            대화보기
            • Five Senses
              기본부터 시작하자
            • 인재진
              수강완료^^
              수고하세요
            • 실습 sound cording 에서 5분34초에 body.black에 배경색과 글씨색 지정되어있는데 왜 body.black a 만드는지 아시는분있나요? 이거는 어떨때 만드는건가요???
              >> a 태그는 색상을 직접 지정해 주지 않으면 안되니까요~~ ^^; 색상을 부모 태그로부터 상속을 못받더라구요.
              대화보기
              • 시바견
                자바 맛보기!
              • 코딩학습생
                강의 잘 들었습니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기