Lesson 1 : A Simple Program

Overview

In this JavaScript video tutorial, we demonstrate how to set up, code, and run a simple JavaScript program. For this lesson, you will need a browser and text editor. On Windows machines, the Internet Explorer browser and the Notepad text editor are installed by default.

Download Code

To begin, open up your text editor. For this tutorial, I will use Notepad, but any text editor will work.
1. For Windows 7 and earlier, left-click the "Start" button. Next, left-click "All Programs" in the Start menu. Then, left-click the "Assessories" folder and finally left-click "Notepad" to start it.
2. For Windows 8, move your cursor to the upper right-hand corner, and then left-click the "Search" icon in the slide-out menu. On the Search page, you can find "Notepad" under Assessories and left-click it to begin.

After Notepad opens, you should see a blank window. Left-click inside the pane and enter this text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="Lesson1.js"></script>
</body>
</html>

This is HTML. Once the text is entered, left-click "File" in the menubar and left-click "Save As..." in the submenu. Then you should see this dialog box.
To save the file, left-click the text box next to "File name:" and enter Lesson1.html. Then left-click the "Save" button to save the text file.
Next, we close this file and open a new one. To do this, left-click "File" in the menubar and "New" in the submenu.
Now there is a new window open. Left-click inside it and enter this text.
```
document.write("God is Love");
```
Save this file as "Lesson1.js" by left-clicking "File" in the menubar and then "Save As..." in the menubar to open the Save As dialog. Make sure that you are saving the this file in the same location as the previous HTML file. Then left-click the text box next to "File name:" and enter Lesson1.js. Finish by left-clicking the "Save" button to save the file.
The entire JavaScript program is contained in one line of code. To run it, open the folder where the files "Lesson.html" and "Lesson1.js" are located and double-click the "Lesson1.html" file. You should see this in your default browser.

In this lesson, we demonstrated how to create two text files for our first JavaScript program. The code for these files is listed below under the respective filenames.

Lesson1.html

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="Lesson1.js"></script>
</body>
</html>

Lesson1.js

document.write("God is Love");