HTML - JavaScript: A Beginner's Guide

Hello there, aspiring web developers! I'm thrilled to be your guide on this exciting journey into the world of HTML and JavaScript. As someone who's been teaching programming for over a decade, I can assure you that you're in for a treat. Let's dive in and unravel the mysteries of web development together!

HTML - Javascript

What is JavaScript?

Before we jump into the nitty-gritty, let's understand what JavaScript is. JavaScript is a powerful programming language that brings life to web pages. It's like the magic wand of the internet, making static HTML pages dance, interact, and respond to user actions.

Imagine a website as a house. HTML is the structure - the walls, roof, and foundation. CSS is the paint and decorations. JavaScript? Well, that's the electricity, plumbing, and all the cool gadgets that make the house functional and interactive!

Syntax

JavaScript has its own set of rules, just like any language. Let's break down the basics:

Variables

Variables are like containers that hold information. Here's how you declare them:

let myName = "Alice";
const myAge = 25;
var myHobby = "coding";

In this example:

let is used for variables that can change.
const is for variables that won't change.
var is an older way to declare variables, but let and const are preferred now.

Functions

Functions are reusable blocks of code. They're like recipes for your program:

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("Bob"); // Outputs: Hello, Bob!

This function takes a name as input and prints a greeting. It's like a friendly robot that says hello to anyone you introduce it to!

Conditional Statements

These help your code make decisions:

let temperature = 22;

if (temperature > 30) {
    console.log("It's hot outside!");
} else if (temperature > 20) {
    console.log("It's a nice day!");
} else {
    console.log("It's a bit chilly.");
}

This code checks the temperature and gives different messages based on how warm it is. It's like teaching your computer to be a weather commentator!

Examples of JavaScript in HTML

Now, let's see how we can use JavaScript within our HTML pages. There are three main ways to do this:

1. Inline JavaScript

This is like whispering a quick instruction:

<button onclick="alert('Hello!')">Click me</button>

When you click this button, it'll show a pop-up saying "Hello!". It's quick and easy, but not great for larger scripts.

2. Internal JavaScript

This is like giving your HTML page a brain of its own:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script>
        function changeColor() {
            document.body.style.backgroundColor = "lightblue";
        }
    </script>
</head>
<body>
    <button onclick="changeColor()">Change Color</button>
</body>
</html>

This script changes the page background to light blue when you click the button. It's like giving your webpage a chameleon ability!

3. External JavaScript

This is like giving your webpage a separate brain that it can refer to:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script src="myscript.js"></script>
</head>
<body>
    <button onclick="greet()">Say Hello</button>
</body>
</html>

And in myscript.js:

function greet() {
    alert("Hello from an external file!");
}

This keeps your HTML clean and your JavaScript organized. It's like keeping your tools in a toolbox instead of scattered around the house.

HTML

Sometimes, JavaScript might not be available or enabled in a user's browser. That's where the <noscript> element comes in handy:

<script>
    document.write("Hello, JavaScript is working!");
</script>
<noscript>
    <p>Oh no! Your browser doesn't support JavaScript or it's turned off.</p>
</noscript>

This is like having a backup plan. If JavaScript is working, users see the first message. If not, they see the second one. It's always good to be prepared!

JavaScript Methods Table

Let's look at some common JavaScript methods you'll often use:

Method	Description	Example
`alert()`	Shows a pop-up message	`alert("Hello, World!");`
`console.log()`	Prints to the browser console	`console.log("This is a log");`
`document.getElementById()`	Finds an HTML element by its ID	`let elem = document.getElementById("myDiv");`
`addEventListener()`	Attaches an event handler to an element	`button.addEventListener("click", function() { alert("Clicked!"); });`
`setTimeout()`	Executes a function after a delay	`setTimeout(function() { console.log("Delayed message"); }, 2000);`

These methods are like the Swiss Army knives of JavaScript - versatile and incredibly useful!

Conclusion

Congratulations! You've taken your first steps into the world of HTML and JavaScript. Remember, learning to code is like learning to ride a bike - it might seem wobbly at first, but with practice, you'll be zooming along in no time.

Don't be afraid to experiment, make mistakes, and learn from them. That's how all great programmers started! Keep coding, keep learning, and most importantly, have fun with it. Before you know it, you'll be building amazing websites and web applications.

Happy coding, future web wizards! ??‍??‍?

Credits: Image by storyset

Previous Tutorial:

HTML - Adding Favicon

Next Tutorial:

HTML - Layouts