Hacosa js study 2주차

Hacosajs 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){ varobj = 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){ varimgBox = 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 reminder” 이 물건 사는 것을 잊지 마세요 속성 노드 텍스트 노드

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)varobj = document.getElementById(‘logo’); obj.setAttribute(“title”,”brand new”);

Hacosa js study 2주차

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Hacosa js study 2주차

Ähnlich wie Hacosa js study 2주차 (20)

Mehr von Seong Bong Ji

Mehr von Seong Bong Ji (15)

Hacosa js study 2주차