Nairaland Forum

Welcome, Guest: Join Nairaland / Login / Trending / Recent / New
Stats: 1238314 members, 1650556 topics. Date: Wednesday, 23 April 2014 at 10:13 PM

Javascript And HTML - Programming - Nairaland

Nairaland Forum / Science/Tech / Programming / Javascript And HTML (488 Views)

Where To Find Css And Html Tutorial / Develop One App For All Mobile Devices - HTML5, Javascript and/or C++ / Javascript And Design Patterns (1) (2) (3) (4)

(0) (Reply)

Javascript And HTML by softchase(m): 6:22pm On Dec 17, 2012
JavaScript and HTML
You can think of JavaScript as an extension to HTML; an add-on, if you will.
Written by Olumide kuforiji
email:olumide.kuforiji at softchaseng.com

Here's how it works. HTML tags create objects; JavaScript lets you manipulate those objects. For example, you use the HTML <BODY> and </BODY> tags to create a Web page, or document. As shown in Table 1, after that document is created, you can interact with it by using JavaScript. For example, you can use a special JavaScript construct called the onLoad event handler to trigger an action — play a little welcoming tune, perhaps — when the document is loaded onto a Web browser. Examples of other HTML objects that you interact with using JavaScript include windows, text fields, images, and embedded Java applets.

Table 1: Creating and Working with Objects

Object

HTML Tag

JavaScript

Web page

<BODY> . . . </BODY>

document

Image

<IMG NAME="myImage">

document.myImage

HTML form

<FORM name="myForm"> . . . </FORM>

document.myForm

Button

<INPUT TYPE="button" NAME="myButton">

document.myForm.myButton

To add JavaScript to a Web page, all you have to do is embed JavaScript code in an HTML file. Below the line in which you embed the JavaScript code, you can reference, or call, that JavaScript code in response to an event handler or an HTML link.

You have two choices when it comes to embedding JavaScript code in an HTML file:

You can use the <SCRIPT> and </SCRIPT> tags to include JavaScript code directly into an HTML file.
In the example below, a JavaScript function called processOrder() is defined at the top of the HTML file. Further down in the HTML file, the JavaScript function is associated with an event handler — specifically, the processOrder button's onClick event handler. (In other words, the JavaScript code contained in the processOrder() function runs when a user clicks the processOrder button.)
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
// JavaScript statements go here
function processOrder() {
// More JavaScript statements go here
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<INPUT TYPE="button" NAME="processOrder" VALUE="Click to process your order" onClick="processOrder();">
...
</HTML>

You can use the <SCRIPT> and </SCRIPT> tags to include a separate, external JavaScript file (a file containing only JavaScript statements and bearing a .js extension) into an HTML file.
In the example below, the JavaScript processOrder() function is defined in the myJSfile.js file. The function is triggered, or called, when the user clicks the Click Here to Process Your Order link.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="myJSfile.js">
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:processOrder();">Click here to process your order.</A>
...
</BODY>
</HTML>

Because Web pages aren't made of HTML alone, JavaScript provides access to more than just HTML objects. JavaScript also provides access to browser- and platform-specific objects. Browser plug-ins (such as RealPlayer and Adobe Acrobat), the name and version of a particular viewer's browser, and the current date are all examples of non-HTML objects that you can work with by using JavaScript.
Re: Javascript And HTML by Chimanet(m): 7:01pm On Dec 17, 2012
Nice tutorial, keep it up
Re: Javascript And HTML by pc guru(m): 8:23pm On Dec 20, 2012
Nice tutorial are you kidding me this is very much deprecated, first of al it should be text/javascript but that's not a big issue, however the content should never have javascript in the page but injected by loading a script and binding to the appropriate DOM, once javascript has been disabled the link is useless. this tutorial is way too old and should not be used for production sites.

(0) (Reply)

Php V Java Technologies Which WAY Do We Go In This Enterprise Systems World / Assembly Language Ebook / Post Your Development Problem Here!

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (0) (1) (2) (3) (4) (5) (6) (7) (8) (9)

Nairaland - Copyright © 2005 - 2014 Oluwaseun Osewa. All rights reserved. See Nairalist and How To Advertise
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.