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.
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.
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>
Exiting code block
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");
Exiting code block
Step 2. Save programming_basics.html.
Step 3. Switch back to the browser that has programming_basics.html open.
Step 4. If necessary, open the browser's Console window.
Step 5. To refresh the page in the browser, press:
F5 key