| |
|
| |
Web Programming Basics |
| |
|
| |
|
| |
|
| |
JavaScript Tutorial – Web Programming Basics |
| |
|
| |
Javascript Tutorial |
| |
|
| |
JavaScript Tutorial – An Introduction |
| |
|
| |
Reading this quick JavaScript tutorial will give you the perfect overview of what JavaScript is and what it can do. JavaScript is an essential part of website design. It is far and away the most common means of implementation for client-side scripting. It allows for you to manipulate the elements of a HTML page and create animated and dynamic content. |
| |
|
| |
Normally an HTML page is static. It does not change after it has loaded onto the user's screen. In order for a user to receive new content, he must click a link and have the browser load up a new page. As you will learn from this JavaScript tutorial, JavaScript allows for the HTML elements of the page to be modified without a new page being loaded. |
| |
|
| |
Any HTML element can be modified by JavaScript. A font can have its size, color or type-face altered. An image can be swapped out and replaced with another one. A sound effect can be made to play. Web designers use JavaScript to create drop-down menus, scrolling text, image-panes, pop-up windows, mouse-overs and more. |
| |
|
| |
JavaScript is an interpreted language, which means that you cannot write a stand-alone program in JavaScript, it must be interpreted by another program. In 99% of cases, the JavaScript interpreter will be a web browser, with the JavaScript running within the browser. Hence the term 'client-side scripting'. |
| |
|
| |
Since JavaScript runs within the browser, it has access to all the elements of the HTML page being displayed. The HTML elements are made available through what is called the Document Object Model or DOM. |
| |
|
| |
Under DOM, every HTML element can be used as a JavaScript object. The objects are traversable, so if you have an IMG element that is within a DIV element, the object for the DIV element is a parent to the object to the IMG element. Importantly, the top-level 'document' object is pre-initialised by the browser, and, since it is the root node to all other document objects, you can use the 'document' object to access any other HTML object. |
| |
|
| |
Once you finish reading this JavaScript Tutorial and decide to look at some JavaScript code you will see that it is similar in appearance to C/C++ and Java. Much of the syntax is the same, curly braces denote blocks and semi-colons terminate each line. But JavaScript actually has no direct relationship to Java, despite the name. JavaScript was originally called LiveScript but its name was changed to JavaScript under a marketing deal between Netscape and Sun Microsystems. |
| |
|
| |
You will find that JavaScript is much more forgiving than C/C++ and Java. Because the browser is already supplying the essential objects you will be manipulating, you will probably only need a couple of lines of code to achieve the results you want. One key feature of JavaScript is dynamic typing. All variables point to objects. Assign a string to a variable and it is bound to a string object. Assign a numeric value to the same variable and it is bound to a Number Object. |
| |
|
| |
Thus far in this JavaScript Tutorial we have talked about how JavaScript is great for accessing HTML elements in a web-page, but what we have not yet mentioned is how to trigger JavaScript from a web-page. Say you write a JavaScript function that changes the background color of a web-page to green. You can make the function run when the page loads, but if you do that, then why not just make the background green in the HTML in the first place? To make JavaScript really useful you need to use event handlers. |
| |
|
| |
Like with DOM, events are taken care of by the browser. They are very easy to work with. There are 22 different events you can use to trigger JavaScript but only a few important ones. One that will probably be useful to you is the event 'onmousedown', which is triggered whenever a mouse button is pressed. To make use of onmousedown you simply assign a function to it as if it were a HTML property, for example with the HTML code: <div onmousedown="myfunction(event)">. With that code, the function myfunction() would be called whenever a user presses a mouse button while the mouse-pointer is hovering over the DIV area. Note that you can assign event handlers to the BODY tag, so that they apply across the whole of the web page. |
| |
|
| |
The only bad thing about JavaScript is that every browser implements it differently. This can mean that JavaScript which works on one browser, say Internet Explorer, may not work on another browser, say Firefox. The situation is improving with each new browser revision, but there are still problems. Unfortunately, no JavaScript tutorial can really help you with browser compatibility problems; experience is the best teacher here. Make sure you get a hold of a good reference document so that you know what parts of the DOM are implemented in each browser. Then you can write JavaScript code that will test which browser it is running on and allow for any compatibility problems. |
| |
|
| |
I hope you enjoyed this introductory JavaScript Tutorial, good luck and happy JavaScripting. |
| |
|
| |
We will be adding more detailed javascript tutorials soon, but for now please visit the following pages for more JavaScript Tutorials and References: |
| |
|
| |
http://www.w3schools.com/HTMLDOM/dom_examples.asp
http://www.w3schools.com/jsref/jsref_events.asp |
| |
|
| |
hank you to Alex Hutton for this “Javascript Tutorial” article. |
| |
|
| |
Latest Web Programming Basics Articles: |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
