JavaScript 101: Your First Script (Part 3)

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.

About russell

Web Developer I’m a web developer with 3 years’ experience in the media industry. My Development skills includes flash, AS3, AS2, HTML, CSS, JavaScript, Jquery, XML, PHP, and MySQL. I have a great deal of experience developing interactive user interfaces in PHP Javascript AS3 AS2 I have two masters degrees in Computer Science and Multi Media and before my current role I completed a year of research at De Montfort University researching multi touch technology. during this time I developed several multi touch applications for entertainment spaces.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>