수업내용/Javascript & jQuery 14

[2022.11.25.금] 자바스크립트3 - 이벤트

Event 객체 프로퍼티 프로퍼티명 설명 target 이벤트가 발생된 엘리먼트객체를 반환한다. type 발생된 이벤트이름을 반환한다. dataTransfer drag & drop에서 값을 전달하기 위한 객체를 반환한다. pageX, pageY 마우스의 현재 좌표를 반환한다. which 입력한 문자의 아스키코드값을 반환한다. Method 메소드명 설명 preventDefault() 해당 엘리먼트에 특정 이벤트 발생시 실행할 기본동작이 지정되어 있는 경우 그 동작의 실행을 취소시킨다. 태그 안에서 button, submit 버튼 클릭시 폼이 전송되는 것 태그 클릭시 지정된 링크로 이동하는 것 stopPropagation() 이벤트 버블링을 중지시킨다. stopImmediatePropagation() 이벤트 ..

[2022.11.24.목] 자바스크립트3 - 값 조회, 변경

1. DOM (Document Object Model) 문서객체 모델 HTML, XML 등의 문서를 엑세스하는 표준을 정의하고 있다. DOM은 w3c에서 HTML, XML 문서를 다루는 표준(인터페이스)를 정의한 것이다. DOM에 정의된 표준에 대한 구현은 브라우저 제조사, 프로그래밍 언어 개발사, 라이브러러 개발자가 담당한다. DOM에서 정의한 표준은 브라우저 종류나, 프로그래밍 언어의 종류에 상관없이 동일한 API로 구현되어 있다. 1-1. DOM의 특징 모든 엘리먼트는 객체다. 모든 엘리먼트의 프로퍼티를 정의하고 있다. 엘리먼트를 엑세스하는 메소드를 정의하고 있다. 모든 엘리먼트의 이벤트를 정의하고 있다. 1-2. DOM의 주요 객체 객체 설명 Document 웹 브라우저 HTML 문서를 로딩했을 ..

[2022.11.23.수] 자바스크립트2

자바스크립트 : 프로토타입을 이용해서 객체 생성 1-11. 자바스크립트의 객체 자바스크립트의 객체 클래스(설계도)가 필요없다. 객체의 구성요소는 name:value의 쌍으로 이루어져 있다. 객체 생성 후에도 객체의 구성요소를 추가/변경/삭제 가능하다. 자바스크립트 객체는 자바의 Map과 유사하다. 자바스크립트 객체의 생성 빈 객체의 생성 var obj = { }; 구성요소를 가지고 있는 객체 생성 var obj = {no:100, title:"이것이 자바다", author:"신용권", price:35000, discountRate:0.15, onSell:true}; 생성된 객체에 구성요소 추가하기 var obj = { }; obj.no = 100; // obj -> {no:100} obj["title"]..

[2022.11.22.화] 자바스크립트

1. 자바스크립트 서블릿, JSP의 응답으로 받은 HTML에 대한 차후 조작 브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어다. java와 문법적 유사성이 많아서 쉽게 배울 수 있다. 인터프리터(Interpret) 프로그래밍 언어다. (컴파일 과정없이 소스가 실행파일로 사용된다.) 1-1. 자바스크립트로 할 수 있는 것 HTML 컨텐츠를 변경할 수 있다. 브라우저를 통해서 현재 보고 있는 웹 페이지를 변경할 수 있다. HTML 태그의 속성을 변경할 수 있다. HTML 컨텐츠의 스타일을 변경할 수 있다. CSS 변경할 수 있다. 사용자 상호작용하는 프로그램을 작성할 수 있다. 이벤트모델을 활용한다. 브라우저의 도움없이 서버와 데이터통신을 할 수 있다. AJAX기술을 활용하면 가능하다. 1..