Functions & Objects IDIA 618 Spring 2012 Bridget M. Blodgett.
Review IDIA 619 Spring 2013 Bridget M. Blodgett. HTML A basic HTML document looks like this: Sample...
-
Upload
eric-manning -
Category
Documents
-
view
219 -
download
2
Transcript of Review IDIA 619 Spring 2013 Bridget M. Blodgett. HTML A basic HTML document looks like this: Sample...
![Page 1: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/1.jpg)
Review
IDIA 619Spring 2013
Bridget M. Blodgett
![Page 2: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/2.jpg)
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.
![Page 3: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/6.jpg)
Data Types
• There are several basic data types– Strings are wrapped in ‘’ or “”– Numbers – Booleans can be true/false or 0/1– Arrays
![Page 7: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/7.jpg)
Operators
• JS has two categories of operators– Math• +, -, *, /, ++, --
– Comparison• >, <, ==, !=, >=, <=• ===• !==
– Logical are a sub-category of comparison• &&, ||, !
![Page 8: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/8.jpg)
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’);
![Page 9: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/10.jpg)
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>
![Page 11: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/11.jpg)
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?
![Page 12: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/12.jpg)
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>);
![Page 13: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/13.jpg)
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;}
![Page 14: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/14.jpg)
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
![Page 15: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/17.jpg)
var fido = { name: "Fido", weight: 40, breed: "Mixed", loves: ["walks", "fetching balls"]};
![Page 18: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/18.jpg)
Using Objects
• You can modify or call properites of object by using the objectname.property– Like Math.random
![Page 19: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/19.jpg)
This Keyword
• this is used to refer to the current object that you are manipulating or working under
![Page 20: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/20.jpg)
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);
![Page 21: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/22.jpg)
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
![Page 23: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/23.jpg)
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
![Page 24: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/24.jpg)
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>”);
![Page 25: 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.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649e7d5503460f94b80936/html5/thumbnails/25.jpg)
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