JavaScript code tips
Tuesday, October 20, 2009
, Posted by hang at 12:39 AM
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.
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.
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!
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!
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.
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:
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.
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
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 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:
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:
| Home |
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:
| Home |
But what we did to turn this into JavaScript is add additional information to the 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.
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:
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.
Currently have 0 comments: