Unit2 Javascript Notes

Internal Javascript:
In HTML, JavaScript code must be inserted between <script> and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
External JavaScript:
External Scripts are placed in files with extension “.js”
For example:
external.js
function test() {
document.getElementById("para1").innerHTML = "Paragraph changed.";
}
second.html
<html>
<head>
<script src="external.js">
</script>
</head>
<body>
<h1>A Web Page</h1>

<p id="para1">A Paragraph</p>
<button type="button" onclick="test()">Try it</button>
</body>
</html>
JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and to make it more readable.
JavaScript comments can also be used to prevent execution, when testing alternative code.
Single Line Comments

Single line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will not be executed).
Example of Single line comment:
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain the code:
Example
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
JavaScript Variables
JavaScript variables are containers for storing data values.
In this example, x, y, and z, are variables:
Example
var x = 5;
var y = 6;
var z = x + y;
From the example above, you can expect:
 x stores the value 5

 y stores the value 6
 z stores the value 11
The general rules for constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.

 Names must begin with a letter
 Names can also begin with $ and _
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names
JavaScript Operators
The assignment operator (=) assigns a value to a variable.
Assignment
var x = 10;
The addition operator (+) adds numbers:
Adding
var x = 5;
var y = 2;
var z = x + y;
JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic on numbers:
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
JavaScript Comparison Operators
== 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
&& logical and
|| logical or
! logical not
JavaScript if else and else if

Conditional statements are used to perform different actions based on different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified condition is true

 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
The else if Statement

Use the else if statement to specify a new condition if the first condition is false.
Syntax
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
}
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00,
create a "Good day" greeting, otherwise a "Good evening":
<html>
<body>
<p>Click the button to get a time-based greeting:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
JavaScript Switch Statement
The switch statement is used to perform different actions based on different conditions.
The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Example:
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
JavaScript Loop
Loops can execute a block of code a number of times. If you want to run the same code over
and over again, each time with a different value.
Different Kinds of Loops

JavaScript supports different kinds of loops:
 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

The for loop has the following syntax:
for (statement 1; statement 2; statement 3) {

// code block to be executed
}
Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block.
Statement 3 is executed (every time) after the code block has been executed.
Example
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="demo"></p>
<script>
var text = "";
var n=17;
var i;
for (i = 1; i <= 10; i++) {
text += n+" * "+i+" = "+n*i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
The For/In Loop

The JavaScript for/in statement loops through the properties of an object:
Example
<html>
<body>
<h2>JavaScript Loops</h2>
<p>The for/in statement loops through the properties of an object.</p>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25, bl_gr:"A+"};
var x;
for (x in person) {
txt += person[x] + "<br />";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.
The While Loop
The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
}
Example:
<html>
<body>
<h2>JavaScript while</h2>
<p>Enter a number:<input type="text" id="numb" /></p>
<button onclick="fact()">Factorial??</button>
<p id="demo"></p>
<script>
function fact(){
var text = "";
var n=document.getElementById("numb").value;
var i = 1;
var f=1;
while (i <= n) {
f*=i;
i++;
}
alert("factorial of "+n+" is "+f)
}
</script>
</body>
</html>
The Do/While Loop

The do/while loop is a variant of the while loop. This loop will execute the code block once,
before checking if the condition is true, then it will repeat the loop as long as the condition is
true.
Syntax
do {
}
while (condition);
Example:
<html>
<body>
<h2>JavaScript do ... while</h2>
<p id="demo"></p>
<script>
var text = ""
var i = 1;
do {
text += "<br>The number is " + i;
i++;
}
while (i <= 10);
</script>
</body>
</html>
JavaScript Break and Continue

The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.
The Break Statement

You have already seen the break statement used in an earlier chapter of this tutorial. It was
used to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop.
The break statement breaks the loop and continues executing the code after the loop (if any):
Example
<html>
<body>
<p>A loop with a break.</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 1; i <= 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
</script>
</body>
</html>
The Continue Statement

The continue statement breaks one iteration (in the loop), if a specified condition occurs, and
continues with the next iteration in the loop.
This example skips the value of 3:
<html>
<body>
<p>A loop which will skip the step where i = 3.</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 1; i <= 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
</script>
</body>
</html>
JavaScript Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Example
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
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: {}
Example:
<html><head><script>
//if you will pass 77, you will get 25
function toCelsius(f) {
document.getElementById("demo").innerHTML = (5/9) * (f-32);
}
</script></head>
<body>
<h2>JavaScript Functions</h2>
<p>Value in Fahrenite:<input type="text" id="tempFahr" /></p>
<button onclick="toCelsius(document.getElementById('tempFahr').value)">fahr to
cels</button>
<p id="demo"></p>
</body>
</html>

Unit2 Javascript Notes

Uploaded by

Copyright:

Available Formats

Unit2 Javascript Notes

Uploaded by

Document Information

Original Title

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

Unit2 Javascript Notes

Uploaded by

Copyright:

Available Formats

Internal Javascript:

<h1>A Web Page</h1>

<h1>A Web Page</h1>

Single Line Comments

Example of Single line comment:

Any text between /* and */ will be ignored by JavaScript.

In this example, x, y, and z, are variables:

From the example above, you can expect:

 x stores the value 5

 Names can contain letters, digits, underscores, and dollar signs.

The addition operator (+) adds numbers:

JavaScript Arithmetic Operators

% Modulus (Division Remainder)

JavaScript Assignment Operators

JavaScript Comparison Operators

=== equal value and equal type

> greater than

< less than

>= greater than or equal to

<= less than or equal to

JavaScript Logical Operators

&& logical and

JavaScript if else and else if

You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

 Use if to specify a block of code to be executed, if a specified condition is true

The else Statement

The else if Statement

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

greeting = "Good evening";

The JavaScript Switch Statement

Different Kinds of Loops

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

The For Loop

for (statement 1; statement 2; statement 3) {

Statement 2 defines the condition for executing the code block.

The For/In Loop

JavaScript While Loop

The Do/While Loop

JavaScript Break and Continue

The continue statement "jumps over" one iteration in the loop.

The Break Statement

The break statement can also be used to jump out of a loop.

<p>A loop with a break.</p>

The Continue Statement

This example skips the value of 3:

<p>A loop which will skip the step where i = 3.</p>

A JavaScript function is executed when "something" invokes it (calls it).

The parentheses may include parameter names separated by commas:

The code to be executed, by the function, is placed inside curly brackets: {}

You might also like