VIMALA GURUKUL
Table of Contents
What is JavaScript?
Use of JavaScript in Two types.
JavaScript Comments.
JavaScript Can Change HTML Content.
JavaScript Can Change HTML Styles (CSS).
JavaScript Can Hide HTML Elements.
JavaScript Can Show HTML Elements.
Variable in JavaScript.
JavaScript Operators.
Conditional Statement in JavaScript.
JavaScript popup boxes.
Data Type.
Common HTML Events.
JavaScript is an interpreter, client side, event-based interpreted, object- oriented scripting language.
JavaScript was created by Brendan Eich, and it came into existence in September 1995, when Netscape 2.0 (a web browser) was released.
JavaScript program are run by an interpreter built to the user's web browser.
It is a case sensitive language.
JavaScript is not java.
JavaScript frameworks and library?
Angular
React
jQuery
Ext.js
Node.js
Aurelia
Vue.js
Ember.js
Polymer
Backbone.js
1. Internal JavaScript
2. External JavaScript
JavaScript can be inserted into documents by using the <script> tag.
The <script> tag provides a block to write the JavaScript programs.
It can be placed in the <body>, or in the <head> section of an HTML page, or in both.
Example
<script type=”text/JavaScript”>
// JavaScript code goes here
</script>
To use the pre-defined programs of any JavaScript library.
Example
<script src=”myscript.js”> </script>
When we do not have to display any statement on the screen, then we make it a comment so that it makes the program easier to understand.
The statement line can be a single or multiple lines.
For Single line -
// - symbol used
For Multiple line -
/* ------------------------
--- Statement line ---
---------------------------*/
Hiding HTML elements can be done by changing the display style:
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript can hide HTML elements</title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
Showing hidden HTML elements can also be done by changing the display style:
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript can show hidden HTML elements</title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
A variable is an identifier that can store values. These values can be changed during the execution of script.
Variable are declared in JavaScript with var keyword.
Example
<DOCTYPE html>
<html>
<head>
<title>using variable</title>
</head>
<body>
<h1>Use in variable in js</h1>
<script>
var a;
a=50000;
document.write(a);
</script>
</html>
Or
<script>
var a;
a=50000;
document.write(“a”);
</script>
An operator is a type of symbol that decide what we want to perform (operation) on a data, which we call an operator.
The data is given an expression is called an Operands.
Like, 25 + 4 – 16
Number is operand
Symbol is operator
Arithmetic Operator
Assignment Operator
Logical Operator
Bitwise Operator
Comparison Operators
Arithmetic Operator
These Symbols is used for Mathematical Computations.
Example
<!DOCTYPE html>
<html>
<head>
<title>Arithematic Operator</title>
</head>
<body>
<center><h1><u>Arithematic Operator</u></h1>
<h2>Addition</h2>
<script>
var a=5,b=2,sum;
sum=a+b;
document.write(sum);
</script>
<h2>Subtraction</h2>
<script>
var a=5,b=2,sub;
sub=a-b;
document.write(sub);
</script>
<h2>Multiplication</h2>
<script>
var a=5,b=2,mul;
mul=a*b;
document.write(mul);
</script>
<h2>Division</h2>
<script>
var a=5,b=2,div;
div=a/b;
document.write(div);
</script>
<h2>Modulus (Remainder)</h2>
<script>
var a=5,b=2,rem;
rem=a%b;
document.write(rem);
</script>
<h2>Increament</h2>
<script>
var a=5;
a++;
document.write(a);
</script>
<h2>Decrement</h2>
<script>
var a=5;
a--;
document.write(a);
</script>
</center>
</body>
</html>
Assignment Operator
Assignment operators assign values to left operand based on right operand, equal (=) operates is used to assign values.
Example
<!DOCTYPE html>
<html>
<head>
<title>Assignment Operator</title>
</head>
<body>
<center><h1><u>Assignment Operator</u></h1>
<script>
var a;
a=15;
a+=24; //a=a+24
document.write(a);
</script>
</center>
</body>
</html>
Logical Operator
Logical operators are used to determine the logic between variables or values.
&& (Logical And)
<!DOCTYPE html>
<html>
<head>
<title>Logical And</title>
</head>
<body>
<center><h3><u>Logical And</u></h3>
<script>
var a=6, b=12;
document.write((a>2)&&(b<10));
</script>
</center>
</body>
</html>
|| (Logical Or)
<!DOCTYPE html>
<html>
<head>
<title>Logical Or</title>
</head>
<body>
<center><h3><u>Logical Or</u></h3>
<script>
var a=6, b=12;
document.write((a>2)||(b<10));
</script>
</center>
</body>
</html>
! (Logical Not)
<!DOCTYPE html>
<html>
<head>
<title>Logical Not</title>
</head>
<body>
<center><h3><u>Logical Not</u></h3>
<script>
var a=6;
document.write(!a<2);
</script>
</center>
</body>
</html>
Bitwise Operator
Bitwise operators evaluate and perform specific bitwise expression.
& (Bitwise And)
<!DOCTYPE html>
<html>
<head>
<title>Bitwise And</title>
</head>
<body>
<center><h3><u>Bitwise And</u></h3>
<script>
var a=6, b=13;
Document.write(a&b);
</script>
</center>
</body>
</html>
| (Bitwise Or)
<!DOCTYPE html>
<html>
<head>
<title>Bitwise Or</title>
</head>
<body>
<center><h3><u>Bitwise Or</u></h3>
<script>
var a=6, b=13;
Document.write(a|b);
</script>
</center>
</body>
</html>
^ (Exclusive Or)
<!DOCTYPE html>
<html>
<head>
<title>Exclusive Or</title>
</head>
<body>
<center><h3><u>Exclusive Or</u></h3>
<script>
var a=6, b=13;
Document.write(a^b);
</script>
</center>
</body>
</html>
~ (Complement)
<!DOCTYPE html>
<html>
<head>
<title>Complement</title>
</head>
<body>
<center><h3><u>Complement</u></h3>
<script>
var a=6;
document.write(~a);
</script>
</center>
</body>
</html>
Note-
Formula-
-(value+1)
-(6+1)
-7 Answer
<< (Left Shift Operator)
<!DOCTYPE html>
<html>
<head>
<title>Left Shift Operator</title>
</head>
<body>
<center><h3><u>Left Shift Operator</u></h3>
<script>
var a=6;
Document.write(a<<2);
</script>
</center>
</body>
</html>
>> (Right Shift Operator)
<!DOCTYPE html>
<html>
<head>
<title>Right Shift Operator</title>
</head>
<body>
<center><h3><u>Right Shift Operator</u></h3>
<script>
var a=6;
document.write(a>>2);
</script>
</center>
</body>
</html>
Comparison Operators
Comparison operator determines the two operands satisfied the given condition. It returns either true or false.
Example
<!DOCTYPE html>
<html>
<head>
<title>Comparison Operator</title>
</head>
<body>
<h3><u>Comparison Operator</u></h3>
<ul>
<li>
<script>
var a=2,b=2;
document.write(a==b);
</script>
</li>
<li>
<script>
var a=2,b='2';
document.write(a===b);
</script>
</li>
<li>
<script>
var a=2,b=5;
document.write(a!=b);
</script>
</li>
<li>
<script>
var a=8,b='6';
document.write(a!==b);
</script>
</li>
<li>
<script>
var a=8,b=6;
document.write(a>b);
</script>
</li>
<li>
<script>
var a=8,b=6;
document.write(a<b);
</script>
</li>
<li>
<script>
var a=8,b=6;
document.write(a>=b);
</script>
</li>
<li>
<script>
var a=8,b=6;
document.write(a<=b);
</script>
</li>
</body>
</html>
Conditional statements are used to decide the flow of execution based on different conditions. If a condition is true, you can perform one action and if the condition is false, you can perform another action.
If statement
If…else statement
If....else...if statement
Switch statement
If Statement
This statement is used to execute statement only if a specified condition is true.
Example
<script>
var a=4;
if(a>0)
{
document.write("Positive number");
}
</script>
Ques: - A JavaScript program that displays “Good Morning!” if and only if time is less than 12 hours on web page otherwise page will remain blank.
Sol:-
<!DOCTYPE html>
<html>
<head>
<title>if statement</title>
</head>
<body>
<script>
if(new Date().getHours()<12)
{
document.write("Good Morning!");
}
</script>
</body>
</html>
If…statement
This statement is an extension of the simple if statement. It permits one of two statement or group of statement depending upon the logical test.
Example
<script>
var a=-7;
if(a>0)
{
document.write("Positive number");
}
else
{
document.write("Negative number")
}
</script>
Ques:- A JavaScript program that displays “Good Morning” if time is less than 12 hours otherwise it shows “Good Day” on the document.
Sol:-
<!DOCTYPE html>
<html>
<head>
<title>if...else statement</title>
</head>
<body>
<script>
if(new Date().getHours()<12)
{
document.write("Good Morning");
}
else
{
document.write("Good Day");
}
</script>
</body>
</html>
If…else…if statement
This statement is further an extension of the if…else…statement. This statement is useful for selecting one of many sets of statements to execute.
Example
<script>
var a=70;
if(a>0)
{
document.write("Positive Number");
}
else if(a<0)
{
document.write("Negative Number");
}
else
{
document.write("Number is Zero");
}
</script>
Ques:-Write a program to check whether a number input through prompt box is Zero, Odd or Even.
Sol:-
<!DOCTYPE html>
<html>
<head>
<title>if...else...if statement</title>
</head>
<body>
<script>
var n=prompt("Enter your number:","Type your number here");
if(n==0)
alert("The number is zero!");
else if (n%2)
alert("The number is odd!");
else
alert("The number is even!");
</script>
</body>
</html>
Switch Statement
A switch statement is used to execute different statement based on different conditions. It provides a better alternative than a long series of if…else if…statements.
Example
<script>
var num=3;
switch(num)
{
case 1:
document.write("One");
break;
case 2:
document.write("Two");
break;
case 3:
document.write("Three");
break;
default:
document.write("Number is invalid");
}
</script>
Ques:-To compute the day of week (in words) while you input the date within prompt dialog box.
Sol:-
<!DOCTYPE html>
<html>
<head>
<title>Switch statement</title>
</head>
<body>
<script>
var d=new Date(prompt("Enter your Date of Birth (e.g. May 28, 2000)","Month DD, YYYY"))
dy=d.getDay()
switch (dy)
{
case 0:
document.write("It was <b>Sunday</b> on that day.")
break
case 1:
document.write("It was <b>Monday</b> on that day.")
break
case 2:
document.write("It was <b>Tuesday</b> on that day.")
break
case 3:
document.write("It was <b>Wednesday</b> on that day.")
break
case 4:
document.write("It was <b>Thursday</b> on that day.")
break
case 5:
document.write("It was <b>Friday</b> on that day.")
break
case 6:
document.write("It was <b>Saturday</b> on that day.")
break
default:
document.write("Please input a valid Date in? prescribed format!!!")
}
</script>
</body>
</html>
There are three kinds of popup boxes-
Alert box
Confirm box
Prompt box
Alert box
Alert( ) method of window object creates a small dialog box with a short text message and “OK” command button called alert box.
Example
<script>
alert(“hii guys”);
</script>
Confirm box
Confirm box is used if we want the user to verify and confirm the information. The user will have to click either “OK” or “Cancel” buttons.
Example
<script>
Confirm(“Are you agree to our conditions.”);
</script>
Prompt box
Prompt box allows getting input from the user. We can specify the default text for the text field. The information submitted by the user from prompt() can be stored in a variable.
Example
<script>
Prompt(“Enter your Password”);
</script>
Every Variable has a data type that tells what kind of data is being stored in a variable.
There are two types of data types-
Primitive data type
Non-primitive data type
Primitive data type
The predefined data types provided by JavaScript language are known as primitive data types. Primitive data types are also known as in-built types.
Types of primitive data types
String
Number
Boolean
Undefined
String:- The string data type in JavaScript represents a sequence of characters that are surrounded by single or double quotes.
Example
<script>
var a=”Vimala Gurukul”;
document.write(a+”<br>”);
document.write(typeof a);
</script>
Number:- Number data type in javascript can be used to hold decimal values as well as values without decimals.
Example
<script>
var a=45;
document.write(a+”<br>”);
document.write(typeof a);
</script>
Boolean:- The Boolean data type can accept only two values i.e. true and false.
Example
<script>
var a=4;
var x=(a==4);
document.write(x+”<br>”);
document.write(typeof x);
</script>
Undefined:- The meaning of undefined is ‘value is not assigned’.
Example
<script>
var a;
var x=(a==3)
document.write(a+”<br>”);
document.write(typeof a);
</script>
Non-Primitive data type
The data types that are derived from primitive data types of the JavaScript language are known as non-primitive data types.
Types of non- primitive data types
Array
Object
Array:- An array is an object that can store multiple values at once
Example
<script>
var a=[4,6,7,8,”gurukul”];
document.write(a+”<br>”);
document.write(typeof a);
</script>
Object:-An object in JavaScript is an entity having properties and methods. Everything is an object in JavaScript.
Example
<script>
Var cap={color:”red”,price:500,company:”xyz”};
Document.write(cap.color+”<br>”);
Document.write(typeof cap);
</script>
Common HTML Event
onchange
Example
<select id="mySelect" onchange="myFunction()">
<option value="Mobile">Mobile</option>
<option value="Laptop">Laptop</option>
<option value="Tablet">Tablet</option>
<option value="Smartwatch">Smartwatch</option>
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
onclick
Example
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Vimala Gurukul";
}
</script>
onmouseover / onmouseout
Example
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0"
src="smiley.gif" alt="Smiley" width="32" height="32">
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
onkeydown / onkeyup
Example
<input type="text" id="demo" onkeydown="keydownFunction()"
onkeyup="keyupFunction()">
<script>
function keydownFunction() {
document.getElementById("demo").style.backgroundColor = "skyblue";
}
function keyupFunction() {
document.getElementById("demo").style.backgroundColor = "pink";
}
</script>
onload
Example
<body onload=”myFunction()”>
<script>
function myFunction() {
alert("Page is Successfully loaded");
}
</script>
HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns false,
to prevent the form from being submitted:
JavaScript Example
function validateForm()
{
let x = document.forms["myForm"]["fname"].value;
if (x == "")
{
alert("Name must be filled out");
return false;
}
}
The function can be called when the form is submitted:
HTML Form Example
<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
