Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

A Brief Introduction to HTML for JavaScript Programmers

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.

<p>Hello World</p>

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.


function changeText()
document.getElementsByTagName("P")[0].innerHTML = "Goodby World";

<p onclick="changeText()">Hello World</p>

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:
• A Cross-Browser Solution for Handling JavaScript Events
• Code for Java Script Cube / Box Volume Calculator
• Code for Java Script Circle/Sphere Calculator
• Easy Code to Add Mouse Trails to Your Webpage
• Code for a Less annoying Popup Window
• How to Shuffle the Deck With Java Script
• HTML5 Canvas Drag-and-Drop
• Prototype Keyword Gives JavaScript Object Oriented Inheritance
• Using the Java Script Date Object
• Java Script to Get Selected Item from Drop-down Select List

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268