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

GOAL
• 프로그래밍 전반이 이해하도록..
• 실습위주
• Javascript 전반적 문법
• 크롬을 이용한 디버깅
• 어렵지 않다.

웹
인터넷
웹서버
데이터베이스
www.dog.com
dog.html
1. 서버에 요청
2. 서버는 데이터베이스에서 자료를 서치
3. 찾은 자료를 html 형식으로 바꿔 클라이언트에 전달
1 2
3
4

웹
인터넷
웹서버
데이터베이스
www.dog.com
dog.html
front -end
server-side
front -end
브라우져가 이해 할 수 있는 언어
자바스크립트, CSS, HTML
server-side
서버에서 처리되는 영역
데이터베이스연결이라던지 세션 등..
PHP, JSP,ASP…..

HTML, CSS, JAVASCRIPT
HTML CSS
JAVASCRIPT

에디터 설치
기존에 사용하던 에디터가 있다면 그대로 사용
서브라임, 메모장...
Adobe 의 Bracket 설치
장점은 CSS, HTML, Javascript 코드 어시스트 기능, 완전무료
단점은 조금 무겁고 UTF-8 인코딩만 지원
http://brackets.io/
다운로드 경로 1
2

디버그
* Debug 란?
오류가 발생했을때 오류를 수정하는 방법
크롬의 개발자 도구를..

디버그
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
디버깅 용으로 사용합니다.

브라우져에서 실행
• 기본적으로 브라우져에서만 실행
• 브라우져에 내장된 자바스크립트 엔진에 의한 코드 해석
!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
…..

HELLO WORLD (기본형식)
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
/head
body
script
/script
/body
/html
1. 자바스크립트 실습 폴더 생성
2. js1.html 로 저장 후 더블클릭
js1.html
script
/script

주석
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
/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
/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
/head
body
div name=test_name1번째 이름/div
div name=test_name2번째 이름/div
p name=test_name3번째 이름/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

변수와 함수
“내가 이름 지어주기 전에는 그는
다만 메모리 주소에 지나지 않았다.”
- 변수
“돈을 넣으면 캔이 나온다.”
- 함수

변수
기본 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
/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
/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 더 알아보기

IF
조건
오늘 자장면을 드시겠습니까?
YES
NO
먹는다. 조건
NO
YES
탕수육?
각각의 조건으로 실행됩니다.

IF
기본
if (참) { // 만약 참이면
/* 실행구문 */
} else if (참){ // 없을수도 있고 있을수도 있다.
/* 실행구문 */
} else if (참){
/* 실행구문 */
} else { // 둘다아니라면. 없을수도 있고 있을수도 있다.
/* 실행구문 */
}
예제
var num = 3;
if (num2) {
alert(“입력이 2보다 작다”);
} else if (num3) {
alert(“입력이 3보다 작다”);
} else {
alert(“둘다 아니다.”);
}
최소형
if (1 2) {
alert(“1이 2보다 작다”);
}
지정된 곳이 수행되어야 할 때 사용합니다.

IF
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
/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
두가지 모두 만족하면 참
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 {
}
js8.html

논리 연산자 실습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
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
/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
• 돼지도 추가해 봅시다.

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

More Related Content

What's hot

Viewers also liked

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

More from 성일 한

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