JavaScript By Example

Go back...

Getting started

JavaScript makes HTML pages more dynamic and interactive! Some common use cases for JavaScript include image manipulation, form validation, and dynamic changes of content.

To start off, let's create our very first script! To do so, use the <script> HTML tag to denote a script inside your HTML file. Make sure you don't forget to close the tag with a </script> closing tag. Now, anything you write between these two tags will be interpreted by your browser as a piece of JavaScript code! You can also include external scripts in your HTML file using the src attribute. It will be demonstrated in the examples below.

To select an HTML element, you can use the JavaScript document.getElementById() method. Don't worry, this will also be demonstrated in the examples below! Now buckle up, and get ready for some JavaScript action!

JavaScript Examples
<p id="hello"></p> <script> // This script edits the HTML element with an ID of "hello", to have the text "Hello, World!" document.getElementById("hello").innerHTML = "Hello, World!"; </script>

<button onclick="doSomething()">Press me !!!!!</button>

<p id="hiddentext"></p>

<script>
// You can run JavaScript functions by clicking on an element!

function doSomething() {
document.getElementById("hiddentext").innerHTML = "Woah, you found a secret message!";
}
</script>

<button id="coolbutton">Press me !!!!!</button>

<p id="hiddentext"></p>

<script>
// You can also "listen" for when a "click" event happens
// on a certain element, and then run your scripts!

document.getElementById("coolbutton").addEventListener("click", doSomething)
// Notice the lack of (parenthesises) after the function name!

function doSomething() {
    document.getElementById("hiddentext").innerHTML = "Wow, you found another secret message!";
}
</script>

Yeah, text can act as a "button" as well!

I wish I could become RED one day...
<p onclick="changeColor()">Yeah, text can act as a "button" as well!</p>

<p id="regulartext">I wish I could become RED one day...</p>

<script>
// You can use JavaScript to change the CSS style of an element!

function changeColor() {
document.getElementById("regulartext").style.color = "red";
}
</script>

Here's something for the more adventurous.
<p>Here's something for the more adventurous.</p>

<button id="powerfulbutton">I am a very powerful button!</button>

<script>
// This script combines multiple advanced techniques into one.
// Let's break it down, step by step!

// button.addEventListener
// "Listens" for an action performed on any button

// "click",
// Filters the "listened" actions to only listen to the "click" action

// function() {}
// Just a bit of JavaScript magic, runs the code block between the {curly braces} without the need to define a new function

// document.querySelectorAll("*")
// Selects every element from the webpage

// .forEach
// Runs a piece of code on each found element

// (el => el.style.background = "MidnightBlue")
// For each element, change its background color

// And here's the full function:
document.getElementById("powerfulbutton")
.addEventListener("click", function() {     document.querySelectorAll("*").forEach(el =>
        el.style.background = "MidnightBlue")
})
</script>