A Brief Introduction to HTML for JavaScript Programmers
By Stephen Bucaro
Although JavaScript is a neat programming language, the basic foundation of the web is HTML.
HTML (Hypertext Markup Language) is codes or tags that define the layout or structure of a webpage.
You might be interested to know that all documents (except those written in basic ASCII or unicode)
use some type of codes or tags to define the structure of a document. For example Microsoft
Word uses RTF (Rich Text Format) codes to layout of a Word document.
The first HTML was used in 1989 by the physicist Tim Berners-Lee working at the
CERN particle physics laboratory in Geneva Switzerland. It was used to share documents.
HTML was derived from a formatting language called SGML (Standard Generalized Markup
Language) which was created by the IETF (Internet Engineering Task Force) in the 1960s.
Let's study the HTML code for a very basic webpage, as shown below.
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Note that the HTML tags are defined by a < (less-than) character and a > (greater-than)
character. The name of the tag, which defines its function, is contained within these characters.
Modern HTML (which is called XHTML) requires that every tag be followed by a "closing tag". A closing
tag is similar to an "opening tag" except it has a ⁄ (slash) character immediately after its
beginning less-than tag, in other words <⁄.
Returning to the HTML code for a very basic webpage, shown above, note that the first line is
the <html> tag. This tag defines the beginning of the webpage. Note that the last line is the
closing </html> tag. everything between the <html> and the </html> is the webpage.
Just below the opening HTML tag are the opening and closing head tags. Just below
the closing head tag is the opening body tag. Most every webpage has two parts,
a head section, and a body section. Although the code for the visible elements
of a webpage go between the opening and closing body tags, the head
section is very important to JavaScript programmers.
If webpages are constructed of HTML, what does JavaScript do? JavaScript gives you the ability
to control and modify the HTML. So, even though you are primarily interested in learning JavaScript,
you can't get there without at least a basic understanding of HTML.
<html>
<head>
<script>
function changeText()
{
document.getElementsByTagName("P")[0].innerHTML = "Goodby World";
}
</script>
</head>
<body>
<p onclick="changeText()">Hello World</p>
</body>
</html>
Lets study the example above. Note that within the body section of the example is
the code <p>Hello World</p>. This is an opening paragraph tag, the text of the
paragraph "Hello World", and the closing paragraph tag. When we have an opening
tag and a closing tag that are the same, this defines an HTML element. Most HTML elements
have buit-in events to which you can attach JavaScript functions.
Note in the above code, in the <p> element's opening tag we have attached a function named
changeText to the onclick event, <p onclick="changeText()">. So that
when the user clicks on the text, the changeText function is executed.
Note that within the head section of the document, we put opening and closing script
tags to define a script code block, and within this script code block we defined the JavaScript
changeText function. At this point, let's not worry about the details of the code within
the function. It suffices to say that this code replaces the text Hello World in the paragraph
element with the text "Goodby World".
When the webpage loads, the head section is parsed first, allocating the changeText
function. Then the body section is parsed and displayed. If the user clicks within the paragraph,
the paragraph element's onclick event will trigger, which will execute the changeText
function, which will change the paragraph element's contents from "Hello World" to "Goodby World".
If you have even just an inkling of what I explained here, you are on your way to becoming a
JavaScript programmer. This is a simple example, but the rest is just more of the same. A webpage
has HTML elements which have built-in events to which you can attach your JavaScript
functions to make things happen on the webpage. It's that simple.
More Java Script Code:
• Easy Java Script Butterfly Animation
• Using the Java Script Date Object
• HTML5 Canvas Storing and Clearing Transformations
• Java Script Code to Calculate Speed / Distance of Falling Object
• Java Script to Dynamically Add, Remove, and Change Items in a Select List
• Binary Subtraction with Example JavaScript Code
• JavaScript Code for Binary to Decimal - Decimal to Binary Conversion
• Regular Expression Basics : How many Matches?
• Create a Mouse Click Sound Effect
• Code to Add Music to Your Webpage
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
