Download presentation
Presentation is loading. Please wait.
1
Chapter08 JavaScript 시작하기
HTML & JavaScript
2
Contents 1. 자바스크립트란 무엇일까 2. 자바스크립트 기본 구조 3. 자바스크립트 기초 Chapter08
JavaScript 시작하기
3
형식 : <BODY 속성=값 속성=값......> 내용 </BODY>
Chapter05 형식 : <BODY 속성=값 속성=값......> 내용 </BODY> 속성 : TOPMARGIN, LEFTMARGIN, BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK 예제 : <BODY BGCOLOR="yellow" TEXT="blue" LINK="red" VLINK="green" ALINK="gray"> BODY 태그의 속성 </BODY> HTML 홈페이지 만들기
4
자바스크립트 정의 자바스크립트(JavaScript) 사용자와 페이지 간의 상호작용이 가능하게 하기 위해 사용
Chapter08 자바스크립트(JavaScript) 사용자와 페이지 간의 상호작용이 가능하게 하기 위해 사용 Sun Microsystem사와 Netscape사가 공동으로 제작하여 보급한 언어 자바스크립트를 사용함으로써 사용자에게 동적인 웹 페이지를 제공해 줄 수 있음 기본적으로 HTML 내에 직접 삽입하여 사용 특별한 자료형이 필요 없이 var로 변수를 선언하면 자동으로 입력한 값에 따라 타입이 변형됨 JavaScript 시작하기
5
프로그램 8-1 Chapter08 [그림 8-1] JavaScriptActive의 실행결과 JavaScript 시작하기
![프로그램 8-1 Chapter08 [그림 8-1] JavaScriptActive의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/5/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-1+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-1%5D+JavaScriptActive%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-1 Chapter08 [그림 8-1] JavaScriptActive의 실행결과 JavaScript 시작하기")
6
자바와 자바스크립트의 차이점 Chapter08 JavaScript 시작하기
7
자바스크립트 특징 자바스크립트 특징 스크립트언어 객체기반 언어 HTML내에 삽입하여 사용 개발 및 결과 확인이 쉬움
Chapter08 자바스크립트 특징 스크립트언어 객체기반 언어 HTML내에 삽입하여 사용 개발 및 결과 확인이 쉬움 빠른 개발 가능 배우기 쉬움 환경에 독립적 JavaScript 시작하기
8
자바스크립트 단점 자바스크립트 단점 보안에 취약함
Chapter08 자바스크립트 단점 보안에 취약함 HTML안에 삽입하여 사용 하므로 웹 브라우저 메뉴의 소스메뉴로 쉽게 코드 내용을 확인할 수 있음 제공하는 메소드의 부족 브라우저의 기능과 밀접한 관계가 있기 때문에 자바스크립트 자체에서 제공하는 메소드는 브라우저에 제한적 JavaScript 시작하기
9
자바스크립트 기본 구조 자바스크립트 기본 구조 <SCRIPT> 태그와 </SCRIPT> 태그 사이에 정의
Chapter08 자바스크립트 기본 구조 <SCRIPT> 태그와 </SCRIPT> 태그 사이에 정의 <SCRIPT> 태그의 LANGUAGE 속성의 값으로 ‘JavaScript’를 입력 형식 : <SCRIPT LANGUAGE="JavaScript"> <!-- 자바스크립트 코드 //--> </SCRIPT> 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("자바스크립트 기본구조"); //--> </SCRIPT> JavaScript 시작하기
10
프로그램 8-2 Chapter08 [그림 8-2] JavaScriptStart의 실행결과 JavaScript 시작하기
![프로그램 8-2 Chapter08 [그림 8-2] JavaScriptStart의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/10/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-2+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-2%5D+JavaScriptStart%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-2 Chapter08 [그림 8-2] JavaScriptStart의 실행결과 JavaScript 시작하기")
11
자바스크립트 외부파일로 사용하기 자바스크립트 외부파일로 사용하기
Chapter08 자바스크립트 외부파일로 사용하기 자바스크립트를 외부파일로 사용할 경우에는 확장자를 *.js로 지정해야 함 외부파일을 HTML 파일 안에서 호출할 경우에는 <SCRIPT> 태그의 SRC 속성의 값으로 파일의 이름을 입력 JavaScript 시작하기
12
프로그램 8-3, 프로그램 8-4 Chapter08 [그림 8-3] Linked의 실행결과 JavaScript 시작하기
![프로그램 8-3, 프로그램 8-4 Chapter08 [그림 8-3] Linked의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/12/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-3%2C+%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-4+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-3%5D+Linked%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-3, 프로그램 8-4 Chapter08 [그림 8-3] Linked의 실행결과 JavaScript 시작하기")
13
자바스크립트 변수 변수 식별자 어떤 값을 저장하기 위한 공간
Chapter08 변수 어떤 값을 저장하기 위한 공간 식별자 변수나 함수의 이름이 될 수 있는 프로그래머가 선언하는 단어를 의미 식별자 규칙 영문자와 숫자, ‘_’ 로 이루어져 있다. 특수 문자나 메타 문자, 한글은 사용할 수 없다. 첫 자로는 영문자만 사용할 수 있다. 대소문자의 구별이 있다. 예약어(자바스크립트에서 미리 정의해 놓은 용어)는 식별자로 사용할 수 없다. JavaScript 시작하기
14
자바스크립트 예약어 Chapter08 JavaScript 시작하기
15
사용 가능한 식별자와 사용 불가능한 식별자 Chapter08 JavaScript 시작하기
16
자바스크립트 형변환 자바스크립트 형변환 자료형을 특별히 지정하지 않고 실행 시에 자동으로 값에 따라 형 변환이 되어 사용
Chapter08 자바스크립트 형변환 자료형을 특별히 지정하지 않고 실행 시에 자동으로 값에 따라 형 변환이 되어 사용 형식 : var 식별자 or var 식별자1, 식별자 예제 : var strName; var strName, intYear; JavaScript 시작하기
17
프로그램 8-5 Chapter08 [그림 8-4] Var의 실행결과 JavaScript 시작하기
![프로그램 8-5 Chapter08 [그림 8-4] Var의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/17/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-5+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-4%5D+Var%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-5 Chapter08 [그림 8-4] Var의 실행결과 JavaScript 시작하기")
18
자바스크립트 자료형 자바스크립트 자료형 정수 부동소수점
Chapter08 자바스크립트 자료형 자료형의 선언이 필요 없이 var 자료형을 사용하고 저장되는 값에 따라 자동으로 형변환 됨 정수 제일 처음자리에 있는 숫자가 0일 경우 8진수로 인식하고 0x로 시작할 경우에는 16진수로 인식 부동소수점 12.34 또는 와 같이 소수가 포함되어 있는 10진수 JavaScript 시작하기
19
자바스크립트 자료형 Boolean Null 문자열 true와 false 두 가지 값을 가지는 자료형
Chapter08 Boolean true와 false 두 가지 값을 가지는 자료형 Null 아무런 값도 없다는 것을 의미 문자열 “ “나 ‘ ‘ 사이에 들어가는 문자를 의미 JavaScript 시작하기
20
특수 문자의 종류 JavaScript 시작하기
21
프로그램 8-6 Chapter08 [그림 8-5] Casting의 실행결과 JavaScript 시작하기
![프로그램 8-6 Chapter08 [그림 8-5] Casting의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/21/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-6+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-5%5D+Casting%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-6 Chapter08 [그림 8-5] Casting의 실행결과 JavaScript 시작하기")
22
자바스크립트 연산자 자바스크립트 연산자 수학적, 논리적 연산을 수행하는 기호를 연산자라 함
Chapter08 자바스크립트 연산자 수학적, 논리적 연산을 수행하는 기호를 연산자라 함 산술 연산자, 비교 연산자, 논리 연산자, 연결 연산자 등이 있음 JavaScript 시작하기
23
산술 연산자 산술 연산자 산술 계산을 위한 연산자
Chapter08 산술 연산자 산술 계산을 위한 연산자 흔히 많이 사용하는 연산으로 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 등의 연산을 이야기 함 JavaScript 시작하기
24
프로그램 8-7 Chapter08 [그림 8-6] Num의 실행결과 JavaScript 시작하기
![프로그램 8-7 Chapter08 [그림 8-6] Num의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/24/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-7+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-6%5D+Num%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-7 Chapter08 [그림 8-6] Num의 실행결과 JavaScript 시작하기")
25
대입 연산자 대입 연산자 연산 후 대입 연산자 ‘=’를 말함 우변의 내용을 좌변의 변수에 대입할 경우 사용하는 연산자
Chapter08 대입 연산자 ‘=’를 말함 우변의 내용을 좌변의 변수에 대입할 경우 사용하는 연산자 연산 후 대입 연산자 좌변 변수의 원래 값에 일반적인 산술 연산 값을 저장할 경우 사용하는 연산자 JavaScript 시작하기
26
증감 연산자 Chapter08 증감 연산자 증가, 감소 연산자는 변수의 앞이나 뒤에 붙여 사용되며 변수의 값을 1씩 증가시키거나 감소시킬 때 사용 JavaScript 시작하기
27
비교 연산자 비교 연산자 두 변수 사이의 관계를 비교하기 위하여 사용되는 연산자
Chapter08 비교 연산자 두 변수 사이의 관계를 비교하기 위하여 사용되는 연산자 연산 결과의 참과 거짓에 따라 Boolean 값인 true, false를 반환 JavaScript 시작하기
28
프로그램 8-8 Chapter08 [그림 8-7] Comparison의 실행결과 JavaScript 시작하기
![프로그램 8-8 Chapter08 [그림 8-7] Comparison의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/28/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-8+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-7%5D+Comparison%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-8 Chapter08 [그림 8-7] Comparison의 실행결과 JavaScript 시작하기")
29
논리 연산자 논리 연산자 조건의 참과 거짓을 판단하기 위한 연산자 두 값을 비교하여 해당 연산자에 따라 참과 거짓을 판별
Chapter08 논리 연산자 조건의 참과 거짓을 판단하기 위한 연산자 두 값을 비교하여 해당 연산자에 따라 참과 거짓을 판별 JavaScript 시작하기
30
비트 연산자 비트 연산자 각각의 비트 별로 연산을 하는 것으로 2진수 연산에 사용 참과 거짓에 따라 1, 0 값을 반환
Chapter08 비트 연산자 각각의 비트 별로 연산을 하는 것으로 2진수 연산에 사용 참과 거짓에 따라 1, 0 값을 반환 JavaScript 시작하기
31
프로그램 8-9 Chapter08 [그림 8-8] Logic의 실행결과 JavaScript 시작하기
![프로그램 8-9 Chapter08 [그림 8-8] Logic의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16680225/96/images/31/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+8-9+Chapter08+%5B%EA%B7%B8%EB%A6%BC+8-8%5D+Logic%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+JavaScript+%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0.jpg "프로그램 8-9 Chapter08 [그림 8-8] Logic의 실행결과 JavaScript 시작하기")
32
이항 연산자 이항 연산자 어떠한 조건을 판단하여 두 개의 값 중 하나의 값을 선택하는 것을 말함
Chapter08 이항 연산자 어떠한 조건을 판단하여 두 개의 값 중 하나의 값을 선택하는 것을 말함 만약 조건이 참일 경우 앞의 값이 선택되고 조건이 거짓일 경우에는 뒤의 값이 선택 JavaScript 시작하기
33
연결 연산자 Chapter08 연결 연산자 문자열을 합칠 때 필요한 연산자로 ‘+’를 사용 JavaScript 시작하기
34
연산자 우선순위 Chapter08 JavaScript 시작하기
Similar presentations
