종우의 컴퓨터 공간

Event listener with anonymous function document.querySelector('.clear-tasks').addEventListener('click', function(e) { console.log('Hello World'); //e.preventDefault(); }); - it is the event from the button - 'e' is the event object - 'e.preventDefault()' let the default behavior written in HTML does not make an effect Event listener with named function document.querySelector('.clear-tasks').addE..

Replace element - .replaceChild(, ); // create new heading element const newHeading = document.createElement('h2'); // add id newHeading.id = 'task-title'; // add text node newHeading.appendChild(document.createTextNode('Task List')); // get the old heading const oldHeading = document.getElementById('task-title'); // get the parent of old heading const cardAction = document.querySelector('.card-..

Creating elements - = document.createElement(''); Adding class, or id - .className = ''; - .id = ''; Adding attributes - .setAttribute(', ''); Creating text node - = document.createTextNode(''); Appending node - .appendChild(); 예제 // Create element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Add id li.id = 'new-item'; // Add attribute li.setAttribut..

let val; const list = document.querySelector('ul.collection'); const listItem = document.querySelector('li.collection-item:first-child'); get child nodes val = list.childNodes; val = list.childNodes[0].nodeName; val = list.childNodes[0].nodeType; val = list.childNodes[1].nodeType; val = list.firstChild // first child val = list.lastChild // last child val = listItem.parentNode; // get parent nod..

DOM Selectors for single elements - grab one element by id or className, or tag - only stores one thing - if classNames appear more than one time in HTML, it will grab the very first one that appears document.getElementById() const taskTitle = document.getElementById('task-title'); //get things from the element console.log(taskTitle.className); // change styling taskTitle.style.background = 'bla..

DOM 이란? - Tree of nodes/elements(tags in HTML) created by the browser - Javascript can be used to read/write/manipulate to the DOM - Object Oriented Representation => each one has its own properties that is changeable

Alert window.alert('Hello World'); //usually we skip 'window.' Prompt const input = prompt(); alert(input); - prompt 창을 띄우며 그 곳에 error message를 입력할 수 있다. Confirm if(confirm('Are you sure')) { console.log('YES'); } else { console.log('NO'); } - used before when deleting something to confrim of the decision Outter & Inner height and width let height; let width; height = window.outerHeight; width =..

forEach const cars = ['Ford', 'Chevy', 'Honda', 'Toyota']; cars.forEach(function(car, index, array) { //takes three params console.log(`${index} : ${car}`); console.log(array); }); - it is used to loop through the array - forEach takes the anonymous function with three parameters - it is much cleaner over normal for loop map const users = [ {id:1, name:'John'}, {id:2, name:'Sara'}, {id:3, name:'..