Javascript basics

What is Javascript?

HTML and CSS are called markup languages. They describe certain elements of a document. Javascript is a programming language. It allows you to change elements on the page based on user actions. Just like HTML and CSS, you can write javascript in notepad, and it will run in your browser.

The language

Javascript has some qualities that are part of most programming languages. We'll discuss a few here including variables, functions, methods, and events.

Variables

A variable is something you define in your program that can store a number or word that can change over time. Think of it like a backpack. You might have a computer in your backpack, but you can change the contents whenever you like. Variables are used by programmers to store and change information.

Going back to the backpack metaphor, just like I can add a computer to my bag, add more contents to it, swap content, or take everything out - I can do the same with variables. We create variables by naming them, we then can assign and reassign them information, and then to refer by name to retrieve that information.

You can write a variable in javascript like this

var backpack="banana"; 

Here, backpack is the identifier. The equal sign is the assignment operator and it assigns the identifier information (in this case, the word "banana").

Variable Assignment

Variables can be text values (referred to as strings), or numbers. Strings are always inside single or double quotes. There are different ways of writing variable (In documentation you will encounter variable names let and const, as well. We will use var, because it is straightforward, and the w3school uses it).

var pi = 3.14;
var userMessage = "Message received!";
    

Functions

Functions are pieces of code that do something. When you write a function, it becomes a collection of code that you can reuse over and over again.

You write a function in javascript like this

function myFunction() {
}

Events

An HTML event can be something the browser does, or something a user does. We will be focusing on user actions. Specifically, what happens when a user selects a button. In order to call or invoke our function on a button event, we can add the attribute onclick to our button element.

<button onclick="myFunction()">submit</button>

Accessing parts of a webpage

To change parts of a webpage, javascript has a way to talk to the elements in html. Think of it as javascript giving the webpage a shoulder tap and asking it to change something. You can change the content of any attribute or element in a page including text and styles.

When an HTML document is loaded into a web browser, it becomes a document object, which is a tree structure with as many nodes, or branches, as you have nested elements. Javascript has built in Methods for summoning and returning specific parts of your document object.

In Javascript, when you type the word 'document', you are starting a series of instructions to summon parts of the document object. The getElementById() method is very direct, and returns an element with a specified ID. The following example uses this method to return the element with an id="demo," and changes the elements text.

HTML:    
<p id="demo"></p>

Javascript: 
function myFunction() {
    var update = "updated!";
    document.getElementById("demo").innerHTML = update;
}

Your code to execute a change in the page would go inside the braces. When you are ready to use the function, you call it by writing myFunction(). You call or invoke a function by calling its name after an event happens. Web events might be selecting a button, loading a page, or entering text into a field.

Let's pull together these concepts into some examples.