JavaScript 101

JavaScript is a scripting language most often used for client-side web development. It is a dialect of a standard called ECMAScript. ECMAScript is also the standard on which ActionScript 3 (used in Flash) and JScript were developed.

ECMAScript is also an evolving standard with ES7 being released in June 2017. ES6, released in June 2016 was a large update that added a number of features that we'll touch on in class.

As commonly used, JavaScript runs in a browser and allows webpages to be more dynamic and interactive. The fact that it runs in a browser means that it is subject to a series of security restrictions (sandboxed) and can sometimes suffer from cross-browser compatibility issues.

Usage in HTML Document

JavaScript can written in the HEAD of an HTML document such as follows:

<html>
	<head>
		<script type="text/javascript"> 
			alert("Hi There!"); 
		</script>
	</head>
	<body>
		Nothing here..
	</body>
</html>
		
It can also be a separate file located on a webserver:
<html>
	<head>
		<script type="text/javascript" SRC="ascript.js"></script>
	</head>
	<body>
		Nothing here..
	</body>
</html>
		
or both:
<html>
	<head>
		<script type="text/javascript" SRC="ascript.js"></script>
		<script type="text/javascript"> 
			alert("Hi There!"); 
		</script>
	</head>
	<body>
		Nothing here..
	</body>
</html>
		

Variables

Defined by "var"

var avariable; // Declares a variable called avariable
avarable = 15; // Assigns 15 to that variable
		
a good discussion of why to use "var" and scope in JavaScript

Variables in ES6

In ES6, a new variable definition was specified: "let". The main difference is that variable's declared by "let" have more understandable scope in that they are "block" level scoped whereas "var" is "function" level.

"var" example:

function test() {
	var a = 0;
	if (true) {
		var a = 1;
		console.log(a); // Outputs 1
	}
	console.log(a); // Outputs 1 
	// The "a" inside the if statement block is the same as the "a" outside when you use "var"
}		
		
"let" example:
	function test() {
		let a = 0;
		if (true) {
			let a = 1;
			console.log(a); // Outputs 1
		}
		console.log(a); // Outputs 0
		// The "a" inside the if statement block is distinct from the "a" outside when you use "let"
	}
For more, see this: let - JavaScript | MDN
While you are at it, checkout const - JavaScript | MDN

Variable Types

Variables are not generally "typed".. You can do this:

var anothervariable = "My Name Is Shawn";
alert(anothervariable);
anothervariable = 15;
alert(anothervariable);
		

Comments

// single line comment
/* 	
	multiline 
	comment 
*/
		

Comparison, Conditionals and Loops

Much the same as other languages you know so I am only giving some examples here:

var what = true;
var now = 5;

if (what == now)
{
	// Then do this
}
else if (1 != 1)
{
	// Or this
}
else
{
	// Those weren't true..  Let's loop
	
	for (var i = 0; i < now; i++)
	{
		alert("Counting: " + i);
	}
}
		

Built-In Functions

We already looked at "alert" and you can see what that does..

There are a whole slew more (broken down by object): W3Schools: JavaScript Reference (Make it your best friend)

Creating your own functions

function dosomething(somedata)
{
	var whattosay = "Hi there " + somedata + " , nice to meet you!";
	alert(whattosay);
}
		
As you can see, the + symbol string concatenation.

You would run this function with something like this:
dosomething("shawn");

or

<input type="button" name="name" value="blah" onClick="dosomething(this.value);" />
		


You can also write a function like this, assigning it to a variable to illustrate the fact that it is a variable.
(There is more to this)

var dosomethingelse = function(somedata) {
	var whattosay = "Hi there " + somedata + " , nice to meet you!";
	alert(whattosay);		
};
		

DOM (Document Object Model)

HTML creates a document, JavaScript can access that document through a data structure called the DOM (or Document Object Model). This structure allows us to access each individual element as an object.

Here is a diagram of the DOM. You use the "." dot syntax to traverse it.

var theBody = window.document.body;
console.log(theBody);
		

id Attribute

If you use the "id" attribute in your HTML tags you have a short-cut available to each individual element:

<script type="text/javascript">
	function changeIt()
	{
		var thediv = document.getElementById('mydiv');
		thediv.innerHTML = "soemthing else";
	}
</script>

<div id="mydiv">Something</div>
<input type="button" name="changeit" value="Change It" onClick="changeIt();" />		
		
Something
var thediv = document.getElementById('mydiv');
thediv.innerHTML = "soemthing else";
			

Some things that you might want to look over: visibility and createElement and appendChild

Manipulating Style Attributes

Using the DOM, you can manipulate any aspect of an HTML Element, including it's CSS derived styles:

var thediv = document.getElementById('mydiv');
thediv.style.backgroundColor = "red";
			

More Information

JavaScript HTML DOM

Events and EventListeners

JavaScript in the browser is very often event driven. This means that we can specify code to run when an event takes place. Some of these are driven by the browser doing it's thing such as loading a page and some are driven by user interaction such as clicking a link or hovering over an element. Regardless of the type of event, we use the "addEventListener" method on all of the DOM elements to specify what to listen for and what code to run when the event is triggered.

element.addEventListener('event name', functionToRun);

functionToRun() {
	// Code to execute
}
				
JavaScript HTML DOM EventListener

load

The load event is very important as it is a way to specify what to do when a document is done loading, it also signifies when it is safe to call elements on the DOM:

function init() {
	var thediv = document.getElementById('mydiv');
	alert(thediv.innerHTML);
}				
window.addEventListener('load', init);				
				

mouseover

var thediv;
function init() {
	thediv = document.getElementById('mydiv');
	thediv.addEventListener('mouseover', hideit);
}			

function hideit() {
	thediv.style.visibility = "hidden";
}	
window.addEventListener('load', init);				

Many many more

Wikipedia DOM Events