JS Essentials 1
Very simple steps for beginners
1. Get an element and put it in a variable
First, we find an HTML element and store it in a variable.
This is one of the most important ideas in JavaScript.
let title = document.getElementById("title")
Live Demo
2. Change innerText
After we find an element, we can change what it says.
let title = document.getElementById("title")
title.innerText = "Welcome to RBS Code!"
Live Demo
3. Make a function
A function is a group of instructions. We can run it later.
let title = document.getElementById("title")
function changeTitle() {
title.innerText = "You ran the function!"
}
Live Demo
4. onclick
This is the easiest way to make a button do something when clicked.
let message = document.getElementById("message")
function sayHello() {
message.innerText = "Hello!"
}
Live Demo
5. Change style
JavaScript can also change how things look.
let box = document.getElementById("box")
function makeBoxBlue() {
box.style.backgroundColor = "blue"
}
Live Demo
6. if / else
if / else helps the computer make a choice.
let box = document.getElementById("box")
function changeColor() {
if (box.style.backgroundColor === "red") {
box.style.backgroundColor = "green"
} else {
box.style.backgroundColor = "red"
}
}
Live Demo
7. A number variable
Variables can store numbers too. Here we use a score variable.
let scoreText = document.getElementById("scoreText")
let score = 0
function addPoint() {
score = score + 1
scoreText.innerText = score
}
Live Demo
8. Random number
JavaScript can make random numbers.
let result = document.getElementById("result")
function getRandomNumber() {
let randomNumber = Math.floor(Math.random() * 10)
result.innerText = randomNumber
}
Live Demo
9. addEventListener with a named function
This is a cleaner way to connect a click to a function.
let button = document.getElementById("button")
let text = document.getElementById("text")
button.addEventListener("click", changeText)
function changeText() {
text.innerText = "Nice work!"
}
Live Demo
10. keydown
We can listen for keyboard presses too.
let text = document.getElementById("text")
document.addEventListener("keydown", showKey)
function showKey(event) {
text.innerText = event.key
}
Live Demo
11. keyup
keyup happens when you let go of a key.
let text = document.getElementById("text")
document.addEventListener("keyup", keyWasReleased)
function keyWasReleased(event) {
text.innerText = "You released: " + event.key
}
Live Demo
12. Move right and left with style.left
Now we use a number variable to move a box.
let player = document.getElementById("player")
let x = 100
document.addEventListener("keydown", movePlayer)
function movePlayer(event) {
if (event.key === "ArrowRight") {
x = x + 10
}
if (event.key === "ArrowLeft") {
x = x - 10
}
player.style.left = x + "px"
}
Live Demo
13. Move up and down with style.top
We can also store a y position and move up and down.
let player = document.getElementById("player")
let x = 100
let y = 50
document.addEventListener("keydown", movePlayer)
function movePlayer(event) {
if (event.key === "ArrowRight") {
x = x + 10
}
if (event.key === "ArrowLeft") {
x = x - 10
}
if (event.key === "ArrowDown") {
y = y + 10
}
if (event.key === "ArrowUp") {
y = y - 10
}
player.style.left = x + "px"
player.style.top = y + "px"
}
Live Demo