2012/02/15 - [Study/Javascript] - 자바스크립트 공부중 - 1
2012/02/17 - [Study/Javascript] - 자바스크립트 공부중 - 2
함수
- 커다란 문제를 여러개의 작은 문제로 분할하여 문제를 해결하기 쉽게!
- 스크립트를 분할해서, 재사용 가능한 코드로 완성하는 메커니즘을 제공
- 중복된 코드를 제거하는데 탁월함
function 함수명( 인수 ) {
// 실행 부분
return 반환값;
}
함수명 - 낙타 표기법으로 이름을 정하는 것을 권장
인수 - 함수로 전달되는 데이터
- 하나 혹은 그 이상의 인수를 넣을 수 있으며 생략할 수도 있다
- 함수 인수가 함수 내부에 있는 지역 변수처럼 행동
- 함수 내부에서 인수값을 변경하는 것은 함수 외부에 아무런 영향을 주지 않는다.
- 하지만 인수로 전달된 것이 객체일 경우는 적용되지 않음
실행 부분 - 함수를 실행하는 부분
반환값 - 함수로부터 데이터를 반환. 이 데이터는 함수를 호출한 코드가 있는 곳으로 반환됨.
- 반환 데이터 없이 간단한 함수를 조기에 종료하는 데도 사용
ex)
function setVolume(size){
alert("볼륨을 " + size + "로 설정합니다.");
}
setVolume ("100%"); // setVolume를 실행해서 "볼륨을 100%로 설정합니다."라는 경고창을 띄움
※ 함수는 실제로.. 그냥 데이터일 뿐이다!
A.
function setVolA(size) {
alert("볼륨을 " + size + "로 설정");
}
B.
var setVolB = function(size) {
alert("볼륨을 " + size + "로 설정");
};
A와 B는 조금 다르게 보이지만 동일한 함수이다.
B 부분에서 이름 없이 몸체만 있는 함수를 함수 리터럴이라고 한다
그렇다면
var newVolume = setVolA;
newVolume("10%");
다음과 같은 경우는 어떻게 될까?
결과는.. setVolA를 실행한것과 동일한 결과를 얻게 될 것이다.
변수 값이 함수 몸체를 참조하는 경우 그 함수는 실제로는 하나의 변수일 뿐이다.
이러한 경우를 함수참조라고 부른다. 말 그대로 두 함수 모두 동일한 코드를 참조하기 때문에 동일한 결과를 갖게 된다.
form event
onfocus, onblur, onchange
onkeypress, onkeyup, onkeydown
this.value
isNaN()
정규표현식 - 따로 설명하도록 하자...
(정규표현식 하나만으로 책이 완~전 두꺼울 만큼 내용이 많은 부분이다. 나중에 천천히 정리하도록 하자)
DOM(Document Object Model, 문서객체모델) 헤집기
HTML 엘리먼트 접근하기
document.getElementById()
- 엘리먼트가 유일한 ID를 가지고 있을 때 접근방법
- 제일 많이 쓰임
ex)
document.getElementById("page1")
document.getElementsByTagName()
- div나 img 같은 특정한 종류의 페이지 엘리먼트를 모두 추출
document.getElementsByClassName()
- 엘리먼트가 가지는 클래스명으로 추출
<img src="pageNav.png">
--
document.getElementById("page2") // page2 div를 추출
document.getElementsByTagName("img") // img 태그만 추출 (Array형태)
document.getElementsByClassName("selected") // 클래스가 selected인 page5, page7, page8 div를 추출 (Array형태)
document.getElementsByTagName("div")[4] // page5 div를 추출
document.getElementsByClassName("closed")["page8"] // page8 div를 추출
※ Id의 경우 's'가 빠져있는 것에 유의
추출한 엘리먼트 가지고 놀기
선택엘리먼트.innerHTML
- 엘리먼트에 저장되어 있는 모든 컨텐츠에 접근, 추출, 수정
선택엘리먼트.childNodes
- 노드 밑에 있는 모든 자식 노드를 포함하고 있는 배열
선택엘리먼트.firstChild
- 하나의 노드 밑에 있는 첫번째 자식 노드
선택엘리먼트.lastChild
- 하나의 노드 밑에 있는 마지막 자식 노드
선택엘리먼트.nodeValue
- 노드에 저장된 값
- 텍스트와 속성 노드(엘리먼트가 아닌)에만 있음
선택엘리먼트.nodeType
- 노드의 타입을 말함
- 숫자로 표현
선택엘리먼트.removeChild()
- 노드로부터 자식 노드를 제거
- 제거된 자식 노드를 전달
선택엘리먼트.createTextNode()
- 텍스트문자열로 새로운 텍스트 노드를 생성
선택엘리먼트.appendChild()
- 노드의 마지막 자식으로 노드를 추가
- 추가된 자식 노드를 전달
선택엘리먼트.className
- 지정된 클래스명을 추출
- 원하는 클래스명으로 수정가능
- 클래스명이 문자형으로 반환되니 여러개의 클래스를 지정해야할 경우 다 적어야함
ex)
선택엘리먼트.style.style속성명
- 선택한 style 속성만 수정
- display, visibility, background 등..
document.createElement("태그명")
- 새로운 엘리먼트를 생성
2012/02/17 - [Study/Javascript] - 자바스크립트 공부중 - 2
함수
- 커다란 문제를 여러개의 작은 문제로 분할하여 문제를 해결하기 쉽게!
- 스크립트를 분할해서, 재사용 가능한 코드로 완성하는 메커니즘을 제공
- 중복된 코드를 제거하는데 탁월함
function 함수명( 인수 ) {
// 실행 부분
return 반환값;
}
함수명 - 낙타 표기법으로 이름을 정하는 것을 권장
인수 - 함수로 전달되는 데이터
- 하나 혹은 그 이상의 인수를 넣을 수 있으며 생략할 수도 있다
- 함수 인수가 함수 내부에 있는 지역 변수처럼 행동
- 함수 내부에서 인수값을 변경하는 것은 함수 외부에 아무런 영향을 주지 않는다.
- 하지만 인수로 전달된 것이 객체일 경우는 적용되지 않음
실행 부분 - 함수를 실행하는 부분
반환값 - 함수로부터 데이터를 반환. 이 데이터는 함수를 호출한 코드가 있는 곳으로 반환됨.
- 반환 데이터 없이 간단한 함수를 조기에 종료하는 데도 사용
ex)
function setVolume(size){
alert("볼륨을 " + size + "로 설정합니다.");
}
setVolume ("100%"); // setVolume를 실행해서 "볼륨을 100%로 설정합니다."라는 경고창을 띄움
※ 함수는 실제로.. 그냥 데이터일 뿐이다!
A.
function setVolA(size) {
alert("볼륨을 " + size + "로 설정");
}
B.
var setVolB = function(size) {
alert("볼륨을 " + size + "로 설정");
};
A와 B는 조금 다르게 보이지만 동일한 함수이다.
B 부분에서 이름 없이 몸체만 있는 함수를 함수 리터럴이라고 한다
그렇다면
var newVolume = setVolA;
newVolume("10%");
다음과 같은 경우는 어떻게 될까?
결과는.. setVolA를 실행한것과 동일한 결과를 얻게 될 것이다.
변수 값이 함수 몸체를 참조하는 경우 그 함수는 실제로는 하나의 변수일 뿐이다.
이러한 경우를 함수참조라고 부른다. 말 그대로 두 함수 모두 동일한 코드를 참조하기 때문에 동일한 결과를 갖게 된다.
form event
onfocus, onblur, onchange
onkeypress, onkeyup, onkeydown
this.value
isNaN()
정규표현식 - 따로 설명하도록 하자...
(정규표현식 하나만으로 책이 완~전 두꺼울 만큼 내용이 많은 부분이다. 나중에 천천히 정리하도록 하자)
DOM(Document Object Model, 문서객체모델) 헤집기
HTML 엘리먼트 접근하기
document.getElementById()
- 엘리먼트가 유일한 ID를 가지고 있을 때 접근방법
- 제일 많이 쓰임
ex)
document.getElementById("page1")
document.getElementsByTagName()
- div나 img 같은 특정한 종류의 페이지 엘리먼트를 모두 추출
document.getElementsByClassName()
- 엘리먼트가 가지는 클래스명으로 추출
<div id="page1">페이지 1</div>
<div id="page2">페이지 2</div>
<div id="page3">페이지 3</div>
<div id="page4">페이지 4</div>
<div id="page5" class="selected">페이지 5</div>
<div id="page6">페이지 6</div>
<div id="page7" class="selected closed">페이지 7</div>
<div id="page8" class="selected closed">페이지 8</div><img src="pageNav.png">
--
document.getElementById("page2") // page2 div를 추출
document.getElementsByTagName("img") // img 태그만 추출 (Array형태)
document.getElementsByClassName("selected") // 클래스가 selected인 page5, page7, page8 div를 추출 (Array형태)
document.getElementsByTagName("div")[4] // page5 div를 추출
document.getElementsByClassName("closed")["page8"] // page8 div를 추출
※ Id의 경우 's'가 빠져있는 것에 유의
추출한 엘리먼트 가지고 놀기
선택엘리먼트.innerHTML
- 엘리먼트에 저장되어 있는 모든 컨텐츠에 접근, 추출, 수정
선택엘리먼트.childNodes
- 노드 밑에 있는 모든 자식 노드를 포함하고 있는 배열
선택엘리먼트.firstChild
- 하나의 노드 밑에 있는 첫번째 자식 노드
선택엘리먼트.lastChild
- 하나의 노드 밑에 있는 마지막 자식 노드
선택엘리먼트.nodeValue
- 노드에 저장된 값
- 텍스트와 속성 노드(엘리먼트가 아닌)에만 있음
선택엘리먼트.nodeType
- 노드의 타입을 말함
- 숫자로 표현
선택엘리먼트.removeChild()
- 노드로부터 자식 노드를 제거
- 제거된 자식 노드를 전달
선택엘리먼트.createTextNode()
- 텍스트문자열로 새로운 텍스트 노드를 생성
선택엘리먼트.appendChild()
- 노드의 마지막 자식으로 노드를 추가
- 추가된 자식 노드를 전달
선택엘리먼트.className
- 지정된 클래스명을 추출
- 원하는 클래스명으로 수정가능
- 클래스명이 문자형으로 반환되니 여러개의 클래스를 지정해야할 경우 다 적어야함
ex)
선택엘리먼트.style.style속성명
- 선택한 style 속성만 수정
- display, visibility, background 등..
document.createElement("태그명")
- 새로운 엘리먼트를 생성
