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

자바스크립트 개요 (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)


연산자 설명

! 논리 부정 연산자

&& 논리곱 연산자

|| 논리합 연산자


ㅇ <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


함수 사용

<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>


함수 오버라이드

<script type=“text/javascript”> function sum() { alert(“1 ~ 100 까지의 합” ); } function sum() { alert(“ 오버라이드” ); } sum();</script>


가변인자 함수

<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 />”);}

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

Documents