JavaScript (JS) is one of the most popular and lightweight scripting programming languages mostly used to develop dynamic websites. It is implemented as the client-side script in HTML to make dynamic pages.
It is a case-sensitive language i.e. Hello and hello are not the same in JS.
At first with the basics;
We can implement JS on the website by using <script> inside <head> as well as <body>. If implemented inside <head>, JS runs before the page is displayed and if implemented inside <body>, JS runs along with the page is displayed.
JS can be stored in an external file with the ".js" extension and such scripts can be loaded from an external file as in the following example.
<script src = "fileName.js"></script>
Major Features of JavaScript:
- It is a lightweight and efficient interpreted programming language.
- It is open source and cross-platform (independent of OS).
- It can integrate with HTML and Jave with ease.
- It is an object-oriented event-driven programming language.
- It is a simple and standard scripting language and is supported by most browsers.
Let's get into the Fundamentals of JavaScript.
You learned where to implement JavaScript; inside the <script> tag, so let's talk about where to print output and where can we see the results.
As it integrates with HTML results are displayed in the browser. How?
There are several ways to display output but we will discuss only a few of them.
- Writing into the HTML output; document.write().
- Writing into the browser console; console.log().
- Mostly used for yelling; alert(output).
- And slightly complicated; innerHTML().
We will be using document.write() and console.log() very often than others.
Comments in JavaScript:
Comments are the piece of code that is ignored by the compiler and which is used to explain JavaScript code, and to make it more readable.
There are two types of comments; single line and multi-line comments
Single-line comments start with // and multi-line comments start with /* and end with */.
Example of single-line comments:
<script>
// Change heading
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
Above in bold are single-line comments and they won't be compiled by the compiler.
Example of multi-line comments:
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
Above in bold is a multi-line comment and it won't be compiled by the compiler.
JavaScript Variables:
What are Variables?
----> Variables are containers for storing data (storing data values).
There are 4 ways of declaring variables in JS.
- Using var
- Using let
- Using const
- Using nothing
For Example:
<script>
let r = 5;
var a;
const pi = 3.1415;
a = pi * r * r;
</script>
In this example, pi, r, and a are variables. As you can see we declared variables using var, const, let, and nothing. It is your choice to use these keywords or not.
Every other value above can be changed in the future except pi because we declared it as const it stands for Constant (whose value can't be changed). So, you need to declare a constant whose value should not be changed in the future you can use the const keyword to declare a variable or as we should say Constant.
JavaScript Operators:
An operator is defined as a meaningful symbol in programming which is used to carry out some specific calculations or comparisons. JS supports the following types of operators: arithmetic, comparison, logical, assignment, and bitwise operators.
1. Arithmetic Operators:
+ ---> Used for adding numbers and concatenate strings. Eg. a + b
- ---> Used for subtracting numbers. Eg. a - b
* ---> Used for multiplying numbers. Eg. a * b
/ ---> Used for dividing numbers. Eg. a / b
% ---> Used for remainder division. Eg. a % b, 3 % 2 = 1 (gives remainder)
++ ---> Used for incrementing the value of a variable by 1.
2. Assignment Operators:
3. Comparision Operators:
Just like algebra we have comparison operators but instead of using single '=' to equate values we use '==' here because '=' already has a purpose of the assignment.
4. Logical Operators:
Logical operators are Boolean operators, so they give Boolean results either true or false. We can use it just like in English but instead of language we use symbols.
For example:
"You and I will go" will be equivalent to "You && I will go". Here, instead of using and we used &&; different notation but the same meaning.
These logical operators are most used in conditional statements which we will cover shortly.
Next ---> Computer Science - JavaScript Program
5. Bitwise Operators:
Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32-bit number. The result is converted back to a JavaScript number.
This is a very complicated topic so try to do research on your own. You can also watch this video explaining bitwise operators. CLICK HERE TO WATCH!
All the codes below should be written inside the <script> tag as it is written in the examples below.
JavaScript Data Types:
Data Types in JS are Integers, Floats, Strings, Objects, Boolean, and Arrays. Each data type defines a set of values.
- Integer data type defines all real numbers like 1, 2, -6, 9, etc.
- Float data type defines all fractional numbers like 0.223, -1.23, 3.1415, 2.71, etc.
- String data type defines letters, characters, special symbols, and text including whitespace.
- Objects data type defines every other data type as key-value pairs separated by a comma. We will discuss this topic in detail later.
- Boolean data type defines true or false value.
- Array data type defines the collection of the above data types in a single variable. It will also be discussed in detail in the future.
JavaScript Functions:
A JavaScript function is a block of code designed to perform a particular task. It is executed when "something" invokes it (calls it).
Syntax:
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3...)
{
// code to be executed
}
Calling the function:
The code inside the function will execute when "something" invokes (calls) the function:
- When an event occurs (when a user clicks a button)
- When it is invoked (called) from JavaScript code
- Automatically (self invoked)
We will learn a lot more about function invocation later in the future.
JavaScript Conditionals (Branching) Statements:
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.
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.
1. if else statement:
Use the if statement to specify a block of JavaScript code to be executed if a condition is true. 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
}
Note: You can use if statement alone if there is only one condition.
Example of if else:
if (hour < 18)
{
greeting = "Good day";
}
else
{
greeting = "Good evening";
}
2. if else if statement:
When we have two or more than two conditions we use if else if statement. When first condition is true, first statement will be executed otherwise moves to next statement and so on.
Syntax:
if (condition)
{
// block of code to be executed if condition1 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 condition1 is false and condition2 is false
}
Example of if else if:
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
3. switch case statement:
The switch statement is used to perform different actions based on different conditions.
Syntax:
switch(expression) {
case 1:
// code block
break;
case 2:
// code block
break;
case n:
// code block
break;
default:
// code block
}
Example of switch case to calculate the weekday name based on the weekday number:
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 Looping Statement:
Loops can execute a block of code a number of times. Loops are handy, if you want to run the same code over and over again, each time with a different value.
In JavaScript we have the following looping statements:
- for - loops through a block of code a number of times.
- 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.
1. for loop:
The for statement creates a loop with 3 optional expressions:
Syntax:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Expression 1 is executed (one time) before the execution of the code block.
Expression 2 defines the condition for executing the code block.
Expression 3 is executed (every time) after the code block has been executed.
Example of for loop:
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Output will be:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
From the example above, you can read:
Expression 1 sets a variable before the loop starts (let i = 0).
Expression 2 defines the condition for the loop to run (i must be less than 5).
Expression 3 increases a value (i++) each time the code block in the loop has been executed.
2. while loop:
The while loop loops through a block of code as long as a specified condition is true.
Syntax:
while (condition) {
// code block to be executed
}
Example of while loop:
while (i < 5) {
text += "The number is " + i;
i++;
}
Output:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
In the above example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10.
3. do while loop:
The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
Syntax:
do {
// code block to be executed
}
while (condition);
Example of do while loop:
do {
text += "The number is " + i;
i++;
}
while (i < 10);
Output will be the same as while loop.
In the above example, the loop will always be executed at least once, even if the condition is false because the code block is executed before the condition is tested.
Notes By Bishal Subedi (TheB).
Published by NotesPT, visit www.notespt.ml for more.
Thanks for visiting!