웹 애플리케이션 만들기

자바스크립트 실습

 실습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. Noel J Park
    자바스크립트 역시 쉽지 않네요. 이제 시작인데 ㅎㅎ css까지는 '아 그렇구나~' 하는 생각이 들었는데 자바스크립트는 함수의 등장에서 '뭐지 이건 ㅠㅠ'이라는 생각이 확 오네요.
  2. 장고한
    getElementById는 Element를 Id를 통해서 가져온거라고 보시면돼요.
    예를들면) 실습2에서 alert(getElementById('user_input').value 중 getElementById('user_input')로 id가 그 윗줄에서
    user_input인 <input>을 불러온것이구요.
    실습4에서getElementById('target').className='em' 중 getElementById('target')를 통해 id가 target인 <ol>을 불러온거라고 보시면 되요.

    두개의 방향이 다른 이유는 실습2는 .value를 통해 불러온 element의 값을 읽은 것이고
    실습4는 .className을 통해 불러온 element를 'em'이라는 class로 정의시키는 거죠.

    방향이 다르다고 느낀건 하나는 값을 읽는거고 다른 하나는 정의하는 것으로 느껴져서 그럴꺼에요.
    getElementById의 다양한 기능이라고 보시면 되겠습니다
    대화보기
    • 정문경
      실습2에서 alert(getElementById('user_input').value 여기에선 user_input의 값을 alert에 반환해주었고,
      실습4에서 getElementById('target').className='em' 에서는 target 에다가 값을 반환해주었는데..뭔가 이 둘간의 방향이 다른것 같아서요.. 전자에서는 필요한 값을 "user_input"에서부터 가져왔고, 후자에서는 값을 "targer"으로 보내준 셈이라고 생각되는데요.. getElementById를 어떤 기능이라고 이해해야 할까요..도와주세요 ㅠㅠ
    • 정문경
      잘봤습니다~ getElementById <-- 요 기능이..많이 아리쏭하네요..ㅠ
    • 송성태
      와, 대단하네요.
      HTML, CSS, Java의 삼각관계.
      감사합니다!
    • 리브
      채팅 코드를 붙이고 관리자 화면에서 제가 채팅치고 채팅이 왔는데 채팅이 없다고 뜨네요.. 이건 무슨 경우일까요?
    • 리브
      아! 해결됐습니다! 사이트 하단 부분에 있더라구요! 혹시나 못찾으시는 분들을 위해 댓글 남겨놓습니당~
      대화보기
      • 리브
        마지막 동영상에서 4:02 초에 나오는 universal code 라는 항목이 없는데 뭘 선택하면 되나요?
      • 베타고
        ul에 해당하는 버튼을 하나 더 만들어주시던지 아니면 ID지정을 body에다가 해주셔야합니다.
        동일한 id값 주게되고 이것이 중복되버리면 코드실행 순서에 따라 가장 상위의 지정 값만 한번만 실행하고 맙니다.
        하나의 버튼으로 전체 지정을 하고싶으면 body에 id값을 지정해 주시던지 하시면 될 것같습니다. 간단하지만 꽤 여러 방법이 나오더군요.
        대화보기
        • PassBy
          @알파고
          id는 마치 주민등록번호와 같아서 서로 다른 태그 사이에서 중복되어 사용될 수 없습니다.
          만약에 여러 태그를 동시에 선택해서 한꺼번에 클래스를 바꿔주고 싶으면 클래스를 사용하시는 것이 좋습니다.
          다만 getElementsByClassName()은 어떤 한 element가 아니라 배열(array)를 반환하기 때문에 써주신 방법으로는 코드 적용이 안 되구요.

          다음을 참고 해주시기 바랍니다 :)
          <!-- 이 스크립트 코드를 적당한 곳에 넣어주세요. -->
          <script>
          function changeClass() {
          var elements = document.getElementsByClassName('target');
          var i = 0;
          while( i < elements.length) {
          elements[i].className= 'target em';
          i = i + 1;
          }
          }
          </script>

          <!-- 버튼 태그와 ul, ol 태그를 다음과 같이 바꿔주세요 -->
          <ol class='target'>
          <ul class='target'>
          <input type="button" value="강조" onclick="changeClass()" />
        • 파이쏭
          9월28일시작 스크립트 실습 끝~
        • 완료! 어려워서 복습했어요
        • Dongwon Shin
          수강완료했습니다.
        • 알파고
          제가 짠 코드인데요.

          <ol id="target">
          <li>html</li>
          <li>css</li>
          <li>javascript</li>
          </ol>
          <ul id="target">
          <li>최진혁</li>
          <li>최유빈</li>
          <li>한이람</li>
          <li>한이은</li>
          </ul>
          <input type="button" value="강조" onclick="document.getElementById('target').className='em'" />

          보시면
          예재에서는 ol태그에만 id값을 줘서 버튼을 누르면 효과가 들어가는데

          제가 한것처럼 ul테그에도 id값을 주면 같이 효과가 들어가야되는거 아닌가요?
          저는 해보니 ol태그만 효과가 들어가서요.

          혹시나해서 전체 코드 올려봐요~
        • 9.27 완료
        • hyun
          9/26완료
        • 효근
          대소문자는 구분이 필요하군요
        • 다시시작
          완료
        • 정문경
          왜 전 onfocus , onblur 두가지가.. 한번 클릭하면 끝없이 실행될까요 ㅠㅠ
        • 주주맘마
          완료
        • 왓떠뻐꺼
          완료했습니다. 감사합니다.
        • 재밌습니다. 얼른 코드에 익숙해져서 사이트 구축 해보고싶네요..
        • SanFrancisco
          맨 뒤의 댓글이랑 채팅 위젯 붙이는 거는 정말 흥미롭고 실용적이네요! 앞으로도 이렇게 실용적인 예제들로 프로그래밍 실력을 확인시켜주세요 ㅎ
        • Lee Seulgi
          우아 정말 너무 신기해요!!!!
        • Youngil Jin
          왜 안되나했는데... 한참 밑에 누가 적어놔서 알았네요!!!
          ctrl+f5 눌러서 캐쉬를 재부팅 해야 된답니다...
        • 슈팅스타
          자바스크립트는 HTML을 프로그래밍 적으로 제어하기 위한 언어
        • healer
          완료 으악~~~~~~~~~~~~
        • 호로로로로롤
          <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개 밖에 못 받나요??ㅠㅠ 다중으로 받으려면 어떻게 해야 하나요?
        • 실습 4 에서 body에 id를 주지 않고 onclick="body.className='white' 이런식으로 해도 괜찮겠죠?
        • 이예강
          아마 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 할 수 있는 방법이 있을까요?
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기