Starting a Javascript Project

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

The Console has been great at giving us a nice sandbox to test out some basic JavaScript code, but eventually we will have to write code for a web page. We will start setting that up now.

Understanding the Project Files

Our primary project file for today's workshop is programming_basics.html, located in the same directory as the final.html file we opened earlier.

We are going to be starting off with no JavaScript—just HTML and CSS. When we are ready to write JavaScript code for the web page, we will be inserting it directly into programming_basics.html, and not a separate JavaScript file.

However, we do have a separate CSS file called styles.css. This CSS file is linked to the programming_basics.html file with a <link> element in the head of the HTML. We do not plan on adding or changing any CSS code today, but keep in mind that the styles for the page do depend on the CSS file. If you do move the HTML file or upload it to a server, know that you will have to also move the CSS file into the same directory in order for the styles to remain intact.

There are no images or other asset files for today's project. By the end of the workshop, the only two files the project will require are programming_basics.html and styles.css.

Opening the Page in a Browser

In order to preview the changes that we make to programming_basics.html we must open it in a web browser. After we open it, we will keep it open throughout the rest of the workshop. Whenever we make a change in the code, we will simply save the file and reload the web browser window to see the changes.

Step 1. Open programming_basics.html in a web browser.

Our starting page appears. It has three primary content sections:

Wireframe of the page pointing out the major structural elements, body, header, nav, article, and the three sections that contain our slide content.

Each section will represent a separate slide in our slide show. Each section has an <h2> element and some paragraphs. We will continue to investigate the structure of the page later in the workshop.

Right now, neither clicking on the items in the sidebar nor clicking on the Previous and Next Page links do anything.

We want to add interactive navigation to our site. First we have to open the page in a code editor.

Opening the Page in a Code Editor

Let's open the same HTML file in a code editor, so that we can start making some changes to our project.

Step 1. Launch a code editor of your choice.

Step 2. Open programming_basics.html in the code editor.

NOTE: You may need to turn on word wrap or text wrap in your code editor.

You see the HTML code for the starting point of our project.

Scanning through the <head> element from the top of the document, you can see that the doctype indicates this is HTML5, the character set defined for the page is UTF-8, and there is a <link> element which attaches our external style sheet called styles.css.

The <body> of our HTML is primarily a navigation section with a list representing a table of contents, and three <section> elements which each will be considered a slide of our slide show.

We will talk more about the class names involved in the project later.

Inserting JavaScript

To give our web page JavaScript functionality, we can either link to a JavaScript file or write the JavaScript directly in the HTML code.

Today we are going to write our JavaScript code directly in the programming_basics.html file using the <script> element.

Placing the Script Element

To create an embedded CSS style sheet within an HTML file, we create a <style> element. JavaScript works in the same way, but with the <script> element.

The <style> element, however, can be placed most places in an HTML document without any trouble. With the <script> element, we have further considerations.

JavaScript code can only manipulate HTML that has already been loaded. This means that since HTML files are read top-down in the web browser, if the <script> element is in the <head> element, the JavaScript cannot do anything with the HTML in the <body> element, because the browser hasn't gotten to it yet.

Therefore, let's write our <script> element at the end of the <body> in order to ensure that all the HTML content has been loaded before getting to the JavaScript.

Step 1. At the bottom of the document, place the cursor at the blank line right above the closing <body> tag.

Step 2. To create the <script> element, type:

<script>

</script>

We now have a <script> element in which we can write JavaScript code.

NOTE: The <script> element used to require the type attribute with a value of "text/JavaScript", but since JavaScript is the quintessential script run by the browser, it is no longer necessary.

Testing the Script Element

Now that we have a <script> element, we can start writing some JavaScript code to see if it works.

Debugging with the Console

We have already written JavaScript directly in the Console window of the browser. A powerful feature of JavaScript is the ability to send values to the Console from our <script> element. This can be used to see the value of a variable at any given point in the script. This is useful when attempting to debug our code.

Being able to send values to the Console is particularly useful whenever we want to check a value of something in our script without altering the content on the page.

Step 1. To send a message to the Console, within the <script> element, type:

console.log("testing");

The semicolon acts like a period at the end of a JavaScript statement. Every statement must end with a semicolon.

Step 2. Save programming_basics.html.

To see if this works, we must return to our browser window.

Step 3. Switch back to the browser that has programming_basics.html open.

To see the testing message, we have to open the Console window, as we did when we were learning JavaScript syntax earlier in the workshop.

Step 4. If necessary, open the browser's Console window.

Step 5. To refresh the page in the browser, press:

F5 key

You should see "testing" in the Console feed.

The console.log() code worked, but we aren't yet sure how it worked. Let's look at that next.

UITS IT Training Content Library