» Resources » Web Development » JavaScript

Contents<<>>

JavaScript (ECMAScript)

This section provides JavaScript resources which you will hopefully find useful. Over time, we hope to turn this section into a comprehensive reference for both beginners and experts. We are trying to provide working solutions for professional applications. The scripts and code snippets in this section are taken from real projects. Links to external websites are hand-picked and we only recommend literature which we frequently use ourselves.

Last Change

JavaScript Application: Print Current Page/Document

29/10/2008

JavaScript Application: Add a Page/URL to Internet Explorer Favorites (IE4)

29/10/2008

JavaScript Application: Set Internet Explorer Homepage (IE5)

29/10/2008

JavaScript Application: Email a Page/Link to a Friend

29/10/2008

JavaScript Application: Display Web-safe Colors

29/10/2008

JavaScript Application: MIDI Player

29/10/2008

JavaScript Method AddFavorite (IE4)

29/10/2008

JavaScript Method print

29/10/2008

JavaScript Method setHomePage (IE5)

29/10/2008

The JavaScript print() function can be used to print the currently loaded web document, exactly as if the user had activated the browser's Print function:

print();

The print() function can be used to provide a link:

<a href="javascript:print();">Print this Page</a>

Working example:

Print this Page

The AddFavorite() JavaScript function can be used in Internet Explorer (version 4 or higher) to add a web address (with a title) to the Internet Explorer favorites. AddFavorite() activates the Add to Favorites... function from the Internet Explorer Favorites menu with the given parameters.

The following AddFavorite() call can be used to add the BME website address with its title to the Internet Explorer favorites:

window.external.AddFavorite(
    'http://www.bme.ie',
    'BME - Baumeister Mediasoft Engineering'
    );

The following AddFavorite() call can be used to add the currently loaded page to the Internet Explorer favorites:

window.external.AddFavorite(location.href, document.title);

A web browser compatibility check such as

if (window.external)
{
   window.external.AddFavorite(location.href, document.title);
}

is recommended since AddFavorite() is only available in Internet Explorer (version 4 or higher).

onclick() can be used to provide a clickable link to the AddFavorite() function call. The following JavaScript code displays a link for adding the currently loaded page to the Internet Explorer favorites:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (window.external)
{
    document.write(
        '<a href="#"'
        + ' onclick="window.external.AddFavorite(location.href,document.title);">'
        + 'Add this Page to your Favorites...</a>'
        );
}
//--><!]]>
</script>


The setHomePage() JavaScript function uses a DHTML behavior in Internet Explorer (version 5 or higher) to set the user's Homepage. setHomePage() can be applied to objects with the following style attribute:

behavior:url(#default#homepage)

setHomePage() expects a web address as argument. The following setHomePage() call uses the BME website address:

this.setHomePage('http://www.bme.ie')

The following JavaScript statements can be used to set the Homepage address to the URL of the currently loaded web page:

this.style.behavior='url(#default#homepage)';
this.setHomePage(location.href);

A web browser compatibility check such as

if (window.external)
{
    this.style.behavior='url(#default#homepage)';
    this.setHomePage(location.href);
}

is recommended since setHomePage() is only available in Internet Explorer (version 5 or higher).

onclick() can be used to provide a clickable link to the setHomePage() function call. The following JavaScript code displays a link for setting the Homepage address to the URL of the currently loaded web page. The required behaviour attribute is assigned through a style attribute within the span tag:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (window.external)
{
    document.write(
       '<span style="color:blue;cursor:hand;behavior:url(#default#homepage);"'
       + ' onclick="this.setHomePage(location.href);">'
       + 'Make this Page your Homepage...'
       + '</span>'
       );
}
//--><!]]>
</script>


For security reasons, setHomePage() causes Internet Explorer to activate a confirmation dialog for changing the Homepage setting.

It's quite simple to display an Email link for sending a page or a link to someone else:

<a href="mailto:?subject=Web Address&body=This might interest you: http://www.bme.ie">Send BME Web Address to a Friend</a>

The mailto: protocol is used. This simply starts the user's Email client program with the given parameters for the Email subject and the Email body. Since there is no web address for the recipient specified between mailto: and ?, the user can fill this in (e.g., with some address from her/his address book).

The following JavaScript code takes this a bit further:

var sSubject = 'Interesting Web Page';
var sBody    = 'Hi,\\n\\nthis might interest you:\\n' + location.href;
var sDisplay = 'Send this Page to a Friend';
document.write(
    '<a href="mailto:'
    + '?subject=' + escape(sSubject)
    + '&body=' + escape(sBody)
    + '">' + sDisplay + '</a>'
    );


In the code above, the sSubject (subject) and sBody (body) variables/parameters are encoded with the escape function to allow for special characters such as newlines to be used without problems.

Working examples:

Send BME Website Link to a Friend

Web-safe color codes include the following RGB values:

• 0x00
• 0x33
• 0x66
• 0x99
• 0xCC
• 0xFF

The following JavaScript generates a table for displaying the websafe colors:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
// Color code table
c = new Array('00', '33', '66', '99', 'cc', 'ff');
// Start color table
t = '<table border="1" cellpadding="6" style="border-collapse:collapse;">';
// Iterate red color
for (r = 0; r < 6; r++)
{
    // Iterate green color
    for (g = 0; g < 6; g++)
    {
        // Start color table row
        t += '<tr>';
        // Iterate blue color
        for (b = 0; b < 6; b++)
        {
            // Get RGB (background) color code
            L = '#' + c[r] + c[g] + c[b];
            // Get alternative/tooltip text
            A = L + ' = RGB('
                + parseInt('0x' + c[r]) + ', '
                + parseInt('0x' + c[g]) + ', '
                + parseInt('0x' + c[b]) + ')'
                ;
            // Get "inverted" RGB (foreground) color code
            F = '#' + c[5 - r] + c[5 - g] + c[5 - b];
            // Color table cell
            t += '<td align="center"'
                + ' style="'
                + 'background-color:' + L + ';'
                + 'color:' + F + ';'
                + 'font-family:Courier New;'
                + 'cursor:hand;'
                + '"'
                + ' title="' + A + '"'
                + ' onclick="alert(\'' + A + '\');"'
                + ' onmouseover="window.status=\'' + A + '\';"'
                + ' onmouseout="window.status=\' \';"'
                + '>' + L + '</td>'
                ;
        }
        // End color table row
        t += '</tr>';
    }
}
// Display color table
document.write(t + '</table>');
//--><!]]>
</script>


Output/Display

The following JavaScript statement loads the MIDI file tune.mid to the default user system application for processing and/or playing MIDI files:

location.href='tune.mid';

This statement can easily be used in a hypertext link:

<a href="javascript:location.href='tune.mid';">Play MIDI Tune</a>

The following example provides a form with a button for activating the same statement through onclick():

<form>
<input
    type="button"
    value="Play MIDI Tune"
    onclick="location.href='tune.mid';" />
</form>

Working example:

Thanks to Suzanne Rhatigan for preparing this little tune.

The AddFavorite() JavaScript function can be used in Internet Explorer (version 4 or higher) to add a web address (with a title) to the Internet Explorer favorites. AddFavorite() activates the Add to Favorites... function from the Internet Explorer Favorites menu with the given parameters.

The following AddFavorite() call can be used to add the BME website address with its title to the Internet Explorer favorites:

window.external.AddFavorite(
    'http://www.bme.ie',
    'BME - Baumeister Mediasoft Engineering'
    );

The following AddFavorite() call can be used to add the currently loaded page to the Internet Explorer favorites:

window.external.AddFavorite(location.href, document.title);

A web browser compatibility check such as

if (window.external)
{
   window.external.AddFavorite(location.href, document.title);
}

is recommended since AddFavorite() is only available in Internet Explorer (version 4 or higher).

onclick() can be used to provide a clickable link to the AddFavorite() function call. The following JavaScript code displays a link for adding the currently loaded page to the Internet Explorer favorites:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (window.external)
{
    document.write(
        '<a href="#"'
        + ' onclick="window.external.AddFavorite(location.href,document.title);">'
        + 'Add this Page to your Favorites...</a>'
        );
}
//--><!]]>
</script>


The JavaScript print() function can be used to print the currently loaded web document, exactly as if the user had activated the browser's Print function:

print();

The print() function can be used to provide a link:

<a href="javascript:print();">Print this Page</a>

Working example:

Print this Page

The setHomePage() JavaScript function uses a DHTML behavior in Internet Explorer (version 5 or higher) to set the user's Homepage. setHomePage() can be applied to objects with the following style attribute:

behavior:url(#default#homepage)

setHomePage() expects a web address as argument. The following setHomePage() call uses the BME website address:

this.setHomePage('http://www.bme.ie')

The following JavaScript statements can be used to set the Homepage address to the URL of the currently loaded web page:

this.style.behavior='url(#default#homepage)';
this.setHomePage(location.href);

A web browser compatibility check such as

if (window.external)
{
    this.style.behavior='url(#default#homepage)';
    this.setHomePage(location.href);
}

is recommended since setHomePage() is only available in Internet Explorer (version 5 or higher).

onclick() can be used to provide a clickable link to the setHomePage() function call. The following JavaScript code displays a link for setting the Homepage address to the URL of the currently loaded web page. The required behaviour attribute is assigned through a style attribute within the span tag:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (window.external)
{
    document.write(
       '<span style="color:blue;cursor:hand;behavior:url(#default#homepage);"'
       + ' onclick="this.setHomePage(location.href);">'
       + 'Make this Page your Homepage...'
       + '</span>'
       );
}
//--><!]]>
</script>


For security reasons, setHomePage() causes Internet Explorer to activate a confirmation dialog for changing the Homepage setting.

The literature listed in this section is hand-picked. We only recommend books which we frequently use ourselves. You can use the Amazon links provided for online ordering if you are interested in purchasing any of the books. Simply chose the link to the Amazon website closest to you. Amazon.co.uk is located in the United Kingdom, Amazon.com is located in the United States, and Amazon.de is located in Germany.

Recommended reading on JavaScript (ECMAScript):

JavaScript for the World Wide Web (Visual QuickStart Guide) Language: English Authors: Tom Negrino, Dori Smith Publisher: Peachpit Press Published: October 2001 ISBN: 0201735172 Paperback - 445 Pages Order this book from Amazon.co.uk Order this book from Amazon.com Order this book from Amazon.de

» Resources » Web Development » JavaScript

^Contents<>>

JavaScript (ECMAScript) • © 2017 Manfred Baumeister • Updated: 01 October 2011, 13:27 [UTC]