HTTP, HTML and Javascript Basics
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
Overview
-
Modern Web browsers
-
HTTP
-
HTML
-
Javascript and AJAX
-
jQuery
Modern Web Browsers
- Contacts a web-server via HTTP requesting a resource
(via its URI)
- This resource can be an HTML page (to be rendered by
the browser), images, javascript or other files
- Often, the web browser requests and loads an HTML page
which then proceeds to request other resources
Uniform Resource Locator (URL)
Hypertext Transport Protocol
(HTTP)
(1.2.3)
HTTP error codes
- when something goes wrong, the web server returns a special
"error code" number to the browser, possibly followed by an HTML
document
- common error codes:
Number | Meaning |
200 |
OK |
301-303 |
page has moved (permanently or temporarily) |
403 |
you are forbidden to access this page |
404 |
page not found |
500 |
internal server error |
complete list |
Web languages / technologies
(1.2.4)
- Hypertext Markup Language (HTML): used for writing web pages
- Cascading Style Sheets (CSS): stylistic info for web pages
- PHP Hypertext Processor (PHP): dynamically create pages on a web server
- JavaScript: interactive and programmable web pages
- Asynchronous JavaScript and XML (Ajax): accessing data for web applications
- eXtensible Markup Language (XML): metalanguage for organizing data
- Structured Query Language (SQL): interaction with databases
Hypertext Markup Language (HTML)
(2.1.1)
- describes the content and structure of information on a web page
- not the same as the presentation (appearance on screen)
- surrounds text content with opening and closing tags
- each tag's name is called an element
- syntax:
<
element>
content </
element>
- example:
<p>This is a paragraph</p>
- most whitespace is insignificant in HTML (ignored or collapsed to a single space)
- we will use a stricter, more standard version called XHTML
Structure of an HTML page
(2.1.2)
<html>
<head>
information about the page
</head>
<body>
page contents
</body>
</html>
- the header describes the page and the body contains the page's contents
- an HTML page is saved into a file ending with extension
.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>
- uses the
href
attribute to specify the destination URL
-
can be absolute (to another web site) or
relative (to another page on this site)
- anchors are inline elements; must be placed in a block element such as
p
or h1
HTML Tag Reference
More information about HTML tags can be found at:
JavaScript
(7.1)
- Javascript is a lightweight programming language ("scripting language")
- used to make web pages interactive
- insert dynamic text into HTML (ex: user name)
- react to events (ex: page load user click)
- get information about a user's computer (ex: browser type)
- perform calculations on user's computer (ex: form validation)
- a web standard (but not supported identically by all browsers)
- NOT related to Java other than by name and some syntactic similarities
Client-side scripting
(7.1.1)
- client-side script: code runs in browser after page is sent back from server
- often this code manipulates the page or responds to user actions
Linking to a JavaScript file:
script
<script src="filename" type="text/javascript"></script>
<script src="example.js" type="text/javascript"></script>
script
tag should be placed in HTML page's head
- script code is stored in a separate
.js
file
- JS code can be placed directly in the HTML file's
body
or head
(like CSS)
- but this is bad style (should separate content, presentation, and behavior)
- JS programs have no
main
; they respond to user actions called events
- event-driven programming: writing programs driven by user events
Variables and types
(7.2.1, 7.2.3)
var name = expression;
var age = 32;
var weight = 127.4;
var clientName = "Connie Client";
- variables are declared with the
var
keyword (case sensitive)
- types are not specified, but JS does have types ("loosely typed")
Number
, Boolean
, String
, Array
, Object
, Function
, Null
, Undefined
- can find out a variable's type by calling
typeof
JavaScript functions
function name() {
statement ;
statement ;
...
statement ;
}
function myFunction() {
alert("Hello!");
alert("How are you?");
}
- the above could be the contents of
example.js
linked to our HTML page
- statements placed into functions can be evaluated in response to user events
Event handlers
<element attributes onclick="function();">...
<button onclick="myFunction();">Click me!</button>
- JavaScript functions can be set as event handlers
- when you interact with the element, the function will execute
onclick
is just one of many event HTML attributes we'll use
-
but popping up an
alert
window is disruptive and annoying
-
A better user experience would be to have the message appear on the page...
Synchronous web communication
(10.1)
- synchronous: user must wait while new pages load
-
the typical communication pattern used in web pages (click, wait, refresh)
Asynchronous web communication
- asynchronous: user can keep interacting with page while data loads
-
communication pattern made possible by Ajax
A typical Ajax request
- user clicks, invoking an event handler
- handler's code creates an
XMLHttpRequest
object
XMLHttpRequest
object requests page from server
- server retrieves appropriate data, sends it back
XMLHttpRequest
fires an event when data arrives
- this is often called a callback
- you can attach a handler function to this event
- your callback event handler processes the data and displays it
jQuery
- Browsers have inconsistencies in their Javascript
implementations, making development across different
browsers painful
- jQuery is a Javascript library which wraps many commonly used
tasks such as retrieving elements, sending AJAX requests
among others providing a common interface for all browsers
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/