Java Script Fundamentals:
1. Variables
2. Data Types
3. Arithmetic Operators
4. IF IF-ELSE ELSEIF
5. Switch
6. Loop (For and While)
7. Function
8. Object
JavaScript variable
A JavaScript variable is simply a name of storage location. There are two types of variables
in JavaScript : local variable and global variable.
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )
sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.
Local Variable:
<script>
var x = 10;
var y = 20;
var z=x+y;
[Link](z);
</script>
Global Variable:
<script>
var data=200;//gloabal variable
function a(){
[Link](data);
}
function b(){
[Link](data);
}
a();//calling JavaScript function
b();
</script>
DATA Types:
JavaScript provides different data types to hold different types of values. There are
two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of the
variable because it is dynamically used by JavaScript engine.
Examples: var a=40;//holding number
var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
JavaScript non-primitive data types
The non-primitive data types are as follows:
Data Type Description
Object represents instance through which we can access members
Array represents group of similar values
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands.
For example:
var sum=10+20;
var sum=10*20;
var sum=10-20;
Here, + * _ are the arithmetic operators and = is the assignment operator.
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
If , If-else and elseif
Example 1: IF
<script>
var a=20;
if(a>10){
[Link]("value of a is greater than 10");
}
</script>
Example 2: IF ElSE
<script>
var a=20;
if(a%2==0){
[Link]("a is even number");
}
else{
[Link]("a is odd number");
}
</script>
Example 3: ElSeif
<script>
var a=20;
if(a==10){
[Link]("a is equal to 10");
}
else if(a==15){
[Link]("a is equal to 15");
}
else if(a==20){
[Link]("a is equal to 20");
}
else{
[Link]("a is not equal to 10, 15 or 20");
}
</script>
JavaScript Switch:
The JavaScript switch statement is used to execute one code from multiple expressions. It is
just like else if statement that we have learned in previous page. But it is convenient
than if..else..if because it can be used with numbers, characters etc.
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
[Link](result);
</script>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while
or for-in loops. It makes the code compact. It is mostly used in array.
There are three types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
For loop Example:
<script>
for (i=1; i<=5; i++)
{
[Link](i + "<br/>")
}
</script>
While Loop Example:
<script>
var i=11;
while (i<=15)
{
[Link](i + "<br/>");
i++;
}
</script>
Do-While Example:
<script>
var i=21;
do{
[Link](i + "<br/>");
i++;
}while (i<=25);
</script>
ARRAY:
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
1) JavaScript array literal
The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
<script>
var trainee=["Viren","Aaditya","Dhruv", "Bhavin", "Ajay"];
for (i=0;i<[Link];i++)
{
[Link](trainee[i] + "<br/>");
}
</script>
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
var arrayname=new Array();
<script>
var i;
var trainee = new Array();
trainee[0] = "Dhruv";
trainee[1] = "Viren";
trainee[2] = "Bhavin";
trainee[3] = "Aaditya";
trainee[4] = "Ajay";
for (i=0;i<[Link];i++)
{
[Link](trainee[i] + "<br/>");
}
</script>
3) JavaScript array constructor (new keyword)
Here, you need to create instance of array by passing arguments in constructor so
that we don't have to provide value explicitly.
Var arrayname=new Array("value1","value2","value3");
<script>
var i;
var trainee = new Array("Dhruv","Viren","Bhavin","Aaditya","Ajay");
for (i=0;i<[Link];i++)
{
[Link](trainee[i] + "<br/>");
}
</script>
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by
a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function parameters are listed inside the parentheses () in the function
definition.
Function arguments are the values received by the function when it is
invoked.
Inside the function, the arguments (the parameters) behave as local
variables.
Function Invocation
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)
Ex 1:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
[Link]("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Ex 2:
<!DOCTYPE html>
<html>
<body>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<button style="background-
color:blue" type="button" onclick="getcube(4)"> Cube of 4 </button>
</body>
</html>
JavaScript Objects
Real Life Objects, Properties, and Methods
In real life, a car is an object.A car has properties like weight and color,
and methods like start and stop:All cars have the same properties, but the
property values differ from car to [Link] cars have the same methods, but
the methods are performed at different times.
JAVA SCRIPT OBJECT:
The values are written as name: value pairs (name and value separated by
a colon).
It is a common practice to declare objects with the const keyword.
const person = {firstName:"Parth", lastName:"Patel", age:20,
skinColor:"Brown"};
Accessing Object Properties
You can access object properties in two ways:
[Link] Example:[Link]
or
objectName["propertyName"] person[“firstName”]
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const person = {firstName:"Parth", lastName:"Patel", age:20, skinColor:"Brown"
};
// Display some data from the object:
[Link]("demo").innerHTML =
[Link] + " is " + [Link] + " years old.";
</script>
</body>
</html>
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
const person = {
firstName: "Parth",
lastName : "Patel",
age : 20,
fullName : function() {
return [Link] + " " + [Link];
}
};
The this Keyword
In a function definition, this refers to the "owner" of the function.
In the example above, this is the person object that "owns"
the fullName function.
In other words, [Link] means the firstName property of this object.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "Parth",
lastName: "Patel",
age: 20,
fullName: function() {
return [Link] + " " + [Link];
}
};
// Display data from the object:
[Link]("demo").innerHTML = [Link]();
</script>
</body>
</html>
Using the JavaScript Keyword new
The following example create a new JavaScript object using new Object(),
and then adds 4 properties:
Example
const person = new Object();
[Link] = "Parth";
[Link] = "Patel";
[Link] = 20;
[Link] = "White";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>
<p id="demo"></p>
<script>
const person = new Object();
[Link] = "Parth";
[Link] = "Patel";
[Link] = 20;
[Link] = "White";
[Link]("demo").innerHTML =
[Link] + " is " + [Link] + " years old.";
</script>
</body>
</html>