JavaScript Tutorial: An Introduction to JavaScript

Introduction

JavaScript is a programming language that was designed for the web. Many people don't understand that JavaScript is not the same as Java, the programming language. In fact, Java and JavaScript couldn't be more different. Java is very complicated, JavaScript is not. Regardless of popular belief, JavaScript is not a condensed version of Java in any way. One has nothing to do with the other.

JavaScript can be used to manipulate your webpages to perform a variety of functions. Some of the applications are purely functional, while others are just fun. In fact, you don't have to know any JavaScript at all, because there are numerous scripts out there that you can simply grab and paste into your HTML code.

But at the same time, if you want the JavaScript to be effective, and to do what you want it to do, you do need to at least have a basic understanding of JavaScript, how it is written, and how it works. This tutorial will provide that information for you, starting with the very basics, and then working into a few advanced topics. A working knowledge of the basics is necessary.

You do not, however, need to know HTML to learn JavaScript. It does help, but it isn't necessary since JavaScript doesn't use HTML, even though it is used with HTML. You do need to know how to work with your HTML documents, however, because you will be pasting your scripts into the HTML code, and you will need to know where to place the JavaScript. You do not need to know any programming language to learn JavaScript. The entire concept and writing of JavaScript is really quite simple.

What Can I Do With JavaScript?

As stated earlier, you can use JavaScript to perform a variety of functions on your website. Some of the functions are just functional, while the others are more fun in nature, providing interactivity for your website visitors.

Face it. Nobody likes stale webpages that just sit there. They want to interact with them dynamically. JavaScript allows this to happen. JavaScript reacts to users actions in most cases. For instance, if the user moves their mouse over some text or a graphic, JavaScript can perform a rollover and make that graphic or text change to something else.

JavaScript can provide functionality, such as password protection, browser detection, or display information, such as the correct time and date on a webpage. JavaScript can be used to give the website designer more control over a user's browser, and how that browser sees the webpages. There are literally millions of things one can do with JavaScript.

What Do I Need To Write JavaScript?

Your own web browser must support JavaScript. If it doesn't, you won't be able to tell if your scripts work. Newer versions of both Microsoft Internet Explorer and Netscape both support JavaScript.

You can write your JavaScript using any plain text editor, or you can write them directly into your HTML documents. It is of course better to use a plain text editor so that you don't accidentally mess up any of your HTML coding. An example of a plain text editor is Microsoft's Notepad.

The only other thing that is required to write JavaScript is a working knowledge of JavaScript, which you will have as you work through this tutorial!

JavaScript Tutorial: The Basics of JavaScript

There are many terms that you will have to learn when it comes to JavaScript. However, you don't have to learn them right now, before you do any scripting. It is easier to learn the terms as you go along, as this will give you a greater understanding of them. So, we will not be throwing terms out there to confuse or frighten you. However, there are terms that you will need to know - and will come to know - and they need to be noted before you can go any further.

With that said, the first thing you need to know is that JavaScript 'thinks' in terms of objects. DOM, which stands for Document Object Model is the foundation of JavaScript. Don't panic. Just focus on the word object. You know what an object is. It's a thing. Your computer is an object. Your desk is an object. Let's look into the computer screen, and you will see other objects. A browser window is an object. A web page is a document, and a document is an object. A graphic on a web page is an object.

As you can see, many objects contain other objects. For instance, the desk contains the computer, which contains the web browser window, which contains the web page, which contains the graphics.

Now, each object has properties. For instance, a web page has a background color, and it uses a certain font. These are properties. But, the background color could also be considered an object, with the property being the actual color. Don't feel confused. For now, all you need to know is that there are objects and objects have properties.

JavaScripts cause actions to occur on or with objects. These actions are called methods. These methods may be referred to as functions. Functions are methods that you set up to perform a certain task. Method and Function are pretty much interchangeable in this way.

There are just a few more terms to note. Don't run away! In JavaScript, we also have events, and event handlers. An event is something that happens. In the world of JavaScript, an event is usually something that the website visitor did, such as moving their mouse over a link. That is an event. An event handler comes into play when the event occurs. The event occurs and the event handler calls a JavaScript or reaction into play.

You will learn some other important terms as you go along. Remember, you don't have to cram all of this into your head right now. These are the basic terms that relate to JavaScript, and you will get to know them as you move forward in this tutorial.

So, let's move forward and write our first JavaScript.

Open your NotePad or favorite text editor, and let's get started. The first thing you are going to learn is how to make JavaScript write something to your HTML document. Within your text editor, write or copy and paste the following script:

This script will write the words, HI Everybody on your webpage. Now, this is a very simple script, and you can use HTML to write words on your page, but the basis of this script will be very important later on, so it is important to learn this one. Let's look at each element of the script.

First, we are telling the web browser that it is about to see and interpret JavaScript with this tag:

This is an important tag. The browser needs to know what it is about to see. The next part is really important as well. You see, not all browsers recognize JavaScript for what it is. They just see it as text that should be printed on a page, as it is. You have to prevent this from happening, by hiding the JavaScript from older browsers. This is done by using HTML comment tags, as seen below:

Now, with the JavaScript hidden inside the comment tag, older browsers will ignore it, but newer browsers will see it for what it is, and if the browser is JavaScript enabled, it will run the script. If the browser is not JavaScript enabled, nothing will happen.

The next part of our script is:

document.write

The document is an object. We discussed this earlier, remember? Write is the method (or function) that we want to use on the document. It is presented with a period between the two words: document.write. The write method is actually presented as write() with what you want written inside the parentheses.

The text that we want written is called a string in JavaScript, and it is therefore enclosed in quotation marks. It is presented as this:

(<i>"HI Everybody!"</i>)

Note that we have also added a little HTML into the mix with the use of tags that will force the text to be printed in italics. We've written the object, the method, and the string so that now the script has everything it needs to run. We've also closed or ended the comment, and then the script with the following:

//-->
</script>

Congratulations! You've written your first JavaScript, and it is the basis for so many other wonderful things that can be done with JavaScript. Be sure that you paste this code into an HTML document, and load it up to your web server so you can see how it works.

Dealing With Non-JavaScript Enabled Browsers

As stated in the previous lesson, if a user's browser is not JavaScript enabled, the script can't run. Often, nothing will happen, but it is possible that the user will get error reports. This can be prevented by using the <noscript> JavaScript tag. It looks like this:

So far, you have learned about objects, methods, and strings. You have learned how to write a very basic JavaScript, and you have learned how to hide JavaScript from old browsers, and how to handle browsers that do not have JavaScript enabled. Let's take a closer look at events now.

JavaScript Tutorial: JavaScript Events

An event is something that happens. Events in JavaScript usually happen when a website visitor, or user, does something. It may be something as simple as moving the mouse. When events happen, Event Handlers react to the events. For instance, when you click a link on a web page, an event handler takes you to the link that has been specified.

Event handlers often use variables and methods to perform the task that they have been told to do. Event handlers are assigned to objects in the HTML code. In our example above, there was no event. The words appeared on the web page when it was loaded. The user didn't have to take any action, other than arriving on the web page.

Let's write another JavaScript. This will be an event:

Now this script will change the status bar of the browser window when the user puts their mouse over the link on the page. Let's look at the elements.

First, we designate the URL, which is http://www.yourwebpage.com, and we use common HTML for this, so that the code looks like:

But what we did to turn this into JavaScript is add additional information to the <a href> tag. The tag above, the HTML for a link, is our object. The first JavaScript element we added was onMouseOver. This is the event handler. The event is when the user actually moves the mouse over the link for Home.

Next, we are telling the script what we want to happen when the user moves his or her mouse over the link. We are defining another object, the window. We are also addressing a property of the window, the status bar. We are telling the status bar to say 'Return to Homepage' and this is to happen when the user runs their mouse over the link that says Home. We then put a semicolon, because that is the end of that specific task or command.

But we haven't finished yet. There is more to this script. The words 'return true' are there. Return true just tells the browser that if there is a default action that should occur, that the action should take place. In this case, the default action when the link is clicked is for the browser to load the home page.

But this isn't always the case. In this example, for instance, return true tells the script to look for a status bar, and if it finds one to run the script.

Also note that objects can be presented with either methods or properties, separated by a dot. In the element window.status, window is the object, and status is the property. In the element document.write, the document is the object, but write is not a property. Instead, it is a method.

Events are not always user dependant. There is a way to cause an event to occur, without the user doing anything. The event handler for this is onLoad, which means that the event is the page loading in a web browser.

Let's take a look at some onLoad code:

This JavaScript code is placed inside the body tag of the HTML code. onLoad is the event handler, so when the page loads, it looks for the object, which is the window, checks to see if there is a status bar and finds one, and then assigns a string to it, which in this case is the words Welcome Aboard in the status bar.

Another user driven event handler is onClick. Just as it sounds, this event handler wakes up and starts doing things when a user clicks on a specified object. Aside from learning about the onClick event handler, you are also about to learn how to generate a button to go along with it. Here is the code:

<button onClick="window.alert('Life Is Good!'); return false;">Click It!</button>

We have a new element here - a button tag. When the button is clicked (event), the onClick (event handler) will create an alert box (object) which will say Life is good (string). We've made sure the button will simply say Click It! Now, note that we've said that the alert box is an object. It is - but so is window. In this case, the window is an object, and alert is both a method and an object.

By now, these JavaScript terms should be coming to you more easily, and you should be able to recognize some of them for what they are in the code. Let's learn a new term, which is unLoad. This is an event handler, and the event is when a page is closed, or left by the user. When the web page unloads in the browser window, something will be triggered. This is often used to open popup windows and such.

Other common event handlers are onBlur, onFocus, onSelect, and onChange. These event handlers are usually used with HTML forms, such as forms that users fill out on your website.

Let's first look at onFocus and onBlur. When a user interacts with a web page, the browser that is displaying that page focuses on what the user is doing. Users interact with web pages by using the mouse. When a user clicks a link, that link has the web browsers focus.

Look at it this way: A user comes to your page. They type something into a form on your page. That form's input box has the focus of the browser. The user hits the submit button for that form. The input box loses focus, and this is called onBlur in JavaScript terms. The focus is now on the button, which is onFocus.

The event handler onChange comes into action when the user changes something on the page, such as the text in an input box. The other event handler, onSelect, comes to life when the user selects something. For instance, they might select an option with a radio button.

There are numerous other event handlers that can be used to increase the Interactivity of a user with a web page. For instance, if you have an image of a button on your webpage, you can use the onClick event handler with the mouseDown and mouseUp event handlers. This combination will make a graphic appear to be depressed when someone clicks the mouse down on it, and rise back up when they release the mouse button.

You will see how all of these event handlers are used later on, and you will learn about some additional event handlers as well. Now that you know more about event handlers, let's move on to the next topic, which is a variable.

JavaScript Tutorial: JavaScript Variables and Arrays

Variables are simply numbers, letters, or words. They are used to connect to the value that is assigned to the variable. In JavaScript, the only thing that you have to define is a variables name (number or text) and its value.

In JavaScript code, a variable is used as var. Var is followed by the variables name. For instance, if you wanted to set a variable for a number, such as the number 16, the code would look like this:

var number = 16

A variable can also have a value that is a string of text, such as:

var text = "Santa Clause Is Coming To Town"

Note that anytime you use a string, the string must be enclosed inside quotation marks. Also note that variable names can contain numbers, but must always start with a letter. Our two variable names from the samples above are number and text. The first letter in the name is lower case, but if there are two words that are put together, such as numberText the first letter of the second word is capitalized.

A variable needs more to make it do anything. In our example above, var number = 16 doesn't actually do anything. It needs more code to make something happen - to make the variable matter.

Let's make JavaScript print something on our page using a variable.

In the sample above, we open the script with the <script> tag. We then set our variable name, which is the word number. We assign a value of 16 to that variable. Then, we write a variable named text, which has a string value of Many years ago when. Note that each variable value ends with that semicolon. That is very important. All elements must be separated with the semicolon, or the script won't work.

Next, we use some JavaScript that you have come to know and love. We assign an object (document) and a method (write), and then we tell it what to write. Text + I Was (enclosed in quotation marks), + number. When the script runs, it will assign the text variable where it is indicated and the number variable where it is indicated as well, to create a sentence that says Many years ago when I was 16.

This now takes us to Arrays. Arrays are also variables, but they are more complex, meaning that they contain more data or values than regular variables do. Arrays simply index values, always starting with the number zero. Here is a sample of an Array, using the days of the week.

var days = new Array()
days[0] = "Sunday";
days[1] = "Monday";
days[2] = "Tuesday";
days[3] = "Wednesday";
days[4] = "Thursday;
days[5] = "Friday";
days[6] = "Saturday";

When you create a variable such as this, you are actually creating an Array, and it is defined as a new Array object by putting new Array() as the value of the variable. Arrays can hold as many values as you like. To join two variables together, you use the plus sign.

Disappearing Default Form Text

When using forms within your web site, there may be times when you will want to include an example of what you'd like your visitors to fill in your form field. Although you could place some default text within your form field, your users would need to delete the default text in order to type in their own information.

However, this cool little JavaScript code will enable you to display some example default text within a text box that will disappear when clicked on - much better than your users having to delete the example text.

Example:

Place your cursor inside the text box to see the text disappear.

Place your form code within your HTML like this:

Change the default text displayed within your text box by editing the code indicated in bold.

Open Multiple Windows with Links

If you're looking for a JavaScript code that will enable your visitors to open a customized pop-window from a link, this JavaScript tip may be what you're looking for.

You can open multiple customized pop-windows within your web page that are opened via links. This JavaScript code provides a great way to display tips, instructions or whatever you'd like.

Examples:

Click Here
Click Here
Click Here

Place the following code between your HEAD tags:

Carefully edit the text indicated in red to suit your needs.

For each new window you'd like to open with a link, you must add a new function to the JavaScript like this:

function open4() {
var open4 =
window.open('http://www.domain.com','','scrollbars=yes,height=600,width=800,resizable=yes');
}

And, create your links with the same name as the function like this:

<A href="javascript:open1()">Click Here</A>
<A href="javascript:open2()">Click Here</A>
<A href="javascript:open3()">Click Here</A>

Make This Site Your Home Page Button (IE)

When designing your web site, providing your visitors with a way to make your web site their start up home page provides a great way to obtain repeat traffic. Not only can this increase your web site traffic, but it can also increase your sales.

This JavaScript code will enable you to place a button on your site that, when clicked on, will make your web site your visitors home page.

Place the following code where you would like the button to appear.

Change the text indicated in red to your web address beginning with http://

Add to Favorites Button (IE)

Providing your visitors with a way to add your web site to their favorite places provides a great way to obtain repeat traffic. This is a great way to increase your overall traffic and sales, as they can visit your web site again and again.

However, to obtain repeat traffic, you must continually update your content and give your visitors a reason to want to return to your web site in the future.

This JavaScript code will enable you to place a button on your site that, when clicked on, will add your web site to your visitors favorites.

Place the following code where you would like the button to appear.

Typing Status Bar Text

Looking for a way to enhance your web site? This JavaScript code will enable you to display text within your status bar that is typed line by line. This JavaScript provides a great way to tell your visitors about a special offer or whatever you'd like.

However, use this script cautiously, as you certainly don't want to irritate your visitors.

Place the following code between your <BODY> tags and place your lines of text where indicated in red. You may edit the typing speed by changing the text indicated in bold.

<SCRIPT language="JavaScript">

</SCRIPT>

Protect Your Web Page Content

Although there really isn't any foolproof way to protect your web page content, this JavaScript will discourage the more novice Internet users from copying your content.

An alert box will appear displaying your copyright information when the right mouse button is clicked. However, this script will not completely protect your content from more experienced users.

Copy and Paste the following code into the BODY of your web page. Insert your own copyright information where indicated in red.

Open a New Window With a Button

If you're looking for a JavaScript code that will enable you to open a new window with a button, this JavaScript code may be your answer.

This JavaScript code provides a great way for your visitors to open a window simply by clicking on a button. This is a great way to display tips, images, load a new web page, or whatever you'd like.

Click the above button to open a new window.

In addition to using this code within your web pages, you can also use it within your HTML ebooks, as long as your software supports JavaScript.

Place the following code where you would like the JavaScript button to appear:

Edit the JavaScript code indicated in red to suit your needs.

Open a New Window With a Link

If you would like to open a new window with a link within your web page, this JavaScript code may be what you're looking for.

You can open a new customized window within your web page that is opened via a standard HTML link like this:

Open Window
Click the above link to open a new window

This 'open a window with a link' code has a variety of uses, such as providing your visitors with additional information in regard to a specific subject, displaying an image slideshow, tips or whatever you'd like.

As this pop up window JavaScript code is lauched via a link and not on page load, it will be much more accepted by your visitors.

Place the following code between your HEAD tags.

Carefully edit the text indicated in red to suit your needs.

Create the link to open your new window like this:

<a href="javascript:load()">Open Window</a>

First Visit Pop Up Window

If you're looking for a JavaScript code to enable you to create a first visit pop up window for your web site, you've come to the right place.

Pop up windows can provide a great way to gain new subscribers to your publication and even increase your sales. However, they can also be very irritating to your visitors.

For this reason, you may want to use a pop up window JavaScript code that will only load the pop up window on your visitor's first visit. That way you're not continually harassing them with a pop up window each time they visit your web site.

Place the following JavaScript code within the <BODY> of your web page.

Edit the JavaScript code for your first visit pop up window to suit your needs.

Replace the words "yourpagename.html" with your pop up window address and edit the window's width and height to your desired size.

Close a window with a button

If you're looking for a JavaScript code that will enable you to close a window with a button, this JavaScript code may be your answer.

This JavaScript code provides a great way for your visitors to close a window simply by clicking on a button. This is a great way to enable your visitors to close a tips window, instructions window or whatever you'd like.

In addition to using this code within your web pages, you can also use it within your HTML ebooks, as long as your software supports JavaScript.

Place this code within your HTML code where you would like the button to appear:

Close a window with a link

If you would like to close a new window with a link within a pop-window, this JavaScript code will enable you to do just that.

This JavaScript code will enable your visitors to close a window simply by clicking on a link. This is a great way to enable your visitors to close a window with a link within a tips, image slideshow, instructions window or whatever you'd like.

In addition to using this code within your web pages, you can also use it within your HTML ebooks, as long as your software supports JavaScript.

Example:

Close window

Place this code within your HTML code where you would like the button to appear:

<a href="javascript: self.close()">Close Window</a>

Open a window on page load

If you're looking for a JavaScript code that will enable you to open a window on page load, this JavaScript code may be your answer.

This JavaScript code provides a great way for you to open an additional window when your web page loads. This is a great way to provide your visitors with special information, such as a sale, instructions, or whatever you'd like.

In addition to using this code within your web pages, you can also use it within your HTML ebooks, as long as your software supports JavaScript.

This example was displayed when this page was loaded. It creates a pop up window that may be customized to any size you'd like.

Place the following code under the <BODY> tag within your HTML:

Edit the text indicated in red to suit your needs.

Reload a Window With a Button

Are you looking for a JavaScript code that will enable your visitors to reload a window with a button? This JavaScript code is for you.

You can create a JavaScript button that will reload your web page when pressed:

Click the above button to reload this window

You can use a button to reload a web page in a variety of ways. For example, if you're rotating content on your web page via a JavaScript, which means some of the content changes each time the page loads, you can enable your visitors to click on a button to reload your web page. This will enable them to view your new content each time they click on the button and reload your page.

Place the following JavaScript code into your HTML where you would like the button to appear:

Reload a Window With a Link

Would you like to enable your visitors to reload a window with a link? This JavaScript code may be what you're looking for.

You can enable your visitors to click on, what looks like, a standard HTML link to reload your web page using JavaScript:

Reload Window
Click the above link to reload this window

This 'reload a window with a link' code has a variety of uses, such as reloading your page to view changes. For example, if you're using a script that rotates content, you may want your visitors to reload your web page by clicking on a link to view new tips, new images, new articles or whatever you'd like.

Copy and paste the following JavaScript code into your HTML where you would like the link to appear:

<a href="javascript: window.location.reload()">Reload Window</a>

Redirect to a New Page

If you're looking for a way to redirect your visitors to a new page, this JavaScript redirect code may be your answer.

Many times, when designing your web site, you may need to move a page to another location on your web server. However, you must find a way to redirect your visitors to the new page, as if you don't, they will leave your web site and may never return.

In addition, the Search Engines may have already indexed your page. If you don't use a redirect code to send your Search Engine traffic to your new page, again, you may lose these visitors forever.

For these reasons, using a redirect code is of the utmost of importance. Not only will this redirect code enable you to provide your visitors with the information they're looking for, but it will also prevent you from losing your visitors.

Note: When using this JavaScript redirect code, please ensure that you don't use it to trick the Search Engines, as this could get your web site banned. It is always best to learn and use quality tactics to drive traffic to your web site.

Place the following JavaScript redirect code between the <HEAD> and </HEAD> tags of your HTML code.

This example is setup to redirect to another page in 2 seconds. When a page contains this JavaScript, it will be redirected to another page that you specify in the "window.location=". You can change the number of refresh seconds by changing the "move()',2000 to the number of seconds you'd like.

Example:

1000 = 1 second
3000 = 3 seconds

Place this code between the <head> and </head> tags

Place this code in your <body> tag

<body onload="timer=setTimeout('move()',2000)">

Redirect to a New Page

If you need to redirect visitors to a new page, the following redirect code will enable you to do just that.

There are many reasons for using a redirect code within your web page. However, the most popular reason is to redirect visitors to a new web page when you've changed the location of the original web page. If you don't, your visitors will receive an error page, which will cause them to leave your web site and probably never return.

Another good reason to use a redirect code within a web page that has moved is the Search Engines. When you create your web site and upload it to your web server, chances are, your pages will be quickly indexed by the Search Engines, as many Search Engines continually crawl the Internet in search of new web pages. If you don't use a redirect code to redirect your Search Engine visitors to your new web page, you may lose these visitors forever.

This is why using a redirect code is so important, as it will enable you to redirect your visitors to the web page they were in search of. This will in turn keep you from losing your visitors.

Note: When using redirect codes within your web page, please make sure you aren't using this redirect code for unethical purposes, such as trying to trick the Search Engines into ranking your web page higher. This action could get your web site banned. Please ensure you use only ethical means in which to obtain web site traffic.

Place the following code between your HEAD tags.

Edit the web address indicated in bold to suit your needs. This is the web address your page will be redirected.

Status Bar Link Description

Are you looking for a way to spice up your links? This JavaScript code will help you do just that. You can display your link description in the status bar of your browser. When the mouse is placed over a link, the link description will be viewed in the status bar.

Example:

Place your mouse over this link
Look within the lower left-hand side of the status bar to view the link description.

Copy and paste the following code into the HTML portion of your web page where you would like the link to appear:

<A HREF="http://www.domain.com" onmouseover="window.status='Your text description'; return true" onmouseout="window.status='';return true">Your linked text</a>

Change the text where indicated in red.

Back to previous page

Would you like to enable your visitors to click on a button to be taken back to the previous page they were on? This JavaScript will enable you to do just that. This JavaScript code is great for use in pop up windows when you're running image slide shows, displaying multiple tips, step by step instructions or whatever you'd like.

Copy and paste this code into your HTML where you would like the button to appear:

Using this little JavaScript snippet is a great way to enable your visitors to navigate your web site.

Back to previous page with a link

Would you like to enable your visitors to click on a link to be taken back to the previous page they were on? This JavaScript will enable you to do just that. This JavaScript code is great for use in pop up windows when you're running image slide shows, displaying multiple tips, step by step instructions or whatever you'd like.

Copy and paste this code into your HTML where you would like the link to appear:

Using this little JavaScript snippet is a great way to enable your visitors to navigate your web site.

Back to Previous Page with an Image

You can enable your visitors to click on an image to be taken back to the previous page they were on. The following JavaScript will enable you to do just that. This JavaScript code is great for use in tutorials, slide shows, articles, tips, or whatever you'd like.

Copy and paste this code into your HTML where you would like the image to appear:

Edit the text indicated in bold to suit your needs. The yourimage.gif text
should be replaced with the name of your image, which resides on your server.

Using this little JavaScript snippet is a great way to enable your visitors to navigate your web site.

Button email prompt

If you would like to provide your web site visitors with a simple way to contact you from your web site, but really don't want to display your email address, this email prompt button code may be what you're looking for.

Copy and paste this code into your HTML where you would like the button to appear:

Change the text indicated in red to your email address.

View source code with a button

If you're looking for a simple way to enable your visitors to view your source code, this JavaScript code is for you. By adding this simple little JavaScript code to your web site, you can create a button that, when clicked on, will open your source code.

This script is useful for sites that are teaching any type of web design coding and need an easy way for their visitors to view their source code.

Copy and paste this code into your HTML where you would like the button to appear:

View source code with a link

If you're looking for a simple way to enable your visitors to view your source code, this JavaScript code is for you. By adding this simple little JavaScript code to your web site, you can create a link that, when clicked on, will open your source code.

This script is useful for sites that are teaching any type of web design coding and need an easy way for their visitors to view their source code.

View Source

Place this code between your <HEAD> and </HEAD> tags.

Place this code where you would like your link to appear.

<a href=javascript:ViewSource()>View Source</a>

On mouse over alert box

Are you looking for an easy way to launch an alert box on mouse over? This script will do just that. This JavaScript provides an easy way to alert your visitors. However, please ensure you use this script cautiously, as you certainly don't want to irritate your visitors and cause them to leave your web site.

Example Alert Box
Place your mouse over the link

Copy and paste this code into your HTML where you would like the link to appear:

<a href="" onMouseOver="alert('Your Message');return true;">Linked Text</a>

Edit the text indicated in red to suit your needs.

Date

Displaying the date within your web page is a good way to spice up your web site and give it a more professional appearance. The following JavaScript code will display the date on your web in the following format:

12/17/2011

Place this code where you would like the date to appear:

You can change the font style and color by enclosing the above JavaScript code with your font tags.

Date

12-17-2011

Place this code where you would like the date to appear:

You can change the font style and color by enclosing the above JavaScript code with your font tags.

Date

December 17, 111

Place this code between your <HEAD> and </HEAD> tags:

Place this code where you'd like the date to appear:

You can change the font style and color by enclosing the above JavaScript code with your font tags.

Drop Down Box with automatic redirect

If you're looking for a great way to enable your visitors to navigate your web site, this JavaScript drop down box with automatic redirect may be what you're looking for. This JavaScript code will enable your visitors to click on a drop down box to select the location on your web site in which they would like to navigate. Once they make their selection, the will automatically be taken to the location.

Place this code where you would like the box to appear:

<Script language="JavaScript">

</SCRIPT>
<FORM NAME="form1">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1">
<OPTION VALUE="">-------Choose a Selection-------
<OPTION VALUE="index.htm">Home
<OPTION VALUE="web_development.htm">Web Development
<OPTION VALUE="html_codes.htm">HTML Tips
<OPTION VALUE="html_codes_chart.htm">HTML Code Chart
<OPTION VALUE="javascript_codes.htm">JavaScript Codes
<OPTION VALUE="216_color_chart.htm">Color Code Chart</SELECT>
</FORM>

Edit the text indicated in red to suit your needs.

Drop Down Box with automatic redirect

Place this code between your <HEAD> and </HEAD> tags:

Place this code where you would like the menu to appear:

<select name="NavSelect" onChange="Navigate(this.form)">
<option value="" SELECTED>Click to Navigate
<option value="YourPage.html">Your Page
<option value="about:blank">Blank Page
<option value="http://www.yoursite.com">Home
</select>

Edit the text indicated in red to suit your needs.

JavaScript: Prevent Your Web Site From Being Framed

If you've ever discovered that someone has linked to your web site within a frame, which means your site is stuck in their frame with their information displaying within another frame, you know how frustrating this can be. You want your visitors to visit your web site within their standard browser window - not within another web site's frame. The following JavaScript code will enable you to prevent your web site from being framed.

Add the following bold code to your <body> tag:

Preloading Images

If you're looking for a way to speed up your web site's perceived load time, preloading your images may be your answer. By using the following JavaScript code, you can preload the images you specify prior to your web page opening. This will enable your images to promptly display instead of your visitors having to wait for them to load.

Place this code between your <HEAD> and </HEAD> tags:

Edit the text indicated in red to your image file name.

Status Bar Clock

(Internet Explorer 6)

If you're looking for a way to spice up your web site, this JavaScript code will enable you to display a status bar clock. The status bar is the area at the bottom of a web page that displays various information, such as a web address or link information when you place your mouse over or click on a link.

Example displayed below in the status bar.

Place this code between your <HEAD> and </HEAD> tags:

Place the bold code within your <BODY> tag:

Place this code below your <BODY> tag:

JavaScript Tutorial: JavaScript Statements

In JavaScript we use statements that tell the script to check to see if something is true - or present - or not. Common JavaScript statements are if, for, else, and else if. These statements are very important to JavaScript, and you will be using them a lot when you write your own JavaScript.

Let's first look at the 'if' statement. We use if to check for equalities. The if statement always includes the parentheses () after it, and what we are checking for goes inside the parentheses. We also use curly brackets {}with the if statement. The code that we want to run is inside the curly brackets.

So, what the script does is it looks to see if the condition that we have specified in the parentheses exists, and if it does, it runs the code inside the curly brackets that follow it. If the condition does not exist, it skips the code inside the curly brackets. Here is an example:

var a = 1;
var b = 2;
var c = 3;
if ((a != 0) || ( (b >= 2) && !(c > 9) ))
{
document.write("This is right.");
}

Now, you see on the if statement that we've used some characters: !, | |, &&, and >. These characters all mean something.

The ! character stands for NOT. In our example, it means if a is not equal to 0.

The | | characters means OR and the > character means greater than. Our example now reads if a is not equal to 0 or b is not greater than 2.

The && Characters mean AND. The statement now reads if a is not equal to 0 or b is greater than 2 and it is not true that c is greater than 9. Now, if this statement is true, or the condition exists, the code inside the curly brackets will run, and the words This is right will be printed on the web page. Using the ! character before a statement changes the meaning of the statement to mean that it is NOT true. In this example, c is greater than 9 is NOT true.

Pay special attention to how parentheses are used in the example. This is very important, and if it isn't done correctly, the script will not run.

Next is the else statement. Else would be used if the if statement is not true. If you will have more than two possible conditions, you would use if first, followed by else if, followed by else. You can have as many else if statements as you need.

var a = 0;
if (a > 0)
{ do something };

else if { do something else };

else { do this };

The JavaScript reads from top to bottom. If the if statement is true, it runs the code in the curly brackets, and ignores the else if and else statement that follows.

The for statement is used to perform a loop. This means that the script will run the same piece of code for however many times you specify. Here is an example:

for (var a=0; a<10; a++)
{ document.write("Test" + a); }

This statement says that as long as a is less than 10, the code inside the curly brackets should run. Furthermore, each time the code is run, it should be increased by 1. This is indicated with the double plus signs. You could also have it decrease by 1 each time by using a double minus sign,

JavaScript Tutorial: JavaScript Functions and Methods

Functions and methods are pretty much the same thing. However, you write functions that include event handlers, variables, and statements. In previous examples we saw a simple method, document.write. Document is the object, and write is the method. Functions are a little more detailed.

Look at the following piece of code:

This piece of code would cause a small alert box to pop up on the screen that says Three plus two is 5. Note the # sign in the href tag. This is basically used as a place holder, because we want to use a link, but we don't want that link to go anywhere. Also note that we have return false there, which tells the browser not to perform its default action when the link is clicked, which would normally be to take you to another page. All of this together is a function.

You can also use a function like this:

function popup()
{ alert('This is a popup'); }

In this example, you have actually specified that a function is being called, and the function is to popup an alert box that says This is a popup.

JavaScript functions are not loaded until they are called or until the user performs a certain action. Functions are placed in the HTML code in the <head></head> section. They can also be linked to in the head section if they are on a separate document.

Here is another example:

<html>
<head>
<script type="text/javascript">
function displaymessage()
{ alert("Welcome!") }
</script>
</head>
<body>
<form>
<input type="button" value="Click Here!" onclick="displaymessage()" >
</form>
</body>
</html>

Here we have placed a function in the <head></head> section of a webpage, and a button in the body of the web page that says Click Here. When this button is clicked by the user, an alert box will popup that says Welcome. Notice that after we write function, we use the displaymessage ( ). We state that we want to perform a function, and then define what that function is.

You will learn to use many different types of functions and methods as you go along. You don't have to memorize all of them.

JavaScript Tutorial: Dealing with JavaScript Errors

You may have gotten errors when you tried to run scripts in the previous examples. Generally, errors appear not because the script is bad, but because it isn't written correctly. JavaScript, unlike HTML, is not very forgiving. It has to be written exactly right.

In JavaScript, there are two errors: Syntax Errors and Runtime Errors. Syntax errors usually mean that the code is written wrong in some way. For instance, you may have misspelled a word in the code or left a variable undefined.

Runtime Errors, on the other hand, mean that the script is broken somewhere. It may be that a command isn't all the way on the left hand side of the page, or it may be because you've accidentally added space between lines of code that shouldn't be there. Again, JavaScript is picky.

Finding errors isn't that difficult. Browsers will popup a box that tells you there is an error, and in most cases, will even tell you what line that error is on. Simply count down the lines from the top of your document, and include blank lines when counting to find your errors. You may even see multiple errors at one time on that error popup. If this is the case, start at the top and fix each error as you find it, and then run the script again after each fix. Often, one fix will correct numerous errors.

JavaScript Tutorial: The JavaScript Food Chain

When dealing with JavaScript objects, there is a food chain. JavaScript works from the outside in. So, the food chain would be as follows:

window document objects in the document

If we were talking about images, the chain would be:

window document images

If we were talking about forms, the chain would be:

window document form fields and submit button

However, in JavaScript, we denote this food chain using dots, such as:

window.document.objects
window.document.images
window.document.form.fields

As you can see, there is a certain order to things, and JavaScript doesn't accept anything less. This is true for Arrays as well. JavaScript demands that the first item in the Array is 0, and that the Array items are listed in order.

Your web browser also uses an Array system. It sees the first image on your web page and assigns it an Array number of zero, the second object is assigned 1, and the third is assigned 2, and so on. In fact, it assigns Array's for graphics, links, anchors, and forms as well as the page loads.

It is important to understand the JavaScript food chain, and to think just as JavaScript and your browser thinks as you write code - from the outside to the inside.

JavaScript Tutorial: Writing Your Own JavaScript Code

Now that you understand the basics of JavaScript, how it is written, and what it expects, you can start writing your own JavaScript code. As with anything else, this does take practice, but as you continue to write code, you will improve. You will also know exactly what to write to perform the actions that you want performed without having to refer to samples or cheat sheets.

Everyone who starts uses cheat sheets, so don't feel like you 'aren't getting it' when you refer to charts and tables to find out how to make a specific thing happen using JavaScript. This is perfectly acceptable.

JavaScript code can get very long, and at first glance, it may seem overwhelming or complicated. Just start reading from the top down, and make sure that you understand what each line of code is doing. You have all of the information to understand JavaScript code right here. It is made up of everything that you've learned here.

On the following pages, you will find different reference charts that you can use to write your own JavaScript. Remember that there are literally thousands of commands, statements, variables, functions, and methods that you can use to make your web pages perform certain tasks. If you don't find what you need in these references, you will most likely find what you are looking for somewhere out there in the world wide web!

JavaScript Tutorial: JavaScript Object Reference

Object	Description
Window	The window is a top level object. It pertains to a window on the computer screen, such as a browser window that contains a document.
Document	In JavaScript, this generally pertains to an HTML document, such as a web page.
Anchor	Commonly refers to a link or the <a> element in HTML
Area	Refers to a specific area inside an image map
Base	The <base> element in HTML
Body	The <body> element in HTML
Button	Refers to a <button> element
Event	Refers to the state of an event
Form	Refers to the <form> element
Frame	Refers to the <frame> element
Frameset	Refers to the <frameset> element
Iframe	Refers to the <iframe> element
Image	Refers to the <image> element
Input button	Refers to an HTML form button
Input Checkbox	Refers to an HTML form checkbox
Input File	Refers to file upload within an HTML form
Input Hidden	Refers to a hidden field within an HTML form
Input Password	Refers to a password field within an HTML form
Input Radio	Refers to a radio button within an HTML form
Input Reset	Refers to a reset button within an HTML form
Input Submit	Refers to a submit button within an HTML form
Input Text	Refers to a text input field within an HTML form
Link	Refers to the <link> element
Meta	Refers to the <meta> element
Option	Refers to an <option> element
Select	Refers to a selection list in a form
Style	Refers to a style statement
Table	Refers to a <table> element
TableData	Refers to a <td> element
TableRow	Refers to a <tr> element
Textarea	Refers to a <textarea> element

JavaScript Tutorial: JavaScript Event Reference

Attribute	Description
onabort	Refers to the loading of an image that is interrupted.
onblur	Refers to an element losing the focus of the web browser.
onchange	Refers to a content is change, usually inside a text input box.
onclick	Refers to when an object is clicked.
ondblclick	Refers to when an object is double clicked.
onerror	Refers to when an error occurs.
onfocus	Refers to when an element is given focus.
onkeydown	Refers to when a keyboard key is pressed down.
onkeypress	Refers to when a keyboard key is pressed and/or held down.
onkeyup	Refers to when a keyboard key is released.
onload	Refers to when a web page or image loads.
onmousedown	Refers to when the mouse button is pressed down.
onmousemove	Refers to when the mouse is moved.
onmouseout	Refers to when the mouse is moved away from an element.
onmouseover	Refers to when the mouse moves over an element.
onmouseup	Refers to when the mouse button is released.
onreset	Refers to when a reset button is clicked.
onresize	Refers to when a window is resized.
onselect	Refers to when an element is selected.
onsubmit	Refers to when a submit button is clicked.
onunload	Refers to when a page is unloaded either by being closed or a link is clicked.

JavaScript Tutorial: JavaScript Functions Reference

Function	Description
eval( )	Evaluates a string, and runs it as if it were valid code
isFinite( )	Checks to see if a number is infinite
isNaN( )	Looks to see if a value in a variable is not a number
number( )	Changes a value to a number
string( )	Changes a value to a string
addNumber( )	Adds the numbers in the argument together
addEvent( )	Adds an event
addLoadEvent( )	Adds an event after a page is loaded
getCookie	Gets a cookie that is set on a users machine
setCookie	Sets a cookie on a users machine
deleteCookie	Deletes a cookie from a users machine

JavaScript Tutorial: JavaScript Math Object Reference

Method	Description
abs(a)	Supplies the absolute value of a number
acos(a)	Supplies the arccosine of a number
asin(a)	Supplies the arcsine of a number
atan(a)	Supplies the arctangent of a as a numeric value between -PI/2 and PI/2 radians
atan2(a,b)	Supplies the angle theta of a point as a numeric value between -PI and PI radians
ceil(a)	Supplies the value of a number rounded up to the nearest number
cos(a)	Supplies the cosine of a number
exp(a)	Supplies the exponential value of a number
floor(a)	Supplies the value of a number rounded down to the nearest number
log(a)	Supplies the logarithm of a number
max(a,b)	Supplies the number with the highest value
min(a,b)	Supplies the number with the lowest value
pow(a,b)	Supplies the value of one number (a) to the power of the second number (b)
random( )	Supplies a random number between 0 and 9
round(a)	Supplies a number rounded to the nearest number
sin(a)	Supplies the sine of a number
sqrt(a)	Supplies the square root of a number
tan(a)	Supplies the tangent of an angle
toSource(a)	Refers to the source code of an object
valueOf( )	Supplies the primitive value of a math object

JavaScript Tutorial: JavaScript Array Object Reference

Method	Description
concat( )	Joins two or more arrays together
join( )	Converts all of the elements of an array to a string
pop( )	Returns the last element of an array
push( )	Adds one or more elements to the end of an array, which creates a new length for the array
revers( )	Reverses the order of the values in an array
shift( )	Returns the first element of an array
slice( )	Uses selected elements from an array
sort( )	Used to sort the values of an array
splice( )	Adds new elements to an array
toSource( )	The source code of an object
toString( )	Changes an array to a string
unshift( )	Adds one or more elements to the beginning of an array, creating a new length for the array
valueOf( )	Gives the value of an array object

JavaScript Tutorial: JavaScript String Object Reference

Method	Description
anchor( )	Creates an anchor in HTML
big( )	Displays a string in a large font
blink( )	Causes a string to blink
bold( )	Displays a string in bolded letters
charAt( )	Places a character in a specified place
charCodeAt	Displays the Unicode of the character at a specific position
concat	Connects two or more strings
fixed( )	Causes a string to display in teletype
fontcolor( )	Determines the color of text
fontsize( )	Determines the size of text
indexOf( )	Gives the first occurrence of a string value
italics( )	Causes a string to be italicized
lastIndexOf( )	Gives the last occurrence of a string value
link( )	Displays a string as a link
match( )	Specifies that the script should search for a specific value in a string
replace( )	Specifies that the script should replace specified characters with other characters
search( )	Specifies that the script should search a string for something specific
slice	Extracts part of a string and return it in a new string
small( )	Specifies that a string to be displayed in small letters
split( )	Splits one string into several other strings
strike( )	Specifies that a string should appear with a strikethrough
sub( )	Specifies that a string should display as a subscript
substr( )	Extracts a specific number of character within a string from a start index
substring( )	Extracts characters within a string between two specific indices
Sup( )	Specifies that a string should display as a superscript
toLowerCase( )	Specifies that a string should display in lowercase letters
toUpperCase( )	Specifies that a string should display in uppercase letters
toSource( )	Denotes the source code of an object
valueOf( )	Supplies the primitive value of a String object

JavaScript Tutorial: JavaScript Date Object Reference

Method	Description
date( )	Returns the current date and time
getDate( )	Returns the date, between the days of 1 and 31
getDay( )	Returns the day of the week, numbered 0 to 6
getMonth( )	Returns the month, numbered 0 to 11
getFullYear( )	Returns the year as a four digit number
getYear( )	Returns the year as a two digit number
getHours( )	Returns the current hour from 0 to 23
getMinutes( )	Returns the current minutes from 0 to 59
getSeconds( )	Returns the current seconds from 0 to 59
getMilliseconds( )	Returns the current milliseconds from 0 to 999
getTime( )	Returns the milliseconds since January 1, 1970
getTimezoneOffset( )	Returns the difference in time between local time and GMT
getUTCDate( )	Displays the day of the month from a Date object specified by universal time - from 1-31
getUTCDay( )	Displays the day of the week from a Date object specified by universal time - from 0-6
getUTCMonth( )	Displays the month from a Date object specified by universal time - from 0-6
getUTCFullYear( )	Displays the four digit year from a Date object specified by universal time
getUTCHours( )	Displays the hour of a Date object specified by universal time - from 0-23
getUTCMinutes( )	Displays the minutes of a Date object specified by universal time - from 0-59
getUTCSeconds( )	Displays the seconds of a Date object specified by universal time - from 0-59
getUTCMilliseconds( )	Displays the milliseconds of a Date object specified by universal time - from 0-999
parse( )	Uses a date string and displays the number of milliseconds since January 1, 1970
setDate( )	Specifies the day of the month 1-31
setMonth( )	Specifies the day of the month 0-11
setFullYear( )	Specifies the year in a Date object - four digits
setHours( )	Specifies the hour in a Date object - 0-23
setMinutes( )	Specifies the minutes in a Date object - 0-59
setSeconds( )	Specifies the seconds in a Date object - 0-59
setMilliseconds( )	Specifies the milliseconds in a Date object - 0-999
setTime( )	Figures a date and time by adding or subtracting milliseconds from January 1, 1970
setUTCDate( )	Specifies the day of the month in a Date object specified by universal time - from 1-31
setUTCMonth( )	Specifies the month in a Date object specified by universal time - from 0-11
setUTCFullYear( )	Specifies the year in a Date object specified by universal time - four digits
setUTCHours( )	Specifies the hour in a Date object specified by universal time - from 0-23
setUTCMinutes( )	Specifies the minutes in a Date object specified by universal time - from 0-59
setUTCSeconds( )	Specifies the month in a Date object specified by universal time - from 0-59
setUTCMilliseconds( )	Specifies the milliseconds in a Date object specified by universal time - from 0-999
toSource( )	Denotes the source code of an object
toString( )	Changes a Date object into a string
toUTCString( )	Changes a Date object into a string specified by universal time
toLocaleString( )	Changes a Date object into a string according to local time
UTC( )	Takes a date and returns the number of milliseconds, according to universal time, since January 1, 1970
valueof( )	Supplies the primitive value of a Date object

Java Applets Tutorial

INTRODUCTION

Setting up JAVA applets, though perhaps daunting the first time you do it, is really quite simple. Today we're going to walk you through the basics; and believe it or not, you can get all this sorted out in under ten minutes. Let's just dive in and do it!

JAVA applets use only two types of HTML tags -- both easy to deal with.

The <APPLET> tag basically just tells the browser what applet.class file to use, and how wide and high the applet should be.

There are additional (optional) attributes you can set up, too; but in simplest use, that's all there is to this tag, and usually all you will need.

The <PARAM> tag is likewise simple -- it NAMES a parameter the JAVA applet needs to run, and provides a VALUE for that parameter.

Though a given applet may have anywhere from no PARAM tags to dozens, still, every PARAM tag takes the very same simple form: just a NAME, and a VALUE.

Let's have a look at those two tags in greater detail. And please, remember the www.CodeBrain.com maxim: "This is simple -- don't make it complicated!"

THE <APPLET> TAG

Here's the framework of a simple HTML tag set for putting an applet into your page:

<APPLET CODE="filename.class" WIDTH="400" HEIGHT="200">
.
.
(parameters go here - more about them presently)
.
.
</APPLET>

The CODE="filename.class" contains the name of the applet's class file. The class file is a small executable which does the real work of the applet.

For newcomers to JAVA, there are two important things to remember about the class file: Put the class file in the same place on your server as the HTML page calling it; and make certain you send the class file up in binary format -- never ASCII!

Forgetting to send the class file up or sending it up in
the wrong format is responsible for about 90% of all
problems encountered while setting up applets.

Next, let's look at how to set the applet size on the page. WIDTH="400" and HEIGHT="200" would cause the applet to appear 400 pixels wide and 200 pixels high on your page. If you want the applet to be a different size, change these values, just like you would for an image.

Following the <APPLET> tag you will then insert the <PARAM> tags, and -- don't forget! -- close off this tag set with a mating </APPLET> tag.

THE <PARAM> TAG

As we said, the <PARAM> tags go between the <APPLET> and </APPLET> tags, as in this sample code:

<APPLET CODE="filename.class" WIDTH="400" HEIGHT="200">
<PARAM NAME="SPEED" VALUE="100">
<PARAM NAME="IMAGE1" VALUE="thisimage.gif">
<PARAM NAME="IMAGE2" VALUE="thatimage.jpg">
</APPLET>

The very first thing you will notice is that <PARAM> tags absolutely do not, ever, have a mating end tag. <PARAM> tags are among the few HTML tags that do not.

As for what they do, parameter tags tell the applet how it is to behave and what resources it will use (for instance, in this example, how fast the applet will run, and what image files it will use).

A key point for newcomers to remember is that, unlike HTML tags and JavaScript methods or properties, a parameter's NAME is absolutely not standard. The person who builds the applet decides what the parameter names will be, so study the applet's documentation carefully.

However, the syntax and use of <PARAM> tags is regular, and very simple.

The NAME="whatever" specifies the parameter to be set, and its corresponding VALUE="whatever" says what its value is to be.

In the example above, the SPEED parameter is being set to a value of 100 (probably in milliseconds, but you would check the applet documentation to find out). Likewise, the IMAGE1 and IMAGE2 parameters would tell this applet to use "thisimage.gif" and "thatimage.jpg" respectively for its image resources.

And that's it for the parameters! No matter how many parameters, they'll all follow the same simple pattern.

PUTTING THE APPLET CODE INTO YOUR HTML PAGE

Now comes the easiest part. To insert applet code into an HTML page, you simply copy everything from <APPLET> through </APPLET> into the <BODY> area of your page HTML, wherever you would like the applet to appear.

To make this clearer, you can think of everything from <APPLET> to </APPLET> as one block, and insert the whole block into your page just like you would, say, an image <IMG> tag.

For layout control, note that you can put the entire <APPLET> ... </APPLET> block into an individual cell in a table; as in this example, which would show a 5-pixel red border around the applet:

<table cellpadding="5" bgcolor="#FF0000">
<tr>
<td>
<APPLET CODE="filename.class" WIDTH="400" HEIGHT="200">
<PARAM NAME="SPEED" VALUE="100">
<PARAM NAME="IMAGE1" VALUE="thisimage.gif">
<PARAM NAME="IMAGE2" VALUE="thatimage.jpg">
</APPLET></td>
</tr>
</table>

Tip: Note how we pulled the </td> tag right against the </APPLET> tag, by the way -- that solves a shortcoming of Netscape when it comes to proper centering.

GETTING IT ALL TO YOUR SERVER

For newcomers to JAVA, always put everything related to the JAVA applet in the same place (directory) on your server.

What has to go up? Your HTML page, of course. But also be sure any image files or other resources the applet uses are properly sent up. If they aren't there, most applets will be unable to start.

Finally, and of special note, the applet class file must be sent up. We can't say it often enough: Make sure the class file is on the server, where it should be, and make certain you sent it up in binary format.

A QUICK TAKE ON TROUBLESHOOTING

The single most common cause for problems with JAVA applets is either neglecting to send up the class file, or sending it up in ASCII (text) format, instead of binary.

If you see an error in the browser status bar like "class whatever.class not found" or "class whatever.class could not be loaded", send the class file up again, and watch your FTP client to be sure it goes up in binary.

The second most common problem is forgetting to send up resources the applet needs, such as image files or text files. Obviously, make sure they're on the server, in the right place, and sent in the appropriate formats.

The third most common problem is, you didn't proofread your code! Remember, check it three times, and when you're absolutely sure it's right? Check it again.

ASCII Character Codes Chart

HTML Code	Browser View	HTML Code	Browser View	HTML Code	Browser View	HTML Code	Browser View	HTML Code	Browser View
©	©	!	!	_	_			Û	Û
®	®	"	"	`	`		ž	Ü	Ü
		#	#	a	a		Ÿ	Ý	Ý
"	"	$	$	b	b			Þ	Þ
&	&	%	%	c	c	¡	¡	ß	ß
<	<	&	&	d	d	¢	¢	à	à
>	>	'	'	e	e	£	£	á	á
À	À	(	(	f	f	¤	¤	â	â
Á	Á	)	)	g	g	¥	¥	ã	ã
Â	Â	*	*	h	h	¦	¦	ä	ä
Ã	Ã	+	+	i	i	§	§	å	å
Ä	Ä	,	,	j	j	¨	¨	æ	æ
Å	Å	-	-	k	k	©	©	ç	ç
Æ	Æ	.	.	l	l	ª	ª	è	è
Ç	Ç	/	/	m	m	«	«	é	é
È	È	0	0	n	n	¬	¬	ê	ê
É	É	1	1	o	o			ë	ë
Ê	Ê	2	2	p	p	®	®	ì	ì
Ë	Ë	3	3	q	q	¯	¯	í	í
Ì	Ì	4	4	r	r	°	°	î	î
Í	Í	5	5	s	s	±	±	ï	ï
Î	Î	6	6	t	t	²	²	ð	ð
Ï	Ï	7	7	u	u	³	³	ñ	ñ
Ð	Ð	8	8	v	v	´	´	ò	ò
Ñ	Ñ	9	9	w	w	µ	µ	ó	ó
Õ	Õ	:	:	x	x	¶	¶	ô	ô
Ö	Ö	;	;	y	y	·	·	õ	õ
Ø	Ø	<	<	z	z	¸	¸	ö	ö
Ù	Ù	=	=	{	{	¹	¹	÷	÷
Ú	Ú	>	>	\|	\|	º	º	ø	ø
Û	Û	?	?	}	}	»	»	ù	ù
Ü	Ü	@	@	~	~	¼	¼	ú	ú
Ý	Ý	A	A		?	½	½	û	û
Þ	Þ	B	B		€	¾	¾	&#252	ü
ß	ß	C	C			¿	¿	ý	ý
à	à	D	D		‚	À	À	þ	þ
á	á	E	E		ƒ	Á	Á	ÿ	ÿ
å	å	F	F		„	Â	Â
æ	æ	G	G		…	Ã	Ã
ç	ç	H	H		†	Ä	Ä
è	è	I	I		‡	Å	Å
é	é	J	J		ˆ	Æ	Æ
ê	ê	K	K		‰	Ç	Ç
ë	ë	L	L		Š	È	È
ì	ì	M	M		‹	É	É
í	í	N	N		Œ	Ê	?
î	î	O	O			Ë	Ë
ï	ï	P	P		Ž	Ì	Ì
ð	ð	Q	Q			Í	Í
ñ	ñ	R	R			Î	Î
ò	ò	S	S		‘	Ï	Ï
ó	ó	T	T		’	Ð	Ð
ô	ô	U	U		“	Ñ	Ñ
õ	õ	V	V		”	Ò	Ò
ö	ö	W	W		•	Ó	Ó
ø	ø	X	X		–	Ô	Ô
ù	ù	Y	Y		—	Õ	Õ
ú	ú	Z	Z		˜	Ö	Ö
û	û	[	[		™	×	×
ý	ý	\	\		š	Ø	Ø
þ	þ	]	]		›	Ù	Ù
ÿ	ÿ	^	^		œ	Ú	Ú

JAVA Script CoDes and Examples

JavaScript Tutorial: An Introduction to JavaScript

Introduction

What Can I Do With JavaScript?

What Do I Need To Write JavaScript?

JavaScript Tutorial: The Basics of JavaScript

Dealing With Non-JavaScript Enabled Browsers

JavaScript Tutorial: JavaScript Events

JavaScript Tutorial: JavaScript Variables and Arrays

Disappearing Default Form Text

Open Multiple Windows with Links

Make This Site Your Home Page Button (IE)

Add to Favorites Button (IE)

Typing Status Bar Text

Protect Your Web Page Content

Open a New Window With a Button

Open a New Window With a Link

First Visit Pop Up Window

Close a window with a button

Close a window with a link

Open a window on page load

Reload a Window With a Button

Reload a Window With a Link

Redirect to a New Page

Redirect to a New Page

Status Bar Link Description

Back to previous page

Back to previous page with a link

Back to Previous Page with an Image

Button email prompt

View source code with a button

View source code with a link

On mouse over alert box

Date

Date

Date

Drop Down Box with automatic redirect

Drop Down Box with automatic redirect

JavaScript: Prevent Your Web Site From Being Framed

Preloading Images

Status Bar Clock

JavaScript Tutorial: JavaScript Statements

JavaScript Tutorial: JavaScript Functions and Methods

JavaScript Tutorial: Dealing with JavaScript Errors

JavaScript Tutorial: The JavaScript Food Chain

JavaScript Tutorial: Writing Your Own JavaScript Code

JavaScript Tutorial: JavaScript Object Reference

JavaScript Tutorial: JavaScript Event Reference

JavaScript Tutorial: JavaScript Functions Reference

JavaScript Tutorial: JavaScript Math Object Reference

JavaScript Tutorial: JavaScript Array Object Reference

JavaScript Tutorial: JavaScript String Object Reference

JavaScript Tutorial: JavaScript Date Object Reference

Java Applets Tutorial

ASCII Character Codes Chart

Comments

Post a Comment

Popular posts from this blog

All Google Hacking Keyword - New Updated

Blackberry android phone with physical keyboard

Download Windows 8 Activators