Today
- welcome to JavaScript
- using JavaScript
JavaScript
What is it?
JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)
Let's use what we know to learn JavaScript
Examples of variables
const x = 5
const firstName = "Mark"
let dayOfWeek = "Monday"
let numberOfCupsOfCoffee = 1
// do not do this
var greeting = "hello"
Types
const x = 5;
const lastName = "Dewey";
const hasCoffee = true;
const firstLetter = "M";
Types (Sorta)
let name = "Janus"
name = "Jupiter"
name = 435
arrays (no lists)
const myFavoriteThings = []
// add
myFavoriteThings.push('Raindrops on roses')
myFavoriteThings.push('whiskers on kittens')
// add and update
myFavoriteThings[5] = 'Bright copper kettles'
// delete
myFavoriteThings.splice(5,1);
Classes
class Cat {
speak () {
if (this.happiness > 5) {
return 'purrrrr'
} else if (this.happiness >= 0) {
return this.name + ' goes meoow'
} else {
return 'hiss'
}
}
chase () {
this.happiness -= 3
}
eat () {
this.happiness++
}
pet (location) {
if (location === 'behind ears') {
this.happiness += 2
} else if (location === 'mouth') {
this.happiness -= 1
} else if (location === 'butt') {
this.happiness += 3
}
}
}
Functions
Text
// use this
const sayHello = (name) => {
console.log("hello, " + name)
}
// not this
function sayHello (name) {
console.log("hello, " + name)
}
Let's run some JavaScript!
But the web!
DOM
Document Object Model
Events
In general, we listen for certain events to fire (click, hover, focus) and we can run chunks of code.
Interaction with the DOM
document.querySelector()
const h1 = document.querySelector("h1")
const nav = document.querySelector("nav")
const profileImage = document.querySelector(".profile-image")
const userName = document.querySelector("#username")
Stop. Example time.
JavaScript in the browser.
Intro to JavaScript
By Mark Dewey
Intro to JavaScript
- 250