it개발자스터디공간

웹표준 html,css,javascript 실무 과정 자료] 입력제한 컨트롤 타입

웹표준 html,css,javascript 실무 과정 자료] 입력제한 컨트롤 타입

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

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

입력제한 컨트롤 타입

웹표준 html,css,javascript 실무 과정 자료] 폼 작성 태그 <form>

웹표준 html,css,javascript 실무 과정 자료] 폼 작성 태그 <form>

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

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

폼 작성 태그 <form>

■ action: 데이터를 보낼 곳(URL)

  - 폼에 입력한 데이터를 처리하는 PHP, JSP같은 프로그램의 URL

  - 보내기 버튼은 input 요소의 type=“submit”

■ method: get, post(데이터 송신 방법)

  - get: action속성에 지정한 URL 다음에 ?와 폼데이터를 추가하여 송신(기본값)

  - post: 폼 데이터를 본문으로 송신(action URL변화없음)

웹표준 html,css,javascript 실무 과정 자료] querySelector(“선택자명”)

웹표준 html,css,javascript 실무 과정 자료] querySelector(“선택자명”)

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

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

querySelector(“선택자명”)

■ CSS의 선택자명으로 요소를 지정하는 방법

■ 지정한 요소의 최초 1개만을 얻음.

  - 사용하기 편한 장점!

■ querySelectorAll(“선택자명”)

  - 선택자명으로 지정한 모든 요소를 배열로 가져옴

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

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

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

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

■ getElementById(“id명”)

  - 지정한 id명을 가진 객체를 얻는 방법

■ getElementsByClassName(“클래스명”)

 -지정한 클래스명을 가진 객체를 얻는 방법

 -배열로 ‘전체요소’를 얻기 때문에 각각의 요소는 item(요소의 인덱스)로 접근함

■ getElementsByTagName(“요소명”)

  - 지정한 요소명을 가진 객체를 얻는 방법

  - 배열로 ‘전체요소’를 얻기 때문에 각각의 요소는 item(요소의 인덱스)로 접근함

웹표준 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;

}

}