Introduction to JavaScript

:dart: Learning Objectives

By the end of this lesson, you will:

• Understand what JavaScript is and why we use it
• Learn how JavaScript works with HTML and CSS
• Write your first JavaScript code
• Know three ways to add JavaScript to web pages
• Use basic JavaScript methods like console.log(), alert(), and prompt()

:information_source: Info What is JavaScript? JavaScript is a high-level programming language that makes web pages interactive. While HTML creates the structure and CSS adds style, JavaScript brings web pages to life with dynamic features!

• Interactive Logic: JavaScript adds behavior and interactivity to web pages
• Programming Language: It gives instructions to computers in a language they understand
• Team Player: JavaScript works together with HTML and CSS to create amazing web experiences
• Nickname: Developers often call it "JS" for short

The 3 Layers of a Web Page

First, let's take a look at the layers of a web page:

• HTML is the content or structure.
• CSS adds style to the structure.
• JavaScript provides the logic for a web page to be interactive.

The Languages of the 3 Layers

• HTML is a markup language to structure our web content.

• CSS is a language of style rules that applies styling to our HTML content.

• JavaScript is a programming language.

• Programming languages are used to communicate instructions to a computer.

• Programming languages can be used to control the behavior of a machine or a computer and to express algorithms.

JavaScript vs Java

Don't get confused! JavaScript and Java are two different programming languages.

• JavaScript was created to work with HTML & CSS.
• Java is a general purpose programming language for building standalone applications.
• JavaScript is also commonly known as JS in short form.

Why Use JavaScript?

HTML and CSS can design a web page, but the content of the web page is static. Which means you cannot change or move the content after you save.

But JavaScript can make a web page become interactive in many ways.

Examples of JavaScript Interactivity

Creating pop-up boxes:

Making buttons function:

When 'Turn On The Light' is clicked	When 'Turn Off The Light' is clicked

Get user input via prompt box:

Make websites that can interact with users:

Sample JavaScript Code

This is a sample code of what JavaScript looks like:

//early morning
brushTeeth();
console.log("Taking breakfast");
console.log("Online Class");

//night time before bed
brushTeeth();

function brushTeeth()\{
    console.log("Put 1cm toothpaste");
    console.log("Brush for 3 minutes");
    console.log("Rinse the mouth");
\}

Output in console:

Put 1cm toothpaste
Brush for 3 minutes
Rinse the mouth
Taking breakfast
Online Class
Put 1cm toothpaste
Brush for 3 minutes
Rinse the mouth

JavaScript in the Browser

• All modern browsers like Firefox and Chrome come with built-in JavaScript engines.

Accessing the Browser Console

• On your browser, press F12 on your keyboard to view the console.
• You can also right click on a webpage >>> select Inspect >>> choose the Console tab.

• You can actually write any JavaScript here, but if you refresh the browser, the code that you have written in the Console will disappear!
• This is because it is just to test code, you cannot save anything here.
• Write your codes in an IDE (Integrated development environment) such as Visual Studio Code to save as script files locally on your computer or use glitch.com as an online IDE in your browser.

Basic JavaScript Methods

console.log() Method

• The easiest way to say something in the console is to use the console.log() method.
• It can be useful for testing purposes.
• Type in your message inside the round brackets () with "double quotes" using the console.log() method.

console.log("Hello World!");

alert() Method

• When you need your user's attention, you can show a pop up box using the alert() method.
• Type in your message inside the round brackets () with "double quotes" using the alert() method.

alert("Welcome to our website!");

prompt() Method

• When you need your users to enter information, you can use the prompt() method to show a pop up box asking for information such as their name.
• Type in your prompt message inside the round brackets () with "double quotes" using the prompt() method.

prompt("What is your name?");

Three Ways to Write JavaScript

Similar to CSS, there are three different ways to write JavaScript:

One. External JavaScript (Recommended)

• This is the most common way of adding JavaScript.
• Create a "script.js" file in your project folder.
• Then add the script to HTML by writing <script src="script.js"></script> inside the <body> section before the </body> closing tag so that the page content can be interactive.

<body>
    <!-- ... all your HTML contents -->
    <script src="script.js"></script>
</body>

2. Internal JavaScript

• You can also write your codes directly inside the HTML within the <script> tag.

<head>
    <script type="text/javascript">
        //JS code write here
    </script>
</head>

• But usually we don't write our scripts internally. We should keep our JavaScript code separate from our HTML code.
• The internal way of <script> in <head> section will be used commonly to import JS libraries, or provide functions that have nothing to do with the HTML elements.

3. Inline JavaScript

• A common example of using an inline JavaScript would be the onclick event to run a JavaScript code when an element is clicked.
• The onclick event is a HTML attribute that can run JavaScript code:

<element onclick="script">

• This is how the inline JavaScript looks like using the onclick event attribute on a button:

<body>
    <button onclick="alert('hello');">
        Submit
    </button>
</body>

When the "Submit" button is clicked, the alert('hello') script runs.

Writing Comments in JavaScript

• There are 2 ways of writing comments. Single line and multi-line comments.
• Single line comments start with two forward slashes //.

// This is a comment

Key Concepts Summary

• JavaScript is a programming language that adds interactivity to web pages
• JavaScript works alongside HTML (structure) and CSS (style) to create complete web experiences
• JavaScript can create pop-ups, handle user input, and make websites interactive
• The browser console (F12) allows you to test JavaScript code quickly
• External JavaScript files (.js) are the recommended way to include JavaScript in web pages
• Basic JavaScript methods include console.log(), alert(), and prompt()
• Comments in JavaScript start with // for single-line comments