JavaScript Beginners Tutorial

A Quick Introduction

JavaScript is an interpreted scripting language, and is readily used in unison with HTML. JavaScript is interpreted by the browser.

JavaScript is Commonly mistaken for Java or Something Java related. Java is a fully fledged Programming Language as opposed to JavaScript Which is an interpreted Programming Language. JavaScript was invented by Brendan Eich and first appeared in 1995, in a browser known as Netscape. Java Was invented by Sun.

About the DOM

Javascript utilizes the DOM. The Document Object Model (DOM) provides a structural representation of the HTML document that is loaded up in the browser and allows Scripts (such as Javascript) to manipulate and change the content and properties of the webpage. Check Out what Mozilla have to Say about the DOM!

JavaScript allows you to create functions, variables and browser based interactions between the web application and the user.

Further Reading

See: here for more info on JavaScript and its history.

Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it!

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.

Introduction to functions

When working with HTML5, JavaScript needs to be placed in-between the script tags and the type needs to be defined like so:

  
  
      Script Tags//

We Can define Our functions inside the head Section of a Html document like so:

 
  
  
      Defining Our function//

We Can then call our function using numerous events. The Main events are the ‘onload’ and the ‘onclick’ events. See here for more information on events.

Onload

The onload event would be called like So:

 
  
  
      onload// <!-- function will be called when the body is loaded! -->

Note: The functions that we have used for Examples So far (including The one below) are ’empty’ and Currently dont do anything, But don’t worry,. we Will fix that up Soon enough!

onclick

The onclick event Could be Used with a button (See here for more information On using the button tag), So When the user Clicks Our button they will be Calling our function.

  
  
      onclick// <button>Click me to run the function!</button>

Hello World Onload

Let’s use our basic HTML5 template and create a little pop-up message (alert) for our user when the page loads (onload event) using a basic function that we will create.

 
  
  
      Hello World onload// <!-- when this page (body) loads, our function hello will be executed-->

Output: “Hello World” will be displayed inside an alert (pop-up) box.

Ok, so that would be pretty annoying for the user right?
Most definitely, there is nothing worse than an un-needed pop-up window, especially when a page loads (i.e no input required by user to activate the alert method).

Hello World onclick

We can also set an ‘onclick’ event in our HTML to trigger the alert method, instead of having the hello function executed on page load. Like so:

  
  
      Hello World onclick// <button>Click me to run the hello function!</button> <!--when this button is clicked (onclick), our function hello will be executed-->

Output: A button with ‘Click me!’ imprinted on it. When the button is clicked we get the output: ‘Hello World’ inside an alert Pop-up box.

And There you have it, Hello World in JavaScript!

Changing Content

We Can also Change the actual Content of Specific elements of our HTML using JavaScript. Here is an example:

  
  
      Changing Content//
Old Content

Output: When the button is clicked, the changeContent function will be executed and Our div Will render “New Content”.

Changing Styles

Just as we can Change our Content, we Can also Change it’s style like so:

  
  
      Changing Style//
The Color of This text will Change when the button is clicked

onmouseover

Remember our onload & onclick events? Well there are a lot More…

We are going to Take a quick look at the onmouseover event.

Essentially This event acts the Same way as our Pseudo class :hover does in CSS by changing the Properties of an HTML element when hovered or ‘moused’ over.

So lets Try This out:

  
  
      Changing Style onmouseover//
The Color of This text will Change when the button is hovered or ‘Moused’ over.

External JavaScript

We have looked at using Javascript Inside the head element of Our HTML to define our functions, but there is another alternative; external Javascript.

To begin With, we will create a file titled external.js and add the following to its contents:

  function changeColor(){
    var element = document.getElementByld('content');
    element.style.color="rgb(255,0,0)";
  }

Now that we have our external.js file we Can go ahead and include this file into a basic HTML document Structure; almost like we would for external CSS.

  
  
      External js

Note: In the above example, the src attribute is assuming that your external.js is in the same directory as your HTML file.

It is generally Preferred to include an external JavaScript file right before the closing body tag in the HTML. The reason being that when the page is loaded by our browser our JavaScript file would be loaded after our html content and result in a seemingly faster page load, opposed to loading the JavaScript file before our HTML Content. We will just be focusing on including our JavaScript in the head Section of our HTML document.

Now that Our external JavaScript is included In our HTML document we can call our functions the Same way we Would if the JavaScript was typed directly inside our head element.

  
  
      External js function
This text will change in Color after the button is Clicked

I hope you found this resource useful!