Your SlideShare is downloading. ×
0
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Hacosa js study 2주차
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hacosa js study 2주차

533

Published on

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

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

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

No Downloads
Views
Total Views
533
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
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

×