Class 추가, 제거

JavaScript class 추가/제거하기 JavaScript로 HTML에 CLASS를 추가하거나 제거할 수 있다. ＊ 클래스 추가하기 element.classList.add(); var d = document.getElementById('div1'); d.classList.add('my-class'); ＊ 클래스 제거하기 element.classList.remove(); var d = document.getElementById('div1'); d.classList.remove('my-class'); ＊ IE9 이하를 지원해야 하는 경우 var d = document.getElementById('div1'); d.className += ' on'; // 앞에 공백을 넣어줘야 한다

2021.12.03

JavaScript event

이벤트 프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건 키보드나 마우스 동작처럼 브라우저에서 발생하는 사건(순간)들 사용자가 발생시킬 수도 있고 응용프로그램이 발생시킬 수도 있음. 이벤트의 종류 프레임 이벤트, 폼 이벤트, 드래그 이벤트, 클립보드 이벤트, 프린트 이벤트, 미디어 이벤트 등 수많은 이벤트가 있다. ＊ Mouse Event onClick 마우스로 해당 엘리먼트를 클릭함 onDbClick 마우스로 해당 엘리먼트를 더블클릭함 onMouseDown 마우스를 누름(클릭은 마우스를 눌렀다 때는 것으로 구별됨) onMouseMove 마우스가 엘리먼트 위에서 이동함 onMouseOut 마우스가 엘리먼트에서 벗어남 onMouseUp 마우스를 똄(MouseDown과 반대 됨) 버튼을 누른 상태에서 ..

2021.12.03

setInterval, setTimeout, 현재시간표시

setInterval 함수를 = 설정된 시간(초)마다 계속 반복 계산한다. setInterval (function(){ // 실행 }, 1000}; // 시간(초) var cnt = 0; setInterval(function(){ // 매 1초마다 함수를 실행 cnt++; console.log(cnt); }, 1000); // 1초마다 cnt ++ setTimeout 함수를 = 설정된 시간 후에 1번만 계산한다. setTimeout (function(){ // 실행 }, 1000); setTimeout(function(){ location.href='http://naver.com'; }, 3000); // 3초 후 네이버로 이동 현재시간 표시 setInterval window.onload = functi..

2021.12.03

JavaScript 문서 객체 조작

문서 객체의 스타일 조작 JavaScript에서 style 속성을 이용하여 문서 객체의 CSS의 속성을 제어할 수 있습니다. CSS에서 여러 단어로 이뤄진 속성은 - 로 구분되어 있었는데 (ex. font-size), JavaScript에서는 - (빼기로 인식) 를 사용하지 않고 다음 단어를 대문자로 사용하는 카멜표기법(Camel Case)으로 구분됩니다. (ex. fontSize) ['속성'] 대괄호를 사용하여 표기할 경우는 - 사용 가능합니다. 태그.style.속성='값'; 태그.stlye['속성'] = '값'; //문서 객체의 스타일 조작 window.onload = function(){ var header = document.getElementById('header'); header.style.b..

2021.12.03

BOM, DOM Object Model

브라우저 객체 모델 (Browser Object Model : BOM) 실제 우리가 사용하고 있는 브라우저와 관련된 객체의 집합이다. 대표적으로 window(최상위 객체), location, navigator, history, screen, document 객체가 있다. location Object 웹 링크, url에 관련된 객체 navigatior Object 브라우저의 탑재 메뉴들 관장 history Object 히스토리 관장 screen Object 윈도우 창, 사이즈 관장 (반응형 웹 관련) window 객체 ＊ 브라우저의 내장 객체 중 최상위 객체 ＊ 모든 전역 객체, 함수, 변수는 자동적으로 window 객체에 속함 ＊ 모든 전역 변수는 window 객체의 속성이 됨 ＊ 모든 전역 함수는 wi..

2021.12.02

Object 내장객체

내장객체 자바스크립트 내에 이미 만들어져 있는 객체 1. Number Object ＊숫자일 때 사용할 수 있는 객체 숫자.toFixed(1); 소수점 둘째 자리에서 반올림해서 소수 첫째 자리로 반환 var number = 273.5210332; var output = ''; output += number.toFixed(1) + '\n'; // ★number에 값이 숫자이기 때문에 메소드 사용 가능 output += 10.244457.toFixed(4); // 그냥 숫자도 가능 console.log(output); 2. String Object ＊ 문자일 때 사용할 수 있는 객체 문자.length 문자 열의 갯수를 숫자로 반환 문자.toUpperCase(); 소문자를 대문자로 반환 var character..

2021.12.01