Download presentation
Presentation is loading. Please wait.
1
Chapter08 JavaScript 시작하기
HTML & JavaScript
2
Contents 1. 자바스크립트란 무엇일까 2. 자바스크립트 기본 구조 3. 자바스크립트 기초 Chapter08
JavaScript 시작하기
3
자바스크립트 정의 자바스크립트(JavaScript)
Chapter08 자바스크립트(JavaScript) Vbscript, Jscript 등과 같은 사용자와 페이지 간의 상호작용이 가능하게 하기 위해 사용하는 스크립트 언어 Sun Microsystem사와 Netscape사가 공동으로 제작하여 보급한 언어 사용자에게 역동적인 웹 페이지를 제공해 줄 수 있음 기본적으로 HTML 내에 직접 삽입하여 사용 특별한 자료형이 필요 없이 var로 변수를 선언하면 자동으로 입력한 값에 따라 타입이 변형됨 JavaScript 시작하기
4
자바스크립트 – 자바스크립트 삽입과 실행(1)
내장형 행 입력형 함수형 링크형 <script language=javascript src="js 파일의 전체 경로"></script>
5
자바스크립트 – 자바스크립트 삽입과 실행(2)
내장형 <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("자바스크립트 기본구조"); //--> </SCRIPT> 행 입력형 <태그 이벤트핸들러="자바스크립트 소스"> <a href=# onclick=alert("안녕")> 클릭하세요 </a> <a href=javascript:alert("안녕")> 클릭하세요 </a>
6
자바스크립트 – 자바스크립트 삽입과 실행(3)
함수형 보편적으로 head 태그 내에 쓴다 <script language=javascript> function 함수명( ) { ~~자바스크립트 소스~~ } </script> 함수 호출시 <태그명 이벤트핸들러="함수명()">
7
Chapter08 <html> <head> <script language=javascript> function hello(){ alert("안녕") } </script> </head> <body> <input type=button value=클릭하세요 onclick=hello()> </body> </html> JavaScript 시작하기
8
Window parent Frames self, top location history document forms links
자바스크립트 – 객체의 계층 구조 Window parent Frames self, top location history document Elements: Text fields textarea Checkbox Password Radio Select Button Submit reset forms links anchors
9
프로그램 8-2 Chapter08 [그림 8-2] JavaScriptStart의 실행결과 JavaScript 시작하기
![프로그램 8-2 Chapter08 [그림 8-2] JavaScriptStart의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16732841/97/images/9/%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 시작하기")
10
자바스크립트 – document 객체 예) 웹 문서의 색상 설정과 관련된 속성 웹 문서와 관련된 정보를 다루는 속성
fgColor bgColor,alinkColor,linkColor ,vlinkColor , 웹 문서와 관련된 정보를 다루는 속성 lastModified,location,referrer,title 웹 문서에 포함된 내용과 관련된 속성 anchors,cookie,forms,links document 객체의 메소드 open(),close(),clear(),write(),writeln() 객체명.속성=”값” window.status=”GO!” 객체명.메소드 window.close( )
11
자바스크립트 변수 변수 식별자 어떤 값을 저장하기 위한 공간
Chapter08 변수 어떤 값을 저장하기 위한 공간 식별자 변수나 함수의 이름이 될 수 있는 프로그래머가 선언하는 단어를 의미 식별자 규칙 영문자와 숫자, ‘_’ 로 이루어져 있다. 특수 문자나 메타 문자, 한글은 사용할 수 없다. 첫 자로는 영문자만 사용할 수 있다. 대소문자의 구별이 있다. 예약어(자바스크립트에서 미리 정의해 놓은 용어)는 식별자로 사용할 수 없다. JavaScript 시작하기
12
사용 가능한 식별자와 사용 불가능한 식별자 Chapter08 JavaScript 시작하기
13
자바스크립트 예약어 Chapter08 JavaScript 시작하기
14
자바스크립트 형변환 자바스크립트 형변환 자료형을 특별히 지정하지 않고 실행 시에 자동으로 값에 따라 형 변환이 되어 사용
Chapter08 자바스크립트 형변환 자료형을 특별히 지정하지 않고 실행 시에 자동으로 값에 따라 형 변환이 되어 사용 형식 : var 식별자 or var 식별자1, 식별자 예제 : var strName; var strName, intYear; JavaScript 시작하기
15
프로그램 8-5 Chapter08 [그림 8-4] Var의 실행결과 JavaScript 시작하기
![프로그램 8-5 Chapter08 [그림 8-4] Var의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16732841/97/images/15/%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 시작하기")
16
자바스크립트 자료형 Boolean Null 문자열 true와 false 두 가지 값을 가지는 자료형
Chapter08 Boolean true와 false 두 가지 값을 가지는 자료형 Null 아무런 값도 없다는 것을 의미 문자열 “ “나 ‘ ‘ 사이에 들어가는 문자를 의미 JavaScript 시작하기
17
프로그램 8-6 Chapter08 [그림 8-5] Casting의 실행결과 JavaScript 시작하기
![프로그램 8-6 Chapter08 [그림 8-5] Casting의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16732841/97/images/17/%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 시작하기")
18
자바스크립트 연산자 자바스크립트 연산자 수학적, 논리적 연산을 수행하는 기호를 연산자라 함
Chapter08 자바스크립트 연산자 수학적, 논리적 연산을 수행하는 기호를 연산자라 함 산술 연산자, 비교 연산자, 논리 연산자, 연결 연산자 등이 있음 JavaScript 시작하기
19
산술 연산자 산술 연산자 산술 계산을 위한 연산자
Chapter08 산술 연산자 산술 계산을 위한 연산자 흔히 많이 사용하는 연산으로 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 등의 연산을 이야기 함 JavaScript 시작하기
20
프로그램 8-7 Chapter08 [그림 8-6] Num의 실행결과 JavaScript 시작하기
![프로그램 8-7 Chapter08 [그림 8-6] Num의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16732841/97/images/20/%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 시작하기")
21
대입 연산자 대입 연산자 연산 후 대입 연산자 ‘=’를 말함 우변의 내용을 좌변의 변수에 대입할 경우 사용하는 연산자
Chapter08 대입 연산자 ‘=’를 말함 우변의 내용을 좌변의 변수에 대입할 경우 사용하는 연산자 연산 후 대입 연산자 좌변 변수의 원래 값에 일반적인 산술 연산 값을 저장할 경우 사용하는 연산자 JavaScript 시작하기
22
증감 연산자 Chapter08 증감 연산자 증가, 감소 연산자는 변수의 앞이나 뒤에 붙여 사용되며 변수의 값을 1씩 증가시키거나 감소시킬 때 사용 JavaScript 시작하기
23
비교 연산자 비교 연산자 두 변수 사이의 관계를 비교하기 위하여 사용되는 연산자
Chapter08 비교 연산자 두 변수 사이의 관계를 비교하기 위하여 사용되는 연산자 연산 결과의 참과 거짓에 따라 Boolean 값인 true, false를 반환 JavaScript 시작하기
24
프로그램 8-8 Chapter08 [그림 8-7] Comparison의 실행결과 JavaScript 시작하기
![프로그램 8-8 Chapter08 [그림 8-7] Comparison의 실행결과 JavaScript 시작하기](http://slidesplayer.org/slide/16732841/97/images/24/%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 시작하기")
25
논리 연산자 논리 연산자 조건의 참과 거짓을 판단하기 위한 연산자 두 값을 비교하여 해당 연산자에 따라 참과 거짓을 판별
Chapter08 논리 연산자 조건의 참과 거짓을 판단하기 위한 연산자 두 값을 비교하여 해당 연산자에 따라 참과 거짓을 판별 JavaScript 시작하기
Similar presentations
