자바스크립트 개요 (1/2)

자바스크립트 : 웹브라우저 상에서 사용할 수 있는 스크립트 언어 자바스크립트 개요 (1/2) • 자바스크립트로 할 수 있는 것 • 사용자가 입력한 데이터 검사 • 메뉴 등의 애니메이션 효과 • 게임 제작 • 웹페이지 갱신 없이 서버와 통신 • 기타 웹페이지HTML 코드 추가/수정/삭제

자바스크립트의 단점 • 표준이 없음 • 문법 오류를 잡기 힘듬 • 사용자의 PC 환경에 따라 정상/비정상 동작 자바스크립트 개요(2/2) • 자바스크립트의 장점 • 하이브리드앱 제작 가능 • 웹 페이지를 일반 애플리케이션과 흡사하게 구성 가능 • 클라이언트에서 실행되므로 서버의 부하를 줄여줌 • 플러그인(플래시 등)을 대체할 수단

<html> <head> <script src=“파일위치”></script> <script type=“text/javascript”> // 코드 작성 </script> </head> <body> </body> </html> 동일 서버 내 또는 외부 서버 내의 위치를 기술 ex) http: //ajax.googleapis.com/ajax /libs/jquery/1.10.1/jquery.min.js 또는 ./jquery.min.js 자바스크립트 기본 형태 일반적으로<head> 안에 위치 HTML5 에서는 type=“...” 부분을 넣지 않는게 원칙

ㅇ 자바스크립트에서 변수명과 함수명을 붙일때 사용 ㅇ 식별자 생성 규칙 - 예약 키워드 사용 불가 ex) var, function - 숫자로 시작 불가 - 특수문자는 _ 과 $ 만 허용 - 공백 사용 불가 - 영어 이외의 언어도 사용 가능하지만, 영어 사용이 관례 - input, output 같은 의미있는 단어 사용 - 생성자 함수의 이름은 대문자로 시작 - 변수, 인스턴스, 함수, 메소드의 이름은 소문자로 시작 - 여러 단어로 이뤄진 식별자는 각 단어의 첫 글자를 대문자로 자바스크립트 식별자

자바스크립트 주석

ㅇ alert() 웹 브라우저에 경고창 형태로 출력 자바스크립트 출력 (1/2) ㅇ console.log() 웹 브라우저 개발자 도구에 로그 출력

ㅇ document.write() 웹 브라우저에 페이지 형태로 출력 자바스크립트 출력 (2/2)

ㅇ “동해물과 백두산이” or ‘동해물과 백두산이’ 큰따옴표, 작은따옴표 둘중 아무거나 사용해도 상관없지만 가급적이면 한가지 방식으로만 사용 ㅇ 내부에 작은 따옴표를 쓰고 싶으면 외부에 큰 따옴표 내부에 큰 따옴표를 쓰고 싶으면 외부에 작은 따옴표 자바스크립트 문자열 (1/2)

ㅇ 한가지 따옴표만 사용하고 싶으면 이스케이프 문자 사용 ex) alert(“동해물과 \”백두산이\””); 자바스크립트 문자열 (2/2) ㅇ 연결 연산자 ‘+’ ex) ‘가나’ + ‘다라’ + ‘마바’  가나다라마바

자바스크립트 숫자 (1/2)

자바스크립트 숫자 (2/2)

자바스크립트 불리언 (1/4)

ㅇ <script> alert(30 > 20 > 10); </script> false 자바스크립트 불리언 (4/4)

ㅇ ‘존재하지 않는 것’을 표현하는 자료형 var value; alert(value); 자바스크립트 undefined var value = null; alert(value);

자바스크립트 자료형 검사

변수 선언 : var또는생략 var value = null; 자바스크립트 변수 논리형 var flag = true / false; var name = “문자열”; var name = ‘문자열’; 문자형 varnum = 10; varnum = -10.333; 숫자형

vararr = new Array(); vararr = Array(5); vararr = new Array(“A”, “B”, “C”, “D”); vararr = [“A”, “B”, “C”, “D”]; 자바스크립트 배열 (1/2) vararr = new Array(); arr[0] = “A”; arr[1] = “B”; arr[2] = “C”; arr[3] = “D”; vararr = new Array(); arr[‘a’] = ‘A’; arr[‘b’] = ‘B’; arr[‘c’] = ‘C’; arr[‘d’] = ‘D’;

vararr = new Array(); arr[0] = “000”; arr[“a”] = “aaa”; arr[“1”] = “111”; console.log("1 : " + arr[0]); console.log(“2 : " + arr[“0”]); console.log(“3 : " + arr[1]); console.log(“4 : " + arr[“1”]); console.log(“5 : " + arr[“a”]); console.log(“6 : " + arr.a); console.log(“7 : " + arr[2]); 자바스크립트 배열 (2/2)

함수 선언 function functionName(param1, param2, …, paramN) { [return type]; } 자바스크립트 함수 (1/4) function sum() { } 매개변수 X 반환 X function sum(endNum) { return totalNum; } 매개변수 O 반환 O

함수 사용 <script type=“text/javascript”> function sum() { document.write(“1 ~ 100까지의 합”); } sum(); // 호출 </script> 자바스크립트 함수 (2/4) <script type=“text/javascript”> function sum(endNum) { vartotalNum = “”; totalNum = “1 ~ “ + endNum + “까지의 합”; return totalNum; } var result = sum(100); // 호출 document.write(result); </script>

함수 오버라이드 <script type=“text/javascript”> function sum() { alert(“1 ~ 100까지의 합”); } function sum() { alert(“오버라이드”); } sum(); </script> 자바스크립트 함수 (3/4)

가변인자 함수 <script type=“text/javascript”> function sum() { document.write("length : " + arguments.length + "<br />"); document.write("arguments[0] : " + arguments[0] + "<br />"); document.write("arguments[4] : " + arguments[4]); } sum(1, 2, 3, 4, 5); </script> 자바스크립트 함수 (4/4)

if(num == 1) { document.write(“가”); } else if(num == 2) { document.write(“나”); } else { document.write(“else”); } 자바스크립트 조건문(1/2) varnum = 1; switch(num) { case 1 : document.write(“가”); break; case 2 : document.write(“나”); break; default : document.write(“default”); }

varstr = “a”; switch(str) { case ‘a’ : document.write(“가”); break; case ‘b’ : document.write(“나”); break; default : document.write(“default”); } 자바스크립트 조건문(2/2)

for(var i = 0; i < 10; i++) { document.write(i + “<br />”); } 자바스크립트 반복문 (1/2) var i = 0; while(i < 10) { document.write(i + “<br />”); i++; } var i = 0; do { document.write(i + “<br />”); i++; } while(i < 10);

var array = [1, 2, 3, 4, 5]; for(var i in array) { document.write(i + “<br />”); } 자바스크립트 반복문 (2/2)

자바스크립트 개요 (1/2)

자바스크립트 개요 (1/2)

Presentation Transcript