UNIT 2ND -: Scripting Language
TOPIC -: JAVA SCRIPT
(Introduction)
By -: KARAM HANS PURI
MCA (UGC-NET)
TOPIC -: JAVA SCRIPT
Introduction -:
JavaScript is a light-weight programming
language used by several websites for
scripting web pages.
It introduced in 1995 for adding programs to
the web pages in a browser.
With JavaScript, users can build web
applications to interact directly without
reloading the page every time.
JavaScript has no connectivity with Java
programming language.
TOPIC -: JAVA SCRIPT
Features of JavaScript -:
All popular web browsers support JavaScript
& provide built-in execution environments.
JavaScript follows the syntax and structure
of C programming language.
JavaScript is a weakly typed language,
where certain types are implicitly cast
(depending on the operation).
It is a case-sensitive language.
TOPIC -: JAVA SCRIPT
History of JavaScript -:
In 1995, Marc Andreessen coined the first
code of Javascript named 'Mocha'.
Later, the marketing team replaced the
name with 'LiveScript'.
But, due to trademark & certain other
reasons, in December 1995, the language
was finally renamed to 'JavaScript‘.
TOPIC -: JAVA SCRIPT
Application of JavaScript -:
Java script is use to create interactive
websites along with
Client-side validation
Dynamic drop-down menus
Displaying date and time
Displaying pop-up windows and dialog
boxes (like alert, confirm & prompt)
Displaying clocks etc.
TOPIC -: JAVA SCRIPT
Java Script Example -:
<script >
document.write("Hello JavaScript");
</script>
script tag specifies that we are using
JavaScript.
The document.write() function is used to
display dynamic content through
JavaScript.
TOPIC -: JAVA SCRIPT
JavaScript code can be write at 3 places as
1. Within body tag with script tag
2. Within head tag with script tag
3. External JavaScript file with .js extension
TOPIC -: JAVA SCRIPT
1) Java script Code within the body tag -:
Example to displays alert dialog box.
<html>
<head>
<title>java script demo</title>
</head>
<body>
<script >
alert("Hello world");
</script>
</body>
</html>
TOPIC -: JAVA SCRIPT
Output -:
TOPIC -: JAVA SCRIPT
1) Java Script Code within Head tag -:
<html><head>
<script type="text/javascript">
function msg(){ alert("Hello world"); }
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button”value="click”onclick="msg()"/>
</form>
</body> </html>
TOPIC -: JAVA SCRIPT
External JavaScript file -:
It provides code re usability because single
JavaScript file can be used in several html
pages.
File must be saved by .js extension.
3) Code in external java script file -:
message.js file // external java script file
function msg(){
alert("Hello world");
}
TOPIC -: JAVA SCRIPT
<html>
<head>
<script type="text/javascript" src="message.js">
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button"value="click" onclick="msg()"/>
</form>
</body>
</html>
TOPIC -: JAVA SCRIPT
JavaScript Comment -:
JavaScript comments are used to add
information about the code, warnings or
suggestions.
It is ignored by the JavaScript engine
embedded in the browser.
Advantages -:
To make code easy to understand
To avoid the unnecessary code
TOPIC -: JAVA SCRIPT
Types of JavaScript Comments -:
There are two types of comments in
JavaScript such as
* Single-line Comment -:
Syntax -:
// Comment use for single line
* Multi-line Comment -:
Syntax -:
/* this is multiline comment
used for multi line */
THANK YOU
UNIT 2ND -: Scripting Language
TOPIC -: JAVA SCRIPT (Variables &
Data Types)
By -: KARAM HANS PURI
MCA (UGC-NET)
TOPIC -: JAVA SCRIPT
JavaScript Variable -:
A JavaScript variable is simply a name of
storage location.
There are two types of variables as local &
global variable.
To declaring a JavaScript variable or identifiers
like C language. means
Name must start with a letter (a to z or A to Z),
underscore( _ ), or dollar( $ ) sign.
After first letter we can use digits (0 to 9).
JavaScript variables are case sensitive.
TOPIC -: JAVA SCRIPT
Example -:
Correct JavaScript variables
var x = 10;
var _value=“ravi";
Example -:
Incorrect JavaScript variables
var 123=30;
var *aa=320;
TOPIC -: JAVA SCRIPT
Example-:
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
Output -:
30
TOPIC -: JAVA SCRIPT
Local variable -:
Local variable is declared inside block or
function. It is accessible within the function
or block only.
Example-:
<script>
function abc(){
var x=10;//local variable
}
</script>
TOPIC -: JAVA SCRIPT
Global variable -:
global variable is accessible from any function.
A variable declared outside the function or with
window object is known as global variable.
Example-:
<script>
var data=200;//global variable
function a(){
document.write(data);
}
a();//calling JavaScript function
</script>
TOPIC -: JAVA SCRIPT
Data Types -:
There are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language,
means no need to specify type of the variable.
You need to use var to specify any type of
values such as numbers, strings etc. For
example:
var a=40;//holding number
var b="Rahul";//holding string
TOPIC -: JAVA SCRIPT
JavaScript Operators -:
JavaScript operators are used to perform
operations on operands. For example:
var sum=10+20; // here operators are + and =
following types of operators in JavaScript as
Arithmetic Operators
Comparison (Relational) Operators
Bitwise Operators
Logical Operators
Assignment Operators
Special Operators
TOPIC -: JAVA SCRIPT
Arithmetic Operators -:
Arithmetic operators are used to perform
arithmetic operations on the operands.
TOPIC -: JAVA SCRIPT
Comparison Operators -:
The JavaScript comparison operator
compares the two operands.
TOPIC -: JAVA SCRIPT
Bitwise Operators -:
The bitwise operators perform bitwise
operations on operands.
TOPIC -: JAVA SCRIPT
Logical Operators -:
The following operators are known as
JavaScript logical operators.
TOPIC -: JAVA SCRIPT
Assignment Operators -:
The following operators are known as
JavaScript assignment operators.
TOPIC -: JAVA SCRIPT
Special Operators -:
The following operators are known as
JavaScript special operators.
THANK YOU
UNIT 2ND -: Scripting Language
TOPIC -: JAVA SCRIPT(if-else
statement)
By -: KARAM HANS PURI
MCA (UGC-NET)
TOPIC -: JAVA SCRIPT
JavaScript If-else -:
It is used to execute the code whether
condition is true or false.
There are 3 forms of if statement in
JavaScript as
1. if Statement
2. if else statement
3. if else if statement
TOPIC -: JAVA SCRIPT
JavaScript If statement -:
It evaluates the content only if expression is
true.
Syntax -:
if (expression) {
//content to be evaluated
}
TOPIC -: JAVA SCRIPT
Flowchart If statement
TOPIC -: JAVA SCRIPT
Example -:
<script>
var a=20;
if(a>10) {
document.write(“a is greater than 10");
}
</script>
Output-:
a is greater than 10
TOPIC -: JAVA SCRIPT
If...else Statement -:
It evaluates the content whether condition
is true of false.
Syntax -:
if(expression){
// if condition is true
}
else{
// if condition is false
}
TOPIC -: JAVA SCRIPT
Flowchart of If...else statement -:
TOPIC -: JAVA SCRIPT
Example -:
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
Output-:
a is even number
TOPIC -: JAVA SCRIPT
If...else if statement -:
It evaluates the content only if expression is true from several
expressions.
Syntax -:
if(expression1){
// if expression1 is true
}
else if(expression2){
//if expression2 is true
}
else if(expression3){
//if expression3 is true
}
else{
// if no expression is true
}
TOPIC -: JAVA SCRIPT
Example -:
<script>
var a=20;
if(a==10){
document.write("a is equal to 10"); }
else if(a==15){
document.write("a is equal to 15"); }
else if(a==20){
document.write("a is equal to 20"); }
else{
document.write("a is not equal to 10, 15 or 20"); }
</script>
Output -:
a is equal to 20
TOPIC -: JAVA SCRIPT
Demo Programme-:
1. Write a program to check if a number is
positive or not.
2. Write a program to check given student
marks in grade. Here grade A>75, grade
B>=60, grade C<60.
THANK YOU
UNIT 2ND -: Scripting Language
TOPIC -: JAVA SCRIPT(Function)
By -: KARAM HANS PURI
MCA (UGC-NET)
TOPIC -: JAVA SCRIPT
Functions -:
functions are used to perform sub operations.
We can call function many times in our
program.
Mainly two advantages of functions are Code
reusability, Less coding.
Syntax -:
function functionName ([arg1, arg2, ...argN]){
//code to be executed
}
Functions can have 0 or more arguments.
TOPIC -: JAVA SCRIPT
Example -:
<script>
function msg(){
alert("hello! this is message");
}
</script>
// Html code for java script function call
<input type="button" onclick="msg()" valu
e="call function"/>
TOPIC -: JAVA SCRIPT
Function with Arguments -:
<script>
function getcube (number){
alert(number*number*number);
}
</script>
// Html code for cube a number by java script
<form>
<input type="button" value="click" onclick="get
cube(4)"/>
</form>
TOPIC -: JAVA SCRIPT
Function with Return Value -:
<script>
function getInfo(){
return "hello How r u?";
}
</script>
// Html code for write Java script messege
<script>
document.write(getInfo());
</script>
Output -:
hello How r u?
TOPIC -: JAVA SCRIPT
Function Object -:
Function constructor is used to create a
new Function object.
Syntax-:
new Function ([arg1[, arg2[, ....argn]],] funct
ion Body)
TOPIC -: JAVA SCRIPT
Function Object Examples -:
//To display the sum of given numbers
<script>
var add=new Function("num1","num2","ret
urn num1+num2");
document.write (add(2,5));
</script>
Output: 7
TOPIC -: JAVA SCRIPT
//To display the power of a value
<script>
var pow=new Function("num1","num2","ret
urn Math.pow(num1,num2)");
document.write(pow(2,3));
</script>
Output: 8
TOPIC -: JAVA SCRIPT
Demo Programme -:
1. Write a program to sum two numbers with
the help of function (without argument,
with argument & with function object).
2. Write a program to display student marks
on click a button (with a function call).
THANK YOU
UNIT 2ND -: Scripting Language
TOPIC -: JAVA SCRIPT(Objects)
By -: KARAM HANS PURI
MCA (UGC-NET)
TOPIC -: JAVA SCRIPT(Objects)
JavaScript Variables -:
JavaScript variables are containers for data
values.
This code assigns a simple value (Fiat) to
a variable named car as
Syntax -:
let car = "Fiat";
TOPIC -: JAVA SCRIPT(Objects)
// Java script simple variable example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// Create a Variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = "Car: " + car;
</script>
</body>
</html>
Output -: Car: Fiat
TOPIC -: JAVA SCRIPT(Objects)
JavaScript Objects -:
Objects are variables too. But objects can
contain many values.
This code assigns many values (Fiat, 500,
white) to an object named car:
Syntax -:
const car = {type:"Fiat", model:"500",
color:"white"};
Note-:
◦ It is a common practice to declare objects with
the const keyword.
TOPIC -: JAVA SCRIPT(Objects)
// Java script Object example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// Create an Object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display Data from the Object:
document.getElementById("demo").innerHTML =
"The car type is " + car.type;
</script>
</body>
</html>
Output -: The car type is Fiat
TOPIC -: JAVA SCRIPT(Objects)
JavaScript Object Definition -:
We define a JavaScript Object by
1. Using an Object Literal
2. Using the new Keyword
3. Using an Object Constructor
JavaScript Object Literal -:
An object literal is a list of name:value pairs inside curly
braces {}.
{firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"}
Note-:
◦ name:value pairs are also called key:value pairs.
◦ object literals are also called object initializers.
TOPIC -: JAVA SCRIPT(Objects)
Creating a JavaScript Object -:
JavaScript object with 4 properties:
Examples -:
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Spaces and line breaks are not important. So
// Create an Object
const person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Example creates an empty JavaScript object, and then adds 4
properties:
// Create an Object
const person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue“;
TOPIC -: JAVA SCRIPT(Objects)
Using the new Keyword -:
JavaScript object using new Object(), and then adds 4 properties:
Example -:
// Create an Object
const person = new Object();
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Note-:
The examples above do exactly the same.
But, there is no need to use new Object().
For readability, simplicity and execution speed, use the object
literal method.
Object Properties -:
The named values, in JavaScript objects,
are called properties.
Example -:
Property Value
firstName John
lastName Doe
Age 50
EyeColor blue
TOPIC -: JAVA SCRIPT(Objects)
Accessing Object Properties -:
We can access object properties in two
ways:
objectName.propertyName
objectName["propertyName"]
Examples -:
person.lastName;
person["lastName"];
JavaScript Object Methods -:
Methods are actions that can be performed on
objects.
Methods are function definitions stored
as property values.
Property Property Value
firstName John
lastName Doe
fullName function() {return this.firstName +
" " + this.lastName;}
Example -:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Note -:
◦ In the example above, this refers to the person object:
◦ this.firstName means the firstName property of person.
◦ this.lastName means the lastName property of person.
JavaScript Objects are Mutable -:
Objects are mutable: They are addressed by reference, not by value.
The object x & person share the same memory address.
Any changes to x will also change person:
Example -:
//Create an Object
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// Create a copy
const x = person;
// Change Age in both
x.age = 10;
THANK YOU
UNIT 2nd -: Scripting & Networking
TOPIC -: JAVA SCRIPT(Form
Validations)
By -: KARAM HANS PURI
MCA (UGC-NET)
TOPIC -: JAVA SCRIPT
JavaScript Form Validation-:
It is important to validate the form
submitted by the user because it can have
inappropriate values.
JavaScript provides facility to validate the
form on the client-side so data processing
will be faster than server-side validation.
Through JavaScript, we can validate name,
password, email, date, mobile numbers and
more fields.
TOPIC -: JAVA SCRIPT
// HTML Code to check valid name & password
<body>
<form name="myform" method="post" action=
"abc.jsp" onsubmit="return validateform()”>
Name:
<input type="text" name="name“><br/>
Password:
<input type="password" name="pass"><br/>
<input type="submit" value="register">
</form>
</body>
TOPIC -: JAVA SCRIPT
// Java script code to validate name & Password
<script>
function validateform() {
var name=document.myform.name.value;
var password=document.myform.pass.value;
if (name==null || name=="") {
alert("Name can't be blank");
return false;
}else if(password.length<6) {
alert("Password must be at least 6 characters long.");
return false;
}
else{alert(“ok");} }
</script>
TOPIC -: JAVA SCRIPT
// Html code to check Password validation
<body>
<form name="f1" action="register.jsp" onsubmit="ret
urn matchpass()">
Password:
<input type="password" name="password" /><br/>
Re- enter Password:
<input type="password" name="password2"/><br/
>
<input type="submit">
</form>
</body>
TOPIC -: JAVA SCRIPT
// Java script code for Password validation
<script type="text/javascript">
function matchpass(){
var firstpass=document.f1.password.value;
var secondpass=document.f1.password2.value;
if (firstpass==secondpass) {
return true; }
else{
alert("password must be same!");
return false; }
}
</script>
TOPIC -: JAVA SCRIPT
//Html code for number validation
<body>
<form name="myform" onsubmit="return valid
ate()" >
Number:
<input type="text" name="num">
<span id="numloc"></span>
<br/>
<input type="submit" value="submit">
</form>
</body>
TOPIC -: JAVA SCRIPT
// Java script code for Number Validation
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML
="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
TOPIC -: JAVA SCRIPT
Java Script email validation -:
We can validate the email by the help of
JavaScript such as:
email id must contain the @ and .
Character.
There must be at least one character before
and after the @.
There must be at least two characters
after . (dot).
TOPIC -: JAVA SCRIPT
// Html form to validate email
<body>
<form name="myform" method="post" actio
n="#" onsubmit="return validateemail();">
Email :
<input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
</body>
TOPIC -: JAVA SCRIPT
//Java script to validate email
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotpositio
n+2>=x.length){
alert("Please enter a valid e-mail address \
n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false; } }
</script>
THANK YOU
