Mdst 3559-02-10-jquery
- 1. JavaScript and jQueryMDST 3559: DataestheticsProf. Alvarado02/10/2011
- 2. BusinessInstall VPNFor each day, create a subdirectory in your STUDIO1 public_html directory Name it “MM-DD”, e.g. 02-10http://studio1.shanti.virginia.edu/~rca2t/02-10/Use the file browser in jEdit to create directories You may also use FileZilla to do this
- 3. ReviewDocuments are data structuresData structures have addressable elementsCSS selectors are a language for addressing elementsExerciseMark up a text using structural HTML – DIVs, IDs, and classesUse CSS to format these
- 4. ReviewSee finished example http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/02-08View and discuss sourceEffectsCentered page lookDifferent background colors“Tr.” prefix
- 5. Review—Extra CSS can be put into an external filee.g. styles.cssand then linked to the HTML file via a special LINK element with attributesrel=“stylesheet”type=“text/css”href=“style.css”So, many pages can share the same style sheet
- 6. Review—Extra Open up jEditCreate a new document in your public_html directory called style.cssCut and paste the styles from your Poetics into style.cssDelete the style element from your Poetics docAdd the LINK element ... <link rel=“stylesheet” type=“text/css” href=“styles.css” />
- 7. Sidenote on jEditThe XML and SideKickplugins are useful in viewing your documentsXML plugin completes tags and shows where end tags are Sidekick gives a collapsible outline view of the your documentYou can control how the XML plugin in the Plugin Options windowPlugins > Plugin Options > XML > XML
- 8. OverviewWe see how CSS can control appearances by means of selectorsToday we will see how CSS selectors to control behaviorWhat do we mean by “behavior”?
- 9. BehaviorExamplesToggling visibilityMoving elementsEffects, such as fades and collapsable elements See Lived Theology Sitehttps://dev1.shanti.virginia.edu/livedtheology/node/67
- 10. LanguageBehaviors in web pages are controlled through a client-side scripting language called JavaScriptJavaScript comes built into most browsersIf the web page has some JavaScript code inside of it, the browser will “execute” or “run” that codeThe code controls the behavior of the elements in the document
- 11. JavaScriptHas nothing to do with the language JavaJust a marketing ploy from the 1990sCopied by Microsoft as JscriptSolved some Y2K problemsAlso called ECMAScript (gah!)International standard version:“an unwanted trade name that sounds like a skin disease”
- 12. JavaScriptJavaScript programs are included with documents, just like CSSEither directly on the pageOr in a separate linked documentThe document can be local to the page or remote (anywhere on the web)Included via the SCRIPT element, with atts:type=“text/javascript”src=“<URL>”
- 13. Exercise 1Create a new page (in today’s directory) called “js1.html”Create head and body elements; leave the latter emptyIn the head element, add the following script element:<script type=“text/javascript”>alert(“BOO”);</script>Then view the page in your browser
- 14. JavaScript FunctionsYou’ve just used a “function” All programming languages have functionsFunctions may do three things:They can take information in via “arguments”They can do stuff with that informationThey can “return” information
- 16. Exercise 2Comment out the alert() functionComments are lines of code that don’t get runPrefix a line with a double forward slash, e.g. //Also wrap multiple lines with /* ... */Insert the following line:document.write(“Hello, World!”);Refresh the page in your browser
- 17. ObjectsYou have just executed a function associated with an objectdocumentis the “object” – one of many built inwriteis the function, also called a “method”The object and function are separated by a dot ...There is a whole theory of programming called “object oriented programming” which we will not get intoJust be prepared for the dots ...
- 19. Exercise 3Now comment out document.write()Create a P element within the BODY and insert “Touch Me” within the P elementAdd the following attribute to the P element:onMouseOver=“document.write(‘Ouch!’)”Be careful to use double quotes for the attribute and single quotes for the argumentRefresh your browser and viewMove mouse over the “Touch Me” text
- 21. EventsYou’ve just triggered an “event”Events are things that happen outside of program but which “trigger” a function to be calledJavaScript has several such event functionsonMouseOver, onClick, onBlurThese can be invoked as methods or as attributes (which is very slick)
- 22. Exercise 4Comment out the previous exerciseCreate two DIV elements with the following IDs: “source” and “target”In DIV#source add the attributeonmouseover=“touchme()”In the SCRIPT element write your own function called “touchme”
- 23. All functions preceded by word “function” followed by the name of the function (no spaces) then parentheses for arguments (this one has none)then curly braces for content (like CSS).These can be called like any built in function.function touchme () {document.getElementById(“target”).innerHTML = “Ouch!”;}This function calls the object “document” and then the methods “getElementById” and then “innerHTML”
- 24. Exercise 4 (cont’d)Save the file and refresh your browserMove your mouse over the “Touch Me” textSee what happens ...
- 25. Observations ...We create a function The function called an object, which called it’s own methods (functions)We used a function, getElementByIdThere are also functions called getElementByClassNamein newer versions of JSThese turns out to be a pain to useNot only long-winded, but requires looping through functions – no use of selectors
- 26. jQueryjQuery is a “library” of functions designed to make JavaScript easer to useYou load this library by creating a new, empty SCRIPT element and using the SRC attribute to point to the file that contains the libraryJust like pointing to an external CSS documentSCRIPT elements can be singletons, though; they must be closed with closing tage.g. <script type=“” src=“”></script>
- 27. jQueryjQuery is very easy to use, but it may look complicated at firstIt helps to have a basic idea of what functions, objects, and events look like
- 28. Exercise 5Create a copy of your Poetics document in the same place called poetics-js.htmlIn the head element, create the following elements ...
- 29. <link rel="stylesheet" type="text/css" href="/~rca2t/jquery/css/smoothness/jquery-ui.css"/><script type="text/javascript" src="/~rca2t/jquery/js/jquery.js"></script><script type="text/javascript" src="/~rca2t/jquery/js/jquery-ui.js"></script>
- 30. Exercise 5 (cont’d)Now, below what you just added, add this bit of code, being very careful with the parentheses and curly braces ...<script>$(function() {$(”#section-1”).tabs();});</script>
- 31. Exercise 5 (cont’d)Next, we will do the following:Insert inside and at the top of DIV#section-1 a UL element with LI and A elements to match each DIV.partThe A elements will have HREF attributes pointing to part DIVs by means of ID selectors <ul> <li><a href="#part-1">Part 1</a></li> <li><a href="#part-2">Part 2</a></li> </ul>
- 32. AssignmentAdd the rest of the Parts to Section 1 of the poetics Get text from the Internet Classics ArchiveSee link on course blog for 02-08Mark up text for parts, titles, paragraphsProvide styles for each element class and IDAdd other Parts to tab structure
- 33. xCSS + jQuery + DOM DOOM