Hacosa js study 2주차

772 views

Published on

하코사 자바스크립트 스터디 모임
2번째 주

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
772
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hacosa js study 2주차

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

×