처음배우는 자바스크립트, 제이쿼리 #3

GOAL
• 빼먹은것
• 에니메이션
• Form 이란?
• GET, POST
• 폼검증
• Ajax(json)

논리 연산자
연산자 설명 예제
and
두가지 모두 만족하면 참
12 23 true
12 23 false
|| or
둘중 하나만 만족하면 참
12 || 23 true
12 || 23 true
12 || 23 false
!
not
같지 않으면 일때 많이 쓰고 참을
거짓으로 거짓을 참으로 바꿉니다.
1 != 2 true
!(1==1) false
!(1!=1) true
여러항의 조건을 검사할때 사용합니다.
Bool 타입으로 리턴합니다. (참, 거짓)
* 논리연산자 - Logical Operators

논리 연산자 실습1
script
var num = 1;
if ( num = 1 num 2 ) {
// 실행될까요?
console.log(and 1 + (num = 1 num 2).toString() );
} else {
console.log(and 1 + (num = 1 num 2).toString() );
}
if ( num 1 num 2 ) {
// 실행될까요?
console.log(and 2 + (num 1 num 2).toString() );
} else {
console.log(and 2 + (num 1 num 2).toString() );
}
num = 10; // num 변수의 값을 바꿉니다.
if ( num 1 || num 2 ) {
// 실행될까요?
console.log(or 1 + (num 1 || num 2).toString() );
} else {
}

논리 연산자 실습2
if ( num 1 || num 2 ) {
// 실행될까요?
} else {
}
if ( num 1 || num 2 ) {
// 실행될까요?
} else {
}
if ( num != 5 ) {
// 실행될까요?
console.log(not 1 + (num != 5).toString() );
} else {
console.log(not 1 + (num != 5).toString() );
}
if ( !(num == 10) ) {
// 실행될까요?
console.log(not 2 + !(num == 10).toString() );
} else {
console.log(not 2 + !(num == 10).toString() );
}
/script

논리 연산자 실습 설명
변수.toString()
문자형으로 바꿔주는 함수입니다.
“문자형” 을 bool 형으로 연결할 때는 bool type의
변수를 문자형으로 캐스팅한후에 더해줍니다. (+)
bool type 은 true 와 false 만 저장됩니다.

애니메이션
제이쿼리는 애니메이션 처리에 최적화 되어 있습니다.
간단한 작업으로 다양한 애니메이션 처리가 가능합니다.

FADE IN, FADE OUT
body
div
button id=fadeout페이드 아웃/button
button id=fadein페이드 인/button
/div
div
img src=q.gif/
/div
script
$(document).ready(function(){
$(#fadeout).click(function() {
$(img).fadeOut(slow);
});
$(#fadein).click(function() {
$(img).fadeIn(slow);
});
});
/script
/body
jq1.html
소스와 같은 폴더에 이미지를
저장하시고 이해하기 쉬운 이
미지 명으로 바꿔주세요!!

FADE IN, FADE OUT
$(img).fadeIn(slow);
$(img).fadeOut(slow);
fadeIn() 을 하면 천천히 오브젝트가 나오고
fadeOut() 을 하면 천천히 오브젝트가 사라집니다.
“slow”를 인자로 저장하면 속도가 조절 됩니다.
숫자도 넣을 수 있습니다. (animate 속도 도..)
숫자는 1000 이 1초 입니다.
3000이면 3초동안 사라집니다.
$(img).fadeOut(3000);

자동차 출발
소스와 같은 폴더에 이미지를 저장하시고 이해하기 쉬운
이미지 명으로 바꿔주세요. 자동차 좋습니다.

자동차 출발!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title자동차 출발/title
script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
/script
style
img {
height:100px;
width:150px;
top:100px;
left:100px;
position:absolute;
opacity:0.5;
}
/style
/head
body
button id=left_button왼쪽으로/button
button id=right_button오른쪽으로/button
img src=a.png /
script
$(#left_button).click(function(){
$(“img).animate(
{left: '500px', opacity: '1', height: '370px', width: '570px' });
});
$(#right_button).click(function(){
$(img).animate(
{left: '100px', top:'100px', opacity: '0.5', height: '100px', width: '150px' }
);
});
});
/script
/body
/html
jq2.html

자동차 출발
$(“img).animate(
{left: '500px', opacity: '1', height: '370px', width: '570px' }
);
이미지가 왼쪽으로 500px 이동하고 opacity 값이 채워져 투명이
사라집니다. 그리고 높이 값과 너비가 변경됩니다.
{left: '500px', opacity: '1', height: '370px', width: '570px' }
이런 데이터 형식을 Json 형식이라고 합니다.
{변수명1: ‘값', 변수명2: ‘값'}

토글 애니메이션
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title/title
script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
/script
style
img {
width:500px;
position:absolute;
background-color: azure;
}
/style
/head
body
button id=button열려라/button
divimg src=q.gif//div
script
$(#button).click(function(){
$(img).animate({
height: 'toggle'
});
});
});
/script
/body
/html
jq3.html

토글 애니메이션
$(img).animate({
height: 'toggle'
});
height 값을 ‘toggle’ 로 주면
이미지의 높이가 천천히 줄어듭니다.

박스 애니메이션!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title/title
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js/script
style
div {
background:#586BFF;
height:100px;
width:100px;
position:absolute;
}
/style
/head
body
button시작/button
div안녕!/div
script
$(button).click(function(){
var div = $(div);
div.animate({height: '300px', opacity: '0.4'}, slow);
div.animate({width: '300px', opacity: '0.8', fontSize: '4em'}, slow);
});
});
/script
/body
/html
jq4.html

박스 애니메이션
높이가 300이고 Opacity 가 0.4 인 도형부터
너비가 300px 인 도형 ... 으로 4변 변합니다.
Opacity는 투명도를 나타냅니다.
0이 투명이고 1은 원안입니다.
fontSize:‘4em’ 은 도형이 변하는 동안
폰트의 사이즈도 변경 시켜줍니다.

FORM!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title폼/title
/head
body
form method=post action=http://www.abcds.kr/study/s2.php
div
span아이디/span br/
input type=“text /
/div
div
span패스워드/span br/
input type=password name=“pass /
/div
div
span패스워드 확인/span br/
input type=password name=pass_con/
/div
div
span 성별 /span br/
input type=radio name=gender value=남자 checked 남자 /input
input type=radio name=gender value=여자 여자 /input
/div
div
br/
input type=checkbox name=agree value=ok 동의합니다./input
/div
input type=submit id=submit_button value=서버로 /
/form
/body
/html
jq5.html

폼은 서버로 전달 하기 입력들을 묶기위해 사용하는 장치라고
보시면 좋습니다. form/form 사이에 입력들이 위치합니다.
form method=전송방법 action=“데이터를 전달 받을 서버의 주소
method 엘리먼트는 GET, POST 를 구분할 때 사용하고
form 에서는 대부분 POST 를 사용합니다.
action 은 데이터를 전달 할 서버의 주소를 나타냅니다.
form이 submit 되면 form /form 사이의 입력값들이
서버로 전달됩니다.
FORM

폼검증
우리가 자바스크립트를 가장 많이 접하게 되는 곳이 폼검증 입니다.
서버에 값을 전달하기 전에 로컬에서 입력된 정보의 유효성을
검증하기 위해 사용합니다.

폼검증 예제1
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title폼검증/title
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js/script
/head
body
h2회원가입/h2
form id=join_form method=post action=http://www.abcds.kr/study/s2.php
div
span아이디/span br/
input type=text name=id id=id /
/div
div
span패스워드/span br/
input type=password name=pass id=pass /
/div
div
span패스워드 확인/span br/
input type=password name=pass_con id=pass_con/
/div
div
span 성별 /span br/
input type=radio name=gender value=남자 checked 남자 /input
input type=radio name=gender value=여자 여자 /input
/div
div
br/
input type=checkbox name=agree id=agree value=ok 동의합니다. /input
/div
input type=button id=submit_button value=서버로 /
/form
jq6.html

폼검증 예제2
script
$(#submit_button).click(function(){
var id = $(#id);
var pass = $(#pass);
var pass_con = $(#pass_con);
var agree = $(#agree);
if ( id.val() == ) {
alert('아이디를 입력해 주세요');
id.focus();
} else if ( pass.val() == ) {
alert('비밀번호를 입력해주세요');
pass.focus();
} else if ( pass_con.val() == ) {
alert('확인 비밀번호를 입력해주세요');
pass_con.focus();
} else if ( agree.is(:checked) == false) {
alert('동의하기 버튼을 눌러주세요.');
agree.focus();
} else { // 모두 입력 되었음
if ( pass.val() == pass_con.val() ) { // 비밀번호와 비밀번호 재입력이 같다면
alert('서버전송');
$(#join_form).submit();
} else {
alert('비밀번호가 다릅니다.');
pass.focus();
}
}
});
});
/script
/body
/html
jq6.html

폼검증 예제
.focus();
.val()
var id = $(#id);
var pass = $(#pass);
var pass_con = $(#pass_con);
var agree = $(#agree);
우선 변수에 입력오브젝트들을 저장합니다.
지정된 입력 오브젝트들로 포커스를 이동시키는 함수입니다.
오브젝트의 값을 가져오거나 저장하는 함수입니다.

요청
웹서버
www.dog.com
인터넷
브라우져
서버로 정보를 요청하려면 어떻게 해야할 까요?
어떻게 받을 수 있을까요.
아이디와 암호를 서버
로 전달해야지
니 아이디가 이거고 비밀
번호 니가 맞구나.

요청
GET, POST방식을 가장 많이 사용합니다.
클라이언트는 정보를 서버로 보냅니다. 물론 서버도 받을 준비가 되어있어야 합니다.

GET
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
titleGET/title
/head
body
a href=http://www.abcds.kr/study/s1.php?id=jamiepass=1234
서버에 GET 으로 데이터 전달/a
/body
/html
jq7.html

GET
http://www.abcds.kr/study/s1.php?id=jamiepass=1234
?id=jamiepass=1234
주소를 노출 하기 때문에 지금 처럼 아이디 패스워드를 넣는것은 안되겠죠.
보안에 문제가 있기 때문에 보안에 민감한 정보일때는 사용하지 않습니다.
서버에 보내는 쿼리(질문)입니다. ? 이 의문임을 기억하시면 좋습니다.
id 가 jamie 이고 password가 1234 인 사람의 정보를 서버로 보낸다는
의미입니다.

POST
!DOCTYPE html
html
head lang=en
meta charset=UTF-8
titlePOST/title
/head
body
form action=http://www.abcds.kr/study/s2.php method=post
input type=text name=id /
input type=text name=pass /
input type=submit /
/form
/body
/html
jq8.html

POST
POST 방식은 조금 다릅니다.
전달되는 데이터가 노출 되지 않고 GET보다 더 큰 용량의 정보를 전달할 수 있습니다.
보안에 민감한 정보들은 일반적으로 POST 로 넘깁니다.
대신 주소를 가질 수 없기때문에 다시 그 상황을 만들어 낼 수 없습니다.
이부분이 GET방식과 가장 다른 부분입니다.
form action=“http://www.dog.com” method=“post
….
/form

AJAX
Asynchronous JavaScript and XML
AJAX는 서버와 통신을 할 수 없었던 자바스크립트의 단점을 보완한 기능입니다.
AJAX가 나오면서 자바스크립트는 한단계 더 크게 발전을 할 수 있었습니다.
제이쿼리는 AJAX 를 하기쉽게 되어있습니다.

처음배우는 자바스크립트, 제이쿼리 #3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 처음배우는 자바스크립트, 제이쿼리 #3

Similar to 처음배우는 자바스크립트, 제이쿼리 #3 (20)

More from 성일 한

More from 성일 한 (15)

처음배우는 자바스크립트, 제이쿼리 #3