Scribd
Upload
56 views18 pages

Module II - Java Script

The document provides an overview of topics covered in Module II of a JavaScript course, including an introduction to JavaScript, variables, conditional statements, functions, objects, and building forms. JavaScript is introduced as the most popular scripting language used on web pages for interactivity, validating forms, and communicating with servers. The module will cover fundamental JavaScript concepts like variables, operators, conditional logic, loops, and functions.

Uploaded by

Soumadip Sapui
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
56 views18 pages

Module II - Java Script

The document provides an overview of topics covered in Module II of a JavaScript course, including an introduction to JavaScript, variables, conditional statements, functions, objects, and building forms. JavaScript is introduced as the most popular scripting language used on web pages for interactivity, validating forms, and communicating with servers. The module will cover fundamental JavaScript concepts like variables, operators, conditional logic, loops, and functions.

Uploaded by

Soumadip Sapui
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/ 18

Module II– Java Script

Topics
Introduction to JavaScript
Variables
Conditional and Loops
Events
Functions
Frames
HTML document
Predefined Objects
Image Object
Layers
Drag and Drop
Building a Sample Form.

2 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Introduction
 JavaScript is the most popular scripting language on the internet, and
works in all major browsers, such as Internet Explorer, Firefox,
Chrome, Opera, and Safari.
 JavaScript is used in billions of Web pages to add functionality,
validate forms, communicate with the server, and much more.
What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
 Everyone can use JavaScript without purchasing a license

3 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


What Can JavaScript do?
 JavaScript gives HTML designers a programming tool - HTML
authors are normally not programmers, but JavaScript is a scripting
language with a very simple syntax!
 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 clicks on an HTML element
 JavaScript can read and write HTML elements - A JavaScript can
read and change the content of an HTML element
 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
from extra processing
 JavaScript can be used to detect the visitor's browser - A JavaScript
can be used to detect the visitor's browser, and - depending on the browser -
load another page specifically designed for that browser
 JavaScript can be used to create cookies - A JavaScript can be used to
store and retrieve information on the visitor's computer

4 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


History
 JavaScript was invented by Brendan Eich at Netscape (with
Navigator 2.0), and has appeared in all browsers since 1996.
 The official standardization was adopted by the ECMA organization
(an industry standardization association) in 1997.
 ECMA-262 is the official JavaScript standard.

5 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Writing to The HTML Document
 The HTML <script> tag is used to insert a JavaScript into an HTML
page.
<html>
<head>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script></head>
<body>
<h1>My First Web Page</h1>
</body>
</html>

6 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


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

8 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Comments
 Single line comments start with //
 Multi line comments start with /* and end with */

9 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Variables
 Variables are "containers" for storing information.
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";

10 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Local JavaScript Variables
 A variable declared within a JavaScript function becomes LOCAL
and can only be accessed within that function. (the variable has local
scope).
 Local variables are destroyed when you exit the function.

Global JavaScript Variables


 Variables declared outside a function become GLOBAL, and all
scripts and functions on the web page can access it.
 Global variables are destroyed when you close the page.
 If you declare a variable, without using "var", the variable
always becomes GLOBAL.

11 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Operators
 Arithmetic Operators: + - * / % ++ --
 Assignment operators: = += -= *= /= %=
 To add two or more string variables together, use the + operator.
txt1="What a very";
txt2="nice day";
txt3=txt1+” “ +txt2;
 Comparison Operators : == != > >= < <=
=== (is exactly equal to (value and type) )
 Logical Operators : && || !
 Conditional Operator : ? :

12 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


Output ???
<html> x=5+"5";
<body> document.write(x);
<script type="text/javascript"> document.write("<br />");
var x; x="5"+5;
x=5+5; document.write(x);
document.write(x); document.write("<br />");
document.write("<br />"); </script>
x="5"+"5"; <p>The rule is: If you add a
document.write(x); number and a string, the result
document.write("<br />"); will be a string.</p>
</body>
</html>
13 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021
If...Else Statements
<html><body> <html><body>
<script type="text/javascript"> <script type="text/javascript">
var d = new Date(); var r=Math.random();
var time = d.getHours();
if (time<10) if (r>0.5)
{ {
document.write("<b>Good document.write(“
morning</b>"); <a href=‘http://www.w3schools.com’>
} Learn Web Development!</a>");
else if (time>=10 && time<16)
{ }
document.write("<b>Good else
day</b>"); {
}
else document.write("<a
{ href=‘ftp://192.168.2.172/lab/’>Vis
document.write("<b>Hello it FTP Data!</a>");
World!</b>"); }
} </script></body></html>
</script> </body></html>
14 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021
Switch Statement
<html><body>
<script type="text/javascript">
var d=new Date();
var theDay=d.getDay(); //Note that Sunday=0,Monday=1, etc.
switch (theDay)
{
case 5: document.write("Finally Friday"); break;
case 6: document.write("Super Saturday"); break;
case 0: document.write("Sleepy Sunday"); break;
default: document.write("I'm looking forward to this weekend!");
}
</script></body><html>

15 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


For Loop
<html><body> <html><body>
<script type="text/javascript"> <script type="text/javascript">
var i=0; for (i = 1; i <= 6; i++)
for (i=0;i<=5;i++)
{
{
document.write("The number is document.write("<h" + i +
" + i); ">This is heading " + i);
document.write("<br >"); document.write("</h" + i +
} ">");
</script></body></html> }
</script></body></html>

16 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021


While and Do-While Loop
<html> <html>
<body> <body>
<script type="text/javascript"> <script type="text/javascript">
var i=0; var i=0;
while (i<=5) do
{ {
document.write("The number is " document.write("The number is "
+ i); + i);
document.write("<br >"); document.write("<br >");
i++; i++;
} }
</script> while (i<=5);
</body> </script>
</html> </body>
</html>
17 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021
Break and Continue Statement
<html> <body> <html> <body>
<script type="text/javascript"> <script type="text/javascript">
var i=0; var i=0
for (i=0;i<=10;i++) for (i=0;i<=10;i++)
{ {
if (i==3) if (i==3)
{ {
break; continue;
} }
document.write("The number is " document.write("The number is "
+ i); + i);
document.write("<br >"); document.write("<br >");
} }
</script> </body> </html> </script> </body> </html>

18 R.Vijayan/ Asso Prof / SITE / VIT University 1 September 2021

You might also like