처음배우는 자바스크립트, 제이쿼리 두번째 슬라이드입니다. 자바스크립트, 제이쿼리 입문용 자료입니다.

1. 처음배우는

2. 자바스크립트,

3. 제이쿼리
#2

4. 제이쿼리

5. 이해

7. 배우기
ABCD,

8. 스노우키위

9. 한성일

10. 1. 오늘은..

11. GOAL
• 몇가지 전달사항
• 코딩을 공부하는 효과적인 방법
• 제이쿼리?
• 제이쿼리 설정
• 제이쿼리 기본 사용법
• 이벤트 기본

12. 주의 사항
script/script 블록은 프로그래밍 영역입니다.
html, css 과는 다르게 문법이 틀리면 에러가 발생합니다.
에러가 발생하면 일단 디버거를 사용해봅시다.

13. 코딩 공부 방법
상상만으로 코딩이 늘진 않습니다.
직접 타이핑 해보세요
외울 필요는 없고 검색하는 능력과
생각하는 연습이 중요합니다.
샘플을 마음껏 변형해보세요.
코딩과 에러는 한몸입니다.
왜 그럴까? 왜 저렇게 나오지?
라는 생각이 중요합니다.

14. 코딩 공부 방법 1
일단은 만들고 싶은걸 찾아봅시다.
필요 기술이 나옵니다.
php, python, java, javascript, arduino….
1
2
3 구글 검색을 통해서 가장 쉬운 튜토리얼을 찾아봅니다.
4 가장 쉬운 책을 찾아봅시다. (head first 시리즈 추천)
5 막히면 질문을 해봅시다. 다양한 코딩 커뮤니티

15. 코딩 공부 방법 2
http://www.w3schools.com/
http://www.codecademy.com/learn
튜토리얼 형식으로 가장 쉽게 배울 수 있습니다.

16. 2. 제이쿼리

17. 자바스크립트 개선
• 기존 자바스크립트의 복잡성을 해결하기 위해 고안되었죠.
• 기존 자바스크립트의 기능들을 개선하는 소스덩어리(라이브러리)
• 제이쿼리가 나오면서 기존 웹개발자들은 환호했죠.
https://jquery.org/
특징

18. 자바스크립트와 제이쿼리
document.getElementById(“ID”);
document.getElementById(“ID”).style.property
.innerHTML
.value
… 복잡 복잡
$(“TAG_NAME”);
$(“#ID”);
$(“.CLASS_NAME”);
.val();
…. 심플
자바스크립트의 기능들을 개선하는
레퍼(wrapper)라이브러리 입니다.

19. 3. 사용방법

20. IMPORT
jquery를 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 라이브러리가 포함됩니다.

21. 소스
제이쿼리가 어떻게 생겼는지 보고 싶으시면 URL을 브라우져에 넣어보세요.

22. 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
pHello Jquery!/p
script
$(document).ready(function(){
alert($('p').html()); // alert 으로 출력
});
/script
/body
/html
• jquery1 이라는 실습 폴더를 생성하시고
jqx.html 형태로 파일을 저장해주세요
• $(‘p’).html() 는 어떤 의미 일까요?

23. READY()
$(document).ready(function(){
// 제이쿼리 소스
});
괄호가 좀 해깔리긴 하지만 이 블록은 꼭 해주시는게 좋습니다.
html 소스가 모두 로드된 후에 코드를 실행한다는 의미입니다.
로드 되지 않은 상태에서 제이쿼리가 호출되면 이상상황이 발생합니다.

24. 4. 선택자

25. 인형뽑기
html
색도 바꾸고
글씨도 바꾸고
에니메이션도 주고
이벤트도 주고...
각각의 엘리먼트들

26. 태그 선택자
!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 폴더에 넣어주세요!!

27. 태그 선택자
$(“#hide_button).click(function(){
$(img).hide();
});
#은 ID 를 나타냅니다.
hide_button 아이디가 클릭 된다면
img 태그의 블록을 숨겨라( hide() ) 라는 의미입니다.
show_button은 반대의 의미겠죠

28. 태그 선택자
img 태그
http://www.w3schools.com/html/html_images.asp
http://www.w3schools.com/tags/tag_button.asp
button 태그
이미지를 불러 옵니다.
버튼기능이 추가 됩니다.

29. 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

30. 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

31. CLASS 선택자
style 블록은 CSS Style 을 나타냅니다.
처음배우는 HTML, CSS 편을 참고하시면 좋을듯합니다.
div class=box박스/div
div 블록은 공간을 차지하는 태그입니다.
http://www.w3schools.com/tags/tag_div.asp
$(“.box) 는 box 라는 클래스를 선택하는 선택자입니다.

32. 선택자 전체
- http://www.w3schools.com/jquery/jquery_selectors.asp

33. 5. 이벤트

34. 이벤트
클릭도 하고
드래그도 하고
스와이프도 하고
…..

35. 이벤트
이벤트 메서드
click() 엘리먼트가 클릭 되었을때
dblclick() 엘리먼트가 더블 클릭 되었을때
mouseenter() 엘리먼트에 마우스가 위치할때
mouseleave() 엘리먼트에서 마우스가 떠날때
mousedown() 엘리먼트를 눌렀을때
mouseup() 엘리먼트에서 누름이 끝났을때
hover() 엘리먼트 위에 위치할때
fucus() 엘리먼트 (input)에 포커스 될때
blur() 엘리먼트 (input)에 떠날때
… …

36. 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=buttona11번 버튼/div
div id=buttona22번 버튼/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

37. CLICK() 이벤트
$(img).click(function(){
alert(1번 그림 클릭);
});
function() 블록은 click 이벤트가
호출될때 실행될 함수를 나타냅니다.

38. 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=buttona11번 버튼/div
script
$(document).ready(function(){
$(#buttona1).dblclick(function(){
alert(1번 버튼 더블 클릭);
});
});
/script
/body
/html
jq6.html

39. 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=box1번 박스/div
script
$(document).ready(function(){
$(.box).mouseenter(function(){
alert(1번 박스 로 마우스가 들어감);
});
});
/script
/body
/html
jq7.html

40. MOUSEENTER() 이벤트
style
.box {
width: 400px;
height: 400px;
background-color: #98bf21;
};
/style
div class=box1번 박스/div
클래스의 너비가 400픽셀이고
높이가 400픽셀인 박스를 div 태그에 적용합니다.

41. 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=boxbisque/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

42. HOVER() 이벤트
$(.box).hover(
function() {
$(.box).css(background-color, red);
$(.box).html(red);
}, function() {
$(.box).css(background-color, bisque);
$(.box).html(bisque);
}
);
첫번째 함수는 마우스가 box 클래스 위에 위치했을때이고
두번째 함수는 box 에서 벗어날때 호출됩니다.

43. 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

44. QA

45. 예고. JQUERY
form control, animation, ajax(json) 제발..

46. 수고하셨습니다. :)
ABCD
http://abcds.kr
https://www.facebook.com/groups/562787713823026/
한성일
https://www.facebook.com/jamie.han.16
iheart79@gmail.com