it개발자스터디공간

웹표준 html,css,javascript 실무 과정 자료] DOM(Document Object Model)

웹표준 html,css,javascript 실무 과정 자료] DOM(Document Object Model)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

DOM(Document Object Model)

■ 스크립트에서 문서 객체(Document Object)에 접근하는 방법

■ 요소를 지정할 경우 앞에 ‘document.XXX’가 붙는다

■ HTML문서를 다룰 때 필수적인 분야로 자바 스크립트에 대한 기본 지식 필요

■ HTML요소의 트리 구조 확인

  - 브라우저(크롬)의 F12를 눌러 개발자 모드에서 확인 가능

웹표준 html,css,javascript 실무 과정 자료] 즉시 함수 (function(){})();

웹표준 html,css,javascript 실무 과정 자료] 즉시 함수 (function(){})();

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

즉시 함수 (function(){})();

■ 실무에서 많이 쓰는 패턴

■ Javascript에서 전역변수를 사용함으로 디버깅이 힘들어지는 단점 보완

 <script>

(function() {

   var local = "삼성 갤럭시 노트7’은 우연히 터진 게 아니다";

   alert(local);

})();

//alert(local);  //에러

</script>

■ 함수를 만들고 즉시 실행한다는 의미

웹표준 html,css,javascript 실무 과정 자료] prototype 기능 사용

웹표준 html,css,javascript 실무 과정 자료] prototype 기능 사용

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

prototype 기능 사용

■기존의 사용자 정의 객체에 새로운 메서드를 추가하는 방법

  - 기존의 기능에 새로운 기능을 추가하는 유연한 방법

  Person.prototype.fullNameReverse = function() {

    return this.last + " " + this.first;

  };

  console.log(b.fullNameReverse());

웹표준 html,css,javascript 실무 과정 자료] 사용자 정의 객체 작성2(new 키워드 사용)

웹표준 html,css,javascript 실무 과정 자료] 사용자 정의 객체 작성2(new 키워드 사용)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

사용자 정의 객체 작성2(new 키워드 사용)

var b = new Person("재인", "문");

console.log(b.fullName());

function Person(first, last) {

this.first = first;

this.last = last;

this.fullName = function() {

return this.first + " " + this.last;

}

}

웹표준 html,css,javascript 실무 과정 자료] 사용자 정의 객체 작성1(JSON이용)

웹표준 html,css,javascript 실무 과정 자료] 사용자 정의 객체 작성1(JSON이용)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

사용자 정의 객체 작성1(JSON이용)

var a = makePerson("철수", "안");  

console.log(a.fullName());

function makePerson(first, last) {

return {

first: first,

last: last,

fullName: function() {

return this.first + " " + this.last;

}

}

}

웹표준 html,css,javascript 실무 과정 자료] 배열

웹표준 html,css,javascript 실무 과정 자료] 배열

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

배열

■하나의 타입(형)

■배열의 크기 length 라는 '속성'

■var array = new Array();   //이전 방식

■array[0] = "갤럭시Note7";

■array[1] = "갤럭시S7";

■array[2] = "갤럭시S6";

■혹은

■var array = ["G5", "V10", "V20"];

웹표준 html,css,javascript 실무 과정 자료] Javascript객체

웹표준 html,css,javascript 실무 과정 자료] Javascript객체

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

Javascript객체

■ 간단한 이름-값 쌍의 모임

■ 빈 객체를 생성하는 법

■ var obj = new Object();

■ 혹은

■var obj = {};

■obj.name = "안철수";

  - obj["name"] = "안철수";  

■console.log(obj.name);

  - console.log(obj["name"]); 

웹표준 html,css,javascript 실무 과정 자료] 스위치 문

웹표준 html,css,javascript 실무 과정 자료] 스위치 문

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

스위치 문

■ 숫자나 문자열을 기반으로 다중 분기되는 문자 작성

switch (action) {

 case “draw”:

   drawIt();   //그려라

   break;

 case “eat”:

  eatit();     //먹어라

  break;

 case “drink”:

  drinkit();   //마셔라

  break;

 default:

  donothing();   //아무것도 없음

}