본문 바로가기

자바스크립트

 (52)
돔에서 값을 사용자 컴퓨터에 저장하는 메소드 - localStorage localStorage.setItem(key, value); // 임시 저장소 객체에 key라는 값으로 value를 저장한다. { key: value; } localStorage.getItem('key'); // key 값에 저장된 value를 불러온다. // localStorage에는 string 타입만 들어간다. // 때문에 객체를 넣으려면 JSON을 써줘야 한다.
돔 엘리먼트의 클래스 이름 다루기 - classList ele.classList.add('a'); // 엘리먼트에 a라는 클래스 이름을 추가한다. // ele.classList.remove('a'); // 엘리먼트에 a라는 클래스 이름을 지운다. // ele.classList.replace('a', 'b'); // 엘리먼트의 클래스 이름 a를 b로 바꾼다. ele.classList.toggle('a'); // 엘리먼트의 클래스 이름에 a가 있으면 a를 추가하고 없으면 지운다. ele.classList.contains('a'); // 엘리먼트의 클래스 이름에 a가 있으면 true, 없으면 false를 반환한다. ele.classList.item(0); // 엘리먼트의 클래스 이름의 0번째 인덱스에 있는 클래스 이름을 반환한다. // // a는 0번째, b는 1..
자바스크립트 클로저 예제 - 한 번만 호출할 수 있는 함수 function once(func) { // 여기에 func 변수가 있다고 의식해야 쉽다. let alreadyCalled = false; let result; // 이상의 func, alreadyCalled, result 변수는 // 아래의 add 변수에 클로저로 남는다. return function() { if(!alreadyCalled) { alreadyCalled = true; result = func.apply(null, arguments); // func 변수에 담긴 함수를 호출한다. } return result; } } let add = once(function(a, b) { return a + b; }); add(1, 2); // 3 add(3, 4); // 3 add(5, 6); // 3
마우스를 올려 놓을 때 이벤트 발생 예제 1. HTML 2. CSS .over { margin: 100px; } 3. JS // 마우스를 올려놓을 때 document.getElementById('mountain').onmouseover = function() { this.setAttribute('class', 'over'); }; // 마우스를 올려놓지 않을 때 document.getElementById('mountain').onmouseout = function() { this.setAttribute('class', ''); }; 그림 위에 마우스를 올려 놓으면 그림에 margin: 100px 값이 생기면서 움직인다. 4. 더 나아가서 CSS를 아래처럼 바꾸면 애니메이션 효과도 줄 수 있다. // 마우스를 올려 놓으면 3초 동안 move라는 ..
ES6 자바스크립트의 이상한 기호들 1. Spread Operator (...) let args = [0, 1, 2]; // 아래의 세 함수 호출은 같은 말이다. func(0, 1, 2); func.apply(null, args); func(...args); 2. Arrow Function Expression // 아래의 두 함수는 익명 함수로 같은 말이다. function(a, b) { return a + b } (a, b) => { return a + b; } 화살표 함수가 호출 될 때에는 this가 바인딩 되지 않는다. 그래서 상위 함수가 바인딩한 this를 그대로 가져오게 된다. 클로저로서 외부의 this를 참조하는 것과 같다. 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScri..
jQuery 메소드 $( "#target" ).css( "background-color", "yellow" ); // target 엘리먼트에 background-color라는 CSS 속성을 추가하고 yellow 값을 넣는다. $( "#target" ).attr( "title", "blog" ); // target 엘리먼트에 title이라는 속성을 추가하고 blog 값을 넣는다. $( "#target" ).val(); // target 엘리먼트의 value 값을 반환한다. , , 한정 $( "#target" ).text(); // target 엘리먼트의 텍스트 노드를 반환한다. $( "#target" ).text( "This is a test." ); // target 엘리먼트에 글자를 넣는다. $( "#target" ).c..
jQuery 셀렉터(Selector) 사용법 셀렉터를 통해서 jQuery로 제어할 객체를 선택할 수 있다. $('body').css('background-color', 'skyblue'); // body 태그의 엘리먼트를 불러와서 // 배경색을 하늘색으로 한다. body가 셀렉터이고 $() 메소드는 셀렉터가 가리키는 객체를 반환한다. jQuery는 다양한 셀렉터를 제공하고 아래의 사이트에 들어가 스크롤을 내려 https://api.jquery.com Selectors 리스트에서 어떤 셀렉터들이 있는지 파악할 수 있다.
돔 엘리먼트 안에 엘리먼트와 노드 추가하기 - createElement, createTextNode, appendChild 메소드 let p = document.createElement('p'); // p 변수에 p 엘리먼트를 생성해서 넣는다. // let text = document.createTextNode('글자'); // text 변수에 '글자'라는 텍스트 노드를 생성해서 넣는다. p.appendChild(text); // p 엘리먼트 안에 text 노드를 넣는다. // 글자 document.body.appendChild(p); // body 엘리먼트 안에 p 엘리먼트를 추가한다. // 글자 글자 // appendChild 대신 append나 prepend를 사용할 수 있다. (더 제약 없이 사용 가능) // 엘리먼트 안에 자식 노드가 이미 있다면 // appendChild와 append는 자식 노드들의 가장 뒤쪽에 추가시키..

티스토리툴바