Some guides you may want to refer to for more depth:
We're going to expand our basic web page template to allow you to add CSS and JavaScript to your web pages:
<!doctype html>
<title>My web page</title>
<style>
/* CSS styles in here */
body { background: #eee; }
</style>
<!-- HTML here -->
<h1>My first web page</h1>
<p>Hello world</p>
<script>
// JS in here
console.log('Hi!')
</script>
I wouldn't bother with <html>, <head> and <body> tags for quick projects (but you do need to know them for the exams).
Make sure your JavaScript is at the bottom, below any HTML you may want to add. If you do have a <body> tag, the </script> should be directly before the </body> so that the script is at the bottom of the body element.
Start by adding:
<b style="background: blue;">style to individual tags</b>
including <p style="margin: 40px; color: yellow; font-size: 50px;">multiple styles per tag</p>
and notice the required US spelling of colo(u)r
Then rip those styles out and put them in the <style> block where they rightfully belong:
<style>
b {
background: blue;
}
p {
margin: 40px;
color: yellow;
}
</style>
If you want the same styles across multiple pages, rip them out further into a style.css file, and include it in your web page with:
<link rel="stylesheet" href="/style.css">
... the style.css file shouldn't have <style> tags in it (as they're HTML tags). Note that the <link> tag is self-closing (doesn't have a matching </link>).
You can give:
individual items <div id="someName">unique IDs</div>
or multiple items <b class="big">the same</b> <b class="big">class</b>
Style these items in the style block with:
#someName { color: #ff0; } /* # for IDs */
.big { font-size: 100px; } /* . for classes */
div { background: black; } /* vs this for tag names */
In your browser, hit CTRL+SHIFT+J to open the dev tools. Take some time to explore the 'Elements' tab.
Notice that you can show dev tools in different areas by clicking the dots top-right and changing the 'Dock side'.
Head over to the 'Console' tab, or press 'Esc' to toggle the console underneath the 'Elements' tab.
Type some JS in the console. Press 'shift' when hitting enter if you need to enter multiple lines without evaluating straight away. This is the best JavaScript REPL.
Your browser creates a document object model (DOM) for your web page, to enable your JavaScript to interact with it.
Append directly to the DOM by writing document.write("<p>A new paragraph</p>") in the console a couple of times. This is very naughty so never do it again, but be aware that the exam board thinks this is perfectly fine.
Better would be to use document.body.innerHTML += '<p>A new paragraph</p>'
Even better is to do this:
let para = document.createElement('p')
para.innerHTML = 'A new paragraph'
document.body.append(para)
I guess you could document.body.innerHTML = 'Wipe out' any web page if you really want.
Use document.querySelector() to get an element from the web page to do things with. Its single parameter is the same as how you refer to elements in CSS. So an element <p id="someThing">with a unique ID</p> is selected with document.querySelector('#someThing').
Once you've got an element, you can do things with it, like this:
let el = document.querySelector('p') // gets the first <p> only
el.style.backgroundColor = 'pink' // notice the camelCase while in CSS would be background-color (kebab-case)
el.innerHTML = 'This is <b>cool</b>!'
el.remove()
document.body.append(el)
You may want to work on multiple elements at once. Use document.querySelectorAll() for that.
let things = document.querySelectorAll('.big')
things.forEach(el => {
el.style.color = 'green'
el.onclick = () => alert('Clicky!')
})
With Bun on the CLI, you've used setTimeout() and setInterval() before. These create events which are added to the event loop.
Say you have the following JavaScript which you run on the CLI with Bun:
console.log('begin')
setInterval(() => console.log('hi!'), 1_000)
console.log('end?')
Line 01 runs, logging 'begin' to the console. Line 02 then runs, but it doesn't log anything. Instead, it adds an event to the event loop. Then line 03 runs, logging 'end?' to the console. But the program doesn't end yet, because there are events in the event loop! The program only ends if the event loop is empty. In this case, the program never ends, as the setInterval() sets an event to run every second, forever.
Learn more in my interactive events guide.