JavaScript 4

이벤트와 자바스크립트 함수와의 관계

자바스크립트에서 함수란? 1.함수를 우선 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭으로 이해하면 된다. 2.함수를 우선 지시사항들의 묶음(과정)으로 이해하면 된다. 3.함수는 재사용 가능한 영역을 정의하고, 정보영역을 캡슐화하는데 사용되는 구문이다. (여러번 호출 가능) 4.일반적으로 (입력 – > 함수 – > return – > 출력) 형태를 갖는다. 5.함수 선언을 위해서는 Keyword, name, paramenter, body 필요하다. // Keyword -> function // Name -> hello // Paramenter -> () // Body -> {} function hello() { } – 함수의 특징 1.함수는 function 키워드로 시작하고, 실제로는 객체이다...

JavaScript 2022.07.06

이벤트 연결

이벤트 연결 사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => '이벤트 핸들러' '이벤트 핸들러'는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리 이벤트를 객체와 연결하는 방식 인라인 방식 & 고전방식 : DOM Level 0 / 단점 : 동일한 객체에 동일한 이벤트 여러번 적용 불가 인터넷 익스플로어 방식 & 표준 이벤트 방식 : DOM Level 2 / DOM Level 0의 단점을 보완하기 위한 것 1) 인라인 방식 클릭 클릭 2) 고전 방식 [1] 객체.on이벤트명 = function() { } [2] function 함수명() { } 객체.on이벤트명 = 함수명 클릭 [방법1] [방법2]

JavaScript 2022.07.06

웹 페이지에서 일어날 수 있는 이벤트의 종류

이벤트란 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 1) 마우스 이벤트 click: 요소에 마우스를 클릭했을 때 이벤트가 발생 dbclick: 요소에 마우스를 더블클릭했을 때 이벤트가 발생 mouseover : 요소에 마우스를 오버했을 때 이벤트가 발생 mouseout : 요소에 마우스를 아웃했을 때 이벤트가 발생 mousedown : 요소에 마우스를 눌렀을 때 이벤트가 발생 mouseup : 요소에 마우스를 떼었을 때 이벤트가 발생 mousemove : 요소에 마우스를 움직였을 때 이벤트가 발생 contextmenu context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 2) 키 이벤트 k..

JavaScript 2022.07.06

JavaScript

JS > 콘텐츠를 바꾸고 움직이는등 페이지를 동작시키는 동적 처리를 담당 홈페이지에 뇌! CSS도 연결한 이후 자바스크립트 연결 방법에 대해서도 알아보자 자바스크립트 연결의 경우 크게 3가지 경우가 있으며 각 위치에 따라서 차이가 존재 한다 1. 외부에 자바스크립트 파일이 존재하는경우 1) HTML코드와 분리 되어있어서 유지 보수가 쉽다. 2)자바스크립트 파일이 캐시(자주사용되는 파일이나 데이터를 미리복사하는 것)되고 나면 페이지 로드가 빠르다. 2. head에 있는경우 1)이 경우 DOM객체(Document Object Model)가 생성되기전에 실행이 된다 2) 스크립트가 너무 무거울경우 DOM생성이 늦어져서 화면이 늦게 출력된다. 3.BODY에 위치할 경우 ... 1)렌더링이 완료된 이후에 스크립트..

JavaScript 2022.07.06