Javascript Tutorial

Javascript - Intro
Javascript - Syntax
Javascript - Location
Javascript - External
Javascript - Operators
Javascript - Variables
Javascript - Functions
Javascript - Events
Javascript - Statements
Javascript - If
Javascript - Else If
Javascript - While
Javascript - For Loop
Javascript - Comments
Javascript - Array
Javascript - Alert
Javascript - Confirm
Javascript - Prompt
Javascript - Print
Javascript - Redirect
Javascript - Pop Up
Javascript - Date
Javascript - Form
Javascript - Void 0

Javascript String

Javascript - Strings
Javascript - Length
Javascript - Split
Javascript - Search
Javascript - Replace
Javascript - indexOf
Javascript - Compare

Javascript Advanced

Javascript - getElementById
Javascript - innerHTML

Javascript Functions

If you have any programming experience, then you do not need to spend much time on this lesson. Functions in Javascript behave similar to numerous programming languages (C, C++, PHP, etc). If this is your first time learning about functions, then be sure to go through this lesson very thoroughly as a solid understanding of functions will make the rest of this tutorial much easier to follow.

What's a Function?

A function is a piece of code that sits dormant until it is referenced or called upon to do its "function". In addition to controllable execution, functions are also a great time saver for doing repeatable tasks.

Instead of having to type out the code every time you want something done, you can simply call the function multiple times to get the same effect. This benefit is also known as "code reusability".

Example Function in Javascript

A function does not execute when the page loads and so it should be placed inside the head of your HTML document. Creating a function is really quite easy, all you have to do is tell the browser you're making a function, give the function a name, and then write the Javascript like normal. Below is the example alert function from the previous lesson.

HTML & Javascript Code:

<html>
<head>
<script type="text/javascript">
<!--
function popup() {
    alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="popup">
</body>
</html>

Display:

We first told the browser we were going to be using a function by typing "function". Next, we gave our function a name, so that we could use it later. Since we are making a pop up alert, we called our function "popup".

The curly braces "{,}" define the boundaries of our function code. All popup function code must be contained within the curly braces.

Something that might be slightly confusing is that within our "popup" function we use another function called "alert" which brings up a popup box with the text that we supply it. It is perfectly OK to use functions within functions, like we have done here. Furthermore, this is one of the great things about using functions!

What we didn't talk about was how we got this function to execute when the button is clicked. The click is called an event, and we will be talking about how to make functions execute from various types of events in the next lesson.

Writing Your Own Function

You can also make your own functions to be used on your webpage. If you would like to write your own function then you must use the special keyword function