• Like
Hacosa js study 2주차
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Hacosa js study 2주차

  • 520 views
Published

하코사 자바스크립트 스터디 모임 …

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
520
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Hacosajs Study
    #2 JavaScript Syntax
    #3 DOM
  • 2. JavaScript Syntax
    함수(Function)
    어떤 기능을 수행하는 코드의 묶음
    호출 전 선언이 되어 있어야 함
    기본 함수 문법
    function 키워드로 선언
    function 키워드 뒤에 함수명 선언
    함수명 뒤에 괄호와 인수를 작성(인수는 0 ~ 원하는 만큼)
    함수의 명령문은 { } 코드 블록 안에 작성
  • 3. JavaScript Syntax
    인수
    함수 호출 시 처리할 정보를 제공해야 할 때 사용
    함수의 선언과 호출에 인자 수는 같아야
    인수는 코드 블럭에서 동일한 이름으로 사용
  • 4. JavaScript Syntax
    인수가 없는 함수의 예
    function chkSubmit(){
    if(document.getElementById(‘userId’) == ‘’){
    alert(‘아이디가 입력되지 않았습니다.’);
    return false;
    }
    }
  • 5. JavaScript Syntax
    인수가 1개인 예
    function showHide(id){
    varobj = document.getElementById(id);
    if(obj.style.display == ‘block’)
    obj.style.display = ‘none’;
    else
    obj.style.display = ‘block’;
    }
  • 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”
    이 물건 사는 것을 잊지 마세요
    속성 노드
    텍스트 노드
  • 11. DOM(Document Object Model)
    CSS와의 관계
    노드 트리(Node Tree)에 따라 상속
    class, id 속성으로 선택자 사용(* 중요한 내용은 아니므로 패스…)
  • 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”);
  • 14. End