JavaScript
what is javascript ?
javascript is partially object oriented language. It
is prototype-based object-oriented language.
Variables: Variables are holds value. for
example:x=5, y=6 etc.
Javascript
JavaScript Variables can be declared in 4
ways:
Automatically:- the software automatically alocate the varible type.
for example:-x = 5; y = 6; z = x + y;
Using var:- we can alocate the varible by “var”.
for example :- var x = 5; var y = 6; var z = x + y;
Using let:- we can alocate the varible by “let”.
for example :- let x = 5; let y = 6; let z = x + y;
Using const::- we can alocate the varible by “const”.
for example :- const x = 5; const y = 6; const z = x + y;
* we can use mixed for example :- const price1 = 5;const price2 = 6;
let total = price1 + price2;*
Javascript
data types :- for holding a value we required data types.
DATA TYPES
PERMITIVE NON PERMIVITVE
Numbers :-ex-1 ,2,3..etc
strings : “hello”, “here”..etc * Objecs : ex-
boolean:- true, fales. let person = "John Doe";
* Arrays:- ex-
null : null values
const cars = ["Saab",
un identified "Volvo", "BMW"];
• Permivie:-
Numbers:- Numbers are nothing but 1-9 digit . integers,floating, natural
numbers whole numbers etc. ex whole N:- 0.1,2,3..., natural:-
1,2,3,4...Floating:-1.2, 1.4 ,2.30 etc signed numbers:- -1,-2,-3,-4,+2,+3, etc
Strings:- strings are can be words or arrangemetn of words example:-
“Ram is a good boy”
Boolean: simplely defined true or fales. yes or no.
examples: var x = True;
var y= False;
Null:- no value defined for example
let name;
console.log(name); // undefined
Javascript
Non premitive
Objects: almost every thing is object in javascript.
* Date can be object
*Name can be object
* Arrays can be object
* String can be object
*Creating an object for example:-
const person = {
firstName: "anil",
lastName: "kumar",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
Javascript
Arrays:- Are special type of variables Holds more than one vales. arrays
are can be one dimentional, two dimentional and multi dimetnional .
one dimentioal array :-
example1:-
const cars = ["car", "bus", "sunil"];
example 2:-
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
we can convert array to string by function for example:-
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Two dimentioal array :
the arrays has both rows and colums are known as two dimential array.
let MathScore = [
['John Doe', 20, 60, 'A'],
['Jane Doe', 10, 52, 'B'],
['Petr Chess', 5, 24, 'F'],
['Ling Jess', 28, 43, 'A'],
['Ben Liard', 16, 51, 'B']
];
arrayName[rowIndex][columnIndex]
we can
Javascript
• access the table:
using console.log():-we can access the above table using the
console.log(). it give output given below
[
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"],
]
Javscript
• Manupulate the table of arrays
splice() :- this method is used to insert at the middle of the
array
for exmaple:-
let MathScore = [
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
];
MathScore.splice(2, 0, ["Alice George", 28, 62, "A"]);
Javscript
• output
[
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Alice George", 28, 62, "A"],
["Petr Chess", 5, 24, "F"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
]
pop() is used to delet the data
shift() is used to shift the data
push() is used to add the data
splice() is used to remove the data from particular positon
Javscript -operators
• Operators:- operators are performs mathmatical
operation example:- multiply, divison, subtraction. etc
• operator types. logical operator, relational
operator ,conditional operator
logical operator:- that performs logical operations
AND operator ex- (a.b), OR operator ex- (a|b) not(a~)
Relational operator:- that performs relational operations
greater than (a>b), less than (a<b).
assignment operator:- An operartor that assigns a value to
a variable. example (a=4), (b==3) (c=/d)
Javascript
conditional operator:- this is tersary operator there are theree
operands.
? find the condition is true then execute further. if fales it execute value
after (:) experssion.
syntax:- condition ? exprIfTrue : exprIfFalse
example1:-
let result = (10 > 0) ? true : false;
output:-true
example2:-
let message = (20 > 15) ? "Yes" : "No";
Output: Yes
Javascript -functions
• Functions are two types
pre defined and user defined functions
pre defined : usually pre defined in the compiler or debugger
user defined: these are defined by the user self.
function scope 3 types :-
Block scope
Function scope
Global scope
Block scope:- Variables declared inside a { } block cannot be accessed
from outside the block
for example:-{
let y = 2;
}
in below example we can acess the variabe outside the block
ex-
{
var y=30;
}
Local scope:- the given variable in below example the varible are local
for the function it cnnot be acessed outside the funcion.
example:-
function myFunction(){
var x=3;
}
Javascript
example2:-
function myFunction(){
let x=3;
}
Global scope:- the variables declared outside the function become global
scope.
The variable can be accessed by any function.
Example:-
let carName = “Maruti";
function myFunction() {
}
Javascript
• DOM manipulation:-
Javascript
• Dom Is a platform that associated with the programs attributes,
elements in the model structure . we can easily find the attributes of
the program and update the values.
Attributes-<div>, <p>, <h1>, <h6>, <form>, <ol>, <ul> and <li> etc (doesnot do any thing show
in screen.
Example :-
Elements - <href > (performs task) they modifies the html elements.
Syntax <element attribute="value">element content</element>
For Example
<input type = "text" name="email" size=15 value="type name here">
Javascript
• Event handling
Onclick button:-
The event triggers when we click on the button
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
