Introduction
Tens of thousands of sites around the world, the use of JavaScript, but it is still not a particularly well-known programming language (and for HTML). If you see what an interactive Web site on this calculation, the pop-up windows, counters and some websites and even some navigation systems, then you probably have seen the JavaScript.
Unfortunately, JavaScript has a web site from one language to enhance language, destroy them. This is because there is a huge site with thousands of JavaScript scripts to download. These are often things are not covered by the benefits of all sites, such as the status bar, scrolling text effects and not to increase the number of sites.
JavaScript must not be confused with Java. Java is a completely different programming languages. It is often used for text effects and games, although there are some JavaScript games around.
So, why you should use JavaScript? Well, JavaScript can allow you to create something new on your site is dynamic and interactive, so that you do things like find some user information (such as display resolution, and browser), check the forms have been filled correctly, rotate images, so that Random text, not counting, and many other things.
In this tutorial, I assume you understand HTML.
What do I need?
You do not need any special hardware or software write JavaScript, you can use Notepad or another text editor. You do not even have any special software on your web server. JavaScript will run on any Web server, anywhere! All you need to do is make sure you have at least a version 3 browser, version of Internet Explorer and Netscape Navigator does not support this until JavaScript, so you will not be able to see your work.
JavaScript statement
Will be added to web pages JavaScript is a simple staggering! To add a JavaScript all you need to add is the following (or between <head> "/ head" "label or between <body>" / body "" label - I will explain later in detail):
<script language="JavaScript">
JavaScript,
"/ Script"
As you can see the JavaScript is contained in a common set of HTML tags. Then you have to do is to ensure that older browsers ignore it. If you do not do JavaScript code that will display it looks terrible.
There are two things you have to do the hidden code from older browsers, displays something, rather than:
<script language="JavaScript">
"! - Start Hide
JavaScript,
/ / End hide - "
"/ Script"
The <noscript>
HTML code
"/ NoScript's"
As you can see which makes a lot of code to look more complicated, but in fact is very simple. If you look closely, you can see all that has been carried out, JavaScript is what is contained in an HTML comment tags. This is to allow any old browser does not understand <SCRIPT> just think this is an HTML comment and ignore it.
Because of this, <noscript> tag has been created. This will be ignored <SCRIPT> understanding of the browser, but will read out the old browser. All you need to do is put between the <noscript> and "</ NoScript" You want to display, if the browser does not support JavaScript. This may be another function, or just a message that it is not available. You do not include the label, if you do not want any proof to replace.
Comments
Is that you may have noticed that in the above example, the last line:
/ / End hide - "
A:
/ /
This does not normally appear in the HTML comments. This is because it is a JavaScript sign an opinion (which is included here to stop from thinking of the browser is closed HTML tag is a JavaScript-).
It is very important to JavaScript, and any other programming language t
o join the opinion, especially if you want others to learn from your code. It is also useful, including copyright information.
News
The first JavaScript command, I will tell you is:
Alarm ()
This command will appear a pop-up box (click here to see it in action). This can be useful to warn the user that something, or (in some cases), to give them instructions. It is used in the following ways:
Alert ( 'text alert box');
In the above example, I use single quotes', but you can use double quotation marks if you want. "They work exactly the same. The reason I use single quotation marks is because, later, when you use the HTML code and JavaScript, together you will need to use them, this is a good is the same.
The following is the complete JavaScript for the previous example:
The <SCRIPT>
"! - Start Hide
/ / Display a warning box
Alert ( 'This text is a warning box');
/ / End hide - "
"/ Script"
It is placed in the <head> and "" / head "" tab page. As you can see, I've used a box code comment tags, as well as a warning. This makes your code more readable, but it is not important.
Variable
In JavaScript variables, in other computer languages, can be used to store information. For example, I can tell the computer variables:
my_number
Should have value:
3456
Variables can also contain text, such as variables:
my_name
Possible values:
David Gowans
Variables can be very useful for text or numbers, you repeated a program to do calculations or to obtain user input. Variable declaration is as follows:
Code:
my_number = 3456 power;
Strings (text):
Var my_name = 'David Gowans';
As you can see a string contained in quotation marks (single quotes or double), but the amount will not. If you have added some quotes will not be treated as a number. You may also note that each line with a semicolon. This is a standard JavaScript code to show the end of the line. Be sure to remember it in.
When you string naming you can use any word or combination of words, as long as it is not already in use in JavaScript (so do not use the alarm as the variable names, etc.). Does not include spaces, replace them in _.
Calculation
You can calculate if you have a variable contain numbers. Here is an example of some code to do the calculation:
/ / Set variables
Var first_number = 15;
Var second_number = 5;
Var third_number = 10;
Var fourth_number = 25;
/ / We have calculated
Var new_number = first_number + second number
VAR answer = new_number * third_number
VAR answer = answer / fourth_number
This code is set four-digit variable. And then add the sum of the first and second digital and store answer to a variable new_answer. Then a third multiplied by the new_number answer this number and stores. Finally, it is divided answer fourth_number obtain a new value to the answer.
Access to information from the user's
Once you start using variables, you will find that it would be very useful to obtain some information about users. You can use this:
Tips ()
命令. Take a look at this example. I will explain how to work.
First of all, in the new command prompt. I set the variable your_n
AME companies use it:
Var your_name = prompt ( 'Please enter your name', 'your name');
The text between the first set of quotation marks is written in the prompt box. The article quotes among the second group is what is the default text input part of the box.
After this I want to create the output string. I have done so to join two strings together with the input I declare before (see the example on the source page for more information):
Var output_text = welcome_text + your_name + closing_text;
As you can see that this is roughly the same three numbers together, but because these are the strings one by one they will all (you can also add text in quotation marks here, and strings together). This increases my text set to welcome_text to the input I received, and then closing_text the end.
Finally, I showed output_text variable in an alert box the following code:
Alarm (output_text);
Among them, instead of the text is defined as the content of the warning box, to string in the box.
document.writeln
This command is very useful, because it will output the information pages. I will start with a basic example of how to use:
document.writeln ( 'Hello there');
This basically tells JavaScript to prepare a document (web page) in the new line of text Hello there! . This is really useful bit is that you can tell the JavaScript output text, HTML and variables. First of all, I will tell you how to output HTML:
document.writeln ( '<font face="Arial" size="5" color="red"> Hello there! "/ fonts" ");
This will display the following page:
Hello there!
As you can see, this allows you as long as the standard HTML code into a web page using JavaScript. If you can not see a good reason for this is not surprising that moment, but then I'll introduce a variable to the script.
Output variables
If you look at my final example, in the last part, where I took the information from the user and add it to some other text before displaying the output of an alert box. This can also be displayed on the page. Prior to this, the process, I will explain something about you can put your JavaScript code.
So far all of the JavaScrit code has been included in the <head> and "" / head "," tag HTML. This is because JavaScript will be loaded and prior to implementation, the remaining documents. This work for most of the script, but as the script is more advanced, you may need them whether it is in the file and head. I will use this script to be proven.
Simple JavaScript in <body> "/ Body" section of the page is exactly the same as it's <head> "/ head" section of the page. I suggest that you create the following script:
Put all the initialization code for the head of the page (such as setting variables, tips, warnings, etc.), then all display the code (document.writeln etc.) in the body of the page. This is a new and improved version of the code examples, use the document.writeln:
<html>
The <head>
"Title" variable example "/ title"
The <SCRIPT>
"! - Start Hide
/ / Set variables
Var welcome_text = 'Hello there';
Var closing_text = '! How are you? ';
/ / Show tips
Var your_name = prompt ( 'Please enter your name', 'your name');
/ / Create the output variable
Var output_text = welcome_text + your_name + closing_text;
/ / End hide - "
"/ Script"
"/ Head"
The <Body>
The <SCRIPT>
"! - Start Hide
/ / Display text
document.writeln ( '<font face="Arial" size="4">' + output_text + "</ font" <BR> <BR> in ');
/ / End hide - "
"/ Script"
<a href="index3.htm#variables"> <font face="Arial"> return to the "/ fonts" "/ 1"
"/ Body"
"/ Of the HTML"
You can see this code in action here.
As you can from the above code, the variable added to the document.writeln to use + signs. No quotation marks a variable name.
Remote JavaScript
Now we all know how to use the document.writeln commands you can now start using one of the most useful application of JavaScript, the remote script. This allows you to write a JavaScript file, then you can 'so-called' any other information on the web.
This can be used to do in your own Web site, you may want to update the site-wide (such as the footer at the bottom of each page), or some for remote sites (E-commerce
xample feed or some counter).
To insert a remote JavaScript you perform the following steps:
<script language="JavaScript" src="http://www.yourdomain.com/javascript.js">
"/ Script"
This will run the JavaScript stored in http://www.yourdomain.com/javascript.js. The. js file is also very simple to make, you have to do is write the JavaScript (omitted <script>, "/ script", "! - start to hide and / / end hide -" "label to a simple text file and save it as a something.js.
If you want to include the information your browser does not support JavaScript, you need to <noscript> mark "/ NoScript's" "tag in the HTML, rather than the JavaScript file.
There is a problem, with the use of remote JavaScript, only the latest browsers support it. Some browsers support JavaScript does not support the remote JavaScript. This makes it best not to use this navigation bar, and an important part of your site.
Windows and HTML
Before learning how to create and manipulate the window in the JavaScript, it is important to know how to create and manipulate to their HTML. The HTML control is very basic, but will also help you understand how to work in Windows web browser.
First of all you need to know that the two establish a link opens a separate window. The most common use is to include:
<a href="link.html" target="_blank"> Click here "/ 1"
This is a standard HTML code to open a new window, in its web page.
A less common way to open a new window is to use:
<a href="link.html" target="mywindow"> Click here "/ 1"
This will create a new window, just like the first set of code, but it also will be known as the window 'mywindow'. This means that you can have:
<a href="page2.html" target="mywindow"> change the "page" / 1 "
Which, when clicked, will change the page, which appears in the window.
Learn more about how the window name of the work is very important, because you must understand that it uses the JavaScript window effectively.
Open a window that contains the JavaScript
First of all you have to learn to use JavaScript to do is to do the same thing entirely to use JavaScript you can do HTML. In the JavaScript command is used to open a window is:
window.open
This work, however, it requires two additional things. First you need to have some additional information in order to know how to open a JavaScript window:
window.open ( 'link.html', 'mywindow');
This means that a window, the so-called 'mywindow' will open the Web page link.html also, exactly the same as HTML code snippet.
This code can be used as part of the JavaScript code (for example, if you include it in the JavaScript code <head> part of the web page will open when the page loads), or click on a link can be used. To do this, you must use other JavaScript commands called OnClick.
I will give you more information on how this command part of the work in the future, but now you really need to know is the following: In your standard HTML code that contains a link to the following:
<a href="#" onClick="window.open('link.html','mywindow');"> Click here "/ 1"
As you can see, this is the same as window.open command tag.
Manipulation of the window
Mainly due to the operation of the window using JavaScript, however, because a lot of things you can set the window, it will never do what you can use HTML. JavaScript allows you to use in order to determine which parts of the browser window appears. This is the use of a third part of the Window.Open command. This is your decision window functions:
window.open ( 'link.html', 'mywindow', 'window function');
There are many things that can be included here. For example, if you want a window, only one address bar and status bar (the part of the bottom of the browser), then you can use the following code:
window.open ( 'link.html', 'mywindow', 'location, status');
There are many different things you can include in your new window:
Eigenfunction
The menu bar of the document, editing the menu at the top of the browser will display the
Scroll bar to scroll, which will appear in the side of the window, if they need to
You can set the width of the window width in pixels (see next section)
Height, you can set the window height in pixels (see next section)
Toolbar which will display the browser toolbar to return, stop, refresh button, etc.
Location of the address bar (you typed the URL) will be displayed in the browser
This will adjust the size of the window is resized by the user
Directory, which will appear in the Netscape browser, a directory, such as 'What's News' and 'Whats cool'
Examples of Operation Window
You may be a bit confusing, all these choices, I will tell you some examples to open a window in JavaScript:
This window will open a location bar, tool bar, will adjust the size:
window.open ( 'window1.htm', 'the_first_window', 'location, toolbar, resizable');
This will open another page in this window:
window.open ( 'window2.htm', 'thefirstwindow');
This will open a window, 200 pixels wide and 300 pixels high. This is not to adjust the size, there is a status bar, and will scroll if necessary. This is a very commonly used in combination:
window.open ( 'window1.htm', 'thesecondwindow', 'height = 300, width = 200, status, scrollbars');
Link Active
Event is a link in different ways, including the JavaScript's website. Without having to <script> tags in your HTML, you can set the JavaScript implementation, only certain things from happening.
There are three ways to implement some JavaScript code for the link. They are:
The onClick
Mouse
OnMouseOut
They can have many different uses, but the most common is the image swap (mouse over image).
The onClick
The onClick works exactly the same way as a standard HTML link. This is performed when someone clicks on a link page. This is inserted as follows:
<a href="#" onClick="JavaScript Code"> click here "/ 1"
As you can see, one main difference is that in the href of the link to a #. This is not related to JavaScript, it's just neabs that, instead of opening a new page, links will not do anything. You can, of course, also included a link here, you can open a new page in the implementation of some code, at the same time. This may be useful if you want to change the content of more than one browser window or frame at the same time.
onmouseover and onmouseout
onmouseover and onmouseout work exactly the same onClick In addition to a major difference with each.
Through the mouse, by definition, will execut the code when the mouse over the link. The mouse will be implemented through a code when the mouse move away from contact. They are used in exactly the same onClick.
Flip Image
This is a major use of linked events. If you do not see the picture before rolling, and their images (usually in the navigation bar at the top like a), when the mouse move in this connection it has changed the image of the display.
This is to use the combination of onmouseover and onmouseout events. To explain - when the mouse over the link, you want to change the image of a new image, when it moved away from contact, old photographs should be displayed again.
First of all, you have to do is edit the <img> label use to insert the image you want to change. And not just have this to say:
<img src="home.gif" alt="Home">
You will have the following:
<img src="home.gif" alt="Home" name="home_button">
The name of the image can be anything like the last part of the name from the window refers to the image later.
Now, you give a name for the image you are using you will want to create a transition. First of all, you have to do is to create the image of the transition and preservation. And then create a link to an image. If you do not want to have a link to the image on the roll you can do the specified href to # This will allow the link to do nothing, for example:
<a href="#"> "/ 1"
The following code will make the mouse hovers over your image (assuming you insert a picture as shown above, and request your mouse hovers over image homeon.gif):
<a href="index.htm" onMouseOver="home_button.src='homeon.gif';" onMouseOut="home_button.src='home.gif';"> "IMG's src =" home.gif "according to ALT = "Home" name = "home_button" border = "0" "" / 1 "
I will now explain this code:
First you want to create a standard link to index.htm. Then you tell the browser when the mouse to move the link to the image and name home_button will change to homeon.gif. Then you tell it, when the mouse move away from the links to change the image called home_button of home.gif. Finally, you insert the image called home_button with the ALT tag of 'family', no borders round.
If you have read the last part of the tutorial, you will see t
Hat onClick, onmouseover, and onmouseout can be used for text link and image exactly like you do not have the above. This of course means that you can create interesting effects, when the mouse moved one image, another image change. This could be very useful to place a link to instructions on the page.
Status Bar
The status bar is the gray bar at the bottom of a web browser information, such as how many page loading and URL link to appear. You can, through their own words apppear in the status bar the use of JavaScript that you already know to use the following code:
window.status = 'Your text here';
You can include in the standard code, onclick, through the mouse or the mouse away. This allows you to do things like display when the mouse is a link to describe it.
If
If the function can see whether something is true or false. For example, you can check whether the user text input text matches the one you already have (such as passwords). If you want to display in action click here.
You can see that this could be very useful to many web sites. The code is as follows:
VAR guess = prompt ( "Please guess a number between 1 and 10 ","");
If (guess == 5)
(
Alert ( 'correctly! I think that the 5');
)
Else
(
Alert ( 'Error! I think that the 5');
)
This code is made up of three main parts. The first part is to obtain a user to guess that you have used. Followed by:
If (guess == 5)
This is a very self-explanitary. It checks whether the variable guess is equal to 5. if statement is followed by:
(
Alert ( 'correctly! I think that the 5');
)
An important part, this is a warning command braces. These contain the code, if should be enforced, if the statement returns 'true' (in this case, if the guess is equal to 5). The last part is:
Else
(
Alert ( 'Error! I think that the 5');
)
This tells the browser that if the if statement does not return to 'real' (in this case, if you want to is not equal to 5), the implementation of the code between the braces.
This code together constitute the if statement.
More If
There are other conditions can test if statement. First, the figures can be compared and the use of a variable or text:
If (variables == variables)
If (variable == "some text")
In addition to doing so, you can check whether a variable is greater than the other less than others, not the same as another:
If (variable "othervariable)
If the variable is less than othervariable
If (variable "othervariable)
If the variable is greater than othervariable
If (variable "= othervariable)
If the variable is less than or equal to othervariable
If (variable "= othervariable)
If the variable is greater than or equal to othervariable
If (variable! = Othervariable)
If the variable is not equivalent to other variables
These are very useful web pages. You can also see if the two conditions, in the implementation of the code uses the & &:
If (variable1 == variable2) & & (variable1 "variable3)
This will only implement its code, if variable1 is equal to variable2 and less than variable3. You can also run the code, if one condition is true:
If (variable1 == variable2) | | (variable1 "variable3)
This will only implement its code, if the variable is a variable is equal to or less than variable3.
while loop
while loop is the pieces of code, will be repeated until the conditions are met. This is very useful for things such as password when you want to continue asking the user, until they get the right. For example, this code will repeat until the user enters the word 'Hello':
VAR password = 'Hello';
VAR input = prompt ( 'Please enter your password','');
While (input = password)
(
VAR input = prompt ( 'Please enter your password''');
)
This will keep the code inside the loop (), until the test results do not mean the password is wrong (the password is correct).
For cycle
for loop is used to do something a number of times. For example:
For (loop = 0; cycle "11; loop + +)
(
document.writeln (cycle);
)
This will establish a loop variable to 0, then loop, one of the added value each time (using loop + + code), as long as the loop is less than 11. Their form is:
For (start value; test; increments)
These have many uses.
Change the value of the text box
Before you can operate a text box, you must first know how to create a table, how to create a text box in HTML. I will soon explain.
Slightly different form the standard JavaScript, because they do not require any information or a script dealing with them. You can do everything just to the name of the form (although then you may need to add additional information so that you can form):
<form name="formname">
"/ Form"
This form can be placed in a text box to use:
<input type="text" name="boxname">
Once you have this, you can create the first one to refer to the form of JavaScript:
Move your mouse here to add some text boxes
This is very easy to use links through the mouse properties. It can refer to the text box below:
window.document.example1.first_text.value = 'Hello there';
This tells the browser to 'eat it? 'Into the value of the project the so-called' first_text 'in the form of so-called' example 1 '.
You can also do this with the multi-line text box. You can use the
/ N Home
Start a new line.
In this section, you learned the most important part of this lesson, how to refer to a project form.
Activities
Like a link, you can set the form of project activities. They are:
The onblur - occurred in the cursor out of the scene
onFocus - occurs in the cursor to the field
The OnChange - change took place in the field, the cursor out of it
These are placed into the part of the code, the relevant forms, such as:
<input type="text" onBlur="dothis">
JavaScript function
JavaScript function is very useful, it seems to be an appropriate place to introduce them. They are pieces of JavaScript that can be declared the highest page, and can be called over and over again in your code. You can even pass parameters to them and allow them to do different things.
Functions take the following forms:
Function function name (parameters)
(
)
For a very basic functionality, you need any parameters and will be built this way (in the file <head>):
Function sayhi ()
(
Alerts (eat it?);
)
Then, in the text anywhere you can put this:
<a href="#" onMouseOver="sayhi();"> hello "/ 1"
This will display the warning, whenever mosuse through it. Unless you repeated things, but this does not seem particularly useful. This is a useful parameter.
Parameters
Parameter is a very useful part of the functions. They allow you to pass the data to the function is called. Here is an example:
Function say (what)
(
Alert (what);
)
In the head, then:
<a href="#" onMouseOver="say(hi);"> hello "/ 1"
<a href="#" onMouseOver="say(bye);"> assume goodbye "/ 1"
What is done is the information passed to the function in brackets. The function in brackets the word 'what'. This is to tell the distribution of the information in the JavaScript variable in brackets what is (the same is what var = 'something';). You can even do this more than sub-information separated
Time for a comma.
As you can see the functions and parameters are very useful.
Use the submit button
The most common usage is to submit data in the script so that it can handle. It does not matter, if you are using CGI to do a mailto form or something like that, but if you just want to run a piece of JavaScript from a form, you need to do something different. The first part you need to know is to return false; property. It can be used as follows:
<form name="myform" onSubmit="return false;"> immediately
<input type="submit" value="Submit">
"/ Form"
You can try the following:
This code is doing is to tell the JavaScript, when the form is submitted to do anything. This will refresh the page from Netscape to stop (because it will not only have a submit button, the form did not take action). Now, you can do is to call a function using the submit button:
<form name="myform" onSubmit="MyFunction(); return false;"> immediately
This will tell the browser to run the function 'calls MyFunction' When you click on the submit button. Of course you can, if not to use this:
Return false;
Part of it. This will be useful, for example, you want to verify form, and then sent to a CGI script. You will include the forms of action to normal. Then, in the onSubmit some of you will call your function to check which protocol.
Box
Checkboxes and radio buttons of the two projects, the rest of the form. First of all, I will cover the check box.
Check box, there are two possible values:
Unchecked Box
Shipping Box
Since only two possible values, JavaScript check box is slightly different means, the text box. In the following example, the check box has been named my_checkbox, and an example in the form of a.
If (window.document.example1.my_checkbox.checked = true)
(
Alert ( 'the box is checked!)
)
Else
(
window.document.example1.my_checkbox.checked = true;
Alert ( 'the box is unchecked, so I checked!');
)
I will now explain what this code is not. It can check out the value of the check box. If the value is ture (which means that the check box is selected), then it will display an alert box, it will tell you is selected. If you do not check the check box (in proposing a checked it), and tell you to do.
If, of course, you want to check the spread of check boxes or by reference to the value of the code would be:
window.document.example1.my_checkbox.checked = false;
Remember, you do not need to attach the check box when it comes to true or false offer.
With all other forms of objects, you can use onblur, and onFocus of onchange.
Radio button
Radio button is usually located in groups, like this:
Blue
Red
Green
There is only one button, you can check the group once. Radio button works exactly the same way as a check box, there is one. Check the property, it can be true or false.
Options and menus
The remaining two form elements and menu options. I will deal first with the menu. Menu drop-down box with several options, they (they are mainly used in countries such as these choose your table). In fact, only a select menu with a number of routes, and scroll bars. In order to show their work I will tell you a shortcut menu example, in action and its code. For a selection box, I just want to change the height propery. To see an example here. The code used is as follows:
<form name="go" onSubmit="return false;"> immediately
"Select name =" select "onChange =" window.document.location = window.document.go.select.value; ">
<option value="#" selected> select the "/ options" "
<option value="http://www.microsoft.com"> Microsoft "/ options" "
<option value="http://www.yahoo.com"> Yahoo "/ options" "
<option value="http://www.gowansnet.com"> Gowansnet "/ options" "
"/ Select" "
"/ Form"
This code is what is done is that when the option to change it to say that the web browser to change its position value selection box. Location of the file access to use:
window.document.location
As you can see, this may be very useful, both for visitors and their feedback redirection (such as the above example).
Conclusion
In this tutorial, I covered some of the most important part of the JavaScript and now you should be able to start writing some fairly sophisticated scripts. There are many remaining JavaScript to study many of the more advanced commands. In the future I will do a tutorial of this. One way is to improve your skills, in fact, is to look at other people code, web pages, the use of JavaScript. Do not steal them, but you can learn more about the language to do the job. |
India : 011-32914285 | Outside :+91-11-32914285
India : 09310894285 | Outside :+ 91- 9310894284 
Office Hours: M-F 9:30AM - 5:30PM CST  [<a href='function.filemtime'>function.filemtime</a>]: stat failed for /home/bagesh/public_html/www.bageshsingh.com/uploaded_files/port/2c81c02648c519f530cba1ce8b31cce1.gif in <b>/home/bagesh/public_html/www.bageshsingh.com/includes/plugins/thumb/thumb.class.php</b> on line <b>223</b><br />
/includes/plugins/thumb/show_thumb.php?path=%2Fuploaded_files%2Fport%2F2c81c02648c519f530cba1ce8b31cce1.gif&cache_file=100x117__width_height____uploaded_files%5Eport%5E2c81c02648c519f530cba1ce8b31cce1.gif&width=100&height=117&ratio_type=width_height&method=gd)
This site is a fully shopping cart which have good design and good class based programming used to create it.