20. 에디터 설치
기존에 사용하던 에디터가 있다면 그대로 사용
서브라임, 메모장...
Adobe 의 Bracket 설치
장점은 CSS, HTML, Javascript 코드 어시스트 기능, 완전무료
단점은 조금 무겁고 UTF-8 인코딩만 지원
http://brackets.io/
다운로드 경로 1
2
25. 콘솔
!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
디버깅 용으로 사용합니다.
28. 브라우져에서 실행
• 기본적으로 브라우져에서만 실행
• 브라우져에 내장된 자바스크립트 엔진에 의한 코드 해석
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title자바스크립트 실습 1/title
/head
body
script
alert('hello world');
document.write('안녕');
/script
/body
/html
33. 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
34. 주석
!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
35. 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
37. DOCUMENT 내의 엘리먼트 찾기 2
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title자바스크립트 실습 4/title
/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
47. 실습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
빼기, 나누기, 곱하기 버튼을 추가하고
동작하도록 함수를 추가하세요.
48. 실습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 더 알아보기
51. 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보다 작다”);
}
지정된 곳이 수행되어야 할 때 사용합니다.
52. 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
53. 논리 연산자
연산자 설명 예제
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
54. 논리 연산자 실습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
55. 논리 연산자 실습2
if ( 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
56. 논리 연산자 실습 설명
변수.toString()
문자형으로 바꿔주는 함수입니다.
“문자형” 을 bool 형으로 연결할 때는 bool type의
변수를 문자형으로 캐스팅한후에 더해줍니다. (+)
bool type 은 true 와 false 만 저장됩니다.
57. 조건 연산자
연산자 설명
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 형)
58. 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
59. 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
• 돼지도 추가해 봅시다.
60. FOR
기본
for (var 변수=1; 변수끝값; 변수++) {
// 반복실행할 내용
}
예제
for (var i=0; i10; i++) {
document.write(“i 값은 ” + i +”br/”);
}
반복적으로 수행되어야 할 곳에 사용합니다.
62. FOR
for (var i=0; i3; 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
63. 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; i10; i++) {
document.write(num + * + i + = );// 3 * 1 =
document.write(num*i); // 3, 6, 9 ...
document.write(br /);
}
/script
/body
/html
• 단을 바꾸면서 테스트 해봅시다.
• 왜 이렇게 출력이 될까요?
js12.html
64. 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; i10; i++) {
document.write(i + 단 br /);
for (var j=1; j10; 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
65. 기타
제어문은 좀 더 있지만 ..
switch, while, do-while
if 문과 for 문만 알면 대부분 대체가 가능합니다.
두가지가 완벽하게 이해되었을때 다른 문법을
공부하시면 좋을것 같습니다.