What is JavaScript

We have learned how to make static web pages using HTML. HTML tags tell a browser how to format a page. Center this. Put a picture here. Arrange this as a table. etc. But HTML is static. If you want your web page to page to do something, then you need to tell the browser what actions it is supposed to take.

JavaScript is a programming language to make a browser perform simple operations. JavaScript can tell your browser to do something every few seconds. JavaScript can tell your browser to react to the location of the mouse. JavaScript can look at cookie files and use that information to tailor the content of your web page. JavaScript can even look at your browsing history.

It is important to remember that JavaScript commands run on your machine inside your browser. The commands are not running on the web server machine. Running commands on your machine that your browser retrieved from a web site can be good, but can also be dangerous. You can set your browser to not run any JavaScript commands. But because JavaScript is used in nearly all web sites, turning off JavaScript means most sites will not work properly. Our purpose in covering JavaScript in CSCI 101 is for you to understand what your browser is capable of doing while you are surfing the web.

JavaScript commands are mixed in with HTML tags. Simple JavaScript commands go inside HTML tags. More complex commands to be run by the browser go inside the body between <script> and </script> tags. Commands can also be grouped together as a "function" and placed in the head section.

In-line JavaScript

As you know from class, a simple anchor looks like this:
    <a href="bob.htm"> link to bob </a>
We can change the appearence of that anchor with a style tag like this:
    <a href="bob.htm" style="color:red"> link to bob </a>
We can also add JavaScript commands inside the tag to tell the browser to react when the user puts their mouse over this link:
    <a href="bob.htm" onmouseover="alert('Hello')"> link to bob </a>
The "onmouseover" is an event that your browser can react to. "alert" is a built-in JavaScript function that causes a box to popup with a message. Note that this is a very silly thing to make an anchor do, but it is a really simple example of JavaScript.

JavaScript in the Body, but outside an HTML Tag

Here is an example of some JavaScript that is not part of an HTML tag. These three lines could go anywhere in the <Body>.
    <script>
    document.write(Date());
    </script>
The "document.write" command will write anything you want into the body. You could do something really simple like document.write("Hello"), but that always writes the same thing. The "Date()" function tells the browser to find out the current date and time. So, write(Date()) prints something different every time the page is loaded by the browser.

JavaScript Functions

A function is simply a group of commands. Some functions, like Date(), are built into every browser. The parentheses indicate information you want the function to use. For example, these red () indicate that the write function is supposed to use the Date. The green () indicate that Date does not need any extra information.
document.write( Date());

You can create your own functions inside the <Head> section. For example,
    <SCRIPT>
    function change_image() {document.changing_pic.src = "new_pic.jpg";}
    </SCRIPT>
This JavaScript code creates a new function named "change_image" which will look inside the <Body> and find an <img> named "changing_pic" and then reset the source of that <img> to "new_pic.jpg. In other words, that function makes a picture change. An HTML tag inside the <Body> could trigger our function to change the picture.

The JavaScript language has a syntax, just like English has a syntax. In JavaScript functions the brackets, { and }, mark the start and end of your function. The semicolons, ;, mark the end of each instruction. This example function contains just one instruction, but a function could have lots of instructions.

More Information

The w3schools web site has lots of good examples of JavaScript.