ASP (Active Server Page)

Download Report

Transcript ASP (Active Server Page) 

JavaScript 1
(Client Side Script)
정명희
자바스크립트의 정의
 웹상에서 동작하는 인터프리터 언어
 동적인 문서 구성위해 고안된 스크립트 언어
 HTML문서 안에서 사용
 클라이언트쪽에서 실행되는 언어이므로 네트웍을 통한
데이터 전송 없이 모든 작업 처리 가능
 브라우저에 의해서 실행
 단점
 브라우저의 영향을 많이 받음
 사용자가 만든 코드가 그대로 클라이언트에게 전달
보안에 취약
JavaScript
2
자바스크립트의 정의
 동작 방식
HTTP 요청
Client
HTML 전송
HTML과 스크립트 해석
Server
 문서 객체 모형(DOM)에 따라 처리
-> HTML 문서 제어
 주석 : 라인주석 //, 여러줄 주석 /* */
 세미콜론으로 한문장 마침(생략가능)
 문자열 연결 : +
JavaScript
3
자바스크립트의 기능
 동적인 효과
 이미지 롤오버, 상황표시줄에 문자 표시,
이벤트 처리 등
 기능적인 면
 입력 데이터의 확인, 쿠키 처리, 브라우저
정보에 따른 처리, 새 창 열기 등
JavaScript
4
자바스크립트의 구성 요소
 객체
 사용자 정의 객체 : 사용자가 정의하여 사용가능
 내장객체 : 기본적으로 제공되는 객체
 브라우저 객체 : 브라우저 자원을 이용하는 객체
 이벤트와 이벤트 핸들러
 상호작용하는 웹페이지 구현
 문법
 변수, 자료형, 제어문, 함수 등
JavaScript
5
자바스크립트와 객체
 객체 + 속성 (or 메소드)
 객체.속성 = 새로운 값
 객체.메소드(매개변수들…)


ex) document.write()
: 웹 페이지에 내용을 출력할 수 있는 메소드
 자바스크립트는 객체 기반 언어
 클래스 정의나 상속지원하지 않음
JavaScript
6
구현
 직접 추가하기
<script Language=“JavaScript”>
문장
</script>
 외부파일 추가하기
<script src=a.js language=“JavaScript”>
</script>
JavaScript
7
구현(계속)
 HTML내에서 자바스크립트를 사용할 수 있는
형식 4가지
 - <BODY>내 or <HEAD>에서 <SCRIPT> 사용
- <HEAD>내에서 정의하고,<BODY>에서 호출
- 외부 자바스크립트 파일 이용
- 이벤트 핸들러와 함께 자바스크립트 사용
 <HEAD>,<BODY> 어디든 여러 번 사용 가능
 <HEAD> : 자료, 함수의 선언 및 정의내용 서술
 <BODY> : 자료의 대입, 연산, 함수의 호출,실행
JavaScript
8
코딩시 주의사항
 자바스크립트는 대소문자를 구분함
 문자열은 “ ”, ‘ ’ 안에 넣어야 함
 “ ”안에 “ ”를 사용해야 하는 경우에는 ‘ ’를 사용해야 함
 문법이나 실행중 에러가 나면 웹브라우저에서 에러
확인가능
 주석문 : //, /* */
 한 줄에 한 문장 입력이 원칙
 한줄에 한 줄 이상의 문장을 쓰려면 ; 사용
 함수를 정의하거나 여러 문장을 하나로 묶을 때는 { } 를
사용
JavaScript
9
실습
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
10
변수
 var 로 선언(생략가능)
 영문 대소문자, 숫자, _
반드시 영문이 앞에 와야함(한글 사용불가)
 대,소문자 구별함
 Variant형 -> 미리 형태가 정의되지 않고 저장된 값의
형태에 따라 변수 타입이 결정됨
 키워드는 사용불가
 특이한 변수값
-> Null, NaN, Infinity
JavaScript
11
자료형
 자료형
 문자형 : “” , ‘’ 로 둘러싸인 문자
 정수형 : 10진수 : 0 - 9사이의 수
16진수 : 숫자앞에 0X가 붙음, 8진수 : 숫자앞에 0이 붙음
 부동소수점형 : 실수형(소수점. 지수형)
 논리형(부울형) : true(1), false(0) 값
 Null : 아무 값도 없다는 뜻
 특수문자
\n: new line
\r:carriage return
 \t :커서를 tab위치로 이동
\b :커서를 앞문자를 지우며 이동
 \f 커서를 다음 페이지 처음으로 이동
 \\ : \문자
\’ : ‘문자
JavaScript
\” : “문자
12
자료형(계속)
 리터럴
 기본형 리터럴
직접 값으로 표현되는 것
숫자, 논리형, 문자열 10 “10”
 배열 리터럴
[ ]안에 배열 원소 기술
Coffees = [“french roast”, “columbian”, “kona”]
 객체 리터럴
{ }안에 속성이름과 값
Car ={mycar: “saturn”, getcar: cartype(“honda”)}
JavaScript
13
변수 선언
 전역변수(global)
 함수 밖에서 선언된 변수
 Var키워드 선택적 사용
 지역변수(local)
 함수 안에서 선언된 변수
 Var키워드 사용
 (var 키워드 사용 하지 않으면 전역변수로 취급)
JavaScript
14
연산자
 산술연산자 : +,-,*,/,%
 비교연산자 : >, <, >=, <=, ==, !=
 논리연산자 : &&, ||, !
 비트연산자 : ~, &, |, ^, <<, >>
 단항연산자 : ++, - 삼항조건연산자 : (조건) ? 값1:값2
 그외 연산자 : new, delete, 쉼표연산자,typeof
 우선순위 :
 괄호→산술→비트연산자→비교연산자→논리연산자
JavaScript
15
제어문
 제어문은 명령문을 조건에 따라 프로그램의 실행
절차를 제어하는 제어구조.
 즉, 제어문은 명령문을 통해서 프로그램의 흐름을
수정하여 명령문을 반복적으로 실행시키거나 어떤
조건에 따라서 명령문을 실행시키는 명령문.
 제어문은 조건문, 반복문 등과 그밖에 break문,
continue문, label문, 함수 반환문 등으로 구성.
JavaScript
16
제어문
 분기 제어문
if … else문, switch 문
 반복 제어문
while 문
do … while 문
for 문
JavaScript
17
제어문
if문
조건문
switch문
제어문
반복문
for문
while문
JavaScript
18
제어문 – if
 조건문은 조건에 따라 제어의 흐름을 이동하는 명령문.
 조건문은 조건식을 이용하여 조건을 실행하며 조건식이
참인 경우에는 참인 문장을 거짓인 경우에는 거짓인
문장을 실행.
 대부분의 자바스크립트 문장들은 하나 이상의
조건문으로 구성
 형식
 If (조건식) 문장들
 단순 if문은 삼항조건연산자와 동일
 삼항조건연산자 : (조건) ? 값1:값2
JavaScript
19
제어문 – if (계속)
단순 if문
if ( 조건 )
{
실행할 문장;
}
if – else 문
if ( 조건 )
{
실행할 문장 1;
}
else
{
실행할 문장 2;
}
JavaScript
다중 if문
if ( 조건 1 )
{
실행할 문장 1;
}
else if ( 조건 2 )
{
실행할 문장 2;
}
...
else
{
실행할 문장 n;
}
20
제어문 - switch
 If : 단일조건처리에 주로 사용
 Switch : 다중조건문으로 한번에 여러개의조건식을
처리할수 있어서 조건의 수가 많을때 사용 조건이 “같다”
일때만 처리
 부등호 사용불가-범위사용불가
 break 문 : 한가지 처리만 수행후 switch 빠져나감
생략시 앞줄의 case와 ‘or’로 연결되어 break를
만날때까지 계속 문장 수행
default 문은 위의 case문에 해당하는 값이 없으면
문장n을 처리 (생략가능)
JavaScript
21
제어문 – switch(계속)
switch ( 표현식 ) {
case 값1 :
실행할 문장1
break
case 값2 :
실행할 문장2
break
…………..
default :
실행할 문장n;
}
JavaScript
22
제어문–break와 continue
 break : 반복문을 강제로 빠져 나오는 명령
 continue : 반복문 내에서 이 후의 명령은 수행하지
않고 다시 조건을 판단하는 곳으로 이동하는 명령
JavaScript
23
반복문 - for
 컴퓨터의 뛰어난 처리 능력 중의 하나는 반복 계산
능력임.
 반복문은 조건식의 문장을 판정하여 조건식이 참이면
문장을 반복 실행하는 제어구조.
 반복문은 while 반복문, do~while 반복문, for
반복문으로 구성.
for ( 초기값 ; 조건 ; 증감식 ) {
반복해서 실행할 문장들
……….
}
JavaScript
24
제어문 - while
while ( 조건 ) {
조건이 참일 경우 수행할 작업
}
JavaScript
25
함수
 여러명령어를 하나의 그룹으로 묶고 여기에 이름을
붙여서 하나의 실행 흐름으로 처리하는 것
 형식
function 함수이름 (매개변수)
{
실행될 스크립트 코드 1
실행될 스크립트 코드 2 …
return 변수
-> 리턴이 있는 함수
}
JavaScript
26
함수의 형식
 함수 전달문은 매개 변수에 값을 전달할 때 사용.
 매개변수 값을 전달할 때 함수 값 전달은
dFunction(“가”) 함수에서처럼 괄호( ) 안의 함수에
전달할 값을 넣어 준다.
 매개변수의 수
 선언된 함수의 매개변수 수와 호출할 때의 매개변수 수가
달라도 함수호출이 가능하다
 매개변수가 부족해서 값을 전달하지 않는 경우에는
‘undefined’로 값을 설정
 매개변수를 call-by-value 방법에 의해 전달
JavaScript
27
함수의 형식
매개변수가 없
는 경우
function test1() {
alert("test1
")
}
매개변수가
있는 경우
function
test2(para1,para2) {
alert(para1+para2)
}
JavaScript
리턴값이
있는 경우
function test3(question)
{
ans=confirm(question)
return ans
}
28
함수의 호출
 매개변수가 없는 경우 : test1()
 매개변수가 있는 경우
: test2(100, 200)
 리턴값이 있는 경우 :
K = test3(“요청”)
JavaScript
29
기본 입출력 함수
 Prompt 함수 : 문자열을 입력받기 위한 함수
 alert 함수 : 메시지 출력
 confirm 함수 : 확인, 취소를 선택
 prompt 와 confirm 함수는 변수필요
 eval : 문자열을 숫자로 변환한 후 계산해주는 함수
 parseInt : 문자열을 정수로 변환해 주는 함수
(2,8,10,16진수 변환, 변환을 못하면 0값반환)
JavaScript
30