PIC40A Review Notes

Format of the exam

• One A-4 size handwritten cheat sheet (both side can be used)
• 4 questions
• finding output of html file or javascript
• write html file
• write javascript program
• write CSS file
• find mistakes of html files or javascript
• The exam may be long. You have to be very familiar with the material and can answer any question immediately!

Basic Unix

• how to create a folder?
• how to made it accessible? (chmod 755 folder)
• how to change folder? (cd)
• how to list file in a folder? (ls)
• how to made a file accessible (chomod 644 filename)

Basic HTML

W3C standard

Common mistakes

• forget end tag
• use uppercase letter
• <br>(should be <br />)
• no quotation in value of attributes (e.g. size=5, should be size="5")
• non-standard tag or attributes.

Other stuff you should know

• p, br, h1, h2, ..., blockquote, code, em, strong, b, i, sub, sup , tt, pre, hr
• specical charater e.g. >, < & should be written as &gt;, &lt;, &amp;
• img: understand src, alt, height, width
• link:
  • reltaive URL vs alsolute URL
  • a tag
  • understand id, example <h2 id="section1"> Section 1 <h2>, then <a href="#section1"> Link to section 1 <a> will take you to the section on the same page.
• list: ul, ol, li, dl, dt
• table:
  • caption, th, tr, td
  • rowspan, colspan
  • border, cellspacing, cellpadding
• frame:
  • e.g. <frameset cols="40%, 20%, 40%"> or <frameset cols="200, *">
  • how to use frame
  • how to use name attribute in frame
  • how to use target attribute in a tag

CSS

• learn 3 different ways to define CSS: (1) use inline, (2) in the head (3) external file. Understand the rules to determine which style should be used if the same tag is defined twice.
• know the basic sytac
• Only matrial from the book (except 3.5.5 and 3.7) will be tested
• Color and background image: read section 3.5.1 and 3.6
• understand style classes, how to define them, how to use them. there are 2 types.

Javascipt

Basic

• how to use script tag
• comment in javascript
• how to input other javascript file
• what is the difference beteen javascript in head tag and body tag
• functions are usually put in the head tag
• alert, confirm (return true or false), prompt(return a string)
• document.writeln, document.write
• how to define variables
• type can be changed easily
• parseFloat, parseInt
• use isNaN to test if something is not a number
• Math: understand different methods, e.g. max, floor, etc, see the book
• String:
  • integer, numbers, etc can be added to strings
  • understand the methods listed in the book, charAt, indexOf, substring, toLowerCase, toUpperCase
• == vs ===

Function

• how to write a function
• better put between head tag

Object

• similar to structure
• how to create an object? Object x = new Object()
• assignment: x.somename = ...
• can use x["somename"] to access the data
• delete x.somename
• understand for(var name in x)

Array

• how to define, declare an array
• how to access and array
• length
• elements can be undefined
• join, sort, slice, pop, push, reverse

Form

html

• understand form tag
• understand different input type
  • text, password, file
  • checkbox, radio buttons
  • textarea
  • select
  • button, submet, reset
  • textarea
• understand name
• understand value

Event

• onclick, onchange, onfoucs, onsubmit(for form and submit button), onmouseover, onmouseout

How to access tag in javascript

• use id, document.getElementById(some_id, need id attribute for the tag
• use index,
  • doucment.forms[i] (the i-th form)
  • document.forms[i].elements[j] (the j-th element of the i-th form)
  • document.images[i] (the i-th image
• use name
  • document.name
  • document.forms[i].name

What can you change?

• background image: document.body.background
• background color: document.bgColor
• src of an image: img.src, in general, tag.atribute. e.g. img.alt, some_text_field.value
• style: tag.style.style_property e.g.
  if <h3 id="abc" style="color:yellow;background:#223344;font-family:arial" >
  Then document.getElementById("abc").style.color = red can change color.
  document.getElementById("abc").style.fontFamily = ... can change the font. Notice that font-family has a "-" between words, so we have to remove it and use upper case F.
• class: use tag.style.className
• value: tag.value