Review IDIA 619 Spring 2013 Bridget M. Blodgett

HTML A basic HTML document looks like this: Sample page Sample page This is a simple sample. HTML user agents (e.g. Web browsers) then parse this markup, turning it into a DOM (Document Object Model) tree. – A DOM tree is an in-memory representation of a document.

Updating to HTML5 The structure of pages has changed slightly: – Doctypes can now be written simply as – Charactersets are – Stylesheet links: – Scripts: Best part is these should never change and are backwards compatible

APIs Stands for Application Programming Interface – What does this really mean in terms of developing and designing things? The reinvention of HTML with HTML5 added support for a number of new features: – Local storage – 2D drawing – Offline support – Sockets and threads – Geolocation

Writing JS JS is written as a series of statements – Unlike PHP JS WILL terminate with a line break or a semi-colon You must declare a variable before using it – Use the key var before the variable name to declare it – They can be initialized at declaration but don’t need to be Variables are case sensitive

Data Types There are several basic data types – Strings are wrapped in ‘’ or “” – Numbers – Booleans can be true/false or 0/1 – Arrays

Operators JS has two categories of operators – Math +, -, *, /, ++, -- – Comparison >, =, <= === !== – Logical are a sub-category of comparison &&, ||, !

Conditional If statements – if(2 <1){alert(‘Something is Wrong’);} if…else is also accepted if (2<1){ alert(‘Something is wrong’); } else if { alert(‘Everything is fine’); } else { alert(“all clear”); } (2<1) ? alert(‘Something is wrong’) : alert (‘Everything is fine’);

Loops Very similar to other languages var i = 10; while (i >=0 ){ alert (i); i--; } For loops are similar to while loops but compress the initialize, conditional, update process onto one line

What We Know var guessInput = document.getElementById("guess"); var guess = guessInput.value; var answer = null; var answers = [ "red", "green", "blue"]; var index = Math.floor(Math.random() * answers.length); if (guess == answers[index]) { answer = "You're right! I was thinking of " + answers[index]; } else { answer = "Sorry, I was thinking of " + answers[index]; } alert(answer);

Properties Many variables have special properties that we can make use of to alter our pages – button.onclick and window.onload are two examples of these properties – What are some other built in properties for buttons in JavaScript?

Making New Elements Getting new elements to appear on the page is a two step process: modifying the DOM, adding the element to the page – document.createElement(“x”); –.innerHTML = ; We can then search for our new element’s parent and append the new element to it: –.appendChild( );

Anatomy of a Function function checkGuess(guess) { var answers = [ "red", "green", "blue"]; var index = Math.floor(Math.random() * answers.length); if (guess == answers[index]) { answer = "You're right! I was thinking of " + answers[index]; } else { answer = "Sorry, I was thinking of " + answers[index]; } return answer; }

Parameters vs Arguments When you define a function you will often give it several parameters – These are placeholder that tell the function the type of information it will accept When you call the function you may pass it several arguments – These are actual values of information that match the type described by the placeholders

Local and Global Variables Javascript will allow you to declare a new variable just about anywhere in the document But the location you choose has an effect upon what that variable can interact with If they are declared outside of any function or loop they are a global variable – Any function or code in the document can use them If they are declared inside a function they are called local variables – Only accessible to the code that is also in the function

Objects Objects are a conceptual way of thinking about coding – Their goal is to improve planning by grouping together similar properties and functions by their goals The properties of an object are simply a way of describing that object

var fido = { name: "Fido", weight: 40, breed: "Mixed", loves: ["walks", "fetching balls"] };

Using Objects You can modify or call properites of object by using the objectname.property – Like Math.random

This Keyword this is used to refer to the current object that you are manipulating or working under

function Dog(name, breed, weight) { this.name = name; this.breed = breed; this.weight = weight; this.bark = function() { if (this.weight > 25) { alert(this.name + " says Woof!"); } else { alert(this.name + " says Yip!"); } }; } var fido = new Dog("Fido", "Mixed", 38);

Using jQuery jQuery has a slightly different syntax than the JavaScript we’ve used so far jQuery is itself a function but it has a shortened form which will be what you use most often – The full function is jQuery() shortened to $() You can put CSS Selectors, HTML, and JavaScript Objects into the function

jQuery and CSS jQuery uses selectors just like CSS – Just listing the element name does all elements of that type – Preceding it with a period signifies a change to a class – Preceding it with a hash (#) signifies a change to an id CSS selectors add style to an element, jQuery selectors add behaviors to them

Process for Using jQuery The process for implementing jQuery has several steps: – Outline the project requirements – Structure the page with div tags where appropriate add CSS – Add in script section linking to the jQuery library – Put in your $(document).ready(function()) line – Add your jQuery commands nested under the ready – Comment your code so that you know what’s going on

Adding Content There are several methods that jQuery uses to add new items to the HTML page without a refresh One of the easiest to use is.append() – The information that you want to add goes inside the () – You attach the append function to the item you want to add it to – $(“.div_section”).append(“ This too! ”);

Removing Elements There is a remove function that takes an element or group of elements off the page – Once used the elements won’t even show up in the HTML view of the page The order of adding and removing elements is important – You can’t remove an element before it is added – You don’t (usually) want to remove an element you just added