JAVA SCRIPT
GAYATRI S
Introduction
JavaScript is a programming language that's commonly used to make websites
interactive. It's a language that web developers use to add cool features like
animations, games, forms, and other interactive elements to web pages. Think of it as
the language that gives websites their superpowers, allowing them to respond to user
actions, manipulate content dynamically, and make web pages come alive. It's not the
same as Java, despite the similar name. JavaScript is usually written directly into
HTML documents or included as separate files, and it's executed by web browsers like
Chrome, Firefox, or Safari to make web pages do all sorts of neat things.
Some things to keep in mind…
ECMAscript is the standard for scripting javascript.
Latest version of ECMAscript was on 2016 - ES6.
Camel Casing : Is that the first letter of each word is
capitalized, except for the first word. Eg: camelCasing,
javaScript…
Javascript is case sensitive: Eg: const Firstname = “Gayatri”;
Const firstname
= “Ponnu”;
Here though two names are same, they are different because the
first letter of each is different, one is upper case and the other
ids lower case. So here they are considered as two different ones.
Datatypes in Javascript :
Primitive datatype : Reference datatype :
Object : Objects are collection of
String : Represents a sequence of key-value pairs and can hold various
characters, enclosed within data types, including other objects,
single or double quotes. arrays, functions, and primitive data
types.
Eg: “Hello”, ‘Presentation’...
Eg: let person = { name: “John”, age:
24};
Number : Represents numeric
data, both integer and Arrays : Arrays are ordered collection
of values, which can include other
floating-point numbers. arrays, objects, functions, and
primitive data types.
Eg: 7, 3.14, NaN…
Eg: let colors = [“red”, “green”,
“blue”];
Datatypes Cont’d…
Primitive datatypes : Reference datatypes :
Boolean : Represents a logical value Functions : Functions are
indicating true or false. The word objects in Javascript and can be
true or false are the only two
possible Boolean values. assigned to variables, passed as
arguments, and returned from
Eg: let a = 20; other functions.
let b = 70; Eg : function greet(name){
let c = a>b ; [Link](“Hello, “ +
The output of the above boolean will name + “!”);
be `false`.
};
Datatypes Cont’d…
Primitive datatypes :
Undefined : Represents a variable that has been declared but not assigned any
value,
In Javascript, uninitialized variables are automatically assigned the value
`undefined`.
Eg: let data;
[Link](data); - here the output will be undefined.
Null : Represents the intentional absence of any object value. Its often used to
indicate a deliberate non-value.
Eg: let car = null;
Notations…
Dot notation:
It is a way to access properties and methods of objects by using a
` . ` followed by the name of the property you want to access.
Eg: const person = {name:”Gayatri”, age:21,address:Kerala};
[Link]([Link]);
Here the output will be : Gayatri
[Link]([Link]);
Here the output will be : 21
Cont’d…
Bracket notation :
It is a way to access properties of an object or element of an array
using square brackets [ ]
Eg: const person = {name:”gayatri”,age:21,state:kerala};
[Link](person[‘name’]; here output will be : gayatri
Const fruits = [‘apple’, ‘mango’, ‘orange’];
[Link](fruits[1]); here output will be : mango
Here the mango has come based on the index number in the square bracket.
Javascript Objects :
In Javascript objects are mainly created in two methods:
By object literal : Most easy way . Define key-value pairs within curly
braces `{ }`, separating each pair with comma.
Eg: let shopping = {fruit : ’mango’, vegetable : ’tomato’, snacks :
`biscuit’};
By creating instance of objects : Creating an object directly using ‘new’
keyword.
Eg: var fruits = new object( );
[Link] = “Mango”;
[Link] = 2;
Javascript Arrays :
In Javascript arrays are mostly created using two methods :
By literal : Simply creating an array using square brackets
and specifying the elements inside.
Eg : let veggies = [ ‘tomato’, ‘spinach’, ‘onion’ ];
By creating an instance of an array:
var veggies = new Array( );
v[0] = “cucumber”;
v[1] = “tomato”;
Javascript Number objects :
Integer : Storing normal numbers.
Eg: var num1 = 150; / var num2 = 500;
Floating points : Storing number with points.
Eg: var number = 3.14;
Exponent values : To write large numbers with zero like 10000, 500000,
etc.
Eg: var n = 35e4; this means 350000(number after `e` represents the number of
zeros)
Number object : Create an object with keyword `Number`
Eg: var z = new Number (70); output = [Number:55]
Functions in Javascript :
In Javascript, functions are blocks of reusable code
that can be defined and called to perform a particular
task. They are a fundamental building block of
Javascript programming.
Passing values in an function are called arguments and
parameters also.
Eg: var chechFunction = function(argument1, argument2){
(condition)
};
Classes in Javascript :
Classes are templates for creating objects.
Classes can be reused.
Keyword `constructor` is the function which works
initially in a class.
More functions can be called under a class. Normally each
function under the class will be only executed when we
access them using the dot notation.
But in a constructor , we can call the class name with
`new` keyword and the constructor starts running.
Arithmetic Operations :
● + = Addition
● - = Subtraction
● * = Multiplication
● ** = Exponentiation (Square of a number)
● / = Division
● % = Modulus (Reminder in a division)
● ++ = Increment (+1)
● - - = Decrement (-1)
Comparison Operators :
● == is to check whether they are equal to or not .
● === checks whether value and datatypes are equal or not .
● != to define `not equal to` .
● !== to define not equal value and datatype .
● > to check the first value is greater than the second one .
● < to check the first value is smaller than the second one.
● >= to check whether its greater than or equal to the other
.
● <= to check whether its lesser than or equal to the other .
Logical operators :
● && = and
● | | = or
● ! = not
Ternary operator:
Is a short way for writing if else condition
Eg:
let votable = (age<18) ? “Too young” : “Old enough”;
Here the first bracket holds the if condition, and the colon stands for else
condition.
Javascript Loops : -
Loops are used for doing an action to occur again and again
or number of times as we prefer.
There are mainly five types of loops:
Do While
For Loop While Loop
Loop
For …. In For …. Of
Loop Loop
For loop…
Syntax : -
for (initial expression, condition, increment/decrement
expression).
In the position of initial expression we set a initial variable -
called as loop variable. ` i ` is the common loop variable . i = 0;
Condition - condition we need according to the code. And
increment/decrement. Eg: for (let i = 0; i <5; i ++){
[Link] (‘hello’) };
};
When ever the condition becomes true the function happens.
While Loop…
Syntax : -
(here i = 0, so 0 < 10 condition becomes true, then the log prints it and then the
let i = 0; increment function happens . ie. 0 + 1 = 1. Then 1 goes through the same )
while(i < 10){
[Link](i);
i++};
`break` and `continue` are two keywords in while loop.
break - breaks the loop there. Eg: if (i === 5)break; (here when the i=5 the
condition stops there) continue - breaks the point and then continues the
flow. Eg: if(i===5)
continue ;
Here the output will be like 1, 2, 3, 4, 6, 7, 8, 9, 10
(here the condition breaks when i = 5 and the continues from the next number)
do …. while Loop :
This statement creates a loop that execute a specified until
the test condition evaluates to false. The condition is
evaluated after the execution of the statement.
Syntax:
do{
Statement
}
while(condition);
for …. of Loop :
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
[Link](element); };
(here the output will be “a”, “b”, “c” as separate ones.)
In this loop from an array of objects this loop takes one by one.
for … in Loop :
For ..in loop is mainly applicable for objects. The code
is executed through the property of the object. for …in
loop first fetches all the keys in the object; with that
key it calculates the value.
Syntax:
for(var key in person ) — here key - name of the variable , person -
name of the variable containing the object. When person is called all the
key-value pairs is called.
Value = person [text]; — here in a variable named value person is
called which brings all the key-value pairs and - by keeping an array `[ ]`
next to it for taking all the values from the keys in person.
Javascript Array Method :
Filter : Result of an filter will be an array.
This method is to filter a given array. It returns an array
after the filtration according to the condition given.
Eg: const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = [Link](function(num){
return num % 2 === 0; });
[Link](evenNumbers); Output : [2, 4, 6]
Array method: map( ):
The map( ) method in javascript is used to iterate over an
array and transform each element of the array according to
a provided callback function.
map( ) dosen’t modify the given array, it creates a new
array with the modified elements.
Eg:
Array method - find :
This method is used to return the first element in the
array that satisfies the provided testing function.
Eg:
Array method - forEach( ) :
The forEach( ) method is used to execute a provided
function once for each array element.
Eg:
Array method - some( ) :
This method is to test whether at least one element in the
array passes the test implemented by the provided function.
Output will be in boolean.
Eg:
Array method - reduce( ):
It is used to reduce the array to a single value.
Eg:
Array method - include ( ) :
This method is used to determine whether an array include a
certain value in it . The output will be boolean .
Eg:
Array method - slice ( ) :
This method is used to extract a portion of an array and
return it as a new array. Eg:
Array method - indexOf( ) :
This method is used to find the index of the first
occurrence of a specified value within an array. Eg:
Array method - push ( ) ::
This method is used to add one or more elements to the end
of an array and return the new length of the array. Eg:
Array method - pop ( ) :
This method is used to remove the last element from an
array and return that element and updates the length. Eg:
Array method - length :
This property returns the number of elements in that array.
Eg:
Array method - from ( ) :
This method creates a new shallow-copied array instance
from an array like or iterable object. Eg:
Array method - concat ( ) :
This method is used to merge two or more arrays, without
changing the existing one. Eg:
Object method - assign( ) :
This method is used to copy the value of all enumerable own
properties from one or more source objects to a target
object.
Eg:
Object method - defineProperty( ) :
This method allows you to define new properties directly on
an object or modify existing ones. Eg:
Object method - entries ( ) :
In this the object we gave will be converted into arrays.
Object method - fromEntries ( ) :
In this the array we gave will be converted into object.
Eg:
Object method - freeze( ) :
This method in javascript that freezes an object. Freezing
an object means that it becomes immutable; its properties
cannot be added, modified, or [Link]:
Object method - create( )
This method is to create a new object with the specified
prototype object and properties. Eg:
Object method - keys ( ) :
This method is used to extract the key of an object and
return them as an [Link]:
Object method - value( );
This method is used to extract the value of an object’s
properties and return them as an array. Eg:
Object method - entries( ) :
Creates nested array of the key/value pairs of an object.
Eg:
Object method - seal ( ) :
This method is to prevent the adding of new properties to
an object by sealing it, but still can modify the existing
ones. Eg:
`Date` keyword :
This method is for creating, accessing, and manipulating
dates and times.
`Math` keyword :
The `Math` object provided a set of properties and methods
for mathemetical operations.
Javascript Conditions :
In Javascript, the `if`, `else if`, and `else` statements
are used for conditional execution of code blocks based on
different conditions.
Switch case condition :
`Switch` is used to perform different actions based on
different condition. It evaluates an expression and execute
the statements associated with the matching case clause.
Validation :
In Javascript, validation typically refers to the process of
checking user input or data to ensure it meets certain criteria
or constraints before proceeding further.
This is commonly done in web forms to ensure that the data
entered by the user is valid before submitting it ti the server.
Validations are of many types :
Username validation,
Password validation,
Email validation etc…
Error handling :
Mainly there are 3 errors in javascript :
Syntax error, Runtime error, Logical error.
Syntax error deals with the error in structure. Runtime
error deals with the error during the execution of the
code. Logical error deals with the mistakes included in the
logical thinking of a developer.
In Javascript we have four methods to handle these errors:
Try, catch, finally and throw.
<Thankyou/>
