Today we are going to look at writing your first script for your web design projects. We will start with a simple script which welcomes you to the page. The aim for this tutorial is mainly to get you used to writing an external script, and to use it within your HTML markup.
To start, create your project folder and name it js101; then create yourself a basic HTML page with the following data:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JS 101</title> </head> <body> </body> </html>
Now create a folder called js in your main project folder, and create a blank document saving it as myfirstscript.js.
Copy the below code into the document. This is now your JavaScript document for your web design project.
// JavaScript Document window.onload = function myscript () { alert("Welcome To This Page"); }
Your next step is to import the script into your HTML document, place the following code between the head tags of your HTML page.
<script src="js/myfirstscript.js" language="javascript" type="text/javascript" />
Once you have completed these steps, you are ready to run your first JavaScript project. All you need to do is open the HTML page in a browser and watch your script in action!
The next post will be about creating variables in JavaScript.