Linking Scripts
The <script> element is used to connect JavaScript to HTML pages. When the browser encounters <script>, it will load and run the code (similar to the way it loads stylesheets for <link rel="stylesheet"> or images for <img>
We will usually write JavaScript code in separate files named something.js. We can link this to a web page like this:
<head>… <script src="first-code.js"></script> </head>
The <script> tag has no contents (the end tag comes immediately after the start tag). This element causes the browser to load the code from the relative URL mycode.js and execute it.
First JavaScript Code
Now that we can tell the browser about a JavaScript file, we should actually write some code. As a first step, here is a line of code that can go in our first-code.js file:
alert('Hello world!')
That one line will run when the browser processes the <script> element. You can have a look at an HTML page with that <script> and see what happens.
As the page loads, the browser runs that one line of JavaScript code, which causes an alert message to appear (before the rest of the page loads, since the <script> element comes before the rest ofthe page). When you click OK, the browser will continue.
In this code, alert is a JavaScript function. A function represents some logic that we can run by calling the function. The alert function is built into JavaScript; we will define functions of our own very soon.
When we mention a function by name with parenthesis after it, we are indicating that we want to call the function. In the parenthesis, we put whatever arguments the function needs to run. In the case of alert, we give it the string (in quotes) that shold be displayed in the alert message.
Try saving these files: the HTML page and the JavaScript. Add another call to the alert function in the .js file and see how the behaviour changes.
Controlling Execution: Functions and Events
We don't really want all of our code to run at the moment the page loads. We want to be able to attach behaviour to things the user does.
In order to do this, we will wrap our code up in a function. That way, we can call the function when we want it to run: like we did with alert before, but with a function we have created.
We can put that line of code (that creates the alert message) in a function like this:
say_hello = function() {
alert('Hello world!')
}
This defines a function named say_hello so we can use it later. Nothing visible to the user happens when the browser loads the code: it just defines the say_hello so we can use it later.
And here is an HTML file that loads and uses this JavaScript code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Page with some JavaScript</title> <link rel="stylesheet" href="style.css" /> <script src="first-event.js"></script> </head> <body> <h1>Page with some JavaScript</h1> <p onclick="say_hello()">This is a paragraph. Click on it.</p> </body> </html>
You can have a look at that HTML page and see how it works: try clicking on the paragraph.
Notice the onclick attribute given to the paragraph. The value there gives JavaScript code that will execute when the user clicks the paragraph. In this case, clicking the paragraph will call the say_hello function (with no arguments). In turn, say_hello will call alert and do something we can actually see.
We will discuss events more (using a different method) in Events and Behaviour. for now: that function is called when the element is clicked.