생각하다 생각하다

tip. element 가져오기 - document가 아닌 다른 element 내에서도 가져올 수 있다. 아래 코드 참고하기 index.html Log In app.js const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); 1. Login Form 유효성 검사 1. JavaScript로 유효성 검사하기 (권장하지 않음) (1) 빈칸 검사 function onLoginBtnClick() { const value = loginInput.value; if (value === "") { alert("Please write your name"); } } loginButto..

innerText parseInt 0 +1 -1 const number = document.getElementById('number'); const increase = document.getElementById('increase'); const decrease = document.getElementById('decrease'); increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1; }; decrease.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current -..

https://grace-go.tistory.com/79 DOM제어하기(2) 자식태그, 부모태그, 형제태그 1. 자식태그 .childNode; .getElementsBy~(복합구조) .children * var litag = doc.getElementByTagName('li); 미리 해놓음 * ↓console찍힌 내용 *childNode 복합구조 getElementsBy .. children 차이점* -chi.. grace-go.tistory.com

HTML에 동적으로 태그 추가하기1 1. createElement( ) 원하는 태그를 생성 let 변수이름 = document.createElement('태그'); 2. setAttribute( ) createElement( ) 를 이용해 새롭게 만든 태그에 속성과 값을 부여 생성한태그변수.setAttribute('속성' , '값'); 3. appendChild( ) 속성까지 부여해준 태그를 지정된 태그의 자식 태그로 넣는다. 부모태그.appendChild(생성한태그변수); 자바스크립트 HTML 태그 요소 동적 추가 및 삭제 방법은 DOM 객체를 생성하여 DOM 트리에 동적 생성/삭제하려는 내용을 추가시키면 된다. HTML에 동적으로 태그 추가하기2 1 DOM 객체 생성 document.createEle..

1. getAttribute('속성') - 요소의 속성 가져오기 element.getAttribute( 'attributename' ); 2. setAttribute('속성', '값') - 속성 추가하기 element.setAttribute( 'attributename' , 'attributevalue' ); 3. removeAttribute('속성') - 속성 제거하기 element.removeAttribute( 'attributename' );

DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션) 각 매개변수를 살펴보면 이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다. 함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다. 옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다. 클릭 출처: https://ordinary-code.tistory.com/64 [김평범's OrdinaryCode:티스토리] 자주 사용하는 이벤트의 종류 click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때..

1. Producer 2. Consumer: then, catch, finally 3. Promise chaining 4. Error handling --------------- 1. Async 2. Await 3. 유용한 Promise APIs promise는 비동기적으로 구현하는 자바스크립트 객체이다. state: pending -> fufilled or rejected Producer vs Consumer 1. Producer // 1. Producer // 새 promise가 만들어지면 executor라는 콜백함수가 자동으로 바로 실행됨 const promise = new Promise((resolve, reject) => { // doing some heavy work (n..

Callback 동기 vs 비동기 "use strict"; // JavaScript is synchronous. // Execute the code block by orger after hoisting. // hoisting: var, function declaration console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); // Synchronous callback // 동기 callback function printImmediately(print){ print(); } printImmediately( () => console.log('hello')) // Asynchronous callback // 비동기 callb..