JavaScript
Examples

'complete'
HTML-plus-JavaScript
code samples

Home page > RefInfo menu >

Computer topics menu (WebDev section) >

This JavaScript Examples page
('complete' HTML-plus-JavaScript examples)

! Note !
More HTML-plus-JavaScript(-plus-CSS) code samples may be
added to this page --- if/when I revisit or use this page.

Furthermore:
More notes may be added to draw attention to noteworthy
features of these HTML-plus-JavaScript examples.

< Go to List of Code Samples, below. >
(Skip the following Introduction.)

INTRODUCTION :

There are many tutorial web pages and books that contain 'snippets' of JavaScript code that give an idea of the many things you can do with JavaScript --- in particular, adding 'dynamic' capabilities to web pages --- input/output activity such as

  • responding to 'events' (such as mouse clicks) in page 'elements' --- in addition to the anchor/link elements on the page . . . this is in the 'input' category

  • changing the content of 'elements' on the page (or the entire page) . . . this is in the 'output' category.

The 'elements' are 'window elements' and 'document elements' in the hierarchical DOM (Document Object Model). The elements are typically objects denoted by HTML 'tags' such as

  • block sections such as
    paragraphs (denoted by <p ...> tags)
    or divisions (denoted by <div ...> tags)
    or tables (denoted by <table ...> tags)
    or iframes (denoted by <iframe ...> tags)

  • image elements
    denoted by <img src=...>

  • anchor and link elements
    denoted by a tag of the form <a href=...>

  • 'form' input elements
    denoted by <input type=...> , more specifically

    • radiobuttons --- Example: <input type="radio" ...>
    • checkbuttons --- Example: <input type="checkbox" ...>
    • buttons --- Example: <input type="button" ...>
    • text entry fields --- Example: <input type="text" ...>

  • option-selection elements
    denoted by a <select ...> tag and multiple <option ...> tags

Unfortunately, many of the 'snippet' guides to JavaScript leave one at a loss as to how the JavaScript code should be placed and used within the context of an entire web page.

This page is meant to present JavaScript examples that amount to 'complete' JavaScript examples . . . examples that make use of JavaScript code --- along with the major, sectional HTML tags ---

  • <html>
  • <head>
  • <title>
  • <body ...>

and along with other 'content' HTML tags such as

  • <a href=...>
  • <img ...>
  • <input ...>
  • <p...>
  • <table...>
  • <div...>

Nowadays, HTML code is typically augmented by using CSS (Cascading Style Sheets) code. The CSS code offers a way of 'separating the presentation controls from the content'. The presentation controls typically amount to control of 'geometry and embellishments'.

Examples of geometry:
widths, heights, font-sizes, margins, border-sizes, padding-sizes, positions

Examples of embellishments:
colors, font-families (i.e. font styles), text wrap/nowrap handling options within block elements

A couple of major advantages of CSS:

  • a common 'appearance' can be applied to all the pages of a web site with a single, central CSS file

  • if a change (or fix) is to be made to the 'appearance', it can be made in one file, instead of the HTML files of potentially hundreds of web pages

So some of the following HTML-and-JavaScript examples include the usage of an 'external' CSS file.

And some styling is over-ridden (or applied) via 'style=' parameters in the HTML files.

Some 'complete' JavaScripts :   (not just 'snippets' of code)

There are several web sites that provide free JavaScript examples without requiring you to 'jump through hoops', such as registration of your email address and surrendering the family jewels.

Some example code sites are:

Sites like these have much to offer in the way of examples of working JavaScript code --- that is, de-bugged code ... with respect to most browsers and operating environments. These sites offer code examples for a wide variety of purposes.

Many of these sites offer a code sample on the left of a web page --- and the working output of that sample on the right side of the web page. So you can immediately verify whether the code works in your web browser --- by triggering an appropriate 'event', such as a 'click' event.

If some of these sites go dead, you could try doing a web search on the 'strings' :

And, to find 'complete' examples of HTML-plus-JavaScript code, you could try doing a web search on the 'strings' :

and add other HTML-related strings such as 'radio' or 'select' or 'option' or 'form' or 'href' or 'onclick' or 'onload' or 'img' or 'src'.

Intent and Use of This Page

The 'list-of-html-and-scripts' section below provides a means to SEE and RUN and DOWNLOAD code samples that I think will be of use to me in my web development projects.

    Over time, I will probably alter some of these to use better naming conventions (within the HTML and within the JavaScripts) --- and to make more practical (useful) examples.

This page is mainly intended to help me when I need code examples for web page coding projects involving JavaScript.

    Note that my emphasis is on client-side scripting, rather than scripting to handle input-to and output-from a remote web server.

I make this web page available to others who may find it difficult, like I did, to find 'complete' JavaScript coding examples that could be helpful in doing 'serious application' stuff, instead of 'fun' stuff (like making images do funny things on a web page).

I start out with some simple coding examples --- so this page can be used as an introduction or tutorial.

Click on a 'View code' link to display the text of the code (HTML or JavaScript or CSS).

    When you click on a 'View code' link, a new window (or tab) should open in your browser, to show the code.

    (The 'View code' button may actually RUN the code, instead of DISPLAY it, in certain environments. I may fix this so the code is DISPLAYED rather than RUN.)

Click on a 'Run' link to load an HTML sample and have it execute and use the Javascript and CSS (and other HTML files) that are involved.

    When you click on a 'Run' link, a new window (or tab) should open in your browser, to show the output from the demo. This new window should allow you to view code (in one window) and the output (in another window) at the same time.

    (The 'Run' button may actually DISPLAY the code, instead of RUN it, in certain environments. I may fix this so the code is RUN rather than DISPLAYED.)

You can close various 'View code' and 'Run' windows/tabs, leaving this page open in a window for further code examination and demonstration.

If you want to save the code to a file on your computer, you can RIGHT-click on a 'Run' link (or a 'View code' link) and use a popup menu option such as 'Save Link Target As ...' to save a copy of the file.

    SOURCE NOTES:
    Some of the examples use a JavaScript file that I have named 'addEvent.js'. That code is available at a 'View code' link at the bottom of this list. That code is intended to work around some differences in browsers.

      As browsers converge on common syntax for handling various JavaScript features, the 'addEvent.js' file could be replaced by a single statement. Or, if you only care about a certain browser (yours), you could simplify your script code by using a statement in place of that JavaScript file.

    An 'appearance.css' file has been added to the demo HTML files to help adjust font sizes to display differently on small devices (cell-phones) from their display on large devices (desktop computer monitors). That code is available at a 'View code' link at the bottom of this list. (You may find that you need to change or add to that file. The CSS world is going through lots of changes in the 2010-2020 time frame.)

    Many of these examples are based on examples from the book 'JavaScript Bible' by Danny Goodman . . . and a few other JavaScript books that I have bought over the years. I have changed the names of essentially all of the files to reflect the content and/or main features of the files.

    Furthermore, I intend to change many names in 'name=' (and 'id=') parameters in the files to make it more helpful (when dealing with large amounts of code) to quickly determine the nature of the item referred to by the name --- without having to scan the code.

    For example, instead of using a name like 'nav' for an 'iframe', I may use a name like 'ifrNav' to indicate that the name refers to a 'iframe' element.

    And instead of using a name like 'clicker' for a 'button', I may use a name like 'butAlert' to indicate the name identifies a button that will trigger an 'alert'.

    FURTHERMORE, I intend to completely replace some of the examples (or replace a major amount of code in some of the examples) to make an example that seems much more useful (practical) to me.

    I had to add some align="center" code to some of the examples to improve the display of the HTML page elements. (In the future, that should be done with CSS ... like style="text-align:left".)

You can scroll down this page to find demo-code of interest ... OR you can use a find-text option of your web browser to look for keywords of interest. For example, if you are interested in examples of use of radiobuttons, you could search for the string 'radio'. And to find examples of use of buttons, you could look for the string 'butt'.

Further examples:
If you are interested in examples of use of 'onclick', you could look for the string 'onclick'. And if you are interested in use of frames ('frameset' or 'frame' or 'iframe'), you could look for the string 'frame'. (NOTE: 'frameset' and 'frame' are deprecated.)

If you need some more information on JavaScript, see the additional-info in the 'LINKS' section at the bottom of this page.

List of HTML and JavaScripts (and CSS) :

  • hello-world_noJavaScript.html
    View code     Run

    A simple Hello World' example. All HTML . . . NO JavaScript.

  • hello-world_withJSandCSSfiles.html
    View code     Run

    A 'Hello World' example done with an 'external' JavaScript file and an 'external' CSS file.
    (JavaScript and CSS source is below).

  • hello-world.js
    View code

    This JavaScript uses 'Date()', '+' for string concatenation, a '.toLocaleString' method, and the 'alert(...)' built-in function.

  • hello-world.css
    View code

    This CSS code provides some styling for 'h1' and 'p' elements.

  • buttonInForm_onClickEvent.html
    View code     Run

    This HTML uses the statement

    <input type="button" name="butAlert" value="Press Me!" onclick="alertUser()">

    to call on a JavaScript that is coded in the 'head' section of this HTML file. The 'alertUser' function defined in this code calls on the built-in 'alert(...)' function.

  • button_eventHandler.html
    View code     Run

    The 'id' of the button in the HTML is used in the JavaScript file below to assign an event and action (an alert function) to the button. (In the terminology of some computer languages, this is called 'binding' an event and action to the button.)

  • button_eventHandler.js
    View code

    This JavaScript function could be very simple, but it looks complex because it is not assuming much --- it is checking for possible problems of several kinds.

  • date-time.html
    View code     Run

    Uses the JavaScript built-in function 'Date()' to display date-and-time on a web page. Uses some CSS to put the date-time text over other, larger text.

  • date-time.js
    View code

    There is a lot of 'defensive programming' in this JavaScript.

  • date-time.css
    View code

  • scopeOfVariableDefinitions_globalANDlocal_ inFunctions_inBody.html
    View code     Run

    This example demonstrates 'scope' of local versus global variables.

    It shows that if you do not use 'var' when initializing a variable in a function, the variable becomes a global variable.

    (I may alter this example some more to make it clearer what is happening without wading through the code.)

  • radiobutton_extractingHilitedOne_Stooges.html
    View code     Run

    A 'radio' button demo. Arranges the radiobuttons vertically.
    Uses 'fieldset' and 'legend' elements within a 'form' element
    to create a border around the radiobottons and a title above them.

  • radiobutton_extractingHilitedOne_Stooges.js
    View code

  • radiobutton_BeatlePicker.html
    View code     Run

    Another 'radio' button demo. Arranges the radiobuttons horizontally.
    Includes a 'text' entry input element and a 'button' input element.

  • radiobutton_BeatlePicker.js
    View code

  • framesetDemo_propertyPicker.html
    View code     Run

    A 'frameset' demo with two side-by-side 'frame' elements.
    NOTE:
    'frameset' and 'frame' are due to be eliminated from HTML5 spec.
    'iframe' is to remain. This demo could be re-done using 'iframe' elements.

  • framesetDemo_propertyPicker_frame1.html
    View code

  • framesetDemo_propertyPicker_frame2.html
    View code

  • selectOption_demo.html
    View code     Run

    A select-options demo. The options show in a drop-down menu.

    Click-release on an option shows a different web page. The options are three 'local' web pages and an 'external' web search page.

  • selectOption_demo.js
    View code

  • windowOpenAndClose_demo.html
    View code     Run

    A demo of opening a new window, in addition to the original document window.

    Poke the 'Create New Window' button. A new (empty) window will be created.

    You can close the new window by going back to the original window, with the 2 buttons, and poke the 'Close New Window' button.

    If the user has the browser set to open new windows in a tab, the user may not notice the additional window in a new tab.

    The display (and closure) of the new window may be a bit confusing on a cell phone web browser. This demo could be altered to make it less confusing.

  • windowOpenAndClose_demo.js
    View code

  • addEvent.js
    View code

  • appearance.css
    View code

End of this List of Javacript examples.

Brief background on JavaScript programming :

For a basic introduction to the JavaScript language, try the Wikipedia page on JavaScript.

You may find it helpful to follow some links on Wikipedia pages.

For some introductory details on JavaScript document-object-oriented commands (that is, for details on objects and properties and methods), here are a few links :

Be aware that these offer mostly 'snippets' rather than 'complete' HTML-plus-JavaScript examples.

You can find more such JavaScript programming details by doing a web search on the 'strings' :

OR

JavaScript programming tutorials :

There are quite a few web sites that provide tutorials for JavaScript programming. Unfortunately, many such sites go dead quite rapidly. And most offer 'snippets' rather than 'complete' HTML-plus-JavaScript examples.

Here are a few links to some tutorials :

If these links go dead, you can do a web search on the 'strings' :

Web Searches for JavaScript Script-Code :

Since many 'complete' JavaScripts include the HTML tags <html> and <head> and <title> and <body ...> and <script ... >, one way to find 'complete' code samples involving JavaScript is to do web searches on keyword strings such as

This search may not find code samples so much as questions-and-answers on JavaScript code.

Alternatively, you could try a web search on keyword strings such as

Forums:

Another handy source of help and code samples for JavaScript programming is forums, such as

To find more forums, you could try doing a web search on the 'strings' :

Books:

One of the best introductory books on JavaScript programming that I have ever found is a 'Visual Quick Start Guide' book (first edition, 1997) titled 'JavaScript for the World Wide Web' by Ted Gesing and Jeremy Schnieder.

    That book has been updated with newer editions by other authors.

Some of the examples in that book that correspond to what I wanted to do in an initial project (involving zooming in/out on image tiles for maps) were:

  • Putting your script in a separate file
  • Writing text and HTML from a script
  • Inserting comments in a script
  • Displaying a confirm dialog box
  • Combining strings of text
  • Defining a function
  • Triggering functions with links   (*I have seldom found this in other books.*)
  • Testing multiple conditions
  • Counting with a 'for' loop
  • Converting strings to integers
  • Performing mathematical operations
  • Rounding numbers
  • Writing to a window

Even though that book was written in 1997, it provides a good introduction. Many of the main features of the JavaScript language were available in 1997.

A voluminuous (more than 1,000 pages) book --- that contains even better 'complete' HTML-plus-JavaScript examples --- is the book 'JavaScript Bible' by Danny Goodman. The 6th edition came out in 1997 and the 7th edition in 2010.

Parts 1 and 2 of this book (about 250 pages) are a 'tutorial'. Many good introductory examples are in these parts, but there are also useful examples in the 'object reference' parts of the book.

For more information on this book, you could try doing a web search on the 'strings' :

To find more books, you could try doing a web search on the 'strings' :

MOTIVATION FOR THIS PAGE :

A main reason that I started this page is to gather JavaScript information for a map-navigation web page project.

In this project, it seemed advisable to have a set of navigation options on, say, the left side of the window (about 20% of the window) and a map (a rectangular array of square image tiles) on the right side of the window (about 80% of the window).

A main question for me was how to implment that partition of the window into two parts --- with the requirment that I be able to load a generated HTML code file (a map) into one of the two partitions.

    The HTML for the navigation side (the left side) is to be populated with several groups of radiobuttons when the page is first loaded.

    The HTML for the map side (the right side) is to be re-created, after an intial map rendering, each time the user clicks on a tile on the map side --- and according to the setting of the radiobuttons on the navigation side.

I have done a lot of Tcl-Tk programming to create desktop GUI's. In the Tk language for making GUI's, there is a Tk 'frame' element that is useful for partitioning a GUI window into a variety of sections. Some quite complex sectioning of a window can be achieved, by supplying 'side', 'anchor', 'fill', and 'expand' parameters to the 'frame' elements. Those parameters are used by a 'pack' 'geometry manager' that assembles the frames in the window.

So I was hoping that there is a similar 'frame' capability in HTML. After some reading, I found that there are (in 2018) basically two types of frame capabilities in HTML :

  • a 'frameset' element that can contain multiple 'frame' elements

  • an 'iframe' element, for putting a frame 'in-line' in HTML

The 'frameset' element essentially replaces the 'body' element --- and then two (or more) separate HTML pages (that contain 'body' elements) are loaded into the 'frame' elements.

It turns out that the 'frameset' approach causes various difficulties --- and as a result, the 'frameset' and 'frame' elements are being dropped from the HTML5 specification --- but the 'iframe' element is being retained.

There are a couple of other ways that I could break the window up into two sides --- with 'div' elements or with 'table/tr/td' elements.

For now, I think I will try the 'iframe' approach.

I found a web page (at stackoverflow.com) that points out the frameset-HTML5 issue and provides some example code to implement a 'menu' on the left of the window and the 'main content' on the right --- using two 'iframe' elements, instead of a 'frameset': 


<html>
<head>
  <title>Frames Test</title>
  <style>
   .menu {
      float:left;
      width:20%;
      height:80%;
    }
    .mainContent {
      float:left;
      width:75%;
      height:80%;
    }
  </style>
</head>
<body>
  <iframe class="menu" src="menu.html"></iframe>
  <iframe class="mainContent" src="events.html"></iframe>
</body>
</html>

Note that the role of the 'side,anchor,fill,expand' parameters for 'frame' elements in Tcl-Tk is apparently provided (to a great extent) by the 'style' CSS language.

My plan is to provide a 'nav-controls.html' file for the left side and a set of JavaScripts that build the contents of a 'map.html' file that is to be rendered in the right side in response to certain click events on locations in the right side.

    I will need to pass several (integer) parameters to the 'map.html' file. I was wondering if the 'iframe' element would allow that. I found this stackoverflow.com page that points out that it is possible.

    I could use some JavaScript code like the following to extract the parameters from the complete URL-with-parameters passed to the 'iframe'. If the URL-with-parameters were of the form:

    map.html?param1=value1&param2=value2

    then the following code could return the value for a specified parameter name. 

    
<script>
function getParamValue(paramName)
{
    var url = window.location.search.substring(1);
    //get rid of "?" in querystring
    var qArray = url.split('&'); //get key-value pairs
    for (var i = 0; i < qArray.length; i++) 
    {
        var pArr = qArray[i].split('=');
        //split key and value
        if (pArr[0] == paramName) 
            return pArr[1]; //return value
    }
}
</script>

    But, instead of extracting one parameter at a time, I will probably extract the several parameters in one 'getIntegerParameters' function.

    AND ... I will probably use positional parameters (separated by ampersands or some other separator like slash or vertical-bar) --- rather than the 'param=whatever' parameter-passing method.

If I get that map application working, I will provide a link to an implementation of that code right here (if/when I remember to).

Tcl-Tk versus JavaScript

I feel compelled to add here that Tcl-Tk seems to be a much 'cleaner' language than JavaScript. JavaScript would have benefited from the input of John Ousterhout, the chief architect of the Tcl-Tk language.

One example of what I mean by 'cleaner' :
For radiobuttons in Tcl-Tk, a group of related radiobuttons are assigned a variable to hold a value for the selected radiobutton. In JavaScript (circa 2018), one must execute a loop each time one wants to determine the currently selected radiobutton. In Tcl-Tk, one simply uses the current value of the radiobutton variable.

Another example:
There is often a confusing number of choices to be made in JavaScript to implement a given feature. For example, one can partition a window in quite a number of ways: with 'div' or 'table,tr,td' or 'iframe' or 'p' block elements. In Tcl-Tk, the main method is with 'frame' elements.

The fact that a web page developer is dealing with 3 languages (HTML, JavaScript, CSS) --- and their underlying interpreters --- implemented differently in different web browsers --- with varying versions of HTML, JavaScript, CSS and web browsers over the years --- makes for a vast number of combinations of language elements (supported, partially-supported, deprecated, and abandoned) to be considered for the implementation of any particular aspect of an HTML-JS-CSS application.

This 'too many options' situation is probably a sign that JavaScript (and HTML and CSS) has been developed by committees with a large number of participants, with a wide variety of opinions and prejudices. With Tcl-Tk, the committee has been much smaller --- and Tcl-Tk benefited from the excellent language design choices made by Ousterhout in the early years.

In contrast to the 'clean lines' of Tcl-Tk, JavaScript (and CSS and HTML) are a mish-mash of deprecated and duplicative elements. It's amazing that the HTML-JS-CSS combination works as well as it does --- to the point that JavaScript has essentially supplanted Java (and some other languages) as the main language used for most 'dynamic' web page programming --- at least on the 'client-side'.

JavaScript or Javascript   (a spelling choice)

I close by pointing out that I like to use the 'camel-style' spelling . . . 'JavaScript' rather than 'Javascript', which is seen sometimes.

This is chiefly because, when JavaScript was originally invented by folks at Netscape, it was called 'LiveScript'. Some marketing person decided to change the name to 'Javascript' (or JavaScript) because the compiled-language 'Java' (quite different from the JavaScript language; more like 'C++') was getting popular at the time.

I think they should go back to the name 'LiveScript'. Since no one would know what I was talking about if I used the name 'LiveScript', I compromise by tending to use the camel-back spelling . . . 'JavaScript'.

Bottom of this page of
JavaScript Examples
('complete' HTML-plus-JavaScript samples).

To return to a previously visited web page location, use the Back button of your web browser a sufficient number of times. OR, use the History-list option of your web browser.
OR ...

< Go to Table of Contents, above. >

< Go to Top of Page, above. >

Or scroll to the top of this page.

Page was started 2018 Jun 17.

Page was 'released' 2018 Jun 30.

Page was changed 2018 Jul 03. (Added an 'apprearance.css' file to adjust font sizes for small, cell-phone devices. Added some centering code to some of the html demo files. Added info on passing parameters to 'iframe' elements.)

Page was changed 2018 Nov 05. (Added 'central, site' css and javascript files to try to handle text-size for smartphones, esp. in portrait orientation.)