javascript
JavaScript (officially named ECMAScript) is a client side scripting language used to add interactivity to web pages. It is an interpreted programming language which means it is not compiled before it is executed.
Javascript Operators
| Operator | Description |
|---|---|
| + | addition |
| - | subtraction |
| * | multiplication |
| / | division |
| % | modulus (division remainder) |
| ++ | increment |
| -- | decrement |
| == | equal to |
| === | exactly equal to (value and type) |
| != | not equal to |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| && | and |
| || | or |
| ! | not |
| : | conditonal assignment |
Javascript Keywords
The following is a list of words that have a predetermined definition and use in Javscript. These words should not be used when declaring variables or custom identifiers to avoid scripting errors.
- break
- case
- catch
- continue
- default
- delete
- do
- else
- finally
- for
- function
- if
- in
- instanceof
- new
- return
- switch
- this
- throw
- try
- typeof
- var
- void
- while
- with
These words are not keywords, but are still reserved for possible future use in Javascipt.
- abstract
- boolean
- byte
- char
- class
- const
- debugger
- double
- enum
- export
- extends
- final
- float
- goto
- implements
- import
- int
- interface
- long
- native
- package
- private
- protected
- public
- short
- static
- super
- synchronized
- throws
- transient
- volatile
getURLparam Function
Here is a nice little script that parses the window.location.href value and returns the value for the parameter you specify using javascript's built in regular expressions. Thank you Justin Barlow at Netlobo.
Example URL query:
http://www.website.com/index.html?num=123&char=abc
getURLparam('num'); returns the value '123'
getURLparam('char'); return the value 'abc'
function getURLparam(name){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return results[1];
}
getElementsByClass Function
For some reason, there is no DOM method in JavaScript for grabbing elements by a className. We have getElementById, getElementsByName and getElementsByTagName, so how come there is no getElementsByClass? I'm sure it will be added in the future, but until then here is a great function written by Dustin Diaz.
function getElementsByClass(searchClass,node,tag){
var classElements = new Array();
if (node == null)
node = document;
if (tag == null)
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++){
if (pattern.test(els[i].className)){
classElements[j] = els[i];
j++;
}
}
return classElements;
}
document object model [dom]
The DOM is a language-neutral platform that defines the objects and properties of all elements in a document and provides the methods (interface) to access and manipulate them. The DOM presents a document as a tree structure consisting of nodes; everything in a document is a node.
Document
|
Root Element:<html>
/ \
Element:<head> Element:<body>
/ / \
Element:<title> Element:<h1> Element:<a> - Attribute:"href"
| | |
Text:"Title" Text:"Heading" Text:"Link"
Properties
| Property | Description |
|---|---|
Methods
| Method | Description |
|---|---|
hypertext markup language [html]
HTML is a markup language that describes web pages. An HTML document is also called a web page.
Basics
Tags
- Tags are the basic building blocks of HTML.
- Tags are used by the browser to interpret the content of the page.
Elements
- An element starts with an opening tag and ends with closing tag.
- The element content is everything between the opening and closing tags.
- Some elements have empty content, these are closed in the opening tag (self closing).
Attributes
- Attributes provide additional information about elements.
- Attributes are always defined in the opening tag.
- Attributes come in name/value pairs
Example
_____________________html element_____________________
| |
opening tag attribute content closing tag
\ | | /
<a href="index.html">home</a>
| |
attribute name value
Character Entities
Here is a reference table of all special characters and their corresponding codes.
| Character | Number | Name | Description |
|---|---|---|---|
| " | " | " | quotation mark |
| ' | ' | ' | apostrophe |
| & | & | & | ampersand |
| < | < | < | less-than |
| > | > | > | greater-than |
|   | | non-breaking space | |
| ¡ | ¡ | ¡ | inverted exclamation mark |
| ¢ | ¢ | ¢ | cent |
| £ | £ | £ | pound |
| ¤ | ¤ | ¤ | currency |
| ¥ | ¥ | ¥ | yen |
| ¦ | ¦ | ¦ | broken vertical bar |
| § | § | § | section |
| ¨ | ¨ | ¨ | spacing diaeresis |
| © | © | © | copyright |
| ª | ª | ª | feminine ordinal indicator |
| « | « | « | left angle quotation |
| ¬ | ¬ | ¬ | negation |
| | ­ | ­ | soft hyphen |
| ® | ® | ® | registered trademark |
| ¯ | ¯ | ¯ | spacing macron |
| ° | ° | ° | degree |
| ± | ± | ± | plus-or-minus |
| ² | ² | ² | superscript 2 |
| ³ | ³ | ³ | superscript 3 |
| ´ | ´ | ´ | spacing acute |
| µ | µ | µ | micro |
| ¶ | ¶ | ¶ | paragraph |
| · | · | · | middle dot |
| ¸ | ¸ | ¸ | spacing cedilla |
| ¹ | ¹ | ¹ | superscript 1 |
| º | º | º | masculine ordinal indicator |
| » | » | » | right angle quotation |
| ¼ | ¼ | ¼ | fraction 1/4 |
| ½ | ½ | ½ | fraction 1/2 |
| ¾ | ¾ | ¾ | fraction 3/4 |
| ¿ | ¿ | ¿ | inverted question mark |
| À | À | À | capital a, grave accent |
| Á | Á | Á | capital a, acute accent |
| Â | Â | Â | capital a, circumflex accent |
| Ã | Ã | Ã | capital a, tilde |
| Ä | Ä | Ä | capital a, umlaut mark |
| Å | Å | Å | capital a, ring |
| Æ | Æ | Æ | capital ae |
| Ç | Ç | Ç | capital c, cedilla |
| È | È | È | capital e, grave accent |
| É | É | É | capital e, acute accent |
| Ê | Ê | Ê | capital e, circumflex accent |
| Ë | Ë | Ë | capital e, umlaut mark |
| Ì | Ì | Ì | capital i, grave accent |
| Í | Í | Í | capital i, acute accent |
| Î | Î | Î | capital i, circumflex accent |
| Ï | Ï | Ï | capital i, umlaut mark |
| Ð | Ð | Ð | capital eth, Icelandic |
| Ñ | Ñ | Ñ | capital n, tilde |
| Ò | Ò | Ò | capital o, grave accent |
| Ó | Ó | Ó | capital o, acute accent |
| Ô | Ô | Ô | capital o, circumflex accent |
| Õ | Õ | Õ | capital o, tilde |
| Ö | Ö | Ö | capital o, umlaut mark |
| × | × | × | multiplication |
| Ø | Ø | Ø | capital o, slash |
| Ù | Ù | Ù | capital u, grave accent |
| Ú | Ú | Ú | capital u, acute accent |
| Û | Û | Û | capital u, circumflex accent |
| Ü | Ü | Ü | capital u, umlaut mark |
| Ý | Ý | Ý | capital y, acute accent |
| Þ | Þ | Þ | capital THORN, Icelandic |
| ß | ß | ß | small sharp s, German |
| à | à | à | small a, grave accent |
| á | á | á | small a, acute accent |
| â | â | â | small a, circumflex accent |
| ã | ã | ã | small a, tilde |
| ä | ä | ä | small a, umlaut mark |
| å | å | å | small a, ring |
| æ | æ | æ | small ae |
| ç | ç | ç | small c, cedilla |
| è | è | è | small e, grave accent |
| é | é | é | small e, acute accent |
| ê | ê | ê | small e, circumflex accent |
| ë | ë | ë | small e, umlaut mark |
| ì | ì | ì | small i, grave accent |
| í | í | í | small i, acute accent |
| î | î | î | small i, circumflex accent |
| ï | ï | ï | small i, umlaut mark |
| ð | ð | ð | small eth, Icelandic |
| ñ | ñ | ñ | small n, tilde |
| ò | ò | ò | small o, grave accent |
| ó | ó | ó | small o, acute accent |
| ô | ô | ô | small o, circumflex accent |
| õ | õ | õ | small o, tilde |
| ö | ö | ö | small o, umlaut mark |
| ÷ | ÷ | ÷ | division |
| ø | ø | ø | small o, slash |
| ù | ù | ù | small u, grave accent |
| ú | ú | ú | small u, acute accent |
| û | û | û | small u, circumflex accent |
| ü | ü | ü | small u, umlaut mark |
| ý | ý | ý | small y, acute accent |
| þ | þ | þ | small thorn, Icelandic |
| ÿ | ÿ | ÿ | small y, umlaut mark |
| Π| Π| Π| capital ligature OE |
| œ | œ | œ | small ligature oe |
| Š | Š | Š | capital S with caron |
| š | š | š | small S with caron |
| Ÿ | Ÿ | Ÿ | capital Y with diaeres |
| ƒ | ƒ | ƒ | f with hook |
| ˆ | ˆ | ˆ | modifier letter circumflex |
| ˜ | ˜ | ˜ | small tilde |
| Α | Α | Α | Alpha |
| Β | Β | Β | Beta |
| Γ | Γ | Γ | Gamma |
| Δ | Δ | Δ | Delta |
| Ε | Ε | Ε | Epsilon |
| Ζ | Ζ | Ζ | Zeta |
| Η | Η | Η | Eta |
| Θ | Θ | Θ | Theta |
| Ι | Ι | Ι | Iota |
| Κ | Κ | Κ | Kappa |
| Λ | Λ | Λ | Lambda |
| Μ | Μ | Μ | Mu |
| Ν | Ν | Ν | Nu |
| Ξ | Ξ | Ξ | Xi |
| Ο | Ο | Ο | Omicron |
| Π | Π | Π | Pi |
| Ρ | Ρ | Ρ | Rho |
| Σ | Σ | Σ | Sigma |
| Τ | Τ | Τ | Tau |
| Υ | Υ | Υ | Upsilon |
| Φ | Φ | Φ | Phi |
| Χ | Χ | Χ | Chi |
| Ψ | Ψ | Ψ | Psi |
| Ω | Ω | Ω | Omega |
| α | α | α | alpha |
| β | β | β | beta |
| γ | γ | γ | gamma |
| δ | δ | δ | delta |
| ε | ε | ε | epsilon |
| ζ | ζ | ζ | zeta |
| η | η | η | eta |
| θ | θ | θ | theta |
| ι | ι | ι | iota |
| κ | κ | κ | kappa |
| λ | λ | λ | lambda |
| μ | μ | μ | mu |
| ν | ν | ν | nu |
| ξ | ξ | ξ | xi |
| ο | ο | ο | omicron |
| π | π | π | pi |
| ρ | ρ | ρ | rho |
| ς | ς | ς | sigmaf |
| σ | σ | σ | sigma |
| τ | τ | τ | tau |
| υ | υ | υ | upsilon |
| φ | φ | φ | phi |
| χ | χ | χ | chi |
| ψ | ψ | ψ | psi |
| ω | ω | ω | omega |
| ϑ | ϑ | ϑ | theta symbol |
| ϒ | ϒ | ϒ | upsilon symbol |
| ϖ | ϖ | ϖ | pi symbol |
|   |   | en space | |
|   |   | em space | |
|   |   | thin space | |
| | ‌ | ‌ | zero width non-joiner |
| | ‍ | ‍ | zero width joiner |
| | ‎ | ‎ | left-to-right mark |
| | ‏ | ‏ | right-to-left mark |
| – | – | – | en dash |
| — | — | — | em dash |
| ‘ | ‘ | ‘ | left single quotation |
| ’ | ’ | ’ | right single quotation |
| ‚ | ‚ | ‚ | single low-9 quotation |
| “ | “ | “ | left double quotation |
| ” | ” | ” | right double quotation |
| „ | „ | „ | double low-9 quotation |
| † | † | † | dagger |
| ‡ | ‡ | ‡ | double dagger |
| • | • | • | bullet |
| … | … | … | horizontal ellipsis |
| ‰ | ‰ | ‰ | per mille |
| ′ | ′ | ′ | minutes |
| ″ | ″ | ″ | seconds |
| ‹ | ‹ | ‹ | single left angle quotation |
| › | › | › | single right angle quotation |
| ‾ | ‾ | ‾ | overline |
| € | € | € | euro |
| ™ | ™ | ™ | trademark |
| ← | ← | ← | left arrow |
| ↑ | ↑ | ↑ | up arrow |
| → | → | → | right arrow |
| ↓ | ↓ | ↓ | down arrow |
| ↔ | ↔ | ↔ | left right arrow |
| ↵ | ↵ | ↵ | carriage return arrow |
| ∀ | ∀ | ∀ | for all |
| ∂ | ∂ | ∂ | part |
| ∃ | ∃ | ∃ | exists |
| ∅ | ∅ | ∅ | empty |
| ∇ | ∇ | ∇ | nabla |
| ∈ | ∈ | ∈ | isin |
| ∉ | ∉ | ∉ | notin |
| ∋ | ∋ | ∋ | ni |
| ∏ | ∏ | ∏ | prod |
| ∑ | ∑ | ∑ | sum |
| − | − | − | minus |
| ∗ | ∗ | ∗ | lowast |
| √ | √ | √ | square root |
| ∝ | ∝ | ∝ | proportional to |
| ∞ | ∞ | ∞ | infinity |
| ∠ | ∠ | ∠ | angle |
| ∧ | ∧ | ∧ | and |
| ∨ | ∨ | ∨ | or |
| ∩ | ∩ | ∩ | cap |
| ∪ | ∪ | ∪ | cup |
| ∫ | ∫ | ∫ | integral |
| ∴ | ∴ | ∴ | therefore |
| ∼ | ∼ | ∼ | similar to |
| ≅ | ≅ | ≅ | congruent to |
| ≈ | ≈ | ≈ | almost equal |
| ≠ | ≠ | ≠ | not equal |
| ≡ | ≡ | ≡ | equivalent |
| ≤ | ≤ | ≤ | less or equal |
| ≥ | ≥ | ≥ | greater or equal |
| ⊂ | ⊂ | ⊂ | subset of |
| ⊃ | ⊃ | ⊃ | superset of |
| ⊄ | ⊄ | ⊄ | not subset of |
| ⊆ | ⊆ | ⊆ | subset or equal |
| ⊇ | ⊇ | ⊇ | superset or equal |
| ⊕ | ⊕ | ⊕ | circled plus |
| ⊗ | ⊗ | ⊗ | cirled times |
| ⊥ | ⊥ | ⊥ | perpendicular |
| ⋅ | ⋅ | ⋅ | dot operator |
| ⌈ | ⌈ | ⌈ | left ceiling |
| ⌉ | ⌉ | ⌉ | right ceiling |
| ⌊ | ⌊ | ⌊ | left floor |
| ⌋ | ⌋ | ⌋ | right floor |
| ◊ | ◊ | ◊ | lozenge |
| ♠ | ♠ | ♠ | spade |
| ♣ | ♣ | ♣ | club |
| ♥ | ♥ | ♥ | heart |
| ♦ | ♦ | ♦ | diamond |
cascading style sheets [css]
Basics
Syntax
Example
selector declaration
\ |
h1 {color:purple;} /* comment */
/ \
property value
Measurement Values
There are several options to choose from when defining the size of an element or font. You should pick the proper units for your intended application. When designing for the screen you will most commonly use px, % and em.
| Units | Description |
|---|---|
| % | percentage |
| px | pixels, 1px equals 1 dot on a computer screen |
| em | ems are proportional to a user’s set font size, 1em equals the current font size, 2em is twice the current font size, etc |
| ex | x-height, 1ex equals the x-height of a font |
| in | inches |
| cm | centimeters |
| mm | millimeters |
| pt | points, 1pt equals 1/72 inch |
| pc | picas, 1pc equals 12 points |
Color Values
Defining color values in HTML and CSS can be accomplished in a few different ways, the most common being hexadecimal [hex]. Hex values are defined using the number sign [#] followed by a combination of six numbers and letters. Red, blue and green [RGB] can also be used by defining the number value [rgb(255,0,0)] or percentage value [rgb(100%,0%,0%)]. There are also 140 named colors, but they are not all valid according to the World Wide Web Consortium even though they are supported in all major browsers. Listed below are the 16 valid color names defined by the W3C.
| Name | HEX | RGB | Color |
|---|---|---|---|
| Aqua | #00FFFF | rgb(0,255,255) | |
| Black | #000000 | rgb(0,0,0) | |
| Blue | #0000FF | rgb(0,0,255) | |
| Fuchsia | #FF00FF | rgb(255,0,255) | |
| Gray | #808080 | rgb(128,128,128) | |
| Green | #008000 | rgb(0,128,0) | |
| Lime | #00FF00 | rgb(0,255,0) | |
| Maroon | #800000 | rgb(128,0,0) | |
| Navy | #000080 | rgb(0,0,128) | |
| Olive | #808000 | rgb(128,128,0) | |
| Purple | #800080 | rgb(128,0,128) | |
| Red | #FF0000 | rgb(255,0,0) | |
| Silver | #C0C0C0 | rgb(192,192,192) | |
| Teal | #008080 | rgb(0,128,128) | |
| White | #FFFFFF | rgb(255,255,255) | |
| Yellow | #FFFF00 | rgb(255,255,0) |