CSS Lab Manual (1) - 240719 - 104610
CSS Lab Manual (1) - 240719 - 104610
Institute,………………………………………………………………………………………………………………
Client Side Scripting languages (22519) for the academic year ..................... to
Seal of Institution
Client Side Scripting Language
1. Basic and Discipline specific knowledge: Apply knowledge of basic mathematics, science
and engineering fundamentals and engineering specialization to solve the engineering problems.
2. Problem analysis: Identify and analyze well-defined engineering problems using codified
standard methods.
3. Design/ development of solutions: Design solutions for well-defined technical problems and
assist with the design of systems components or processes to meet specified needs.
[[[
4. Engineering Tools, Experimentation and Testing: Apply modern engineering tools and
Team member or a leader to manage projects and effectively communicate about well-defined
engineering activities.
7. Life-long learning: Ability to analyze individual needs and engage in updating in the context of
technological changes.
Client Side Scripting Language
Content Page
Total
Client Side Scripting Language
o simple syntax
JavaScript How To
– The HTML <script> tag is used to insert a JavaScript into an HTML page
<script type=“text/javascript”>
document. write(“Hello
World!”)
</script>
single line JavaScript can be inserted within the head, the body, or use external
JavaScript file
Client Side Scripting Languages
(22519)
<script type=“text/javascript”>
<!—
document.write(“Hello World!”)
// -->
</script>
JavaScript Variables
<html>
<script language="JavaScript">
Client Side Scripting Languages
(22519)
alert("Hello World!");
</script>
</html>
<html>
<script
language="JavaScript">
var ans = 0;
Var firstnum = 0;
Var secondnum = 0;
document.write(ans);
</script>
</html>
Question:
1. The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
Syntax
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
4. TheSwitch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression)
{
case x:
// code block
break;
Client Side Scripting Languages
(22519)
case y:
// code
block break;
default:
// code block
}
JavaScript Loops
1. for loop
Loops are handy, if you want to run the same code over and over again, each time with a different
value.
Syntax:-
for (initialization condition; testing condition; increment/decrement)
{
statement(s)
}
Or for objects
for (variableName in Object)
{
statement(s)
}
2. do while:
do while loop is similar to while loop with only difference that it checks for condition after
executing the statements, and therefore is an example of Exit Control Loop.
Syntax:
do
{
statements..
}while (condition);
3. While loop
A while loop is a control flow statement that allows code to be executed repeatedly based on
a given Boolean condition. The while loop can be thought of as a repeating if statement.
Syntax :
while (boolean condition)
{
loop statements...
}
Programs:
1.for loop
Client Side Scripting Languages
(22519)
< /script>
2. for..in loop
// creating an Object
var languages = {
first : "C",
second : "Java",
third : "Python",
fourth : "PHP",
fifth : "JavaScript"
};
// iterate through every property of the object languages and print all of them using for..in loops
for(itr in languages)
{
document.write(languages[itr] + "<br>");
}
< /script>
3. do ..while loop
var x = 21;
do
{
// The line while be printer even if the condition is false
x++;
} while(x < 20);
Client Side Scripting Languages
(22519)
< /script>
4. while loop
var x = 1;
< /script>
5. if…else
var i = 10;
< /script>
6. switch case
var i = 9;
switch(i)
{
case0:
Client Side Scripting Languages
(22519)
document.write("i is zero.");
break;
case1:
document.write("i is one.");
break;
case2:
document.write("i is two.");
break;
default:
document.write("i is greater than 2.");
}
</script>
Questions
1. Is JavaScript case sensitive? Give an example?
Creating an Array
Using an array literal is the easiest way to create a JavaScript
Array. Syntax:
var array_name = [item1, item2, ...];
array. Eg :-1
<html>
<body>
<script>
var i;
varemp = new Array();
emp[0] = Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + br>");
}
</script>
</body>
</html>
2.
<html>
<body>
<script>
var emp=["Sonoo","Vimal","Ratan];
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");
}
Client Side Scripting Languages
(22519)
</script>
</body>
</html>
find() It returns the value of the first element in the given array that satisfies the specified
condition.
findIndex() It returns the index value of the first element in the given array that
satisfies the specified condition.
indexOf() It searches the specified element in the given array and returns the
index of the first match.
lastIndexOf() It searches the specified element in the given array and returns
the index of the last match.
pop() It removes and returns the last element of an
array.
push() It adds one or more elements to the end of an
array.
reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an array.
sort() It returns the element of the given array in a sorted order.
Questions:
1. What is array?
2. How to defined array?
JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.
Example
<html>
<body>
<script>
functionmsg()
{
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</body>
</html>
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>
JavaScript String
The JavaScript string is an object that represents a sequence of
characters. There are 2 ways to create string in JavaScript
1. By string literal
2. By string object (using new keyword)
1) By string literal
The string literal is created using double quotes. The syntax of creating string using string
literal is given below:
var stringname="string value";
Example:
<!DOCTYPE html>
<html>
<body>
<script>
varstr="This is string literal";
document.write(str);
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<body>
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>
</body>
</html>
lastIndexOf() It provides the position of a char value present in the given string by
searching a character from the last position.
search() It searches a specified regular expression in a given string and returns its
position if a match occurs.
match() It searches a specified regular expression in a given string and returns that
regular expression if a match occurs.
replace() It replaces a given string with the specified replacement.
substr() It is used to fetch the part of the given string on the basis of the specified
starting position and length.
substring() It is used to fetch the part of the given string on the basis of the specified
index. toLowerCase() It converts the given string into lowercase letter.
toUpperCase() It converts the given string into uppercase letter.
toString() It provides a string representing the particular object.
valueOf() It provides the primitive value of string object.
Example
<!DOCTYPE html>
<html>
<body>
<script>
var str="javascript";
document.write(str.charAt(2));
var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);
var s1="javascript from javatpointindexof";
var n=s1.indexOf("from");
document.write(n);
var s1="javascript from javatpointindexof";
var n=s1.lastIndexOf("java");
document.write(n);
var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);
var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write(s2);
</script>
</body>
Marks Obtained Dated Signed of
</html>
teacher
Process Product Total(25)
Related(15) Related(10)
Client Side Scripting Languages
(22519)
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" />
A password field:
<input type="password" name="textfield3" value="secret" />
Client Side Scripting Languages
(22519)
Buttons
A submit button:send data
<input type="submit" name="Submit" value="Submit" />
A reset button:restore all form elements to their initial state
<input type="reset" name="Submit2" value="Reset" />
A plain button:take some action as specified by JavaScript
<input type="button" name="Submit3" value="Push Me" />
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />male<br>
<input type="radio" name="radiobutton" value="myValue2” checked="checked" />female
If two or more radio buttons have the same name, the user can only select one of them at a
time. This is how you make a radio button “group”.
If you ask for the value of that name, you will get the value specified for the selected radio
buttonas with checkboxes, radio buttons do not contain any text.
Labels
A label tag will bind the text to the control
<label><input type="radio" name="gender" value="m" />male</label>
Checkboxes
A checkbox: <input type="checkbox" name="checkbox" value="checkbox" checked="checked">
type: "checkbox"
name: used to reference this form element from JavaScript
value: value to be returned when element is checked
Additional arguments:
size: the number of items visible in the list (default is "1")
multiple
Client Side Scripting Languages
(22519)
if set to "true" (or just about anything else), any number of items may be
selected if omitted, only one item may be selected
if set to "false", behavior depends on the particular browser
Example
<html><body>
<form
action=""> User
name:<br>
<input type="text"
name="userid"><br> User
password:<br>
<input type="password" name="psw"><br>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other">Other<br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
</form>
</body></html>
Whatis an Event?
JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is an
event. Other examples include events like pressing any key, closing a window, resizing a
window, etc.
Developers can use these events to execute JavaScript coded responses, which cause buttons
to close windows, messages to be displayed to users, data to be validated, and virtually any
other type of response imaginable.
HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements. With single quotes:
<element event='some
JavaScript'> With double
quotes:
<element event="some JavaScript">
Event &Event handlers for Form Elements.
Examples
Click
Events:-
1. onclick Event
<html>
<head>
<script type =
"text/javascript">
functionsayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<form><input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
Client Side Scripting Languages
(22519)
2. ondblclick event
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>
<p ondblclick="myFunction()">
Doubleclick this paragraph to trigger a function.</p>
<p id="demo"></p>
</body>
</html>
Mouse Events:-
1.onmouseover&onmouseout
event
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
</body>
</html>
2.onmouseup&onmousedown
event
<html>
<head>
<script>
function myFunction(elmnt, clr)
{
elmnt.style.color = clr;
}
</script>
</head>
<body>
<p onmousedown="myFunction(this,'red')"
onmouseup="myFunction(this,'green')"> hi how r u?
</p>
</body>
Marks Obtained Dated Signed of
</html> teacher
Process Product Total(25)
Related(15) Related(10)
Client Side Scripting Languages
(22519)
Load
Events:-
1.onload
event
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
2.unload event
<html>
<head>
<script>
function myFunction()
{
alert("Thank you for visiting My page!");
}
</script>
</head>
<body onunload="myFunction()">
</body>
</html>
Key Events
1.onkeypress
event
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeypress="myFunction()">
Client Side Scripting Languages
(22519)
</body>
</html>
2.onkeyup event
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
</body>
</html>
3.onkeydown event
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeydown="myFunction()">
</body>
</html>
Other Events
1.onchange
event
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
</body>
</html>
2.onselect event
Client Side Scripting Languages
(22519)
<html>
<head>
<script>
function myFunction()
{
document.write("selected some text");
}
</script>
</head>
<body>
Some text: <input type="text" value="Hello world!" onselect="myFunction()">
</body>
</html>
3.onfocus event
<html>
<head>
<script>
function myFunction(x)
{
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
</body>
</html>
4.onblur event
<html>
<head>
<script>
Function myFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
</body>
</html>
5.onreset event
<html>
Client Side Scripting Languages
(22519)
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>
6.onsubmit event
<html>
<head>
<script>
functionconfirmInput()
{
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to My Page");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()"
action="https://google.com/"> Enter your name: <input
id="fname" type="text" size="20">
<input type="submit">
</form>
</body> Marks Obtained Dated Signed of
</html> teacher
Process Product Total(25)
Question: Related(15) Related(10)
Design a form using different
types of events.
Client Side Scripting Languages
(22519)
Intrinsic Functions
Intrinsic functions means the built in functions that are provided by JavaScript.
The JavaScript provides the intrinsic functions for Submit or Reset button. One can
use these functionalities while submitting the form or resetting the form fields.
The submit() method of the form object can be used to send the form to the server
in exactly same way as if the user has pressed the Submit button.
JavaScript Example
<!DOCTYPE html>
<html>
<body>
<form name=”myform”>
Roll Number:<input type=”text” name=”roll”/>
<br/> <br/>
Name :<input type=”text” name=”name”/>
<br/><br/>
<img src =”submit.gif” onlclik=”javascript:document.forms.myform.submit()”/>
<br/><br/>
</form>
</body>
</html>
Disabling Elements
}
</script>
</head>
<body>
<form name=”myform”>
Username:<input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Disable Name Field” onclick=” DisableFunction()”/>
<br/><br/>
<input type=”button” value=”Enable Name Field” onclick=” EnableFunction()”/>
</form> </body> </html>
Read-Only Elements
Sometimes we need to set some value to a field which user should not change.to restrict
user from changing the value of perticular field we make that element readonly by setting
readonly=true.
If the readonly attribute is set false ,then anyone ,including the user entering information
into the form ,can change the value of the elemet.
Following example illustrates the use of readonly element
JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type
=”text/javascript”>
Function ReadOnlyFunction()
{ document.forms.myform.name.readOnly=true
}
</script>
</head>
<body>
<form name=”myform”>
Username: <input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Read-only Name Field” onclick=” ReadOnlyFunction())”/>
</form>
</body> Marks Obtained Dated Signed of
teacher
</html>
Process Product Total(25)
Related(15) Related(10)
Client Side Scripting Languages
(22519)
A cookie is a piece of data that is stored on your computer to be accessed by your browser.
You also might have enjoyed the benefits of cookies knowingly or unknowingly.Cookies are
data, stored in small text files, on your computer.
How It Works ?
Your server sends some data to the visitor's browser in the form of a cookie. The browser may
accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now,
when the visitor arrives at another page on your site, the browser sends the same cookie to the
server for retrieval. Once retrieved, your server knows/remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields −
Expires − The date the cookie will expire. If this is blank, the cookie will expire when the
visitor quits the browser.
Domain − The domain name of your site.
Path − The path to the directory or web page that set the cookie. This may be blank if
you want to retrieve the cookie from any directory or page.
Secure − If this field contains the word "secure", then the cookie may only be retrieved
with a secure server. If this field is blank, no such restriction exists.
Name=Value − Cookies are set and retrieved in the form of key-value pairs
Create a Cookie with JavaScript
You can create cookies using document.cookie property.
document.cookie = "cookiename=cookievalue"
You can even add expiry date to your cookie so that the particular cookie will be removed from
the computer on the specified date. The expiry date should be set in the UTC/GMT format. If
you do not set the expiry date, the cookie will be removed when the user closes the browser.
Storing Cookies
The simplest way to create a cookie is to assign a string value to the document.cookie
object, which looks like this.
Note − Cookie values may not include semicolons, commas, or whitespace. For this reason, you
may want to use the JavaScript escape() function to encode the value before storing it in the
cookie. If you do this, you will also have to use the corresponding unescape() function when you
read the cookie value.
Example
<html>
<head>
<script type = "text/javascript">
function WriteCookie()
{
if(document.myform.customer.value == "" )
{
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" >
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
You can access the cookie like this which will return all the cookies saved for the current domain
var x = document.cookie
Reading a cookie is just as simple as writing one, because the value of the document.cookie
object is the cookie. So you can use this string whenever you want to access the cookie. The
document.cookie string will keep a list of name=value pairs separated by semicolons, where
name is the name of a cookie and value is its string value.You can use strings' split() function to
break a string into key and values
Example
<html>
<head>
<script type =
"text/javascript">
function ReadCookie()
{
var allcookies = document.cookie;
Client Side Scripting Languages
(22519)
Example
<html>
<head>
<script type =
"text/javascript">
function WriteCookie()
{
var now = new Date();
now.setMonth(now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
</html>
To delete a cookie, you just need to set the value of the cookie to empty and set the value of
expires to a passed date.
Example
<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
var now = new Date();
now.setMonth(now.getMonth() - 1
);
cookievalue = escape(document.myform.customer.value) + ";"
The window object represents an open window in a browser. If a document contain frames (<
iframe > tags), the browser creates one window object for the HTML document, and one
additional window object for each frame.
Syntax
window.open(URL, name, specs, replace)
Parameter Description
URL Optional. Specifies the URL of the page to open. If no URL is specified, a new
window/tab with about:blank is opened
name Optional. Specifies the target attribute or the name of the window. The following
values are supported:
_blank - URL is loaded into a new window, or tab. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be
loaded name - The name of the window
specs Optional. A comma-separated list of items, no whitespaces. The following values are
supported: channelmode=yes|no|1|0 Whether or not to display the window in theater
mode. Default is no. IE
only
directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes. IE
only
fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is
no. A window in full-screen mode must also be in theater mode. IE
only
height=pixels The height of the window. Min. value is 100
left=pixels The left position of the window. Negative values not
allowed location=yes|no|1|0 Whether or not to display the address field. Opera only
menubar=yes|no|1|0 Whether or not to display the menu bar
resizable=yes|no|1|0 Whether or not the window is resizable. IE only
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox &
Opera only status=yes|no|1|0 Whether or not to add a status bar
Client Side Scripting Languages
(22519)
titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling
application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox
only top=pixels The top position of the window. Negative values not allowed
width=pixels The width of the window. Min. value is 100
replace Optional. Specifies whether the URL creates a new entry or replaces the current
entry in the history list. The following values are supported:
true - URL replaces the current document in the
history list false - URL creates a new entry in the
history list
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser window that is 200px
wide and 100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
Window.close()
This method is used to close the window which are opened by window.open() method.
Syntax
window.close()
Window print() Method
The print() method prints the contents of the current window.The print() method opens the Print
Dialog Box, which lets the user to select preferred printing options.
window.print();
The resizeBy() method resizes a window by the specified amount, relative to its
current size. Syntax:
resizeBy(width, height)
The moveBy() method moves a window a specified number of pixels relative to its
current coordinates.
Syntax:
window.moveBy(x, y)
The resizeTo() method resizes a window to the specified width and
height. Syntax:
Client Side Scripting Languages
(22519)
window.resizeTo(width, height)
The scrollBy() method scrolls the document by the specified number of pixels.
Syntax
window.scrollBy(xnum,
ynum)
Example
<html>
<body>
<p>Click the button to open a new window and close the window after three
seconds (3000 milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin() {
var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function()
{
myWindow.close() }, 3000);
} Marks Obtained Dated Signed of
</script> teacher
</body> Process Product Total(25)
</html> Related(15) Related(10)
Client Side Scripting Languages
(22519)
Practical No.12. Develop a web page for validation of form fields using
regular expressions.
JavaScript Regular Expression
A regular expression is a sequence of characters that forms a search
pattern. The search pattern can be used for text search and text
replaces operations.
Syntax
/pattern/modifiers;
Example
var patt =
/w3schools/i;
Example explained:
/w3schools/i is a regular expression.
w3schools is a pattern (to be used in a
search).
i is a modifier (modifies the search to be case-insensitive).
Example
Use a string to do a search for "W3schools" in a
string: var str = "Visit W3Schools!";
var n = str.search("W3Schools");
Quantifiers
Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more
occurrences of n n?Matches any string that contains zero or one
occurrences of n n{X} Matches any string that contains a sequence
of X n's
n{X,Y} Matches any string that contains a sequence of X to Y
n's n{X,} Matches any string that contains a sequence of at least
X n's n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n
RegExp Object
Properties Property
Descripti
on
constructor Returns the function that created the RegExp object's prototype
global Checks whether the "g" modifier is set
ignoreCase Checks whether the "i" modifier is set
lastIndex Specifies the index at which to start the next match
multiline Checks whether the "m" modifier is set
source Returns the text of the RegExp pattern
Using test()
The following example searches a string for the character "e":
Example
var patt = /e/;
patt.test("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be:
true
You don't have to put the regular expression in a variable first. The two lines above can be
shortened to one:
/e/.test("The best things in life are free!");
Using exec()
The exec() method is a RegExp expression method.
It searches a string for a specified pattern, and returns the found text as an
object. If no match is found, it returns an empty (null) object.
The following example searches a string for the
character "e": Example 1
/e/.exec("The best things in life are free!");
1. Develop a web page for validation of form fields using regular expressions.
Rollover means a webpage changes when the user moves his or her mouse over an
object on the page. It is often used in advertising. There are two ways to create rollover, using
plain HTML or using a mixture of JavaScript and HTML. We will demonstrate the creation of
rollovers using both methods.
We create a rollover effect that can change the color of its text using the style attribute.
<p
onmouseover=”this.style.color=’red'” onmouseout=”this.style.color=’blue'”>
Move the mouse over this text to change its color to red. Move the mouse
away to change the text color to blue.
</p>
This example shows how to create rollover effect that involves text and images. When the
user places his or her mouse pointer over a book title, the corresponding book image
appears.
<html>
<head>
<title>Rollover Effect</title>
</head>
<body>
<table>
<tbody>
<tr align=”top”>
<td width=”50″>
<a><img src=”vb2010book.jpg” name=”book”></a>
</td>
<td><img height=”1″ width=”10″></td>
Client Side Scripting Languages
(22519)
The <select> element is used to create a drop-down list. The <option> tags inside the
<select> element define the available options in the list.
Example
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
To create an interdependent select list, where selecting the options of one select element
changes the options of another with corresponding content.
Example
<html>
<head>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
Client Side Scripting Languages
(22519)
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript:
dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status">
<option value="">Select status</option></select>')
</script>
</div>
</body>
</html>
<html>
<head>
<title>JavaScript Status Bar</title></head>
onLoad tells the browser that as soon as your page finished loading, it will display in your current
window’s status bar (window.status) the message “Welcome!”. The return true is necessary
because without, it won’t work.
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.htmlcenter.com"
onMouseOver="window.status='HTMLcenter';return
true" onMouseOut="window.status='';return true">
HTMLcenter
</a>
</body>
</html>
Our second script listening shows how to modify the status bar using onMouseOver and
onMouseOut with links. When the user moves his mouse over the link, it will display
“HTMLcenter” in the status bar. When he moves his mouse away from the link the status bar
will display nothing.
You could also have another message displayed in the status bar, when the user moves his
mouse cursor away from the link. You have to change the onMouseOut statement in the link to
for example: onMouseOut=”window.status=’You moved your cursor away from the link.’;return
true”.
Client Side Scripting Languages
(22519)
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0
var maxScroll = 100
var blanks = ""
There are so many ways for users to get around this method of protection that it
shouldn't even really be considered a method of protecting your data. Disable JavaScript. For
this to work, JavaScript must be enabled on the browser. View the source code and locate the
image or text they want to copy in the source code. Drag the image from the browser and drop
it into the desktop, file manager, or another open program. Disable the ability for user to
highlight text, copy, and paste it elsewhere.
Example
<html>
<head>
<script
language="JavaScript">
function function2() {
alert("This image is copyrighted")
}
</script>
</head>
<body oncontextmenu="function2()">
<p>Right click in the image.</p>
Client Side Scripting Languages
(22519)
<img oncontextmenu="function2()"
src="http://www.java2s.com/style/logo.pn
g" alt="www.java2s.com"
width="99"
height="76"
>
</body>
</html>
If you want to disable the context menu, add the following code to the
<body>: oncontextmenu="function2(); return false;"
Rotating banners ads comprises several banner images that constantly rotate on a
webpage at a fix time interval. You can create these banner images using standard graphics
tools.
<html>
<head>
<script language="Javascript">
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
banner=0
function ShowBanners()
{
if (document.images)
{
banner++
if (banner==MyBanners.length)
{ banner=0
}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body>
</html>
Creating rotating banner images will provide the visitor to your webpage with some
basic information. However, if you want the visitor to get more information by clicking on the
banner images, you need to create rotating banner ads that contain URL links.
<html>
<head>
Client Side Scripting Languages
(22519)
<script language="Javascript">
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new
Array('http://www.vbtutor.net/','http://www.excelvbatutor.com/','http://onlinebizguide4you.com/','h
tt p://javascript-tutor.net/')
banner=0
function ShowLinks()
{
document.location.href="http://www."+MyBannerLinks[banner]
}
function ShowBanners()
{
if (document.images)
{
banner++
if (banner==MyBanners.length)
{
banner=0
}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>
Slide Show
The JavaScript code for the slideshow is almost similar to the JavaScript code of the
rotating banners but it gives control to the user to choose the banner ads he or she wants to
see by clicking on the forward and backward buttons.
To create the JavaScript slideshow, first of all, you need to create a few banner
images using some graphics tools, or you can snap some photos with your digital camera or
your smartphone.
<html >
<head>
<script language=”Javascript”>
MySlides=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
Slide=0
function ShowSlides(SlideNumber){
{
Slide=Slide+SlideNumber
if (Slide>MySlides.length-1)
{
Slide=0
Client Side Scripting Languages
(22519)
}
if (Slide<0) {
Slide=MySlides.length-1
}
document.DisplaySlide.src=MySlides[Slide]
}
}
</script>
</head>
<body>
<P align=”center”><img src=”banner1.jpg” name=”DisplaySlide” width=”900″ height=”120″ /><p>
<center>
<table border=0>
<tr>
<td align=center>
<input type=”button” value=”Back” onclick=”ShowSlides(-1)”>
<input type=”button” value=”Forward” onclick=”ShowSlides(1)”>
</td>
</tr>
</table>
</center>
</body>
</html>