The Basics

Programing is the ability to create complex systems that can do anything, to do this we string together logical operations. It does not matter what programing language we use, all language do essentially the same thing. In our case we will be using JavaScript, a high level object oriented scripting language for web browsers.


First thing is setting up our JavaScript environment, so we can run javascript. To add JavaScript in HTML we simply use the <script> tag, and place JavaScript code inside of it:

<script>  
   My JavaScript Code  
</script>

This is known as internal JavaScript, which is JavaScript within your HTML file. But it's better practice to separate your HTML from your JavaScript (Just like separating CSS from HTML). Below is an example of external JavaScript:

<script src="myExternalScript.js"></script>     

And in our "myExternalScript.js" we would have just our JavaScript. It would be the same thing as the first example but without the <script> tags:

 myExternalScript.js
My JavaScript Code    

Note: "myExternalScript.js" needs to be in the same directory as your HTML file in this example.

Comments are very useful in programing. They are basically ways to make notes in your code to understand what you are doing. It's a good idea to write comments about how you will do something before you write it out in code. There are two types of comments in JavaScript, single-line comments and multi-line comments:

<script>  

   //This is a single line comment, this single line is ignored.

   /*
   This is a Multi-line comment.
   All these lines are between the comment are ignored. 
   They are between the asterisks. 
   */
   
</script>

Hello World is the most basic and simple program that we write when we first start programing in any language. It's just the most basic way we do output. We will be using the alert(string) function for that; we will talk more about functions later. For now just put some text inside the parentheses. For example:

alert("Hello World");     


Another basic way for output is document.write(string). Note that you need to run document.write() before your DOM (Document Object Model) loads, or more generally before your page is done loading. You are writing HTML to the page, so write as if you are writing HTML. Here is an example:

document.write("<p>Hello World</p>");
Note: Running document.write() before the DOM loads will overwrite your current DOM. Erasing everything, so be careful.

document.write() should be used to only write HTML directly into the document, for example; This is the correct way to use document.write():

 HTML File
...
<ul>
<li>Item 1</li>
<li>Item 2</li>
<script> document.write("<li>Item 3</li>"); </script>
</ul>
...
 Output:

  • Item 1
  • Item 2
Note: The semi-colon ; separates statements in our code. In JavaScript statements are automatically separated when you move to a new line. While they are good practice, they are not necessary (unless we will have multiple statements on a single line).

The DOM means Document Object Model. It is just a tree of all your HTML elements. w3schools has a good image of the DOM here to give you a better understanding:

w3schools DOM Tree

We can use this in our JavaScript to access elements from the DOM. In our case we will just be using id. So for example if we had this HTML:

<!DOCTYPE html>
<html>
<head> ... </head>
<body>
...
<p id="myElement">Test</p>
...
</body>
</html>

To get elements by id we use: document.getElementById(string)

We can do alot of things with this, but for now just for HTML output we will be using .innerHTML on our id's. For example:

document.getElementById("myElement").innerHTML = "Hello World";

Test

 

It's good to know where to run your JavaScript while going through your HTML file. Problems can occur if JavaScript is not placed properly, such as trying to change an element that does not exist yet. For example:

 myExternalScript.js
document.getElementById("myElement").innerHTML = "Hello World";
...
<script src="myExternalScript.js"></script>
<p id="myElement">Test</p>
...
Note: We are running the JavaScript before we made the element. So the element we are trying to change does not exist yet.

The basic solution to this problem is placing your JavaScript file at the very end of your <body> tag:

<body>
...
<p id="myElement">Test</p>
...
<script src="myExternalScript.js"></script>
</body>

And this will properly change the element's text into "Hello World". Another way is to use: window.onload

 myExternalScript.js
window.onload=function(){
   document.getElementById("myElement").innerHTML = "Hello World";
}

Now we can place our JavaScript file anywhere we want and it will still wait for the page to be done. Although it is commonly placed inside the <head> tag.

Note: If that first line looks like a bunch of gibberish to you that's fine. Just know that it means we are running that code when the page is done loading. And the code that runs is within these brackets { ... }. Once we get into learning functions many of these things will make much more sense.
Adv Info: window.onload will fire when the entire page loads (images and external files). Another way is document.onload, which fires when the DOM is finished (Images and external files may still be loading though). Generally window.onload is often safer to use, although is a bit slower than document.onload. window.onload is known as the standard for most modern web browsers.

We learned a lot, so I'm going to skim over the important points in this section. All other sections will also have a "Review" at the end.

  • JavaScript can be placed both externally and internally on a web page. (External JavaScript is preferred)
  • Comments are a good way to make notes and think out your logic:
    • // This is a single line comment
    • /* This is a multi-line comment */
  • We talked about 3 ways to write output in JavaScript. alert(string) being the most basic.
    • alert("Hello World");
    • document.write("<p>Hello World</p>");
    • document.getElementById("myElement").innerHTML = "Hello World";
  • Lastly we talked about places to place your JavaScript. Which is recommended and commonly placed:
    • As the last element in the <body> tag.
    • In the <head> tag using window.onload inside the JavaScript file.
Spencer Wieczorek