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

처음배우는�� 자바스크립트,�� 제이쿼리#3�� Form�� Control,�� Animation,�� Ajax(json)

ABCD,�� 스노우키위�� 한성일

1. 빼먹은것..

GOAL

• 빼먹은것

• 에니메이션

• Form 이란?

• GET, POST

• 폼검증

• Ajax(json)

논리 연산자

연산자 설명 예제

&& and두가지 모두 만족하면 참

1<2 && 2<3 true 1>2 && 2<3 false

|| or둘중 하나만 만족하면 참

1<2 || 2<3 true 1>2 || 2<3 true

1>2 || 2>3 false

!not

같지 않으면 일때 많이 쓰고 참을 거짓으로 거짓을 참으로 바꿉니다.

1 != 2 true !(1==1) false !(1!=1) true

여러항의 조건을 검사할때 사용합니다. Bool 타입으로 리턴합니다. (참, 거짓)

* 논리연산자 - Logical Operators

http://www.w3schools.com/js/js_comparisons.asp

논리 연산자 실습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 { console.log("or 1 " + (num > 1 || num > 2).toString() ); }

논리 연산자 실습2if ( num < 1 || num > 2 ) { // 실행될까요? console.log("or 2 " + (num < 1 || num > 2).toString() ); } else { console.log("or 2 " + (num < 1 || num > 2).toString() ); }

if ( num < 1 || num < 2 ) { // 실행될까요? console.log("or 3 " + (num < 1 || num < 2).toString() ); } else { console.log("or 3 " + (num < 1 || num < 2).toString() ); }

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 만 저장됩니다.

2. ANIMATION

애니메이션

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

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> $(document).ready(function(){ $("#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> <div><img src="q.gif"/></div>

<script> $(document).ready(function(){ $("#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> $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8', fontSize: '4em'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8', fontSize: '2em'}, "slow"); }); }); </script> </body></html>

jq4.html

박스 애니메이션

div.animate({height: '300px', opacity: '0.4'}, "slow");div.animate({width: '300px', opacity: '0.8', fontSize: '4em'}, "slow");div.animate({height: '100px', opacity: '0.4'}, "slow");div.animate({width: '100px', opacity: '0.8', fontSize: '2em'}, "slow");

높이가 300이고 Opacity 가 0.4 인 도형부터 너비가 300px 인 도형 ... 으로 4변 변합니다.Opacity는 투명도를 나타냅니다. 0이 투명이고 1은 원안입니다.

div.animate({width: '300px', opacity: '0.8', fontSize: '4em'}, "slow");

fontSize: ‘4em’ 은 도형이 변하는 동안 폰트의 사이즈도 변경 시켜줍니다.

2. 폼(FORM)

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> $(document).ready(function(){ $("#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");

우선 변수에 입력오브젝트들을 저장합니다.

지정된 입력 오브젝트들로 포커스를 이동시키는 함수입니다.

오브젝트의 값을 가져오거나 저장하는 함수입니다.

3. GET, POST

요청

웹서버

www.dog.com

인터넷

브라우져

서버로 정보를 요청하려면 어떻게 해야할 까요?어떻게 받을 수 있을까요.

아이디와 암호를 서버로 전달해야지

니 아이디가 이거고 비밀번호 니가 맞구나.

http://www.dog.com

요청

GET, POST방식을 가장 많이 사용합니다.

클라이언트는 정보를 서버로 보냅니다. 물론 서버도 받을 준비가 되어있어야 합니다.

GET

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

jq7.html

GET

http://www.abcds.kr/study/s1.php?id=jamie&pass=1234

?id=jamie&pass=1234

주소를 노출 하기 때문에 지금 처럼 아이디 패스워드를 넣는것은 안되겠죠. 보안에 문제가 있기 때문에 보안에 민감한 정보일때는 사용하지 않습니다.

서버에 보내는 쿼리(질문)입니다. ? 이 의문임을 기억하시면 좋습니다.id 가 jamie 이고 password가 1234 인 사람의 정보를 서버로 보낸다는 의미입니다.

http://www.abcds.kr/study/s1.php?id=

POST

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>POST</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>

4. AJAX

AJAX

Asynchronous JavaScript and XML

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

JSON 사용<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>JSON 사용</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div> <button>JSON 처리</button> </div> <script> $(document).ready(function(){ $("button").click(function(){ var data = {'name':'jamie', 'job': 'programmer', 'company': 'snowkiwi'}; // JSON alert(data.name); alert(data.job); alert(data.company); }); }); </script> </body> </html>

jq9.html

JSON (JAVASCRIPT OBJECT NOTATION)

var data = {'name':'jamie', 'job': 'programmer'};

JSON 은 하나의 데이터 형이라고 볼 수 있습니다. 데이터를 저장하고 데이터를 전달하고 교환할때 사용합니다.자바스크립트에서 시작해서 다양한 언어에서 사용하고 있습니다. 배열과 비슷하기도 하고 다르기도 합니다.

{'name':'jamie', 'job': 'programmer'}

{변수명:변수값, 변수명1:변수값} 형식으로 되어있습니다.

* JSON 이란?

alert(data.name); alert(data.job); alert(data.company);

변수명.첨자 형태로 JSON 값에 접근합니다.

http://www.w3schools.com/json/

AJAX 실습1<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>AJAX 실습1</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div> <button>서버에서 가져오기</button> </div> <div> 아이디 </div> <div> <input type="text" id="userid" /> </div> <div> 비밀번호 </div> <div> <input type="text" id="pass" /> </div> <div id="label"></div>

jq10.html

AJAX 실습1

<script> $(document).ready(function(){ $("button").click(function(){ var userid = $("#userid"); var pass = $("#pass"); $.ajax({ url: "http://www.abcds.kr/study/s3.php", type: "GET", data : { id : userid.val(), pass : pass.val() }, success: function(data) { var obj = $.parseJSON(data); $("#label").html("입력하신 아이디는 " + obj.id + " 이고" + " 비밀번호는 " + obj.pass + " 입니다. "); alert("정상적으로 로그인 되셨습니다. "); } }); }); }); </script> </body> </html>

jq10.html

AJAX 실습$.ajax({ url: "http://www.abcds.kr/study/s3.php", type: "GET", data : { id : userid.val(), pass : pass.val()

}, success: function(data) { var obj = $.parseJSON(data); $("#label").html("입력하신 아이디는 " + obj.id + " 이고" + " 비밀번호는 " + obj.pass + " 입니다. "); alert("정상적으로 로그인 되셨습니다. ");

} });

$.ajax({ }); 블록 속에 AJAX 에 관련된 속성들이 들어갑니다. URL 속성은 서버의 URL 을 나타냅니다.type 은 GET, POST 느냐를 구분합니다. data 속의 데이터들은 서버에 전달될 파라미터 들입니다.?id=id&pass=pass 라고 보시면 이해하기 편하실겁니다.이렇게 요청을 해서 성공하면 json 형태로 서버에서 값을 보내줍니다. 이 데이터는 바로 사용할 수 없고 var obj = $.parseJSON(data); 형식으로 자바스크립트에서 사용할 수 있는 값으로 변환해줘야 합니다. obj.id 는 서버에서 넘겨진 { “id” : id } 를 의미합니다.

Q&A

예고. JQUERYajax 상세, ajax를 이용한 상품 검색 프로그램 개발

수고하셨습니다. :)ABCD

http://abcds.krhttps://www.facebook.com/groups/562787713823026/

한성일 https://www.facebook.com/[email protected]

http://abcds.kr

https://www.facebook.com/groups/562787713823026/

https://www.facebook.com/jamie.han.16

mailto:[email protected]

Documents

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