라이브러리, 프레임워크 : 브라우저에 내장되어 있지 않은 언어 => 상대적으로 무거움 바닐라자바스크립트 : 브라우저에 내장되어 있는 언어 => 상대적으로 가벼움 1. Setting CDN 연결 라이브러리 파일 다운로드 사용버전 - jQuery 1.12.4 / jQuery Migrate 3.4.0 http://jQuery.com jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-u..

1 2 3 내용1 내용2 내용3 var activeCont = ''; var tabList = document.querySelectorAll('.tab li a'); var contents = document.querySelectorAll('.tabcon div'); tabList[0].classList.add('current'); contents[0].style.display = 'block'; for(var i = 0; i < tabList.length; i++){ tabList[i].addEventListener('click', function(e){ e.preventDefault(); for(var j = 0; j < tabList.length; j++){ // 나머지 버튼 클래스 제거 tabLi..

element.classList.add 를 사용 하여 클래스를 추가 ex)element.classList.add("my-class"); element.classList.remove 는 클래스를 제거 ex)element.classList.remove("my-class"); var m1 = document.getElementById('m1'); var add = document.getElementById('add'); var remove = document.getElementById('remove'); add.onclick = function(){ m1.classList.add('list2'); } remove.onclick = function(){ m1.classList.remove('list2'); } ..

이벤트 처리 사용자에 의해 감지되고 처리될 수 있는 동작이나 사건 키보드나 마우스 동작처럼 브라우저에서 발생하는 사건(순간)들 사용자가 발생시킬 수도 있고 응용프로그램이 발생시킬 수도 있음 이벤트 => click / dbclick / mouseover / load ... 이벤트핸들러 => onclock / ondbclick / onmouseover / onload .... 이벤트 종류 마우스 이벤트 키보드 이벤트 프레임 이벤트 프레임 이벤트 폼 이벤트 드래그 이벤트 클립보드 이벤트 프린트 이벤트 미디어 이벤트 - 요소에 이벤트를 바인딩하는 세가지 방법 1. html 이벤트 핸들러 function 함수명 (){//처리코드;} function start(){ var i..

웹 브라우저와 관련된 객체의 집합이다. 대표적으로 window(최상위 객체), location, navigator, history, screen, document 객체가 있다. window 객체 -브라우저의 내장 객체 중 최상위 객체 -모든 전역 객체, 함수, 변수는 자동적으로 window 객체에 속함 -모든 전역 변수는 window 객체의 속성이 됨 -모든 전역 함수는 window 객체의 메서드가 됨 -window를 생략한 형태로 window 객체와 메서드를 사용 가능 -적용하기 위한 공식적인 표준은 없으나, 주요 브라우저들에서 지원되고 있음 브라우저 객체 모델 ( BOM ) - Browser Object Model screen 객체 ( 반응형 웹 주로 사용) -운영체제의 화면에 대한 정보를 가지고 있..

객체지향 프로그래밍 OOP ( object orientied programing ) 내장객체 : 자바스크립트에서 미리 만들어 놓은 객체 사용자 정의 객체 : 프로그래머가 임의로 만들어 사용하는 객체 객체는 속성과(property) 과 메소드(method())를 가지고 있다. 접근방법 '.' ( dot 연산자 ),[] ex) 객체명.속성=값; 객체명['속성']=값; 객체에 생성된 메소드에서 객체의 속성을 사용할 때는 꼭 this. 속성을 사용한다 ※ 객체 속성 ( property) - 특정 능력을 가지고있는 변수/배열 ex) 키,이름,나이... 메소드() == 함수() ex) 뛰기 걷기 공격 - 행동 사용법 ex) 변수.속성 = 값; , 메소드(값); => 함수 호출문 사용 객체의 생성과 선언 var 객체..