Javascript tutorial

HTML Scripts
Visit our website : techaltum.com
Online Tutorial : tutorial.techaltum.com Made By:
Avinash Malhotra1http://www.tutorial.techaltum.com

Scripts
O In computer programming, a script is a program or
sequence of instructions that is interpreted or carried
out by another program rather than by the computer
processor (as a compiled program is).
O Some languages have been conceived expressly as
script languages. Among the most popular are Perl,
Rexx (on IBM mainframes), JavaScript, and Tcl/Tk.
O In the context of the World Wide Web, Perl, VBScript,
and similar script languages are often written to
handle forms input or other services for a Web site
and are processed on the Web server.
O A JavaScript script in a Web page runs "client-side" on
the Web browser.
2http://www.tutorial.techaltum.com

HTML Scripts (cont)
O With HTML scripts you can create dynamic
web pages, make image rollovers for really
cool menu effects, or even validate your
HTML form's data before you let the user
submit. However, javascript and vbscript are
very complicated compared to HTML. It may
be simpler just to download someone elses
scripting code and use it on your web page.

HTML Javascript Code
O If you want to insert javascript code into your
HTML you are going to use the script tag.
O Below is the correct code to insert
embedded javascript code onto your site.
<script type="text/javascript">

</script>

The Name "JavaScript"
O The name JavaScript is owned by Netscape.
O Microsoft calls its version of the language
JScript.
O The generic name of the language is
EcmaScript.

The HTML DOM
O The HTML Document Object Model (DOM) is
the browser's view of an HTML page as an
object hierarchy, starting with the browser
window itself and moving deeper into the
page, including all of the elements on the
page and their attributes.

Simplified Version of HTML
DOM

Introduction to JavaScript
O JavaScript is used in millions of Web pages
to improve the design, validate forms, detect
browsers, create cookies, and much more.
O JavaScript is the most popular scripting
language on the internet, and works in all
major browsers, such as Internet Explorer,
Mozilla, Firefox, Netscape, and Opera.
O Before you continue you should have a basic
understanding of HTML

What is JavaScript?
O JavaScript was designed to add interactivity to HTML
pages
O JavaScript is a scripting language
O A scripting language is a lightweight programming
language
O A JavaScript consists of lines of executable computer
code
O A JavaScript is usually embedded directly into HTML
pages
O JavaScript is an interpreted language (means that
scripts execute without preliminary compilation)
O Everyone can use JavaScript without purchasing a
license

Are Java and JavaScript the
Same?
O NO!
O Java and JavaScript are two completely
different languages in both concept and
design!
O Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language - in the same
category as C and C++.

What can a JavaScript Do?
O JavaScript gives HTML designers a programming
tool - HTML authors are normally not programmers, but
JavaScript is a scripting language with a very simple syntax!
Almost anyone can put small "snippets" of code into their
HTML pages
O JavaScript can put dynamic text into an HTML page
- A JavaScript statement like this: document.write("<h1>" +
name + "</h1>") can write a variable text into an HTML page
O 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
O JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an HTML
element

What can a JavaScript Do?
(cont)
O 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
O 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
O JavaScript can be used to create cookies
- A JavaScript can be used to store and retrieve
information on the visitor's computer

JavaScript Basic Rules
O JavaScript statements end with semi-
colons.
O JavaScript is case sensitive.
O JavaScript has two forms of comments:
O Single-line comments begin with a double
slash (//).
O Multi-line comments begin with "/*" and
end with "*/".

Comment Syntax
O Syntax
// This is a single-line comment
/* This is
a multi-line
comment. */

O Enter any two value from user show its addition
multiplication subtraction and division
O Enter 5 subject marks from the user show its total
Enter km and show in meter.
O marks and its percentage (%)
O Enter meter and show in km
O Enter the tem.. In dc and show in Fahrenheit.
Questions ...

Dot Notation
O In JavaScript, objects can be referenced
using dot notation, starting with the highest-
level object (i.e, window). Objects can be
referred to by name or id or by their position
on the page. For example, if there is a form
on the page named "loginform", using dot
notation you could refer to the form as
follows:
O Syntax
window.document.loginform
O Another example is:
document.write // write is a method
for document

Document Object Methods
Method Description
close() Closes an output stream opened with the
document.open() method, and displays the
collected data
getElementById() Returns a reference to the first object with the specified
id
getElementsByName() Returns a collection of objects with the specified name
getElementsByTagName() Returns a collection of objects with the specified
tagname
open() Opens a stream to collect the output from any
document.write() or document.writeln() methods
write() Writes HTML expressions or JavaScript code to a
document
writeln() Identical to the write() method, with the addition of
writing a new line character after each expression

write method
O <html>
O <body>
O <script type="text/javascript">
O document.write("Hello World!");
O </script>
O </body>
O </html>
Output
Hello World!

Example Explained
O To insert a JavaScript into an HTML
page, we use the <script> tag. Inside the
<script> tag we use the "type=" attribute
to define the scripting language.
O So, the <script type="text/javascript">
and </script> tells where the JavaScript
starts and ends.
O The word document.write is a
standard JavaScript command for writing
output to a page.

write method (cont)
O <html>
O <body>
O <script type="text/javascript">
O document.write("<h1>This is a
header</h1>");
O </script>
O </body>
O </html>
Output
This is a header20http://www.tutorial.techaltum.com

write method (cont)
<html>
<body>
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another
paragraph</p>");
</script>
</body>
</html>

JavaScript Variables
O Variables are "containers" for storing
information.
O Variables can be used to hold values
O Example:
x=5; length=66.10;

JavaScript Variables (cont)
O A variable can have a short name, like x,
or a more describing name like length.
O A JavaScript variable can also hold a text
value like in carname="Volvo".
O Rules for JavaScript variable names:
O Variable names are case sensitive (y and
Y are two different variables)
O Variable names must begin with a
letter or the underscore character
O NOTE: Because JavaScript is case-
sensitive, variable names are case-
sensitive.

JavaScript Variables (cont)
<html>
<body>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>
<p>The script above declares a variable, assigns a value to it,
displays the value, change the value, and displays the value
again.</p>
</body>
</html>

Assigning Values to
Undeclared JavaScript
VariablesO If you assign values to variables that has
not yet been declared, the variables will
automatically be declared.
O If you redeclare a JavaScript variable, it
will not lose its original value.
O var x=5;
O var x;
O After the execution of the statements
above, the variable x will still have the
value of 5. The value of x is not reset (or
cleared) when you redeclare it.

JavaScript Operators
O The assignment operator = is used to assign
values to JavaScript variables.
O Arithmetic operators are used to perform
arithmetic between variables and/or values.

JavaScript Operators (cont)
O Given that y=5, the table below explains the
arithmetic operators:
Sign Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4 27http://www.tutorial.techaltum.com

JavaScript Assignment Operators
O Assignment operators are used to assign values to
JavaScript variables.
O Given that x=10 and y=5, the table below explains the
assignment operators:
Operator Example Same As Result
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

The + Operator Used on
Strings
O The + operator can also be used to add string variables
or text values together.
O To add two or more string variables together, use the +
operator.
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
O After the execution of the statements above, the
variable txt3 contains "What a verynice day".

Adding Strings and
Numbers
O Look at these examples:
x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
O The rule is:
O If you add a number and a string, the result
will be a string.
10
55
55
55

JavaScript Comparison and
Logical Operators
O Comparison and Logical operators are used
to test for true or false.
O Comparison operators are used in logical
statements to determine equality or
difference between variables or values.

JavaScript Comparison and Logical
Operators (cont)
O Given that x=5, the table below explains the
comparison operators:
Sign Description Example
== is equal to x==8 is false
=== is exactly equal to (value and type) x==5 is true
x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true 32http://www.tutorial.techaltum.com

How Can it be Used
O Comparison operators can be used in
conditional statements to compare values
and take action depending on the result:
if (age<18) document.write("Too young");

Logical Operators
O Logical operators are used in determine
the logic between variables or values.
O Given that x=6 and y=3, the table below
explains the logical operators:
Sign Description Example
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true

Conditional Operator
O JavaScript also contains a conditional operator
that assigns a value to a variable based on some
condition.
O Syntax
variablename=(condition)?value1:value2
O Example
greeting=(visitor=="PRES")?"Dear President
":"Dear ";
O If the variable visitor has the value of "PRES",
then the variable greeting will be assigned the
value "Dear President " else it will be assigned
"Dear". 35http://www.tutorial.techaltum.com

JavaScript If...Else
Statements
O Conditional statements in JavaScript are used to perform
different actions based on different conditions.
O In JavaScript we have the following conditional statements:
O if statement - use this statement if you want to execute
some code only if a specified condition is true
O if...else statement - use this statement if you want to
execute some code if the condition is true and another code if
the condition is false
O if...else if....else statement - use this statement if you
want to select one of many blocks of code to be executed
O switch statement - use this statement if you want to select
one of many blocks of code to be executed

If Statement
O You should use the if statement if you want
to execute some code only if a specified
condition is true.
O Syntax
if (condition)
{
code to be executed if condition
is true }
O Note that if is written in lowercase letters.
Using uppercase letters (IF) will generate a
JavaScript error!

If Statement Example 1
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good
morning</b>");
}
</script> 38http://www.tutorial.techaltum.com

If Statement Example 2
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();
if (time==11)
{
document.write("<b>Lunch-time!</b>");
}
</script>

If...else Statement
O If you want to execute some code if a condition is true and
another code if the condition is not true, use the if....else
statement.
O Syntax
if (condition)
{
code to be executed if condition is true }
else
{
code to be executed if condition is not true
}

If...else Statement
Example<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting. //Otherwise you
will get a "Good day“greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
} </script> 41http://www.tutorial.techaltum.com

JavaScript Switch
Statement
O You should use the switch statement if you want to
select one of many blocks of code to be executed.
O Syntax
switch(n)
{
case 1: execute code block 1
break;
case 2: execute code block 2
break;
default: code to be executed if n is different
from case 1 and 2
}

JavaScript Switch Statement
(cont)
O This is how it works: First we have a single
expression n (most often a variable), that is
evaluated once. The value of the expression
is then compared with the values for each
case in the structure. If there is a match, the
block of code associated with that case is
executed. Use break to prevent the code
from running into the next case
automatically.

Switch Statement
Example
//You will receive a different greeting based
//on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
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>

JavaScript Functions
O A function is a reusable code-block that will be executed by an
event, or when the function is called.
O To keep the browser from executing a script when the page
loads, you can put your script into a function.
O A function contains code that will be executed by an event or
by a call to that function.
O You may call a function from anywhere within the page (or
even from other pages if the function is embedded in an
external .js file).
O Functions can be defined both in the <head> and in the
<body> section of a document. However, to assure that the
function is read/loaded by the browser before it is called, it
could be wise to put it in the <head> section.

How to Define a
Function
O The syntax for creating a function is:
function functionname(var1,var2,...,varX)
{
some code
}
O var1, var2, etc are variables or values
passed into the function. The { and the }
defines the start and end of the function.

How to Define a
Function (cont)
O Note: A function with no parameters must include
the parentheses () after the function name:
function functionname()
{
some code
}
O Note: Do not forget about the importance of
capitals in JavaScript! The word function must be
written in lowercase letters, otherwise a JavaScript
error occurs! Also note that you must call a function
with the exact same capitals as in the function
name. 47http://www.tutorial.techaltum.com

The return Statement
O The return statement is used to specify the value that is
returned from the function.
O Example
O The function below should return the product of two numbers
(a and b):
function prod(a,b)
{
x=a*b;
return x;
}
O When you call the function above, you must pass along two
parameters:
O product=prod(2,3);
O The returned value from the prod() function is 6, and it will be
stored in the variable called product. 48http://www.tutorial.techaltum.com

The Lifetime of JavaScript
Variables
O When you declare a variable within a function, the
variable can only be accessed within that function.
When you exit the function, the variable is destroyed.
These variables are called local variables. You can
have local variables with the same name in different
functions, because each is recognized only by the
function in which it is declared.
O If you declare a variable outside a function, all the
functions on your page can access it. The lifetime of
these variables starts when they are declared, and
ends when the page is closed.
49
http://www.tutorial.techaltum.com

Thanks
50
Visit our website : techaltum.com
Online Tutorial : tutorial.techaltum.com
http://www.tutorial.techaltum.com

Javascript tutorial

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Javascript tutorial (20)

Recently uploaded (20)

Javascript tutorial