Lecture 6 Log into Linux client or into csserver directly webspace
advertisement
Lecture 6
●
●
●
●
●
Log into Linux client or into csserver directly
Change to subdirectory cs350/pizza in
webspace
cp ~hwang/cs350/lecture06/*.* .
Load pizza-v2.html, pizza-v2.css, and
pizza-v2.js into a text editor
Browse to
http://csserver.evansville.edu/~username/cs350/pizza/
pizza-v2.html
September 16, 2014
CS 350 - Computer/Human Interaction
1
Outline
●
Example of pulldown menu and multi-selection
boxes
●
Finish CSS
●
JavaScript
●
References: CSW3, JSW3, JSRF
September 16, 2014
CS 350 - Computer/Human Interaction
2
CSS Properties
●
Other common styling properties:
display for controlling layout
–
Default depends on element. E.g. <span> is inline, <p>
is block
float for arranging elements relative to each other
–
Default is none, element is rendered as placed in the text.
Also left, right. Usually used with <div>.
clear for making elements start after floating elements
–
Default is none, elements may float on both sides. Also
left, right, both
September 16, 2014
CS 350 - Computer/Human Interaction
3
Interaction with CSS
●
There are a few types of interaction that can be
specified by CSS rules
nav ul li:hover {
cursor: pointer;
}
September 16, 2014
CS 350 - Computer/Human Interaction
4
HTML DOM
●
●
Reference: JSDM
The HTML DOM (Document Object Model) is a
standard object model and programming
interface for HTML. It defines:
–
The HTML elements as objects
–
The properties of all HTML elements
–
The methods to access all HTML elements
–
The events for all HTML elements
September 16, 2014
CS 350 - Computer/Human Interaction
5
HTML DOM
●
The HTML DOM describes a document as a
hierarchy of element objects.
–
Nested elements are children of parent element.
–
Attributes (including style) are children of an
element
–
Text inside elements are children that are text
objects
September 16, 2014
CS 350 - Computer/Human Interaction
6
HTML DOM Example
<html>
<head>
<title>My title
</title>
</head>
<body>
<a href="#">My link
</a>
<h1>My header</h1>
</body>
</html>
September 16, 2014
CS 350 - Computer/Human Interaction
7
JavaScript
●
●
●
JavaScript is an untyped, object-oriented
scripting language with syntax similar to C++
and Java
Although general purpose programs can be
written using JavaScript, it mostly is used to
provide client-side dynamic behavior by
manipulate the HTML DOM of a webpage.
Variables are declared, but not typed
var navItem;
September 16, 2014
CS 350 - Computer/Human Interaction
8
JavaScript and HTML DOM
●
●
document is the document object. There are
also defined browser objects, e.g. window.
In addition to children elements, nodes have
properties. E.g.,
–
parentNode, childNodes (an array)
–
innerHTML, the text of a node that can be used to
insert elements by using the tags in the assigned
string (only after the page is loaded completely)
September 16, 2014
CS 350 - Computer/Human Interaction
9
Getting References
●
Lots of different ways to get references to
nodes, here are a few:
.getElementsByTagName ("tag"), an array
.getElementsByClassName("class"), an array
.getElementsById ("id"), a node
●
Attributes are accessed/set
.getAttribute("attr"), null or empty string if not set
.setAttribute("attr", "newvalue")
.hasAttribute("attr"), bool
September 16, 2014
CS 350 - Computer/Human Interaction
10
Attributes as Properties
●
Standard attributes may be accessed as
properties
var id = element.id;
●
Styling can be accessed as properties of the
style attribute property
var width = element.style.width;
●
Attributes with hyphens convert to camel case
var bkcolor = element.style.backgroundColor;
September 16, 2014
CS 350 - Computer/Human Interaction
11
Script Tag
●
Scripts are enclosed in the <script> tag
●
The code can be in-line
<script>
// HTML comments are not legal in scripts
var year = document.getElementById("endyear");
var dt = new Date(); // today's date
year.innerHTML = dt.getFullYear();
</script>
●
Or in an external file (usually just functions)
<script src="pizza-v2.js"></script>
September 16, 2014
CS 350 - Computer/Human Interaction
12
Script Execution
●
●
●
Scripts are executed when <script> is
encountered in the HTML text.
Scripts in <head> usually are used for things
that done when the document loads
Must be careful that scripts in <body> are after
the creation of the object that is being
manipulated. General recommendation that
body scripts go at the end of file for rendering
efficiency.
September 16, 2014
CS 350 - Computer/Human Interaction
13
Event Handling
●
●
Most scripts are executed in response to an
event. Need to connect handler to its event.
Old style, attribute of element tag is a string that
is executed. Usually a function call.
<form onclick="return checkForm(this);" ... >
●
Modern style, set an event property. Makes
handler a method of object and defines this.
window.onload = function () { ... }
tabs[i].onclick = displayPage;
September 16, 2014
CS 350 - Computer/Human Interaction
14
Example: Tabbed Behavior
●
To get tabbed behavior, first give each <nav>
list item (tab) and each <section> an id that
can be used to compute their relationship
tabnav_# for each tab, 1-4
tabpage_# for each tab, 1-4
●
Define a function in the head section to be run
when the page is loaded into the window
–
–
–
Sets the attributes of the default current tab (first page)
Hides all but the first page
Connects the click handler to each tab
September 16, 2014
CS 350 - Computer/Human Interaction
15
Example: Tabbed Behavior
●
HTML5 added non-presentation attributes. Any
attribute with name starting with "data-" is
allowed and ignored in rendering.
–
●
data-current is used in the parent of the tabs
(<ul>) to keep track of which tab is open
displayPage function in pizza-v2.js
–
–
–
make the current tab/page go away
make the new tab/page appear
done by changing the color properties of the tabs
and the display property of the sections
September 16, 2014
CS 350 - Computer/Human Interaction
16
jQuery
●
●
●
●
jQuery is a framework that makes manipulating
documents easier.
It also defines methods for numerous, common
patterns such element fade in/out, element
slides, and simple animation. There also are
lots of plug-ins.
W3School has a nice tutorial.
Either download jQuery file to local host, or use
URL from a CDN (Content Delivery Network)
such as Google or Microsoft.
September 16, 2014
CS 350 - Computer/Human Interaction
17
