Scripting Language JS and Forms

Scripting Language
A high-level programming language that is interpreted by another program at runtime rather than compiled by
the computer’s processor as other programming languages (such as C and C++) are. Scripting languages, which
can be embedded within HTML, commonly are used to add functionality to a Web page, such as different menu
styles or graphic displays or to serve dynamic advertisements. These types of languages are client-side scripting
languages, affecting the data that the end user sees in a browser window. Other scripting languages are server-
side scripting languages that manipulate the data, usually in a database, on the server.
Client Side Vs Server Side Script

When you create a dynamic html page the code that makes the changes to the web page must be run in one of
two places. It can be client-side code executed by the user's web browser, or it can be server-side code executed
by the server. There are advantages and disadvantages to using one over the other, and a well-planned mix of
the two can have a dramatic effect on your web page.
The advantages of server-side scripting are many. Because all of the server side code is executed before the
HTML is sent to the browser, your code is hidden from client/ web page viewer. Server-side code is also the
only choice if you want to access files and directories on the local machine. Server-side code is also browser
independent. Because the HTML code returned by the server is simple HTML, you do not have to worry about
the version of browser the client is using. The disadvantage to server-side scripting is that the server must use
valuable resources to parse each page it sends out. This could slow down your web site.
Client-side scripting can be very useful. The major advantage is that each web browser uses its own resources to
execute the code found on the web page. This eases the burden on the server. The disadvantages are that you can
not prevent the user from seeing your code and that you can not use client-side code to access local files,
directories, or databases.
Java Script
JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both
the client application and other applications. It is primarily used in the form of client-side JavaScript,
implemented as an integrated component of the web browser, allowing the development of enhanced user
interfaces and dynamic websites. Combined use of HTML, CSS and Javascript can be called Dynamic HTML.
It has following features:
1) It is untyped language. So a variable hold any kind of value.
2) Javascript is case sensitive language.
3) It is interpreted language.
4) Every statement must be closed by semi-colon.
It is can be used in two way:

1) Embedded in an HTML document between script tags
<script language="javascript">
JavaScript statements go here
</script>
2) In an external file which is loaded using

<script language = “javascript” src="program.js" ></script>
1
Where do we put <script>?
In the head section of the HTML document
Here it is read before the HTML document in the body is parsed. Any code, except function definitions,
will be executed immediately.
In the body section of the HTML document
Here it is read while the HTML document is being parsed. When the parser sees the <script> tag it stops
parsing the document and interprets the JavaScript code.
document.write() method
By this method we can write anything on the document or say web page. For example
document.write(“<b>IIPS</b>”);
the above javascript statement will write the IIPS in bold letter on web page client area. One thing we have to
remember for this method is this the place where this statement is written, when this statement is executed in the
script tag open area or say outer the any function body then it will show the arguments information and other
html information but if this statement is executed with in the function body then it will clear the other
information already written on the page.
<script language=”javascript”>
</script>
<body>
Some text….
</body>
or
<script language=”javascript”>
function fun()
{
}
</script>
<body onload=”fun()”>
Some Text……….
</body>
document.getElementById() method
By this method we will receive the element in javascript code by its id value and then modify or say
perform some operation over it. For example we have a <div> tag whose id is “d1” in our HTML code, then in
javascript code it could be…
var x =document.getElementById(“d1”); /*By this we receive d1 element in x variable.*/
x.innerHTML = “<b>Some New Information which is shown in bold letters.</b>”;
x.style.backgroundColor = “#ababab”;
x.className=”CSSClassName”;
2
Array
As with normal variables, you can also declare your variable fi rst, and then tell JavaScript you want it to be an
array. For example:
var myArray;
myArray = new Array();
Earlier you learned that you can say up front how many elements the array will hold if you want to, although
this is not necessary. You do this by putting the number of elements you want to specify between the
parentheses after Array. For example, to create an array that will hold six elements, you write the following:
var myArray = new Array(6);
You have seen how to declare a new array, but how do you store your pieces of data inside it? You can do this
when you defi ne your array by including your data inside the parentheses, with each piece of data separated by
a comma. For example:
var myArray = new Array(“Paul”,345,”John”,112,”Bob”,99);
Here the fi rst item of data, “Paul”, will be put in the array with an index of 0. The next piece of data, 345, will
be put in the array with an index of 1, and so on. This means that the element with the name myArray[0]
contains the value “Paul”, the element with the name myArray[1] contains the value
345, and so on. Note that you can’t use this method to declare an array containing just one piece of numerical
data, such as 345, because JavaScript assumes that you are declaring an array that will hold 345 elements. This
leads to another way of declaring data in an array. You could write the preceding line like this:
var myArray = new Array();
myArray[0] = “Paul”;
myArray[1] = 345;
myArray[2] = “John”;
myArray[3] = 112;
myArray[4] = “Bob”;
myArray[5] = 99;
You use each element name as you would a variable, assigning them with values. Obviously, in this example the
first way of defining the data items is much easier. However, there will be situations in which you want to
change the data stored in a particular element in an array after they have been declared. In that case you will
have to use the latter method of defining the values of the array elements. You’ll also spot from the preceding
example that you can store different data types in the same array. JavaScript is very flexible as to what you can
put in an array and where you can put it.
Before going on to an example, note here that if, for example, you had defined your array called myArray as
holding three elements like this:
var myArray = new Array(3);
and then defi ned a value in the element with index 130 as follows:
JavaScript would not complain and would happily assume that you had changed your mind and wanted an array
that had (at least) 131 elements in it. In the following example, you’ll create an array to hold some names.
3
You’ll use the second method described in the preceding section to store these pieces of data in the array. You’ll
then display the data to the user.
<html>
<body>
<script type=”text/javascript”>
myArray[1] = “Pete”;
document.write(“myArray[0] = “ + myArray[0] + “<BR>”);
myArray[1] = “Mike”;
document.write(“myArray[1] changed to “ + myArray[1]);
</script>
</body>
</html>
myArray[0] = Bob
myArray[2] = Paul
myArray[1] = Pete
myArray[1] changed to Mike
The first task in the script block is to declare a variable and tell the JavaScript interpreter you want it to be a
new array.
Now that you have your array defined, you can store some data in it. Each time you store an item of data with a
new index, JavaScript automatically creates a new storage space for it. Remember that the first element will be
at myArray[0]. Take each addition to the array in turn and see what’s happening. Before you add anything, your
array is empty. Then you add an array element with the following line:
Your array now looks like this:
0 Bob
Then you add another element to the array, this time with an index of 1.
myArray[1] = “Pete”;
0 Bob
4
1 Pete
Finally, you add another element to the array with an index of 2.
Your array now looks like this:
0 Bob
1 Pete
2 Paul
Next, you use a series of document.write() functions to insert the values that each element of the array contains
into the web page. Here the array is out of order just to demonstrate that you can access it
that way.
You can treat each particular position in an array as if it’s a standard variable. So you can use it to do
calculations, transfer its value to another variable or array, and so on. However, if you try to access the data
inside an array position before you have defined it, you’ll get undefined as a value. Finally, you change the
value of the second array position to “Mike”. You could have changed it to a number because, just as with
normal variables, you can store any data type at any time in each individual data position in an array.
myArray[1] = “Mike”;
Now your array’s contents look like this:
0 Bob
1 Mike
2 Paul
Just to show that the change you made has worked, you use document.write() to display the second element’s
value.
document.write(“myArray[1] changed to “ + myArray[1]);
A Multi-Dimensional Array
Suppose you want to store a company’s personnel information in an array. You might have data such as names,
ages, addresses, and so on. One way to create such an array would be to store the information sequentially —
the first name in the first element of the array, then the corresponding age in the next element, the address in the
third, the next name in the fourth element, and so on. Your array could look something like this:
0 Name1
1 Age1
2 Address1
3 Name2
4 Age2
5 Address2
5
6 Name3
7 Age3
8 Address3
This would work, but there is a neater solution: using a multi-dimensional array. Up to now you have been
using single-dimension arrays. In these arrays each element is specified by just one index — that is, one
dimension. So, taking the preceding example, you can see Name1 is at index 0, Age1 is at index 1, and so on.
A multi-dimensional array is one with two or more indexes for each element. For example, this is how your
personnel array could look as a two-dimensional array:
0 Name1 Name2 Name3
1 Age1 Age2 Age3
2 Address1 Address2 Address3
The following example illustrates how you can create such a multi-dimensional array in JavaScript code and
how you can access the elements of this array.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
var personnel = new Array();
personnel[0] = new Array();
personnel[0][0] = “Name0”;
personnel[0][1] = “Age0”;
personnel[0][2] = “Address0”;
document.write(“Name : “ + personnel[1][0] + “<BR>”);
document.write(“Age : “ + personnel[1][1] + “<BR>”);
document.write(“Address : “ + personnel[1][2]);
</script>
6
</body>
</html>
If you load it into your web browser, you’ll see three lines written into the page, which represent the name, age,
and address of the person whose details are stored in the personnel[1] element of the array.
Name : Name1
Age : Age1
Address : Address1
The first thing to do in this script block is declare a variable, personnel, and tell JavaScript that you want it to be
a new array.
var personnel = new Array();
Then you do something new; you tell JavaScript you want index 0 of the personnel array, that is, the element
personnel[0], to be another new array.
So what’s going on? Well, the truth is that JavaScript doesn’t actually support multi-dimensional arrays, only
single ones. However, JavaScript enables us to fake multi-dimensional arrays by creating an array inside
another array. So what the preceding line is doing is creating a new array inside the element with index 0 of our
personnel array.
In the next three lines, you put values into the newly created personnel[0] array. JavaScript makes it easy to do
this: You just state the name of the array, personnel[0], followed by another index in square brackets. The fi rst
index (0) belongs to the personnel array; the second index belongs to the
personnel[0] array.
After these lines of code, your array looks like this:
0 Name0
1 Age0
2 Address0
The numbers at the top, at the moment just 0, refer to the personnel array. The numbers going down the side, 0,
1, and 2, are actually indices for the new personnel[0] array inside the personnel array.
For the second person’s details, you repeat the process, but this time you are using the personnel array element
with index 1.
7
Now your array looks like this:
0 Name0 Name1
1 Age0 Age1
2 Address0 Address1
You create a third person’s details in the next few lines. You are now using the element with index 2 inside the
personnel array to create a new array.
The array now looks like this:
0 Name0 Name1 Name2

1 Age0 Age1 Age2
2 Address0 Address1 Address2
You have now fi nished creating your multi-dimensional array. You end the script block by accessing the data
for the second person (Name1, Age1, Address1) and displaying it in the page by using document .write(). As
you can see, accessing the data is very much the same as storing them. You can use the multi-dimensional array
anywhere you would use a normal variable or single-dimension array.
Try changing the document.write() commands so that they display the first person’s details. The code would
look like this:
It’s possible to create multi-dimensional arrays of three, four, or even a hundred dimensions, but things can start
to get very confusing, and you’ll fi nd that you rarely, if ever, need more than two dimensions. To give you an
idea, here’s how to declare and access a fi ve-dimensional array:
myArray[0] = new Array();
myArray[0][0] = new Array();
myArray[0][0][0] = new Array();
8
myArray[0][0][0][0] = new Array();
myArray[0][0][0][0][0] = “This is getting out of hand”
document.write(myArray[0][0][0][0][0]);
Javascript Event functions

onAbort - invoked when the user aborts the loading of an image by clicking the STOP button
onClick - invoked when the user clicks the specified object
onFocus - invoked when the target object receives focus
onBlur - invoked when the target object loses focus
onMouseOver - invoked when the user passes the mouse over the target object
onMouseOut - invoked when the mouse pointer leaves the target object
onSubmit - invoked when the user clicks the Submit button in a form
onChange - invoked when the user changes the contents of a text field
onSelect - invoked when the user selects the contents of a text field
onReset - invoked when the user clicks the Reset button in a form
onLoad - invoked when the target image or document is loaded
onUnload - invoked when the target image or document is unloaded
get the javascript time

The Date object has been created, and now we have a variable that holds the current date! To get the information we
need to print out, we have to utilize some or all of the following functions:
 getTime() - Number of milliseconds since 1/1/1970 @ 12:00 AM
9
 getSeconds() - Number of seconds (0-59)
 getMinutes() - Number of minutes (0-59)
 getHours() - Number of hours (0-23)
 getDay() - Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday
 getDate() - Day of the month (0-31)
 getMonth() - Number of month (0-11)
 getFullYear() - The four digit year (1970-9999)

</script>
To open a new window, you will need to use yet another ready-made JavaScript function. Here is what it looks
like:
window.open('url to open','window name','attribute1,attribute2')
This is the function that allows you to open a new browser window for the viewer to use. Note that all the
names and attributes are separated with a comma rather than spaces. Here is what all the stuff inside is:
1. 'url to open'
This is the web address of the page you wish to appear in the new window.
2. 'window name'
You can name your window whatever you like, in case you need to make a reference to the window
later.
3. 'attribute1,attribute2'
There are lot of attribute that you can set to change the behavior of the opened window.
Window Attributes
Below is a list of the attributes you can use:
1. width=300
Use this to define the width of the new window.
2. height=200
Use this to define the height of the new window.
3. resizable=yes or no
Use this to control whether or not you want the user to be able to resize the window.
4. scrollbars=yes or no
This lets you decide whether or not to have scrollbars on the window.
5. toolbar=yes or no
Whether or not the new window should have the browser navigation bar at the top (The back, foward,
stop buttons..etc.).
6. location=yes or no
Whether or not you wish to show the location box with the current url (The place to type http://address).
7. directories=yes or no
Whether or not the window should show the extra buttons. ( print, Page buttons, etc...).
10
8. status=yes or no
Whether or not to show the window status bar at the bottom of the window.
9. menubar=yes or no
Whether or not to show the menus at the top of the window (File, Edit, etc...).
All right, here's an example code for opening a new window:

<body onLoad="window.open('http://www.google.com’,'mywindow','width=400,height=200')">
Other HTML Code
</body>
HTML Form
An HTML form provide data gathering functionality to a web page. This is vary useful if the web site is used to
advertise and sell products. HTML forms provide a full range of GUI (Graphical User Interface) controls.
Additionally, HTML forms can automatically submit data collected in its controls to a web server.
The data submitted can be processed at the web server by ASP, JSP, Java Servlet or any other server side
programming language.
JavaScript allows the validation of data entered into a form at the client side. JavaScript can be used to ensure
that only valid data is returned to a web server for further processing.
User input is captured in a ‘Form’. HTML provide the <FORM> </FORM> tags with which an HTML form
can be created to capture user input.
<form name=”formName” method=”GET” action=”TargetWebPagePath”>

form element / form body
</form>
action is the target web page address. This web page could be Any server-side script page like .ASP,.JSP etc.
method attribute can be GET / POST depending on user requirement. As per functionality both GET and POST
methods were same. Difference is GET method will be showing the information to the users. But in the case of
POST method information will not be shown to the user.
The data passed using the GET method would be visible to the user of the website in the browser address bar
but when we pass the information using the POST method the data is not visible to the user directly.
Also in GET method characters were restricted only to 256 characters. But in the case of POST method
characters were not restricted.
Get method will be visible to the user as it sends information appended to the URL, but Post will not be visible
as it is sent encapsulated within the HTTP request body.
About the data type that can be send, with Get method you can only use text as it sent as a string appended with
the URL, but with post is can text or binary.
About form default, GET is the default method for any form, if you need to use the post method; you have to
change the value of the attribute "method" to be Post.
Text Fields
Before we teach you how to make a complete form, let's start out with the basics of forms. Input fields are going
to be the meat of your form's sandwich. The <input> has a few attributes that you should be aware of.
 type - Determines what kind of input field it will be. Possible choices are text, submit, and password.
11
 name - Assigns a name to the given field so that you may reference it later.
 size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
 maxlength - Dictates the maximum number of characters that can be entered
<form method="post" action="targetServerSideWebPage Path">

Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10" maxlength="10" name="password">
</form>
For Reading the values in Javascript:
document.forms(‘formName’).txtTextboxName.value
document.forms(‘formName’).txtPasswordTextboxName.value
Type = “text” will create simple text box and Type = “Password” will create text box, which accept password. It
is also a text box but it show the information in start / dot means it hides the information for display.
HTML Radio Buttons

Radio buttons are a popular form of interaction. You may have seen them on questionnaires, and other web sites
that give the user a multiple-choice question. Below are a couple attributes you should know that relate to the
radio button. In Radio button, name attribute is same for the group of radio button. Radio button values are
mutually exclusive for the specific group.
 value - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a
given group of radio buttons (see name for more information).
 name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.
 checked-This attribute define that the Radio Button is checked by default
HTML Code:
<form method="post">
What kind of shirt are you wearing? <br />
Shade: <input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light" Checked>Light <br />
Size: <input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium" Checked>Medium
<input type="radio" name="size" value="large">Large<br />
</form>
The output of above HTML code will be as follows :

Radios:
What kind of shirt are you wearing?
Shade: Dark Light
Size: Small Medium Large

document.forms(‘formName’).radioButtonName[indexOfRadioButton].checked==true/false
HTML Check Boxes

Check boxes allow for multiple items to be selected for a certain group of choices. The check box's name and
value attributes behave the same as a radio button.
HTML Code:
<form method="post" >
12
Select Programming Language Known.
<input type="checkbox" name="LangC" value="C"> C
<input type="checkbox" name="LangC++" value="C++"> C++
<input type="checkbox" name="LangHTML" value="HTML"> HTML
<input type="checkbox" name="LangJava" value="Java"> Java
</form>
CheckB
ox1
document.forms(‘formName’).checkBoxName.checked==true/false
HTML Drop Down Lists

Drop down menus or combo boxes are created with the <select> and <option> tags. <select> is the list itself and
each <option> is an available choice for the user.
HTML Code:
College Course?
<select name="course">
<option>Choose One</option>
<option>MCA</option>
<option>M.Tech.</option>
<option>MBA</option>
<option>B.Com(Hons.)</option>
</select>
</form>

First we get the Selected Index of element, then we get the text associated with that option.
var x=document.forms(‘formName’).selectName.selectedIndex;
var optionSelected = document.forms(‘formName’).selectName.options[x]
HTML Selection Forms

Yet another type of form, a highlighted selection list. This form will post what the user highlights. Basically just
another type of way to get input from the user. Its is variation of Drop Down list, in which only one item /option
is shown to user. But in Selection forms user can see more than one item or option at a time. It can be possible
to select more than one element at a time in Selection.
The size attribute selects how many options will be shown at once before needing to scroll, and the selected
option tells the browser which choice to select by default.
HTML Code:
<form method="post”>
Musical Taste
<select multiple name="music" size="4">
<option value="zero" >sea zero</option>
<option value="one" selected >sea one</option>
<option value="two" selected > sea two</option>
<option value="three" > sea three</option>
<option value="four" >sea four</option>
</select>
</form>
13
First we find that if the option is selected or not with loop , then we get the text associated with that
option.
var obj = document.getElementById('selectID');
var i;
var count = 0;
for (i=0; i<obj.options.length; i++) {
if (obj.options[i].selected) {
alert(obj.options[i].value+ “ is Selected.” ;
count++;
}
}
HTML Text Areas

Text areas serve as an input field for viewers to place their own comments onto. Forums and the like use text
areas to post what you type onto their site using scripts. For this form, the text area is used as a way to write
comments to somebody.
Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the
same as in word programs and the value of the columns reflects how many characters wide the text area will be.
i.e. The example below shows a text area 5 rows tall and 20 characters wide.
HTML Code:
<textarea rows="5" cols="20" name="comments">
Enter Comments Here
</textarea>
</form>
document.forms(‘formName’).txtTextAreaName.value
HTML Buttons
There are 3 type of HTML button used in HTML
One is Submit button: which sends the information to the Target Web page which is specified in action
attribute of <form> tag.
<input type = “submit” value = “Save Information”>
Second is Reset button: which resets the forms elements to default values. Say empty the text box, password
field.
<input type = “reset” value = “Clear”>
Third is Button : its is a general button. We have to associate the onClick event to it.
<input type = “button” value = “Display” onClick= “JavaScriptFunction”>
What is Document Object Model (DOM)?

14
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts
to dynamically access and update the content, structure and style of documents. The HTML Document Object
Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents. The DOM
presents an HTML document as a tree structure (a node tree), with elements, attributes, and text. The DOM
(Document Object Model) gives generic access to most elements, their styles and attributes in a document to
change anything on a page, JavaScript needs access to all elements in the HTML document. This access, along
with methods and properties to add, move, change, or remove HTML elements, is given through the Document
Object Model (DOM).
According to DOM
1 The entire document is a document node
2 Every HTML tag is an element node
3 The texts contained in the HTML elements are text nodes
4 Every HTML attribute is an attribute node
Complete Document Object Model diagram
Window Object
The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window
object is created automatically with every instance of a <body> or <frameset> tag. The window object contains
everything that is accessible to programs through the object model: the element, frames, images, browser and
almost everything that needs to access through the browser.
Location object-
The Location object is automatically created by the JavaScript runtime engine and contains
information about the current URL. Location object is part of the Window object and is accessed through the
window.location property. The location object contains all the information on the location that the window is
currently displayed and all the details on that location like port, the protocol.
window.location - location is a property of window object. Location property returns current location of
a web file. We can transfer location from one web page to another.
<input type = “button” value=”Go To Google” onClick = “window.location = ‘http://www.google.com’;”
15
Navigator Object
The navigator object enables to access general information about the browser program. – What the browser does
and does not support. The Navigator object is automatically created by the JavaScript runtime engine and
contains information about the client browser.
appName – returns name of the browser that is processing the script
appVersion – returns version number of the browser
History Object
The History object is automatically created by the JavaScript runtime engine and consists of an array of URLs.
These URLs are the URLs the user has visited within a browser window. The History object is part of the
Window object and is accessed through the window.history property. history.length – The length property
specified how many URLs are contained in the current history object. The URLs saved are identical to those
shown in browser history list
Methods of history object
history.forward() – Loads the next URL in the history list
history.back() - Loads the previous URL in the history list
Event Object
An event is a browser way of telling user that user is interacting with browser
clientX -The X position of the mouse relative to the client area of the window
clientY -the Y position of the mouse relative to the client area of the window
16

Scripting Language JS and Forms

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Scripting Language JS and Forms

Transféré par

Droits d'auteur :

Formats disponibles

Scripting Language

Client Side Vs Server Side Script

It is can be used in two way:

2) In an external file which is loaded using

0 Name0 Name1 Name2

Javascript Event functions

onClick - invoked when the user clicks the specified object

onFocus - invoked when the target object receives focus

onBlur - invoked when the target object loses focus

onLoad - invoked when the target image or document is loaded

onUnload - invoked when the target image or document is unloaded

get the javascript time

All right, here's an example code for opening a new window:

<form name=”formName” method=”GET” action=”TargetWebPagePath”>

<form method="post" action="targetServerSideWebPage Path">

HTML Radio Buttons

The output of above HTML code will be as follows :

For Reading the values in Javascript:

HTML Check Boxes

HTML Drop Down Lists

For Reading the values in Javascript:

HTML Selection Forms

HTML Text Areas

What is Document Object Model (DOM)?

Vous aimerez peut-être aussi