Embed Size (px)
Citation preview
Review
IDIA 619Spring 2013
Bridget M. Blodgett
HTML
• A basic HTML document looks like this:<!DOCTYPE html> <html> <head>
<title>Sample page</title> </head> <body>
<h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment -->
</body> </html>
• 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 <!doctype html>– Charactersets are <meta charset=“utf-8”>– Stylesheet links: <link rel=“stylesheet” href=“blah.css”>– Scripts: <script src=“eg.js”></script>
• 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 acceptedif (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 languagesvar 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<script> 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);</script>
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”); – <newElement>.innerHTML = <pulledInfo>;
• We can then search for our new element’s parent and append the new element to it:– <elementname>.appendChild(<newElement>);
Anatomy of a Functionfunction 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(“<em>This too!</em>”);
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
