json jquery 웹기능사 교안 다운로드

JavaScript & jQuery

jQuery 소개

 jQuery

jQuery 사용법

- 모든 브라우저에서 동일하게 동작하는 클라이언트 JavaScript 라이브러리

- 문서 객체 모델과 관련된 처리, 일관된 이벤트 연결, 시각적 효과를 쉽게

구현할 수 있음

- Ajax 애플리케이션을 쉽게 개발할 수 있음

- 독립된 언어가 아니라 JavaScript에서 사용할 수 있는 라이브러리임

- jQuery 라이브러리의 큰 용량 때문에, 작은 규모의 프로젝트에서는 속도

저하 문제를 야기시킬 수 있음

 CDN 호스트를 사용하는 방법

- CDN은 Content Delivery Network의 약자로, 온라인상의 대용량

콘텐츠를 빠르게 전송하는 기술을 말함

 jQuery 라이브러리를 직접 내려 받아 사용하는 방법

- jquery.com 사이트에서 라이브러리를 내려 받아 jQuery 라이브러리

파일의 경로를 지정함

jQuery 사용법

 $(document).ready()

- 웹 페이지의 로딩이 끝나고 사용할 수 있는 상태가 되면 수행될 기능

정의

$(document).ready(function(){ alert('one'); // 웹 페이지의 로딩이 끝나면 one 출력 });

$(function() { alert('two');});

- 사용 예

<html> <head> <meta charset="UTF-8"> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>나를 누르면 없어짐 - 1</p> <p>나를 누르면 없어짐 - 2</p> <p>나를 누르면 없어짐 - 3</p> </body> </html>

jQuery 사용법

JavaScript & jQuery

jQuery 작성법

 기본 문법

$(제어대상).method1().method2();

jQuery 기본 문법

- $은 jQuery에 access한다는 뜻

- method1()은 (제어대상)에 대해서 수행될 작업

- ‘$(제어대상)’은 주어, ‘method1().method2()’은 서술어로 대치됨

 jQuery 선택자

- 페이지 내의 요소들에 접근하는 역할

- 사용 예

</script> }); $('.item1, .item2').css('color', 'blue'); $('h1.item').css('color', 'orange'); $('.item.cc').css('color', 'yellow'); <body> <p>*********<p> <h2>h2</h2> <h1 id="header1">h1#header1</h1> </body> <h1 class="item1">.item1</h1> <h1 class="item2">.item2</h1> <h1 class="item">h1.item</h1> <h1 class="item cc">.item.cc</h1> <script type=“text/javascript”> $(document).ready(function() {$(‘*’).css(‘color’, ‘red’); $(‘h2’).css(‘color’, ‘green’); $(‘h1#header1’).css(‘color’, ‘purple’);

jQuery 기본 작성법

 each() 메소드

- jQuery로 배열을 관리할 때는 each() 메소드를 사용함

$.each(object, function(index, item) {}) $(selector.each(function(index, item) {})

 $.each() 메소드의 첫 번째 매개변수에는 배열, 두 번째 매개변수에는

index, item을 갖는 함수를 삽입함

 index는 배열의 인덱스 또는 객체의 키, item은 해당 인덱스나 키가

가진 값임

 addClass() 메소드

- 문서 객체에 class 속성을 추가하는 메소드

 removeClass() 메소드

- 문서 객체의 class 속성을 제거하는 메소드

 $.noConflict() 메소드

- 여러 JavaScript 프레임워크를 함께 사용할 때, 충돌 방지를 위해 사용함

- 식별자 ‘$’ 대신 ‘jQuery’을 사용함

$.noConflict(); jQuery(document).ready(function() { alert(‘jQuery(document).ready’); }); var J = jQuery; J(document).ready(function() { alert(‘J(document).ready’);

배열 관리

JavaScript & jQuery

문서 객체 선택

 문서 객체 선택

- 문서 객체를 다양한 방식으로 선택할 수 있음

- 일반적인 선택이 아닌 filter 메소드를 이용해 특정한 객체를 선택할 수

있음

- 주요 함수 : first(), last(), eq()

-$(메요소소)드.eq사(0용); /예/ 0번 인덱스 문서 객체 선택 $(요소).first(); // 첫 번째 문서 객체 선택 $(요소).filter(function(i){i==0;});

 filter 관련 메소드로 문서 객체 선택

① filter 메소드를 이용해 선택할 객체들 생성

② 작성된 객체를 선택하는 메소드 생성

$(document).ready(function(){ var first = $(‘h1’).first().text(); var eq1 = $(‘h1’).eq(2).text(); var eq2 = $(‘h1’).eq(4).text(); var last = $(‘h1’).last().text(); var odd = $(‘h1:odd’).text(); // 짝수는 even alert(first); alert(eq1); alert(eq2); alert(last); alert(odd);

문서 객체 선택 방법

 filter()로 문서 객체 선택

① filter 메소드를 이용해 선택할 객체들 생성

② filter() 메소드를 이용해 원하는 객체를 선택하는 코드 작성

$(document).ready(function(){ var filter = $(‘h1’).filter(function(index){ return index % 2 == 0; }).text(); alert(filter); });

문서 객체 선택 방법

JavaScript & jQuery

문서 객체 생성

 prepend()와 append() 메소드

- prepend() : 특정 문서 객체의 이전 부분에 문서 객체를 생성함

- append() : 특정 문서 객체의 맨 뒤에 문서 객체를 생성함

기본 상태

메소드 사용

<p>Hello</p>

$(“p”).prepend(“<b>prepend</b>”);$(“p”).append(“<b>append</b>”);

결과

<b>prepend</b><b>append</b><p>Hello</p>

문서 객체 생성 방법

 before()와 after() 메소드

- before() : 이전 문서 객체를 생성함

- after() : 다음에 문서 객체를 생성함

기본 상태

메소드 사용

<p>Hello</p>

$(“p”).before(“<b>before</b>”);$(“p”).after(“<b>after</b>”);

결과

<b>before</b><b>after</b><p>Hello</p>

문서 객체 생성 방법

 prepend()와 append()로 문서 객체 생성

① 메소드를 사용할 기본 요소와 버튼 생성

<p>Hello world!</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id=“btn1”>prepend</button> <button id=“btn2”>append</button>

② 버튼을 누르면 <p>와 <ol>에 <b>와 <li>를 추가하는 prepend()와

append() 함수 사용

$(document).ready(function(){ $(“#btn1”).click(function(){ $(“p”).prepend(“<b>prepend</b>”); $(“ol”).prepend(“<li>prepend item</li>”); }); $(“#btn2”).click(function(){ $(“p”).append(“<b>append</b>”); $(“ol”).append(“<li>append item</li>”); }); });

문서 객체 생성 방법

 before()와 after()로 문서 객체 생성

① 메소드를 사용할 기본 요소와 버튼 생성

<p>Hello world!</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id=“btn1”>prepend</button> <button id=“btn2”>append</button>

② 버튼을 누르면 <p>와 <ol>에 <b>와 <li>를 추가하는 before()와 after()

메소드 사용

$(document).ready(function(){ $(“#btn1”).click(function(){ $(“p”).before(“<b>before</b>”); $(“ol”).before(“<li>before item</li>”); }); $(“#btn2”).click(function(){ $(“p”).after(“<b>after</b>”); $(“ol”).after(“<li>after item</li>”); }); });

문서 객체 생성 방법

JavaScript & jQuery

문자 조작

 text()와 html() 메소드

- 선택 연산자로 선택한 요소에 대해서 text() 메소드를 이용해 문자를

변경하거나 html() 메소드를 이용해 선택된 요소의 HTML 요소를 변경함

기본 상태

메소드 사용

<p>hello world!</p><h1> hello world!</h1>

$(“p”).text(“Thank you!”);$(“h1”).html(“<h2>Thank you!</h2>”);

결과

<p>Thank you!<p><h1><h2>Thank you!</h2></h1>

문자 조작 방법

 val()와 attr() 메소드

- 선택 연산자로 선택한 요소의 value값을 val() 메소드를 사용하여

얻어오거나 변경할 수 있고, attr() 메소드를 사용하여 속성값을

얻어오거나 변경할 수 있음

기본 상태

메소드 사용

https://www.google.com”><input type=“text” value=“Hello”>

alert($(“a”).attr(“href”));alert($(“input”).val());

결과

“https://www.google.com”“Hello”

문자 조작 방법

 text()와 html() 이용 문자 조작

① 각 메소드를 적용할 <p> 요소와 <input> 요소, 버튼을 만드는데,

이 때 각각의 id 값을 지정하여 서로 구분할 수 있게 정의함

<p id=“test1”>This is a paragraph.</p> <p id=“test2”>This is a paragraph.</p> <p>Input field: <input type=“text” id=“test3” value=“Thank you!”></p> <button id=“btn1”>Text, HTML 변경</button> <button id=“btn2”>값 변경</button> <button id=“btn3”>값 얻어오기</button>

② btn1 버튼을 누르면 각 id 값을 이용하여 test1의 텍스트, test2의

요소를 변경하는 메소드, btn2번째 버튼을 누르면 test3 input 박스의

값을 변경하는 메소드, btn3번째 버튼을 누르면 input 박스의 값을

띄워주는 메소드를 정의함

$(document).ready(function(){ $(“#btn1”).click(function(){ $(“#test1”).text(“Hello world!”), $(“#test2”).html(“<b>Hello world!</b>”); }); $(“#btn2”).click(function(){ $(“#test3”).val(“Hello world!”); }); $(“#btn3”).click(function(){ alert(“값 : ” + $(“#test3”).val()); }); });

문자 조작 방법

 val()와 attr() 이용 문자 조작

① 메소드를 적용할 네이버로 링크를 연결하는 <a> 요소와

이벤트를 발생시킬 버튼을 생성함

https://www.naver.com” id=“link”>

네이버</a></p> <button>링크에 연결된 주소</button>

② 버튼을 클릭하는 이벤트가 발생하면 링크에 연결된 주소를 attr()

메소드를 이용해서 얻어온 후 경고창에 출력함

$(document).ready(function(){ $(“button”).click(function(){ alert(“링크 주소 : “+$(“#link”).attr(“href”)); }); });

문자 조작 방법

JavaScript & jQuery

스타일 조작

 css() 메소드

- 선택된 요소의 스타일을 조작함

기본 상태

메소드 사용

<p>hello world!</p>

$(“p”). css (“color”, “blue”);

결과

<p style =“ color:blue ”> Hello world!</p>

스타일 조작 방법

 addClass()와 removeClass() 메소드

- 선택자에 의해 선택된 요소에 클래스 스타일을 추가하거나 제거할 수 있음

기본 상태

스타일 지정

<p>hello world!</p>

.red {color: red;}

메소드 사용

$(“p”). addClass (“red”);

결과

<p class =“red”> Hello world!</p>

스타일 조작 방법

 css() 메소드 이용 스타일 조작

① css()를 적용할 요소들과 이벤트를 발생시킬 버튼을 생성함

② 버튼 클릭 이벤트가 발생하면 css() 메소드를 이용해 p 태그 영역의

배경색을 노란색으로 변경하는 스크립트 생성

$(document).ready(function(){ $(“button”).click(function(){ $(“p”).css(“background-color”, “yellow”); }); });

스타일 조작 방법

 addClass()와 removeClass() 이용 스타일 조작

① 메소드를 적용할 요소들과 이벤트 처리할 버튼들을 생성함

② 적용할 스타일을 클래스 연산자를 이용하여 정의함

.important { font-weight: bold; font-size: xx-large; } .blue { color: blue; }

③ 버튼을 클릭하면 addClass()와 removeClass() 메소드를 정의해

important와 blue로 정의된 스타일을 적용함

$(document).ready(function(){ $(“#btn1”).click(function(){ $(“#div1”).addClass(“important blue”); }); $(“#btn2”).click(function(){ $(“#div1”).removeClass(“important blue”); }); });

스타일 조작 방법

JavaScript & jQuery

이벤트 연결

 이벤트

- 마우스를 해당 객체에 올리거나 클릭, 또는 키보드를 치는 등의

브라우저에서 발생하는 모든 동작을 의미함

- 주요 메소드

mouseup : function(){ } mousedown : function(){ } mouseenter : function(){ } mouseleave : function(){ } click : function(){ }

이벤트 연결 방법

 클릭 이벤트 처리

① 클릭 이벤트 대상이 될 요소들을 생성함

<p>클릭하면 사라집니다.</p> <p>클릭해 보세요!</p> <p>클릭하세요!</p

② 클릭하면 요소가 사라지면서 경고 창을 출력하는 함수를 정의함

$(document).ready(function(){ $(“p”).on(“click”, function(){ $(this).hide(); alert(“글자가 사라집니다.”); }); });

이벤트 연결 방법

 마우스 이벤트 처리

① 마우스 이벤트의 대상이 될 요소를 생성함

② mouseenter, mouseleave, click 이벤트를 이용하여 마우스를 올렸을

때, 내렸을 때, 클릭할 때 각각 다른 배경색을 적용하는 함수를 정의함

$(document).ready(function(){ $(“p”).on({mouseenter: function(){ $(this).css(“background-color”, “lightgray”); }, mouseleave: function(){ $(this).css(“background-color”, “lightblue”); }, click: function(){ $(this).css(“background-color”, “yellow”); } }); });

이벤트 연결 방법

JavaScript & jQuery

show와 hide

 hide() 메소드

- 노출되어 있는 요소 영역을 숨김

$(“요소”).hide();

 show() 메소드

- 숨겨져 있는 요소 영역을 보여줌

$(“요소”).show();

show와 hide 관련 메소드

 hide() 메소드 이용 효과

① 이벤트를 발생시킬 버튼과 사라질 문장을 생성함

<button> 이 버튼을 누르면 아래 글이 사라집니다. </button> <p> 위 버튼을 누르면 이 글이 사라집니다. </p>

② 버튼을 클릭하면 문장이 사라지는 메소드를 추가함

show와 hide 관련 메소드

 show()와 hide() 메소드 이용 효과

① 이벤트를 발생시킬 버튼과 나타날 문장을 정의함

<button> 이 버튼을 누르면 아래 글이 나타납니다. </button> <p> 위 버튼을 누르면 이 글이 나타납니다. </p>

② 기존 문장을 숨기는 hide() 메소드를 호출하고, 버튼을 클릭하면

문장이 나타나는 show() 메소드를 호출하는 실행문을 정의함

show와 hide 관련 메소드

JavaScript & jQuery

slide와 fade

 slide() 메소드

- slideUp() : 요소 영역을 위로 올림

- slideDown() : 요소 영역을 아래로 내림

$(“요소”).slideUp(); $(“요소”).slideDown();

 fade() 메소드

- fadeIn() : 요소 영역이 나타나게 함

- fadeOut() : 요소 영역이 사라지게 함

$(“요소”).fadeIn(); $(“요소”).fadeOut();

slide와 fade 관련 메소드

 slideUp()과 slideDown() 메소드 이용 효과

① 이벤트를 발생시킬 버튼과 슬라이드 될 문장을 정의함

<button id=“slide_up”> 위로 </button> <button id=“slide_down”> 아래로 </button> <p>Hello world!</p>

② 문장이 올라가고, 내려가는 코드 블록을 정의함

slide와 fade 관련 메소드

 fadeIn()과 fadeOut() 메소드 이용 효과

① 이벤트를 발생시킬 버튼과 사라지고 나타날 문장을 정의함

<button id=“fade_out”> 사라지기 </button> <button id=“fade_in”> 나타나기 </button> <p>Hello world!</p>

② 문장이 사라지고, 나타나는 실행문을 정의함

slide와 fade 관련 메소드

JavaScript & jQuery

animation

 animate() 메소드

- 요소의 스타일을 변경해 마치 요소가 움직이는 것처럼 보이게 함

- 요소의 크기나 배경색, 글자의 폰트 등 다양한 속성값을 변경할 수 있음

$(“요소”).animate({변경할 스타일});

animation 관련 메소드

 animate() 이용해 글자 이동 및 커지는 효과

① 이벤트를 발생시킬 버튼과 애니메이션이 적용될 문장을 생성하고,

문장의 position 속성의 기본값을 지정함

<button> Animation </button> <br> <p style=“position:absolute;”> Hello world! </p>

② 버튼을 클릭할 때마다 오른쪽으로 50px만큼 움직이고, 글자가 2em만큼

커지는 코드 블록을 작성함

animation 관련 메소드

 animate() 이용해 글자 커졌다 작아지는 효과

① 이벤트를 발생시킬 버튼과 애니메이션이 적용될 문장을 생성함

<button> Animation </button> <br> <p> Hello world! </p>

② 버튼을 클릭하면 글자가 커졌다가 작아지는 코드 블록을 작성함

animation 관련 메소드

JavaScript & jQuery

조상 요소 선택 함수와

자손 요소 선택 함수

 관계의 개요

- html의 요소 간의 관계를 말함

- 요소들의 관계에는 조상, 자손, 형제가 있음

① 조상 : 부모, 조부모, 증조부모 등

② 자손 : 자식, 손자, 증손자 등

③ 형제 : 같은 부모 요소를 가진 모든 요소

 DOM 트리

요소 간의 관계

 루트 요소인 div 요소를 제외한 모든 요소는 div 요소의 자손임

 루트 요소인 div 요소는 모든 요소의 조상임

 같은 부모 요소(ul)를 가진 li 요소들은 형제임

 관계 구조의 예

요소 간의 관계

 parent()

- 특정 요소의 바로 위의 부모 요소

- 부모 요소는 단 하나임

- 사용 예

$(document).ready(function(){ $(“li”).parent(); });

조상 요소 선택 함수

 parents()

- 특정 요소부터 루트까지의 모든 요소에서 검색

- 사용 예

$(document).ready(function(){ $(“li”).parents(); });

조상 요소 선택 함수

 parentUntil()

- 선택된 두 요소 사이의 모든 요소

- 앞의 값이 후손 요소, 뒤의 값이 조상 요소

- 사용 예

-$(document).ready(function(){ $(“li”).parentsUntil(“div”); });

조상 요소 선택 함수

 후손 요소인 li와

조상 요소인 div

사이에 있는

ul이 선택됨

 자손 요소 선택 함수

- 특정 요소보다 더 하위의 단계에 포함되는 모든 요소들

 children()

- 특정 요소의 후손인 모든 요소

$(document).ready(function(){ $(“ul”).children(); });

- 사용 예

자손 요소 선택 함수

 find()

- 특정 요소의 후손인 모든 요소

- 사용 예

$(document).ready(function(){ $(“ul”).find(); });

자손 요소 선택 함수

 find()의 경우 어떠한 값을 지정할지 명확히 표기해 주어야 함

 *의 경우 모든 값을 의미함

JavaScript & jQuery

형제 요소 선택 함수

 형제 관계의 개요

- 같은 부모를 가지고, 특정 요소와 동일한 단계에 위치하는 모든 요소들

 siblings()

- 특정 요소와 형제 관계에 있는 모든 요소 반환

- 사용 예

$(document).ready(function(){ $(“h4”).siblings(); });

형제 요소 선택 함수

 형제 요소에

자기 자신은

포함하지 않으므로

4번이 제외된

나머지가 선택됨

 next()

- 특정 요소 바로 다음에 오는 형제 요소 반환

- 사용 예

$(document).ready(function(){ $(“h4”).next(); });

형제 요소 선택 함수

 nextAll()

- 특정 요소 다음에 오는 모든 형제 요소 반환

$(document).ready(function(){ $(“h3”).nextAll(); });

- 사용 예

형제 요소 선택 함수

 현재 2번과 8번의

요소 명이 h3이기에

nextAll() 작업을

2회 찾아줌

 nextUntil()

- 특정 요소 이후부터의 속성값으로 주어진 요소 사이의 모든 형제 요소

반환

- 속성값으로는 앞에 선언한 요소 이후에 나오는 형제 요소 값을 입력함

$(document).ready(function(){ $(“h3.a”).nextUntil(“h6”); });

- 사용 예

형제 요소 선택 함수

 prev()

- 특정 요소 바로 전에 온 형제 요소 반환

$(document).ready(function(){ $(“h4”).prev(); });

- 사용 예

형제 요소 선택 함수

 prevAll()

- 특정 요소 전에 나오는 모든 형제 요소 반환

$(document).ready(function(){ $(“h4”).prevAll(); });

- 사용 예

형제 요소 선택 함수

 prevUntil()

- 특정 요소 이전부터의 속성값으로 주어진 요소 사이의 모든 형제 요소

반환

- 속성값으로는 앞에 선언한 요소 이전에 나오는 형제 요소 값을 입력함

$(document).ready(function(){ $(“h4”).prevUntil(“span.a”); });

- 사용 예

형제 요소 선택 함수

JavaScript & jQuery

슬라이드, 유효성 체크,

팝업 창 띄우기 기능 적용

 jQuery의 slideUp(), slideDown() 함수 사용

- 제목 부분을 마우스로 누르면 내용 부분이 위로 슬라이드 되고,

제목 부분을 다시 누르면 아래로 슬라이드 됨

- 제목 부분을 마우스로 반복적으로 누르면 내용 부분이 위로 슬라이드와

아래로 슬라이드 동작을 반복함

슬라이드 기능 적용

 유효성 체크

- 회원 가입 시 이름 등 반드시 입력해야 하는 데이터를 입력하지 않고

회원 가입 버튼을 누르면 경고 창을 출력하고, 요청이 전송되지 않음

 팝업 창 띄우기

- 검색 버튼을 누르면 검색 팝업 창이 출력됨

팝업 창 띄우기 기능 적용

유효성 체크 기능 적용

JavaScript & jQuery

마우스 이벤트 처리,

요소 선택 함수,

이미지 슬라이드 기능 적용

 마우스 이벤트 처리

- 이미지에 마우스를 올리면 이미지가 확대되며, 마우스를 이미지 밖으로

가져가면 이미지가 축소됨

- 이미지를 마우스로 클릭하면 테두리가 생김

 jQuery의 eq(index) 함수 사용

- 짝수 인덱스 위치의 li 영역의 배경색을 회색으로 설정함

요소 선택 함수 적용

마우스 이벤트 처리 적용

 jQuery의 DOM 관련 함수 사용

- 이미지를 2초마다 왼쪽으로 슬라이드함

이미지 슬라이드 기능 적용

'자격증, 교육' 카테고리의 다른 글

1-제안서 평가결과 확인6과 p.136 B - 1(기존 학습지) 명문고등학교 1학년 영어과 학습지6과 p.136 B - 1(추가 학습지) 명문고등학교 1학년 영어과 학습지바이올린 점검표 (0)	2020.04.22
무상거주사실확인서 (0)	2020.04.16
“와쇼쿠(和食)”의 탄생 -와쇼쿠가 무형문화유산에 등재되기까지- 한국과 일본의 도시락 문화 비교 연구 (0)	2020.04.13
딕테이션, 섀도잉, 에코잉, The.Social.Network, 소셜네트워크 (0)	2020.04.13
열차감시원_교육자료, 철도운행안전관리자_근무상황_일지,화물일지 (0)	2020.04.09

제시의 생활기록부

json jquery 웹기능사 교안 다운로드

'자격증, 교육' 카테고리의 다른 글

티스토리툴바

json jquery 웹기능사 교안 다운로드

'자격증, 교육' 카테고리의 다른 글

관련글

티스토리툴바