hacosa js study 2주차
DESCRIPTION
하코사 자바스크립트 스터디 모임 2번째 주TRANSCRIPT
HACOSA JS STUDY#2 JavaScript Syntax#3 DOM
JavaScript Syntax• 함수 (Function)
‒ 어떤 기능을 수행하는 코드의 묶음‒ 호출 전 선언이 되어 있어야 함‒ 기본 함수 문법
→function 키워드로 선언→function 키워드 뒤에 함수명 선언→함수명 뒤에 괄호와 인수를 작성 ( 인수는 0 ~ 원하는 만큼 )→함수의 명령문은 { } 코드 블록 안에 작성
JavaScript Syntax• 인수
‒ 함수 호출 시 처리할 정보를 제공해야 할 때 사용‒ 함수의 선언과 호출에 인자 수는 같아야‒ 인수는 코드 블럭에서 동일한 이름으로 사용
JavaScript Syntax• 인수가 없는 함수의 예
function chkSubmit(){
if(document.getElementById(‘userId’) == ‘’){
alert(‘ 아이디가 입력되지 않았습니다 .’);
return false;
}
}
JavaScript Syntax• 인수가 1 개인 예
function showHide(id){
var obj = document.getElementById(id);
if(obj.style.display == ‘block’)
obj.style.display = ‘none’;
else
obj.style.display = ‘block’;
}
JavaScript Syntax• 인수가 2 개 이상인 함수의 예
function sum(start, end){
var sum = 0;
for(var i = start; i <= end; i++){ sum += i;
}
alert(sum);
}
function showImg(src, width, height){
var imgBox = document.getElementById(‘imgBox’);
imgBox.src = src;
imgBox.width = width;
imgBox.height = height;
}
JavaScript Syntax• 결과 값 반환 (return)
‒ 숫자 , 문자열 , 배열 , 불린 값 등 반환 가능
function average(arr){
var sum = 0, avg = 0;if(isArray(arr) ){
for(i = 0; i < arr.length; i++){
sum += arr[i];
}
avg = sum / (arr.length);
}
return avg;
}
avgMan = average(manScore);
JavaScript Syntax• 변수 유효 영역
‒ 전역변수→ 페이지가 변하지 않는 한 , 스크립트 내 모든 곳에서 참조 가능한 변수
‒ 지역변수→ 선언된 코드 블록 내에서만 사용 가능한 변수
p.65 Script Source 참고
JavaScript Syntax• 객체 (Object)
‒ 사용자 정의 객체→ 사용자가 생성한 객체
ex)var test = new Objecttest.a = 2;test.b = ‘2’;test.c = function(){ alert(test.a + test.b);}
‒ 네이티브 객체→ 자바스크립트에서 미리 만들어진 객체
‒ 호스트 객체→ 자바스크립트 실행 환경에서 만들어진 객체
DOM(Document Object Model)• 노드 (Node)
‒ 요소 노드 (Element Node)→ <body>, <div> 등
‒ 텍스트 노드 (Text Node)→ 요소 노드 안에 포함된 텍스트
• <p> ~~~~ </p> : ~~~~ 부분이 텍스트 노드
‒ 속성 노드 (Attribute Node)→ 요소 노드의 속성
• src, title 등이 속성 노드
P
Title = “a gentle
re-minder”
이 물건 사는 것을 잊지
마세요
요소 노드
속성 노드 텍스트 노드
DOM(Document Object Model)• CSS 와의 관계
‒ 노드 트리 (Node Tree) 에 따라 상속‒ class, id 속성으로 선택자 사용
(* 중요한 내용은 아니므로 패스… )
DOM(Document Object Model)• getElementById
‒ 특정 ID 의 요소 노드에 접근‒ document.getElementById(id) 로 접근함‒ cf. getElementsByName
• getElementsByTagName‒ 특정 태그를 사용하는 요소를 배열로 받음
DOM(Document Object Model)• getAttribute
‒ 요소 노드 객체에 사용 가능‒ 특정 속성 값을 가져올 때 사용
• setAttribute‒ 특정 속성 값을 바꾸거나 , 삽입할 때 사용‒ Ex)
var obj = document.getElementById(‘logo’);
obj.setAttribute(“title”,”brand new”);
END