생활코딩

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. 부건혁
    div에 id 갑을 넣지 않고
    div{
    float; right;
    }로 하면 안되나요?
  2. 서성진
    잘 봤습니다.
  3. 나그네
    최소 소스를 올려주셔야 뭐가 잘못 됐는지 알겠죠. 나중에 회사에 가셔서 버그리포트를 하게 되시면 최대한 상세하게 적어서 넘기세요. 웹사이트라면 익스플로러인지 크롬인지 버젼은뭔지 운영체제는 뭔지까지도!! 질문자도 답답해서 올린것이겠지만 이렇게 질문하시면 질문을 보는 사람도 답답합니다.
    대화보기
    • 부건혁
      id 대신 다른 이름을 사용해도 되나요?
    • Chony
      수업쭉 따라오면서 자주 있는 문제가 제가 코드를 똑같이 적었을 때는 뭔가 오류가 있어 실행이 안되는데..
      코드 적힌것을 그대로 따오면 잘 작동이되는데.. 문제가 무엇일까요 ㅠ.. 조금 구체적이지 않은 질문이기는 해도..
      코드를 적는 순서라던가.. 영역이 잘못 설정된 것일까요..? 답답한 감이 있어서 질문 드립니다.
    • sediments
      <header>에 javascript가 실종되서 댓글 남깁니다. ㅠㅠㅠㅠㅠ


      아무리 코드 비교해보고 복붙해도 나오질 않네요... 도움 부탁드립니다..ㅠㅠㅠㅠ
    • sediments
      onfocus와 alert 창이 무한 반복되서 댓글 남깁니다.


      밑에 댓글에 저와 같은 문제를 겪고 계신분들도 있는 것 같은데


      그것에 대한 솔루션은 못찾아서 댓글 남깁니다.


      도움 부탁드립니다. ㅠㅠ
    • sediments
      안녕하세요. 댓글 감사드립니다.


      focus와 alert를 같이 사용 못한다면 뭐라고 타입해야 할지 혹시 아시나요?
      대화보기
      • 유상원
        2017-11-11 완료!
      • 김지원
        저도 float:right을 했을때 우상단에 위치하지 않더군요.. 다른 분들이 하신것 처럼 shift+cmd+f5를 해봐도 바뀌지 않더라고요 그래서 이것저것 하던 중 style.css파일의 모든 float들을 좌우로 바꿔줬더니 적용이 되면서 다시 float:right를 하니깐 되더라고요
        코드에서 무엇인가 꼈던것 같아요
        대화보기
        • Noel J Park
          자바스크립트 역시 쉽지 않네요. 이제 시작인데 ㅎㅎ css까지는 '아 그렇구나~' 하는 생각이 들었는데 자바스크립트는 함수의 등장에서 '뭐지 이건 ㅠㅠ'이라는 생각이 확 오네요.
        • 장고한
          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 완료
              • 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 제어
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기