Upload
marja
View
81
Download
4
Embed Size (px)
DESCRIPTION
자바스크립트 : 웹브라우저 상에서 사용할 수 있는 스크립트 언어. 자바스크립트 개요 (1/2). 자바스크립트로 할 수 있는 것 사용자가 입력한 데이터 검사 메뉴 등의 애니메이션 효과 게임 제작 웹페이지 갱신 없이 서버와 통신 기타 웹페이지 HTML 코드 추가 / 수정 / 삭제. 자바스크립트의 단점 표준이 없음 문법 오류를 잡기 힘듬 사용자의 PC 환경에 따라 정상 / 비정상 동작. 자바스크립트 개요 (2/2 ). 자바스크립트의 장점 하이브리드 앱 제작 가능 - PowerPoint PPT Presentation
Citation preview
자바스크립트 개요 (1/2)
자바스크립트 : 웹브라우저 상에서 사용할 수 있는 스크립트 언어
자바스크립트로 할 수 있는 것
- 사용자가 입력한 데이터 검사
- 메뉴 등의 애니메이션 효과
- 게임 제작
- 웹페이지 갱신 없이 서버와 통신
- 기타 웹페이지 HTML 코드 추가 / 수정 / 삭제
자바스크립트 개요 (2/2)
자바스크립트의 단점- 표준이 없음- 문법 오류를 잡기 힘듬- 사용자의 PC 환경에 따라 정상 / 비정상 동작
자바스크립트의 장점- 하이브리드 앱 제작 가능- 웹 페이지를 일반 애플리케이션과 흡사하게 구성 가능- 클라이언트에서 실행되므로 서버의 부하를 줄여줌- 플러그인 ( 플래시 등 ) 을 대체할 수단
자바스크립트 기본 형태
<html>
<head> <script src=“ 파일위치” ></script>
<script type=“text/javascript”> // 코드 작성 </script>
</head>
<body> </body>
</html>
일반적으로 <head> 안에 위치
HTML5 에서는 type=“...” 부분을 넣지 않는게 원칙
동일 서버 내 또는 외부 서버 내의 위치를 기술ex) http: //ajax.googleapis.com/ajax /libs/jquery/1.10.1/jquery.min.js 또는 ./jquery.min.js
자바스크립트 식별자
ㅇ 자바스크립트에서 변수명과 함수명을 붙일때 사용ㅇ 식별자 생성 규칙 - 예약 키워드 사용 불가 ex) var, function
- 숫자로 시작 불가 - 특수문자는 _ 과 $ 만 허용 - 공백 사용 불가 - 영어 이외의 언어도 사용 가능하지만 , 영어 사용이 관례 - input, output 같은 의미있는 단어 사용 - 생성자 함수의 이름은 대문자로 시작 - 변수 , 인스턴스 , 함수 , 메소드의 이름은 소문자로 시작 - 여러 단어로 이뤄진 식별자는 각 단어의 첫 글자를 대문자로
자바스크립트 주석
자바스크립트 출력 (1/2)
ㅇ alert() 웹 브라우저에 경고창 형태로 출력
ㅇ console.log() 웹 브라우저 개발자 도구에 로그 출력
자바스크립트 출력 (2/2)
ㅇ document.write() 웹 브라우저에 페이지 형태로 출력
자바스크립트 문자열 (1/2)
ㅇ “동해물과 백두산이” or ‘ 동해물과 백두산이’ 큰따옴표 , 작은따옴표 둘중 아무거나 사용해도 상관없지만 가급적이면 한가지 방식으로만 사용
ㅇ 내부에 작은 따옴표를 쓰고 싶으면 외부에 큰 따옴표 내부에 큰 따옴표를 쓰고 싶으면 외부에 작은 따옴표
자바스크립트 문자열 (2/2)
ㅇ 한가지 따옴표만 사용하고 싶으면 이스케이프 문자 사용 ex) alert(“ 동해물과 \” 백두산이 \””);
이스케이프 문자 설명\t 수평 탭\n 줄바꿈\’ 작은따옴표\” 큰따옴표\\ 역 슬래시
ㅇ 연결 연산자 ‘ +’
ex) ‘ 가나’ + ‘ 다라’ + ‘ 마바’ 가나다라마바
자바스크립트 숫자 (1/2)
자바스크립트 숫자 (2/2)
자바스크립트 불리언 (1/4)
자바스크립트 불리언 (2/4)
자바스크립트 불리언 (3/4)
연산자 설명
! 논리 부정 연산자
&& 논리곱 연산자
|| 논리합 연산자
자바스크립트 불리언 (4/4)
ㅇ <script>
alert(30 > 20 > 10);
</script>
false
자바스크립트 undefined
ㅇ ‘존재하지 않는 것’을 표현하는 자료형
var value;
alert(value);
var value = null;
alert(value);
자바스크립트 자료형 검사
자바스크립트 변수
변수 선언 : var 또는 생략
var name = “ 문자열” ;var name = ‘ 문자열’ ;
var num = 10;var num = -10.333;
var flag = true / false;
var value = null;
문자형
숫자형
논리형
자바스크립트 배열 (1/2)
var arr = new Array();
var arr = Array(5);
var arr = new Array(“A”, “B”, “C”, “D”);
var arr = [“A”, “B”, “C”, “D”];
var arr = new Ar-ray();arr[0] = “A”;arr[1] = “B”;arr[2] = “C”;arr[3] = “D”;
var arr = new Ar-ray();arr[‘a’] = ‘A’;arr[‘b’] = ‘B’;arr[‘c’] = ‘C’;arr[‘d’] = ‘D’;
자바스크립트 배열 (2/2)
var arr = 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]);
자바스크립트 함수 (1/4)
함수 선언
function functionName (param1, param2, …, paramN) { [return type];}
function sum(endNum) { return totalNum;}
function sum() {
}
매개변수 X반환 X
매개변수 O반환 O
자바스크립트 함수 (2/4)
함수 사용
<script type=“text/javascript”> function sum() { document.write(“1 ~ 100 까지의 합” ); } sum(); // 호출</script>
<script type=“text/javascript”> function sum(endNum) { var totalNum = “”; totalNum = “1 ~ “ + endNum + “ 까지의 합” ; return totalNum; } var result = sum(100); // 호출 document.write(result);</script>
자바스크립트 함수 (3/4)
함수 오버라이드
<script type=“text/javascript”> function sum() { alert(“1 ~ 100 까지의 합” ); } function sum() { alert(“ 오버라이드” ); } sum();</script>
자바스크립트 함수 (4/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>
자바스크립트 조건문 (1/2)
if(num == 1) { document.write(“ 가” );} else if(num == 2) { document.write(“ 나” );} else { document.write(“else”);}
var num = 1;switch(num) { case 1 : document.write(“ 가” ); break; case 2 : document.write(“ 나” ); break; default : document.write(“default”);}
자바스크립트 조건문 (2/2)
var str = “a”;switch(str) { case ‘a’ : document.write(“ 가” ); break; case ‘b’ : document.write(“ 나” ); break; default : document.write(“default”);}
자바스크립트 반복문 (1/2)
for(var i = 0; i < 10; i++) { document.write(i + “<br />”);}
var i = 0;while(i < 10) { document.write(i + “<br />”); i++;}
var i = 0;do { document.write(i + “<br />”); i++;} while(i < 10);
자바스크립트 반복문 (2/2)
var array = [1, 2, 3, 4, 5];for(var i in array) { document.write(i + “<br />”);}