Introduction to javascript
JavaScript is the scripting language of the web!
JavaScript is used in millions
of web pages to improve the design, validate forms, detect browsers, create cookies, and much more.
of web pages to improve the design, validate forms, detect browsers, create cookies, and much more.
JavaScript is the most popular scripting language on the internet, and
works in all major browser, such as Internet Explorer, Mozilla, Firefox,
Netscape, and Opera.
JavaScript is easy to learn! You will enjoy it!
What You Should Already Know?
Before you continue you should have a basic understanding of the following:
· HTML/XHTML
What is JavaScript?
· JavaScript is a scripting language
· A JavaScript consists of line of executable computer code
· A JavaScript is usually embedded directly into HTML pages
· JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
· Every one can use JavaScript without purchasing a license
Are Jave and JavaScript the same?
NO!
Jave and JavaScript are two completely different languages in both concept and design!
Jave (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?
· JavaScript give 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.
· JavaScript can put dynamic text into an HTML page –
A JavaScript statement like this: document. write (“<h1>” + name +
“</ht>”) can write a variable text into an HTML page
· 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 ad 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 use 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.
A variable is a “container” for information you want to store.
Declare Variable
You can create a variable with the var statement:
You can also create a variable without the var statement:
Assign a Value to a Variable
Or like this:
How to put a JavaScript into an HTML page?
<html>
<body>
<script type=”text/javascript”>
Document.write(“Hello World”)
</script>
</html>
The code above will produce this output on an HTML page:
Hello World!
Example Explained
To insert a JavaScript into an HTML page, we use the
<script> tag (also use the type attribute to define the scripting
language).
So, the <script type=”text/javascript”> and </script> tells where the JavaScript stats and ends:
The word document.write is a standard JavaScript command for writing output to a page.
By entering the document. write command between the
<script type”text/javascript”> and </script> tags, the
browser will recognize it as a JavaScript command and execute the code
line. In this case the browser will write Hello World! To the page:
<html>
<body>
<script type=”text/javascript”>
Document.write(“Hello World”)
</script>
</html>
Note: if
we had not entered the <script> tag, the browser would have
treated the document. write(“Hello World”) command as pure text, and
just write the entire line on the page.
Ending Statements With a Semicolon?
With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon.
Many programmers continue this habit when writing JavaScript, but in
general, semicolons are optional! However, semicolons are required if
you want to put more than one statement on a single line.
How to Handle Older Browsers
Browsers that do not support JavaScript will display the script as page
content. To prevent them from doing this , we may use the HTML comment
tag:
<script type=”text/javascript”>
<!--
Document.write(“Hello World!”)
//- ->
</script>
The
two forward slashes at the end of comment line (//) are a JavaScript
comment symbol. This prevents the JavaScript compiler from the line.
What is JavaScript Variable?
Variable
A variable is a “container” for information you want to store. A
variable’s value can change during the script. You can refer to a
variable by name to see its value or to change its value.
Rules for variable names:
· Variable names are case sensitive.
· They must begin with a letter or the underscore character
IMPORTANT! JavaScript is case-sensitive! A variable named strname is not the same as a variable named STRNAME!
Variable are used to store data. This example will show you how
Example:
<html>
<body>
<script type=”text/javascript”>
var name = “Ram”
document.write(name)
document.write(“<h1>”+name+”</h1>”)
</script>
<p>This example declares a variable, assigns a valuate to it, and then displays the variable. </p>
<p>Then the variable is displayed one more time, only this time as a heading.</p>
</body>
</html>
Declare Variable
You can create a variable with the var statement:
Var strname=some value
You can also create a variable without the var statement:
Strname = some value
Assign a Value to a Variable
You can assign a value to a variable like this:
Var strname = “Ram”
Or like this:
Strname = “Ram”
Where to put JavaScript?
JavaScript Where to….?
JavaScript in a page will be executed immediately while the page loads
into the browser. This is not always what we want. Sometimes we want to
execute a script when a page loads, other times when a user triggers and
event.
JavaScript in the body section will be executed WHILE the page loads.
JavaScript in the head section will be executed when CALLED.
Scripts in the head section:
Scripts to be executed when they are called, or when an event is
triggered, go in the head section. When you place a script in the head
section, you will ensure that the script is loaded before anyone uses
it.
Scripts that contain functions go in the head section of the document.
Then we can be sure that the script is loaded before the function is
called.
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
Example:
<html>
<head>
<script type=”text/javascript”>
Function message()
{
Alert(“this alert box was called with the onload event”)
}
</script>
</head>
<body onload=”message()”>
</body>
</html>
Scripts in the body section:
Scripts to be executed when the page loads go in the body section. When
you place a script in the body section it generates the content of the
page.
<html>
<head>
</head>
<script type=”text/javascript”>
….
</script>
Example:
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
Document.write(“This message is written when the page loads”)
</script>
</body>
</html>
Scripts in both the body and the head Section:
You can place a unlimited number of scripts in your document, so you
can have scripts in both the body and the head section.
<head>
<script type=”text/javascript”>
….
</script>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
Using an External JavaScript
Sometime you might want to run the same JavaScript on several
pages, without having to write the same script on every page.
To simplify this, you can write a JavaScript in an external file. Save
the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .js file in the “src” attribute of the <script> tag:
<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>
Note: Remember to place the script exactly where you normally would write the script!
JavaScript Guidelines
Some other important things to know when scripting with JavaScript.
JavaScript in Case Sensitive
A function named “myfunction” is not the same as “myFunction” and a
variable named “myVar” is not the same as “myvar”.
JavaScript is case sensitive_ therefore watch your capitalization
closely when you create or cal variable, objects and functions.
White Space
JavaScript ignores extra spaces. You can add white space to your script
to make it more readable. The following lines are equivalent:
name=”Hege”
name= “Hege”
Break up a Code Line
You can break up a code line within a text string with a backslash. The example beow will be displayed property:
Document.write(“Hello\
World”)
However, you cannot break up a code line like this:
Document.write\
(“Hello World!”)
Comments
You can add comments to your script by using two slashes//:
//this is a comment
Document.write(“Hello World!”)
Or by using/*and*? (this create a multi-line comment block):
/* This is a comment
Block. It contains
Several lines */
Document.write(“Hello World!”)
Conditional Statements in JavaScript ?
Conditional Statements
Very often when you write code, you want to perform different actions
for different decisions. You can use conditional statements in our code
to do this.
In JavaScript we have the following conditional statements:
· if statement - use this statement if you want to execute some code if a specified condition is true.
· 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.
· If….else if…else statement – use this statement if you want to select one of many blocks of code to be executed
· Switch statement – use this statement if you want to select one of many blocks of code to be executed.
If Statement
You should use the if statement if you want to execute some code only if a specified condition is true.
Syntax
If (condition)
{
Code to be executed if condition is true
}
Note: that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!
Example 1
<script type=”text/javascript”>
//Write a “Good morning” greeting if
//the time is less thatn 10
Var d=new Date( )
Var time=d.get Houres( )
If (time<10)
{
Document.write(“<b>Good morning</b>”)
}
</script>
Example 2
<script type=”text/javascript”>
//Write “Lunch-time!” if the time is 11
Var d=new Date( )
Var time=d.get Houres( )
If (tim==<10)
{
Document.write(“<b>Lunch-time</b>”)
}
</script>
Note: When comparing variables you must always use two equals signs next toeach other(= =)!
Notice that there is no ..else.. in this syntax. You just tell the code
to execute some code only if the specified condition is true.
Example 3
<html>
<body>
<script type=”text/javascript”>
Var d=new Date( )
Var time=d.get Houres( )
If (time<10)
{
Document.write(“<b>Good morning</b>”)
}
</script>
<p>
This example demonstrate the If statement.
</p>
<p>
If the time on your browser is less than 10,
You will get a “Good morning” greeting.
</p>
</body>
</html>
If…else Statement
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.
Syntax
If (condition)
}
Code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Example 1:
<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>
Example 2:
<html>
<body>
<script type=”text/javascript”>
var d=new Date( )
var time=d.getHoures( )
If (time<10)
{
Document.write(“<b>Good morning</b>”)
}
else
document.write(“<b>Good day</b>”)
}
</script>
<p>
This example demonstrate the If…Else statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a “Good morning” greeting.
Otherwise you will get a “Good day” greeting.
</p>
</body>
</html>
If…else if…else Statement
You should use the if….else if…if statement if you want to select one of many sets of lines to execute.
Syntax
if (condition1)
{
Code to be executed if condition1 is true
}
Else if (condition2)
{
Code to be executed if condition2 is true
}
Else
{
Code to be executed if condition1 and condition2 are not true
}
Example 1:
<script type=”text/javascript”>
var d=new Date( )
var time=d.getHoures( )
If (time<10)
{
Document.write(“<b>Good morning</b>”)
}
Else if (time>10 && time<16>
{
Document.write (“<b.Good day</b>”)
}
Else
{
Document.write(“<b>Hello World!</b>”)
}
</script>
Example 2:
<html>
<body>
<script type=”text/javascript”>
var d=new Date( )
var time=d.getHoures( )
If (time<10)
{
Document.write(“<b>Good morning</b>”)
}
else if (time>10 && time<16>
{
document.write (“<b.Good day</b>”)
}
else
{
document.write(“<b>Hello World!</b>”)
}
</script
<p>
This example demonstrate the if..else if… else statement.
</p>
</body>
</html>
Random link
This example demonstrate a link, when you click on the link it will
take you to ulci.com.np OR to yahoo.com. There is a 50% chance for each
of them.
Example:
<html>
<body>
<script type=”text/javascript”>
var r=Math.random( )
if (r>0.5)
{
Document.write (“<a href= ‘http://www.ulci.com.np’)Universal Lang.!
</a>”)
}
Else
{
document.write(“<a href= ‘http://www.yahoo.com’>Yahooooo….!</a>”)
}
</script>
</body>
</html>
