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

라이브러리와 jQuery

id를 이용해서 요소 선택

<html>
    <body>
		<div id="target">Hello world!</div>
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script>
			$('#target').html('World Hello');
		</script>
	</body>
</html>

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

<html>
    <body>
		<div>Hello world!</div>
		<div>Hello world!</div>
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script>
			$('div').html('World Hello!');
		</script>
	</body>
</html>

 스타일 변경

<html>
    <body>
		<div id="target">Hello world!</div>
		<div>Hello world!</div>
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<button onclick="$('#target').css('background-color', 'green')">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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
       function changeColor(color){
         $('#body').attr('class', color);  
       }
       function readability(mode){
         if(mode){                          
             $('#header, #nav').hide();
         } else {
             $('#header, #nav').show();
         }
       }
    </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>

나중에 공부해주세요.

생활코딩 jQuery 수업

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688
댓글 본문
  1. kachragiren
    안녕하세요.
    정말 힘들어서 그러는데 제이쿼리로 click으로 특정 div에 html 파일을 load 하려고 하는데
    자꾸
    ailed to load file:///C:/Users/Kachragi.Ren/Desktop/web/galaxynote9.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    이런 것이 뜨면서 안되요.. 도와주세요..
  2. 이제 제이쿼리 다운로드는 3버전밖에 안되네요. https://jquery.com/
    다운을 하면 오류창이 뜨는데 혹시 아시는분 도움 부탁드립니다....
  3. moonlight1819
    부족한 답변 올려봅니다.

    작심폴더에 jQuery2.html에서 3번째 줄을 opentutorials.org.html에 42번째 줄에 있는 url주소로 통일시켜보니
    그러니까
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 이 코드로 변경해보니

    페이지 새로고침시 애니메니션이 안됬었는데 정상작동하였습니다.

    파일경로를 링크하지않고 url주소로 링크해주니 되었단 말입니다. 결과는 같았습니다.
  4. 후반양반무
    16년 02월 23일 지금 잘 됩니다.
    애니메이션 작동될때 막 희열이 느껴지네요 ㅎㅎ
  5. ㅇㅇ
    1.11.3 으로 지금 하고 있는데 잘되요~
  6. 초바비
    15강 중간까지 듣다가 멈쳤습니다.
    제이쿼리 다운파일 때문인지, 전혀 분할도 안되고 먹지가 않네요
    과감히 잠시 쉬려고 하는데...
    밑에 질문자님처럼 저 역시 그런데...

    방법 찾으신 분 계시면 덧글 좀 부탁드립니다.
    이고잉님께서 답변해주시면 더 감사하지만....ㅠㅠ
  7. 초바비
    저도 안됩니다.. 22
    대화보기
    • DR YOON
      jquery1.11.2.js 사용해서 따라했는데, 크롬 개발자도구 네트워크 창에서 jquery1.html만 잡히고 jquery는 밑에 잡히질 않네요... +.=
    • 류정우
      jquery 1.11.2.js 쓰는데 이고잉님 하신대로 해도 안됩니다...addClass 와 css 부터...ㅠㅠ

      이유를 알고 싶습니다ㅜㅜ
    • 빛나는새벽
      감사합니다
    • 포도당
      너무 재미있네요
    • 초보Pro
      좋은 강의 감사드립니다.

      .animate에서 제가 left:+=50" 후 , 쉼표를 누락 하였습니다.
      제대로 실행이 안되는 것은 당연한 것인데, 다른 jquery까지 모두 동작을 하지 않는 것이 궁금해서 질문 드립니다.
      *예시 참조필요

      [animate]
      $("#clickme").click(function() {
      $("#book").animate({
      opacity: 0.25,
      left: "+=50"
      height: "toggle"},
      5000, function() {

      });
      });
      [예시]
      .animate - height 부분에 쉼표 누락하였는데, 상단의 #target /#saykim 모두 jquery 동작하지 않음.
      <script>
      $('#target').html('World Hello').addClass('active').css('border', '5px solid yellowgreen');
      $('#saykim').html('What is going on??').addClass('active').css('border', '3px solid black');
      $("#clickme").click(function() {
      $("#book").animate({
      opacity: 0.25,
      left: "+=50"
      height: "toggle"},
      5000, function() {

      });
      });
      </script>
    • Bien
      자바 처음보는데 너무 잼있네요
      이런거였구나~~

      좋은 강좌 감사합니다.
    • 환글
      Animate 좋아요^^
    • Diew
      ㅋㅋㅋ 인터뷰 재밌네요! 항상 강의 잘 보고있습니다!~~ 정말고마워요
    • 한란
      http://minoci.net/1283
      이고잉님 인터뷰 링크한번 걸어봅니다 ㅋㅋ

      여기까지 작심 따라오신분들을 위한 소소한 즐거움~

      점점 갈수록 조회수가 떨어지네요... 그치만 빠샤!!
    버전 관리
    egoing@gmail.com
    현재 버전
    선택 버전
    graphittie 자세히 보기