Web technology

UNIT I –INTRODUCTION

WEB TECHNOLOGY

TOPICS- INTRODUCTION
• History of Internet
• History of World Wide Web
• HTML 4.0 Protocols
• Object based Technology
• Java Script

The Internet
• The Internet is a global system of networked computers
together with their users and data

1960’s Telecommunications

• Packet Switching
– data to be transmitted is divided into small packets of
information and labeled to identify the sender and
recipient
– sent over a network and then reassembled at their
destination
– if any packet did not arrive or was not intact, original
sender requested to resend the packet

History of the Internet
• Government sponsored goal – to maintain
communication via computers even with threat of war
– no central authority
– Designed to operate while system is broken

Arpanet, 1969

• Advanced Research Projects Agency Network
• Enable sharing of supercomputer power
• 4 nodes
• 1971- expanded to 15 nodes
• 1972- expanded to 23 nodes

1970s Telecommunications

Local Area Networks
Email invented
UNIX developed
Newsgroups emerged

• TCP/IP established
• No longer primary research oriented
– Business applications added
• Domain Name System developed
– Assign names to host computers

TCP/IP
• TCP – transmission scheme for the internet hosts

• Protocol – rules that govern how different hosts on a network
communicate and share resources

• Internet protocol – addressing scheme to distinguish one
computer from another

• Many commercial interests
• Advertised on TV
• Ordinary people became publishers

Internet Characteristics
• Structure made up of millions of interconnected computers

• Users communicate and share information

• Uses fiber optic cables, satellites, phone lines, other
telecommunications media to send data back and forth

Web Concepts
Let’s start with the user

• To use the web you must have a computer or another “web-
ready” device, ex: Palm Pilot or Web phones*.

Need for connecting Internet
Your computer must have communications hardware
with installed drivers (software).

Modem card, ex: 56k Modem

Network* or NIC** card, ex: Linksys
Wireless Network card

Web Concepts
• Your computer must have Web service
– Modem and Dialup Internet Service Provider (ISP), ex: AOL

– *Digital Subscriber Line (DSL),
offered by phone company in non-rural areas
– *Internet Satellite, offered by satellite TV
– *Digital Cable, offered by cable TV
– *Dedicated LAN, ex: large corp.
networks or US govt.

WEB CONCEPTS
Your computer must be logged into the Web

Dialup has dialed, connected & user has
logged in
OR
DSL/Satellite/Cable modem is on and
connected

SIMPLE DSL
There are many types of network setups
• 56k Modem plugged into phone line (1 computer)
• AOL is a dialup service

Phone Dialup
Outlet Modem
Computer

USE OF CABLE AND DSL
• Cable/DSL/Satellite Modem plugged into
cable/DSL/satellite outlet .
• Uses special Category 5 (Cat 5 RJ45)
• Cable called patch cords

Cable/ Cable/DSL/
Satellite Satellite
Outlet Modem
Computer

Cable/DSL/Satellite with Hub
• Cable/DSL/Satellite Modem plugged into
cable/DSL/satellite outlet
• Requires 2 or more Internet Protocol (IP) connections
(like 2 separate phone numbers)

Cable/DSL Cable/DSL
Satellite Satellite Hub
Outlet Modem Computer

Computer

Cable/DSL/Satellite with Router/Switch
• Cable/DSL/Satellite Modem and Router/ Switch plugged into
cable/satellite outlet.

• Requires only 1 Internet Protocol (IP) connection

Cable/DSL Cable/DSL
Satellite Router/
Satellite Computer
Modem Switch
Outlet

Computer

Cable/Satellite with Wireless
Router/Switch
• Cable/Satellite Modem and wireless Router/Switch plugged
into cable/satellite outlet

• Replaces switch-to-computer cables, requires wireless
network cards.

Cable/ Wireless Computer
Cable/
Satellite Satellit Router/
Outlet e Switch
Modem
Computer

Firewalls-Networks
• Computer Firewalls are used to keep unwanted Internet
users from accessing your network
• Once online, you are vulnerable w/o a firewall
– Black Ice is an example of firewall software
Firewall

Cable/ Cable/ Router/
Satellit Satellite Switch
e Modem &
Outlet Firewall Computer

How the Web Works

Once your computer is logged in, it is assigned
an Internet Protocol (IP) address.
• Most networks (and all dialups) issue IPs on a per-login
basis, these are called Dynamic IPs
• Some networks issue these permanently, these are called
Fixed IPs
• Your IP is a 16-digit number which is used to identify
your computer to the Internet, ex:
208.127.007.123

How the Web Works
• Every time you request information from the Internet,
your IP is sent with the request, so the Internet knows
where to send the information.

• Every website has an IP address. The Universal
Resource Location (URL) like, www.yahoo.com is
translated to its IP address automatically for you.

 Router/switches that only need one IP address The
router keeps track of the network users so they can
share the IP address.

How the Web Works

Simple Example:
• You wants news so you type in:
http://www.msnbc.com/news/934483.asp?vts=072920030920
• MSN-BC receives the request, looks up the article and send it
back to you.

http://www.msnbc.com/news/934483.asp?vts=072920030920

Protocols supporting Web
 TCP
 handles conversion between messages and streams packets
 IP
 handles addressing of packets across networks
 TCP/IP
 enables packets to be sent across multiple networks using
multiple standards
 Telnet
 One of the earliest standards for exchanging transmission,
directly connect accounts on different systems.
 SMTP
 specifies another way of direct connection

Scripting Languages
• Client side and server side scripting Languages.
• Client side Scripting Client-side scripting generally refers to
the class of computer programs on the web that are
executed client-side, by the user's web browser.
• List of Client Scripting
Java Script
Jscript
VB Script
DHTML

Scripting Languages
• Server side Scripting Languages:

• Server-side scripting is a web server technology in which a
user's request is fulfilled by running a script directly on the
web server .

• It is usually used to provide interactive web sites that interface
to databases or other data stores.

• This is different from client-side scripting where scripts are run
by the viewing web browser, usually in JavaScript.

Server side Scripting
• The primary advantage to server-side scripting is the ability to
highly customize the response based on the user's
requirements, access rights, or queries into data stores.

• Perl scripts and shell scripts using the Common Gateway
Interface (CGI).

• Those scripts were executed by the operating system,
mnemonic coding and the results simply served back by the
web server

• ASP
– Microsoft designed solution allowing various languages inside
a HTML-like outer page.

– Primarily a Windows technology, but with limited support on
other platforms.

• ASP.NET
– ASP.NET is a set of web application development
technologies marketed by Microsoft.

– Programmers can use it to build dynamic web sites, web
applications and XML web services.

• LSP
 Lua Server Pages, LUA_(programming_language), is a fast scripting language
suitable for CPU and/or memory constrained systems.

 The LSP comes as a plugin to the Barracuda Embedded Web Server for small
business applications.

 LSP applications include a Content Management System and a Bulletin Board.

• PHP
– Common opensource solution based on including code in its own language into an HTML
page.
– Personal Home Page, Hypertext Preprocessor ,Recursive name Convention
• Server-side JavaScript
– A language generally used on the client side but also occasionally on the server side.

• SMX
– Lisp-like open source language designed to be embedded
into an HTML page.
• Server Side Includes
– A fairly basic system which is part of the common Apache
web server, used primarily for combining documents or
parts of documents on the server side into a single server
response.
• Ruby on Rails

• ColdFusion
– Cross platform tag-based commercial server side
scripting system.

• ESP
– ESP or Escapade was written in 1997 by Ed Carp, and
enjoys wide use in Europe, but has had limited
acceptance in the US.

• JSP
– A Java-based system for embedding Java-related code in
HTML pages.

• Lasso
– A Datasource neutral interpreted programming language
and cross platform server.

Scripting Languages
• Dynamic websites are also sometimes powered by custom
web application servers, for example the Python "Base HTTP
Server" library, although some may not consider this to be
server-side scripting.

• Python is a multi-paradigm programming language
(primarily functional, object oriented and imperative) which
has a fully dynamic type system and uses automatic memory
management; it is thus similar to Perl, Ruby, Scheme, and
Tcl-Tool Command Language.

Protocols Supporting HTML 4.0
• HTTP-Hyper text transfer Protocol

• SMTP-Simple Mail transfer Protocol

• IMAP-Internet Message Access Protocol

• POP-Post office Protocol

• MIME-Multipurpose Internet Mail Extension

Object based Technology
• With this technology Properly designed software trends
more reusable in all projects.

• Libraries of reusable components such as

MFC--Microsoft
JFC—Sun Microsystems
FCL(.Net framework)

Object Based Scripting Language
• Since objects are reusable we can use them in scripting
language they are more productive
• They are easily understood and easier to correct and modify.
• Java Script is one of popular object based scripting language
for Web.
• Browser portability is elusive goal
• Java script offers this portability

Java Script
• JavaScript is THE scripting language of the
Web!
• JavaScript is used in millions of Web pages to
improve the design,
• JavaScript is to validate forms, detect
browsers, create cookies, and much more.
• JavaScript was designed to add interactivity
to HTML pages

Java Script
• A scripting language is a lightweight programming language
• A JavaScript consists of lines of executable computer code
• A JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)

What can a JavaScript Do?
• JavaScript gives HTML designers a programming
tool
• JavaScript can put dynamic text into an HTML
page
• JavaScript can react to events
• JavaScript can be used to detect the visitor's
browser
• JavaScript can be used to validate data and
create cookies.

Inline javascript
• Example 1
<html>
<body> <scripttype="text/javascript">
document.write("Hello World!");
</script></body>
</html>
The browser will recognize it as a JavaScript command and
execute the code line. In this case the browser will write
Hello World! to the page:

Comment tag
• 
To hide the java script code in html we can use this HTML
comment tag.

Some browsers may not support this java script, in such cases
this comment tag can be used.
// This is the comment tag of the java script which can nullify
the effect of -- > html comment tag

Multi line Comments
• Multi line comments is same as used in ‘C’ Language.

• /* The code below will write one header and two paragraphs
*/
• Comments can be used in End of the lines also.
• <script type="text/javascript"> document.write("Hello"); //
This will write "Hello" document.write("Dolly"); // This will
write "Dolly" </script>

Head and Body
• JavaScripts in the body section will be executed WHILE the
page loads.
• JavaScripts in the head section will be executed when
CALLED.
<html>
<head> JAVA SCRIPT </head>
<body> <scripttype="text/javascript">
</script></body>
</html>

External JavaScript
• Here the common.js a external notepad file the java script
block will be loaded and used in any part of the browser
Difference between inline java script and external is that it is
a separate file.
Using External js is fast and speedy process, as the external
block will be in browser cache.
• <script type=‘text/java script src=common.js’>
</script>

Alert and Divisions

Alert boxes are used to stop any action in the browser it waits till the user
clicks ok or cancel.

<script type='text/javascript'>
alert(“Hello World”) </script>

We search a block in the given html page using java script

<body>
<div id='feedback'></div>
document.getElementById('feedback').innerHTML='Hello World!';

Divisions-Example

We divide the page in to inner division named feed back and
change the font color in the inner html

<html>
<body>
<div id='feedback'></div>
document.getElementById('feedback').innerHTML='<P><
font color=red>Hello World!</font>';
</script></body></html>

Java Script Sequential code

• Each statement is executed by the browser in the sequence they are
written.
• This example will write a header and two paragraphs to a web page.The
Curly braces indicates start and end of js block.

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

Variable
• A variable is a "container" for information you want to
store.
• We can refer to a variable by name to see its value or to
change its value.
• Rules for variable names:
• Variable names are case sensitive
• They must begin with a letter or the underscore character .
• When you declare a variable within a function, the variable
can only be accessed within that function. Which is called
local variable

Usage of Variable
<html>
<body><script type="text/javascript">

var name="Hege";Declaring variables
document.write(name);
document.write("<br>");

name="Tove";Assigning value to variables
document.write(name);

</script>
<p>The script above declares a variable,
assigns a value to it, change the value,
and displays the value again.</p>
</body>
</html>

Usage of Variables in JS
• In JS we give all the variables as Strings
• To convert the string in to integer or float we
have to include
Parse Float(String)
Parse Int(String)
Eg. ParseInt(‘77’) = 77
ParseInt(‘gjk0’) = NAN
The reprsentation can also be given accordingly
with base or radix. ParseInt(String,[,base])

• parseInt('123.45') // 124
• parseInt('77') // 77
• parseInt('099') // 0 (9 is not an octal digit)
• String begin with 0x and –0x are hexadecimal
numbers
• Strings begin with 0 are octal numbers.
• The arguments of Parse float or parse int will
be converted in to decimal numbers.

Converting Number in to strings
• a = a.toString() // This converts a to string
• b = b.toString() // This converts b to string
• (5.41).toString() // Result: the string '5.41'
• (Math.PI).toString() // Result: the string
'3.141592653589793'

Usage of Symbols in JS
HTML entit encode
chr HexCode Numeric escape(chr) Description
y URI(chr)
" x22 " " %22 %22 quotation mark

& x26 & & %26 & ampersand

< x3C < < %3C %3C less-than sign
greater-than
> x3E > > %3E %3E
sign
non-breaking
xA0     %A0 %C2%A0
space

inverted
¡ xA1 ¡ ¡ %A1 %C2%A1exclamation
mark

Conditional Statements

• In JavaScript we have the following conditional statements:
• if statement - use this statement if you want to execute some
code only if a specified condition is true
• if...else statement - use this statement if you want to execute
some code if the condition is true and another code if the
condition is false
• if...else if....else statement - use this statement if you want to
select one of many blocks of code to be executed
• switch statement - use this statement if you want to select
one of many blocks of code to be executed

If...Else Statements
• Conditional statements in JavaScript are used to perform different actions
based on different conditions.
<script type="text/javascript"> //Write a "Good morning" greeting if //the
time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

If...else Statements

If we want to execute some code if a condition is true and
another code if the condition is not true, use the if....else
statement.

var d=new Date();
var time=d.getHours();
if (time<10) {
document.write("<b>Good morning</b>"); }
else { document.write("Good day!"); }
</script>

If...else Statements
Use of else if

<script type="text/javascript"> var d = new Date() var time =
d.getHours()
if (time<10) {
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else { document.write("<b>Hello World!</b>"); }</script>

Switch Statements
• We can use the switch statement if you want to select one
of many blocks of code to be executed.
switch()
{
case 1: execute code block 1
break;
case 2: execute code block 2 break;
default: code to be executed if n is different from case 1 and 2
}

Switch Statements
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5: document.write("Finally Friday");
break;
case 6: document.write("Super Saturday");
break;
case 0: document.write("Sleepy Sunday");
break;
default: document.write("I'm looking forward to this weekend!");
}
</script>

JavaScript Operators
• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators
• String Operator
• Conditional Operator

Functions
• A function contains code that will be executed by an event
or by a call to that function.

• We can call a function from anywhere within the page (or
even from other pages if the function is embedded in an
external .js file).

• Functions can be defined both in the <head> and in the
<body> section of a document.

• To assure that the function is read/loaded by the browser
before it is called, it could be wise to put it in the <head>
section.

Functions-Example
<html>
<head>
function displaymessage()
{
alert("Hello World!");
}
</script> </head>
<body> <form> <input type="button" value="Click
me!"onclick="displaymessage()" >
</form>
</body>
</html>

Return keyword
The function below should return the product of two numbers
(a and b):
product=prod(2,3);
function prod(a,b)
{
x=a*b;
return x;
}

For Loop
• loops through a block of code a specified number of times .
• The for loop is used when you know in advance how many
times the script should run.
• for (var=startvalue;var<=endvalue;var=var+increment)

• The increment parameter could also be negative, and the <=
could be any comparing statement.

Example-For loop
<html>
<body>
var i=0;
for (i=0;i<=10;i++)
{
document.write("The number is " + i); document.write("<br />");
} </script> </body>
</html>

While and Do-While Loop
• The while loop is used when you want the loop to execute and continue
executing while the specified condition is true.
<html>
<body>
var i=0;
while (i<=10) {
document.write("The number is " + i); document.write("<br />");
i=i+1;
} </script> </body> </html>

Do-while Loop
• The do...while loop is a variant of the while loop. This loop will always
execute a block of code ONCE, and then it will repeat the loop as long as
the specified condition is true
<html>
<body>
var i=0;
do {
document.write("The number is " + i);
document.write("<br />"); i=i+1;
}
while (i<0); </script>
</body> </html>

Break and Continue Statements
• JavaScript break and continue Statements
• There are two special statements that can be used inside
loops: break and continue.
• Break
• The break command will break the loop and continue
executing the code that follows after the loop (if any).
• Continue
• The continue command will break the current loop and
continue with the next value

Break-Example
<html>
<body>
<script type="text/javascript"> var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
} document.write("The number is " + i); document.write("<br
/>");
}
</script> </body> </html>

Continue-Example
<html>
<body>
var i=0
for (i=0;i<=10;i++)
{
if
(i==3) { continue; }
document.write("The number is " + i);
document.write("<br />");
} </script> </body> </html>

For...In Statement
• The for...in statement is used to loop (iterate) through the
elements of an array or through the properties of an object.

• for (variable in object) { code to be executed }

• The variable argument can be a named variable, an array
element, or a property of an object.

For-In Statement
<html>
<body>
var x;
var mycars = new Array();
mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";
for (x in mycars)
{ document.write(mycars[x] + "<br />");
}
</script></body> </html>

Java Script -Guidelines
• We can break up a code line within a text string with a
backslash. The example below will be displayed properly:

• Java Script is Case Sensitive
myfunction() and myFunction() are not same

• JavaScript ignores extra spaces. You can add white space to
your script to make it more readable.
name="Hege"; name = "Hege";

Yet to Cover
• JS Events
• JS Try Catch
• JS Throw
• JS On error
• JS Special Texts
• JS object intro
• JS String
• JS Boolean
• JS array
• JS math
• JS Regexp
• HTML Dom

JS Events
• By using JavaScript, we have the ability to create dynamic web
pages.
• Events are actions that can be detected by JavaScript.
• Every element on a web page has certain events which can
trigger JavaScript functions.

• For example, we can use the on Click event of a button element to indicate
that a function will run when a user clicks on the button. We define the
events in the HTML tags.

JS Events
• Examples of events:
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input box in an HTML form
• Submitting an HTML form
• A keystroke

JS Events
• Events are normally used in combination with functions, and the function will
not be executed before the event occurs.
• Onload and Onunload:
 The onload and onUnload events are triggered when the user
 enters or leaves the page.
 The onload event is often used to check the visitor's browser type
 and browser version,
 And load the proper version of the web page based on the
 information.

Both the onload and onUnload events are also often used to deal with
cookies that should be set when a user enters or leaves a page.

JS Events
• onFocus, onBlur and onChange

• The onFocus, onBlur and onChange events are often used in combination
with validation of form fields.
• Below is an example of how to use the onChange event. The checkEmail()
function will be called whenever the user changes the content of the field:
• <input type="text" size="30" id="email" onchange="check Email()">

JS Events
• onSubmit
• The onSubmit event is used to validate form fields before
submitting it.
• The checkForm() function will be called when the user clicks the submit
button in the form. If the field values are not accepted, the submit should be
cancelled. The function checkForm() returns either true or false. If it returns
true the form will be submitted, otherwise the submit will be cancelled:
• <form method="post" action="xxx.htm" onsubmit="return
checkForm()">

JS Events
• onMouseOver and onMouseOut
• onMouseOver and onMouseOut are often used to create
"animated" buttons.
• Below is an example of an onMouseOver event. An alert box
appears when an onMouseOver event is detected:
• <a href="http://www.w3schools.com"
onmouseover="alert('An onMouseOver event');return false">
• <img src="w3schools.gif" width="100" height="30"> </a>

Catch errors
• When browsing Web pages on the internet, we all have seen a
JavaScript alert box telling us there is a runtime error and asking
"Do you wish to debug?". Error message like this may be useful
for developers but not for users. When users see errors, they
often leave the Web page.
• This concept will teach you how to trap and handle JavaScript
error messages, so you don't lose your audience.
• There are two ways of catching errors in a Web page:
• By using the try...catch statement (available in IE5+, Mozilla 1.0,
and Netscape 6)
• By using the onerror event. This is the old standard solution to
catch errors (available since Netscape 3)

Try...Catch Statement

• The try...catch statement allows you to test a block of code for
errors. The try block contains the code to be run, and the catch
block contains the code to be executed if an error occurs. Using
uppercase letters will generate a JavaScript error!
Syntax
Try
{
//Run some code here
}
catch(err) {
//Handle errors here }Note that try...catch is written in lowercase letters.
Using uppercase letters will generate a JavaScript error!
}

Example 1 –Without try..catch
<html>
<head>
function message()
{
addalert("Welcome guest!");
}
</script> </head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

Example 1 –With try...catch
<html>
<head>
var txt=“ “
function message()
{
try {
adddlert("Welcome guest!");
} catch(err)
{
txt="There was an error on this page.nn"; txt+="Error description: " +
err.description + "nn"; txt+="Click OK to continue.nn"; alert(txt); }
}
</script> </head> <body> <input type="button" value="View message"
onclick="message()" /> </body> </html>

Example 2 –With try...catch
<html>
<head>
var txt=""
function message()
{
try
{
adddlert("Welcome guest!"); }
catch(err) { txt="There was an error on this page.nn";
txt+="Click OK to continue viewing this page,n";
txt+="or Cancel to return to the home page.nn";
if(!confirm(txt))
{ document.location.href="http://www. yahoo.com/"; } } }
</script> </head><body> <input type="button" value="View message"
onclick="message()" /> </body></html>

The Throw Statement

• The throw statement allows you to create an exception.
• If you use this statement together with the try...catch
statement, you can control program flow and generate
accurate error messages.

• Syntax
• throw (exception)

• The exception can be a string, integer, Boolean or an object.

Throw Statement-Example
var x=prompt("Enter a number between 0 and 10:","");
try { if(x>10)
throw "Err1";
else if(x<0) throw "Err2“; }
catch(er) { if(er=="Err1") alert("Error! The value is too high");
if(er == "Err2") alert("Error! The value is too low"); } </script>
</body> </html>

The onerror Event

• The on error event is fired whenever there is a script error in the page.
• To use the on error event, you must create a function to handle the errors.
Then you call the function with the on error event handler
• The event handler is called with three arguments: msg (error message), url
(the url of the page that caused the error) and line (the line where the error
occurred).

• Syntax
on error=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here return true or false
}

EXAMPLE-ONERROR
<html>
<head> <script type="text/javascript">
on error=handleErr; var txt="";
function handleErr(msg,url,l) {
txt="There was an error on this page.nn"; txt+="Error: " + msg +
"n"; txt+="URL: " + url + "n"; txt+="Line: " + l + "nn";
txt+="Click OK to continue.nn";
alert(txt); return true; }function message() { addalert("Welcome
guest!"); } </script> </head><body> <input type="button"
value="View message" onclick="message()" /> </body></html>

JS SPECIAL CHARACTERS
• In JavaScript you can add special characters to a text string by
using the backslash sign.
• The backslash () is used to insert apostrophes, new lines, quotes, and
other special characters into a text string.
• var txt="We are the so-called "Vikings" from the north.";
document.write(txt);

• In JavaScript, a string is started and stopped with either single or double
quotes. This means that the string above will be chopped to: We are the so-
called.

JS OBJECTS AND METHODS
• JavaScript is an Object Oriented Programming (OOP) language
• Properties are the values associated with an object.
<script type="text/javascript">var txt="Hello World!";
document.write(txt.length);</script>

• Methods are the actions that can be performed on objects.
• In the following example we are using the to Uppercase() method of the
String object to display a text in uppercase letters :
<script type="text/javascript">var str="Hello world!";
document.write(str.toUpperCase());</script>

EXAMPLE FOR GETTING DATEMETHOD
<html>
<body>
document.write(Date());
</script>
</body>
</html>

DATEMETHOD-EXAMPLE
<html>
<body><script type="text/javascript">
var minutes = 1000*60;
var hours = minutes*60;
var days = hours*24;
var years = days*365;
var d = new Date();
var t = d.getTime();
var y = t/years;
document.write("It's been: " + y + " years since 1970/01/01!");
</script>
</body>
</html>

DATE METHOD
• Defining Dates
• The Date object is used to work with dates and times.
• We define a Date object with the new keyword. The following
code line defines a Date object called myDate:
• var myDate=new Date()Note: The Date object will automatically
hold the current date and time as its initial value!
• Manipulate Dates
• We can easily manipulate the date by using the methods available
for the Date object.

DATE METHOD
• In the example below we set a Date object to a specific date
(14th January 2010):
• var myDate=new Date(); myDate.setFullYear(2010,0,14);
• And in the following example we set a Date object to be 5 days
into the future:
• var myDate=new Date(); myDate.setDate(myDate.getDate()+5)
• ;Note: If adding five days to a date shifts the month or year, the
changes are handled automatically by the Date object itself!

DATE METHOD
• Comparing Dates
• The Date object is also used to compare two dates.
• The following example compares today's date with the 14th
January 2010:
var myDate=new Date(); myDate.setFullYear(2010,0,14);
var today = new Date();if (myDate>today) {
alert("Today is before 14th January 2010");
} else
{ alert("Today is after 14th January 2010"); }

JavaScript Array Object
• The Array object is used to store a set of values in a single
variable name
• Defining Arrays
• The Array object is used to store a set of values in a single
variable name.
• We define an Array object with the new keyword. The
following code line defines an Array object called myArray:
• var myArray=new Array()

• There are two ways of adding values to an array (you can add
as many values as you need to define as many variables you
require).
• var mycars=new Array(); mycars[0]="Saab";
mycars[1]="Volvo"; mycars[2]="BMW";You could also pass an
integer argument to control the array's size:

• var mycars=new Array(3); mycars[0]="Saab";
mycars[1]="Volvo"; mycars[2]="BMW";2:

• var mycars=new Array("Saab","Volvo","BMW");

• Accessing Arrays
You can refer to a particular element in an array by referring to
the name of the array and the index number. The index number
starts at 0.
• The following code line:
• document.write(mycars[0]); :
Modify Values in Existing Arrays
• To modify a value in an existing array, just add a new value to
the array with a specified index number:
• mycars[0]="Opel";Now, the following code line:
• document.write(mycars[0]);

BOOLEAN OBJECT
• The Boolean object is an object wrapper for a Boolean value.
• The Boolean object is used to convert a non-Boolean value to a
Boolean value (true or false).
• We define a Boolean object with the new keyword. The
following code line defines a Boolean object called my Boolean:
• var myBoolean=new Boolean();

BOOLEAN OBJECT
• All the following lines of code create Boolean objects with an
initial value of false:

• var myBoolean=new Boolean();
• var myBoolean=new Boolean(0);
• var myBoolean=new Boolean(null);
• var myBoolean=new Boolean("");
• var myBoolean=new Boolean(false);
• var myBoolean=new Boolean(NaN);

BOOLEAN OBJECT
• All the following lines of code create Boolean objects with an
initial value of true:

• var myBoolean=new Boolean(true);
• var myBoolean=new Boolean("true");
• var myBoolean=new Boolean("false");
• var myBoolean=new Boolean("Richard");

Math Object

• The Math object allows you to perform common mathematical tasks.
• The Math object includes several mathematical values and functions. You
do not need to define the Math object before using it.
• Mathematical Values
• Math.E
• Math.PI
• Math.SQRT2
• Math.SQRT1_2
• Math.LN2 Math.LN10
• Math.LOG2E Math.LOG10E

Mathematical Methods

• In addition to the mathematical values that can be accessed
from the Math object there are also several functions (methods)
available.

• document.write(Math.round(4.7));
• document.write(Math.random());
• document.write(Math.floor(Math.random()*11));

What is RegExp

• RegExp, is short for regular expression.
• When you search in a text, you can use a pattern to describe
what you are searching for. RegExp IS this pattern.

• Defining RegExp
• The RegExp object is used to store the search pattern .
• var patt1=new RegExp("e");
• The following code line defines a RegExp object called patt1 with
the pattern "e":

What is RegExp

• Methods of the RegExp Object
• The RegExp Object has 3 methods: test(), exec(), and compile().
• test()
• The test() method searches a string for a specified value.
Returns true or false
• var patt1=new RegExp("e");document.write(patt1.test("The
best things in life are free"));

What is RegExp

• exec()
• The exec() method searches a string for a specified value.
Returns the text of the found value. If no match is found, it
returns null
• var patt1=new RegExp("e");document.write(patt1.exec("The
best things in life are free"));
• var patt1=new RegExp("e","g"); do { result=patt1.exec("The
best things in life are free"); document.write(result); } while
(result!=null)

What is RegExp

• compile()
• The compile() method is used to change the RegExp.
• compile() can change both the search pattern, and add or
remove the second parameter.
• var patt1=new RegExp("e");document.write(patt1.test("The
best things in life are
free"));patt1.compile("d");document.write(patt1.test("The best
things in life are free"));

The HTML DOM

• The HTML DOM defines a standard set of objects for HTML, and
a standard way to access and manipulate HTML documents.
• All HTML elements, along with their containing text and
attributes, can be accessed through the DOM.
• The contents can be modified or deleted, and new elements can
be created.
• The HTML DOM is platform and language independent
• It can be used by any programming language like Java,
JavaScript, and VBScript.

The HTML DOM

• DocumentRepresents the entire HTML document and can be
used to access all elements in a page.

• AnchorRepresents an <a> element.

• AreaRepresents an <area> element inside an image-map

• BaseRepresents a <base> element

• BodyRepresents the <body> element
• ButtonRepresents a <button> element

JS SAMPLES

Microsoft Word
Document

Web technology

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Web technology

Similaire à Web technology (20)

Plus de Rotract CLUB of BSAU

Plus de Rotract CLUB of BSAU (7)

Dernier

Dernier (20)

Web technology