Web Programming Step by Step

HTTP, HTML and Javascript Basics

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

Overview

Modern Web Browsers

Uniform Resource Locator (URL)

More advanced URLs

Hypertext Transport Protocol (HTTP) (1.2.3)

HTTP error codes

Web languages / technologies (1.2.4)

Hypertext Markup Language (HTML) (2.1.1)

Structure of an HTML page (2.1.2) 

<html>
  <head>
    information about the page
  </head>

  <body>
    page contents
  </body>
</html>

Links: <a> (2.1.4)

links, or "anchors", to other pages (inline)

<p>
	Search 
	<a href="http://www.google.com/">Google</a> or our
  <a href="lectures.html">Lecture Notes</a>.
</p>

HTML Tag Reference

More information about HTML tags can be found at:

JavaScript (7.1)

Client-side scripting (7.1.1)

client-side scripting

Linking to a JavaScript file: script 

 
<script src="filename" type="text/javascript"></script>

 
<script src="example.js" type="text/javascript"></script>

Event-driven programming

event

Variables and types (7.2.1, 7.2.3) 

 
var name = expression;

 
var age = 32;
var weight = 127.4;
var clientName = "Connie Client";

JavaScript functions

 
function name() {
	statement ;
	statement ;
	...
	statement ;
}

 
function myFunction() {
	alert("Hello!");
	alert("How are you?");
}

Event handlers

 
<element attributes onclick="function();">...

 
<button onclick="myFunction();">Click me!</button>

Synchronous web communication (10.1)

synchronous communication

Asynchronous web communication

synchronous communication

A typical Ajax request

request
  1. user clicks, invoking an event handler
  2. handler's code creates an XMLHttpRequest object
  3. XMLHttpRequest object requests page from server
  4. server retrieves appropriate data, sends it back
  5. XMLHttpRequest fires an event when data arrives
    • this is often called a callback
    • you can attach a handler function to this event
  6. your callback event handler processes the data and displays it

jQuery

jQuery simple example

adding an "on click" alert to HTML element with id="myButton"
Before jQuery: 
var button = document.getElementById("myButton");
button.onclick = function() { alert("hi there!"); }
With jQuery: 
$("#myButton").click(function() { alert("hi there!"); });

jQuery a more complex example

Making an AJAX request
Before jQuery: 
// Request "page.html" via a "GET" request asynchronously
// (This will not work in IE prior to version 9)
var ajax = new XMLHttpRequest();
ajax.open("GET", "page.html", true);

// Wait until page loads and alerts the request page source
ajax.onreadystatechange = function() {
	if (ajax.readyState == 4) { // AJAX page loaded
		alert(ajax.responseText);
	}
}

// Sends the request to the server
ajax.send();

jQuery a more complex example made easy

With jQuery: 
// Gets "page.html" and adds a "completed" callback
// which once again alerts the page source
$.get("page.html", function(data, status, ajax) {
	alert(data);
});

More information on jQuery can be found at http://docs.jquery.com/