html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
of documents. Variables are containers that store information and have naming rules.">
Scribd
Upload
83 views

Module 3 - Java Script: Client Side Scripting

The document provides an overview of JavaScript topics to be covered in a class on client side scripting, including: 1. JavaScript is a popular scripting language used widely on web pages for interactivity, validation, and communication. 2. JavaScript can be used to react to events, read and write HTML elements, validate data, detect browsers, and create cookies. 3. JavaScript was invented in 1995 and standardized in 1997. It can be embedded in HTML pages or linked via external .js files. 4. Scripts can be placed in the <head> or <body> of documents. Variables are containers that store information and have naming rules.

Uploaded by

Shreyas Guduri
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
83 views

Module 3 - Java Script: Client Side Scripting

The document provides an overview of JavaScript topics to be covered in a class on client side scripting, including: 1. JavaScript is a popular scripting language used widely on web pages for interactivity, validation, and communication. 2. JavaScript can be used to react to events, read and write HTML elements, validate data, detect browsers, and create cookies. 3. JavaScript was invented in 1995 and standardized in 1997. It can be embedded in HTML pages or linked via external .js files. 4. Scripts can be placed in the <head> or <body> of documents. Variables are containers that store information and have naming rules.

Uploaded by

Shreyas Guduri
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/ 10

Class Material 5 March 2021

Client Side Scripting


 JavaScript -Variables and Data Types - Statements – Operators-
Literals- Functions- Objects- Arrays- Built-in Objects, DOM – BOM -
Module 3 – Java Script Regular Expression Exceptions, Event handling, Validation - JQuery

Dr.V.Mareeswari
Assistant Professsor (Sr)
School of Information Technology and Engineering
VIT University

Cabin No: SJT 210-A30

2 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Introduction What Can JavaScript do?


 JavaScript is the most popular scripting language on the internet, and  JavaScript gives HTML designers a programming tool - HTML
works in all major browsers, such as Internet Explorer, Firefox, authors are normally not programmers, but JavaScript is a scripting language
Chrome, Opera, and Safari. with a very simple syntax!
 JavaScript is used in billions of Web pages to add functionality, validate  JavaScript can react to events - A JavaScript can be set to execute when
something happens, like when a page has finished loading or when a user
forms, communicate with the server, and much more. clicks on an HTML element
What is JavaScript?  JavaScript can read and write HTML elements - A JavaScript can read
 JavaScript was designed to add interactivity to HTML pages and change the content of an HTML element
 JavaScript is a scripting language  JavaScript can be used to validate data - A JavaScript can be used to
validate form data before it is submitted to a server. This saves the server
 A scripting language is a lightweight programming language from extra processing
 JavaScript is usually embedded directly into HTML pages  JavaScript can be used to detect the visitor's browser - A JavaScript
 JavaScript is an interpreted language (means that scripts execute can be used to detect the visitor's browser, and - depending on the browser -
load another page specifically designed for that browser
without preliminary compilation)
 JavaScript can be used to create cookies - A JavaScript can be used to
 Everyone can use JavaScript without purchasing a license store and retrieve information on the visitor's computer
3 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 4 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 1


Class Material 5 March 2021

History Writing to The HTML Document


 JavaScript was invented by Brendan Eich at Netscape (with  The HTML <script> tag is used to insert a JavaScript into an HTML
Navigator 2.0), and has appeared in all browsers since 1996. page.
 The official standardization was adopted by the ECMA organization (an <html> <body>
industry standardization association) in 1997. <h1>My First Web Page</h1>
 ECMA-262 is the official JavaScript standard. <script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>

5 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 6 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Where to write the Java Script


Scripts in <head> and <body> Statements
 You can place an unlimited number of scripts in your document, and you can have
scripts in both the body and the head section at the same time.  Unlike HTML, JavaScript is case sensitive - therefore watch your
 It is a common practice to put all functions in the head section, or at the bottom of capitalization closely when you write JavaScript statements, create or
the page. This way they are all in one place and do not interfere with page content. call variables, objects and functions.
Using an External JavaScript  A JavaScript statement is a command to a browser. The purpose of the
 JavaScript can also be placed in external files.
command is to tell the browser what to do.
 External JavaScript files often contain code to be used on several different web
pages. <script type="text/javascript">
 External JavaScript files have the file extension .js. document.write("<h1>This is a heading</h1>");
 Note: External script cannot contain the <script></script> tags! document.write("<p>This is a paragraph.</p>");
 To use an external script, point to the .js file in the "src" attribute of the <script> document.write("<p>This is another paragraph.</p>");
tag: </script>
<html><head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body></body></html>
7 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 8 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 2


Class Material 5 March 2021

Comments Variables
 Single line comments start with //  Variables are "containers" for storing information.
 Multi line comments start with /* and end with */ Rules for JavaScript variable names:
 Variable names are case sensitive (y and Y are two different variables)
 Variable names must begin with a letter, the $ character, or the
underscore character
Declaring (Creating) JavaScript Variables
var x;
var carname="Volvo";

9 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 10 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Operators
Local JavaScript Variables  Arithmetic Operators: + - * / % ++ --
 A variable declared within a JavaScript function becomes LOCAL and  Assignment operators: = += -= *= /= %=
can only be accessed within that function. (the variable has local scope).  To add two or more string variables together, use the + operator.
 Local variables are destroyed when you exit the function. txt1="What a very";
txt2="nice day";
Global JavaScript Variables txt3=txt1+” “ +txt2;
 Variables declared outside a function become GLOBAL, and all scripts  Comparison Operators : == != > >= < <=
and functions on the web page can access it. === (is exactly equal to (value and type) )
 Global variables are destroyed when you close the page.  Logical Operators : && || !
 If you declare a variable, without using "var", the variable always  Conditional Operator : ? :
becomes GLOBAL.
11 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 12 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 3


Class Material 5 March 2021

If...Else Statements
Output ??? <html><body> <html><body>
<script type="text/javascript"> <script type="text/javascript">
<html> x=5+"5"; var d = new Date(); var r=Math.random();
<body> document.write(x); var time = d.getHours();
if (time<10) if (r>0.5)
<script type="text/javascript"> document.write("<br />"); { {
var x; x="5"+5; document.write("<b>Good document.write(“
morning</b>"); <a href=‘http://www.w3schools.com’>
x=5+5; document.write(x); } Learn Web Development!</a>");
else if (time>=10 && time<16)
document.write(x); document.write("<br />"); { }
document.write("<br />"); </script> document.write("<b>Good else
day</b>"); {
x="5"+"5"; <p>The rule is: If you add a }
document.write("<a
number and a string, the result else
document.write(x); { href=‘ftp://192.168.2.172/lab/’>Vis
document.write("<br />"); will be a string.</p> document.write("<b>Hello it FTP Data!</a>");
</body> World!</b>"); }
} </script></body></html>
</html> </script> </body></html>
13 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 14 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Switch Statement
<html><body> For Loop
<script type="text/javascript"> <html><body> <html><body>
var d=new Date(); <script type="text/javascript"> <script type="text/javascript">
var theDay=d.getDay(); //Note that Sunday=0,Monday=1, var i=0; for (i = 1; i <= 6; i++)
etc. for (i=0;i<=5;i++)
{ {
switch (theDay)
document.write("The number is document.write("<h" + i +
{ ">This is heading " + i);
" + i);
case 5: document.write("Finally Friday"); break;
document.write("<br >"); document.write("</h" + i +
case 6: document.write("Super Saturday"); break; ">");
}
case 0: document.write("Sleepy Sunday"); break; </script></body></html> }
default: document.write("I'm looking forward to this weekend!");
} </script></body></html>
</script></body><html>
15 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 16 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 4


Class Material 5 March 2021

While and Do-While Loop Break and Continue Statement


<html> <html> <html> <body> <html> <body>
<body> <body> <script type="text/javascript"> <script type="text/javascript">
<script type="text/javascript"> <script type="text/javascript"> var i=0; var i=0
var i=0; var i=0; for (i=0;i<=10;i++) for (i=0;i<=10;i++)
while (i<=5) do { {
{ { if (i==3) if (i==3)
document.write("The number is " document.write("The number is " { {
+ i); + i); break; continue;
document.write("<br >"); document.write("<br >"); } }
i++; i++; document.write("The number is " document.write("The number is "
} } + i); + i);
</script> while (i<=5); document.write("<br >"); document.write("<br >");
</body> </script> } }
</html> </body> </script> </body> </html> </script> </body> </html>
</html>
17 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 18 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Functions Function Definition


 To keep the browser from executing a script when the page loads, you  function functionname(var1,var2,...,varX)
can put your script into a function. { some code }
 A function contains code that will be executed by an event or by a call  The parameters var1, var2, etc. are variables or values passed into the
to the function. function.The { and the } defines the start and end of the function.
 You may call a function from anywhere within a page (or even from  A function with no parameters must include the parentheses () after the
other pages if the function is embedded in an external .js file). function name.
 Functions can be defined both in the <head> and in the <body>  Do not forget about the importance of capitals in JavaScript! The
section of a document. However, to assure that a function is word function must be written in lowercase letters, otherwise a
read/loaded by the browser before it is called, it could be wise to put JavaScript error occurs! Also note that you must call a function with the
functions in the <head> section. exact same capitals as in the function name.
 The return statement is used to specify the value that is returned from
the function.
19 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 20 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 5


Class Material 5 March 2021

<html>
Popup Boxes
<head>  JavaScript has three kind of popup boxes:
<script type="text/javascript">
1. Alert Box
function product(a,b)
{ 2. Confirm Box
return a*b; 3. Prompt box
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
21 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 22 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

A confirm box is often used if you want the user to


Alert Box An alert box is often used if you want to make sure Confirm Box verify or accept something. If the user clicks "OK",
information comes through to the user. When an alert the box returns true. If the user clicks "Cancel", the
box pops up, the user will have to click "OK" to proceed. box returns false.
<html> <head> <html> <head>
<script type="text/javascript">
<script type="text/javascript">
function show_confirm()
function show_alert() {
{ alert("I am an alert box!"); } var r=confirm("Press a button");
</script> </head> if (r==true)
{ alert("You pressed OK!"); }
<body> else
<input type="button" { alert("You pressed Cancel!"); }
onclick="show_alert()" }
</script> </head>
value="Show alert box" >
<body>
</body> </html> <input type="button" onclick="show_confirm()" value="Show confirm box" >
</body> </html>
23 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 24 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 6


Class Material 5 March 2021

Prompt Box <html> <head> <script type="text/javascript">


 A prompt box is often used if you want the user to input a value before function show_prompt()
entering a page. {
var name=prompt("Please enter your name","Harry Potter");
 When a prompt box pops up, the user will have to click either "OK" or
if (name!=null && name!="")
"Cancel" to proceed after entering an input value.
{ document.write("<p>Hello " + name + "! How are you
 If the user clicks "OK" the box returns the input value. If the user today?</p>"); }
clicks "Cancel" the box returns null. }</script> </head>
<body>
<input type="button"
onclick="show_prompt()"
value="Show prompt box" >
</body> </html>

25 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 26 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Objects String object


 JavaScript is an Object Based Programming language.  The String object is used to manipulate a stored piece of text.
 An Object Based Programming language allows you to define your own var txt="Hello world!";
objects and make your own variable types. document.write(txt.length); //12
 An object is just a special kind of data. An object has properties and document.write(txt.toUpperCase()); //HELLO WORLD!
methods. document.write(txt.match("world") ); //world
 Properties are the values associated with an object.
document.write(txt.match("World") ) ;//null
var txt="Hello World!"; document.write(txt.indexOf("world")); //6
document.write(txt.length);
var str="Visit Microsoft!";
 Methods are the actions that can be performed on objects.
document.write(str.replace("Microsoft","CTS")); //Visit CTS!
var str="Hello world!";
document.write(str.toUpperCase());

27 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 28 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 7


Class Material 5 March 2021

Example:
var txt = "Hello World!";
document.write("<p>Big: " + txt.big() + "</p>"); Date Object
document.write("<p>Small: " + txt.small() + "</p>");  The Date object is used to work with dates and times.
document.write("<p>Bold: " + txt.bold() + "</p>");  var d = new Date();
document.write("<p>Italic: " + txt.italics() + "</p>");  getDate()  Returns the day of the month (from 1-31)
document.write("<p>Strike: " + txt.strike() + "</p>");  getDay()  Returns the day of the week (from 0-6)
document.write("<p>Fontcolor: " + txt.fontcolor("green") +  getYear()Returns the year (four digits)
"</p>");
 getHours()Returns the hour (from 0-23)
document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>");
 getMinutes()Returns the minutes (from 0-59)
document.write("<p>Subscript: " + txt.sub() + "</p>");
document.write("<p>Superscript: " + txt.sup() + "</p>");  getMonth()Returns the month (from 0-11)
document.write("<p>Link: " +  getSeconds()Returns the seconds (from 0-59)
txt.link("http://www.w3schools.com") + "</p>");  getTime()  Returns the number of milliseconds since midnight Jan 1,
document.write("<p>Blink: " + txt.blink() + " (does not work in IE, 1970
Chrome,
29
or Safari)</p>");
Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 30 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Difference between two dates Boolean Object


<html> <body> <script>  The Boolean object represents two values: "true" or "false".
var dateFirst = new Date("11/25/2017");  var myBoolean=new Boolean();
var dateSecond = new Date("11/28/2017");  0 False
// time difference  1 True
var timeDiff = Math.abs(dateSecond.getTime() -
dateFirst.getTime());
// days difference
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
// difference
alert(diffDays);
</script> </body>

31 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 32 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 8


Class Material 5 March 2021

Example 1:
var parents = ["Jani", "Tove"];
Array Object var children = ["Cecilie", "Lone"];
 The Array object is used to store multiple values in a single variable. var family = parents.concat(children);
 var myCars=new Array(); // regular array (add an optional integer
document.write(family); // Jani,Tove,Cecilie,Lone
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo"; Example 2:
myCars[2]="BMW"; var brothers = ["Stale", "Kai Jim", "Borge"];
 var myCars=["Saab","Volvo","BMW"]; //literal array var family = parents.concat(brothers, children);
 var myCars=new Array("Saab","Volvo","BMW"); // condensed array
document.write(family); //Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone
var a=new Array(10);
Example 3:
for(var i=0;i<10;i++)
var fruits = ["Banana", "Orange", "Apple" ];
{
document.write(fruits.join() + "<br >"); //Banana,Orange,Apple
a[i]=i+1;
document.write(a[i]); document.write(fruits.join("+") + "<br >"); //Banana+Orange+Apple
} document.write(fruits.join(" and ")); //Banana and Orange and Apple

33 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 34 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Example 5:
Example 4:
Var fruits= [“Lemon”, “Apple”, “Orange”, “Banana”];
var fruits = ["Banana", "Orange", "Apple", "Mango"];
//Display from index 0 to index 2 (0 and1)
document.write(fruits.pop() ); //Mango //remove the last item
document.write(fruits.slice(0,2)); // Lemon, Apple
document.write(fruits );//Banana,Orange,Apple
document.write(fruits.slice(1));//Apple, Orange, Banana //From 1st
document.write(fruits.push("Lemon","Pineapple") ); //5
document.write(fruits.slice(-2));// Orange, Banana //Last 2 items
document.write(fruits);//Banana,Orange,Apple, Lemon,Pineapple
Example 6:
document.write(fruits.reverse());//Pineapple, Lemon, Apple, Orange,
var fruits = ["Banana", "Orange", "Apple", "Mango"];
Banana
document.write(fruits.sort()); // Apple,Banana,Mango,Orange
document.write(fruits.shift() ); // Pineapple
var n = ["10", "5", "40", "25", "100", "1"];
document.write(fruits);// Lemon, Apple, Orange, Banana
document.write(n.sort()); //1,10,100,25,40,5
document.write(fruits.unshift("Kiwi","Pineapple") ); //6
Example 7:
// added 5th and 6th item
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits); // Kiwi,Pineapple,Lemon,Apple,Orange,Banana
document.write(fruits.toString()); //Banana,Orange,Apple,Mango
35 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 36 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 9


Class Material 5 March 2021

Numbers Math Object


 The Number() function converts the object argument to a number that  sqrt(x)Returns the square root of x
represents the object's value.  ceil(x)Returns x, rounded upwards to the nearest integer
 If the value cannot be converted to a legal number, NaN is returned.  floor(x)Returns x, rounded downwards to the nearest integer
 Note: If the parameter is a Date object, the Number() function returns  exp(x)Returns the value of Ex
the number of milliseconds since midnight January 1, 1970  log(x)Returns the natural logarithm (base E) of x
var test4= 10 , test5= 20;  max(x,y,z,...,n)Returns the number with the highest value
document.write(test4 +test5); //1020  min(x,y,z,...,n)Returns the number with the lowest value
 pow(x,y)Returns the value of x to the power of y
document.write(Number(test4)+Number(test5)); //30
 random()Returns a random number between 0 and 1
document.write(Number("99.66") +Number("01.34") ); //101
 round(x)Rounds x to the nearest integer
The parseInt() function parses a string and returns an integer.
 sin(x)Returns the sine of x (x is in radians)
document.write(parseInt("10.33") ) ; //10
 cos(x)Returns the cosine of x (x is in radians)
document.write(parseFloat("10.33") ); //10.33  tan(x)Returns the tangent of an angle

37 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE 38 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

For...In Statement
 The code in the body of the for...in loop is executed once for each
property.
for (variable in object)
{
code to be executed
}
var person={fname:"John",lname:"Doe",age:25}; //object creation
var x;
for (x in person)
{
document.write(person[x] + " "); // John Doe 25
}
39 Dr. MAREESWARI V, AP(Sr), SITE, VIT,VELLORE

Dr. MAREESWARI V/ SITE / VIT UNIVERSITY 10

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy