728x90 반응형 IT 개발/JavaScript50 07. 제이쿼리 이벤트 (4) : 이벤트 객체와 종류 / Scroll 이벤트 메서드 이벤트 객체와 종류 - 사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다. $("이벤트 대상 선택").mousemove(function(매개변수){ 매개변수(이벤트 객체).속성; }); 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX 마우스 포인터의 X 좌푯값 반환(스크롤 이동 거리 무시) clientY 마우스 포인터의 Y 좌푯값 반환(스크롤 이동 거리 무시) pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌푯값을 반환 pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌푯값을 반환 screenX 화면 모니터를 기준으로.. 2020. 3. 15. 07. 제이쿼리 이벤트 (3) : 마우스 이벤트 click() / dblclick() 이벤트 메서드 click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용 click() 이벤트 등록 $("이벤트 대상 선택").click(function(){자바스크립트 코드;}); $("이벤트 대상 선택").on("click", function(){자바스크립트 코드;}); click 이벤트 강제 발생 $("이벤트 대상 선택").click(); dblclick() 이벤트 메서드는 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 더블클릭 이벤트를 발생시킴 dblclick 이벤트 등록 $("이벤트 대상 선택").dblclick(function(){자바스크립트 코.. 2020. 3. 15. 07. 제이쿼리 이벤트 (1) : 이벤트 메서드 종류 및 이벤트 발생 / 제거 - 방문자가 웹사이트에 방문하여 동작을 취했을 때 제이쿼리 코드가 실행되도록 만드는 방법 소개 - 방문자의 모든 동작을 '이벤트'라고 하고, 이벤트가 발생했을 떄 코드를 실행시키는 것을 '이벤트 핸들러'라고 한다. * 이벤트 등록 메서드란? - 이벤트 등록 메서드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다. - 이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있다. - 단독 이벤트 메서드는 한 동작에 대한 이벤트를 등록할 때 사용 예) '요소를 클릭했을때, '요소를 더블클릭했을 때', '요소에 마우스 포인터를 올렸을 때' $("#btn").click(.. 2020. 3. 8. 06. 제이쿼리 문서 객체 선택자와 조작법 자바스크립트의 문서 객체 모델(DOM, Document Object Model)은 브라우저 간 호환성이 떨어져 크로스 브라우징이 힘들다는 단점이 있다. 제이쿼리 문서 객체 모델은 이러한 문제를 해결할 수 있다. 제이쿼리란 - 제이쿼리 모질라 사의 자바스크립트 개발자였던 존 레식(Jhon Resig)이 자바스크립트를 이용해 만든 라이브러리 언어이다. - 제이쿼리는 다양한 함수들을 사용자에게 제공함으로써 자바스크립트에서 사용할 때 불편했던 몇 가지 점들을 간편하게 사용할 수 있도록 개선함.\ 1. 호환성 문제 해결 - 자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어진다는 단점이 있다. 예를 들면 인접 요소 선택자 중 다음 요소 선택자(nextS.. 2020. 1. 14. 05. 함수 함수 - 함수란 프로그램의 코드를 저장한 공간 - 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수없으며, 함수를 사용하면 코드를 메모리에 저장했다 가 필요할 때마다 호출하여 사용할 수 있다. * 변수와 함수의 차이점 변수 함수 1개의 데이터만 저장 자바스크립트 코드를 저장 var 라는 키워드를 이용하여 선언 function이라는 키워드를 이용하여 선언 문자형, 숫자형, 논리형 테이터를 보관 출력문, 제어문 등의 코드를 저장하고 데이터를 반환 객체를 참조함 기본 함수 정의문 - 함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 한다. - 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언 기본형 1. 일반 함수 정의 function 함수명().. 2020. 1. 10. 04. 객체 자바스크림트는 객체 기반 언어 객체는 기능과 속성을 가지고 있다. ex) TV 라는 객체 기능 : 메소드(Methode) 속성 : 속성(Property) ex) TV의 크키나 색상 그리고 무게 등 기본형 객체.메소드(); //객체의 메서드를 실행 객체.속성; //객체의 속성값을 가져옴 객체.속성 = 값; //객체의 속성값을 바꿈 객체의 종류 - 내장객체 - 브라우저 객체모델(BOM, Browser Object Model) - 문서 객체 모델 (DOM, Document Object Model) 내장객체 - 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용 가능 - 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등 브라우저 객체 모델(BOM) - 브라우저 객체 모.. 2019. 12. 30. 03. 제어문 * 제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장 조건문 - 조건에 따라 특정 코드를 실행시킬 수 있음. - if문 / else문 / else if 문 선택문 - 일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있음. - switch문 반복문 - 코드를 지정한 횟수만큼 반복해서 실행시킬 수 있음. - while문 / for문 / do ~ while문 01. 조건문 if문 * 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우 - 조건식에 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식 된다. - 조건식에 논리형 데이터가 아닌 다른형의 데이터가 입력되었을 때 반환되는 결과 예제. * 0, null, ""(빈문자), unde.. 2019. 12. 22. 02. 자바스크립트 기초 문법 * 내부 스크립트 외부로 분리하기 * 코드 입력 시 주의 사항 1. 자바스크립트는 대/소문자 구분하여 작성한다. 2. 코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋다. 세미콜론을 쓰지 않으면 한 줄에 2개의 코드를 작성할 경우 오류 발생 * 한 줄에 한문장만 작성하는 게 가독성을 위해 좋음. 3. 문자형 데이터를 작성할 큰따옴표("")와 작음따옴표('')의 겹침 오류 주의 4. 코드를 작성할 때 중괄호 {} 또는 소괄호 ()의 짝이 맞아야 한다. * 변수선언 변수는 변하는 데이터를 저장할 수 있는 메모리 공간 / 데이터를 담을 수 있는 그릇 / 데이터가 오직 한 개만 저장됨 ==> 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워짐 데이터의 종류 - 문자형 (String),.. 2019. 12. 18. 01.자바스크립트 시작하기 * 자바스크립트의 가장 큰 특징은 객체기반언어이라는 것이다. 1단계 : 고객(클라이언트)에게 사이트 개발의뢰 받아 고객의 요구에 맞게 기획안 작성 2단계 : 기획안을 토대로 UI 디자인 제작 3단계 : 디자인 파일을 전달받은 퍼블리셔는 이미지를 이용해 인터넷 문서인 HTML, CSS를 이용해 화면의 모양을 잡아 정적인 웹 문서를 완성하고, 자바스크립트 또는 jQuery를 사용 3단계의 과정을 프런트엔드 개발이라함. - 눈에 보이는 부분까지 개발하는 것을 프런트엔드 개발이라 한다. 4단계 : 완성된 HTML 문서를 백엔드 개발자에게 전달. 백엔드 개발자는 ASP, PHP, JSP등 서버 언어를 사용, 화면에 보이지 않는 부분을 개발. * 자바스크립트로 제작된 다양한 라이브러리 - 제이쿼리, Angular(.. 2019. 12. 17. Math 함수 * 소수점 올림, 버림, 반올림, 절대값, 소수점에서 반올림 Math.ceil() : 소수점 올림, 정수 반환 Math.floor() : 소수점 버림, 정수 반환 Math.round() : 소수점 반올림, 정수 반환 Math.abs() : 절대값 반환 * toFixed() : 소수점에서 반올림 2019. 12. 17. 이전 1 2 3 4 5 다음 728x90 반응형
