자주 쓰이는 이벤트. blur, change, load, unload, resize, scroll, select, submit, click, dblclick, mousedown, mouseup, mouseover, mouseout, mouseenter, mouseleave focus, keydown, keypress, keyup, ....... 등이 있다. 1. 마우스 이벤트 .mouseout(function() {}); - 마우스가 해당 영역을 벗어났을 때 기능 실행 .mouseover(function() {}); - 마우스가 해당 영역에 올라갔을 때 .hover(function() {}, function() {}); - 마우스가 해당 영역에 올라갔을 때 함수1 실행, 영역에서 벗어났을 때 함수2 실행..
국기훈련과정/Web
JQuery를 이용해서 복잡한 js코드를 간단하게 줄일 수 있다. JQuery의 js 파일을 받아서 HTML에 추가하거나 CDN을 이용하여 추가해서 사용가능. 파일로 이용할 경우에는 이런식으로 경로를 지정해주면 되고 CDN을 이용할 경우에는 이런식으로 코드를 입력하면 된다. JQuery의 진입점(body를 읽고 제이쿼리를 실행하라는 것)은 4가지. 1. JQuery(document).ready(function() {코드}); 2. JQuery(function() {코드}); 3. $(document).ready(function() {코드}); ==> 표준 진입점 4. $(function() {코드}); 제이쿼리 동작 방법 $("선택자").동작함수("속성","값"); 예시) $(document).ready..
1. 요소 생성하기 window.onload = function() { let h1Element = document.createElement("h1"); let textNode = document.createTextNode("Hello"); h1Element.appendChild(textNode); document.body.appendChild(h1Element); } .onload ==> 현재 문서의 body 부분을 읽고 난 후에 JS를 실행하라. .createElement(tagName) ==> 태그 요소 생성 .createTextNode(text) ==> 텍스트 노드 생성 2. 속성 추가하기 onload = function() { let img_element = document.createEleme..
DOM(Document Object Model : 문서 객체 모델) - 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리. - DOM은 웹 페이지가 HTML 페이지를 인식하는 방식을 말함. - 웹 브라우저가 HTML 페이지에 접근하는 방법을 정의한 API. - DOM에서 제공하는 일반적인 기능이 여러 개의 DOM 객체로 나뉘어 구성되어 있음. - DOM은 정의부분(명세서)과 구현부분으로 나뉘어 있음. - 명세서에는 웹 페이지 문서를 조작할 떄 지켜야 할 약속(규칙, 규약)이 명시되어 있고 코드는 존재하지 않음. - 명세서는 웹 표준을 정의하는 W3C 관할. 구현 부분은 브라우저 내부에 존재함. - 브라우저 제작사는 DOM에 명시되어 있는 인터페이스에 맞춰서 자신들만의 특화된 고유 기술을..
BOM(Browser Object Model)? - 브라우저 내에 내장된 객체 - BOM 객체의 최상위 내장 객체는 window 객체. *window객체의 주요 메서드 -open() -alert() -prompt() -confirm() -moveTo() -resizeTo() -setInterval() -setTimeout() *screen 객체 -screen.width -screen.height -screen.availWidth: 작업표시줄을 제외한 화면의 너비값을 반환 -screen.availHeight: 작업표시줄을 제외한 화면의 높이값을 반환 -screen.colorDepth: 사용자 모니터가 표현 가능한 컬러 bit를 반환 *location 객체 -JS가 실행되고 있는 현재 브라우저의 주소창에 표..
JS에서의 객체(Object)의 생성 방법 let obj = { key1: value1, key2: value2, key3: value3, key4: value4, } obj[value]로 값을 불러올 수 있음. let student = {}; student.name = "이름"; 위 방식으로 객체 선언 후에 데이터를 추가할 수 있음. ** JS 내장 객체 1. Date 객체 - 날짜와 시간과 관련된 정보를 제공해줌. let date = new Date(); date.getYear() ==> 1900년 = 0 기준으로 현재 년도를 반환함. 따라서 현재 년도를 얻고 싶다면 (date.getYear()+1900) 하면 됨. 혹은 date.getFullYear()하면 바로 현재 년도를 얻을 수 있음. 현재 월..
함수 - 사용자 정의 함수와 내장 함수가 있음. function 함수이름(매개변수1, 매개변수2, ...., 매개변수 n) { 함수내용; return 값; (return은 없어도 됨.) } 무명 함수로 선언 가능. (함수를 재사용하지 않을 경우 편리) let 아무거나 = function() { 함수 내용; } 아무거나(); 로 호출. *콜백함수: 함수 호출 시 매개변수로 넘어가는 값이 함수인 경우. function callTenTimes(callback) { for(let i=1; i
JS에서의 배열 생성 방법 3가지 1. let 배열명 = new Array(원소1, 원소2, 원소3, ...... 원소n); 2. let 배열명 = [원소1, 원소2, 원소3, ..... 원소n]; 3. let 배열명 = new Array(); *자바스크립트에서의 배열은 모든 데이터 타입을 다 담을 수 있음. *JAVA에서는 배열을 한번 생성하면 데이터를 추가/삭제하는 것이 힘들었으나 자바스크립트는 가능. 1. push(요소) - 배열에 데이터를 하나 추가 (배열의 맨 뒤에 요소를 추가해줌.) arr.push(10); 2. concat([추가할 원소1, 추가할 원소2, ...., 추가할 원소n]) - 배열의 뒤쪽에 복수의 데이터를 추가 arr.concat([10,20,30,40]); 3. unshift(..
