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'