처음배우는 자바스크립트,...
TRANSCRIPT
처음배우는����������� ������������������ 자바스크립트,����������� ������������������ 제이쿼리#1����������� ������������������ 자바스크립트����������� ������������������ 이해����������� ������������������ &����������� ������������������ 배우기
ABCD,����������� ������������������ 스노우키위����������� ������������������ 한성일
1. 준비
GOAL
• 프로그래밍 전반이 이해하도록..
• 실습위주
• Javascript 전반적 문법
• 크롬을 이용한 디버깅
• 어렵지 않다.
아이스브레이킹
2. 웹개발 이해
웹
인터넷
웹서버
데이터베이스
www.dog.com
dog.html
1. 서버에 요청2. 서버는 데이터베이스에서 자료를 서치3. 찾은 자료를 html 형식으로 바꿔 클라이언트에 전달
1 2
3
4
웹
인터넷
웹서버
데이터베이스
www.dog.com
dog.html
front -endserver-side
front -end 브라우져가 이해 할 수 있는 언어자바스크립트, CSS, HTMLserver-side 서버에서 처리되는 영역데이터베이스연결이라던지 세션 등..PHP, JSP, ASP…..
한국의 작업 방법
1 2 3
FRONT-END DEVELOPER1 2 3
HTML, CSS, JAVASCRIPTHTML CSS
JAVASCRIPT
3. 개발설정
에디터 설치
기존에 사용하던 에디터가 있다면 그대로 사용서브라임, 메모장...
Adobe 의 Bracket 설치 장점은 CSS, HTML, Javascript 코드 어시스트 기능, 완전무료단점은 조금 무겁고 UTF-8 인코딩만 지원
http://brackets.io/다운로드 경로 1
2
디버그
1945년 9월 9일 하버드 대학교의 Mark2 Aiken Relay Calculator에서 오류 발생 내부의 벌레를 잡아 해결
크롬 개발자 도구
요소검사1
2
오류 확인크롬은 자바스크립트 오류가 출력되지 않음
콘솔
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>콘솔테스트</title>
</head> <body> <script> var var1 = 1; var var2 = 2;
console.log("var1 은 ", var1); console.log("var2 은 ", var2); console.log(var1 + var2); console.log("테스트입니다.") </script> </body> </html>
console_test.html디버깅 용으로 사용합니다.
3. 자바스크립트?
자바와는 다름
!=
브라우져에서 실행
• 기본적으로 브라우져에서만 실행• 브라우져에 내장된 자바스크립트 엔진에 의한 코드 해석
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 1</title> </head> <body> <script> alert('hello world'); document.write('안녕'); </script> </body> </html>
사용폼검증
화면의 움직임
Feed 의 움직임
거의 모든 웹에서의 화면 움직임은 자바스크립트가 처리예외적으로 CSS3에서 처리가 되는 경우도 있음
AJAX
기존 자바스크립트는 서버와 통신할 수 없었으나 AJAX의 등장으로 서버와 통신이 가능해짐
다양한 분야GAME - Unity
server-side - Node.jsDB - Mongo DB
Prototyping - Framer
…..
4. 기본
HELLO WORLD (기본형식)
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 1</title> </head> <body> <script> alert('hello world'); document.write('안녕'); </script> </body> </html>
1. 자바스크립트 실습 폴더 생성 2. js1.html 로 저장 후 더블클릭
js1.html
<script> alert('hello world'); document.write('안녕'); </script>
주석
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 2</title> </head> <body> <script> // alert(‘hello world'); /*
document.write(‘안녕’); alert(‘hello world');
*/ /* 다실행 안되겠죠. */
</script> </body> </html>
// 한줄 주석 /* 여러줄주석*/
• 소스를 프로그램상에서 인식하지 않도록 • 코맨트를 남길때
js2.html
DOCUMENT 내의 엘리먼트 찾기 1
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 3</title>
</head> <body> <span id="test_id1">-----</span> <script> document.getElementById('test_id1').innerHTML = "처음입니다."; </script> </body> </html>
• document.getElementById(‘test_id1’)• .innerHTML 으로 태그의 내용을 수정하거나 가져올수 있다.
js3.html
선택자 (SELECTOR)
<tag><tag id = “bear”>
<tag class=“bear_class”>
DOCUMENT 내의 엘리먼트 찾기 2
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 4</title>
</head> <body> <div name="test_name">1번째 이름</div> <div name="test_name">2번째 이름</div> <p name="test_name">3번째 이름</p> <script> var test_array = document.getElementsByName('test_name'); document.write('test_name 은 총 ' + test_array.length + ' 개'); document.write('<br />'); document.write('2 ' + test_array[1].innerHTML); </script> </body> </html>
• document.getElementByName(‘test_name')• name 을 선택합니다. (배열로..)• 3번째 이름을 선택 해보고 값을 수정해보세요.
js4.html
5. 변수와 함수
변수와 함수
“내가 이름 지어주기 전에는 그는 다만 메모리 주소에 지나지 않았다.”
- 변수
“돈을 넣으면 캔이 나온다.” - 함수
변수
기본 var 변수명 = 대입값 ;
숫자형var x = 5; var y = 10; document.write(x+y);
문자형var last_name = “Johnson"; document.write(last_name);
불형����������� ������������������ (Bool)var is_running = true; // 참 var is_running1 = false; // 거짓
메모리에 값을 저장합니다.변수는 프로그램이 종료하거나 강제로 해제하기 전까지 메모리에 상주합니다.
변수
각각 다른 데이터를 담는 그릇이다.
MIX
변수
var_a = 0;
0X3213213….0을 저장합니다.
변수타입
var var1 = “문자형”; var var2 = 0; // 숫자형 var var3 = true; // or false Bool형
변수의 데이터 타입을 정해줄 필요가 없다.자바스크립트에서는 처음 들어간 값을 셋팅이 된다.
함수
구성
function 함수명(인자) { 동작 내용 return 값 }
예제
function test_function() { var a = 5; var b = 7; var c = a+b; return c; }
계속해서 사용할 코드를 함수로 만듭니다.
함수모든 기계가 그렇습니다.반복적으로 사용되는 코드를 함수화 합니다.
실습1<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 5</title>
</head> <body> <form> <input type="text" id="var1" /> <input type="text" id="var2" /> <p>답은 <div id=“result”></div></p> <input type="button" id="button" value="더하기" onclick="sum()" /> </form> <script> var var1 = 0; var var2 = 0; var var_result = "";
function sum() { var1 = document.getElementById("var1").value; var2 = document.getElementById("var2").value; var_result = document.getElementById("result"); var_result.innerHTML = parseInt(var1) + parseInt(var2); } </script> </body> </html>
js5.html
빼기, 나누기, 곱하기 버튼을 추가하고 동작하도록 함수를 추가하세요.
실습2 (내장함수)
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 6</title>
</head> <body> <p> 지금은 <span id=“date" ></span></p> <input type="button" id="button" value="몇시냐?" onclick="get_date()" /> <script> function get_date() { var d = new Date(); var date = d.getFullYear() + "년 " + (d.getMonth() + 1) + "월 " + d.getDay() + "일 " + d.getHours() + "시 " + d.getMinutes() + "분 입니다."; document.getElementById('date').innerHTML = date; } </script> </body> </html>
js6.html
* Date 더 알아보기
6. 제어문
IF
조건
오늘 자장면을 드시겠습니까?
YES
NO
먹는다. 조건
NO
YES
탕수육?
각각의 조건으로 실행됩니다.
IF
기본
if (참) { // 만약 참이면 /* 실행구문 */ } else if (참){ // 없을수도 있고 있을수도 있다. /* 실행구문 */ } else if (참){ /* 실행구문 */ } else { // 둘다아니라면. 없을수도 있고 있을수도 있다. /* 실행구문 */ }
예제
var num = 3; if (num<2) { alert(“입력이 2보다 작다”); } else if (num<3) { alert(“입력이 3보다 작다”); } else { alert(“둘다 아니다.”); }
최소형if (1 < 2) { alert(“1이 2보다 작다”); }
지정된 곳이 수행되어야 할 때 사용합니다.
IF<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 7</title>
</head> <body> <p> 숫자를 입력해 주세요 <span id="label"></span> </p> <input type="text" id="num1" /> <input type="button" id="button" value="입력" onclick="get_result()" /> <script> var num1; function get_result(){ var label = document.getElementById("label"); var num1 = document.getElementById("num1").value; if ( num1 > 0 ) { if ( num1 < 10 ) { console.log('입력된 수는 10 보다 작습니다.'); } if ( num1 <= 10 ) { console.log('입력된 수는 10보다 작거나 같습니다.'); } if ( num1 > 10 ) { console.log('입력된 수는 10보다 큽니다.'); } if ( num1 >= 10 ) { console.log('입력된 수는 10보다 크거나 같습니다.'); } if ( num1 == 10 ) { console.log('입력된 수는 10입니다.'); } } } </script> </body> </html>
js7.html
논리 연산자
연산자 설명 예제
&& 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
논리 연산자 실습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() ); }
js8.html
논리 연산자 실습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>
js8.html
논리 연산자 실습 설명
변수.toString()
문자형으로 바꿔주는 함수입니다. “문자형” 을 bool 형으로 연결할 때는 bool type의 변수를 문자형으로 캐스팅한후에 더해줍니다. (+)
bool type 은 true 와 false 만 저장됩니다.
조건 연산자
연산자 설명
X == Y X는 Y와 같다
X != Y X와 Y는 값이 같지 않다
X < Y X는 Y보다 작다
X <= Y X는 Y보다 작거나 같다
X > Y X는 Y보다 크다
X >= Y X는 Y보다 크거나 같다
좌변과 우변의 값을 비교해서 참일때에는 True를 거짓일때에는 False를 반환 한다. (Bool 형)
ELSE IF
var name = “jerry”;
if ( name == “tom” ){ // 만약 이름이 “tom” 이라면
document.write(“안녕 탐”); // tom 출력
} else if ( name == “jerry” ){ // 이름이 jerry 라면 document.write(“안녕 제리”); // jerry 출력 } else { // 둘다 아니면 document.write(“누구냐 넌?”); }
1
2
3
빠져나온다.
js9.html
ELSE IF<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 8</title>
</head> <body> <p> 좋아하는 동물은 </p> <p id="label"></p> <input type="text" id="animal" /> <input type="button" id="button" value="입력" onclick="get_result()" /> <script> var num1; function get_result(){ var label = document.getElementById("label"); var animal = document.getElementById("animal").value; if ( animal == "강아지" ) { label.innerHTML = "강아지를 좋아하시는군요. "; } else if ( animal == "고양이" ) { label.innerHTML = "고양이를 좋아하시는군요. "; } else if ( animal == "말" ) { label.innerHTML = "말을 좋아하시는군요. "; } else { label.innerHTML = "항목에 좋아하는 동물이 없으시군요. "; } } </script> </body> </html>
js10.html
• 돼지도 추가해 봅시다.
FOR
기본for (var 변수=1; 변수<끝값; 변수++) { // 반복실행할 내용 }
예제for (var i=0; i<10; i++) { document.write(“i 값은 ” + i +”<br/>”); }
반복적으로 수행되어야 할 곳에 사용합니다.
FOR (LOOP)
컴퓨터에계 (멈추라 할때까지) 반복적인 일을 시킵니다.
FOR
for (var i=0; i<3; i++) {
document.write(i + “번째 hello”); // 실행될 문장 }
1 2
3 4
5
1. 변수(i)에 0을 대입해라. 2. i 가 3보다 작으면 3. hello 를 출력해라. 4. i 를 1증가(i++) 시켜라. (i는1) 5. 증가된 i 가 3보다 작으면 6, hello 를 출력해라. ..... 여기서는 i 가 3보다 작을 동안 계속 돈다. 3보다 커지면 빠져 나온다.
js11.html
FOR 실습 1
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 9</title>
</head> <body> <script> var num = 3; // 3단 document.write(num + " 단 <br />"); for (var i=1; i<10; i++) { document.write(num + " * " + i + " = "); // 3 * 1 = document.write(num*i); // 3, 6, 9 ... document.write("<br />"); } </script> </body> </html>
• 단을 바꾸면서 테스트 해봅시다. • 왜 이렇게 출력이 될까요?
js12.html
FOR 실습 2
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>자바스크립트 실습 10</title>
</head> <body> <script> /* 구구단 전체 */ document.write("<br />"); for (var i=1; i<10; i++) { document.write(i + " 단 <br />"); for (var j=1; j<10; j++) { document.write(i + " * " + j + " = "); // 3 * 1 = document.write(i*j); // 3, 6, 9 ... document.write("<br />"); } document.write("<br />"); } </script> </body> </html>
• 1~9단까지의 입력수가 3부터 시작하여 20 까지 실행되도록 변경 해봅시다.
js13.html
기타
제어문은 좀 더 있지만 ..switch, while, do-while
if 문과 for 문만 알면 대부분 대체가 가능합니다.두가지가 완벽하게 이해되었을때 다른 문법을 공부하시면 좋을것 같습니다.
Q&A
예고. JQUERY
http://www.w3schools.com/jquery/jquery_animate.asp
수고하셨습니다. :)ABCD
http://abcds.krhttps://www.facebook.com/groups/562787713823026/
한성일 https://www.facebook.com/[email protected]