Vanilla JS I
WTF is ""Vanilla"" JS?
You will often hear the term ""vanilla"" in web development. It just means regular without anything added to it.
linking javascript in html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS LINK -->
<link rel="stylesheet" href="./PATH_TO_CSS_FILE">
<!-- JS LINK -->
<script src="./PATH_TO_JS_FILE"></script>
<title>Super Sweet Website</title>
</head>
<body>
<!-- HTML GOES HERE -->
</body>
</html>OR THE BETTER OPTION
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS LINK -->
<link rel="stylesheet" href="./PATH_TO_CSS_FILE">
<!-- JS LINK -->
<title>Super Sweet Website</title>
</head>
<body>
<!-- HTML GOES HERE -->
<script src="./PATH_TO_JS_FILE"></script>
</body>
</html>DOM
Document object model. The interface for our html. represented as a group of nodes. can be displayed as the rendered html or the html source. javascript will use this to access our elements.
window object
There is a globally accessible object called window. this is where your javascript is loaded in the browser.
document object
A step down from the window object is the document object. this is a representation of what has been rendered to the dom.
.getelementbyId('id-name')
used to select element with a specific ID in the html
const submitBtn = document.getElementById('submit').getElementsByTagName('tagname')
used to select all elements of the same tag. returns an array-like list
const buttons = document.getElementsByTagName('button').style
used to add styling to a specific element
const box = document.getElementById('box')
box.style.background = "bada55" //sets the background color.classname
used to get or set a class name
const box = document.getElementById('box')
box.className // box
box.className = 'square'
box.className // square.classlist
used to get all clases. It also adds or removes a class name
const box = document.getElementById('box')
box.classList // box
box.classList.add('square')
box.classList // box, square
box.classList.remove('square')
box.classList // box.innertext
used to add text inside of an element
const box = document.getElementById('box')
box.innerText = 'Hello, world'.innerHTML
used to manipulate HTML inside of an element
const box = document.getElementById('box')
box.innerHTML = <p> + 'Hello, world' + </p>.value
used to get the value of an input
const userInput = document.getElementById('input')
const userInputValue = userInput.value
userInputValue = 'yo dude'vanilla-js
By bryansmith33
vanilla-js
- 499
