Objects
Create an Object
const spiderman = {};
Access a Property
superman.name
superman['name']
Call an Object's Method
superman.fly()
Check if Property Exsists
superman.hasOwnProperty('city');
Loop Through Objects Properties and Methods
for(const key in superman) { console.log(key + ": " + superman[key]); }
Add Properties
superman.city = 'Metropolis';
Change Property
superman['real name'] = 'Kal-El';
Remove Property
delete superman.fly
Access Value in a Nested Object
jla.wonderWoman.realName
Default Values For Parameters
function greet({greeting='Hello',name,age=18}) { return `${greeting}! My name is ${name} and I am ${age} years old.`; }
The DOM
Navigate the DOM Tree
parentNode() , previousSibling() , nextSibling() , childNodes(), children()
Getting an Element by ID
const h1 = document.getElementById('title');
Get Element by Tag Name
const listItems = document.getElementsByTagName('li');
Get Element by Class Name
const heroes = document.getElementsByClassName('hero');
Query Selector
document.querySelector('#bats'); (You can use this instead of get getElementById
document.querySelectorAll('.hero'); (You can use this instead of getElementsByClassName
const wonderWoman = document.querySelector('li:last-child'); (You can use this to find the last item of a list
Toggle Method
wonderWoman.classList.toggle('hero'); // will remove the 'hero' class
wonderWoman.classList.toggle('sport'); // will add the 'hero' class back
Append Node
flash.appendChild(flashText);
Updating CSS
superman.style.backgroundColor = 'blue';
Hide an Element
superman.style.display = 'none';
Make Element Appear
superman.style.display = 'block';
Inner HTML
h1.innerHTML = 'Suicide Squad';
Events
Event Listeners
document.body.addEventListener("click", doSomething); This will call the function doSomething() when any of the page is clicked on.
addEventListener('click', () => alert('You Clicked!'));
Mouse Events
const clickParagraph = document.getElementById('click'); clickParagraph.addEventListener('click',() => console.log('click') ); clickParagraph.addEventListener('mousedown',() => console.log('down') ); clickParagraph.addEventListener('mouseup',() => console.log('up') );
Keyboard Events
addEventListener('keydown',highlight);
addEventListener('keyup', (event) => console.log(`You stopped pressing the key on ${new Date}`));
addEventListener('keypress', (event) => console.log(`You pressed the ${event.key} character`));