Chapter: 1

Introduction

Welcome to JavaScript!

Have you ever visited a website that made you think…"Wow, this website is really cool and interactive"? Well, JavaScript was probably making it happen.

JavaScript is one of the most popular programming languages. It’s used to make websites dynamic and interactive. You can also use JavaScript to create mobile apps, games, process data, and much more! In this course, you’ll learn to use JavaScript to make websites cool and interactive. contentImage

Welcome to JavaScript!

Which is the correct statement?

a markup language

a web browser

one of the most popular programming languages in the world

Ready. Set. JavaScript!

Let’s start by adding some JavaScript to an HTML document.
To include JavaScript code in an HTML document you need to enclose the code in <script> tags.
HTML code is used to structure the content of web pages and it’s based on tags. You may want to learn some HTML basics if you haven’t done so already before starting your JavaScript journey.

Open the code below. You’ll fully understand this code by the end of this lesson. For now, press run to see what a web browser will display.

<html>
<body>
<h1>Adding Interactions with JavaScript</h1>
<p>Making an interactive button to show an alert box with a text</p>
<button onclick="MyCustomFunction()">Click me</button>
<script>
function MyCustomFunction(){
alert("Welcome to JavaScript!");
}
</script>
</body>
</html>

HTML

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code.

Ready. Set. JavaScript!

What tag do you need to use to enclose the JavaScript code?

style

script

body

code

onclick event

Let's take a look at our code again.
The "Click me!" button is created using the <button> tag in HTML. To make it interactive with JavaScript, we use the onclick event to trigger a set of instructions when the button is clicked.
In this case, when we click on the button, a piece of code or series of instructions that we named MyCustomFunction is called and executed to show an alarm message.

onclick event

Drag and drop to add onclick event to the button.

button

onclick

="MyFunction()">Click me</button>

JavaScript functions

A function is a piece of code that can be called throughout the program and reused as many times as you need.
In our example, we call the MyCustomFunction() with the onclick event inside the button.
The set of instructions included in the function is wrapped in <script> tags:

HTML

You'll learn more about functions and create your own in the following lessons.

JavaScript functions

Functions

are only used to perform mathematical operations

are pieces of code that can be called many times throughout the program

The alert() function

In the body of our custom function you can see the alert() message to be displayed:

HTML

alert() is a special built-in function that contains instructions for the web browser to display a message box with an "OK" button.

The alert() function

Drag and drop to generate an alert box with the given text:

alert

("Hi there!");

Lesson Takeaways

You are fantastic! Let's summarize what you’ve learned in your first lesson:

- The <script> tag lets you add JavaScript code directly to an HTML document.
- The onclick event triggers actions when a user clicks on an element.
- JavaScript functions are pieces of code that can be called and reused throughout the program. You can define your own functions.
- The alert() special built-in function generates an alert message with an "OK" button.

In the next lesson you’ll learn other ways to display messages to users and how to add other interactions to your web sites.

Lesson Takeaways

Complete the <script> tag to output "I've completed Lesson 1!"

alert

("I've completed Lesson 1!");

</script>

Chapter: 2

Output

Let's use JavaScript to print "Hello World" to the browser. This is what that would look like.

Notice some extra stuff there? Nothing gets past you!

Time to introduce the document.write() function. This is what we need to use to write text into our HTML document.

Feeling fancy? Of course you are! You can also use standard HTML markup language to customize the appearance text in the output:

Heads up!
document.write() should be used only for testing. We’ll cover some other output mechanisms real soon.

Output

Output "Hello!" in the browser.

document

write

("Hello!");

</script>

Output to console

Right, we’re now experts in writing HTML output with document.write().
Time for a different type of output. Let’s learn about output to the browser console.

For this we’ll be needing the trusty console.log() function.

Wait, not so fast! What’s this console we’re talking about?

The console is part of the web browser and allows you to log messages, run JavaScript code, and see errors and warnings.

It looks like this:

console.log("Hello!");

Heads Up!
Devs mostly use the console to test their JavaScript code.

Your First Program

JavaScript is fun! Let everyone know about it!

Output to console

Complete the code to output "Hi!" to the console.

("Hi!")

Practice: Your First Program

Write a program to print "JS is fun".
Note that the sentence starts with capital letters

and Comment down your answer for this.

Hint
Use console.log() function.

Remember to enclose the text into double quotes.

Chapter: 3

Variables

Variables are containers for storing data values. The value of a variable can change throughout the program.

Declaring a variable is as simple as using the keyword var. Which would look like this:

var x = 10;

In this example we’ve assigned a value of 10 to the variable x.

We’ve used the word assigned deliberately here, because in JavaScript, the equal sign (=) is actually called the "assignment" operator, rather than an "equal to" operator.

Which means that in JavaScript, x = y will assign the value of y to x variable.

Heads up!
JavaScript is sensitive, case sensitive that is. So variables like lastName and lastname are not the same.

Using Variables

Ok, let’s put some of what we’ve learned together!

How about we assign a value to a variable and output it to the browser. We’ve got this!

var x = 100;
document.write(x);

But what’s the point of variables anyway? Well, imagine your program has 1000 lines of code that include the variable x. With variables you can change the value of the variables and use them multiple times in your code:

Like this:

var x = 100;
document.write(x);

x = 42;
document.write(x);

Heads Up!
Every written "instruction" is called a statement. JavaScript statements are separated by semicolons.

Choose the correct keyword to declare a variable and assign the value of 32.

var

my_variable =

;

Naming Variables

Let’s talk about names.
It’s super important to remember that JavaScript variable names are case-sensitive.

What do you think the output of the following code would be?

var x = 100;
document.write(X);

That’s right! An error. That’s because x and X are different, and we didn't declare the X variable.

Brace yourself for more rules!
- The first character of a variable name must be a letter, underscore (_), or a dollar sign ($) (Subsequent characters can be letters, digits, underscores, or dollar signs).
- The first character of a variable name can’t be a number.
- Variable names can’t include a mathematical or logical operator in their name. For instance, 2*something or this+that;
- Variable names can’t contain spaces.
- You’re not allowed to use any special symbols, like my#num, num%, etc.

Heads up!
JavaScript is a hyphen free zone. They’re reserved for subtractions.

Chapter: 4

Comments

JavaScript Comments

Great stuff! You’ll soon be a variable master.

Ok, let’s talk about comments in JavaScript.
So we know about statements, these are the instructions within our program that get "executed" when the program runs.
But! Not all JavaScript statements are "executed".
Any code after a double slash //, or between /* and */, is treated as a comment, and will be ignored, and not executed.

To write a Single line comment we use double slashes. Like this:

// This is a single line comment
alert("This is an alert box!");

Result:

But why write code that is never going to be executed. Isn’t that a waste of time?
Not at all! Comments are a good idea, especially ones relating to large functions, as they help make our code more readable for others. So be kind, and comment!

Heads up!
alert() is used to create a message box.

JavaScript Comments

What does a single line comment look like?

// this is a comment

%%this is a comment

**this is a comment

Multiple-Line Comments

What if we have more to say?

If we want to create a multi-line comment, we write it between /*and */
Like this:

/* This code
creates an
alert box */
alert("This is an alert box!");

Heads up!
We use comments to describe and explain what the code is doing.

Multiple-Line Comments

Create a multi-line comment in JavaScript.

this is a

multiline

comment

Practice:

Chapter: 5

Data types

Data Types

The term data type refers to the types of values a program can work with. The sky's the limit with JavaScript variables, which can hold a bunch of different data types–numbers, strings, arrays, you name it.

Let's start simple though.
Numbers can be written with or without decimals. Like this:

var num = 42; // A number without decimals

var price = 55.55; // A number with decimals
document.write(price);

Heads up!
Changing this variable is a breeze, just assign to it any other data type value, like num = 'some random string'.

Data Types

Fill in the blanks to declare a variable age and assign it the number 18:

age =

;

Strings

Ok, let’s turn up the heat...
In JavaScript we can use strings to store and manipulate text.
A string can be any text wrapped in quotes. Single or double quotes, it doesn’t matter, so long as you’re consistent with them. Like this:

var name = 'John';
var text = "My name is John Smith";

What if we want to use quotes inside a string though?? No problem! You can use quotes inside a string, as long as they don't match the quotes enclosing the string itself. Take a look:

var text = "My name is 'John' ";

Heads up!
You can get double quotes inside of double quotes using the escape character like this: \" or \' inside of single quotes.

Strings

To create a string, we need to put the text inside…

<string> </string> tag

/ symbols

Quotation marks

Strings

Now is a good time to talk about the backslash (\) escape character. It comes to the rescue when you need to put quotes within strings (and a bunch of other situations) by transforming special characters into string characters.

Take a look:

var sayHello = 'Hello world! \'I am a JavaScript programmer.\' ';
document.write(sayHello);

Result:

But the escape character (\) isn’t just for quotes, it works when you need to put other special characters inside strings too! contentImage

Heads up!
If you start a string with a single quote, then you need to end it with a single quote too. This applies to double quotes. Otherwise, JavaScript will get confused. Poor JavaScript.

Strings

Which of the following is the escape character?

Booleans

Not just fun to say, Booleans in JavaScript serve a useful function by letting you have one of two values, either true or false.

So when you need a data type that can only have one of two possible values, like Yes/No, on/off or true/false, look no further than Mr Boolean. Let’s look at an example:

var isActive = true;
var isHoliday = false;

Heads up!
The Boolean value of 0 (zero), null, undefined, empty string is false.
Everything with a "real" value is true.

Practice:

Chapter: 6

Module 1 Quiz

Fill in the blanks to output "JS is cool!" to the console:

("JS is cool!");

Declare a variable called x, assign the value 42 to it and output it to the console.

var x =

;

console

.log(

);

What is the output of this code? //x=8; x=2; //x=3; console.log(x);

Rearrange to form valid JavaScript code that declares a variable and outputs it to the console.

var name = "James";

console.log(name);

</script>

Overview

Chapter: 1

Introduction

Welcome to JavaScript!

Welcome to JavaScript!

Which is the correct statement?

Ready. Set. JavaScript!

Ready. Set. JavaScript!

What tag do you need to use to enclose the JavaScript code?

onclick event

onclick event

Drag and drop to add onclick event to the button.

JavaScript functions

JavaScript functions

Functions

The alert() function

The alert() function

Drag and drop to generate an alert box with the given text:

Lesson Takeaways

Lesson Takeaways

Complete the <script> tag to output "I've completed Lesson 1!"

Chapter: 2

Output

Output

Output

Output "Hello!" in the browser.

Output to console

Your First Program

Output to console

Complete the code to output "Hi!" to the console.

Practice: Your First Program

Chapter: 3

Variables

Variables

Using Variables

Choose the correct keyword to declare a variable and assign the value of 32.

Naming Variables

Chapter: 4

Comments

JavaScript Comments

JavaScript Comments

What does a single line comment look like?

Multiple-Line Comments

Multiple-Line Comments

Create a multi-line comment in JavaScript.

Practice:

Chapter: 5

Data types

Data Types

Data Types

Fill in the blanks to declare a variable age and assign it the number 18:

Strings

Strings

To create a string, we need to put the text inside…

Strings

Strings

Which of the following is the escape character?

Booleans

Practice:

Chapter: 6

Module 1 Quiz

Fill in the blanks to output "JS is cool!" to the console:

Declare a variable called x, assign the value 42 to it and output it to the console.

What is the output of this code? //x=8; x=2; //x=3; console.log(x);

Rearrange to form valid JavaScript code that declares a variable and outputs it to the console.

Comments

Post a Comment