Javascript was created in 1995 by Brendan Eich while working at Netscape. It was originally called Mocha, then LiveScript, and finally Javascript. The name Javascript was chosen to capitalize on the popularity of Java at the time, even though the two languages are not related.
It was created to make web pages more interactive. It is an interpreted language, meaning it is executed line by line. And it is a client-side language, meaning it runs on the user's computer, not the server.
There are a few ways to run Javascript:
Try running this code in the browser's inspector:
alert('Hello, World!')
console.log('Hello, World!')
Javascript is a loosely typed language, meaning you don't have to declare the type of a variable when you create it. You can also change the type of a variable after it has been created.
Historically, Javascript used the var keyword to declare variables. This is now deprecated, and you should use const and let instead.
var x = 5
let y = 'Hello, World!'
const z = [1, 2, 3]
const a = { name: 'Foo', age: 30 }
let is similar to var, but it is block-scoped. const is similar to let, but the value cannot be changed after it is set.
I recommend using const whenever possible, and only using let when you need to change the value of a variable.
Javascript has several operators for performing arithmetic, comparison, and logical operations. These are similar to other programming languages (e.g., + for addition, - for subtraction, * for multiplication, etc.).
One quirk of Javascript is the == operator, which performs type coercion before comparing two values. This can lead to unexpected results, so it is recommended to always use the === operator, which compares both the value and the type of the two values.
Javascript has several ways to control the flow of your code, including if statements, switch, while, and for loops. These are also similiar to most other programming languages.
There are several ways to loop over arrays in Javascript, including the traditional for loop, the for...in loop, and the for...of loop.
I recommend using the for...of loop whenever possible, as it is the most concise and readable way to loop over an array and also NodeList, which is a collection of DOM elements (more on that down below).
const numbers = [1, 2, 3, 4, 5]
// Traditional for loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i])
}
// For...in loop
for (let i in numbers) {
console.log(numbers[i])
}
// For...of loop
for (let number of numbers) {
console.log(number)
}
Functions are blocks of code that can be reused throughout your program. They can take arguments and return values. They are also first-class citizens in Javascript, meaning they can be assigned to variables, passed as arguments to other functions, and returned from other functions.
There are several ways to define functions in Javascript, including function declarations, function expressions, and arrow functions. I recommend using arrow functions whenever possible, as they are the most concise and readable way to define functions.
// Function declaration
function add(a, b) {
return a + b
}
// Function expression
const subtract = function(a, b) {
return a - b
}
// Arrow function
const multiply = (a, b) => a * b
Methods are functions that are attached to objects. They can be called using dot notation, like this:
const person = {
name: 'Foo',
age: 30,
greet: function() {
console.log('Hello, my name is ' + this.name)
}
}
person.greet()
A lot of built-in Javascript functions are actually methods of objects, like document.querySelector() and console.log().
The DOM, or Document Object Model, is a representation of the HTML document that can be manipulated using Javascript. We typically access elements in the DOM using the document.querySelector() and document.querySelectorAll() methods, but there are other ways to access elements as well.
document.querySelector()document.querySelectorAll()document.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.getElementsByName()$0Note that document.querySelectorAll() returns a NodeList, which is an array-like object that can be looped over using the for...of loop.
Once we have accessed an element in the DOM, we can manipulate it in several ways:
element.src = 'new-image.jpg'element.style.backgroundColor = 'red'element.innerHTML = 'new content'element.innerText = 'new content'document.createElement('div')parentElement.appendChild(newElement)element.remove()There are many other ways to manipulate the DOM, but these are the most common.
Events are actions that occur on a webpage, like clicking a button, hovering over an element, or submitting a form. We can listen for these events using the addEventListener() method, or by using event attributes like onclick, onmouseover, onchange, etc. The addEventListener() method is the preferred way to add event listeners in modern Javascript.
Here is an example of adding an event listener to a button (using the arrow function syntax):
const button = document.querySelector('button')
button.addEventListener('click', () => {
alert('Button clicked!')
})
There are many other events you can listen for, like mouseover, mouseout, change, submit, etc. You can find a full list of events on the MDN Web Docs.
Each event also has an event object associated with it, which contains information about the event, like the target element, the type of event, and any data associated with the event. These properties change depending on the event, so it's a good idea to console.log the event object to see what properties are available, or just reference the MDN docs.
Will be posted next class since they are the solutions to your labs.