XML-Javascript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

XML-Javascript

on

  • 1,127 views

 

Statistics

Views

Total Views
1,127
Views on SlideShare
1,127
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

XML-Javascript Document Transcript

  • 1. Administrative Stuff Lab #4 due August 9 XML and JavaScript HW #4 due August 11 Lecture 10 Final exam Friday, 8/13 cs193i – Internet Technologies Gates B03 Summer 2004 7-10pm Stanford University What is JSP? A JSP File Separate computation from presentation Presentation: JSP Computation: Servlet Mostly HTML page, with extension .jsp Include JSP tags to enable dynamic content creation Translation: JSP → Servlet class Compiled at request time Expression Language EL Examples Makes syntax short and readable, like JavaScript <input name=“firstName” value=“${customer.firstName}”> ${expression} <c:out value=“${order.amount + 5}”/> Arithmetic ${order.amount + 5} ${1.2 + 2.3} → 3.5 {order['amount'] + 5} Comparisons ${4.0 >= 3} → true Implicit Objects ${param.foo} → JSP 2.0 ${param["foo"]} → JSP 2.0 Functions ${my:reverse(my:reverse(param["foo"]))} → JSP 2.0
  • 2. XML XML → Extensible Markup Language Just a text file, with tags, attributes, free text... looks much like HTML Purpose XML Describes Data Used to create special-purpose markup DTD -- formal description of the class of XML languages document your file adheres to (like file Facilitates sharing of structured text and extension) information across the Internet. Buzzword: DTD is one way to describe XML "Schema" (grammar). There are other ways... XML Structure Facilitates Parsing of Data Two Apps still have to agree on what the meaning of the "descriptive tags" XML Nested Tags Apple Safari Bookmarks Like a tree, each element is contained inside a parent element Each element may have any number of attributes <book>…</book> <chapter>…</chapter> <chapter>…</chapter> pages=“30” <title>…</title> … <para>…</para> </br> <figure>…</figure> This is some text!
  • 3. Property List Editor Apple Bookmarks Document Data Type XML Structure Nested Tags Here's some text <red>surrounded <important>by tags</important></red> Empty Tags <tag></tag> → <tag/> Attributes -- Variable Value Bindings in the Tag <dot x="72" y="13"/> Free Text <dot x="1" y="1">I'm free!!!</dot> Special Characters Organization Strategies < &lt; XML Text -- blocks of free text with tags to > &gt; mark sections & &amp; <foo>And here is some <b>text</b></foo> " &quot; XML Tree -- nested tags, only leaf-nodes have free text ' &apos;
  • 4. XML Tree Sub-Tags vs. Attributes <person> Sub-Tags <name> <dot> <first>Hans</first> <x>13</x> <last>Gruber</last> <y>57</y> </dot> </name> <id>123456</id> Attributes <username>hans</username> <dot x="13" y="57"/> </person> When to use Attributes When to use Tags Whenever Possible <parent> <child>...</child> Sub-Data is short & simple, and doesn't repeat <child>...</child> <child>...</child> <dot x="13" y="56"/> </parent> NOT: <dots> <dot x="13" y="15"/> <dots x1="13" y1="56" x2="14“ y2="67 x3="56" <dot x="1" y="3"/> y3="100" ... /> ... </dots> <description>This is a super long description that should be put between tags, as opposed to in an attribute... </description> XML Example - Dots XML and Java <?xml version="1.0" encoding="UTF-8"?> Meaning http://java.sun.com/xml/index.jsp <dots> <dot x="1" y="2" /> (1, 2) (3, 4) Java API for XML... <dot x="3" y="4" /> Binding (JAXB) -- for working w/ Schemas <flip> <dot x="5" y="6" /> (6, 5) Processing (JAXP) -- for Parsing! <flip> <dot x="7" y="8" /> (7, 8) </flip> </flip> <dot x="9" y="10" /> (9, 10) </dots>
  • 5. JAXP Parsing Strategies SAX SAX -- Simple API for XML Subclass DefaultHandler Simple Parser Implement Notification Methods ("Callbacks") DOM -- Document Object Model startElement(...) // handles Represent XML Doc as Tree of Nodes in Memory open tag <a_tag> endElement(...) // handles close tag </a_tag> characters(...) // handles http://sax.sourceforge.net/ stuff in between Read in the XML File http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JAXPIntro.html mydots.xml SAX Example SAXParserFactory factory = SAXParserFactory.newInstance(); <dots> SAXParser saxParser = factory.newSAXParser(); <dot x="81" y="67" /> saxParser.parse( <dot x="175" y="122" /> new BufferedInputStream(new FileInputStream( <flip> new File(argv[0]))), new XMLDotReader()); <dot x="175" y="122" /> <dot x="209" y="71" /> </flip> XMLDotReader Class <dot x="209" y="71" /> • Maintains flip state in boolean <flip> • extends DefaultHandler <flip><dot x="133" y="877">My Favorite Dot!</dot></flip> • overrides startElement(...) <dot x="1" y="2"/> • Check if dot tag or flip tag </flip> </dots> • Do stuff, accordingly • overrides endElement(...) • If flip tag... "unflip" DOM DOM Example // Step 1: create a DocumentBuilderFactory Get a DocumentBuilder // and setNamespaceAware DocumentBuilderFactory dbf = Read in an XML File, DocumentBuilderFactory.newInstance(); dbf.setNamespaceAware(true); get a Document object // Step 2: create a DocumentBuilder Traverse the Document DocumentBuilder db = dbf.newDocumentBuilder(); object and do stuff // Step 3: parse the input file to get a Document object Document doc = db.parse(new File(filename)); http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JAX Node n = (Node) doc; PDOM.html#wp79996 ... int type = n.getNodeType(); for (Node child = n.getFirstChild(); child!=null; child=child.getNextSibling()) { ... } http://java.sun.com/developer/earlyAccess/xml/examples/DOMEcho/DOMEcho.java
  • 6. SAX vs. DOM Other Java Parsers SAX -- Event Driven, Serial Access, Element by There are other free parsers out there, that use Element either SAX or DOM strategies... Preferred for Server Side Apps “nanoxml” DOM -- Read in whole XML structure, CPU & “JDOM” memory intensive Ideal for interactive apps (Thick Clients); allows interactive editing of XML structure in memory XML Uses Strengths and Weaknesses Config Files Strengths Weaknesses Apple Property List Just Text: Compatible Verbose/Redundant with Web/Internet Trouble modeling Data Files Protocols overlapping data SVG Human + Machine structures (non Readable hierarchical) Messages SOAP Represents most CS datastructures well Strict Syntax → Parsing Fast and Efficient JavaScript Invented by Netscape Communications Cross Platform, Object-based, Scripting Five Minute Break Language ECMAScript (ECMA-262)
  • 7. JavaScript JavaScript All Client Side HTTP Request Can Adjust HTML HTTP Response Open Windows, Resize Windows Client runs JavaScript HTML file with Animations, Play Sounds embedded JavaScript Cannot Access File System Do Networking JavaScript JavaScript Basics Advantages <script> section in HTML runs on document Better User Experience load (2X Latency) No type declarations Disadvantages undefined if not given a value Thicker Client Global variables by default Possible Abuse var makes them local Generate Dynamic HTML JavaScript and Browser ... <BODY> document – HTML document ...Regular HTML Here.... document.name – named element in document <SCRIPT TYPE="text/javascript"> document.images – array of images <!-- document.forms – array of forms BUILD HTML HERE!!! //--> Ways to access window, cookies, etc. </SCRIPT> ...More Regular HTML.... </BODY>
  • 8. document.write(“String”) document.write(“String”) <HTML> <HEAD><TITLE>Hello!</TITLE></HEAD> <BODY> <H1> First JavaScript Page </H1> <SCRIPT TYPE="text/javascript"> <!-- document.write("<HR/>"); document.write("Hello WWW!"); document.write("<HR/>"); //--> </SCRIPT> </BODY> </HTML> <BODY> document.write(“String”) <H1> Extracting Info! </H1> <SCRIPT TYPE="text/javascript"> <HTML> <!-- <HEAD><TITLE>Hello!</TITLE> document.writeln("<UL>"); <SCRIPT TYPE="text/javascript"> document.writeln("<LI>" <!-- + document.location); function referringPage() { document.writeln("<LI>“ if (document.referrer.length == 0) { + referringPage()); return("<I>none</I>"); document.writeln("<LI>" } else { + navigator.appName); return(document.referrer); document.writeln("</UL>"); } //--> } </SCRIPT> //--> </BODY> </SCRIPT> </HTML> </HEAD> document.write(“String”) Monitor User Events <input type="button" value="Don't Click Me!" onClick="dontClick()"/> function dontClick() { alert("I told ya not to click!"); }
  • 9. Monitor User Events DOM JavaScript is Object-Oriented JavaScript Interacts with Document Object Model of Browser DOM Not Totally Standardized www.devguru.com Objects Arrays or Objects? The Same! a.foo <=> a["foo"] <=> a[x] a[2] cannot be accessed as a.2 http://www.devguru.com Global Functions Communicating with User escape(string) Alert window.alert("Hello!"); unescape(string) Confirm window.confirm("Delete files? =D") Safe Strings Status Bar window.status = "Hi!"; ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 @*-_+./ Unsafe Strings => %20, %5c, etc...
  • 10. <html> <head> <body> <title>JS Demo</title> <p> <script language="JavaScript"> <button onClick="hello('hi there');" >Say Hello</button> function hello(greeting) { <br><button onClick="upCount();" >Count</button> var str = greeting + "!!!"; <br><a onClick="alert('holy ####!')">oops</a> alert(str); <p> } Thing you are afraid of... count = 0; <form name=affirm> function upCount() { <input type=text name=fear> count++; <p><input type=button onClick="noFear();" value="No Fear"> alert(count); Mock mode:<input type=checkbox name=mockMode> } <p><input type=text size=40 name=mock> function noFear() { </form> var fear = document.affirm.fear.value; </body> if (!document.affirm.mockMode.checked) { </html> alert("No " + fear + " to be seen around here!"); } else { var mock = "Being afraid of " + fear + " is stupid!"; window.status = mock document.affirm.mock.value = mock; } } </script> </head> Fear Example Quotes Example Text Box <form name=form1 onsubmit="setQuotes('form1'); return false;"> Search: <input type=text name=target > <input type=submit value=Submit> </form> Text Box <input type=text name=target onKeyUp="setQuotes('form2');"> // Search for an element with the given id and set its innerHTML to // the given text. function setText(id, text) { <script language="JavaScript"> var node = document.getElementById(id); if (node != null) { // We allocate a global array and fill it with the quote data. node.innerHTML = text; lines = new Array(); //node.childNodes[0].data = text; // alternative for some simple tags lines.push("Everybody's always telling me one thing and out the } other."); } lines.push("Even a fish could stay out of trouble if it would // Given the name of a form, access the target field within that just learn to keep its mouth shut."); // form and using its target text, generate the quote list and put lines.push("Beware the lollipop of mediocrity -- lick it once // it into the result tag. and you suck forever."); function setQuotes(form_name) { lines.push("We don't have time to stop for gas -- we're already // cute: use [] instead of . to access the form by name late."); var target = document[form_name].target.value; lines.push("By doing just a little each day, I can gradually let var contents = ""; the task overwhelm me."); target = target.toLowerCase(); lines.push("Being powerful is like being a lady. If you have to for (var i in lines) { tell people you are, you aren't."); if (lines[i].toLowerCase().indexOf(target)!=-1) { lines.push("Never attribute to malice that which can contents = contents + "<li>" + lines[i] + "n"; satisfactorily be explained by incompetence."); } } setText("result", contents); } </script>
  • 11. JavaScript Summary Good For Simple Things Save RT Latency Bad when Abused Popups!!! Don't Always Rely on It DOMs not standardized