JavaScript 1 (Client Side Script)

JavaScript 1JavaScript 1(Client Side Script)(Client Side Script)

정명희

JavaScript 2

자바스크립트의 정의자바스크립트의 정의웹상에서 동작하는 인터프리터 언어동적인 문서 구성위해 고안된 스크립트 언어HTML 문서 안에서 사용클라이언트쪽에서 실행되는 언어이므로 네트웍을 통한

데이터 전송 없이 모든 작업 처리 가능 브라우저에 의해서 실행

단점 브라우저의 영향을 많이 받음 사용자가 만든 코드가 그대로 클라이언트에게 전달

보안에 취약

JavaScript 3

자바스크립트의 정의자바스크립트의 정의동작 방식

문서 객체 모형 (DOM) 에 따라 처리 -> HTML 문서 제어

주석 : 라인주석 //, 여러줄 주석 /* */세미콜론으로 한문장 마침 ( 생략가능 )문자열 연결 : +

HTTP 요청Client ServerHTML 전송

HTML 과 스크립트 해석

JavaScript 4

자바스크립트의 기능자바스크립트의 기능동적인 효과 이미지 롤오버 , 상황표시줄에 문자 표시 ,

이벤트 처리 등 기능적인 면 입력 데이터의 확인 , 쿠키 처리 , 브라우저

정보에 따른 처리 , 새 창 열기 등

JavaScript 5

자바스크립트의 구성 요소자바스크립트의 구성 요소객체

사용자 정의 객체 : 사용자가 정의하여 사용가능 내장객체 : 기본적으로 제공되는 객체 브라우저 객체 : 브라우저 자원을 이용하는 객체

이벤트와 이벤트 핸들러 상호작용하는 웹페이지 구현

문법 변수 , 자료형 , 제어문 , 함수 등

JavaScript 6

자바스크립트와 객체자바스크립트와 객체객체 + 속성 (or 메소드 )

객체 . 속성 = 새로운 값 객체 . 메소드 ( 매개변수들… )

ex) document.write() : 웹 페이지에 내용을 출력할 수 있는 메소드

자바스크립트는 객체 기반 언어 클래스 정의나 상속지원하지 않음

JavaScript 7

구 현구 현직접 추가하기

<script Language=“JavaScript”> 문장 </script>

외부파일 추가하기 <script src=a.js language=“JavaScript”> </script>

JavaScript 8

구현구현 (( 계속계속 ))

HTML 내에서 자바스크립트를 사용할 수 있는형식 4 가지

- <BODY> 내 or <HEAD> 에서 <SCRIPT> 사용 - <HEAD> 내에서 정의하고 ,<BODY> 에서 호출 - 외부 자바스크립트 파일 이용 - 이벤트 핸들러와 함께 자바스크립트 사용

<HEAD>,<BODY> 어디든 여러 번 사용 가능<HEAD> : 자료 , 함수의 선언 및 정의내용 서술<BODY> : 자료의 대입 , 연산 , 함수의 호출 , 실행

JavaScript 9

코딩시 주의사항코딩시 주의사항

자바스크립트는 대소문자를 구분함문자열은 “ ” , ‘ ’ 안에 넣어야 함

“ ” 안에 “ ”를 사용해야 하는 경우에는 ‘ ’를 사용해야 함문법이나 실행중 에러가 나면 웹브라우저에서 에러

확인가능주석문 : //, /* */한 줄에 한 문장 입력이 원칙한줄에 한 줄 이상의 문장을 쓰려면 ; 사용함수를 정의하거나 여러 문장을 하나로 묶을 때는 { }

를 사용

JavaScript 10

실 습실 습

<html><head><title> 소스 파일 사용하기 </title><script language="javascript" src="sample.js"></script></head><body>자바 스크립트 소스 파일 이용하기 실습</body></html>

document.write(" 자바스크립트 소스 파일을 이용한 화면 출력 ");document.write("<p>");document.write("<hr>");document.write("<p>");

JavaScript 11

변 수변 수var 로 선언 ( 생략가능 )영문 대소문자 , 숫자 , _

반드시 영문이 앞에 와야함 ( 한글 사용불가 )대 , 소문자 구별함Variant 형 -> 미리 형태가 정의되지 않고 저장된 값의

형태에 따라 변수 타입이 결정됨키워드는 사용불가특이한 변수값

-> Null, NaN, Infinity

JavaScript 12

자료형자료형

자료형 문자형 : “” , ‘’ 로 둘러싸인 문자 정수형 : 10진수 : 0 - 9사이의 수

16진수 : 숫자앞에 0X가 붙음 , 8진수 : 숫자앞에 0이 붙음 부동소수점형 : 실수형 ( 소수점 . 지수형 ) 논리형 ( 부울형 ) : true(1), false(0) 값 Null : 아무 값도 없다는 뜻 특수문자

\n: new line \r:carriage return \t :커서를 tab 위치로 이동 \b :커서를 앞문자를 지우며 이동\f 커서를 다음 페이지 처음으로 이동\\ : \문자 \’ : ‘ 문자 \” : “ 문자

JavaScript 13

자료형자료형 ((계속계속 ))

리터럴 기본형 리터럴

직접 값으로 표현되는 것숫자 , 논리형 , 문자열 10 “10”

배열 리터럴[ ]안에 배열 원소 기술Coffees = [“french roast”, “columbian”, “kona”]

객체 리터럴{ } 안에 속성이름과 값Car ={mycar: “saturn”, getcar: cartype(“honda”)}

JavaScript 14

변수 선언변수 선언전역변수 (global)

함수 밖에서 선언된 변수 Var 키워드 선택적 사용

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

JavaScript 15

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

괄호→산술→비트연산자→비교연산자→논리연산자

JavaScript 16

제어문제어문

제어문은 명령문을 조건에 따라 프로그램의 실행 절차를 제어하는 제어구조 .

즉 , 제어문은 명령문을 통해서 프로그램의 흐름을 수정하여 명령문을 반복적으로 실행시키거나 어떤 조건에 따라서 명령문을 실행시키는 명령문 .

제어문은 조건문 , 반복문 등과 그밖에 break문 , continue 문 , label 문 , 함수 반환문 등으로 구성 .

JavaScript 17

제어문제어문

분기 제어문 if … else 문 , switch 문

반복 제어문 while 문 do … while 문 for 문

JavaScript 18

제어문제어문

제어문

조건문

if 문switch 문

반복문for 문while 문

JavaScript 19

제어문 – 제어문 – if if

조건문은 조건에 따라 제어의 흐름을 이동하는 명령문 .조건문은 조건식을 이용하여 조건을 실행하며 조건식이 참인 경우에는 참인 문장을 거짓인 경우에는 거짓인 문장을 실행 .

대부분의 자바스크립트 문장들은 하나 이상의 조건문으로 구성

형식 If (조건식 ) 문장들 단순 if문은 삼항조건연산자와 동일 삼항조건연산자 : (조건 ) ? 값 1: 값 2

JavaScript 20

제어문 – 제어문 – if (if (계속계속 ))

단순 if 문 if – else 문 다중 if 문if ( 조건 ){ 실행할 문장 ;}

if ( 조건 ){ 실행할 문장 1;}else{ 실행할 문장 2;}

if ( 조건 1 ){ 실행할 문장 1;}else if ( 조건 2 ){ 실행할 문장 2;}...else{ 실행할 문장 n;}

JavaScript 21

제어문 제어문 - switch- switch

If : 단일조건처리에 주로 사용Switch : 다중조건문으로 한번에 여러개의조건식을

처리할수 있어서 조건의 수가 많을때 사용 조건이 “같다” 일때만 처리

부등호 사용불가 -범위사용불가 break 문 : 한가지 처리만 수행후 switch 빠져나감

생략시 앞줄의 case 와 ‘ or’ 로 연결되어 break를 만날때까지 계속 문장 수행

default 문은 위의 case 문에 해당하는 값이 없으면 문장 n을 처리 ( 생략가능 )

JavaScript 22

제어문 – 제어문 – switch(switch(계속계속 ))

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

JavaScript 23

제어문–제어문– breakbreak와 와 continuecontinue

break : 반복문을 강제로 빠져 나오는 명령

continue : 반복문 내에서 이 후의 명령은 수행하지 않고 다시 조건을 판단하는 곳으로 이동하는 명령

JavaScript 24

반복문 반복문 - for- for

컴퓨터의 뛰어난 처리 능력 중의 하나는 반복 계산 능력임 .

반복문은 조건식의 문장을 판정하여 조건식이 참이면 문장을 반복 실행하는 제어구조 .

반복문은 while 반복문 , do~while 반복문 , for 반복문으로 구성 .

for ( 초기값 ; 조건 ; 증감식 ) { 반복해서 실행할 문장들 ……….}

JavaScript 25

제어문 제어문 - while- while

while ( 조건 ) { 조건이 참일 경우 수행할 작업}

JavaScript 26

함수함수 여러명령어를 하나의 그룹으로 묶고 여기에 이름을 붙여서 하나의 실행 흐름으로 처리하는 것

형식

function 함수이름 ( 매개변수 )

{

실행될 스크립트 코드 1

실행될 스크립트 코드 2 …

return 변수 -> 리턴이 있는 함수

}

JavaScript 27

함수의 형식함수 전달문은 매개 변수에 값을 전달할 때 사용 . 매개변수 값을 전달할 때 함수 값 전달은 dFunction

(“ 가” ) 함수에서처럼 괄호 ( ) 안의 함수에 전달할 값을 넣어 준다 .

매개변수의 수 선언된 함수의 매개변수 수와 호출할 때의 매개변수

수가 달라도 함수호출이 가능하다 매개변수가 부족해서 값을 전달하지 않는 경우에는 ‘ und

efined’ 로 값을 설정 매개변수를 call-by-value 방법에 의해 전달

JavaScript 28

함수의 형식함수의 형식매개변수가 없는 경우 매개변수가 있는 경우 리턴값이

있는 경우

function test1() {

alert("test1")}

function test2(para1,para2) {

alert(para1+para2)

}

function test3(question){ans=confirm(question)

return ans}

JavaScript 29

함수의 호출함수의 호출매개변수가 없는 경우 : test1() 매개변수가 있는 경우

: test2(100, 200) 리턴값이 있는 경우 :

K = test3(“요청” )

JavaScript 30

기본 입출력 함수기본 입출력 함수Prompt 함수 : 문자열을 입력받기 위한 함수alert 함수 : 메시지 출력confirm 함수 : 확인 , 취소를 선택

prompt 와 confirm 함수는 변수필요

eval : 문자열을 숫자로 변환한 후 계산해주는 함수parseInt : 문자열을 정수로 변환해 주는 함수

(2,8,10,16 진수 변환 , 변환을 못하면 0값반환 )

JavaScript 1 (Client Side Script)

Documents

Transcript of JavaScript 1 (Client Side Script)