Scribd
Upload
2 views

Client Side Scripting2

this is notes

Uploaded by

Shikha Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Client Side Scripting2

this is notes

Uploaded by

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

Scripting Languages

JavaScript
Introduction
JavaScript is a scripting language that will allow you to add
real programming to your web pages.
JavaScript is a client-side scripting language. This means the web
surfer's browser will be running the script. However, the name
JavaScript is owned by Netscape. Microsoft calls its version of the
language JScript. The generic name of the language is EcmaScript.

There are two types of scripting languages:


1. Client side scripting
2. Server side scripting
The scripts which run on client side browser is client side scripting.
e.g. JavaScript.
The scripts which run on web server is called server side scripting.
e.g. PHP, VbScript etc.
However, there are more serious uses for javascript:

Browser Detection
Detecting the browser used by a visitor at your page.
Depending on the browser, another page specifically
designed for that browser can then be loaded.
Cookies
Storing information on the visitor's computer, then
retrieving this information automatically next time the
user visits your page. This technique is called "cookies".
Control Browsers
Opening pages in customized windows, where you specify
if the browser's buttons, menu line, status line or
whatever should be present.
Validate Forms
Validating inputs to fields before submitting a form.
An example would be validating the entered email
address to see if it has an @ in it, since if not, it's not a
valid address.
Example:
<html>
<body>
<script type="text/JavaScript">
document. write("Hello World!") ;
</script>
</body>
</html>

Javascript can be used in head section as well as body section.


But if we are using an external javascript file then it has to be
declared in head section.
Basic Rules
JavaScript statements end with semi-colons.
JavaScript is case sensitive.
JavaScript has two forms of comments:
 Single-line comments begin with a double slash (//).
 Multi-line comments begin with "/*" and end with "*/".

Enable JavaScript - Internet Explorer


In Internet Explorer 6/7 , you can check to see if
JavaScript is enabled by navigating to the custom security settings that are
somewhat buried (don't worry; we'll help you find it).
Click on the Tools menu
Choose Internet Options... from the menu
Click the Security tab on the Internet Options pop up
Click the Custom Level... button to access your security settings
Scroll almost all the way down to the Scripting section
Select the Enable button for Active scripting
Click OK to finish the process
Click Yes when asked to confirm
Importing an External JavaScript File
File script.js Contents:
function popup()
{ alert("Hello World")
}
And HTML page where we import JavaScript file
<html>
<head>
<script src="script.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Click Me!">
</body>
</html>
JavaScript Operators
Operators in JavaScript are very similar to operators that appear in
other programming languages. The definition of an operator is a
symbol that is used to perform an operation.

Operator English Example

+ Addition 2+4

- Subtraction 6-2

* Multiplication 5*3

/ Division 15 / 3

% Modulus 43 % 10
Comparison Operators
Comparisons are used to check the relationship between variables
and/or values. A single equal sign sets a value while a double equal
sign (==) compares two values. Comparison operators are used \
inside conditional statements and evaluate to either true or false.
Operator English Example Result
== Equal To x == y false
!= Not Equal To x != y true
< Less Than x<y true
> Greater Than x>y false
Less Than or Equal
<= x <= y true
To

Greater Than or
>= x >= y false
Equal To
JavaScript Variables
Variables in JavaScript behave the same as variables in most
popular programming languages (C, C++, etc) do, but in
JavaScript you don't have to declare variables before you use
them.
Using Variables
A variable's purpose is to store information so that it can be
used later. A variable is a symbolic name that represents
some data that you set.
When using a variable for the first time it is not necessary to use "var"
before the variable name, but it is a good programming practice to
make it clear when a variable is being used for the first time in
the program.
<html><body>
<script type="text/JavaScript">
var linebreak = "<br />"
var my_var = "Hello World!"

document.write(my_var)
document.write(linebreak)

my_var = "I am learning JavaScript!"


document.write(my_var)

document.write(linebreak)
my_var = "Script is Finishing up..."
document.write(my_var)
</script> </body>
</html>
JavaScript Functions
A function contains code that will be executed by an event
or by a call to the function.
Functions can be defined both in the <head> and in the
<body> section of a document. However, to assure that a
function is read/loaded by the browser before it is called, it
could be wise to put functions in the <head> section.

Syntax
function functionname(var1,var2,...,varX)
{
some code
}
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
The return Statement
The return statement is used to specify the value that is returned from
the function.

JavaScript For...In Statement


The for...in statement loops through the elements of an array or
through the properties of an object.
Syntax
for (variable in object)
{
code to be executed
}
<html>
<body>

<script type="text/javascript">
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>
Event Handling in JavaScript
Events are actions that can be detected by JavaScript.

By using JavaScript, we have the ability to create dynamic web pages.


Events are actions that can be detected by JavaScript.

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 field in an HTML form
• Submitting an HTML form
• A keystroke
For each events JavaScript provides a set of event handlers.

Event handler Applies to: Triggered when:


The loading of the image
onAbort Image
is cancelled.

Button, Checkbox,
The object in question
FileUpload, Layer,
loses focus (e.g. by
onBlur Password, Radio, Reset,
clicking outside it or
Select, Submit, Text,
pressing the TAB key).
TextArea, Window

The data in the form


FileUpload, Select, Text,
onChange element is changed by
TextArea
the user.

Button, Document,
onClick Checkbox, Link, Radio, The object is clicked on.
Reset, Submit
The object is double-
onDblClick Document, Link
clicked on.
An icon is dragged and
onDragDrop Window dropped into the
browser.
A JavaScript error
onError Image, Window
occurs.

Button, Checkbox,
The object in question
FileUpload, Layer,
gains focus (e.g. by
onFocus Password, Radio, Reset,
clicking on it or pressing
Select, Submit, Text,
the TAB key).
TextArea, Window

Document, Image, Link,


onKeyDown The user presses a key.
TextArea
Document, Image, Link, The user presses or
onKeyPress
TextArea holds down a key.
Document, Image, Link,
onKeyUp The user releases a key.
TextArea

The whole page has


onLoad Image, Window
finished loading.

The user presses a


onMouseDown Button, Document, Link
mouse button.
The user moves the
onMouseMove None
mouse.
The user moves the
onMouseOut Image, Link mouse away from the
object.

The user moves the


onMouseOver Image, Link
mouse over the object.

The user releases a


onMouseUp Button, Document, Link
mouse button.
Using an event handler
To use an event handler, you usually place the event handler name
within the HTML tag of the object you want to work with, followed by
="SomeJavaScriptCode", where SomeJavaScriptCode is the
JavaScript you would like to execute when the event occurs.
For example:

<input type="submit" name="clickme" value="Click Me!"


onclick="alert('Thank You!')"/>
Form validation
1. Add an onSubmit event for the form.
2. Use the return keyword to get an answer back from JavaScript
about whether the data is valid or not.
– return false:
server-side program is not called, and the
user must fix the field(s).
– return true:
the valid data is sent to the server-side program.
Regular Expressions and Patterns
Regular expressions are very powerful tools for
performing pattern matches.
A regular expression is a way of describing a pattern in a piece of text.
In fact, it’s an easy way of matching a string to a pattern. We could
write a simple regular expression and use it to check, quickly, whether
or not any given string is a properly formatted user input.
Symbol Description Example

^ Only matches the beginning of a string. /^The/ matches "The" in


"The night" by not "In The
Night"

$ Only matches the end of a string. /and$/ matches "and" in


“sand" but not "landing"

\b Matches any word boundary (test /ly\b/ matches "ly" in "This


characters must exist at the beginning or is really cool."
end of a word within the string)

\B Matches any non-word boundary. /\Bor/ matches “or” in


"normal" but not
"origami."
DOM(Document Object Model)

Javascript is mostly used to provide a means for your visitors to


interact with your web page. In order to be able to do this we need to
have some means by which our Javascript program can access the
component parts of the web page. The means that we use is called the
Document Object Model. Basically what this provides is a
collection of predefined objects that correspond to the component
parts of the browser window and the web page being displayed that
the Javascript program can reference in order to interact with the
browser window and the page displayed within it.
Example:
The way that document content is accessed and modified is called the
Document Object Model, or DOM. The Objects are organized in a
hierarchy. This hierarchical structure applies to the organization of
objects in a Web document.

• Window object: Top of the hierarchy. It is the outmost element of the


object hierarchy.
• Document object: Each HTML document that gets loaded into a window
becomes a document object. The document contains the content of the
page.
• Form object: Everything enclosed in the <form>...</form> tags sets the
form object.
• Form control elements: The form object contains all the elements
defined for that object such as text fields, buttons, radio buttons, and
checkboxes.
Objects
Object Properties Methods Event Handlers
Window defaultStatus alert onLoad
frames blur onUnload
opener close onBlur
parent confirm onFocus
scroll focus
self open
status prompt
top clearTimeout
window setTimeout
Frame defaultStatus alert none (The onLoad
frames blur and onUnload
opener close event handlers
parent confirm belong to the
scroll focus Window object)
self open
status prompt
top clearTimeout
window setTimeout
Location href reload none
pathname replace

History length back none


forward
go
Navigator appCodeName javaEnabled none
appName
appVersion
document alinkColor clear none (the onLoad
anchors close and onUnload
bgColor open event handlers
cookie write belong to the
fgColor writeln Window object.
forms
location
title
image height none none
name
src
form action submit onSubmit
elements reset onReset
method
name
target
text defaultValue focus onBlur
name blur onCharge
type select onFocus
value onSelect
Comparison of Java and JavaScript

JavaScript Java
Compiled on server before
Interpreted by client.
execution on client.
Object-based. Code uses built-in,
Object-oriented. Applets consist
extensible objects, but no classes
of object classes with inheritance.
or inheritance.

Code integrated with, and Applets distinct from HTML


embedded in, HTML. (accessed from HTML pages).

Loose typing, variable data types Strong typing, variable data types
not declared. must be declared.

Dynamic binding. Object Static binding. Object references


references checked at run-time. must exist at compile-time.

You might also like