This tutorial includes: html tutorial, how to learn html, guide, tips tricks, tags, attributes, elements, title, paragraph, head, list, link, image, table, forms, span, div, meta tags, javascript, font, frame, CSS-HTML styles, and formatting.
- Getting Started
- Where to put it?
- Popup boxes
- Variables
- If and else
- Functions
- Events
- Loops
- Arrays
Getting Started
Javascript is a scripting language that will allow you to add real programming to your webpages. You can create small application type processes with javascript. The following are the main uses of javascript:
1. Browser Detection: Detecting the browser used by a visitor at your page. Depending on the browser, another page specifically designed for that browser can then be loaded.
2. Cookies: Storing information on the visitor's computer, then retrieving this information automatically next time the user visits your page. This technique is called "cookies".
3. Control Browsers: Opening pages in customized windows, where you specify if the browser's buttons, menu line, status line or whatever should be present.
4. Validate Forms: Validating inputs to fields before submitting a form, for example, validating the entered email address to see if it has an @ in it.
When you write javascript, you should also keep the following in your mind:
1. Javascript lines end with a semicolon. You may have noticed from the example on the previous page that javascript lines end with a semicolon. You can easily put all your javascript on a single line without destroying the performance of it. However, you would destroy the overview of your script so it is not advisable.
2. Always put the text within " ". When entering text to be handled by javascript, you should always put the text within " ". If you forget to enclose your text in " ", javascript will interpret your text as being variables rather than text. In the next section you will learn why this would cause an error to your script.
3. Capital letters are different from lowercase letters. You should always remember that capital letters are different from lowercase letters. This means that when you write commands in javascript, you need to type capital letters in the correct places, and nowhere else.
4. Incorrect capitalization is probably the most common source of error for javascript programmers on all levels.
Where to put it?
Since javascript isn't HTML, you will need to use the tag, <script>, to let the browser know in advance when you enter javascript to an HTML page. and The browser will use the <script> type="text/javascript"> and </script> to tell where javascript starts and ends. The following is an example:
<html>
<head>
<title>Javascript Tutorial</title>
</head>
<body>
<script type="text/javascript">
alert("This is the alert box!");
document.write("This is javascript write method!");
</script>
</body>
</html>
The word alert in the above is a standard javascript command that will cause an alert box to pop up on the screen. The visitor will need to click the "OK" button in the alert box to proceed.
By entering the alert command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a javascript command.
If we had not entered the <script> tags, the browser would simply recognize it as pure text, and just write it on the screen.
You can enter javascript in both the <head> and <body> sections of the document. In general however, it is advisable to keep as much as possible in the <head> section.
Popup boxes
There are three popup boxes: alert box, alert box, and prompt box.
Alert box
The syntax for an alert box is: alert("your text"). The user will need to click "OK" to proceed. Typical use is when you want to make sure information comes through to the user.
Alert box
The syntax for a confirm box is: confirm("your text"). The user needs to click either "OK" or "Cancel" to proceed. Typical use is when you want the user to verify or accept something. The following is another example:
if (confirm("Do you agree")) {alert("You agree")}
else{alert ("You do not agree")};
Prompt box
The prompt box syntax is: prompt("your text","default value"). The user must click either "OK" or "Cancel" to proceed after entering the text. Typical use is when the user should input a value before entering the page.
The following are the above three examples:
Variables
JavaScript variables are used to hold values or expressions. A variable can have a short name, like y or a more descriptive name, like fishname. Rules for JavaScript variable names are as follows:
1. Variable names are case sensitive (y and Y are two different variables).
2. Variable names must begin with a letter or the underscore character.
Creating variables in JavaScript is most often referred to as "declaring" variables. You can declare JavaScript variables with the var statement as follows:
var x;
var fishname;
After the declaration shown above, the variables are empty (they have no values yet).
However, you can also assign values to the variables when you declare them:
var x=5;
var fishname="Goldfish";
Compare Variables
There are several different ways to compare variables.
The simplest is comparing for equality, which is done using a double equals sign:
if (a==b) {alert("a equals b")};
if (lastname=="Petersen") {alert("Nice name!!!")};
Note: If you forget to use double equals signs when comparing variables for equality, and use a single equals sign instead, you will not compare the variables. What will happen is that the variable on the left side of the equals sign will be assigned the value of the variable to the right.
The following table contains the different comparing operators:
|
Operator | Explanation | Example
| | == | equal to | 4==5 (false)
5==5 (true)
5==4 (false)
| | != | not equal to | 4!=5 (true)
5!=5 (false)
5!=4 (true)
| | < | less than | 4<5 (true)
5<5 (false)
5<4 (false)
| | > | greater than | 4>5 (false)
5>5 (false)
5>4 (true)
| | <= | less than or equal to | 4<=5 (true)
5<=5 (true)
5<=4 (false)
| | >= | greater than or equal to | 4>=5 (false)
5>=5 (true)
5>=4 (true)
|
|
If and else
Sometimes javascript requires the ability to make distinctions between different possibilities. For example, you might have a script that checks which browser the user arrives with. If it's ie, a page specifically designed for that browser should be loaded, if it's firefox, another page should be loaded.
The general syntax for if statements is:
if (condition) {action1} else {action2};
Note: If "if" is written as "IF", an error will be the result.
More complex if statements can be made by simply entering new if statements in the else part:
if (condition) {action1}
else {if (condition) {action2}
else {action3};};
An example:
if (browser=="MSIE") {alert("You are using MSIE")}
else {if (browser=="Firefox") {alert("You are using Firefox")}
else {alert("You are using an unknown browser")};};
and, or & not
To further enhance your if statements, you can use the so-called logical operators.
And is written as && and is used when you want to check if more than one condition is true.
The syntax is: if (condition && condition) {action}
if (hour==12 && minute==0) {alert("it's noon")};
Or is written as || and is used when more than a one condition should result in the check being true. (|| is achieved by using the shift key combined with the \ key)
The syntax is: if (condition || condition) {action}
if (hour==11 || hour==10) {alert("it's less than 2 hours till noon")};
Not is written as ! and is used to invert the result.
The syntax is: if (!(condition)) {action}
if (!(hour==11)) {alert("it's more than 1 hour till noon")};
Functions
To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the <head> section.
Syntax
function functionname(var1,var2,...,varX)
{
some code
}
The following is an example:
<html>
<head>
<script>
function myfunction()
{
alert("Welcome to my world!!");
}
</script>
</head>
<body>
<form name="myform">
<input type="button" value="Hit me" onclick="myfunction()">
</form>
</body>
</html>
Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
Examples of events are as follows:
1. A mouse click
2. A web page or an image loading
3. Mousing over a hot spot on the web page
4. Selecting an input field in an HTML form
5. Submitting an HTML form
6. A keystroke
Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs.
onLoad and onUnload
The onLoad and onUnload events are triggered when the user enters or leaves the page. The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome to my site!".
onFocus, onBlur and onChange
The onFocus, onBlur and onChange events are often used in combination with validation of form fields. Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
The onSubmit event is used to validate ALL form fields before submitting it. Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver and onMouseOut
onMouseOver and onMouseOut are often used to create "animated" buttons. Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:
<a href="http://www.edusoftmax.com" onmouseover="alert('An onMouseOver event');return false"><img src="edusoftmax.com.gif" alt="edusoftmax.com" /></a>
Loops
When you write code, you often want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script, you can use loops to perform a task like this. In JavaScript, there are two different kind of loops: "for", loops through a block of code a specified number of times and "while", loops through a block of code while a specified condition is true.
The Syntax for Loop
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
Example:
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
Note: The increment parameter could also be negative, and the <= could be any comparing statement.
The Syntax for while Loop
while (var<=endvalue)
{
code to be executed
}
Example:
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
The Syntax for do...while Loop:
The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true.
do
{
code to be executed
}
while (var<=endvalue);
Example:
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
Arrays
When working with more complex scripts you might face a situation in which you would have many more or less similar variables. Instead of being forced to write a line for each operation done to such a variable, you can use arrays to help you automate the process.
An array must be defined before referring to any of the variables in it. This is done using the syntax: variablename=new Array;. You should
replace variblename with the desired name of your array. You should also note that new must be written in small letters and Array must start with a capital A.
The following are examples:
|
Example 1 | Example 2
| value1=10;
value2=20;
value3=30;
....
here would go 96 similar lines
....
value100=1000 | value=new Array;
for (number=1; number<=100; number=number+1)
{ value[number]=number*10};
|
|
