Web Client Programming

From Free Geek Seattle
Jump to: navigation, search

This isn't really notes for the class, but it's close. The Web Programming Class Notes article is a mess, I'm working on it. For now this will do. This article talks about XHTML. The class will not focus on XHTML, but instead on HTML5, which is easier.

Client side technologies[edit]

These are things served to the client from the browser.

Browser quirks[edit]

w3c.org promulgates standards for how clients (browsers, etc) should render Web content. Not all browsers implement the standards the same (I'm looking at you, Internet Explorer...)

Many browsers have a 'Standards' or 'Strict' mode and a 'Quirks Mode'. Usually Quirks Mode is there to support older code. Browsers sometimes decide which mode to use based on http://www.w3schools.com/tags/tag_doctype.asp. DOCTYPE is mandatory in XHTML. Using xmlns="XHTML 1.0 Strict" should force Standards mode and make things work across different clients.

Your Mileage May Vary.

Keeping style markup out of your HTML can work to make it better across browsers. You can use separate CSS files for different clients, etc.

HTML[edit]

  1. It's really XML! Sort of. HTML is based on SGML, and XHTML is based on XML. I'm showing you XHTML because of reasons.
  2. OK, so what's XML? XML is Extensible Markup Language. It's a meta-language designed as a framework for Data Description Languages. It's a strict method of structuring data. Properly structuring data makes programming easier. Use of XHTML vs HTML 4.01 or HTML 5 encourages better habits. Newer versions of XHTML will support the bells and whistles in HTML5, hopefully without the security holes and cross-browser incompatibilities.
  3. HTML is for data

Use HTML for documents and markup. Markup means, this part's a form, this part's a heading, this part should be a blockquote, etc. NOT use this font here, this color here, etc.

  1. CSS is for presentation. Use CSS for your pretty-printing. Specify colors, fonts, weights, position, scaling, and more. 1000% more flexible than inline styles and it keeps your code clean.
  2. ECMAScript is for logic.
  • WTF is ECMAScript?
  • It's just Javascript, I'm being pedantic

Use Javascript to change the content in your HTML or the styles in your CSS on-the-fly. Use it to pull data from the server and insert it into the page without refresh or to send data to the server transparently. Javascript is optional-ish, but very useful. Be careful with it, it carries lots of security risk. You cannot get a job in web development unless you know Javascript.

Sample HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>This is a sample page</title>
 </head>
 <body>
 <div class = "float-top">
 <--! This is an HTML comment. "class" and "id" attributes identify elements so that you can style them with CSS or manipulate them with ECMAScript. -->
 <form id = "asksomestuff" action = "inputFromForm.php" method = "POST">
  Tell me something: <input type = "text" name = "something"> <br />
  <input type = "submit" value = "Send It!" />
 </form>
   <--! This is a basic form that sends the stuff you type in "something" to a program called "inputfromForm.php" on the server that served this page. -->
 </div>
 </body>
 </html>
 

http://www.w3schools.com/html/html_xhtml.asp

CSS[edit]

CSS stands for Cascading Style Sheets. You can specify different styles for different elements using a group of CSS files with rules for choosing the styles. It's all very complex: http://www.w3schools.com/css/default.asp But it's actually pretty easy for basic use. Here's a sample CSS file for our sample page:


head {
/* CSS uses this comment style */

}

body {
background-color: #bel337;

  div {
  float: left;
  background-color: #b31340;
}
  div.class {
text-align: center;
color: green;
}
  #asksomestuff {
color: red;
}
/* These make all divs float left, all divs of class "class" have centered green text, and the element with id "asksomestuff" have red text. */
}

CSS elements include:

  1. Properties - these are the specifications of a style, like "background-color: #bel337;" in the example above
  2. Selectors - these specify the elements affected by the property declaration.

Thus, in the example, all divs are specified by the div selector and those of class "class" are specified by the div.class selector (classes can have any name.) The properties of div.class include "text-align: center" (specified in the div.class selector), "float: left" (specified in the div selector, and inherited by div.class because div.class is a member of div) and other which aren't specified but keep default values provided by the browser.

Javascript[edit]

Use javascript to change the content of HTML pages on the fly. As with PHP, javascript can be embedded in Web pages. Unlike PHP, when javascript is used on a page, it's visible in the Page Source (ctrl-U). Here's a sample of some javascript embedded in a div:

 <div id="putithere">Podner</div>

 <script type="javascript>
 var tonto = document.getElementByID("putithere");
 tonto.innerHTML = "Kemosabe";
 // this replaces the text inside the div
 </script>

DOM[edit]

The Document Object Model or DOM is how the browser keeps track of all the parts of the document specified by these files. When the HTML file loads, the browser *parses* the tags into a data structure. This structure is accessible through certain Javascript methods.

For example,

document.getElementsByTagName("div")
is a reference to an array of all the elements in the HTML document specified by the
tag.