JavaScript is the programming language of HTML and the Web.
Programming makes computers do what you want them to do.
JavaScript is easy to learn.
This tutorial will teach you JavaScript from basic to advanced.
With our "Try it Yourself" editor, you can change all examples and view the results.
 |
It is highly recommended that you read this tutorial in the sequence that it is presented. Not doing so can cause massive amounts of confusion. |
|---|
Examples are better than 1000 words. Examples are often easier to understand than text explanations.
This tutorial supplements all explanations with clarifying "Try it Yourself" examples.
|
If you try all the examples, you will learn a lot about JavaScript, in a very short time! |
|---|
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
This tutorial is about JavaScript, and how JavaScript works with HTML and CSS.
In this tutorial, the learning speed is your choice.
Everything is up to you.
If you are struggling, take a break, or reread the material.
Always make sure you understand the "Try-it-Yourself" examples and exercises.
W3Schools maintains a complete JavaScript reference, including all HTML DOM, and browser objects.
The reference contains examples for all objects, properties, and methods, and is continuously updated according to the latest web standards.
|
|
|---|
JavaScript is ubiquitous on the World Wide Web. You can use JavaScript both to make your Web pages more interactive, so that they react to a viewer’s actions, and to give your Web pages some special effects (visual or otherwise).
JavaScript often gets thrown in with Hypertext Markup Language (HTML) as one of the recommended languages for beginning Web developers (whether you build Web sites for business or pleasure). Of course, you can build a Web page by using only HTML, but JavaScript allows you to add additional features that a static page of HTML can’t provide without some sort of scripting or programming help.
Occasionally, you will also need to add an attribute to a tag for a script to function properly. For example, you may need to name a form element using the id attribute, as shown in the following code:
If you know the basics of using tags and attributes, the HTML portion shouldn’t pose any problems to learning JavaScript. If you don’t have a basic knowledge of HTML, you can get up to speed by reviewing the material from the previous classes.
Occasionally, you will need to use CSS to add or change presentation features on a Web page. Here you will mainly use CSS for the purposes of dynamically changing CSS properties via JavaScript.
Before jumping in and coding with JavaScript, you must be able to use a text editor or an HTML editor, and a Web browser. You’ll use these tools to code your scripts.
A number of text editors and HTML editors support JavaScript. If you know HTML, you’ve probably already used an HTML editor to create your HTML files, so you might not have to change.
However, some HTML editors have problems related to adding JavaScript code (such as changing where the code is placed or altering the code itself when you save the file). You may need to use a simpler editor or look for an HTML editor that handles the addition of your own JavaScript code easily (such as NotePad++ or Adobe Dreamweaver). Some examples of text editors are Notepad, TextPad, and Simple Text.
Again, if you’ve been coding in HTML, you probably won’t need to change your browser. However, some browsers have trouble with certain versions of JavaScript. The choice of Web browser is ultimately up to you, as long as it’s compatible with the current version of JavaScript.
JavaScript is an object-based, client-side scripting language that you can use to make Web pages more dynamic. To make sense of such a definition, take a closer look at its important parts one by one.
Object based means that JavaScript can use items called objects. However, the objects are not class based (meaning no distinction is made between a class and an instance); instead, they are just general objects. You’ll learn how to work with JavaScript objects later. You don’t need to understand them in any detail until you know a few other features of the language.
Client side means that JavaScript runs in the client (software) that the viewer is using, rather than on the Web server of the site serving the page. In this case, the client would be a Web browser. To make more sense of this, take a look at how a server-side language works and how a client-side language works.
A server-side language needs to get information from the Web page or the Web browser, send it to a program that is run on the host’s server, and then send the information back to the browser. Therefore, an intermediate step must send and retrieve information from the server before the results of the program are seen in the browser.
A server-side language often gives the programmer options that a client-side language doesn’t have, such as saving information on the Web server for later use, or using the new information to update a Web page and save the updates.
However, a server-side language is likely to be limited in its ability to deal with special features of the browser window that can be accessed with a client-side language (like the content in a particular location on a Web page or the contents of a form before it’s submitted to the server).
A client-side language is run directly through the client being used by the viewer. In the case of JavaScript, the client is a Web browser. Therefore, JavaScript is run directly in the Web browser and doesn’t need to go through the extra step of sending and retrieving information from the Web server.
With a client-side language, the browser reads and interprets the code, and the results can be given to the viewer without getting information from the server first. This process can make certain tasks run more quickly.
A client-side language can also access special features of a browser window that may not be accessible with a server-side language. However, a client-side language lacks the ability to save files or updates to files on a Web server like a server-side language can.