Scribd
Upload
4K views68 pages

WT Unit Ii

Web Technologies UNIT II

Uploaded by

suma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4K views68 pages

WT Unit Ii

Web Technologies UNIT II

Uploaded by

suma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 68

UNIT-II

What is Script?
Simple easy and weakly typed program.
The term “scripting language” is also loosely to refer
dynamic high-level general-purpose languages, such as
JavaScript, VBScript, Perl, and Python, with the term
“script”.
Scripting languages are becoming more popular due to
the emergence of web-based applications.
Also the increase in computer performance over the past
few years has promoted a increase in the power and
sophistication of scripting languages.
Weakly or Loosely (Some of the things not
mandatory)
Variable declaration not compulsory
Programmer friendly
Introduction to Java Scripts:
JavaScript is a scripting language i.e., a
lightweight programming language that is
interpreted by the browser engine when the
web page is loaded.
JavaScript it the Scripting language of HTML and
the web
Original name is Live Script
Syntax is very close to C-language
JavaScript was created by Brendan Eich at
Netscape and was first introduced in December
1995 under the name of LiveScript.
It was rather quickly renamed JAVASCRIPT.
JavaScript's official name is ECMA
Script(European Computer Manufacturers
ATTRIBUTE
SYNTAX:

TAG PARAMETE
RS

OR
OBJEC
METHO
T
D

If any program with HTML tags then save the


program with .HTML
JAVA SCRIPT STATEMENTS:
window.document.write
document.write
Window----web-browser(class)
Document---web page(object)
write,writeln---method(ln– displays space)
Comments:
Non-executable statements
//-single
/*………..*/
Semicolon are optional when we are
implementing java script statements serially.
Semicolon are compulsory when we are
implementing java script statements serially.
Java Script code is a sequence of statements.
Each statement is executed by the browser in
the sequence they are written.
Block: Collection of statements.
Statements may contain one or more than one
Block starts with {………..}
Java script in HTML file:
There is a flexibility given to include java Script code
anywhere in HTML document.
Following most preferred ways to include Java Script in
HTML file:
1.Script in <head>…..</head> section
2.Script in <body>…..</body>section
3.Script in <body>…..</body>& <head>….</head>
4.Script in external file and then include in
<head>….</head> section
By default Java Script location is Head area.
Head is logical part of the web page.
Body is the visual part of the web page.
We are writing logic implementation in the head section
Output in the body section
1.Script in <head>…..</head> section:

<head>
<script type=“text/javascript”
language=“javascript”>
Document.write(“HELOO<br>”);
Document.write(“HI<br>”);
</script>
</head>
2.Script in <body>…..</body>section:

<body>
<script type=“text/javascript”
language=“javascript”>
document.write(“HELOO<br>”);
document.write(“HI<br>”);
</script>
<body>
3.Script in <body>…..</body>&
<head>….</head>:

<head>
<script type=“text/javascript” >
document.write(“Hello Iam from HEAD”);
</script>
</head>
<body>
<script language=“javascript”>
document.write(“Hello Iam from BODY
section”);
document.write(“HI<br>”);
</script>
External JavaScript
 The script code can be written in separate file and save
with .js extension.
 The js file does not contain script tag
In real time industry generally we are using
external java script.

STEP-1 STEP-2 EXE


It contains only Html files
JAVA SCRIPT code .htm Runs on
any
It is equal to .htm
. major
normal text file web
type=“text/javas .
N times browser
cript”
JavaScript Display Possibilities

JavaScript can "display" data in different ways:

Writing into an HTML element, using


innerHTML.
Writing into the HTML output using
document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using
console.log().
Using innerHTML
To access an HTML element, JavaScript can use
the document.getElementById(id) method.
The id attribute defines the HTML element.
The innerHTML property defines the HTML
content:
Using console.log()
For debugging purposes, you can use the
console.log() method to display data.
Pop-up Boxes:
Alert box
Confirm box
Prompt box
Alert Box:
“warning”
Alert is an often used if you want to make sure
information comes through the user.
When an alert box pops-up the user will have
click “ok” to proceed.
Syntax:
alert(“message”)
Alert is the method inside window object
Escape sequence which are useful to display
multiple lines on the alert box
alert(“hi\n hello\t”)
Confirm Box:
A confirm box is often used if you want the user
to verify or accept something.
When a confirm box pops up, the user will have
to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If
the user clicks "Cancel", the box returns false.
Syntax
window.confirm("sometext");
Prompt Box
A prompt box is often used if you want the user
to input a value before entering a page.
When a prompt box pops up, the user will have
to click either "OK" or "Cancel" to proceed after
entering an input value.
If the user clicks "OK" the box returns the input
value. If the user clicks "Cancel" the box returns
null.
Syntax
window.prompt("sometext","defaultText");
JavaScript Variables ( let)
A JavaScript variable is simply a name of storage
location.
There are two types of variables in JavaScript : local
variable and global variable.
JavaScript uses reserved keyword var to declare a
variable.
 A variable must have a unique name.
 You can assign a value to a variable using equal to
(=) operator when you declare it or before using it.
Syntax:
var <variable-name>;
var <variable-name> = <value>;
let <variable-name>;
let <variable-name> = <value>;
There are some rules while declaring a
JavaScript variable (also known as identifiers).
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), for
example value1.
JavaScript variables are case sensitive, for
example x and X are different variables.
Example: Variable Declaration &
Initialization
var a= 1; // variable stores numeric value
let b = 'two'; // variable stores string value
var c; // declared a variable without assigning a
value
Declare Variables in a Single Line:
Multiple variables can also be declared in a single line
separated by comma. Example: Multiple Variables in a
Single Line
var a = 1, b= 'two', c;
Declare a Variable without var Keyword:
JavaScript allows variable declaration without var keyword.
You must assign a value when you declare a variable
without var keyword. Example: Variable without var
Keyword
a= 1; b= 'two';
It is Not Recommended to declare a variable without var
keyword. It can accidently overwrite an existing global
variable.
Scope of the variables declared without var keyword become
global irrespective of where it is declared.
 Global variables can be accessed from anywhere in the web
page.
Variables in JavaScript are loosely-typed variables. It can
JavaScript Operators
Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
String Operator
Conditional Operator
JavaScript Data Types:
JavaScript includes data types similar to other
programming languages like Java or C#.
Data type indicates characteristics of data.
It tells the compiler whether the data value is
numeric, alphabetic, date etc., so that it can
perform the appropriate operation.
JavaScript includes primitive and non-primitive data
types as per latest ECMAScript 5.1.
Primitive Data Types
String
Number
Boolean
Null
Undefined
Non-primitive Data Type
Object
Date
Array
JavaScript is a dynamic or loosely-typed
language because a variable can hold value of
any data type at any point of time.
Primitive Data Type
Number:
 JavaScript has only one Number (numeric) data types. Number
data type can store normal integer, floating-point values.
 A floating-point represent a decimal integer with either
decimal points or fraction expressed (refer to another decimal
number).
String:
 String is a primitive data type in JavaScript.
 A string is textual content. It must be enclosed in single or
double quotation marks.
 Example: String literal
 "Hello World" 'Hello World'
 String value can be assigned to a variable using equal to (=)
operator.
 Example: String literal assigned to a variable
 var str1 = "Hello World";
 var str2 = 'Hello World';
Concatenation
A string is immutable in JavaScript, it can be
concatenated using plus (+) operator in
JavaScript.
Example: Example - String concatenation
var str = 'Hello ' + "World " + 'from ' +
‘TSWRDC ';
By string object (using new keyword):
The syntax of creating string object using new
keyword is given below:
var stringname=new String("string literal"
);
Here, new keyword is used to create instance
of string.
Boolean :
Boolean is a primitive data type in JavaScript.
Boolean can have only two values, true or false.
 It is useful in controlling program flow using
conditional statements like if..else, switch,
while, do..while.
Null :
You can assign null to a variable to denote that
currently that variable does not have any value
but it will have later on.
A null means absence of a value.
You can consider it a bug in JavaScript that
typeof null is an object. It should be null.
var myVar = null;
Undefined
In JavaScript, a variable without a value, has the
value undefined.
 The typeof is also undefined.
Undefined is also a primitive value in JavaScript.
 A variable or an object has an undefined value
when no value is assigned before using it.
 So you can say that undefined means lack of
value or unknown value.
Example:
var myVar;
alert(myVar); // undefined
Difference Between Undefined and Null
Undefined and null are equal in value but
different in type
The typeof operator is used to get the data type
(returns a string) of its operand.
The operand can be either a literal or a data
structure such as a variable, a function, or an
object.
The operator returns the data type.
Syntax
typeof operand or typeof (operand)
Non-primitive Data Type
Object:
A javaScript object is an entity having state and
behaviour (properties and method).
For example: car, pen, bike, chair, glass, keyboard,
monitor etc.
JavaScript is an object-based language.
Everything is an object in JavaScript.
JavaScript is template based not class based.
 Here, we don't create class to get the object. But, we
direct create objects.
There are 3 ways to create objects.
By object literal
By creating instance of Object directly (using new
keyword)
By using an object constructor (using new
keyword)
1) JavaScript Object by object literal
The syntax of creating object using object literal
is given below:
object={property1:value1,property2:value
2.....property N:valueN}
<html>
<body>
<script>
emp={id:16,name:”Kumar",salary:40000}
document.write(emp.id+" "+emp.name+"
"+emp.salary);
</script>
</body>
</html>
2) By creating instance of Object
 The syntax of creating object directly is given
below:
var objectname=new Object();
 Here, new keyword is used to create object.
<html>
<body>
<script>
var emp=new Object();
emp.id=117;
emp.name=“Rohith";
emp.salary=50000;
document.write(emp.id+"
"+emp.name+" "+emp.salary);
</script>
</body>
</html>
Date:
The JavaScript date object can be used to get year,
month and day. You can display a timer on the
webpage by the help of JavaScript date object.
 You can use different Date constructors to create
date object. It provides methods to get and set day,
month, year, hour, minute and seconds.
Array:
JavaScript arrays are used to store multiple
values in a single variable.
An array is a special variable, which can hold
more than one value at a time.
The syntax of creating array using array literal
is given below:
var arrayname=[value1,value2.....valueN];

As you can see, values are contained inside [ ]


and separated by , (comma).
Control Structures :
Control structures are used to control the logic of your
program .
1.If statement
2.While
3.do-while
4.for
5.Swith
6.Break
7.Continue
JavaScript if else Condition:
JavaScript includes if-else conditional statements to
control the program flow, similar to other programming
languages.
JavaScript includes following forms of if-else conditions:
if condition
if-else condition
else if condition
if condition:
Use if conditional statement if you want to execute
something based on some condition.
Syntax:
if(condition expression)
{
// code to be executed if condition is true
}
<html>
<head>
<title>
if conditional statement
</title>
<script language = "javascript">
var stdmarks;
stdmarks = prompt("enter student
marks" ,"stdmarks");
if(stdmarks<=60)
{
document.write("passed");
}
</script>
</head>
</html>
If-else statement
 If…ese statement is used to execute some
code if some certain condition is true and
another code if the condition is false.
if(condition)
{
code to be executed if condition is true
}
else
{
Code to be executed if condition is false
}
<html>
<head>
<title>
if else conditional statement
</title>
<script language = "javascript">
var stdmarks;
stdmarks = prompt("enter student
marks" ,"stdmarks");
if(stdmarks>=60)
{
document.write("passed");
}
else
{
document.write("failed");
}
</script>
</head>
</html>
Else-if ladder
 This statement is used to select one of many alternatives

if(condition1)
{ code to be executed if condition1 is true
}
else if(condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and condition2 are false
}
<html>
<head>
<title>
elseif conditional statement
</title>
<script language = "javascript">
var stdmarks;
stdmarks = prompt("enter student marks" ,"stdmarks");
if(stdmarks>=90)
document.writeln("GRADE A");
elseif(stdmarks>=80)
document.writeln("GRADE B");
elseif(stdmarks>=70)
document.writeln("GRADE C");
elseif(stdmarks>=60)
document.writeln("GRADE D");
else
document.writeln("failed grade");
</script>
</head>
</html>
Switch Case Statement
JavaScript switch statement evaluates a switch
condition, base on switch condition value matched
case will run until break or end of case statement.
Syntax
switch(expression)
{
case n:
code block
break;
case n:
code block
break;
default:
code block
}
Loops in Java Script
In Java there are three kinds of loops
1. for : loops through a block of code a
specified number of times
2. while : loops through a block of code
while a condition is true. The condition is
tested at beginning of the loop
3. do .. while : loops through a block of
code while a specified condition is true.
The condition is tested at the end of the
loop.
1. for loop:
The for loop is commonly used when you
know the number of iterations in advance.
Syntax:
for (initialization; condition;
increment/decrement)
{
// code to be executed
}
Example:
for (let i = 0; i < 5; i++)
{
console.log(i);
}
2. while loop:
The while loop continues to execute a block of code
as long as the specified condition evaluates to true.

Syntax:
while (condition) {
// code to be executed
}
Example:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
3. do-while loop:
Similar to the while loop, but it ensures that
the block of code is executed at least once,
as the condition is checked after the block.
Syntax:
do {
// code to be executed
} while (condition);
Example:
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
<html>
<head>
<title>
do-while loop
</title>
<script language = "javascript">
var i=0;
do
{
document.writeln("the number is :" +i);
document.writeln("<br>");
i++;
}while(i<=5);

</script>
</head>
</html>
Break and Continue
The break command will break the loop
and continue executing the code that
follows after the loop (if any)

The continue command will break the


current loop and continue with the next
value
Functions:
JavaScript functions are used to perform
operations.
We can call JavaScript function many times to reuse
the code.
A JavaScript function can be defined using function
keyword.
Advantage of JavaScript function
There are mainly two advantages of JavaScript
functions.
Code reusability: We can call a function several
times so it save coding.
Less coding: It makes our program compact. We
don’t need to write many lines of code each time to
perform a common task.
JavaScript Functions can have 0 or more arguments.
Syntax:
//defining a function function <function-
name>(parameter1, parameter2, parameter3)
{
// code to be executed
};
//calling a function <function-name>();
function parameters are listed inside the
parentheses () in the function definition.
Function arguments are the values received
by the function when it is invoked.
Inside the function, the arguments (the
parameters) behave as local variables.
Example:
<html>
<body>
<h1>Demo: JavaScript
function</h1>

<script>
function ShowMessage()
{
alert("Hello World!");
}

ShowMessage();
</script>
</body>
</html>
It is possible to return some value from the function
using return keyword .
We can pass some arguments to the function .
syntax :
functiondefinition : function my_function(str1,str2) { }
function call : my_function(“hi”,”hello”);
Function literals :
 Function literal is also used to create a function .
syntax : var variablename=function(arg1,arg2…)
{
statements ;
};
 This type of functions is referred in two ways :
1.By using variable name .
2.By using Function name .
 we can also create a function by using function constructor .
syntax :
var var_name=new Function(“arg1”,”arg2”,”body of function”);
Example:
<html>
<head>
<script type="text/javascript" src="myfun.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
myfun.js:
function msg(){
alert("Hello Javatpoint");
}
Syntax:
function functionname(arg1, arg2)
{
lines of code to be executed return val1;
}
<html> <head>
<script type="text/javascript">
var func = function(x,y){ return x*y };
function secondFunction(){
var result;
result = func(1,20);
document.write ( result );
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Call
Function">
</form>
</body> </html>
Recursion
 Recursion is a programming concept where a
function calls itself in its own definition. This can
be a powerful and elegant way to solve certain
types of problems. In JavaScript, as in many
other programming languages, you can use
recursion
function to solve{problems that can be broken
factorial(n)
down
// Baseinto smaller,
case: if n is 0 similar subproblems.
or 1, return 1
if (n === 0 || n === 1) {
return 1;
} else {
// Recursive case: n! = n * (n-1)!
return n * factorial(n - 1);
}
}
// Example usage:
let result = factorial(5); // calculates 5! = 5 * 4 * 3 * 2 * 1
= 120
console.log(result); // prints 120
Global functions
Global functions are functions that are
defined in the global scope and can be
accessed from anywhere in the code. These
functions are not bound to any particular
object or class and can be invoked directly.
Here are a few examples of commonly used
global functions in JavaScript:
alert("Hello, World!"); // Displays an alert
box
confirm("Are you sure?"); // Displays a
confirmation box
console.log("This
prompt("Enter youris a log message");
name:"); // Displays a
prompt box

You might also like