if / else if / else
JavaScript
if (condition) {
// Runs this block if condition is truthy
} else {
// Runs this block if condition is falsey
}
if (light is red) {
stop walking
} else {
continue walking
}
if (light is green) {
// Walk
} else if (no cars around) {
// Walk
} else {
// Stop
}querySelector
JavaScript
<div id="master-yoda">Yoda</div>
<div class="class-of-assassins">Assassin</div>
<p>The three little pigs</p>
<div data-type="rocket">🚀</div>
document.querySelector('#master-yoda')
// => <div id="master-yoda">Yoda</div>
document.querySelector('.class-of-assassins')
// => <div class="class-of-assassins">Assassin</div>
document.querySelector('p')
// => <p>The three little pigs</p>
document.querySelector('[data-type="rocket"]')
// => <div data-type="rocket">🚀</div>add – remove – contain – toggle
JavaScript
Element.classList.add('firstClass', 'secondClass', 'thirdClass')
Element.classList.remove('firstClass', 'secondClass', 'thirdClass')
Element.classList.contains('className')
element.classList.toggle('red')
// toggle if - else
if (element.classList.contains('red')) {
element.classList.remove('red')
} else {
element.classList.add('red')
}Event listeners
JavaScript
Element.addEventListener('event-name', function () {})
// Listening for a click
const button = document.querySelector('button')
button.addEventListener('click', function () {
// Do something here
})