mdst 3559-02-10-jquery
TRANSCRIPT
![Page 1: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/1.jpg)
JavaScript and jQuery
MDST 3559: DataestheticsProf. Alvarado
02/10/2011
![Page 2: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/2.jpg)
Business
• Install VPN
• For each day, create a subdirectory in your STUDIO1 public_html directory
• Name it “MM-DD”, e.g. 02-10
http://studio1.shanti.virginia.edu/~rca2t/02-10/
• Use the file browser in jEdit to create directories
– You may also use FileZilla to do this
![Page 3: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/3.jpg)
Review
• Documents are data structures
• Data structures have addressable elements
• CSS selectors are a language for addressing elements
• Exercise
– Mark up a text using structural HTML – DIVs, IDs, and classes
– Use CSS to format these
![Page 4: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/4.jpg)
Review
• See finished example
– http://studio1.shanti.virginia.edu/~rca2t/dataesthetics/02-08
• View and discuss source
• Effects
– Centered page look
– Different background colors
– “Tr.” prefix
![Page 5: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/5.jpg)
Review—Extra
CSS can be put into an external file
e.g. styles.css
and then linked to the HTML file via a special LINK element with attributes
– rel=“stylesheet”
– type=“text/css”
– href=“style.css”
So, many pages can share the same style sheet
![Page 6: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/6.jpg)
Review—Extra
• Open up jEdit
• Create a new document in your public_htmldirectory called style.css
• Cut and paste the styles from your Poetics into style.css
• Delete the style element from your Poetics doc
• Add the LINK element ... <link rel=“stylesheet” type=“text/css” href=“styles.css” />
![Page 7: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/7.jpg)
Sidenote on jEdit
• The XML and SideKickpluginsare useful in viewing your documents– XML plugin completes tags and
shows where end tags are – Sidekick gives a collapsible
outline view of the your document
• You can control how the XML plugin in the Plugin Options window– Plugins>Plugin Options > XML >
XML
![Page 8: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/8.jpg)
Overview
• We see how CSS can control appearances by means of selectors
• Today we will see how CSS selectors to control behavior
• What do we mean by “behavior”?
![Page 9: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/9.jpg)
Behavior
• Examples
– Toggling visibility
– Moving elements
– Effects, such as fades and collapsable elements
• See Lived Theology Site
– https://dev1.shanti.virginia.edu/livedtheology/node/67
![Page 10: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/10.jpg)
Language
• Behaviors in web pages are controlled through a client-side scripting language called JavaScript
• JavaScript comes built into most browsers
• If the web page has some JavaScript code inside of it, the browser will “execute” or “run” that code
• The code controls the behavior of the elements in the document
![Page 11: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/11.jpg)
JavaScript
• Has nothing to do with the language Java
– Just a marketing ploy from the 1990s
• Copied by Microsoft as Jscript
– Solved some Y2K problems
• Also called ECMAScript (gah!)
– International standard version:
– “an unwanted trade name that sounds like a skin disease”
![Page 12: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/12.jpg)
JavaScript
• JavaScript programs are included with documents, just like CSS– Either directly on the page
– Or in a separate linked document
– The 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>”
![Page 13: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/13.jpg)
Exercise 1
• Create a new page (in today’s directory) called “js1.html”– Create head and body elements; leave the latter
empty
• In the head element, add the following script element:<script type=“text/javascript”>
alert(“BOO”);
</script>
• Then view the page in your browser
![Page 14: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/14.jpg)
JavaScript Functions
• You’ve just used a “function”
• All programming languages have functions
• Functions may do three things:
– They can take information in via “arguments”
– They can do stuff with that information
– They can “return” information
![Page 15: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/15.jpg)
alert(“BOO”);
Function name Argument
![Page 16: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/16.jpg)
Exercise 2
• Comment out the alert() function
– Comments are lines of code that don’t get run
– Prefix 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
![Page 17: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/17.jpg)
Objects
• You have just executed a function associated with an object– documentis the “object” – one of many built in
– writeis 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 into– Just be prepared for the dots ...
![Page 18: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/18.jpg)
document.write(“BOO”);
Object Function (or method)
![Page 19: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/19.jpg)
Exercise 3
• Now comment out document.write()
• Create a P element within the BODY and insert “Touch Me” within the P element
• Add 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 argument
• Refresh your browser and view
• Move mouse over the “Touch Me” text
![Page 20: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/20.jpg)
<ponmouseover=“document.write(„Ouch!‟)”>
Touch Me
</p>
![Page 21: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/21.jpg)
Events
• You’ve just triggered an “event”
• Events are things that happen outside of program but which “trigger” a function to be called
• JavaScript has several such event functions
– onMouseOver, onClick, onBlur
• These can be invoked as methods or as attributes (which is very slick)
![Page 22: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/22.jpg)
Exercise 4
• Comment out the previous exercise
• Create two DIV elements with the following IDs: “source” and “target”
• In DIV#source add the attribute
– onmouseover=“touchme()”
• In the SCRIPT element write your own function called “touchme”
![Page 23: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/23.jpg)
function touchme () {
document.getElementById(“target”).innerHTML = “Ouch!”;
}
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.
This function calls the object “document” and then the methods “getElementById” and then “innerHTML”
![Page 24: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/24.jpg)
Exercise 4 (cont’d)
• Save the file and refresh your browser
• Move your mouse over the “Touch Me” text
• See what happens ...
![Page 25: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/25.jpg)
Observations ...
• We create a function
• The function called an object, which called it’s own methods (functions)
• We used a function, getElementById
• There are also functions called getElementByClassNamein newer versions of JS
• These turns out to be a pain to use
• Not only long-winded, but requires looping through functions – no use of selectors
![Page 26: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/26.jpg)
jQuery
• jQuery is a “library” of functions designed to make JavaScript easer to use
• You load this library by creating a new, empty SCRIPT element and using the SRC attribute to point to the file that contains the library– Just like pointing to an external CSS document
• SCRIPT elements can be singletons, though; they must be closed with closing tage.g. <script type=“” src=“”></script>
![Page 27: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/27.jpg)
jQuery
• jQuery is very easy to use, but it may look complicated at first
• It helps to have a basic idea of what functions, objects, and events look like
![Page 28: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/28.jpg)
Exercise 5
• Create a copy of your Poetics document in the same place called poetics-js.html
• In the head element, create the following elements ...
![Page 29: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/29.jpg)
<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>
![Page 30: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/30.jpg)
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>
![Page 31: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/31.jpg)
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.part
– The 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>
![Page 32: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/32.jpg)
Assignment
• Add the rest of the Parts to Section 1 of the poetics
– Get text from the Internet Classics Archive
– See link on course blog for 02-08
• Mark up text for parts, titles, paragraphs
• Provide styles for each element class and ID
• Add other Parts to tab structure
![Page 33: Mdst 3559-02-10-jquery](https://reader034.vdocuments.mx/reader034/viewer/2022042707/5a6ddf5c7f8b9a7a058b4a39/html5/thumbnails/33.jpg)
• x
CSS + jQ
uery
+ DO
M
DO
OM