What is JavaScript?
JavaScript is a compact, object-based scripting language for Web pages. JavaScript code embedded into your HTML pages can enhance them with many interesting elements, from swapping images when you move a cursor over them, to multi-level drop-down menus.You can create really sophisticated and almost application-like pages with the help of JavaScript. You don't need any special software other than a text editor and a Web browser, and you don't need access to a Web server. You can create and test all your JavaScript code right on your own computer.
JavaScript and Java
Although the names are almost the same, JavaScript isn't the same as Java. These are two different techniques for Internet programming. Java is a real programming language, and you can create real programs with it.JavaScript is a scripting language. You could even say that JavaScript is rather an extension to HTML than a separate computer language. It's so tightly integrated with HTML that you could call it "JavaScript markup language." JavaScript coders don't care too much about real programming, they just make different nice effects by inserting small JavaScript code fragments into their Web pages.
The drawbacks of JavaScript
Right now the biggest problem is the imperfect JavaScript implementations that today's browsers offer. Although all major browsers that are version 3.0 or higher include JavaScript support, they deal with JavaScript differently.In fact, different versions of the same browser handle JavaScript differently. This makes it difficult to create a complicated JavaScript code that work across all browsers. So always check your pages on as many different browsers (and even platforms) as possible.
What do JavaScript code look like?
Like HTML, JavaScript is just text that can be typed into a text editor. Its code is embedded in HTML within a <SCRIPT> tag. Some old browsers don't understand this tag. To prevent them from treating your JavaScript as HTML, always use this trick involving HTML comments... <script type="text/javascript">
<!-- hide JavaScript code from old browsers
YOUR SCRIPT HERE
// end the hiding comment -->
</script>
Here's an example of JavaScript code that prints current date in the top right corner of your Web page... <!-- hide JavaScript code from old browsers
YOUR SCRIPT HERE
// end the hiding comment -->
</script>
<html>
<head>
<script type="text/javascript">
<!--
function PrintDate() {
today = new Date();
document.write('Date: ', today.getMonth()+1, '/', today.getDate(), '/', today.getYear());
}
//-->
</script>
</head>
<body>
<p align="right">
<script type="text/javascript">
<!--
PrintDate();
//-->
</script>
</p>
THE REST OF YOUR PAGE.
</body>
</html>
See JavaScript Examples for more complex and useful examples of JavaScript code. <head>
<script type="text/javascript">
<!--
function PrintDate() {
today = new Date();
document.write('Date: ', today.getMonth()+1, '/', today.getDate(), '/', today.getYear());
}
//-->
</script>
</head>
<body>
<p align="right">
<script type="text/javascript">
<!--
PrintDate();
//-->
</script>
</p>
THE REST OF YOUR PAGE.
</body>
</html>
The power of JavaScript
JavaScript has one particular feature that makes it an interactive and power tool - event handling. You can trigger the JavaScript program by various events. For example, when the page loads, when it quits, when you pass your cursor over a link, or when you click on a button or a link.Here's a list of the common event handlers, that all popular browsers can deal with...
| Event | When it's triggered |
| onAbort | An image is stopped from loading because the user either hits Stop or leaves the page. |
| onBlur | An element, such as a window, frame, or form field, loses focus; that is, when the user clicks on something else. |
| onClick | The user clicks on the particular element. |
| onChange | The value of a form field changes, for example, when the user types in some data. |
| onDblClick | The user double-clicks on the particular element. |
| onError | A loading error happens, like a missing image. |
| onFocus | The user puts the focus on the target element, by clicking on it or tabbing to it. |
| onKeyDown | A key on the keyboard is pushed down, regardless of whether it's then held down or released. |
| onKeyPress | This event is repeatedly triggered as long as a key is held down. |
| onKeyUp | A key on the keyboard is released. |
| onLoad | The browser completely loads the page. |
| onMouseDown | A key on the mouse is pushed down, regardless of whether it's then held down or released. |
| onMouseMove | The mouse moves. |
| onMouseOut | The pointer moves out of the target area. |
| onMouseOver | The pointer moves over the target element. |
| onMouseUp | A key on the mouse is released. |
| onReset | The Reset button of a form is clicked. |
| onResize | A window or frame is resized by the user. |
| onSelect | The user highlights text in a form field. |
| onSubmit | A form is submitted. |
| onUnload | The user leaves the page. |
<form>
<input type="button" value="Click me" onClick="alert('This is JavaScript!');">
</form>
If you need an elaborate action to take place when the button is clicked, you can call a predefined function. The following JavaScript code writes text to the statusbar (the bar on the bottom of your browser where the URLs are shown)... <input type="button" value="Click me" onClick="alert('This is JavaScript!');">
</form>
function MyFunc( txt ) {
window.status = txt;
}
<form>
<input type="button" value="Click me" onClick="MyFunc('This is JavaScript!');">
</form>
window.status = txt;
}
<form>
<input type="button" value="Click me" onClick="MyFunc('This is JavaScript!');">
</form>
Free JavaScript tutorials
There are a lot of free JavaScript help resources on the Net. Here are a few...Webmonkey's JavaScript Tutorial
The author has been working with JavaScript since its invention, and he created this five-part JavaScript tutorial to teach you everything you need to know to begin your JavaScript career. The course comes complete with many exercises, and you'll be writing a script by the end of the first lesson.
Webmonkey's Advanced JavaScript Tutorial
In this free JavaScript tutorial the author introduces you to some of the fancier aspects of this language and the tips and lowdown that will allow you to build real multimedia applications.
HTML Goodies JavaScript Primers
30 lessons that get you started writing your own JavaScript events. Each of these 30 primers will display one JavaScript and tear it apart so you can see how it works. You'll be taught why something works, not just shown that it works.
The JavaScript Source
This is an excellent free JavaScript tutorial with tons of free "cut and paste" JavaScript code examples for your Web pages.
JavaScript is very rich, and although you can learn most of its grammar with these online tutorials, you won't learn the entire language. If you're serious about writing your own JavaScript codes, you need a good book...
 | The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks by Cameron Adams and James Edwards This book provides you with over 100 thoroughly-tested, customizable and elegant solutions that will show you how to add usable and accessible interactivity to your site: from slick drop-down menus, to style sheet switchers, to AJAX applications, and much more. It also includes download access to all JavaScript code samples used throughout the book - you can plug them right into your own websites without any retyping. |
Posts
0 comments:
Post a Comment