Click on a tag to jump to its section:
Inline |
A word on functions |
Internal (user created) functions |
External JavaScript (.js) files |
Final word on functions
I should begin with this: This is not a tutorial on how to program JavaScript. That is well outside the scope of this site. This page, rather, is a basic explanation of how to "connect" JavaScript to an HTML page.
Using the definition from Wikipedia: "JavaScript (sometimes abbreviated JS) is a programming language that is widely used to give sophisticated functionality to web pages." An important note should be made here; JavaScript is not the same as Java. The language's syntax was/is influenced by C.
If you really want to play around with JavaScript do a few Google searches for code. Play around with it and see what happens. You may not get the gist of it right away, but with a little practice it'll come to you! That's how I learned how to do quite a lot of this.
Like CSS, JavaScript can be placed inline with the HTML, in the web page's <header> section, or in an external file. One of the biggest uses of JavaScript is to perform some action or another based upon an event -- like a user clicking a button. Regardless of how a piece of JavaScript code is executed, there will be a <script> tag associated with in in the HTML file someplace.
There are a few attributes that can be used with the <script> tag, including the type="" attribute, which defines the scripting language. In HTML5, though, the type="javascript" attribute is no longer required as JavaScript is the default.
One simple example of using JavaScript is the document.write() function. (There are many, no -- MANY functions built into JavaScript!) Using it inline is as simple as this:
{lots of HTML coding}
{continue HTML coding}
Note that the document.write() function does put paragraph breaks into the HTML page on its own. You'll have to take care of that yourself. This is because all document.write() is doing is spitting out whatever appears between the quotation marks.
You may be thinking, "what good is that when I could have simply used a paragraph tag?" Well, one answer is that maybe you wanted to be fancy. A better answer is that you wouldn't. Although I'm sure there are times where inline JavaScript coding would be preferable (perhaps for very small pieces of code to be used just once), there are better ways -- particularly when you take into account when you want this programming laguage to do more than just print to the screen.
In the context that I'm going to use it here, a function is a series of JavaScipt programming statements that are executed, in sequence unless otherwise instructed, to perform a partucular task.
Consider this. . . In our previous example document.write() was used inline to do one thing -- print some text to the screen. But what if the text to be printed to the screen was dependent on some condition? The previous example had no way to test for a condition. With a function, since it is a series of programming statements which performs a task, you can accomplish this. Consider this human way (known as "pseudocode") of making a decision, or choice, which in programming terms would be called a "conditional branch":
To do this in JavaScript, you'd use a function, which may look like this:
[Yes, I made up the getMonitorState() function -- keep in mind that this is just for explanatory purposes... But now that we have a function to play with, let's do so.]
What if our function is very long and complicated and/or we want to use the same function many times throughout the HTML page? We move on to...
Just a small clarification here: I call then "user created" to differentiate them from the built-in functions that come with JavaScript.
To use our sparkling new checkState() function in our HTML code, within our HTML page, we must first place it into the page's <header> section, like this:
Now that that's done, we can "call" the JavaScript function from with our HTML code whenever we'd like. This is usually done with an "event" (like a button press), but can be done without one.
Calling the function with no event (with the <body> of the HTML page):
Calling the function with an event, in this case a button press (clicking this button won't do anyting):
If this were functional, pressing the button would cause the checkState() function to be executed via the event handler called onClick.
You can, and probably will, have multiple functions defined in the head section for a couple of reasons: (1) you may want different functions being called from within the <body> of the HTML page to perform different tasks, or (2) one function calls one or more other functions to perform many tasks -- useful for modular design.
One last word for this section; you'll notice that I added a return; in the last code snippet, before the closing }. This is good practice -- it prevents the code from "falling through" to any other code, which can cause unexpected results.
Over time, you may end up with a lot of functions in the <head> section of your HTML page. This can make things unwieldy and hard to manage over time. Additionally, when you get a lot of functions and/or functions with a lot of statements, it can lead to a condition where things just don't work as intended. For an example of this, click the "Link to the original web page for this assignment." link below -- you'll see that it doesn't work correctly. What's interesting is that that assignment works just fine locally but it does not when placed onto the server.
The answer, then, is to place the JavaScript functions into an external file, by convention named: {filename}.js -- just like we did with the CSS file. It, too, is a two-step process (three, really). Continuing to use the function we've been playing with, these are the steps:
STEP 1 - place the function into its own file. To do that, just open a simple text editor like Notepad or Notepad++ and create your function, then save the file in the same directory as the HTML page and remember what you called it. Notice the lack of any <script> tags. Let's call this file example.js:
STEP 2 - Now reference the external file that you created in Step 1 (example.js) in the head section of the HTML page:
Notice that I did not use a simple <script> tag here, I included the attribute type="text/javascript" as well as the attribute that references the .js file (src="example.js"). I think this is still probably best practice -- especially for web browsers that do not support HTML5 yet.
STEP 3 - Now, call the function from within the <body> of your HTML page:
JavaScript functions can add a huge amount of processing power to your HTML page, processing that otherwise couldn't take place. (To be fair, there are many other languages that can be used as well, such as; PHP, Perl, AJAX, Ruby on Rails, and more.) There are a few other things I wish to mention about JavaScript functions.
Functions can have variables passed to them. Suppose we take the example we've been working with and pass information to it from the HTML code. It could then be changed to look like this:
HTML code:
Function code:
See what I did there? I asked onClick to go get the state of the monitor from getMonitorState() and send it along to the checkState() function (in my external .js file). Then, in my function, I received the information and placed it into the "state" variable (checkState(state) {). I then check the conditions against "state", as opposed the the old variable of "test" that I used previously.
Not only can you pass data to a function, you can pass data from a function. That's another use of the return statement. Consider:
While this is a somewhat silly example, it does illustrate the point. myFunction() asks myOtherFunction() to test a condition based upon the data sent to it. myOtherFunction() does so and returns the result (return true; or return false; ) to myFunction() which then prints the appropriate result.
One last note about passing information to a function. You can pass just about anything; numbers, letters, etc. However, if you are passing data that is meant to be text (known as a "string"), place the data in double quotes, like:
Oops, sorry, one more last thing (I promise!). You can also pass multiple variables, it can be a mix of string and non-string data, which are by commas. The majority of this site, where I display the code, is used in this fashion. For example, my actual HTML code to call the JavaScript function that displays code snippets looks like this:
So what is this? Firstly I'm executing a non-event driven script, hence the <script> tags. Then I'm calling the CF() function - located in the fp_java.js file. I'm then passing three data fields to the CF() function.
Click on a tag to jump to its section:
Inline |
A word on functions |
Internal (user created) functions |
External JavaScript (.js) files |
Final word on functions