logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Creating Your First Javascript Function

Guest Author - Elizabeth Connick

Ready to add a little action to your site? Javascript is a great place to start. Because it's a scripting tool rather than a programming language in itself, it's quite a bit easier to learn – think of it as "programming lite."

If you are new to Javascript you might want to start with the Javascript Basics article, which explains the formatting requirements for all Javascript programs. In essence, a Javascript program looks like this:

<script type="text/javascript">
<!--
Code goes here…
//-->
</script>

Functions are the building blocks of Javascript programs. A function is a section of code that will run when called, either if a predetermined event takes place (say, a visitor types something into a text box) or if another function calls it. A complicated Javascript program might have dozens of functions that work together to create the desired result. One common example is a drop-down navigation menu. The program powering a site's navigation might have one function that pre-loads the menu's images, another that causes the drop-down menu to appear when the mouse hovers over the menu title, and a third that controls the individual images' rollover effects (such as swapping to a darker-colored image when the mouse cursor rolls over that item). Using different functions to create these effects makes it much easier for the programmer (you!) to locate any bugs, and also saves time in the long run by allowing you to re-use functions in other programs.

Let's begin by crafting a program that will pop up a message when your visitors click a button. For this one-function program you'll make use of the alert command, which pops up an alert box when executed. Place this code in the head of your HTML page:

<script type="text/javascript">
<!--
function helloworld()
{
alert("Hello World!");
}
//-->
</script>

Like all functions, this one has a name ("helloworld") followed by the bulk of the function inside curly brackets {}.

Any Javascript functions placed in the head of an HTML document don't run right away, unlike functions in the body of the page. In order to execute helloworld, you'll need to call it – or in this case, have your visitors call it – by including the following HTML in the body of your page:

<input type="button" value="Click me!" onclick="helloworld()" >

Here we've used the onclick event handler to activate the function. Javascript has several event handlers that you can use to call functions when certain events happen; the onclick handler, not surprisingly, will run a function when a visitor clicks on the button.
This site needs an editor - click to learn more!

Add Creating+Your+First+Javascript+Function to Twitter Add Creating+Your+First+Javascript+Function to Facebook Add Creating+Your+First+Javascript+Function to MySpace Add Creating+Your+First+Javascript+Function to Del.icio.us Digg Creating+Your+First+Javascript+Function Add Creating+Your+First+Javascript+Function to Yahoo My Web Add Creating+Your+First+Javascript+Function to Google Bookmarks Add Creating+Your+First+Javascript+Function to Stumbleupon Add Creating+Your+First+Javascript+Function to Reddit




Javascript Basics
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor