JavaScript is one of the most popular programming languages that is used both on the client-side and server-side to make web pages more interactive. When writing programs in JavaScript, they are named “Scripts”. When we talk about web pages you can say:
- HTML is the noun or skeleton of a webpage
- CSS is the adjective i.e., adds skin to HTML skeleton
- JavaScript is the verb i.e., brings HTML to action
JavaScript is used for:
- For interactivity in web pages
- Creating mobile and web applications using React, React native, Vue, Angular, Node.Js
- For developing server applications and building web servers using Node.Js
- For Game development
Why you should learn JavaScript?
- JavaScript is one of the 3 languages (HTML/CSS/JS) all web developers must learn. It is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously.
- These days web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript now. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.
How to add JavaScript in Html Document?
Internal JavaScript
In HTML Document, JavaScript code is added between <script>
and </script>
tags.
- HTML Document can contain any number of scripts.
Scripts can be placed in <head>
or <body>
or in both
Example
<script> function tempFunction() { document.getElementById("temp").innerHTML = "Welcome to Interns School"; } </script>
External JavaScript
You can also write JavaScript code in a separate .js file(JavaScript File).
- In the js file, code is not written within <script> tags.
- External js file can be added to HTML Document by putting the name of the script file in the src (source) attribute of a <script> tag:
- More than one js file can be added to a document by adding multiple script tags containing the js file’s reference.
External script reference can be placed in <head> or <body>
Syntax of JavaScript
JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script>
HTML tags in a web page. You can place the <script>
tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head>
tags.
The <script>
tag alerts the browser program to start interpreting all the text between these tags as a script. A simple syntax of your JavaScript will appear as follows.
<script ...> JavaScript code </script>
The script tag takes two important attributes:
- Language − This attribute specifies what scripting language you are using. Typically, its value will be javascript.
- Type − This attribute is what is now recommended to indicate the scripting language in use and its value should be set to “text/javascript”.
So your JavaScript segment will look like:
<script language="javascript" type="text/javascript"> JavaScript code </script>
Set of Rule for JavaScript
Set of rules to define how JavaScript programs are constructed.
Whitespaces
Spaces and line breaks can be added as you want to define clearance and indentation in your code. Whitespaces are not meaningful in JavaScript.
Case Sensitive
JavaScript variable names are case sensitive. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
So the identifiers variable_name and Variable_name will convey different meanings in JavaScript.
Similarly, variable color and Color are two different variables.
Identifiers
An identifier is a name used to identify variables, keywords, functions, labels, and objects.
In JavaScript, the first letter of identifiers can be a letter, or an underscore (_), or a dollar sign ($).
Note: Numbers cannot be the first letter
Examples:
Temp $temp _temp temp TEMP tem$p temp2
Comments
Comments are used to explain code, and to make it more readable.
There are 2 ways you can comment out in JavaScript:
1. Single Line Comments: Single line comments start with //. Any text between // and the end of the line will be ignored by JavaScript (will not be executed). This example below uses a single-line comment before each code line:
2. Multi-line Comments: Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript. This example below uses a multi-line comment (a comment block) to explain the code:
Example:
// Single line comment /* It is used to comment More than 1 line. */
Semicolons
Ending lines with Semicolons is optional in JavaScript. They are by default added by JavaScript interpreter.
JavaScript Values
In JavaScript, there are two types of values:
- Literals
- Variables
Literals
Fixed values that are provided in source code are called literals and have types like numbers, strings, object or array literals, etc.
10.50 (Numbers or decimals) “John” or ‘john’ (Strings) true (boolean) {Box shadow: 'red', box-shape: 'Rectangle'} (Object-properties) let colors= ['Red', ‘Green']; (Arrays)
Variables
Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Before you use a variable in a JavaScript program, you must declare it.
Variables are declared with the var, let and const keywords as follows:
<script type = "text/javascript"> var y = 6; let x = 6; const z = 6; </script>
You can also declare multiple variables with the same keyword as follows:
<script type = "text/javascript"> var money, name; let x, y; </script>
Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation or at a later point in time when you need that variable.
For instance, you might create a variable named money and assign the value 2000.50 to it later. For another variable, you can assign a value at the time of initialization as follows.
<script type = "text/javascript"> <!-- var name = "Ali"; var money; money = 2000.50; //--> </script>
Note: Use the var keyword only for declaration or initialization, once for the life of any variable name in a document. You should not re-declare same variable twice.
The table below will show the difference between the different variable declaration types:
var | let | const |
Can be redeclared | Cannot be redeclared | Cannot be redeclared |
Can be initialized later | Can be initialized later | Must be initialized at the time of declaration |
Don’t have Block Scope | Have Block Scope | Have Block Scope |
Value can be reassigned | Value can be reassigned | Value cannot be reassigned but can be changed |
Example | ||
var y = 6; | let x = 6; | const z = 6; |
Example:
// How to create variables:
var x;
let y;
// How to use variables:
x = 1;
y = 2;
let z = x + y;
Types
JavaScript variables don’t have any specific type associated with them i.e. a single variable can hold numeric and string data types depending on the value assigned to it.
There are 2 main kinds of types JavaScript:
- Primitive types
- Object Type
Primitive Types
Primitive Types are:
Boolean
Booleans can have 2 values: true
and false
null
A special keyword denoting a null value.
Note: null is not the same as NULL or any other variant as JavaScript is a case-sensitive language
undefined
In JavaScript, a variable whose value is not defined is called as undefined (value and type both are undefined).
Example:
let a; a = undefined;
Note: As shown above the value of a variable can be set to undefined, it will empty the variable.
Empty
Empty values are not related to undefined. An empty string has both a legal value and a type.
Example:
let fruit= ""; // The value is "", the type is "string"
Number
An Integer or decimal number.
Example:
let a= 4.5; let length = 16;
BigInt
An integer with arbitrary precision. (e.g. 9007199254740992n)
Example:
const bigValue = BigInt(9007199254740991)
String
A series of characters representing a text value.
Example:
let a = “John”
Object Types
In JavaScript, objects are written with curly braces {}.
Object properties are written as name: value pairs, separated by commas.
Example:
const Employee= {Name:"John", Salary:10,000, age:50, eyeColor:"blue"};
Output
JavaScript can “display” data in different ways:
- Writing into an HTML element, using
innerHTML
. - Writing into the HTML output using
document.write()
. - Writing into an alert box, using
window.alert()
. - Writing into the browser console, using
console.log()
.
Expressions
An expression is a combination of values, variables, and operators that JavaScript engine can evaluate and return value. Computation of expression is called evaluation.
Primary Expressions
Example:
- 0.02
- ‘something’
- false
- this
- undefined
- j
Arithmetic Expressions
Those expressions that evaluate to a number.
Example:
- 5 / 2
- j–
- i += 2
- a * 4
Logical expressions
Expressions that involve logical operators and evaluate to a boolean value.
Example:
- z && y
- a || b
- !x
String Expressions
Expressions that involve Strings along with operators and evaluate to a string value.
Example:
let a = 'I’ + ‘am' + 'John'
Operators
Operators are used to combine two or more expressions, generally converting them to complex expressions.
Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript supports the following types of operators.
- Assignment Operators
- Arithmetic Operators
- Comparison Operators
- Logical (or Relational) Operators
- String Operator
- Conditional (or ternary) Operators
We will discuss these types of operators one by one:
Assignment operators
Assignment operators are used to assign values to JavaScript variables. The following table contains commonly used Assignment operators:
Operator | Usage | Example |
= | Assigns value to variable | let y = 10; |
+= | Adds a value to a variable. | let a = 15;
a += 5; |
-= | Subtracts a value from a variable. | let a = 15;
a -= 5; |
*= | Multiplies a variable. | let a = 15;
a *= 5; |
/= | Divides a variable | let a = 15;
a /= 5; |
%= | Assigns a remainder to a variable | let a = 15;
a %= 6; |
Other assignment operators are: <<=,>>=,>>>=,&=,^=,|= and **=
Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers(JavaScript variables, expressions or literals). You must be familiar with following two terms:
- Operators: Defines the operation to be performed e.g. multiplication, addition etc.
- Operands: Numbers in an arithmetic operation is performed
The following table contains commonly used Arithmetic operators:
Operator |
Usage |
Example |
“+” (Addition) |
Adds numbers | let x = 5;
let y = 2; let z = x + y; |
“-” (Subtraction) |
Subtracts Numbers | let x = 5;
let y = 2; let z = x – y; |
“*” (Multiplication) |
Multiplies Numbers | let x = 5;
let y = 2; let z = x * y; |
“/” (Division) |
Divides Numbers | let x = 6;
let y = 2; let z = x / y; |
“%” (Modulus) |
Returns Reminder of division | let x = 5;
let y = 2; let z = x % y; |
“**” (Exponentiation) |
Raises the first operand to the power of 2nd operand | let x = 5;
let y = 2; let z = x ** y; |
“–” (Decrement) |
Decrements numbers | let x = 4;
x–; let y = x; |
“++” (Increment) |
Increments numbers | let x = 4;
x–; let y = x; |
Comparison operators
Comparison operators are used in logical statements for comparison (Equality or difference) between values or variables and upon evaluation return True or False. The following table contains commonly used Comparison operators:
Operator |
Usage | Example | Returns |
== |
Equal to | let x = 5;
x == 5 x == “5” |
True True |
=== |
Equal value or Equal type | let x = 5;
x === 5 x === “5” |
True False |
!= |
Not Equal to | let x = 5;
x != 7 |
True |
!== |
Not Equal value or not Equal type | let x = 5;
x !== 5 x !== “5” |
False True |
> |
Greater than | let x = 5;
x > 7 |
False |
< |
Less than | let x = 5;
x < 7 |
True |
>= |
Greater than or equal to | let x = 5;
x >= 7 |
False |
<= | Less than or equal to |
let x = 5; x <= 7 |
True |
Logical Operators
Logical operators are used in logical statements to determine logic between values or variables and upon evaluation return True or False. The following table contains commonly used Comparison operators:
Operator |
Usage | Example |
Returns |
&& | AND
(Returns True if both expressions are True else return False) |
let x = 7;
let y = 2; (x < 9 && y > 1) (x < 9 && y < 1) |
True
False |
|| | OR
(Returns False if both expressions are false else return True) |
let x = 7;
let y = 2; (x == 2 || y == 3) (x == 7 || y == 0) |
False
True |
! | NOT
(Returns True if expression is false else return true) |
let x = 7;
let y = 2; !(x === y) !(x > y) |
True
False |
String Operators
In JavaScript “+” and “+=” operators are used to add (concatenate) the strings.
Example |
Output |
let string1 = “Alia”;
let string2 = “Ahmed”; let output = string1 + ” ” + string2 ; |
Alia Ahmed |
let string1 = “Alia “;
let string2 += “Ahmed”; |
Alia Ahmed |
let y = “10” + 5;
let z = “Hi” + 5; (Note: Result of addition of string and number is string) |
15 Hi5 |
Precedence of Operators
Precedence describes the order in which operations are performed in arithmetic expressions consisting of multiple operators.
Order of precedence of operators is
- () Expression in parentheses are executed first
- Multiplication (*), Division (/) , Modulus (%)
- Addition(+), Subtraction (-)
- Assignment (=)
- Operators having the same precedence are computed from left to right
Example:
let x = 100 + 50 - 3;
Output:
147
Conditionals
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
Hence, conditional operators are used when you want to perform different actions based on different decisions.
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
The following table shows conditional operators:
Operator |
Usage |
Examples |
if | Used to specify a block of code that should be executed if the condition is true else the if block will not be executed.
(Can be used alone) |
if (5>2) { // do something } |
else | Used to specify a block of code that should be executed if the condition in “if block” is false.
(As you know else cannot be used alone it must be followed by an if statement ) |
if (a == true)
{ // do something } else { // do something else } |
else if | Used to specify a block of code with a new condition that should be executed if the condition in “if block” is false.
(As you know else if cannot be used alone it must be followed by an if statement or an else if statement) |
if (b == 10)
{ // do something if condition is true } else if (b < 10) { // do something if condition in if is false and this condition is true } else { // do something if both of the above conditions i.e. in if and else if are false } |
switch | Used to select one code block to be executed out of many.
(After the evaluation of expression in switch statement the resultant value is compared to every case and if there is a match that code block is executed. If none of the cases is matched then the default code block is executed. Remember only one case is executed as after each case it breaks out of switch block ) |
switch(expression)
{ case x: // code block break; case y: // code block break; default: // code block } |
Strings
JavaScript strings are sequences of zero or more characters that are used as containers to store and manipulate text.
Strings are written inside single ” or double quotes “”.
Example:
let fruit= "Apple"; // Double quotes let fruit2= 'Apple'; // Single quotes
String-Length
You can calculate the length of the string by using the built-in length function.
Example:
let fruit= "Apple"; fruit.length; // Will return 5 let string1= ""; string1.length; // Will return 0 as it is an empty string
Escape Character
In order to include special characters in string backslash (/) is used otherwise JavaScript will misunderstand these special characters. So, backslash is used to convert special characters to string characters.
Code | Usage |
\’ | To include Single Quote ( ‘ ) |
\” | To include Double Quotes ( ‘’ ) |
\\ | To include backslash ( \ ) |
Note:
You can also use quotes inside the string without using backslash but they should be different than main surrounding quotes(if you want them to be displayed)
Example:
let string1= "She is 'Alia'"; //She is 'Alia' let answer3 = 'She is "Alia"'; //She is "Alia"
String Templates
JavaScript Strings can also be defined by template literals. Template literals use (``)
instead of quotes ("")
to define a string.
Some properties of template literals are:
- Template literals allow you to include single and double quotes within strings without any restriction or modification.
Example:
let string1= `She's often called "Allie"`;
- Major use of template literals is to define multiline strings easily (by just pressing enter key and a new line is created) without using escaping characters.
Example:
let string1= `My habit is to do gardening after I finish my school work`;
- Template literals allow String Interpolation : Automatic replacing of variables and expressions in string with real values.
The syntax for String Interpolation is ${...}
Example-1 (Variable Substitution):
let name= "Alia"; let color = "Black"; let string1= `${name} favorite color is ${color}.`;
Example-2 (Expression Substitution):
let length= 5; let width= 6; let area= `Area: ${length * width}`;
Arrays
In JavaScript , Array can be used to store multiple values in a single variable and its values can be accessed by using index numbers.
Creating Empty Array
Empty array can be created by using 2 ways:
- const array_name = [];
- const array_name = Array();
Creating pre-filled Array
- Pre-filled array can be created in following ways:
const colors = ["Red", "Blue", "Yellow"]; // another way of declaring pre-filled array const colors = Array.of("Red", "Blue", "Yellow");
- You can also also create an empty array and then add values.
Example:
const colors= []; colors[0] = "Red"; colors[1] = "Blue"; colors[2] = "Yellow";
- An array can contain values of different types:
Example:
const array1 = [7, 'Apple', ['dog', 'cat']]
- An array can be created with keyword new:
Example
const colors = new Array("Red", "Blue", "Yellow");
- You can initialize an array of specific size with a set of values
Example:
myArray(12).fill(0) //Create a zero filled array of size-12
- 2D array can be created as:
Example:
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] matrix[0][0] //1 matrix[2][1] //8
Accessing Array Elements
Array elements can be accessed by referring to index numbers. Array indexes start with ‘0’ .
Example:
const colors=["Red", "Blue", "Yellow"]; let element1 = colors[0]; // element = "Red"
Changing Array Elements
Array elements can be changed as:
const colors=["Red", "Blue", "Yellow"]; colors[1]= "Black"; //Now the array becomes ("Red", "Black", "Yellow")
Length Property
In order to get the length of the array, JavaScript provides a built-in length function.
Example:
const colors=["Red", "Blue", "Yellow"]; colors.length; // Returns 3
Length property can also be used at various places and one of such is the example below where we use the length property to access the last index of an array:
colors[colors.length - 1]; // Returns "Yellow"
Adding Array Elements
Elements can be added to array by following ways:
// Adds a new element (Black) to colors colors.push("Black"); // Adds "Black" to colors colors[colors.length] = "Black"; // Adds "Orange" at start of colors colors.unshift("Orange")
Removing Array Elements
Elements can be removed from array by following ways:
- const colors=[“Red”, “Blue”, “Yellow”];
- colors.pop(); // Removes item from end of colors(i.e. Yellow)
- colors.shift() // Removes item from start of colors(i.e. Red)
Merging Arrays
2 Arrays can be merged in following ways:
Using concat:
const colors1=["Red", "Blue"]; const colors2=["Pink","Yellow"]; const allColors = colors1.concat(colors2) //["Red","Blue","Pink","Yellow"];
Using the spread operator (...)
const allColors =[...colors1,...colors2]//["Red","Blue","Pink","Yellow"];
Loops
Loops can execute a block of code a number of times. They are handy, if you want to run the same code over and over again, each time with a different value. JavaScript supports different kinds of loops:
- for – loops through a block of code a number of times
- for/in – loops through the properties of an object
- for/of – loops through the values of an iterable object
- while – loops through a block of code while a specified condition is true
- do/while – also loops through a block of code while a specified condition is true
The following table shows the different kind of loops:
Loop Keyword |
Usage & Syntax |
Examples |
for | for (initialization; condition; increment/decrement)
{ // code block to be executed }(Note:Statement 1 and 3 are optional so they can be omitted with a proper substitution instead of them) |
(1) Simple Loop
let string= “”; for (let i = 0; i < 5; i++) { string+= “value of i is ” + i + “<br>”; } (2) Iterating an array const colors=[“Red”, “Blue”, “Yellow”]; let i = 0; let len = colors.length; let string= “”; for (; i < len; ) { string+= colors[i] + “<br>”; i++; } |
for in | for (key in object) {
// code block to be executed } (Note: It is used to loop through the properties of an object or array. Each iteration returns a key (x)and this key is used to access the value of the key) |
const employee= {name:”John”, salary:100,000, age:28}; let string= “”; for (let z in employee) { string+= employee[z]; } |
for of | for (variable of iterable) {
// code block to be executed } Note: It is used to loop through the iterable objects (Arrays, Strings, Maps, NodeLists etc).In every next iteration, next property value is assigned to the variable. |
let language = “Python”; let string= “”; for (let x of language) { string += x; } |
while | while (condition) {
// code block to be executed } (Note: The code block is executed as long as condition is true ) |
let string= “”; while (i < 5) { string += “The value of i is ” + i; i++; } |
do while | do {
// code block to be executed }while (condition);(Note: Code block will be executed before checking if the condition is true, then the loop will be repeated as long as the condition is true. Even if the condition is false , loop will be executed at least once. ) |
let string= “”; let i= 0; do { string += “The value of i is ” + i; i++; } while (i < 5); |
Functions
A function is a block of code designed to perform a particular task which can be called anywhere in your program. This eliminates the need of writing the same code again and again. It helps programmers in writing modular codes. Functions allow a programmer to divide a big program into a number of small and manageable functions.
Like any other advanced programming language, JavaScript also supports all the features necessary to write modular code using functions.
Like functions in other programming languages, the syntax of JavaScript functions is almost similar.
Syntax
function functionName(parameter1, parameter2,..) { // code to be executed }
Example:
let result = tempFunction(5, 7); // Function is called, return value will end up in result function tempFunction(a, b) { return a + b; // Function returns the addition of a and b } // The value in variable “result” will be 12
Function Definition
Before we use a function, we need to define it. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces.
The basic syntax is shown below:
function functionname(parameter-list) { statements }
Let say we want to define a helloWorld function which alerts Hello World. Here is how we will do it:
function helloWorld() { // alert is a function which outputs hello world in browser as a popup. alert("Hello World"); }
Calling a Function
To invoke a function somewhere later in the script, you would simply need to write the name of that function as shown in the following example:
<html> <head> <script type="text/javascript"> function sayHello() { document.write("Hello there!"); } </script> </head> <body> <p>Click the following button to call the function</p> <form> <input type = "button" onClick="sayHello()" value="Say Hello"/> </form> <p>Use different text in write method and then try...</p> </body> </html>
Function Parameters
Till now, we have seen functions without parameters. But there is a facility to pass different parameters while calling a function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters. A function can take multiple parameters separated by comma.
We have modified our sayHello function here. Now it takes two parameters.
function sayHello(name, age) { document.write (name + " is " + age + " years old."); }
The return Statement
In JavaScript, a function can have an optional return statement. This is required if you want to return a value from a function. This statement should be the last statement in a function.
For example, you can pass two numbers in a function and then you can expect the function to return their multiplication in your calling program. It defines a function that takes two parameters and concatenates them before returning the resultant in the calling program.
function concatenate(first, last) { var full; full = first + last; return full; } function secondFunction() { var result; result = concatenate('Zara', 'Ali'); document.write(result); }
Arrow Functions
These functions were introduced in ES6. They allow you to write shorter function syntax.
Syntax
(parameter1,parameter2,..) => { //... }
// Arrow functions have no name
Note:
- No parentheses are required if the function has only 1 parameter.
- Arrow functions return value by default
Example without Parameter:
hello = () => { return "Hello World!"; }
Example With Parameter:
hello = (param1) => "Hello " + param1;