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

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

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

2 Ex1-1) Using Arrays html css

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

4 Ex2) Initializing arrays
JS

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

6 Ex4-1) Array Counter html css

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

8 Ex4-3) Array Counter

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

10 Ex6-1) Passing Arrays to Functions

11 Ex6-2) Passing Arrays to Functions
call by reference call by value

12 Ex7) Sorting an Array 정렬 함수

13 Ex8) Searching Arrays with Array Method indexOf
배열의 인덱스에 2를 곱한 값을 저장 원하는 문자열이나 숫자로 검색 해당 검색 문자열이 속한 인덱스 리턴 만약 존재하지 않으면 -1리턴 배열의 인덱스에 2를 곱한 값을 저장

14 Ex9) Multidimensional Arrays
html css JS

15 Ex10) 연관 배열 문자열로 배열의 인덱스와 같이 접근하므로 id를 인덱스 처럼 바로 사용이 가능한 이점이 있음

16 Ex11) Character Processing Methods
해당 인덱스의 문자 반환 해당 인덱스의 문자의 아스키 숫자 반환 캐릭터 숫자를 문자로 변환 문자열을 소문자 / 대문자로 변환

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

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

19 Ex14) Date Object

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

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

22 Ex2) DOM & BOM

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

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

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

26 Ex6) DOM 노드 삭제와 추가

27 Ex7) DOM 이벤트

28 Homework) 계산기 만들기 DOM 요소를 이용하여 value 데이터의 값을 갱신(계산기 화면)
input은 0 ~ 9 번까지의 버튼, */-+ 사칙연산, 초기화 버튼, 계산 버튼으로 구성 버튼은 DOM 이벤트를 통해서 처리 계산 기능은 자바스크립트 기본 함수에서 지원하니 찾아서 써봄 구현을 마치고 계산기의 DOM TREE를 그려서 낼 것 과제 제출물 : 계산기 제작 코드 파일(*.html), DOM TREE 문서(*.hwp or 이미지 파일)