생활코딩 오프라인 수업 라이브 - 작심40시간

JavaScript

요소선택

아이디를 이용해서 요소 선택 (getElementById)

<html>
    <body>
		<div id="target">Hello world!</div>
		<script>
			document.getElementById('target').innerHTML = 'World Hello';
		</script>
	</body>
</html>

태그명을 이용해서 요소 선택 (getElementsByTagName)

<html>
    <body>
		<div>Hello world!</div>
		<div>Hello world!</div>
		<script>
			var divs = document.getElementsByTagName('div');
			for(var i = 0; i < divs.length; i++){
				divs[i].innerHTML = "World Hello!";	
			}			
		</script>
	</body>
</html>

속성 변경 (setAttribute)

<html>
    <head>
		<style>
			.active {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="target">Hello world!</div>
		<div>Hello world!</div>
		<script>
			document.getElementById('target').setAttribute('class', 'active');			
		</script>
	</body>
</html>

스타일 변경 (style)

<html>
    <body>
		<div id="target">Hello world!</div>
		<div>Hello world!</div>
		<button onclick="document.getElementById('target').style.backgroundColor='green'">Change</button>
	</body>
</html>

이벤트 (click)

<html>
    <head>
		<style>
			.active {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="target">Hello world!</div>
		<div>Hello world!</div>
		<button onclick="document.getElementById('target').setAttribute('class', 'active')">Change</button>
	</body>
</html>

opentutorials.org.html 

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<style type="text/css">
		header {
			border-bottom:1px solid gray;
		}
		nav {
			float:left;
			padding-top:10px;
		}
		article {			
			float:left;
			width:600px;
			padding-left:30px;
		}
		body {
			font-size:0.8em;
		}
		h1 {
			font-size:3em;
		}
		h2 {
			font-size:2em;
		}	
        .toolbar {
            width:600px;
            text-align:right;
            float:left;
            padding-left:30px;
        }
        
        body.black {
            color:white;
            background-color:black;
        }
        .black a {
            color:red;   
        }
	</style>
    <script>
       function changeColor(color){
         document.getElementById('body').className=color;
       }
       function readability(mode){
        var header = document.getElementById('header');
         var nav = document.getElementById('nav');
         if(mode){             
             header.style.display = nav.style.display = 'none';
         } else {
             header.style.display = nav.style.display = 'block';
         }
       }
    </script>
</head>
<body id="body">
<header id="header">
	<h1>JavaScript</h1>
</header>
<nav id="nav">
	<ul>
		<li>JavaScript란 무엇인가?</li>
		<li>변수</li>
		<li>상수</li>
		<li>반복문</li>
		<li>조건문</li>
	</ul>
</nav>
<div class="toolbar">
    <input type="button" value="검은색" onclick="changeColor('black');" />
    <input type="button" value="흰색" onclick="changeColor('white');" />
    <input type="button" value="단순보기" onclick="readability(true);" />
    <input type="button" value="일반보기" onclick="readability(false);" />
</div>
<article>   
	<h2 id="title">JavaScript란 무엇인가?</h2>

	<p>JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.</p>

	<p><a href="#goal">자바스크립트로 할 수 있는 일</a>을 참고하면 알 수 있지만, 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용되고 있다. 그 효용이 다각적이면서도 배우기 쉬운 점 때문에 자바스크립트는 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어다.</p>

	<h3>역사</h3>

	<p>HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 만들어졌다. 이후에 이 언어는 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재된다. 후에 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨졌다.</p>

	<h3>ECMAScript</h3>

	<p>ECMAScript는 표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안이다. 현재의 자바스크립트는 ECMAScript 3 기반으로 만들어졌고, 현재 시점(2013년)에서는 ECMAScript 5가 표준으로 정의 되었고 이 버전의 자바스크립트를 브라우저 벤더들이 자신들의 브라우저에 구현하는 작업이 한창이다. 곧 ECMAScript 5의 새로운 기능들을 웹에서도 문제 없이 사용할 수 있게 될 것이다. ECMAScript 4는 기존의 자바스크립트와 너무 큰 차이점 때문에 표준으로 채택되지 못했다.</p>

	<h3>JavaScript 학습에 요구되는 선행학습</h3>

	<p>웹페이지를 동적으로 제어하기 위한 목적으로 자바스크립트를 학습한다면 아래 내용은 반드시 선행해야한다. 아래 내용을 학습 한 후에 본 수업을 공부하고 DOM을 학습하면 웹페이지를 프로그래밍적으로 제어 할 수 있다. 최근에는 DOM을 직접 제어하는 것 보다는 jQuery와 같은 라이브러리를 사용하는 것이 일반적이다. DOM에 대한 내용은 <a href="http://opentutorials.org/course/49/24" target="_blank">DOM 수업</a>을 참고하고 jQuery에 대한 내용은 <a href="http://opentutorials.org/course/53" target="_blank">jQuery 수업</a>을 참고한다.</p>

</article>
</body>
</html>

나중에 공부해주세요.

생활코딩 자바스크립트 수업

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688
댓글 본문
  1. Hosung Ki
    안녕하세요 작심40시간 보고 열심히 공부하고 있습니다. javascript다 보고 설거지 프로그래밍 실습을 해봤는데 코드가 작동을 안합니다. 왜 안하는지 잘 모르겠는데 도와주세요.
    <html>
    <meta charset = "utf-8">
    <head>
    <style>.contain {
    border-bottom:2px solid gray;
    border-left:2px solid gray;
    border-right:2px solid gray;
    width:300px;
    height:130px;
    margin:20px;
    padding:20px;
    }
    .label {
    margin-left:170px;
    }
    .dish {
    background-color:gray;
    margin:5px;
    width:280px;
    padding:5px 10px;
    }
    .clean{
    border:gray 1px solid;
    background-color:white;
    }
    .broken {
    background-color:black;
    color:white;
    }
    #dishcontain {
    padding-left:40px;
    float:right;
    }
    #run {
    margin-left:20px;
    padding:20px;
    width:340px;
    }
    </style>
    </head>
    <body>
    <div id="dishcontain">
    <div id="접시1" class="dish">접시</div>
    <div id="접시2" class="dish">접시</div>
    <div id="접시3" class="dish">접시</div>
    <div id="접시4" class="dish broken">깨진접시</div>
    <div id="접시5" class="dish">접시</div>
    <div id="접시6" class="dish broken">깨진접시</div>
    </div>
    <input id="run" type="button" onclick="설거지()" value="설거지" />
    <div id="건조대" class="contain"></div>
    <div class="label">건조대</div>
    <div id="쓰래기통" class="contain"></div>
    <div class="label">쓰래기통</div>
    <script>
    function 설거지 () {
    접시들 = [$('#접시1'), $('#접시2'), $('#접시3'), $('#접시4'), $('#접시5'), $('#접시6')];
    for (var i = 0; i < 접시들.length; i++) {
    닦을접시 = 접시들 [i];
    if (닦을접시.text() == '접시') {
    닦을접시.addClass('clean');
    $('#건조대').append(닦을접시);
    } else {
    $('#쓰래기통').append(닦을접시);
    }
    }
    }
    </script>
    </body>
    </html>
  2. 아앙?
    지금 질문해봤자 답해주실진 모르겠는데 ㅋㅋ .
    black a {
    color:red;

    이코드는 수정해도 아무런변화가 일어나지 않는데 필요한 코드인가욧?
  3. 이람이
    최고예요!
  4. 초바비
    재밌어요^^
  5. 항상 잘보구요 오프라인 강의 듣고싶네요
  6. 빛나는새벽
    강의 잘 들었습니다.
    오프라인 강의도 참석해 보고 싶은 마음이 생깁니다.^^
  7. Organic media
    개발자의 층위를 나누어서 설명해주신 점이 큰 도움이 되었습니다.
  8. egoing
    무료 입니다!
    대화보기
    • ㅜㅜ
      아..! 그렇구나 ㅎㅎ

      감사합니다 이고잉님

      그리고 또 궁금한게 있습니다~

      오프라인 강의는.. 유료인가요??
      대화보기
      • egoing
        언급하신 코드는 자바스크립트가 맞는데요 input 태그는 html이거든요~
        대화보기
        • ㅜㅜ
          <input type ="button" value="click" onclick="document.getElementById('target').setAttribute("class","active");" />

          이 코드에서

          "document.getElementById('target').setAttribute("class","active");
          이 부분 자체가 자바스크립트 언어가 아닌가요..?

          아니면 input이 HTML 언어라서 그런건가요?

          바쁘신데 죄송하네요..ㅜ
          대화보기
          • egoing
            Script 태그는 지금부터 자바스크립트가 온다는 것을 브라우저에게 알려주는 코드거든요
            대화보기
            • ㅜㅜ
              자바스크립트 강의 첫번째에

              <input type ="button" value="click" onclick="document.getElementById('target').setAttribute("class","active");" />

              이거는 왜

              <script></script>
              태그안에 넣어주면 안되는지 궁금합니다...
              대화보기
              • egoing
                저는 실행되고 있습니다. 확인 부탁 드려요
                대화보기
                • 링크
                  자바 세번째 강의 영상은 계속 실행이 안되네요... ???
                • egoing
                  아래 수업의 링크로 대신합니다~
                  http://opentutorials.org......683
                  대화보기
                  • egoing
                    setAttribute는 리턴 값이 엘리먼트가 아니기 때문에 작동하지 않습니다. jQuery에서는 작동합니다.
                    대화보기
                    • moti
                      그리고 html 안에서 document.getElementById('이름')뒤부터 . 을 이용해서 더 부가적으로 쓸 수 있잖아요 2개가 한계인가요? <button onclick="document.getElementById('target').setAttribute('class','active').innerHTML = 'World Hello'">change</button> target값을 가진얘를 데려와라. 그리고 active 라는 속성을 부여해라 그리고 World Hello 로 출력해라 했는데 active 속성부여까지만 먹힙니다.
                    • moti
                      Id 와 class 의 개념이 명확히 잡히지가 않습니다. 안보고 새로 만들어보는데 setAttribute('class','active') 부분에서 처음에 id 에다가 target 이라는 값을 줬으니까 setAttribute('target','active') 라고 줘야겠다 라고 생각했었거든요. "id가 target인 요소 안에 class 인 active란 속성을 넣으란 말이지요?" 에 맞다고 하셨는데요
                      그렇다면 id(target)는 변수의 이름이고 class 는 id 안에 들어있는 하위의 개념으로 봐야 하는건가요?
                    • miwerjoa
                      답변 감사합니다.
                      이해를 잘 못해도 반복하며 즐겁게 코딩생활을 지속하고 있습니다.
                      쉽게 따라할수 있게 강의를 해주시는 덕분 이라고 생각합니다.
                      대화보기
                      • egoing
                        음 저도 어떤 문제인지는 잘 모르겠습니다. 문제가 있다면 일단 버전관리를 건너 뛰셔도 됩니다. 버전 관리는 우리 수업에서 제일 중요하지 않은 부분입니다.
                        대화보기
                        • miwerjoa
                          질문이 있습니다.

                          메세지는
                          git not curently enabled.please open tools> options and go to the git tab to enable it.
                          때문에 소스트리를 사용못하고 있습니다.초기 안되어도 다음 강의로 넘어 가며 배웠했는데
                          자바스크립트 1강부터 소스트리가 나오는데 검색을 통해서는 해결을 못하고 있습니다.
                          다시 깔고를 반복한 상태입니다.
                        • HJ비가
                          다른 job 을 가지고있으면서 시간 날때 마다 공부하는데..
                          이제 겨우 html 과 css 를 다 보아습니다
                          이걸로 도데체 뭘 할 수있는지 모르겠지만 .. 끝까지 다라갈 볼랍니다.

                          이쪽은 전혀 몰라 도데체 방향을 잡을 수 없네요

                          ..
                        • 환글
                          이 세계는 보면 볼 수록 모두 연결된 것 같아요^^
                        • egoing
                          혹시 틀린 말이 있으면 알려주세요.

                          잘 모르고 하는 말이라 걱정 되요 ^^
                          대화보기
                          • egoing
                            예 맞습니다.
                            대화보기
                            • 러너잭
                              전자공학부 학부생이지만 마지막강의에서 말씀하신 내용은 처음 들어봤네요.. ㅎ
                            • 러너잭
                              setAttribute('class', 'active');

                              이 뜻이 id가 target인 요소 안에 class 인 active란 속성을 넣으란 말이지요?
                            • 안녕신세계
                              완전 빠른 답변 감사합니다ㅎㅎ

                              열심히 따라갈께요~~!
                              대화보기
                              • egoing
                                우선 아래의 수업을 먼저 보시고요.
                                http://opentutorials.org......866

                                문의 하신 코드로 인해서 HTML 엘리먼트가 어떻게 변경되는지를 살펴보시면 쓰임을 이해하실 수 있을꺼예요.

                                지금 100% 이해 안가시는 것은 당연합니다. 일단 완주하시고 아래 수업을 이수하시면 변수가 무엇인가와 같은 내용을 알 수 있어요. 모르는 상태를 조금만 견뎌주세요.
                                http://opentutorials.org....../49
                                대화보기
                                • 안녕신세계
                                  안녕하세요! 질문 좀 받아주세요~~~~ㅎ
                                  마지막 opentutorials.org.html 여기서 이 부분이 잘 이해가 가지 않습니다ㅠㅠ

                                  <script>
                                  function changeColor(color){
                                  document.getElementById('body').className=color;
                                  }
                                  function readability(mode){
                                  var header = document.getElementById('header');
                                  var nav = document.getElementById('nav');
                                  if(mode){
                                  header.style.display = nav.style.display = 'none';
                                  } else {
                                  header.style.display = nav.style.display = 'block';
                                  }
                                  }
                                  </script>

                                  아래 body에서 onclick 이벤트로 작동하는건 이해를 했는데 첫번째 function에서 body라는 id를 가져와서 .classname=color; 하는게 뭔지 잘 모르겠습니다ㅠㅠ
                                  그리고 두번째 function에서 var header = 의 의미도 잘 모르겠구요ㅠ
                                  마지막으로 if문에서 header.style.display = nav.style.display = 'none'; 이랑 block의 의미를 모르겠네요ㅠㅠ

                                  설명쫌 부탁드릴께요~~
                                버전 관리
                                egoing
                                현재 버전
                                선택 버전
                                graphittie 자세히 보기