처음배우는 자바스크립트,...
TRANSCRIPT
처음배우는����������� ������������������ 자바스크립트,����������� ������������������ 제이쿼리#2����������� ������������������ 제이쿼리����������� ������������������ 이해����������� ������������������ &����������� ������������������ 배우기
ABCD,����������� ������������������ 스노우키위����������� ������������������ 한성일
1. 오늘은..
GOAL
• 몇가지 전달사항
• 코딩을 공부하는 효과적인 방법
• 제이쿼리?
• 제이쿼리 설정
• 제이쿼리 기본 사용법
• 이벤트 기본
주의 사항
<script></script> 블록은 프로그래밍 영역입니다.html, css 과는 다르게 문법이 틀리면 에러가 발생합니다.
에러가 발생하면 일단 디버거를 사용해봅시다.
코딩 공부 방법
상상만으로 코딩이 늘진 않습니다.직접 타이핑 해보세요
외울 필요는 없고 검색하는 능력과생각하는 연습이 중요합니다.
샘플을 마음껏 변형해보세요. 코딩과 에러는 한몸입니다.
왜 그럴까? 왜 저렇게 나오지?라는 생각이 중요합니다.
코딩 공부 방법 1일단은 만들고 싶은걸 찾아봅시다.
필요 기술이 나옵니다.php, python, java, javascript, arduino….
1
2
3 구글 검색을 통해서 가장 쉬운 튜토리얼을 찾아봅니다.
4 가장 쉬운 책을 찾아봅시다. (head first 시리즈 추천)
5 막히면 질문을 해봅시다. 다양한 코딩 커뮤니티
코딩 공부 방법 2
http://www.w3schools.com/
http://www.codecademy.com/learn
튜토리얼 형식으로 가장 쉽게 배울 수 있습니다.
2. 제이쿼리
자바스크립트 개선
• 기존 자바스크립트의 복잡성을 해결하기 위해 고안되었죠.• 기존 자바스크립트의 기능들을 개선하는 소스덩어리(라이브러리)• 제이쿼리가 나오면서 기존 웹개발자들은 환호했죠.
https://jquery.org/
특징
자바스크립트와 제이쿼리
document.getElementById(“ID”);document.getElementById(“ID”).style.property.innerHTML.value… 복잡 복잡
$(“TAG_NAME”);$(“#ID”);$(“.CLASS_NAME”);.val();…. 심플
자바스크립트의 기능들을 개선하는 레퍼(wrapper)라이브러리 입니다.
3. 사용방법
IMPORTjquery를 html 페이지에 포함시켜야 합니다.
<html> <head> … <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”> </script> …
</head> </html>
html page해당 html에 jquery 라이브러리가 포함됩니다.
소스
제이쿼리가 어떻게 생겼는지 보고 싶으시면 URL을 브라우져에 넣어보세요.
TEST
jq1.html<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습1</title> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”> </script> </head> <body> <p>Hello Jquery!</p> <script>
$(document).ready(function(){
alert($('p').html()); // alert 으로 출력
}); </script> </body> </html>
• jquery1 이라는 실습 폴더를 생성하시고 jqx.html 형태로 파일을 저장해주세요• $(‘p’).html() 는 어떤 의미 일까요?
READY()
$(document).ready(function(){ // 제이쿼리 소스
});
괄호가 좀 해깔리긴 하지만 이 블록은 꼭 해주시는게 좋습니다. html 소스가 모두 로드된 후에 코드를 실행한다는 의미입니다.
로드 되지 않은 상태에서 제이쿼리가 호출되면 이상상황이 발생합니다.
4. 선택자
인형뽑기
<html>
색도 바꾸고 글씨도 바꾸고에니메이션도 주고이벤트도 주고...
<각각의 엘리먼트들>
태그 선택자
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습2</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <img src="a.jpg" /> <br/> <button id="hide_button">숨김</button> <button id="show_button">보이기</button> <script> $(document).ready(function(){ $("#hide_button").click(function(){ $("img").hide(); });
$("#show_button").click(function(){ $("img").show(); }); }); </script> </body> </html>
jq2.html • jpeg image 를 다운로드 받고jquery1 폴더에 넣어주세요!!
태그 선택자
$(“#hide_button").click(function(){ $("img").hide();
});
#은 ID 를 나타냅니다.hide_button 아이디가 클릭 된다면img 태그의 블록을 숨겨라( hide() ) 라는 의미입니다.
show_button은 반대의 의미겠죠
태그 선택자
<img> 태그
http://www.w3schools.com/html/html_images.asp
http://www.w3schools.com/tags/tag_button.asp
<button> 태그
이미지를 불러 옵니다.
버튼기능이 추가 됩니다.
ID 선택자
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습3</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <img src="a.jpg" /> <br/> <button id="hide_button">숨김</button> <button id="show_button">보이기</button> <script> $(document).ready(function(){ $("#hide_button").click(function(){ $("img").hide(); $("#hide_button").hide(); $("#show_button").show(); }); $("#show_button").click(function(){ $("img").show(); $("#show_button").hide(); $("#hide_button").show(); }); }); </script> </body> </html>
jq3.html
CLASS 선택자
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습4</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> .box { width: 100px; height: 50px; background-color: gray; }; </style> </head> <body> <div class="box">박스</div> <script> $(document).ready(function(){ $(".box").click(function(){ $(".box").html("선택된 박스"); }); }); </script> </body> </html>
jq4.html
CLASS 선택자
<style> 블록은 CSS Style 을 나타냅니다.처음배우는 HTML, CSS 편을 참고하시면 좋을듯합니다.
<div class="box">박스</div>
<div> 블록은 공간을 차지하는 태그입니다.
http://www.w3schools.com/tags/tag_div.asp
$(“.box") 는 box 라는 클래스를 선택하는 선택자입니다.
선택자 전체
- http://www.w3schools.com/jquery/jquery_selectors.asp
5. 이벤트
이벤트
클릭도 하고 드래그도 하고스와이프도 하고
…..
이벤트
이벤트 메서드
click() 엘리먼트가 클릭 되었을때
dblclick() 엘리먼트가 더블 클릭 되었을때
mouseenter() 엘리먼트에 마우스가 위치할때
mouseleave() 엘리먼트에서 마우스가 떠날때
mousedown() 엘리먼트를 눌렀을때
mouseup() 엘리먼트에서 누름이 끝났을때
hover() 엘리먼트 위에 위치할때
fucus() 엘리먼트 (input)에 포커스 될때
blur() 엘리먼트 (input)에 떠날때
… …
CLICK() 이벤트
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습5</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <img src="a.jpg" /> <div id="buttona1">1번 버튼</div> <div id="buttona2">2번 버튼</div> <script> $(document).ready(function(){ $("img").click(function(){ alert("1번 그림 클릭"); }); $("#buttona1").click(function(){ alert("1번 버튼 클릭"); }); $("#buttona2").click(function(){ alert("2번 버튼 클릭"); }); }); </script> </body> </html>
jq5.html
CLICK() 이벤트
$("img").click(function(){ alert("1번 그림 클릭"); });
function() 블록은 click 이벤트가 호출될때 실행될 함수를 나타냅니다.
DBLCLICK() 이벤트
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습6</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div id="buttona1">1번 버튼</div> <script> $(document).ready(function(){ $("#buttona1").dblclick(function(){ alert("1번 버튼 더블 클릭"); }); }); </script> </body> </html>
jq6.html
MOUSEENTER() 이벤트
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습7</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> .box { width: 400px; height: 400px; background-color: #98bf21; }; </style> </head> <body> <div class="box">1번 박스</div> <script> $(document).ready(function(){ $(".box").mouseenter(function(){ alert("1번 박스 로 마우스가 들어감"); }); }); </script> </body> </html>
jq7.html
MOUSEENTER() 이벤트 <style> .box { width: 400px; height: 400px; background-color: #98bf21; }; </style>
<div class="box">1번 박스</div>
클래스의 너비가 400픽셀이고 높이가 400픽셀인 박스를 div 태그에 적용합니다.
HOVER() 이벤트<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습8</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> .box { width: 400px; height: 400px; background-color: bisque; }; </style> </head> <body> <div class="box">bisque</div> <script> $(document).ready(function(){ $(".box").hover( function() { // 엘리먼트에 마우스 포인트가 위치할때 $(".box").css("background-color", "red"); $(".box").html("red"); }, function() { // 엘리먼트에서 마우스 포인트가 빠져나왔을때 $(".box").css("background-color", "bisque"); $(".box").html("bisque"); } ); }); </script> </body> </html>
jq8.html
HOVER() 이벤트
$(".box").hover( function() { $(".box").css("background-color", "red"); $(".box").html("red"); }, function() { $(".box").css("background-color", "bisque"); $(".box").html("bisque"); } );
첫번째 함수는 마우스가 box 클래스 위에 위치했을때이고두번째 함수는 box 에서 벗어날때 호출됩니다.
FOCUS(), BLUR() 이벤트<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>제이쿼리 실습9</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div>아이디</div> <input type="text" id="userid" /> <div>비밀번호</div> <input type="text" id="password" /> <script> $(document).ready(function(){ $("#userid").focus( function() { $("#userid").css("background-color", "bisque"); } ); $("#password").focus( function() { $("#password").css("background-color", "bisque"); } ); $("#userid").blur( function() { $("#userid").css("background-color", "#ffffff"); if ( $("#userid").val() == "" ){ alert("사용자 아이디를 입력해주세요!"); } } ); $("#password").blur( function() { $("#password").css("background-color", "#ffffff"); } ); }); </script> </body> </html>
jq9.html
Q&A
예고. JQUERYform control, animation, ajax(json) 제발..
수고하셨습니다. :)ABCD
http://abcds.krhttps://www.facebook.com/groups/562787713823026/
한성일 https://www.facebook.com/[email protected]