'DOM스크립트'에 해당되는 글 2건
- 2008/03/14 DOM 스크립트 - 스크립트 문법
- 2008/03/10 DOM 스크립트 - 개념 및 역사
DOM 스크립트 - 스크립트 문법
웹표준 2008/03/14 10:06
- 자바스크립트는 인터프리터언어 이다.
- 명령문 문법 (아래 모두 가능하고 3번이 정확한 문법)
- 첫번째 명령
두번째 명령 - 첫번째 명령; 두번째 명령;
- 첫번째 명령;
두번째 명령;
- 첫번째 명령
- 주석 (한줄은 1, 여러줄은 3 권장)
- //주석내용
- //주석내용 첫줄
//주석내용 둘째줄 - /* 주석내용 첫줄
주석내용 둘째줄 */ - <!-- 주석내용 첫줄 -> (단 여러줄처리 되지않음 //와 동일 -> 는 안해도 됨.
- 상황에 따라서 변하는 값.
- 나이를 예로 들면 올해는 32살 내년은 33살.. 등으로 변함.
- 대소문자 구분함.
- 선언방법
- var mood;
var age; - var mood, age;
- var mood = "행복";
var age = 33; - var mood = "행복", age = 33;
- var mood;
- 자바스크립트는 선언된 변수의 데이터 형을 언제든 변경 할 수 있는 약형(weakly typed) 언어이다. <-> 강형 (strongly typed)
- 문자열
- 선언시 작은따옴표(') 혹은 큰따옴표 (") 사용
- 문자열 내용중 선언에 사용된 따옴표가 있는경우 해당 따옴표 앞에 \(이스케이프문자)를 사용 (ex var mood = 'don't ask'; ---> var mod = 'don\'t ask;')
- 선언
- var mood = "hello world!!!";
- var mood = 'hello world!!!';
- var mood = "about 5'10\" tall";
- 숫자
- 자바스크립트에서는 숫자종류에 제약이 없음 (소수를 포함 어떤 숫자도 사용가능) 실수형(floating-point numbers) 이라고 부름
- 선언
- var age = 33;
- var age = 33.25;
- var age = -20.33;
- 불린 (boolean)
- 참 / 거짓을 표현하는 값
- true / false 두가지 값이 있음
- var married = "true"; 는 문자열 true일 뿐!!!
- 선언
- var married = true;
- var married = false;
- 배열
- 변수가 여러개의 값을 지정하게 할때 배열(array) 사용
- 하나의 변수에 여러 개의 값을 순서에 따라 모아 놓은 것을 말함.
- 배열내의 각 값들은 요소라고 말함
- 비틀즈 그룹에서 비틀즈 밴드에 속한 네 명을 한번에 말하고 싶을 때 변수를 "비틀즈" 라 부르는 것과 동일
- Array라는 지시자로 배열을 선언
- var beatles = Array(4);
- 길이를 미리 알 수 없는 경우는 그냥 선언해도 무방함
- var beatles = Array();
- var beatles = Array();
- 배열에 요소를 추가할때는 값뿐만 아니라 어느 순서에 위치할지도 알려줘야함. 이것을 인덱스라고 부름. 첫번째 인덱스는 0부터!
- 선언 (배열 요소는 문자 숫자 불린 섞어서도 가능.)
- var beatles = Array(4);
beatles[0] = "존 레논";
beatles[1] = "폴 매카트니";
beatles[2] = "조지 해리슨";
beatles[3] = "링고 스타"; - var beatles = Array("존 레논","폴 매카트니", "조지 해리슨","링고 스타");
- var beatles = ["존 레논","폴 매카트니", "조지 해리슨","링고 스타"];
- var lennon = Array("존 레논",1940,false);
- var beatles = Array(4);
- 결합형 배열 (associative array)
- 배열의 인덱스가 꼭 숫자일 필요없음
- 선언
- var lennon = Array();
lennon["name"] = "존 레논";
lennon["year"] = 1940;
lennon["living"] = false;
- var lennon = Array();
- 배열의 인덱스가 꼭 숫자일 필요없음
- + , - , * , / (더하기, 빼기, 곱하기, 나누기)
- ++연산자
- count++; ===> count = count+1을 의미
- count++; ===> count = count+1을 의미
- + 연산자의 경우 문자열에서는 문자를 합침 & 문자 + 숫자의 경우에는 숫자는 자동으로 문자열로 변환.
- "안녕" + "하세요" 의 결과는 "안녕하세요"
- "10" + 20 의 결과는 "1020"
- "안녕" + "하세요" 의 결과는 "안녕하세요"
- += 연산자는 문자열 접합 및 값할당.
- var str = ""안녕";
str += "하세요.";
현재 str변수는 "안녕하세요" 의 값을 가짐.
- var str = ""안녕";
- if (조건) {
명령문1;
}else{
명령문2;}
- 조건이 참인경우에 {}의 안의 명령문1 실행 거짓인 경우는 else절의 명령문2 수행. 명령문이 한줄인 경우에는 {}는 없어도 됨.
- 비교연산자
- >, <, >=, <= (크다, 작다, 크거나 같다, 작거나 같다)
- 1 > 2 : 거짓 2 >= 2 : 참
- 1 > 2 : 거짓 2 >= 2 : 참
- >, <, >=, <= (크다, 작다, 크거나 같다, 작거나 같다)
- 논리연산자
- 연산조건을 합치는데 사용
- &&, || (and조건, or조건)
- num > 5 && num <10 num이 5보다 크고 10보다 작으면!! (둘다 참인경우만 참)
- num > 5 || num <10 num이 5보다 크거나 10보다 작으면!! (둘중하나만 참인경우 참)
- num > 5 && num <10 num이 5보다 크고 10보다 작으면!! (둘다 참인경우만 참)
- 연산조건을 합치는데 사용
- 부정연산자
- !
- 하나의 조건에만 동작 조건식의 불린 값의 반대 값을 반환 (조건식이 참이면 부정연산자는 거짓으로 바꿔줌)
- !(a==0) a가 0이 아니면!!
- !
DOM 스크립트 - 개념 및 역사
웹표준 2008/03/10 09:51
얼마전에 다이내믹한 웹 표준 사이트를 위한 DOM 스크립트 라는 책을 읽었습니다.
읽었던 내용을 다시한번 되짚어보면서 글로 정리해보려 합니닷~!
몇일이나 갈지는 보장못합니다만.. ㅜㅜ 헛헛..
읽었던 내용을 다시한번 되짚어보면서 글로 정리해보려 합니닷~!
몇일이나 갈지는 보장못합니다만.. ㅜㅜ 헛헛..
- DOM이란 (Document Object Model) 말그대로 문서 - 객체 - 모델 문서내에 있는 내용을 뽑아내서
개념화하는 방법. DOM Level 0
- 과거 넷스케이프 4.0 익스플로서 4.0이 동시에 출시하면서 기존보다 확장된 DOM과
스크립트 사용기능을 추가하면서 DHTML이 유행. - DHTML Dynamic HTML, HTML,CSS, JavaScript의 결합 페이지를 동적으로 만들 수 있으나
브라우져별로 문법이 다름 ㅜㅜ (같은 동작을 구현하기위한 서로 다른문법!!! ) - 1998년 10월 DOM Level 1 제정
- W3C가 정의하는 DOM
문서의 외양과 구조,내용을 스크립트와 프로그램 언어가 동적으로 접근해 고칠 수 있는 플랫폼과 개발 언어에 중립적인 인터페이스.
DOM 스크립트는 DOM API를 지원하는 언어, 마크업 문서에서 모두 사용가능.



