웹과인터넷활용및실습 () (Part I) 문양세강원대학교 IT 대학컴퓨터과학전공 강의내용 의기초의기본문법제어구조함수의내장객체브라우저내장객체를이용한다양한효과주기 Page 2 1
개요 사용자와상호작용하는동적웹문서작성웹에서사용할수있도록만들어진스크립트언어선마이크로시스템스와넷스케이프사가공동으로개발 주요특징 웹문서 (HTML 문서 ) 에포함되어웹서버에서브라우저로다운로드됨 웹브라우저가를실행 ( 실행엔진을브라우저내에포함 ) 마우스클릭, 키보드입력등의이벤트처리를서버와연동없이실행 윈도우프레임을조절하거나, 윈도우방문히스토리를기억하는등의프로그래밍가능 Page 3 의실행 컴파일러같은특수한개발도구가필요하지않음 브라우저에내장된인터프리터 (interpreter) 에의해실행됨메모장등의에디터프로그램과웹브라우저만있으면쉽게프로그래밍할수있음 클라이언트스크립트 브라우저 ( 클라이언트 ) 에서수행되는스크립트 JavaScript, VB Script 작성이간단하나, 복잡한프로그래밍이어렵고, 소스가공개됨 서버스크립트 서버에서수행되고, 결과만브라우저에전달됨 ASP, PHP, JSP 복잡한프로그래밍이가능하고, 소스가공개되지않으나, 어려움 Page 4 2
의특징 웹문서에바로코딩하여삽입할수있기때문에작성및편집이쉽다. 클라이언트에서바로실행되므로, 처리과정이신속 ( 컴파일불필요 ) 플랫폼에독립적 ( 거의모든브라우저에서지원 ) 객체지향언어이나, 클래스의상속을지원하지않으며, 자바언어에비해한정된객체와메소드만을지원 Page 5 의구조 는 HTML문서에서 <head> 부분이나 <body> 부분에 <script> 태그로를정의하여삽입 문서내에작성하는방법 <script language="javascript" > 소스 </script> 외부문서에서를불러오는방법 <script language="javascript" src=" 자바스트립트외부소스파일 > </script> 를지원하는않는브라우저에서처리하는방법 <noscript> 현재스크립트를브라우저에서지원하는않을경우보여줄내용 </noscript> Page 6 3
의주석문 (1/2) // 주석문 기호 (//) 뒤에있는모든문자들은주석문으로간주된다. 설명할내용이 1 줄로구성될때주로사용한다. /* 주석문 */ 기호 /* 와 */ 사이에문자들은모두주석문으로간주된다. 설명할내용이많아서여러줄로입력해야할때사용된다. <!-- 주석문 ---> 를지원하지않는웹브라우저에서는기호 <!--와 --> 사이에있는코드들은모두주석문으로간주하게된다. 화면에코드들이전혀표시되지않게된다. Page 7 의주석문 (2/2) Page 8 4
의삽입방법 (1/2) 문서내부에포함시키기 Page 9 의삽입방법 (2/2) 외부파일에작성된불러오기 Page 10 5
강의내용 의기초의기본문법제어구조함수의내장객체브라우저내장객체를이용한다양한효과주기 Page 11 기본자료형 분류기본자료형진법설명예 10 진법소수점이포함되지않는 10 진수 1, 9, -20, 숫자자료형 정수형 실수형 8 진법 16 진법 일반실수형 문자열 논리형 널 (Null) 값 NaN 값 0으로시작하는숫자로 0부터 7까지의조합으로구성 0x 로시작하는숫자로 0 에서 9 까지의수와 A 부터 F 까지의문자조합으로구성 017, 0171 0x79A, 0x25 소수점을포함하는 10 진수 0.124, 9.227 이중따옴표 ( ) 와단일따옴표 ( ) 내에있는연속된문자들 참 (true) 과거짓 (false) 의두가지값중하나만가짐변수의값이정의되지않아서변수에아무값도현재들어있지않다는의미 NaN(Not a Number) 은숫자가아니라는의미 love", " 사랑 true, false null NaN Page 12 6
변수 (variable) (1/2) 변수란? 프로그램에서자료형값을저장하기위한기억장소의이름 ( 상수와다르게 ) 프로그램이실행되면서기억된내용이변경될수있음 지역변수 (local variable) 와전역변수 (global variable) 로분류 지역변수 함수안에선언된변수로, 함수안에서만사용될수있음 지역변수선언의예 var sum; // sum이라는변수를지역변수로선언한다. var total = 100; // 지역변수 sum을선언하고, 값을 100으로초기화한다. Page 13 변수 (variable) (2/2) 전역변수 함수밖에선언된변수로, 여러함수에걸쳐사용될수있음 전역변수선언의예 : sum = 200; // 전역변수 sum을선언하고, 값을 200으로초기화 변수를만드는예 변수명의첫글자는반드시영문자나밑줄로시작 변수명에는영문자 (A~Z, a~z), 숫자 (0~9), 밑줄 (_) 만을사용 이미정의한예약어는변수명으로사용불가 예약어의예 : abstract, in, static, void, super, long, break, final, if, Page 14 7
연산자의종류 산술연산자 ( 사칙연산을수행할때사용하는연산자 ): +, -, *, /, % 대입연산자 ( 값 ( 숫자 ) 을대입할때사용하는연산자 ): =, +=, -=, *=, /=, %= 관계연산자 ( 두값의크기를비교하는연산자 ): >, <, >=, <=, ==,!= 논리연산자 ( 여러조건 ( 관계연산결과 ) 을연결할때사용하는연산자 )!, &&, 증감연산자 ( 변수값을 1 증가혹은감소시키는연산자 ): ++, -- Page 15 산술연산자 Page 16 8
대입연산자 Page 17 관계연산자 Page 18 9
논리연산자 Page 19 증감연산자 Page 20 10
강의내용 의기초의기본문법제어구조함수의내장객체브라우저내장객체를이용한다양한효과주기 Page 21 IF (1/6) 조건 (condition) 이참인경우에만해당문장들을수행하고자할때, 사용하는제어문 단순 IF 문 if( 조건 ) 명령문1; if( 조건 ) { 명령문1; 명령문2; 명령문n; } 조건을만족하는경우에만, 명령문 ( 들 ) 을실행 조건이만족하지않으면명령문 ( 들 ) 을실행하지않고, 다음단계로진행함 Page 22 11
IF (2/6) 단순 IF 문예제 Page 23 IF (3/6) IF ELSE if( 조건 ) 명령문A; else 명령문B; if( 조건 ) { 명령문A1; 명령문An; } else { 명령문B1; 명령문Bn; } 조건을만족하면, 명령문 A( 들 ) 를실행 조건을만족하지않으면명령문 B( 들 ) 를실행 Page 24 12
IF (4/6) IF ELSE 예제 Page 25 IF (5/6) 다중 IF ELSE if( 조건1) 명령문 1; else if( 조건2) 명령문2; else 명령문n 조건 1 을만족하면, 명령문1 을실행 조건2을만족하면, 명령문2를실행 만족하는조건이없으면명령문n을수행 Page 26 13
IF (6/6) 다중 IF ELSE Page 27 WHILE (1/2) 주어진조건이만족하는한 WHILE 문내의문장 ( 들 ) 을반복해서실행 while( 조건 ) { 명령문 1; 명령문 2; 명령문 n; } 조건이참 (true) 이면, WHILE 블록안의명령문들을 ( 반복 ) 수행 조건이거짓 (false) 인경우, WHILE문을수행하지않고루프를빠져나감 Page 28 14
WHILE (2/2) Page 29 DO WHILE (1/2) 조건을검사하여조건이만족하는한루프를반복수행 WHILE과의차이점 WHILE 은조건을먼저검사한후실행여부를결정, DO WHILE은먼저실행한후조건을검사 WHILE의경우명령문들이한번도수행되지않을수있으나, DO WHILE의경우명령문들은적어도한번은수행됨 do { 명령문 1; 명령문 2; 명령문 n; } while( 조건 ); Page 30 15
DO WHILE (2/2) Page 31 FOR (1/2) 조건이만족하는동안에 FOR 문내의문장들을반복하여수행 do { 명령문 1; 명령문 2; 명령문 n; } while( 조건 ); FOR문내부는초기화부분, 조건부분, 증감부분으로구성됨 초기화부분은처음한번만수행되고, 조건부분은루프수행시마다계속수행할지여부를판단하며, 증감부분은매루프마지막에인덱스 (index) 변화를위해수행되는부분임 Page 32 16
FOR (2/2) Page 33 CONTINUE & BREAK (1/3) CONTINUE 명령문 ( 들 ) 을반복하는과정에서현단계 ( 반복 ) 의진행을중단시키고, 다음의새로운반복단계를위한조건검사부분으로되돌아가고자할때사용 BREAK 반복과정을벗어나고자할때사용 ( 루프를벗어나고자할때사용 ) Page 34 17
CONTINUE & BREAK (2/3) Page 35 CONTINUE & BREAK (3/3) Page 36 18
SWITCH (1/2) 여러가지조건에맞추어수행해야하는명령문이있는경우사용 switch( 값 ) { case value1: 명령문들 1; break; case valuen: 명령문들N; break; default: 명령문들X; break; } 주어진값이 value1인경우, 명령문들1이수행되고, 주어진값이 valuen인경우, 명령문들N이수행되며, 주어진값에해당하는 value가없는경우, default의명령문들x가수행된다. Page 37 SWITCH (2/2) Page 38 19
강의내용 의기초의기본문법제어구조함수의내장객체브라우저내장객체를이용한다양한효과주기 Page 39 함수 (function) 개념 특정한작업을수행하도록만들어진독립적인프로그램모듈프로그램에서반복되는부분을함수로만들어놓음 해당함수가필요할때마다, 호출 (call) 하여사용 프로그램크기를줄일수있고, 작성시간도단축시킬수있음 프로그램의모듈화가능 하나의큰프로그램을작은단위의여러함수로분해하여작성 함수를통한모듈화가가능하여, 알아보기쉽고수정이용이함 함수의입출력과처리 함수는매개변수 (parameter) 를입력으로받아서, 내부처리를수행한후 ( 즉, 함수의기능을수행한후 ), 결과를리턴 ( 출력 ) 한다. Page 40 20
함수의구조 FUNCTION 함수명 ( 매개변수 1, 매개변수 2... 매개변수 N) { 명령문 1; 명령문 2; 명령문 3;... 명령문 n; } RETURN 반환값이나변환변수 ; function add(a, b) { var sum; sum = a + b; return sum; } Page 41 함수예제 Page 42 21
내장함수 (1/2) 에기본으로포함된함수 함수명 alert( ( 문자열 ) 기능 [ 확인 ] 버튼이있는메시지상자를나타낸다. 메시지의줄바꿈을원할경우에는 \n' 을이용한다. confirm( 문자열, 초기값 ) [ 확인 ] 과 [ 취소 ] 버튼이있는방문자가스스로버튼을선택할수있는대화상자를보여준다. escape( 문자 ) 문자를 ASCII 형식의문자로변환하여준다. eval( 수식 ) 문자열을수식으로받아들여그내용을계산한다. isnan( 값 ) 값이숫자인지판별하여숫자인경우 TRUE를그렇지않으면 FALSE를리턴한다. parseint( 문자열 ) 문자열을정수로변환하여준다. parsefloat( 문자열 ) 문자열을부동소수점으로변환하여준다. prompt( 문자열, 초기값 ) 값을입력할수있는입력대화상자를보여준다. 문자열이메시지형식으로설명글기능을하여나타나고, 초기값이입력란에나타난다. unescape(ascii코드문자 ) escape 함수와반대로 ASCII 코드의문자를문자세트로변환하여준다. Page 43 내장함수 (2/2) alert() 함수의사용예 Page 44 22
강의내용 의기초의기본문법제어구조함수의내장객체브라우저내장객체를이용한다양한효과주기 Page 45 23