Introduction to JavaScript
JavaScript: Introduction, Data Types, Branching and Loops
Lecture Notes / Study Material
JavaScript Programming📚 Table of Contents
Introduction
- JavaScript is a lightweight language
- It is interpreted programming language
- It is designed for creating network-centric applications
- It is complimentary and integrated with Java
- It is very easy to implement because it is integrated with HTML
- It is open and crossed platform
Features of JavaScript
- It is most popular scripting and programming language
- JavaScript is everywhere, it comes on every modern web-browser
- It does not need any special environment setup
- It helps to create beautiful and interactive websites
- It has lots of frameworks and libraries
Web Browser
JavaScript runs directly in modern web browsers.
Interactive
It helps create interactive websites.
Libraries
JavaScript has lots of frameworks and libraries.
Advantages of JavaScript
-
Less Server interaction
- Validate user inputs at Client Side, no load on server
- Immediate feedback to the visitors
-
Increased connectivity
- Create interfaces to react when user hovers mouse over components
-
Richer interface
- Includes items as drag & drop components and sliders to give a Rich Interface to websites
Program in JavaScript
Following program will print "Hello World!!!" on browser using HTML and JavaScript
<html>
<head>
<title>
Program to Print Statement
</title>
</head>
<body>
<script>
document.write(" Hello World!!! ");
</script>
</body>
</html>Data Types
A value in JavaScript is always of a certain type. For example, a String or a number.
Any type of value can be stored in variable.
For Example
A variable can store String value at one moment and then it can be updated to a number
var message=" Hello ";
message= 1000;Number
The number type represents both Integer and Floating point numbers, all the operations associated with the Integer and floating point numbers are applicable to number data type. Operation like Arithmetic, Relational, Assignment etc...
Example:
var num=200;
var value=12.90;There are some "special numeric values" are associated with this data type is as follows
These above data types are belongs to Number data type in JavaScript.
Infinity
It represent the mathematical Infinity ∞
It is a special value that is greater than any number, this value is a result of some mathematical operations for example
1/0if we divide any number by zero it will generate infinity
NaN (Not a Number)
It represents a computational error. It is a result of an incorrect or an undefined mathematical operation.
For Example:
var x, y;
x=" Hello ";
y = x/2;This above operation will generate error NaN.
Performing math operation in JavaScript is safe, if any operation is performed by mistake, it never stops execution of program by generating fatal errors, at worst it generates NaN result.
String
A String in JavaScript is surrounded by quotes. There are 3 ways to assign String value to a variable
var name = "Abhay";
var str = " Welcome " ;
var str1 = ' Welcome to Program ' ;
var str2 = ` Welcome ${name} ` ;In JavaScript there are 3 types of quotes
| Quote Type | Example |
|---|---|
| Double Quotes | "Welcome" |
| Single Quotes | 'Welcome' |
| Back Ticks | ` Welcome ` |
Boolean
The Boolean type has only two values: true or false . This type is commonly used to store logical values of types true or false / yes or no. These values are also generated from the operation like Relational Operations or Comparison Operations.
For Example
var x = true;
var y=100;
x = y > 101;above operation will update the value of x from true to false, as the comparison is wrong, it will generate the value false.
Branching
if Statement
Is a fundamental control statement
Allows JavaScript to make decision and execute statement conditionally
Syntax
if(expression)
{
Statement to be executed if expression is true
}if … else Statement
Is the next form of the control statement
Allows JavaScript to execute statements in more controlled way
Syntax
if(expression)
{
Statement to be executed if expression is true
}
else
{
Statement to be executed if expression is false
}if … else if … Statement
Is an advanced form of if … else
Allows JavaScript to make a correct decision out of several conditions
It allows JavaScript to execute the multiple statement as per the true expression
Syntax
if(expression)
{
Statement to be executed if expression is true
}
else if (expression1)
{
Statement to be executed if expression1 is true
}
else if (expression2)
{
Statement to be executed if expression2 is true
}
else
{
Statement to be executed if all above expressions are false
}switch Case
The switch case is used to evaluate an expression and execute several statements based on the value of expression
The interpreter verifies the case against the value of the expression
If match is found with the case, then statement of the case executed
If nothing matches, then a default condition will be used.
Syntax
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}The break statement is used to end a particular case,
If break is not there it will continue to execute further case
break statement is used to end a particular case.
Loops
JavaScript provides looping constructs for repeatedly executing statements while a specified condition is satisfied.
The while Loop
The most basic loop used in JavaScript
The purpose of the while loop is to execute the statements or code block repeatedly as long as expression true.
Once the expression is false, the loop terminates
Syntax:
while(expression)
{
statement to be executed if the expression is true
}The do … while Loop
The task of the while and the do … while is same, except that the expression check happens at the end of the loop.
The loop will always be executed at least once, even if the expression is false.
Syntax:
do
{
Statement(s) to be executed;
} while (expression) ;Semicolon is compulsory after while, so that the loop will get terminate if expression is false.
for Loop
It is most compact form of looping, which includes 3 important parts as follows:
- Loop Initialization: Initializes counter to a starting value, it executes before loop begins.
- Test Statement: Test expression, if expression is true it executes the code block of loop, if false, it terminates the loop.
- Iteration Statement: Increases or decreases the value of the counter.
Syntax:
for ( initialization ; test condition ; iteration statement )
{
Statement(s) to be executed if test condition is true
}| Part | Purpose |
|---|---|
| Loop Initialization | Initializes counter to a starting value, it executes before loop begins. |
| Test Statement | Test expression, if expression is true it executes the code block of loop, if false, it terminates the loop. |
| Iteration Statement | Increases or decreases the value of the counter. |
Quick Revision
| Topic | Key Point |
|---|---|
| JavaScript | Lightweight and interpreted programming language |
| Number | Represents Integer and Floating point numbers |
| Infinity | Special numeric value representing mathematical infinity |
| NaN | Not a Number |
| String | Text surrounded by quotes |
| Boolean | true or false |
| if | Executes statement conditionally |
| if … else | Selects between two alternatives |
| if … else if … | Handles multiple conditions |
| switch | Executes statements based on expression value |
| while | Repeats while expression is true |
| do … while | Executes at least once before checking expression |
| for | Compact loop containing initialization, test and iteration |
Comments
Post a Comment