일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Prototype
- Sass
- css variables
- Object.create
- 정규표현식
- Express
- 무료 백엔드 배포
- flex-shrink
- ajax
- css grid
- select by attribute
- 디자인패턴
- module wrapper function
- Engoo
- es6
- img 확대
- close together
- Node.js
- improve-iq-by-up-to-10%!
- regExp
- css
- node
- css 오버레이
- express-handlebars
- flexbox
- flex-grow
- flex-basis
- JS
- just-one-small-sip
- shit-christmas
- Today
- Total
목록분류 전체보기 (69)
let val; const list = document.querySelector("ul.collection"); const listItem = document.querySelector("li.collection-item:first-child"); val = listItem; val = list; // Get child nodes val = list.childNodes; // count line breaker as a text node. val = list.childNodes[0]; val = list.childNodes[0].nodeName; val = list.childNodes[1].nodeType; // nodetypes // 1 - Element // 2 - Attribute // 3 - Text..
선택자에 따라 HTMLCollection과 NodeList 두 가지 리턴형식이 존재 // document.getElementsByClassName // const items = document.getElementsByClassName("collection-item"); // console.log(items); // console.log(items[0]); // items[0].style.color = "red"; // items[3].textContent = "Hello"; // const listItems = document.querySelector("ul").getElementsByClassName("collection-item"); // console.log(listItems); // documen..
// // document.getElementById() // console.log(document.getElementById("task-title")); // // Get things from the element // console.log(document.getElementById("task-title").id); // console.log(document.getElementById("task-title").className); // const taskTitle = document.getElementById("task-title"); // // Change styling // taskTitle.style.background = "#333"; // taskTitle.style.color = "#fff"..
HtmlCollection이 Array가 아님에 주의 let val; val = document; val = document.all; // htmlcollection val = document.all[1]; // can access by indexes val = document.all.length; val = document.head; val = document.body; val = document.doctype; val = document.domain; val = document.URL; val = document.characterSet; val = document.contentType; val = document.forms; val = document.forms[0]; val = document.fo..
전역에 사용된 var가 함수 안과 if 나 loop 안에서 어떤 차이를 보이는지에 주목하자. // Global Scope var a = 1; let b = 2; const c = 3; // function test() { // var a = 4; // differ from global a // var b = 5; // var c = 6; // console.log(`Function Scope: ${a} ${b} ${c}`); // } // test(); // Block Scope (if, loop, etc... wrapped in culry braces..) // if(true) { // var a = 4; // same as global a // let b = 5; // const c = 6; // c..
val = Math.PI; val = Math.E; val = Math.round(2.4); // 2 val = Math.ceil(2.3); // 3 val = Math.floor(2.7); // 2 val = Math.sqrt(81); // 9 val = Math.abs(-2); // 2 val = Math.pow(8, 3); // 512 val = Math.min(4,6654,4,3,1); // 1 val = Math.max(4,6654,4,3,1); // 6654 val = Math.random(); val = Math.floor(Math.random() * 20);
Number() String() ~.toString() parseInt() parseFloat() 등이 있고 문자열과 숫자를 더하면 숫자가 자동으로 문자열로 형 변환된다.
값을 비우는 것이 의도적인지 아닌지가 포인트인것 같다. null 같은 경우에는 의도적으로 값을 비우고자 할 때 사용되어지고, undefined는 초기화를 하지 않거나 선언하지 않은 변수를 호출하려 할 때 사용되어지는 것 같다.
DOM Document Object Model의 약자. HTML, XML문서 의 프로그래밍 인터페이스이다. 해당 문서들을 구조화된 표현으로 제공하여 프로그래밍 언어가 해당 요소들을 다룰 수 있도록 한다. window object 브라우저에 해당하며 DOM문서를 포함하고 있는 객체. 최상위이기 때문에 가지고 있는 메서드들을 점표기법 없이 사용 가능하다. 아래는 기타 여러가지 하위 object or methods // WINDOW METHODS / OBJECTS / PROPERTIES console.log(123); // Alert // alert('Hello'); // Prompt // const input = prompt(); // alert(input); // Confirm // if (confirm(..
Object literal 말고 객체를 생성할 수 있는 방법이 두 가지 더 있다. 하나는 prototypes와 함께 constructor function을 생성하는 것이고, 다른 하나는 es6에서 class를 이용하는 것이다. 1) Constructor function 이용하기 생성자 함수를 만들 때는 항상 함수의 이름 맨 앞이 대문자여야 한다. 매개변수에는 해당 객체의 properties 명을 전달한다. 그 후, 해당 생성자를 new 키워드와 함께 사용하여 인스턴스화(구체화)를 통해 객체를 생성 하면 된다. Object literal로 생성한 것과 다른 점은 앞에 해당 객체의 이름이 적힌다는 것이다. 다음과 같이 object에 methods를 추가할 수도 있다. 또한 JS는 프로토타입 기반언어인데 해당..