Summary

JavaScript brings the possibilities of a (semi) Object Oriented language to web design. HTML and CSS are more markups than language, and so don't have the same flexibility. With JavaScript we can utilize variables, functions, and object instantiation in a way similar to lower level languages like C++.

JavaScript will not allow you to edit properties of CSS or HTML that do not already exist but it does give you more control over *how* and *when* those properties are edited.

If you're already familiar with programming concepts and structures, then I'll state the key differences up front. If you're not familiar with programming in any way, go ahead and start with the Syntax and Structure section.

  • Variables require no given type.
  • Arrays are not typed and they can hold any given object.
  • JavaScript is so loosely typed you can switch a string for a int at any time.
  • There are no Class objects, JS is a functional language in that you can declare a var as a function and either run it or edit variables given within. You can still use new() however.
  • "Include" or "import" do not exist. Script is loaded into the document as it is linked / read.
  • There are no natural update or draw loops. They must be made manually with setTimeout(function, ms delay);.

Otherwise this section will be written as if the reader has little to no coding experience.

Syntax & structure

Entire books can be written about JavaScript, and having at least one or two on hand is encouraged, but basic the principles of it are few enough for this page.

  • Comments
  • Variables
  • Conditionals
  • Functions

Before we begin there is one important thing to note. The colors of every example code you see and write.

One of the first difficulties new programmers stumble upon is looking at example code and trying to discern what are actual commands native to a coding language and what are words and phrases chosen by the author.

This is why it can be *very* useful for beginners to use programs that have code hinting and color coding. When using a program like Adobe Dreamweaver for instance the program will color the words and phrases that are universally recognized by JavaScript. For instance in the variable example on this page you can see that the word "var" is a different color than the word that comes after it. This shows that the word "var" is a keyword within JavaScript itself and is something that is common to ALL JavaScript code. The word that comes after it has been chosen by the author.

You'll see further examples of this as we go.

Comments

Comments are notes created alongside source code that do not affect the program.

The first thing you might notice in any decently written code is text that is actually readable. Plainly worded, easy to understand writing, as opposed to the actual code telling the computer what to do. These are comments, which should be used often, and for multiple reasons.

  • Comments help remind not just others, but the original author what he or she was doing when the code was written in programs that become extremely complex.
  • They can serve as warnings about the effects of changing a line that otherwise seems inconsequential at first glance.
  • They can also help with general readability by spacing out code in a way that separates different areas of code by subject or use.

Let's read about JavaScript comments specifically in an actual example of comments.


// This is a comment.

// Text written this way will not affect the way 
// the page is loaded, drawn, or processed in 
// any way.

// Comments in JavaScript are denoted in two ways.
// The first is two forward slashes at the 
// beginning of a line. It doesn't matter if the
// line wraps, but I personally will manually
// start a new line to keep the paragraph width
// short.

/*
The other way of making comments is the 
slash-asterisk combo that you see here.  These 
symbols will comment out any text that happen to
fall between them.  If you have more than one or
two lines, like this, it's probably more
space efficient to use this method.

Comments are easy to spot in most IDE's as they
will all be the same color.
*/

Variables

Variables are references to single values or links to larger objects.

Variables are simply data that hold individual pieces of information. One variable can hold one piece of information such as a number, word, or singular link to a larger object. You can think of them as similar to the property / value relationships of CSS. But unlikes CSS they are properties that you make.



/*
Now let's look at some actual code.
  
The most basic part of any program is going to be 
the variable, which will come in 3 parts.  In 
JavaScript we make one by simply using the keyword
"var".  After that we give it a name of our choice
and assign it a "value" with a single "=" sign.
*/

var variable_one = "whatever";

/*
Note that the line ends with a semi colon.  Every 
instruction in JavaScript should end with one so 
that the program knows when to start a new 
instruction.  It's the code equivalent of a period
at the end of a sentence.

The first thing to realize about variables in 
JavaScript (we'll shorten that to just JS at this 
point) is that they are very loosely typed.  We 
can actually switch what kind of information a 
variable holds at any given time.  The variable 
above held the word "whatever", but now I'm going
to assign it a number.
*/

variable_one = 365;

/*
...and now it holds a number, and any time the 
phrase"variable_one" is used anywhere in our code 
it will be the same as just using "365".

Also note how the "var" keyword was not used 
during this assignment.  "var" is only required 
when you first "Declare" the variable.  Every time
after that we only want to change the info, not 
remake it.  Trying to remake it can possibly lead
to errors.

To see the effect of this change we need a way to
display the variable on screen.  The so called
"console" is the preferred way in professional
development but let's make it even simpler and just
display the variable as an alert message.
*/

alert(variable_one);

/*
Now if you were to copy these three lines to a
script section of a basic HTML page and open that
page within a browser you should get a pop up 
alert that simply says "365".  Not that only the 
*value* of the variable is displayed.  After all 
the variable name is just how we reference the 
value consistently.

Variables can also take from one another.  
Let's make a new one.
*/

var variable_two = variable_one;

/*
In this case we have essentially duplicated the 
information.  We have 
1. Made a new variable, 
2. given it a name of "variable_two", and 
3. assigned it the value that 
   "variable_one" currently has.

In this particular case if we were to reassign 
one of these variables it would NOT change the 
other.  It is its own piece of information.
*/

Conditionals

A large part of writing code consists of testing for various conditions. Let's use some code similar to what we've already written.



var variable_three = 64;

if(variable_three > 50){
	alert("Greater than 50");
} else {
	alert("Less than 50");
}

So what's happening here?

Basically this is another way of saying "If we compare these two variables and they fulfill a certain requirement then run the following code". In this case the comparison being checked for is "if the value of 'variable_three' is greater than the number 50 then enact an 'alert' function".

Furthermore you can see this code uses an "else" keyword. This is a way of inserting code to run should the original comparison not be fulfilled. In this case the code is still enacting an "alert" function but alerts the user with a different phrase.

This is the most basic form of a conditional check. We'll expand upon this in a later section.

Functions

So far the code we've written seems to be able to change whatever property we wish. But you may have noticed that it all runs as soon as the page is loaded. If changed CSS properties is all we wanted to do then we could just continue using CSS. The strength of JavaScript is that we can utilize it at any time based on user interaction AFTER the page has loaded.

We do that via functions.

Think of functions as a list of instructions. Just as the previous examples was a "free" list of instructions that ran on page load we can contain those instructions within a function so that they are not used until we want them to be used.

Let's look at how a simple function is written.

function name() {
		// Code
}

In this example the red parts of the text are keywords and symbols which will almost always be exactly the same from function to function. The green text shows areas in which you get to write custom code to suit your needs. JavaScript functions...

  • Must be declared with the word "function" in lower case letters.
  • (if they will be invoked later) must have a user-defined name followed by a set of parenthesis.
  • Will end with a set of curly brackets that will encapsulate user-defined code.
  • Do not need to declare a return value type like other languages (though they can use the "return" keyword).
  • Can be assigned, as objects, to variables (we'll cover this later).
  • Do not need to be declared *before* being invoked as in other languages (JavaScript parsers will order them automatically).

An actual implementation would look more like this.


var variable_four = 10;

function your_func(){
	variable_four = 20;
}

alert(variable_four);

Running the code above would result in an alert box that simply displays the number "10". Why? Because even though we constructed a function to change the variable we did not INVOKE the function. You can think of this code as failing to "activate" the function. This is something we can do by simply calling out to it by name...


var variable_four = 10;

your_func();
function your_func(){
	variable_four = 20;
}

alert(variable_four);

As you can see to "call" a function we simply write out the name of the function followed by, at the least, a set of parenthesis. Whether or not we write anything *within* those parenthesis depends on the function. It's important to remember that this simple "your_function();" invokes the function no matter where it is in the code text. Whether this single line is at the beginning or end of your code it will be as if you had written the code of the function itself at the position where you called the function.

Because we called the function in the second example there the variable number is changed and the alert box then reads "20" if you try to run the code.

Some more important points about JavaScript variables and functions.

  • JavaScript is an "interpreted script". Meaning it does not compile into machine code, it does not compile at all.
  • Because it does not compile and the actual script files are sent to the client during use, JS is not a secure language and no critical information should be stored within it.

When making a new variable there are a few standard data types you can categorize the variable by (even though JavaScript does not require you to name the category).

  1. Strings (typically words, or anything you can type on a keyboard)
  2. Integers (whole numbers without decimal pointS)
  3. Numbers (floating point numbers with possible decimals)
  4. Objects (complex classes with data within them)

Integers and Numbers are treated the same way, simply write the desired number, but strings *always* have to have quotation marks around them. Arrays and "Objects" will be discussed in later sections.