Press key to advance.

Zoom in/out: Ctrl or Command + +/-

Having issues seeing the presentation? Read the disclaimer

Intro

Functions

Definition

fn();

Function:

Good way to think of a function is simply as a group of commands I give a name to, so I can easily run them (call them) again

More so, I can include some information when I call this function

Notes:

Intro

Functions

document.write

fn();

We saw this last week

document.write(something)

Here, 'write' is the function

document is the object (we'll get there)

In write(something), 'something' is called an argument or a parameter

Intro

Functions

Define your own function

fn();

function myFunction(myparam){
	document.write(myparam);								
}

OR

myFunction = function(myparam){
	document.write(myparam);								
}

Camel-casing is not capitalizing the first word, but every word after that

Intro

Functions

Calling your function

fn();

myFunction("What I gots to say");
mystatement = "What I gots to say";
myFunction(mystatement);	
							
for(i=0; i < 5; i++){
myFunction('What I gots to say');
}

Intro

Functions

More complex functions

fn();

You can have multiple arguments

myFunction = function(paramone, paramtwo){
	document.write(paramone);
	document.write(paramtwo);							
}
You can put any other statements in a function, like loops or conditionals
myFunction = function(paramone, paramtwo){
	if(paramone == "my"){
		paramtwo = paramone + paramtwo;
	}
	else{
		paramtwo = paramtwo + paramone;
	}
	
	document.write(paramtwo);
}

Intro

DOM

Document Object Model

DOM

Javascript uses the Document Object Model to work with HTML pages (and XML pages actually)


The Document Object Model is a way of thinking about the structure of an HTML page which allows us to navigate around and find specific pieces of the page or groups of pieces


Think of the folder structure on your computer, folders containing files or more folders, containing more folders or files, etc..


In the DOM, everything is a 'node'

Intro

DOM

Parents & Children

DOM

In the DOM, each node can have children (which are nodes as well)

We can ask for the children of a node, or for the parent of a node

The text and whitespace within the tags are also nodes (Remember this one!)

DOM

Resources

Useful Links

library

All about the DOM

Node Types

Mozilla's DOM documentation