인터넷응용프로그래밍 JavaScript(Intro).

Presentation on theme: "인터넷응용프로그래밍 JavaScript(Intro)."— Presentation transcript:

1 인터넷응용프로그래밍 JavaScript(Intro)

2 Ex1) alert & prompt

3 Ex2) Counter-Controlled Repetition
입력 창 기본 문자

4 Ex3) Essentials of Counter-Controlled Repetition

5 Ex4) Function Definitions
제곱 함수

6 Ex5) Displaying Random Images
초기 이미지 1 ~ 6 사이의 값을 랜덤하게 발생 rollDice, setImage : 실행 시에 이미지를 변환하는 기능 addEventListener 또다른 event useCapture : 다양한 브라우저에서 동일한 인터페이스 유지 하기 위해

7 Ex6) Using Arrays JS JS 배열의 특징 var comp = new Array();
comp[0] = “Apple”; // 문자열 comp[1] = new Date(); // 객체 comp[2] = 3.14; // 정수

8 Ex7) Initializing arrays
JS

9 Ex8) array with for html JS 변수에 객체의 속성이 하나씩 대입

10 Ex9-1) Array Counter html css

11 Ex9-2) Array Counter 버튼 이벤트 처리 주사위 이미지의 id를 통해 반환 값 배열에 저장
주사위 숫자당 빈도 카운터 계산 (1 ~ 6) 함수 호출 랜덤 숫자를 할당하여 그에 맞는 이미지를 불러내는 함수 호출

12 Ex9-3) Array Counter

13 Ex10) Random Image Generator Using Array
랜덤으로 생성된 이미지의 이름을 배열 index를 통해 접근하여 저장된 문자열의 이름으로 받아옴 클릭이벤트 설정

14 Ex11) Searching Methods 앞에서 차례로 검색 뒤에서 차례로 검색 12번째 인덱스부터 마지막까지 차례로 검색
12번째 인덱스부터 처음까지 차례로 검색

15 Ex12) Splitting Strings and Obtaining Substrings
“ ” 를 구분 자로 토큰을 나눔 토큰 당 “</p><p class = 'indent'>”로 구분을 함 0번째 문자열부터 10번째 문자열까지 출력

16 Ex13) Date Object

17 DOM(Document Object Model)
인터넷응용프로그래밍 DOM(Document Object Model)

18 Ex1) DOM tree DOM으로 우리는 무엇을 할까?? 자바스크립트를 사용하여 DOM트리를 순회하면서 페이지 안 요소의 내용이나 속성, CSS 스타일을 우리 마음대로 동적으로 변경

19 Ex2) DOM & BOM

20 Ex3) id, name으로 HTML 요소 찾기

21 Ex4) 태그 이름으로 HTML 요소 찾기 먼저 문서 내의 첫 번째 <ul> 요소를 찾음
list 안에서 첫 번째 <ul>안의 모든 <li>를 찾아 배열로 반환 각 li의 첫 번째 자식 노드의 data 필드를 출력

22 Ex5) 요소 스타일 변경하기

23 Ex6) DOM 노드 삭제와 추가

24 Ex7) DOM 이벤트