Javascript

JAVASCRIPT
DEFINITION
• Scripting languages, primarily used on the Web.

• Enhance HTML pages and is commonly found embedded in
HTML code.
• Interpreted language.
• JavaScript renders web pages in an interactive and dynamic
fashion.
• Allowing the pages to react to events.
<!DOCTYPE html>
<html>
<body> Example
<h1>Welcome to Javascript</h1>
<button type="button"
onclick="document.getElementById('demo_id').inner
HTML = Date()">
Click me to display Date and Time.</button>
<h1 id="demo_id"></h1>
</body>
</html>
• JavaScript Can Change HTML Content.
Ex: document.getElementById("demo").innerHTML = "Hello
JavaScript";
JAVASCRIPT CAN CHANGE THE STYLE OF AN HTML ELEMENT.
<SCRIPT> Tag
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JAVASCRIPT FUNCTIONS AND EVENTS
• block of JavaScript code that can be executed when

"called" for.
• For example, a function can be called when

an event occurs, like when the user clicks a button.
• <head>
• <script>
SCRIPT TAG IN • function myFunction() {

HEAD • document.getElementById("demo").innerHTML
= "Paragraph changed.";
• }
• </script>
• </head>
<!DOCTYPE html>
<html>
In Body
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
EXTERNAL JAVASCRIPT
JavaScript files have the file extension .js.
<script src="myScript.js"></script>
JAVASCRIPT OUTPUT
w r i win
t.
m en dow
oc u () .ale
d te rt()
co
L
TM
ns
ole
H
er
.lo
inn
g(
)
<script>
document.getElementById("demo").innerHTML = 2 + 2;
</script>
ML
HT
er
inn
<script>
r i document.write(2 + 2);
t. w
m en </script>
oc u ()
d te
<button type="button" onclick="document.write(“Welcome” )">Try it</button>
Welcome
win
dow
.ale
rt()
<script>
window.alert(5 + 6);
</script>
co
<!DOCTYPE html>
ns
<html>
ole
<body>
.lo
<h2>Activate debugging with F12</h2>
g(
)
<script>
console.log(3 + 2);
</script>
</body>
</html>
JAVASCRIPT STATEMENTS
• var x, y,z; // Statement 1

x = 2; // Statement 2
y = 3; // Statement 3
z = x + y; // Statement 4
• A JavaScript program is a list of programming statements.

JAVASCRIPT CODE BLOCKS
• function myFunction() {
document.getElementById("demo1").innerHTML = "Hello world!";
document.getElementById("demo2").innerHTML = "How are you?";
}
Keyword Description
break Terminates a switch or a loop
S
continue Jumps out of a loop and starts at the top
D
debugger Stops the execution of JavaScript, and calls (if
available) the debugging function
OR
do ... while Executes a block of statements, and repeats
the block, while a condition is true
YW
for Marks a block of statements to be executed,
as long as a condition is true
function Declares a function
if ... else
KE Marks a block of statements to be executed,
depending on a condition
return Exits a function
JS
switch Marks a block of statements to be executed,

depending on different cases
try ... catch Implements error handling to a block of
statements
var Declares a variable
JAVASCRIPT SYNTAX
• var x, y, z; // How to declare

variables
x = 2; y = 3; // How to assign values
z = x + y; // How to compute values
JAVASCRIPT VARIABLES
• variables are used to store data values.

• var keyword.
• equal sign is used to assign values.
• var x;
x = 6;
JAVASCRIPT OPERATORS
• arithmetic operators +,*,-,/

• Assignment operator (=).
• var x, y;
x = 5;
y = 6;
• JavaScript Expressions:
• combination of values, variables, and operators, which computes to a
value
JAVASCRIPT COMMENTS
• Code after double slashes // or between /* and */ is treated

as a comment..
• var x = 5; // It will execute
// var x = 6; It will not execute

JAVASCRIPT IS CASE SENSITIVE
• All JavaScript identifiers are case sensitive.

JAVASCRIPT ARITHMETIC OPERATORS
JAVASCRIPT ARITHMETIC OPERATORS
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JAVASCRIPT STRING OPERATORS
• var txt1 = ”New";
var txt2 = ”Delhi";
var txt3 = txt1 + " " + txt2;
• Output of txt3= New Delhi

ADDING STRINGS AND NUMBERS
• var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
ADDING STRINGS AND NUMBERS
• var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
• Output:
• 10
55
Hello5
JAVASCRIPT COMPARISON OPERATORS
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
JAVASCRIPT LOGICAL OPERATORS
Opera Description
tor
&& logical and
|| logical or
! logical not
JAVASCRIPT BITWISE OPERATORS
Opera Description Example Same as Result Decimal

tor
& AND 5&1 0101 & 0001 1
0001
| OR 5|1 0101 | 0101 5
0001
~ NOT ~5 ~0101 1010 10
^ XOR 5^1 0101 ^ 0100 4
0001
<< Zero fill left shift 5 << 1 0101 << 1010 10
1
>> Signed right 5 >> 1 0101 >> 0010 2
shift 1
>>> Zero fill right 5 >>> 1 0101 0010 2
shift >>> 1
JAVASCRIPT DATA TYPES
• JavaScript has dynamic types.
• This means that the same variable can

be used to hold different data types.
var a; // Now a is undefined
a = 5; // Now a is a Number
a = "John"; // Now a is a String
JAVASCRIPT BOOLEANS
• var x = 2;
var y = 2;
var z = 6;
•
(x == y) // Returns true
(x == z) // Returns false
JAVASCRIPT ARRAYS
• var sringArray = [“a", “b", “c"];
JAVASCRIPT OBJECTS
• var person = {firstName:“Dinesh", lastName:“Kumar",

age:27};
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
var person = {
firstName : "Dinesh",
lastName : "Kumar"};
document.getElementById("demo").innerHTML =
person.firstName;
</script>
</body>
</html>
DIFFERENCE BETWEEN UNDEFINED AND
NULL
undefined and null are equal in value but

different in type:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
JAVASCRIPT FUNCTIONS
• block of code designed to perform a particular

task.
<p id="demo"></p>
<script>
function myFunction (p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
SYNTAX
• function name(parameter1, parameter2,
parameter3) {
// code to be executed
}
WHAT IS THIS?
The JavaScript this keyword refers to the object it belongs to.
var person = {
firstName: "John",
lastName : "Doe”,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
John Doe
HTML EVENTS
• something the browser does, or something a user does
• An HTML web page has finished loading

• An HTML input field was changed
• An HTML button was clicked
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML

element
onmouseout The user moves the mouse away from an

HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the

page
JAVASCRIPT STRING METHODS
• Length
• var txt = “ABC";
var sln = txt.length;
INDEXOF()
index of (the position of) the first occurrence of a specified text in a string
var str = “Welcome to Javascript;
var pos = str.indexOf(“to");
INDEXOF()
index of (the position of) the first occurrence of a specified text in a string
var str = “Welcome to Javascript;
var pos = str.indexOf(“to");
=8
concat() joins two or more strings:
trim() method removes whitespace from both sides of a string:
charAt() method returns the character at a specified index (position) in a string

CONDITIONAL STATEMENTS
• if (condition1) {
// 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
}
JAVASCRIPT SWITCH STATEMENT
• different actions based on different conditions.
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
JAVASCRIPT FOR LOOP
•for - loops through a block of code a number of times

•for/in - loops through the properties of an object
•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
THE FOR LOOP
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
for (i = 0; i < 5; i++) {
alert(i);
}
THE WHILE LOOP
while (condition) {
// code block to be executed
}
while (i < 10) {
text += “The text=" + i;
i++;
}
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML =
text;
</script>
Thank You

Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

JAVASCRIPT

• Scripting languages, primarily used on the Web.

• block of JavaScript code that can be executed when

• For example, a function can be called when

SCRIPT TAG IN • function myFunction() {

JavaScript files have the file extension .js.

• var x, y,z; // Statement 1

• A JavaScript program is a list of programming statements.

switch Marks a block of statements to be executed,

• var x, y, z; // How to declare

• variables are used to store data values.

• arithmetic operators +,*,-,/

• Code after double slashes // or between /* and */ is treated

• var x = 5; // It will execute

// var x = 6; It will not execute

• All JavaScript identifiers are case sensitive.

• Output of txt3= New Delhi

Opera Description Example Same as Result Decimal

• JavaScript has dynamic types.

• This means that the same variable can

• var person = {firstName:“Dinesh", lastName:“Kumar",

undefined and null are equal in value but

• block of code designed to perform a particular

The JavaScript this keyword refers to the object it belongs to.

• something the browser does, or something a user does

• An HTML web page has finished loading

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML

onmouseout The user moves the mouse away from an

onkeydown The user pushes a keyboard key

onload The browser has finished loading the

trim() method removes whitespace from both sides of a string:

charAt() method returns the character at a specified index (position) in a string

• different actions based on different conditions.

•for - loops through a block of code a number of times

You might also like