JavaScript and jQuery

MDST 3559: DataestheticsProf. Alvarado

02/10/2011

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

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

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

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

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” />

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

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”?

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

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

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”

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>”

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

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

alert(“BOO”);

Function name Argument

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

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 ...

document.write(“BOO”);

Object Function (or method)

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

<ponmouseover=“document.write(„Ouch!‟)”>

Touch Me

</p>

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)

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”

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”

Exercise 4 (cont’d)

• Save the file and refresh your browser

• Move your mouse over the “Touch Me” text

• See what happens ...

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

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>

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

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 ...

<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>

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>

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>

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

• x

CSS + jQ

uery

+ DO

M

DO

OM