Document.querySelector()
-> 지정된 selector나 selector 그룹과 일치하는 document 안에 첫번재 element를 반환한다.
const toDoForm = document.querySelector('.js-toDoForm');init() 함수 (initialize)
-> 즉시 객체 초기화, 전역 유효범위가 난잡해지지 않도록 보호하는 방법, init()함수는 모든 초기화 작업을 처리하는 기능으로 구현한다.
-> init()이 완료되고 나면 객체에 접근할 수 없다.
function init() {
}
inti();Storage.getItem()
-> 주어진 Storage obejct에서 key name이 통과할 때, key의 value를 반환한다. 만약에, key가 없을 때는 null을 반환한다.
Event.prevent.Default()
-> 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소한다.(무슨 말이지)
syntax
event.preventDefault();
EventTarget.addEventListener()
-> 지정한 이벤트가 대상에 전달될 때마다 호출 할 함수를 설정한다. 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다.
addEventListenr() 는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동합니다.
Syntax
target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);
target.addEventListener(type, listener [, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
funciton addSomthing{
toDoForm.addEventListener('submit', handleSubmit);
}document.create.element()
-> document.createElement() 메서드는 tagName으로 지정된 HTML element 만들어 반환한다.
syntax
const element = document.createElement(tagName[, options]);
function paintToDo(text) {
const li = document.createElement('li');
}HTMLElement.innerText
-> 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.
syntax
const renderedText = htmlElement.innerText
htmlElement.innerText = string
function paintToDo(text) {
const li = document.createElement('li');
const delBtn = document.createElement('button');
delBtn.innerText = '❌'
const span = document.createElement('span');
span.innerText = text
}Node.appendChild()
-> 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)
var aChild = element.appendChild(aChild);
function paintToDo(text) {
const li = document.createElement('li');
const delBtn = document.createElement('button');
delBtn.innerText = '❌'
const span = document.createElement('span');
span.innerText = text
li.appendChild(span);
li.appendChild(delBtn);
toDoList.appendChild(li);
}
syntax
element.appendChild(aChild)
나중에 정리
Function
- fundamental buidling block in the program
- subprogram can be used multiple times
- performs a tast or calculates a value
- Function declaration
function name(param1, param2) { body... return;}
one funciton === one thing
naming: doSomething, command, verb
e.g. createCardAndPoint -> createCard, createPoint
function is object in JS
function printHello(){
console.log('Hello');
}
printHello();
function log(message) [
console.log(message);
}
log'Hello@);
log(1234);Parameters
function changeName(obj) {
obj.name = 'coder';
}
const ryan = { name: 'ryan' };
changeName(ryan);
console.log(ryan)Default parameters (added in ES6)
Rest parameters
Local scope
밖에서는 안이 볼 수 없고,
안에서만 밖을 볼 수 있다.
Return a value
Early return, earlu exit
Function expression
Callback function using function expression
Arrow function
IIFE: Immediately Invoked Function Expression
