2. JavaScript Syntax 함수(Function) 어떤 기능을 수행하는 코드의 묶음 호출 전 선언이 되어 있어야 함 기본 함수 문법 function 키워드로 선언 function 키워드 뒤에 함수명 선언 함수명 뒤에 괄호와 인수를 작성(인수는 0 ~ 원하는 만큼) 함수의 명령문은 { } 코드 블록 안에 작성
3. JavaScript Syntax 인수 함수 호출 시 처리할 정보를 제공해야 할 때 사용 함수의 선언과 호출에 인자 수는 같아야 인수는 코드 블럭에서 동일한 이름으로 사용
4. JavaScript Syntax 인수가 없는 함수의 예 function chkSubmit(){ if(document.getElementById(‘userId’) == ‘’){ alert(‘아이디가 입력되지 않았습니다.’); return false; } }
6. 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){ varimgBox = document.getElementById(‘imgBox’); imgBox.src = src; imgBox.width = width; imgBox.height= height; }
7. 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);
8. JavaScript Syntax 변수 유효 영역 전역변수 페이지가 변하지 않는 한, 스크립트 내 모든 곳에서 참조 가능한 변수 지역변수 선언된 코드 블록 내에서만 사용 가능한 변수 p.65 Script Source 참고
9. JavaScript Syntax 객체 (Object) 사용자 정의 객체 사용자가 생성한 객체ex)var test = new Objecttest.a = 2;test.b = ‘2’;test.c = function(){ alert(test.a + test.b); } 네이티브 객체 자바스크립트에서 미리 만들어진 객체 호스트 객체 자바스크립트 실행 환경에서 만들어진 객체
10. DOM(Document Object Model) 노드(Node) 요소 노드(Element Node) <body>, <div> 등 텍스트 노드(Text Node) 요소 노드 안에 포함된 텍스트 <p> ~~~~ </p> : ~~~~ 부분이 텍스트 노드 속성 노드(Attribute Node) 요소 노드의 속성 src, title 등이 속성 노드 요소 노드 P Title = “a gentle reminder” 이 물건 사는 것을 잊지 마세요 속성 노드 텍스트 노드
12. DOM(Document Object Model) getElementById 특정 ID의 요소 노드에 접근 document.getElementById(id) 로 접근함 cf. getElementsByName getElementsByTagName 특정 태그를 사용하는 요소를 배열로 받음
13. DOM(Document Object Model) getAttribute 요소 노드 객체에 사용 가능 특정 속성 값을 가져올 때 사용 setAttribute 특정 속성 값을 바꾸거나, 삽입할 때 사용 Ex)varobj = document.getElementById(‘logo’); obj.setAttribute(“title”,”brand new”);