• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hacosa js study 2주차
 

Hacosa js study 2주차

on

  • 598 views

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

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

Statistics

Views

Total Views
598
Views on SlideShare
592
Embed Views
6

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 6

http://www.mulder21c.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hacosa js study 2주차 Hacosa js study 2주차 Presentation Transcript

    • 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”);
    • End