JavaScript 1 (Client Side Script)

JavaScript 1(Client Side Script) 정명희

자바스크립트의 정의 • 웹상에서 동작하는 인터프리터 언어 • 동적인 문서 구성위해 고안된 스크립트 언어 • HTML문서 안에서 사용 • 클라이언트쪽에서 실행되는 언어이므로 네트웍을 통한 데이터 전송 없이 모든 작업 처리 가능 • 브라우저에 의해서 실행 • 단점 • 브라우저의 영향을 많이 받음 • 사용자가 만든 코드가 그대로 클라이언트에게 전달 • 보안에 취약 JavaScript

Client Server HTML 전송 HTML과 스크립트 해석 자바스크립트의 정의 • 동작 방식 • 문서 객체 모형(DOM)에 따라 처리-> HTML 문서 제어 • 주석 : 라인주석 //, 여러줄 주석 /* */ • 세미콜론으로 한문장 마침(생략가능) • 문자열 연결 : + HTTP 요청 JavaScript

자바스크립트의 기능 • 동적인 효과 • 이미지 롤오버, 상황표시줄에 문자 표시, 이벤트 처리 등 • 기능적인 면 • 입력 데이터의 확인, 쿠키 처리, 브라우저 정보에 따른 처리, 새 창 열기 등 JavaScript

자바스크립트의 구성 요소 • 객체 • 사용자 정의 객체 : 사용자가 정의하여 사용가능 • 내장객체 : 기본적으로 제공되는 객체 • 브라우저 객체 : 브라우저 자원을 이용하는 객체 • 이벤트와 이벤트 핸들러 • 상호작용하는 웹페이지 구현 • 문법 • 변수, 자료형, 제어문, 함수 등 JavaScript

자바스크립트와 객체 • 객체 + 속성 (or 메소드) • 객체.속성 = 새로운 값 • 객체.메소드(매개변수들…) • ex) document.write() • : 웹 페이지에 내용을 출력할 수 있는 메소드 • 자바스크립트는 객체 기반 언어 • 클래스 정의나 상속지원하지 않음 JavaScript

구 현 • 직접 추가하기<script Language=“JavaScript”>문장</script> • 외부파일 추가하기<script src=a.js language=“JavaScript”> </script> JavaScript

구현(계속) • HTML내에서 자바스크립트를 사용할 수 있는형식 4가지 • - <BODY>내 or <HEAD>에서 <SCRIPT> 사용- <HEAD>내에서 정의하고,<BODY>에서 호출- 외부 자바스크립트 파일 이용- 이벤트 핸들러와 함께 자바스크립트 사용 • <HEAD>,<BODY> 어디든 여러 번 사용 가능 • <HEAD> : 자료, 함수의 선언 및 정의내용 서술 • <BODY> : 자료의 대입, 연산, 함수의 호출,실행 JavaScript

코딩시 주의사항 • 자바스크립트는 대소문자를 구분함 • 문자열은 “ ”, ‘ ’ 안에 넣어야 함 • “ ”안에 “ ”를 사용해야 하는 경우에는 ‘ ’를 사용해야 함 • 문법이나 실행중 에러가 나면 웹브라우저에서 에러 확인가능 • 주석문 : //, /* */ • 한 줄에 한 문장 입력이 원칙 • 한줄에 한 줄 이상의 문장을 쓰려면 ; 사용 • 함수를 정의하거나 여러 문장을 하나로 묶을 때는 { } 를 사용 JavaScript

실 습 document.write("자바스크립트 소스 파일을 이용한 화면 출력");document.write("<p>");document.write("<hr>");document.write("<p>"); <html><head><title> 소스 파일 사용하기 </title><script language="javascript" src="sample.js"></script></head><body>자바 스크립트 소스 파일 이용하기 실습</body></html> JavaScript

변 수 • var 로 선언(생략가능) • 영문 대소문자, 숫자, _반드시 영문이 앞에 와야함(한글 사용불가) • 대,소문자 구별함 • Variant형 -> 미리 형태가 정의되지 않고 저장된 값의 형태에 따라 변수 타입이 결정됨 • 키워드는 사용불가 • 특이한 변수값-> Null, NaN, Infinity JavaScript

자료형 • 자료형 • 문자형 : “” , ‘’ 로 둘러싸인 문자 • 정수형 : 10진수 : 0 - 9사이의 수16진수 : 숫자앞에 0X가 붙음, 8진수 : 숫자앞에 0이 붙음 • 부동소수점형 : 실수형(소수점. 지수형) • 논리형(부울형) : true(1), false(0) 값 • Null : 아무 값도 없다는 뜻 • 특수문자\n: new line \r:carriage return • \t :커서를 tab위치로 이동 \b :커서를 앞문자를 지우며 이동 • \f 커서를 다음 페이지 처음으로 이동 • \\ : \문자 \’ : ‘문자 \” : “문자 JavaScript

자료형(계속) • 리터럴 • 기본형 리터럴 • 직접 값으로 표현되는 것 • 숫자, 논리형, 문자열 10 “10” • 배열 리터럴 • [ ]안에 배열 원소 기술 • Coffees = [“french roast”, “columbian”, “kona”] • 객체 리터럴 • { }안에 속성이름과 값 • Car ={mycar: “saturn”, getcar: cartype(“honda”)} JavaScript

변수 선언 • 전역변수(global) • 함수 밖에서 선언된 변수 • Var키워드 선택적 사용 • 지역변수(local) • 함수 안에서 선언된 변수 • Var키워드 사용 • (var 키워드 사용 하지 않으면 전역변수로 취급) JavaScript

연산자 • 산술연산자 : +,-,*,/,% • 비교연산자 : >, <, >=, <=, ==, != • 논리연산자 : &&, ||, ! • 비트연산자 : ~, &, |, ^, <<, >> • 단항연산자 : ++, -- • 삼항조건연산자 : (조건) ? 값1:값2 • 그외 연산자 : new, delete, 쉼표연산자,typeof • 우선순위 : • 괄호→산술→비트연산자→비교연산자→논리연산자 JavaScript

제어문 • 제어문은 명령문을 조건에 따라 프로그램의 실행 절차를 제어하는 제어구조. • 즉, 제어문은 명령문을 통해서 프로그램의 흐름을 수정하여 명령문을 반복적으로 실행시키거나 어떤 조건에 따라서 명령문을 실행시키는 명령문. • 제어문은 조건문, 반복문 등과 그밖에 break문, continue문, label문, 함수 반환문 등으로 구성. JavaScript

제어문 • 분기 제어문if … else문, switch 문 • 반복 제어문while 문do … while 문for 문 JavaScript

if문 조건문 switch문 제어문 for문 반복문 while문 제어문 JavaScript

제어문 – if • 조건문은 조건에 따라 제어의 흐름을 이동하는 명령문. • 조건문은 조건식을 이용하여 조건을 실행하며 조건식이 참인 경우에는 참인 문장을 거짓인 경우에는 거짓인 문장을 실행. • 대부분의 자바스크립트 문장들은 하나 이상의 조건문으로 구성 • 형식 • If (조건식) 문장들 • 단순 if문은 삼항조건연산자와 동일 • 삼항조건연산자 : (조건) ? 값1:값2 JavaScript

단순 if문 if – else 문 다중 if문 if ( 조건 ) { 실행할 문장; } if ( 조건 ) { 실행할 문장 1; } else { 실행할 문장 2; } if ( 조건 1 ) { 실행할 문장 1; } else if ( 조건 2 ) { 실행할 문장 2; } ... else { 실행할 문장 n; } 제어문 – if (계속) JavaScript

제어문 - switch • If : 단일조건처리에 주로 사용 • Switch : 다중조건문으로 한번에 여러개의조건식을 처리할수 있어서 조건의 수가 많을때 사용 조건이 “같다” 일때만 처리 • 부등호 사용불가-범위사용불가 • break 문 : 한가지 처리만 수행후 switch 빠져나감 • 생략시 앞줄의 case와 ‘or’로 연결되어 break를 만날때까지 계속 문장 수행 • default 문은 위의 case문에 해당하는 값이 없으면 문장n을 처리 (생략가능) JavaScript

switch ( 표현식 ) { case 값1 : 실행할 문장1 break case 값2 : 실행할 문장2 break ………….. default : 실행할 문장n; } 제어문 – switch(계속) JavaScript

제어문–break와 continue • break : 반복문을 강제로 빠져 나오는 명령 • continue : 반복문 내에서 이 후의 명령은 수행하지 않고 다시 조건을 판단하는 곳으로 이동하는 명령 JavaScript

for ( 초기값 ; 조건 ; 증감식 ) { 반복해서 실행할 문장들 ………. } 반복문 - for • 컴퓨터의 뛰어난 처리 능력 중의 하나는 반복 계산 능력임. • 반복문은 조건식의 문장을 판정하여 조건식이 참이면 문장을 반복 실행하는 제어구조. • 반복문은 while 반복문, do~while 반복문, for 반복문으로 구성. JavaScript

제어문 - while while ( 조건 ) { 조건이 참일 경우 수행할 작업 } JavaScript

함수 • 여러명령어를 하나의 그룹으로 묶고 여기에 이름을 붙여서 하나의 실행 흐름으로 처리하는 것 • 형식 function 함수이름 (매개변수) { 실행될 스크립트 코드 1 실행될 스크립트 코드 2 … return 변수 -> 리턴이 있는 함수 } JavaScript

함수의 형식 • 함수 전달문은 매개 변수에 값을 전달할 때 사용. • 매개변수 값을 전달할 때 함수 값 전달은 dFunction(“가”) 함수에서처럼 괄호( ) 안의 함수에 전달할 값을 넣어 준다. • 매개변수의 수 • 선언된 함수의 매개변수 수와 호출할 때의 매개변수 수가 달라도 함수호출이 가능하다 • 매개변수가 부족해서 값을 전달하지 않는 경우에는 ‘undefined’로 값을 설정 • 매개변수를 call-by-value 방법에 의해 전달 JavaScript

매개변수가 없는 경우 매개변수가 있는 경우 리턴값이 있는 경우 function test1() { alert("test1") } function test2(para1,para2) { alert(para1+para2) } function test3(question) { ans=confirm(question) return ans } 함수의 형식 JavaScript

함수의 호출 • 매개변수가 없는 경우 : test1() • 매개변수가 있는 경우: test2(100, 200) • 리턴값이 있는 경우 : K = test3(“요청”) JavaScript

기본 입출력 함수 • Prompt 함수 : 문자열을 입력받기 위한 함수 • alert 함수 : 메시지 출력 • confirm 함수 : 확인, 취소를 선택 • prompt 와 confirm 함수는 변수필요 • eval : 문자열을 숫자로 변환한 후 계산해주는 함수 • parseInt : 문자열을 정수로 변환해 주는 함수(2,8,10,16진수 변환, 변환을 못하면 0값반환) JavaScript

JavaScript 1 (Client Side Script)