Web Programming Class Notes


 * The Web Programming track will cover basic dynamic website creation using FLOSS technologies.

This page is an initial syllabus for the intro class. Later we'll amend it to make it more a general reference. The initial class planned will be about 3 hours long and cover the following: These notes are divided into Client-side and Server side sections. Experience so far has shown it's too much stuff for one class (for new folks anyway.)

=Introduction=

Who am I?
Instructor, introduce thyself!

Name, rank, serial number... I mean email address, IRC handle, any other info you think is relevant.

Introduce FGS, what we do, pitch for donations?

=Other (and therefore better) resources=

References:


 * 1) World Wide Web Consortium(W3C)
 * 2) [http:whatwg.org Web Hypertext Application Group (WHATWG)]

Questions Answered:

StackExchange

Tutorials:


 * 1) CodeCademy
 * 2) The PHP site

Ctrl-U is your friend! Hit Ctrl-u on any web page (or choose View Source from your browser's menus) to see the source code of any web page in your browser.

=Client side web programming=

For the client side

 * 1) A computer with a web browser and a text editor (NOT a word processor.)
 * 2) That's really all.

Optional: Version control, access to the internet for looking up references.

Client-side references
http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc
 * DOM
 * https://developer.mozilla.org/en-US/docs/DOM
 * http://dom.spec.whatwg.org/
 * http://www.w3.org/wiki/Dom
 * 1) HTML
 * https://developer.mozilla.org/en-US/docs/Web/HTML
 * http://docs.webplatform.org/wiki/html
 * http://reference.sitepoint.com/html
 * http://www.w3.org/wiki/HTML
 * http://www.whatwg.org/specs/web-apps/current-work/multipage/
 * CSS
 * https://developer.mozilla.org/en-US/docs/Web/CSS
 * http://docs.webplatform.org/wiki/css
 * http://reference.sitepoint.com/css
 * http://www.w3.org/wiki/CSS
 * 1) Javascript
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript
 * http://docs.webplatform.org/wiki/javascript
 * http://reference.sitepoint.com/javascript

Your first Web page
It can be as simple as this:

<!DOCTYPE html> Hello World! Now open your Web browser and point it at your file. You can type its path into your address bar: file:///home/user/hello.html
 * 1) Fire up your text editor of choice.
 * 2) Enter the text that follows this list.
 * 3) Save as [something].html - for example, "hello.html"

Or you can drag-and-drop the file's icon from your file manager into the browser.

That's a pretty basic web page, and it doesn't do much. Actually, it doesn't do anything. Before making it do stuff, let's talk about structure.

DOM
Your HTML is a template for a Document Object. In programming (Object Oriented Programming) an *object* is an instance of a *class*- for example, a particular document is an instance of the general class of documents. This class is described by the Document Object Model.

When the browser loads your HTML file, it takes the information in it and builds a document object out of it. This object is a tree-like structure, like a file system. Instead of file names and file contents, the document object contains the tags and the text inside the tags- along with other things. Instead of 'files', these key-value sets are called 'nodes'.

So, the "Hello World" text in the example might have a DOM path something like: document.html.body.h1.InnerHTML

DOM is API
The Document Object Model is an Application Programming Interface. That means it's a way for a programming language to manipulate parts of the document.

For example, if you wanted to use Javascript to change the text in the example above, you could use

var displayedText = document.getElementsByTagBame("h1").InnerHTML; displayedText = "This is only a text";

Except that you couldn't, because Javascript is pants. getElementsByTagName returns an array, so InnerHTML would be 'undefined'. Should have used an ID!

Elements and attributes
In HTML, elements are the combination of a tag and its contents (including other tags). Elements can also have *attributes* which are defined as follows:

Hello World!

Here "id" and "class" are both attributes of h1.

Including scripts

 * Inline
 * with
 * with
 * in
 * in body
 * on events

How To

 * Objects & classes
 * Variables & types
 * Conditionals
 * Loops
 * Exceptions