WD 101: Web

Development &
Application

JavaScript Basics
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called

statements.

A JavaScript program is a list of programming statements.

Semicolons ;
Example:
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement.

When separated by semicolons, multiple statements on one line are allowed:

a = 5; b = 6; c = a + b;
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to
make it more readable.

The following lines are equivalent:

let person = "Hege";
let person="Hege";

A good practice is to put spaces around operators ( = + - * / ):

let x = y + z;
JavaScript Line Length and Line
Breaks
For best readability, programmers often like to avoid code lines longer than 80
characters.

If a JavaScript statement does not fit on one line, the best place to break it
is after an operator:
document.getElementById("demo").innerHTML =
"Hello Dolly!";
JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.

The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, is in JavaScript
functions:
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}

RESET
JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
// How to create variables:
var x;
let y;

// How to use variables:

x = 5;
y = 6;
let z = x + y;
JavaScript Values
The JavaScript syntax defines two types of values:
• Fixed values - Literals
• Variable values – Variables

JavaScript Literals
let name = "Alice"; // "Alice" is a string literal
let age = 25; // 25 is a number literal
let isActive = true; // true is a boolean literal

JavaScript Variables
let name = "Alice"; // 'name' is a variable storing a string literal
let age = 25; // 'age' is a variable storing a number literal
let isActive = true; // 'isActive' is a variable storing a boolean literal
JavaScript Arithmetic
Operators
Given that y = 5, the following table explains the arithmetic
operators.
Operator Description Example Result
+ Addition x = y + 2 x = 7
- Subtraction x = y – 2 x = 3
* Multiplication x = y * 2 x = 10
/ Division x = y / 2 x = 2.5
% Modulus x = y % 2 x = 1
++ Increment x = ++y / x = y++ x = 6
-- Decrement x = --y / x = y-- x = 4
JavaScript Assignment
Operators
Given that x = 10 and y = 5, the following table explains the
assignment operators
Operator Example Same As Result
= x = y x = 5
+= x += y x = x + y x = 15
-= x -= y x = x – y x = 5
*= x *= y x = x * y x = 50
/= x /=y x = x / y x = 2
% x %= y x = x % y x = 0
The + Operator
The + operator Used on Strings
The + operator also can be used to concatenate string variables or text values
together. To concatenate two or more string variables together, use the +
operator:
txt1 = "What a very";
txt2 = "nice day";
txt3 = txt1 + txt2;
txt3 = ?

Adding Strings and Numbers

If you add a number and a string, the result will be a string.

x = '5' + 5;
x = ?
x = '55';
JavaScript Comments
Single Line Comments:
//This is a comment

Multi Line Comments:

/*
This
is
a
comment
*/
JavaScript Variables
Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

Automatically
Using var
Using let
Using const

Example:
x = 5; var x = 5; let x = 5; const x = 5;
y = 6; var y = 6; let y = 6; const y = 6;
z = x + y; var z = x + let z = x + const z = x + y;
y; y;
JavaScript Variables
Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

Automatically
Using var
Using let
Using const

Example:
x = 5; var x = 5; let x = 5; const x = 5;
y = 6; var y = 6; let y = 6; const y = 6;
z = x + y; var z = x + let z = x + const z = x + y;
y; y;
JavaScript Variables
When to Use var, let, or const?

1. Always declare variables

2. Always use const if the value should not be changed
3. Always use const if the type should not be changed (Arrays and Objects)
4. Only use let if you can't use const
5. Only use var if you MUST support old browsers.
JavaScript Data Types
JavaScript has 8 Datatypes:
• String - let x = "String“;
• Number - let x = 10;
• Bigint - let x = 1234567890123456789n;
• Boolean - let x = true;
• Undefined - let x;
• Null - let x = null;
• Symbol - let x = Symbol('id');
• Object - let x = {};
typeof Operator
The typeof operator returns the data type of a JavaScript variable.

let x = 5;
let y = "5";
document.write("Type of X: " + typeof(x) + //returns number
"<br>Type of Y: " + typeof(y); //returns string
Template Strings
Instead of using single quote (') or double quote ("), templates uses
backticks (`).

It also allows single or double quotes inside templates:

let text = `He's often called "Johnny"`;

It also allows multi line strings:

let text = `He’s

often
called
"Johnny"`;
Template Strings
Interpolation - Template String provide an easy way to interpolate
variables and expressions into strings.

The method is called string interpolation.

The syntax is: ${...}

For example:

document.write(`5+10 = ${5+10}<br>`);

let x = 5;
let y = 10;
document.write(`5+10 = ${x+y}`);
Escape Characters
Because strings must be written within quotes, JavaScript will
misunderstand this string:

let text = "We are the so-called "Vikings" from the north.";
document.write(text);

This code will result to an error or be chopped.

To avoid this, we will use backslash escape characher (\):

let text = "We are the so-called \"Vikings\" from the north.";
document.write(text);
JavaScript Comparison Operators
Given that x = 5, the following table explains the comparison operators
Operator Description Example
== is equal to value x == 8 is false
=== is equal to value and type x === 5 is true
x === "5" is false
!= it not equal x != 8 is true
!== is not equal to value or type x !== "5" is true
x !== 5 is false
x !== 8 true
> is greater than x > 8 is false
< is less than x < 8 is true
>= is greater than or equal to x >= 8 is false
<= is less than or equal to x <= 8 is true
? ternary operator x
Conditional Statements
In JavaScript we have the following conditional statements:

• Use if to specify a block of code to be executed, if a specified

condition is true
• Use else to specify a block of code to be executed, if the same
condition is false
• Use else if to specify a new condition to test, if the first condition
is false
• Use switch to specify many alternative blocks of code to be executed
Conditional Statements
The if Statement
Use the if statement to specify a block of JavaScript
code to be executed if a condition is true.

Syntax:
if (condition) {
// block of code to be executed if the condition is true
}

Example:
if (x == 5) {
alert("x is equal to 5");
}
Conditional Statements
The else Statement
Use the else statement to specify a block of code to be executed if the
condition is false.

Syntax:
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Example:
if (x == 5) {
alert("x is equal to 5");
}else {
alert("x is not equal to 5");
}
Conditional Statements
The else if Statement
Use the else if statement to specify a new condition if the first condition is
false.

Syntax:
if (condition) {
// block of code to be executed if the condition is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
}else {
// block of code to be executed if the condition is false
}

Example:
if (x >= 1) {
alert("x is greater than or equal to 1");
}else if (x <= 5) {
alert("x is lesser than or equal to 5");
}else {
alert("x is either lesser than 1 or greater than 5");
}
The ternary Operator
It is a shorthand for an if-else statement that allows you to execute one of two
expressions based on a condition. It is also known as the conditional operator.

Syntax:
condition ? expressionIfTrue : expressionIfFalse;

Example:

let x = 5;
let result = (x === 5) ? "is 5" : "is not 5";
document.write(result);
The Switch Statement
The switch statement is used to perform different actions
based on different conditions.

Syntax:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
The Switch Statement
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
JavaScript Logical Operators
Given that x = 5, the following table explains the comparison operators
Operator Description
&& logical and
|| logical or
! logical not
JavaScript Logical Operators
The most common use of Logical Operators in any programming language is
used to combine conditions.

Example:
let x = 5;
if(x >=1 && x<=3){
document.write("x value is between 1 – 3");
}else if(x >=4 && x<=6){
document.write("x value is between 4 – 6");
}else{
document.write("x value is not within the set intervals!");
}
Exercise:
Write a script that accepts a student's grade (0–100 can be constant)
and outputs a message based on the grade. Use the following grading
criteria:

Hint!
let grade = Number(prompt());
let message;
document.write(message);