Skip to content
Science, Maths & Technology
Author:

Your First Program

Updated Tuesday 23rd June 2015

Create your first program using JavaScript.

Your First Program in JavaScript

Keyboard Copyrighted image Icon Copyright: Dreamstime JavaScript, as its name suggests, is a scripting language. This means that programs written in JavaScript cannot be run on their own, but have to be run within some application, such as a web browser. Most high-level programming languages are not scripting languages, and do not require an additional application in which to run; they are simply compiled or interpreted.

JavaScript is also what is known as an interpreted language. A browser such as Mozilla Firefox, which has an embedded JavaScript interpreter, takes your JavaScript statements and interprets them, i.e. it translates them into machine code instructions and executes them instruction by instruction.

In this activity, you will run a program and study its source code.


Activity 1

1. Download the following file and open it using your browser (we recommend Mozilla Firefox for these activities) – activity_1.html

You should see a browser window opening on your screen with the following message:

Welcome to programming!

2. Open activity_1.html using a plaintext editor (such as Notepad or Notepad++) and read the source code – i.e. the instructions that produced the output in part 1 of this activity.
You should see the following:

<HTML>
<HEAD>
<TITLE> Your First Program – Activity 1
</TITLE>
<SCRIPT LANGUAGE = "
JavaScript">
document.write('Welcome to programming!');
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

You might recognise most of these lines as HTML code, telling the browser to open a new window, with 'Your First Program – Activity 1' in the title bar.

The lines
<SCRIPT LANGUAGE = "JavaScript">
and
</SCRIPT>
inform the HTML system that the lines of code between them are not HTML instructions but are written in a scripting language, in this case JavaScript. In fact, if no specific language is specified HTML will assume that the code is JavaScript, so the first of the HTML lines above could be replaced by <SCRIPT>.

There is only one line of JavaScript in this program, the line which reads:

document.write('Welcome to programming!');

All the other lines – those in angle brackets (< and >) – are HTML. We do not intend to teach you any HTML here, other than the lines necessary to display the results of your JavaScript in a browser window.


The line of JavaScript code in activity_1.html is the instruction to display the text

Welcome to programming!

Let us examine it in more detail.

  • document is a kind of program structure called an object. Each type of object in a programming language is associated with particular behaviour (the things it can do). You may think of a document object as consisting of the contents of the current page, which are displayed in a window opened by the browser. Each aspect of an object's behaviour is implemented by program code called a method.
  • write()is a method associated with the document object, which enables JavaScript to add text to the page which your browser will display. The 'dot notation' (as in document.write()) tells the document object to execute the code of its write() method.

  • The parentheses () enclose what is called the argument of the method. It provides information that the method needs to do its job, which, in this case, is the text to be displayed.

Question: What is the argument of the method write() in the program above?

Answer

The argument is 'Welcome to programming!' Note that the text in the program statement must be enclosed in quotation marks. JavaScript will accept either single or double quotes, but here we will be using single quotes.

All the JavaScript programs that you write here will be preceded and followed by similar lines of HTML. The only variation will be in the title to be displayed on the title bar of your browser's current page when the program is run, as in
<TITLE> Whatever you want to appear in the title of the browser's current page
</TITLE>

and, of course, in the JavaScript code, coming between the lines <SCRIPT LANGUAGE = "JavaScript"> and </SCRIPT>.

Because we do not want you to have to repeatedly type the same lines of HTML, we have provided you with template files containing the necessary HTML code for each of the programming activities. If you want to experiment with your own programs, we suggest that you copy and paste the required HTML code into your new program files.


Activity 2

Now we want you to modify the source code of activity_1, and then run the modified program. Open the file activity_2.html in your text editor.

1. Modify the HTML in the file activity_2.html so that the title of the browser page will now read
Your First Program - Activity 2

2. Modify the JavaScript code in the file for activity_2.html so that the program, when run, will display
Welcome to JavaScript programming!

Save the file and open it using your browser to check that your changes work as required.

Help

You should have changed the HTML code specifying the title from
<TITLE> Your First Program </TITLE>
to
<TITLE> Your First Program - Activity 2 
</TITLE>

You should have changed the JavaScript code from 
document.write('Welcome to programming!');
to
document.write('Welcome to JavaScript programming!');

The other lines should be the same as in Activity 1.

If your program doesn't run as you expect, then you've made an error (your program has a bug). Did you remember the quotes? If you get completely stuck, you can download our example to see what your code should look like.

Remember that JavaScript has to be run from within a browser. So the JavaScript code must be contained in a file with suitable HTML code to tell the browser to open a window, as in the example above. Such a file must have .html at the end of its name (have the file extension .html, to use the jargon), so that the computer's operating system knows that it needs to be opened in a browser.

Question: How would you amend the JavaScript code for activity_2.html so that Hello is displayed instead of Welcome to JavaScript programming! when the program is run?

Answer

You would need to replace the existing JavaScript statement with:

document.write('Hello');

Congratulations on writing your first program! Pick your next lesson from the menu below. We recommend 'Variables and Data Types' next.

 

Author

Ratings

Share

Related content (tags)

Copyright information

For further information, take a look at our frequently asked questions which may give you the support you need.

Have a question?