Register now to access 7 million high quality study materials (What's Course Hero?) Course Hero is the premier provider of high quality online educational resources. With millions of study documents, online tutors, digital flashcards and free courseware, Course Hero is helping students learn more efficiently and effectively. Whether you're interested in exploring new subjects or mastering key topics for your next exam, Course Hero has the tools you need to achieve your goals.
6 Pages
Lecture 15 - JavaScript and the DOM - annotated
Course: INFO 2300, Spring 2008School: Cornell
Rating:
Word Count: 1177
Document Preview
info JavaScript Midterm and the Document Object Model INFO/COM S 230: Intermediate Web Design and Programming Time: 7:30-9PM, Tuesday 3/11 Place: Olin 155 Format: On paper Closed book, closed notes However, you can bring a 4"x6" index card of notes you made yourself (front and back). Coverage: Up to (and including) last Monday's lecture on logins HTML is a tree One (useful) way of thinking...
Unformatted Document Excerpt
Coursehero >> New York >> Cornell >> INFO 2300Course Hero has millions of student submitted documents similar to the one
below including study guides, practice problems, reference materials, practice exams, textbook help and tutor support.
Course Hero has millions of student submitted documents similar to the one
below including study guides, practice problems, reference materials, practice exams, textbook help and tutor support.
info
JavaScript Midterm and the Document Object Model
INFO/COM S 230: Intermediate Web Design and Programming
Time: 7:30-9PM, Tuesday 3/11 Place: Olin 155 Format: On paper Closed book, closed notes However, you can bring a 4"x6" index card of notes you made yourself (front and back). Coverage: Up to (and including) last Monday's lecture on logins
HTML is a tree
One (useful) way of thinking about an HTML document is as a "tree" of "nodes".
<html> <head> <title> David P. Williamson </title> </head> <body> <div id="content"> <div id="myimg"> <img src="williamson.gif" width="150" height="217" alt="David Williamson" /> </div> <p> I am a professor with a joint appointment in the <a href="http://www.orie.cornell.edu">School of Operations Research and Industrial Engineering</a> and the <a href="http://www.cis.cornell.edu">Faculty of Computing and Information Science</a>. </p> </div> </body> </html>
The DOM
1
Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
But what's an "object"?
A way of putting together data along with functions that operate on that data. Objects have "fields"/"properties" (the data) and "methods" (functions working on that data). PHP has objects (will discuss later in the course). JavaScript has objects: myobject.mydata; myobject.myfunction();
Your browser represents every node in the tree as an object. The attributes of each tag are properties of the object; the objects have methods that allow easy manipulation. The top-level object is "document".
How do I access the node I want?
The document object has methods "getElementByID" and "getElementsByTagName". E.g. var node = document.getElementByID("photoid"); var nodearray = document.getElementsByTagname("img");
What can I do with a node when I have it?
You can access other nodes. mynode.firstChild gives the first child node of mynode mynode.lastChild gives the last child node of mynode mynode.parentNode gives the parent of mynode mynode.childNodes gives an array of all the children of mynode (in order)
What can I do with a node when I have it?
You can alter its properties. For example, you can alter myimgnode.src the src file of an image tag mytextnode.nodeValue the string of the text contained in a text node mytextinput.value the string of text entered in a text input area mynode.style.color the color of the mynode element
What can I do with a node when I have it?
You can add event handlers to it. E.g. myimgnode.onmouseover = myfunction;
2
Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
Behind the Magic
In the form checker we showed some weeks ago, we used a function msg(idname, message) to alter the text in a table.
Using the DOM: an example
<table> <tr><td>Your name:</td> <td><input type="text" name="name" onChange="validName(this.value);" /> <td id="namemsg">Required</td> </tr> <tr><td>Your zip code:</td> <td><input type="text" name="zip" onChange="validZip(this.value);" /> <td id="zipmsg">Required</td></tr> </table>
<table> <tr><td>Your name:</td> <td><input type="text" name="name" onChange="validName(this.value);" /> <td id="namemsg">Required</td> </tr> <tr><td>Your zip code:</td> <td><input type="text" name="zip" onChange="validZip(this.value);" /> <td id="zipmsg">Required</td></tr> </table>
Msg
Now write the code for the msg function. function msg(idname, message) {
}
function msg(idname,message) { var node = document.getElementById(idname); if (message == "") { /* Set message to non-breakable space */ message = String.fromCharCode(160); } node.firstChild.nodeValue = message; }
Altering the document
3
Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
Altering the document
The DOM also has functions that allow us to alter the markup by creating new nodes, moving nodes around, etc.
Making new nodes
document.createElement(tag) creates a new element node with tag document.createTextNode(text) tag. creates a new text node with text text. E.g. var para = document.createElement("p"); var text = document.createTextNode("Hello world!");
Putting them in the tree
node.appendChild(othernode) adds othernode as the last child below node. parent.insertBefore(newchild, curchild) adds newchild as a child of parent just before curchild.
An example
<h2> My Cart </h2> <p id="cartcontent">Your cart is currently empty.</p> <table id="carttable"> <thead> <tr id="carthead"><th class="pict"></th><th class="title">Title</th><th class="author">Author</th<th class="price">Price</th> </tr> </thead> <tbody id="cartbody"> </tbody> </table> <h2> Books </h2> <p> Click on a book to add it to your cart. </p> <table id="availtable"> <thead> <tr id="availhead"><th class="pict"></th><th class="title">Title</th><th class="author">Author</th><th class="price">Price</th> </tr> </thead> <tbody id="availbody"> <tr> <td class="pict"><img id="php" height="100" width="100" src="php.jpg" /></td> <td class="title">Learning PHP 5 </td> <td class="author">David Sklar </td> <td class="price">$29.95</td> </tr> <tr> <td class="pict"><img id="bpa" height="100" width="100" src="bpa.jpg" /></td> <td class="title">Bulletproof Ajax </td>
Making this work
We'll walk through the effects a step at a time.
4
Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
Adding the event handlers
Suppose we have functions "StyleRowOver", "StyleRowOut", and "MoveRow" that do the right thing on mouse over, on mouse out, and on click. How do we add these to every row in our table?
(using StyleRowOver, StyleRowOut, MoveRow) function makeTableRollover() {
}
function makeTableRollover() { var trarray = document.getElementsByTagName("tr"); for (var i in trarray) { trarray[i].onmouseover = StyleRowOver; trarray[i].onmouseout = StyleRowOut; trarray[i].onclick = MoveRow; } }
Now let's write the functions...
function StyleRowOver() { = "#00C0F0"; } function StyleRowOut() { = "#FFFFFF"; }
function MoveRow() { var cart = document.getElementById("cartbody"); var avail = document.getElementById("availbody");
}
5
Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
function MoveRow() { var cart = document.getElementById("cartbody"); var avail = document.getElementById("availbody"); if (this.parentNode == cart) { avail.appendChild(this); } else { cart.appendChild(this); } }
function MoveRow() { var cart = document.getElementById("cartbody"); var avail = document.getElementById("availbody"); if (this.parentNode == cart) { avail.appendChild(this); this.style.backgroundColor="#FFFFFF"; availitems++; cartitems--; } else { cart.appendChild(this); this.style.backgroundColor="#FFFFFF"; cartitems++; availitems--; }
var cartp = document.getElementById("cartcontent"); var carttext = cartp.firstChild; var carthead = document.getElementById("carthead");
var cartp = document.getElementById("cartcontent"); var carttext = cartp.firstChild; var carthead = document.getElementById("carthead"); if (cartitems == 1) { carthead.style.color = "#000000"; carttext.nodeValue = "Click on a book to remove it from your cart."; } else if (cartitems == 0) { carthead.style.color = "#FFFFFF"; carttext.nodeValue = "Your cart is currently empty."; } }
}
Review
Everything on your webpage is an object. You can use the properties and methods of the objects to:
Change properties (styling, text, event handlers) Add new nodes Move nodes
Reminders...
Read "The Document Object Model" in the coursepack. Midterm tomorrow night, 7:30-9PM, in Olin 155.
6
Easy PDF Creator is professional software to create PDF. If you wish to remove this line, buy it now.
Textbooks related to the document above:
Find millions of documents on Course Hero - Study Guides, Lecture Notes, Reference Materials, Practice Exams and more.
Course Hero has millions of course specific materials providing students with the best way to expand
their education.
Below is a small sample set of documents:
Below is a small sample set of documents:
Cornell - ECON - 3330
Portfolio Tools 2"A bird in the hand is worth two in the bush" Danthine and Donaldson, p. 83Econ 333 Spring 081Portfolio Tools 2: A brief revue of conceptsIn individual's attitude toward risk can be measured in two ways: The Arrow-Pratt meas
Cornell - ECON - 3330
Portfolio Tools 3Spring 08 Econ 3331Portfolio ToolsModern portfolio theory : Developed to help investors form a portfolio a combination of investments that achieves the highest possible expected return for a given level of risk. The theory as
Cornell - INFO - 2300
More SQLINFO/COM S 230: Intermediate Web Design and ProgrammingCommon problems with P2 Code didn't work Search functionality crippled (e.g. only search on two attributes) Navigation (no way to return to home page from search results) Error che
Cornell - INFO - 2300
LoginsINFO/COM S 230: Intermediate Web Design and ProgrammingPHP commands for MySQLMySQL commandsRecall from last time: mysql_connect(hostname, username, password); Returns a MySQL DB link if successful, false otherwise. mysql_select_db(dbname,
Cornell - INFO - 2300
Calling MySQL from PHPmysql_connect(hostname, username, password); Returns a MySQL DB link if successful, false otherwise. E.g. $link = mysql_connect(,localhost, ,dpwmson, ,mypassword); mysql_select_db(dbname, link); Selects DB dbname for use given
Cornell - INFO - 2300
Modifying DBs and using MySQLINFO/COM S 230: Intermediate Web Design and ProgrammingModifying databases via SQLINSERTsWe can INSERT tuples into a relation, UPDATE tuples, and DELETE tuples from a relation.INSERT INTO relation VALUES (value1, v
Cornell - ECON - 3330
Assessing the Firm's Viability from Its Financial Statements: A Study AidDuring the accounting cycle, the accountants track, organize and record the financial dealings of a company. At the close of each period, accountants use the information they h
Cornell - ECON - 3330
Factor Models and the Arbitrage Pricing TheoryEcon 333 Spring 081Factor Models and the Arbitrage Pricing TheoryOur goals: Be able to decompose the variance of an asset into market-related and non market-related components. i.e. common and fir
Cornell - ECON - 3330
Assets PricingEcon 333 Spring 081Assets pricingOur goals: Understand what the market portfolio is, what assumptions are needed for the market portfolio to be the tangency portfolio, i.e. for the Capital Asset pricing Model (CAPM) to hold. Und
Cornell - INFO - 2300
Project 1Introduction to JavaScriptINFO/COM S 230: Intermediate Web Design and Programming Regrades: Fill out form from server Meet with me Entire project will be regraded (e.g. grade could go up or down). Regrade must be within a week from t
Cornell - INFO - 2300
JavaScript vs. PHPLots of things in JavaScript are relatively similar to what weve already seen in PHP. Here is a very brief summary of some of the similarities and differences.VariablesNot prefixed by ,$ in JavaScript. Can declare by ,var when v
Cornell - INFO - 2300
PHP and MySQLINFO/COM S 230: Intermediate Web Design and ProgrammingReminderMidtermMarch 11 (Tuesday) 7:30-9PM Olin 155FinallyWe've studied two topicsToday they come together1Easy PDF Creator is professional software to create PDF. If y
Cornell - INFO - 2300
Cookies, Sessions, and FilesINFO/COM S 230: Intermediate Web Design and ProgrammingCookiesCookiesCookies are one way to save limited amounts of information between visits of a user.Saving a cookiesetcookie($name, $value) setcookie($name, $va
Cornell - ECON - 3330
Risk, Risk Aversion and Investment DecisionsEcon 333 Spring 081Risk, Risk Aversion and Investment Decisions After studying this sequence (next six chapters) you will know: How financial risk is defined and measured. How an investor's attitud
Cornell - ECON - 3330
Portfolio Tools 1Econ 333 Spring 081Portfolio Tools 1Before one turns to modeling asset pricing it is essential to understand the determinants of the demand for securities of various risk classes (Individuals demand securities (in exchange of
Cornell - ECON - 3330
Econ 333 - Financial Economics Spring 08 Practice Prelim II:Exercise 1: Multiple choice. (3 points each) 1- You recently purchased a stock that is expected to earn 12% in a booming economy, 8% in a normal economy and lose 5% in a recessionary econom
Cornell - ECON - 3330
Econ 333 - Financial Economics Spring 08 Practice Prelim IExercise 1: Multiple choice question. (25 points) 1- The time value of money concept can be defined as: a. b. c. today. d. e. the relationship of interest rate stated and amount paid. None of
Cornell - ILROB - 4710
districts like La Dfense in Paris and planned communities like Reston, Virginia, outside Washington, DC, are cases in point. The time is ripe for similar developments to spring up around other congested cities. A billion or two additional internation
Cornell - ECON - 3330
Second Order Stochastic Dominance Definition Suppose the random variables X and Y have support on [l, u]. Then X second-order stochastically dominates Y ifa aPr[X > t]dt l lPr[Y > t]dtfor all a. Results 1. If X first order stochastically domi
Cornell - H ADM - 476
HA 476 Midterm Review Key Objects: ThisWorkBook!1 Application o SendKeys (imitates keystrokes) o DisplayAlerts = True, False (ignores warning boxes) o ActiveCell: property o GetOpenFileName (opens browse files and gets name, but doesn't open) o Capti
Cornell - INFO - 2300
SectionRelational algebraINFO/COM S 230: Intermediate Web Design and Programming Friday's section (in part): How to install and configure Apache, PHP, and MySQL. You may want to bring your laptop.Brief review of relational DBsLast time we intro
Cornell - ILROB - 4710
Cornell University ILR School Professor WilliamsREFLECTIVE PAPER: SELF-ASSESSMENT and GOALS Monday, March 31, 2008 by 5pm (5-7 pages, double spaced pages, 1650 word limit.) For this assignment, you will analyze your strengths, weaknesses and style a
Cornell - INFO - 2300
What is.?Introduction to relational databasesINFO/COM S 230: Intermediate Web Design and Programming A database is a collection of related data. A database management system (DBMS, database system) is a piece of software used to manage a database e
Cornell - INFO - 2300
Exercise: A relational database schema for Cornell course registrationSuppose you are putting together a database that allows Cornell students to sign up for courses each semester. Give a sample relational database schema for this database. Give som
Cornell - INFO - 2300
"Stand firm in your refusal to remain conscious during algebra. In real life, I assure you, there is no such thing as algebra." - Fran Lebowitz, Social StudiesSQL: Structured Query LanguageINFO/COM S 230: Intermediate Web Design and Programming"
Cornell - INFO - 2300
Relational algebra operator overviewSelectionThe operator P applied to a relation returns all tuples for which the predicate (or condition) P is true. E.g.Length > 150ProjectionThe operator A1,A2,.,Ak applied to a relation returns a relation wi
Cornell - INFO - 2300
From relational algebra to SQLSelectionC(R)SELECT * FROM R WHERE C; SELECT * FROM Movies WHERE Length > 150;Length > 150 (Movies)Conditions allowed in SQL: <, >, <=, >=, = (note not = =), < > (not equals) Can also take AND and OR of conditio
Cornell - ECON - 3330
Portfolio Tools 4Econ 333 Spring 081Portfolio Tools 4Our goals: Understand the importance of mean-standard deviation diagram and know how to locate within the diagram the efficient frontier of risky assets, the capital market line, the minimu
Cornell - INFO - 2300
A simple login formComplete the code below for a simple login form (login.php) that protects a single page. <?php if (!isset($_POST[,username]) & !isset($_POST[,password]) { ?> <h1>Log in</h1> <form action="login.php" method="post"> Username: <input
Cornell - INFO - 2300
ReminderProject 3, part I due tonight at midnightUploading files and PHP graphicsINFO/COM S 230: Intermediate Web Design and ProgrammingMidterm infoTime: 7:30-9PM, Tuesday 3/11 Place: Olin 155 Format: On paper Closed book, closed notes However
Cornell - ILROB - 4710
GROUND RULES FOR COLLABORATIVE LAW PROCESS 1. 2. 3. 4. Attack the problems and concerns at hand, not each other. Avoid positions; rather, express yourself in terms of needs and interests and the outcomes you would like to achieve. Work for what you b
Cornell - ILROB - 4710
COLLABORATIVE LAW PARTICIPATION AGREEMENTI. PURPOSE_ and his/her attorney, _, and_ and his/her attorney, _, have chosen to use the principles of Collaborative Law to settle the issues arising from the dissolution of their marriage or domestic part
Cornell - ILROB - 4710
Cornell - ILROB - 4710
Warning Concerning Copyright Restrictions The copyright law of the United States (Title 17, United States Code) governs the making of photocopies or other reproductions of copyrighted material. Under certain conditions specified in the law, libraries
Cornell - ILROB - 4710
Cornell - ILROB - 4710
Cornell - ILROB - 4710
Warning Concerning Copyright Restrictions The copyright law of the United States (Title 17, United States Code) governs the making of photocopies or other reproductions of copyrighted material. Under certain conditions specified in the law, libraries
Cornell - ILROB - 4710
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor Michele WilliamsAgenda Turn in Post-Negotiation Paper (upload a copy onto Blackboard!) In the News Integrative Bargaining (reviewed) Exercise Video Case and Debrief Wrap-up 2008 Michele Willi
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor Michele WilliamsAgenda Getting to Yes Conflict Exercise El-Tek Discussion and Wrap-up 2007 Michele Williams. All Rights Reserved.Pilots Thwart Merger Plans 2007 Michele Williams. All Right
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor Michele WilliamsAgenda Emotion, Power and Negotiation Style (The Coleman account ) Reflective Paper Assignment Amanda Dispute Discussion and Wrap-up Gender (next week) 2007 Michele Williams.
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor WilliamsAgenda Distributive Tactics Negotiation Exercise (Used Car) Fishbowl Negotiation Break Auction Netscape Case Discussion Wrap-upFocusStrategy Distributive (fixed-pie) Integrative (
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor Michele WilliamsAnnouncement: Sign out an IClickerAgenda In the News Negotiation Paradigms Psychological Biases Personal Experience Coffee Contract Double Negotiation Discussion Video and W
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor WilliamsAgenda Ethics In the News Negotiation Preparation Break Negotiation Discussion and Wrap-up Post Negotiation Analytic PaperA Question of Ethics You see a sign on a vacation home,
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor WilliamsProfessor Michele WilliamsTeaching Assistant:Chia-Ming Chan, cc489@cornell.eduAgenda Introduction and Overview Syllabus Break Negotiation Exercise Discussion Wrap-upWe negotiate
Cornell - ILROB - 4710
ILROB 471 Organizations and NegotiationProfessor Michele Williams 2008 Michele Williams. All Rights Reserved.Agenda Gender Dispute Resolution Frameworks Emotion Management Tool Kit Telepro Negotiation Discussion and Wrap-up Mediation in Ac
Cornell - ILROB - 4710
Berkeley - MATH - 16A
016A S2 Homework 1 SolutionJae-young Park September 2, 2007 0.1 *10 Use intervals to describe the real numbers satisfying the inequality x -1 and x < 8. Solution You may change the expression little bit: -1 x < 8, which is equivalent. Using inte
E. Michigan - PHYS - 221
E. Michigan - CHEM - 371
CHEM 371 Fall 2007 Professor Wilmes Exam 4 50 minutesName_ EMU ID#_ By signing below, I state that I agree to and will follow all aspects of the Student Conduct Code with regard to academic honesty: Signature__Instructions: This is a closed book
E. Michigan - CHEM - 372
E. Michigan - CHEM - 372
E. Michigan - CHEM - 372
E. Michigan - CHEM - 372
Penn State - ENGL - 015
LJ Palombo 10/15/07 Ms. Spanier To Party or Not to Party To live a healthy life, you must find a balance your free time. You should use some of your time for work and some for play. My preferred form of play would be to party. By party, I mean to go
Penn State - KINES - 061
LJ Palombo Target Heart Rate Training Zone : 121 181 bpmWorkout 1 20 minutes of cardio work (aerobics) Lower Body: (1 set, 10-12 reps) Leg Press - machine Leg Extension - machine Leg Curl - machine Lunge - dumbbell Upper Body: (1 sets, 8-10 reps)
Michigan - ENG - 125
Curtice 1 (I am sorry that I sent you the incorrect version, I saved these paper versions as Escuerdo4 and Escudero4 on my laptop and I think that this was an accident.) Mark Curtice English 125 section 56 Instructor Escudero This is a much better pa
E. Michigan - PHY - 221
Penn State - COMM - 150
1 Comm. 150 SoundIn this scholarly article I will be analyzing the use of sound in Superbad. I this film I chose one scene in particular and it's the one where the two cops pick up McLovin and take him to an abandoned parking lot. When the three ar
Penn State - HIST - 011
1 As a young adult Adolf Hitler was failing high school and wanted to pursue a career in art, but was not accepted into the art schools. Spending most of his adolescent years poor and jobless, he would beg for money and food. Later he volunteered to
Penn State - COMM - 150
1Comm. 150 CinematographyThe film images create a depth of field, which is the distance before and behind the main focus. In the film Billy Madison, you can clearly see the attribute of depth of field when Billy goes back to school and is sitting