Scribd
Upload
20K views

Javascript

The document provides an overview of JavaScript, including definitions, examples of basic syntax and usage, and descriptions of common features like variables, operators, functions, and events. It explains that JavaScript is primarily used to make web pages interactive and dynamic by enhancing HTML pages. It also includes examples of how to select and manipulate HTML elements using JavaScript.

Uploaded by

Dinesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20K views

Javascript

The document provides an overview of JavaScript, including definitions, examples of basic syntax and usage, and descriptions of common features like variables, operators, functions, and events. It explains that JavaScript is primarily used to make web pages interactive and dynamic by enhancing HTML pages. It also includes examples of how to select and manipulate HTML elements using JavaScript.

Uploaded by

Dinesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 55

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

You might also like