The first test will be given in class on Wednesday, February 18. The test will have both conceptual, essay-type questions and coding questions involving HTML, CSS, and JavaScript. Some questions will involve manipulating the DOM and using timers.
web browsers and web servers
client-side vs. server-side programming
cookies and why they are necessary
separating content, presentation, and control (programming)
HTML for content; CSS for presentation; JavaScript for programming
the Document Object Model
how the DOM represents an HTML document
how manipulating the DOM can affect the displayed web page
the basic structure of an HTML document
the purpose of the "<!DOCTYPE ..." declaration at the start of an HTML document
tags, elements, and attributes
block-displayed elements vs. in-line elements
what is the purpose of the <div> and <span> tags?
the class, id, and style attribute
specific tags you should be able to use:
<html>, <head>, <title>, <body>, <h1>, <h2>, <h3>, <p>,
<ul>, <li>, <style type="text/css">, <script type="text/javascript">
<div>, <span>
other tags you should be able to understand (and use if you have a reference):
<img src="...">, <a href="...">, <br>, <hr>
<script type="text/javascript" src="...">
<link rel="stylesheet" type="text/css" href="...">
<input type="button" value="Click Me!" onclick="...">
<table>, <tr>, <td>
CSS selectors and CSS properties
three places to use CSS: in-line style attributes
the <style> element
style sheets in CSS files
CSS syntax for style elements and style sheets:
selector {
property: value;
...
}
selectors you should be able to use:
simple selectors, such as: "h1" or "p"
id selectors, such as "#content" or "#intro"
class selectors, such as ".quotation" or "div.centered"
nested selectors, such as "p b" or "#content p" or "ul.prizelist li"
properties you should be able to use:
color -- with color values such as: red, blue, rgb(100,100,255)
background-color
display -- with values: none, block, inline
position -- with values: static, relative, absolute
left and top -- with values such as 1cm, 30px, 20%
width and height
margin-left, etc.
padding-left, etc.
other properties you should be able to understand (and use, with a reference)
background-image -- with values such as: url(meandfred.jpg)
font-family -- with values such as: Verdana, Arial, sans-serif
font-weight -- with values such as: bold, normal
font-size -- with values such as: 80%, 12px
text-align -- with values: right, center, none
text-indent -- with values such as: 1cm, 7em
max-width, max-height -- with values such as: 80%, 600px
border -- with a value such as: thick solid red
list-style-type -- with values: none, disk, decimal, lower-roman...
JavaScript control structures such as if, for, while (basically same as Java)
JavaScript operators and expressions (basically same as Java)
JavaScript variables are untyped
JavaScript does automatic type conversion, such as string "57" to number 57
declaring variables with var
Strings in JavaScript, and using the "+" operator with strings
objects in JavaScript
object literals such as {} or { x: 3; y: 4}
adding new properties to objects just by assigning them values: pt.z = 17;
arrays in JavaScript
array literals such as [] or [ 1, 2, 3 ] or [ "fred", 27.83, true ]
defining and using functions
functions can take variable numbers of arguments
function literals such as: function(x) { return x*x }
using functions as data (e.g. passing them as parameters, storing them in arrays)
JavaScript has no classes
using constructors to create objects, as in: new Date(2009,1,18)
constructor functions; using this in the definition of a constructor function
e.g.: function Point(a,b) { this.x = a; this.y = b; }
methods (object properties that are functions)
the prototype object of an object
adding methods to a class by assigning functions to the constructor's prototype,
e.g.: Point.prototype.norm =
function() { return Math.sqrt(this.x*this.x + this.y*this.y) };
document.write(...) -- and when it can be used
alert(message)
document.getElementById("xxx")
assigning a new value to the innerHTML property of an element node
adding new content to an element node with element.appendChild(newNode)
the style property of an element, and how to use it to modify styles,
e.g.: document.getElementById("xxx").style.fontWeight = "bold";
myImage.style.width = "100px";
setTimout(function,milliseconds)
setInterval(function,milliseconds)
how setInterval can be used to do animation
how clearInterval can be used to stop an animation