cis 270
client-side web programming [javascript]
jbwyatt.com
Student is responsible for notes, readings and classroom discussions. Notes may be changed, emphasized, re-ordered or skipped over.
Assignments:
0: Simple
|
1
|
2
|
3
|
4
|
X
|
6
I.
1.
Course Intro
who, what, where, why?
2.
Background & Web Intro
hw & representation
|
web primer intro
|
sample
3.
Web Primer
design
|
users
|
standards
|
security
html
-
try
|
css
-
demo
|
js
-
try
4.
HTML Elements
intro
|
elements (tags)
|
attributes
|
html, source
head, title
|
body
|
h1-h6, hr
|
p, br
|
lists
|
links
img
|
comment
|
formatting
|
style
|
script
5.
HTML Examples
quick list
|
ALL tags
|
html examples
6.
Color, RGB and Hex
web colors
|
names
|
hex values
|
calculator
about hex
|
what the hex?
|
allrgb pix
|
2^24
7.
XHTML / HTML 4
q1
|
why?
|
xhtml vs. html
|
rules
|
dtd doctype
validating xhtml
|
tag reference
8.
CSS Intro & div & span
intro
|
syntax
|
style
|
how to insert styles
div
|
span
|
id & class
9.
CSS Styling of Elements
background
|
text
|
font
|
links
|
lists
|
examples
mikes plain
|
mikes css
|
css file
|
mikes final
A.
CSS Display
box model
|
grouping
|
dimension
display
|
positioning
|
float
|
align
B.
CSS Reference & Examples
css examples
|
reference
|
reference[a-z]
zengarden.com
|
plain
|
+style
|
++images
C.
Summary & Review
css examples
|
html examples
|
css quiz
|
html quiz
TEST 1
:
CAP
II.
1.
Test Review & JavaScript Intro
intro
|
how to
|
where
|
js statements
|
examples
2.
EJS Book / Expression / Assignment
eloquent javascript: ch1
|
ch2
comments
|
variables
|
operators
|
examples
3.
Javascript Decisions & Loops
condition
|
if..else
|
switch
|
for
|
for in
|
while
break
|
javascript examples
4.
XHTML, CSS & Javascript
code: html, css and js integration
my examples: loops, if, prompt, write
5.
Dom Objects, Methods, Events
DOM
|
intro
|
node tree
|
methods
*changing HTML
|
DOM events
|
DOM examples
6.
DOM Intro: getElementById, innerHTML
assign 2
|
solution
|
CSS Id
|
getElementById
my examples innerHTML, getElementById
7.
Arrays & Loops
assign 2
|
solution
|
arrays
|
for
|
for in
8.
Arrays & DOM & Functions
functions
|
events
|
my examples: arrays
9.
Debug: Firebug & WebDeveloper
ski free (set break line 86 in runSki)
firebug
|
firebug doc
|
web developer
A.
More Javascript Functions & Events
functions
|
functions & params
|
functions & params
params & return
|
ejs: ch 3 functions
B.
Arrays: length, push, pop, shift, unshift, sort, join
array intro
|
array reference
ejs: ch4 arrays (1/3, mail archive ex.)
C.
Math Object | Summary & Review
math obj
|
math
TEST 2:
CAP
III.
1.
Canvas
canvas graphics 1
-
2
|
cool js
|
gol
google experiments
|
interactive graphics tutor
2.
Popups, Forms & Input
popups
|
html forms
|
input
3.
Validation
validating forms
validating strings,dates
[JS] |
[CSS]
temperature: c2f/f2c
[JS]
[CSS]
4.
Objects: Strings, Dates, Numbers
objects
|
strings
|
dates
|
create a new object with properties & methods
global # functions
5.
Javascript Code: Games
!local ski (break in goS())
|
!local flood
!local scribble
|
kanji
|
lemoda js
6.
Javascript Code: Ski
ski free game (break in skiFree)
|
!local ORIGINAL ski WITH commnets
7.
Javascript Code Examples
task list
[JS]
|
recursive search
slide show rollover
|
slide show
|
invoice manager
8.
jQuery Library
gettig started with jQuery
|
jQuery tutorial
official jQuery site
9.
HTML 5
25 html 5 features
A.
Cognitive Issues
cognitive issues
B.
Summary
C.
Review
TEST 3:
 
CAP
Documenting Code
|
Honesty
|
Grades
|
Syllabus (pdf)
|
!Q
WEBSITES:
1.
w3 schools
|
web glossary
|
validation & QA
|
certification
|
tryit editor
2.
sitepoint
|
css/html/js reference
|
CSS cheat
3.
browser size
|
browser stats
4.
js tutor
|
js tutor 2
|
reg exp
SOFTWARE:
1.
notepad++
|
firefox
|
fireftp
2.
firebug
|
code burner for firebug - doc
|
fire rainbow: color for firebug
3.
web developer
4.
paint.net
|
gimp
|
pixlr image editor
|
sketchpad
REFERENCES:
1.
jQuery library
2.
YouTube: javaScript teacher (4 videos)
3.
smashing magazine
4.
tizag tutor
|
html dog tutor
TEXTS:
1.
Learn HTML and CSS with W3Schools
(amz)
(bookstore)
2.
Learn CSS with W3Schools
(amz)
(bookstore)
3.
Learn JavaScript and Ajax with W3Schools
(amz)
(bookstore)
4.
Eloquent JavaScript [free]
*
(zip file)
(author site)