Extending HTML | Course Notes

Lesson purpose

Lesson 8 widens the view beyond HTML and CSS to the technologies that make pages do things. Students learn the basic vocabulary of programming, compare server-side languages (PHP, Perl, ASP.NET, Python, Go, Java, Visual Basic, C#) with client-side JavaScript, and see how the Document Object Model lets scripts change a page after it loads (DHTML). They then try three HTML5 APIs — canvas, geolocation, and drag-and-drop — meet the Cache API for offline use, and finish with how Web applications connect to databases: frameworks, permissions, and n-tier architecture.

Framing for students: this is a survey lesson. The goal is to recognize each technology, know where its code runs, and explain when to choose it — not to become a programmer in one day. The lab code is provided to read and run, not to write from scratch.

Learning objectives

By the end of the lesson, students should be able to:

CIW 2.1.6: Define the Document Object Model (DOM) and its relationship to Dynamic HTML (DHTML).
CIW 2.10.8: Describe HTML5 APIs, including canvas, geolocation, offline Web applications, and drag-and-drop.
CIW 2.10.9: Demonstrate basic HTML5 API functionality using JavaScript and HTML5 elements.
CIW 2.17.1: Compare popular client-side and server-side languages, including JavaScript, Java, PHP, Python, Go, .NET, Visual Basic, and C#.
CIW 2.17.2: Define Web server technologies, including .NET, Django, Python, JSP, Server-Side JavaScript (SSJS), ASP, and PHP.
CIW 2.17.5: Identify the value of n-tier applications in processing online transactions.
CIW 2.19.1: Identify ways to provide custom features to users (for example, JavaScript browser detection and cookies).

1. Extending HTML

HTML alone describes content. To add logic, data, and interactivity, developers combine it with:

Client-side and server-side scripting.
The Document Object Model (DOM) and Dynamic HTML (DHTML).
HTML5 Application Programming Interfaces (APIs).
Web application frameworks.
Databases.

Many advanced features come from HTML5, JavaScript, and CSS3 working together.

The Extending HTML video is a good preview. Its key points:

Server-side languages run on the Web server, not the browser, through an interpreter installed on the server. Uses: browser detection, database connections, cookies, logon scripts, hit counters, and file uploads/downloads.
Client-side languages run on the user’s computer after the page downloads, which frees the server for other work. Uses: pop-up alerts, dialogs and prompts, automatic date/time changes, rollover effects, and cookies.
JavaScript must be inside an HTML document or in an external .js file to run.
The DOM is the W3C standard that lets a scripting language refer to and change the objects in a page and browser.

Instructor note: students interested in Web development careers or mobile apps will use these technologies, so it is worth building familiarity now.

2. Programming vocabulary

Students need a few terms before comparing languages (Table 8-1):

Concept	Meaning
Variable	A named container for a data value, usually assigned with `=` (e.g., `name = "James"`). Some languages, such as PHP and Perl, begin variable names with `$` (`$name`). Many languages are case-sensitive, so `$Name` and `$name` differ.
Array	A series of values stored in one variable.
Function	A named block of code that performs a specific task; it organizes code into sections.
Interpreter	Software that reads and runs code directly from text files, without converting it to machine code first. PHP, Perl, and ASP.NET use interpreters (on the server or downloaded to the client). Perl scripts must point to their interpreter on the first line.
Compiler	Software that converts source code into an executable program before it runs (e.g., `gcc james.c -o james.exe`).
include	Pulls a library of existing code into a program so you do not rewrite it.
print	Sends output to a destination such as the screen; part of a language’s input/output library.
echo	Outputs the strings passed to it.
Statement	A logical construct that controls how information flows through the program.

Interpreted vs. compiled is the key distinction: interpreted code is read line by line at run time; compiled code is translated in advance.

Programming statements (Table 8-2)

If/then — run something only when a condition is true (a conditional statement).
If/then/else — run one action when true and another when false (for example, use \tmp\; if missing, check \temp\; otherwise create \tmp\).
Do while — repeat an action while a condition stays true (also called repeat until).
Do until — repeat until a condition is reached (for example, add 1 until the sum reaches 100).
Break — exit a loop, such as escaping an infinite loop when something goes wrong.

Check for understanding: “A form keeps asking for a password until it is correct. Which statement fits?” (A loop — do until / do while.)

3. Server-side languages

A server-side language:

Runs on the Web server, not in the browser.
Is usually stored in files (applications) that the server has permission to execute, and sometimes embedded in HTML pages.
Runs because an interpreter (or compiled runtime) is installed and active on the server.

Common uses: browser detection, database connectivity, creating and reading cookies, logon scripts, hit counters, and file uploads/downloads.

PHP (PHP Hypertext Preprocessor)

An interpreted server-side scripting language for dynamic pages. PHP can be embedded in HTML or saved as a .php file, but it always runs on the server. This script prints “Hello, World!” and reports the visitor’s browser:

<?php
  $ua = $_SERVER['HTTP_USER_AGENT'];
  print "
    <html>
    <head><title>PHP Example</title></head>
    <body>
      <h1>Hello, World!</h1>
      Your user agent is: <strong>{$ua}.</strong>
    </body>
    </html>
  ";
?>

<?php starts PHP code; ?> ends it.
$ua is a variable holding the browser’s user agent string.
print sends the HTML back to the browser.

The server could use that user agent to send different browsers to different versions of a site. (Instructor note: “Hello, World” is traditionally the first program anyone writes.)

Perl (Practical Extraction and Report Language)

A cross-platform language for custom CGI programs and system management. The same browser report in Perl:

#!/usr/bin/perl
use CGI qw/:all/;
$cgi_object = CGI::new();

print "Content-type: text/html\n\n";
print "<html><head><title>Perl CGI Example</title></head><body>";
print "<h1>Hello, World!</h1>Your user agent is: <b>";
print $cgi_object->user_agent();
print "</b>.</body></html>\n";

The first line, beginning #!, is the shebang: it tells the server where the Perl interpreter is. A wrong shebang is a common cause of broken Perl scripts.

ASP.NET

Microsoft’s framework for Web applications, part of the .NET platform and the successor to classic Active Server Pages (ASP). It is built for HTTP and lets developers use HTML, CSS, and JavaScript to create dynamic pages, apps, sites, and Web services. Current ASP.NET Core is open source and runs on Windows, Linux, and macOS.

Python

Created in the late 1980s and popular since the mid-2000s. Python is object-oriented, readable, well documented, and usually needs less code than traditional languages; it has many frameworks (such as Django). Drawbacks cited by the book: it is not the best choice for mobile development, it is generally slower than compiled languages, and it is limited for high-end 3-D graphics.

Go (Golang)

Developed by Google (announced 2009, version 1.0 in 2012). Go compiles directly to machine code without a virtual machine, so even large projects compile quickly, and it produces a single cross-platform executable with no extra dependency files — easy to distribute. Drawbacks the book lists include missing features common elsewhere (function overloading, exceptions, inheritance) and weaker runtime safety. Currency note: the book also says Go lacks generic types, but generics were added in Go 1.18 (2022).

Java

A compiled, object-oriented language designed to run on any operating system with a Java runtime installed. Features: object-oriented, platform-independent (compiled for the Java virtual machine rather than a specific computer), simple (C/C++-like), secure, portable, robust, and multi-threaded. Source files use .java; compiled applications are commonly packaged as .jar files.

JavaServer Pages (JSP) embed Java commands in HTML.
Java servlets are compiled applications installed on the server; their code is never downloaded to the browser. Apache Tomcat is a popular server for JSP and servlets.

Instructor note: Sun’s motto was “Write once, run anywhere”; developers joke it is really “write once, test everywhere” — a lesson that applies to HTML too. (Java applets, the old client-side use of Java, and Microsoft’s J++ are obsolete.)

Visual Basic and C#

Visual Basic (VB) — Microsoft’s compiled language for stand-alone and server-side Web applications, easier than C++ or Java but less capable for some tasks. It has become more object-oriented over time and is used with .NET.
C# (“C sharp”) — Microsoft’s compiled, object-oriented competitor to Java, designed to be as approachable as VB but more powerful, with features that simplify Windows development.

Server-side includes (SSI)

An SSI is an instruction inside an HTML page that tells the server to insert content just before sending the page. It is an alternative to CGI for simple tasks: inserting database query results, running programs, showing a last-modified date, adding a common footer, or stamping the current date. Pages using SSI traditionally use the .shtml or .shtm extension. Most servers support SSI, but it may need to be enabled (Apache’s httpd.conf, or IIS settings), and the server must be told which extension to process — either use the extension it already supports or define a MIME type for .shtml.

A typical SSI directive looks like an HTML comment:

<!--#include virtual="/footer.html" -->

4. Client-side languages

Client-side code runs on the user’s computer after the page loads, shifting work from the server to the browser.

Issues with client-side scripting

Some clients do not support scripting (for example, the text-only browser Lynx).
Users — and some companies, for security reasons — turn scripting off.
If a page depends on client-side scripts for essential features, part of the audience may see a broken page.

JavaScript

JavaScript is a scripting language that adds interactivity to pages. On the client it must be inside an HTML document or in an external .js file.

History (instructor note): Netscape began developing LiveScript in 1995 and renamed it JavaScript in December 1995, mainly for marketing. Stress that Java and JavaScript are different languages — Java is a full, compiled, object-oriented language; JavaScript is a scripting language run by the browser.

What JavaScript can add:

Pop-up alert, confirm/dialog, and prompt boxes.
Automatic date and time changes.
Images and text that change on mouse rollover.
Creating and reading cookies.

A scripting language extends the capabilities of another program; Excel macros and WordBasic are examples students may have used. JavaScript’s syntax resembles C.

Object-based vs. object-oriented: the CIW material calls JavaScript object-based because it has built-in objects — document (read and write the page), navigator (the browser), Array (lists of values) — but, the book says, no inheritance. Currency note: modern JavaScript does support inheritance (through prototypes and, since 2015, class syntax), so the distinction is mainly an exam term today.

JavaScript’s advantages (Table 8-3):

Advantage	Why
Quick development	No compiling; the browser and HTML handle the interface.
Easy to learn	Simpler syntax and rules than Java.
Platform independence	Runs in any browser that supports JavaScript, on any operating system.

Instructor note: keeping up with JavaScript versions and browser support is a constant part of the job.

Embedding and linking JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <script>
      // JavaScript code goes here
    </script>
  </head>
  <body>
    <script>
      // JavaScript can go here too
    </script>
  </body>
</html>

<script> holds JavaScript and can appear in the head or body.
alert() shows a message box; prompt() asks the user for input; document.write() writes text into the page. The value prompt() returns can be passed to another method, such as document.write().

External scripts keep code in one reusable file:

<script src="script.js"></script>
<script src="script2.js"></script>

One file can serve many pages, keeping pages uncluttered and consistent; change the file once and every page updates.
Trade-off: each external file is one more request to the server, so a tiny script may load slightly slower than an embedded one.
type="text/javascript" is optional in HTML5.

The book calls placing <script> in the body poor practice. A common modern pattern is to put scripts in the head with the defer attribute (or at the end of the body) so the page’s content loads first.

JavaScript and browser detection

<script>
  document.write("Your user agent is: " + navigator.userAgent);
  document.write(".");
</script>

The navigator.userAgent property reports the browser, and document.write writes it into the page. No server script is needed — only the browser’s built-in JavaScript interpreter.

Uses listed by the book: showing different site versions to different browsers, telling intranet users to upgrade, and supporting accessibility needs.

Modern practice: user-agent strings are easy to fake and often misleading, so developers now prefer feature detection — checking whether the browser supports a feature (as the geolocation lab does with if (navigator.geolocation)) — instead of guessing from the browser’s name. document.write is also discouraged in modern code.

JavaScript and cookies

A cookie is a small text file the server or a script stores on the user’s computer to maintain state and track activity. JavaScript can create cookies to store user preferences or choose pages based on browser version.

Security point: the book notes that scripts can store passwords in cookies — never do this. Cookies can be read and stolen; sensitive data belongs on the server.

JavaScript can also help with copyright protection, for example by keeping a site from being framed inside another site without credit.

5. Dynamic HTML (DHTML)

DHTML is an umbrella term for HTML working with scripts, styles, and the DOM to create animation, interactivity, and dynamic updates — without contacting the server or downloading large applications. It lightens the server’s load.

DHTML can:

Adjust fonts and colors automatically — for example, with an event handler that reacts when the mouse passes over text.
Position elements absolutely — move text in response to user input.
Swap in new content without refreshing the page.
Control animation, audio, and video precisely — start a sequence at a set time or after an event.

HTML5 APIs are the best current examples of DHTML because they combine HTML5 + CSS3 + JavaScript accessing the DOM.

6. The Document Object Model (DOM)

The DOM is a W3C standard, vendor-neutral and cross-platform API that describes every object in a document rendered by a browser and specifies how scripts can find and change them. Figure 8-5 shows it as a tree: the document at the top, the root <html> element, then <head> and <body> branches, down to elements, attributes (such as href), and text.

Relationship to remember: DHTML is what you build; the DOM is what makes it possible. Scripts use the DOM to reach page elements and change them.

With the DOM and a script you can open a new browser window and control its size and toolbars, create dialog boxes, change fonts and colors, and change almost any browser component. (Instructor note: this section builds awareness only.)

To work with the DOM you need a scripting language; JavaScript is the universal choice.
Do not confuse the DOM with Microsoft’s COM (Component Object Model, for building applications) or DCOM (Distributed COM, for networked applications).

DOM compliance and browser choice

The book notes that vendors have added their own features or skipped parts of the standard. Compliance matters because compliant browsers support the features and accessibility options your work needs and will handle future features. When choosing a browser, also weigh stability and security, authentication features (such as IIS integration), and availability.

An undefined object error, or a page showing as unformatted text, can mean the browser does not support part of the DOM a page uses.
Some DHTML works in one browser and breaks in another, and browsers interpret some HTML differently — so test in several browsers.

Currency note: today’s major browsers follow the W3C/WHATWG DOM standard very closely; the IE-versus-Firefox differences the book describes are largely historical.

7. HTML5 APIs

An Application Programming Interface (API) is a set of commands, calls, and functions that lets developers communicate with an application or operating system. HTML5 APIs combine HTML5, CSS3, and JavaScript (through the DOM) to build Web apps that need no proprietary plug-ins and adapt to phones, tablets, game devices, smart TVs, and PCs. They are used in mobile apps as well as Web pages.

API functions include media (audio and video), document editing, cross-document messaging, MIME type and protocol handler registration, and Web storage. This lesson demonstrates canvas, geolocation, and drag-and-drop; the audio and video APIs were covered in Lesson 7.

The HTML5 APIs video summarizes all three before the labs.

Canvas

Canvas provides an area on the page where scripts draw graphics, animation, video, and games “on the fly” — the kind of content that once needed Flash or Silverlight. The W3C describes it as a resolution-dependent bitmap canvas. It uses less battery and CPU than a plug-in, which matters on mobile devices (instructor note: Apple never supported Flash on its mobile devices for this reason).

How it works:

<canvas> has two attributes, width and height. If omitted, the default is 300 pixels wide by 150 pixels tall (the book reverses these).
A canvas is transparent until styled; give it a border or background to see it. Styles do not affect drawing.
Text between the tags is fallback for browsers without canvas support.
Give it a unique id so a script can find it.
The script calls getContext("2d") to get a drawing context. (3-D drawing uses the WebGL context.)
The only built-in primitive shape is the rectangle; other shapes are built from paths.

Method	Effect
`fillRect(x, y, width, height)`	Draws a filled rectangle.
`strokeRect(x, y, width, height)`	Draws a rectangle outline.
`clearRect(x, y, width, height)`	Clears an area to fully transparent.

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

Line by line:

getElementById("myCanvas") uses the DOM to find the canvas.
getContext("2d") returns the object that draws on it.
fillStyle sets the fill color to red.
fillRect(0, 0, 150, 75) draws a rectangle from the top-left corner, 150 pixels wide and 75 tall.

Instructor note: canvas by itself is “boring” — it is an empty window that developers fill with content.

Geolocation

The geolocation API finds the device’s geographic position (latitude and longitude) using the IP address, wireless network, or GPS; GPS-equipped phones are the most accurate. Because location is private, the browser asks the user for permission first.

Method	Purpose
`getCurrentPosition()`	Gets the current location once.
`watchPosition()`	Gets periodic updates as the location changes.
`clearWatch()`	Stops a `watchPosition()` call. (The book’s text calls it `clearPosition`; the correct name is `clearWatch`.)

The returned coordinates can place the user on a map; displaying a Google map requires an API key.

Privacy and security: modern browsers only allow geolocation on secure (HTTPS) pages, and sites should explain why they want a location and work without it.

Drag-and-drop

Drag-and-drop lets users move an item to another place on the page — a drop zone — or drag items between the page and other applications, including files from the computer.

Steps:

Mark the element as draggable: draggable="true".
Handle dragstart to store what is being dragged in the DataTransfer object (usually the element’s id).
On the drop zone, handle dragover (call preventDefault() to allow dropping) and drop (read the data and move the element).

By default, browsers do not let elements be dropped inside other elements — a dropped link or image opens instead — which is why preventDefault() is needed.

Cache API and offline use

The old HTML5 Application Cache (the “offline Web application” in the objectives) is obsolete. The modern Cache API lets a site save files such as pages, images, and data in the browser so it can load faster, save data, and even work offline. It is usually used with a service worker, a background script that intercepts requests and serves cached copies.

8. Web application frameworks

A Web application framework is a set of reusable code and tools for building dynamic sites, Web apps, and Web services; developers override the generic parts for their specific needs.

Front-end frameworks focus on the user interface and experience (e.g., Angular, React, jQuery UI, Vue.js).
Back-end frameworks focus on data access, storage, and processing through REST APIs, WebSockets, caching, and similar services.

Framework libraries help manage databases, provide security, manage server data, and supply templates that change a page’s look while keeping its content.

Django — an open-source Python framework for database-driven sites. It emphasizes Rapid Application Development (RAD) and Don’t Repeat Yourself (DRY): avoid duplication so a change in one place updates related parts predictably. Python is usually preinstalled on Linux and macOS; Windows users install it first.
Ruby on Rails — an open-source framework with the same RAD and DRY goals, working with many Web servers, databases (MySQL, Oracle, SQL Server, DB2), and operating systems.

9. Connecting to a database

For a Web application to use a database:

The Web server and database must be able to find and talk to each other (for example, Microsoft systems use ODBC).
The database needs the right permissions to be read and written.

Web servers and permissions

Server scripts often fail not because of bad code but because of permissions: the server lacks permission to execute scripts, or the script file’s permissions prevent execution. Fix both — then give the file only the permissions it needs. Too many permissions create serious security risks.

When a hosting provider (ISP) runs your server, ask them to enable execute permissions on your scripts, create a script directory, and provide an account with enough — but not excessive — permissions. The all-powerful administrative accounts are root (UNIX/Linux) and Administrator (Windows); a limited account is safer.

N-tier applications

Every database application has three parts:

Data — the database files.
Business logic — the rules and code that process the data (the book describes this as the SQL that relates the data).
Presentation — what users see, such as HTML forms or an application window.

Model	How the layers are split	Example
Single-tier	All three in one application	A Microsoft Access database used on one computer
Two-tier (client-server)	Client handles presentation and logic; a server holds the data. Database changes may require client upgrades.	Access on a PC querying a remote database
N-tier	Presentation, logic, and data are fully separated; one layer can change without upgrading the others	A browser (presentation) → Web server running scripts (logic) → database server (data), often with several servers per tier

Why n-tier matters for online transactions: each tier can be scaled, secured, and updated separately, and the database never has to be exposed directly to users.

Classroom application

Lab 8-1: Using JavaScript to detect browser type

Copy hello.html from Lesson08\Lab_8-1 to the Desktop and open it; it lists the browser type and version (the book’s figure shows Firefox on Windows NT 10.0, which is Windows 10). Discuss:

Benefits of client-side detection: no server script to configure and no server resources used.
Drawbacks: some browsers lack JavaScript and some users turn it off.
Practical uses: tailoring pages, prompting upgrades, and accessibility.

The instructor note says the client and server approaches give essentially the same result. If time permits, upload the page to a server and view it across the network.

Lab 8-2: A simple interactive page with JavaScript

Open lab_8-2.html from Lesson08\Lab_8-2. An alert box appears; after OK, a prompt asks for the user’s name, and the page greets the user by name. Open it in two browsers and compare. If time permits, add the script to a uCorp page, test and validate it, and discuss what happens for users of text-only browsers such as Lynx or voice-recognition software (they cannot use the feature — so essential content should never depend on it).

Lab 8-3: The canvas API

Copy Lesson08\Lab_8-3 to the Desktop.
Open canvas-1.html in an editor: a 300×300 <canvas id="myCanvas"> with a CSS border and fallback text. View it — an empty bordered box.
Open canvas-2.html: the script draws a red 150×75 rectangle in a 200×100 canvas. View it.
Edit the rectangle’s position, size, fill (fillStyle), and outline (strokeStyle with strokeRect) and view the changes.

Instructor note: canvas is a window the browser can fill on the fly; this lab is only an introduction.

Lab 8-4: The geolocation API

Copy Lesson08\Lab_8-4 to the Desktop and study Geolocation.html:

getLocation() checks if (navigator.geolocation) — feature detection — then calls getCurrentPosition(showPosition, showError), or reports that geolocation is unsupported.
showPosition() writes the latitude and longitude into the paragraph.
showError() uses a switch statement to report PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT, or UNKNOWN_ERROR.

Open it in Firefox, click My Location, and allow access to see coordinates. Reload, click again, and choose Don’t allow to see the error message.

Lab 8-5: Drag-and-drop

Copy Lesson08\Lab_8-5 to the Desktop and study Drag_and_Drop.html:

The CIW logo image has draggable="true" and ondragstart="drag(event)".
drag() stores the image’s id with dataTransfer.setData("Text", ...).
The drop zone <div id="div1"> has ondragover="allowDrop(event)" (which calls preventDefault()) and ondrop="drop(event)", which reads the id and moves the image into the box with appendChild.

Open it in Chrome and drag the logo into the rectangle. Then try Firefox or Edge and decide whether any problem is a compatibility issue or a security setting. (One likely cause: the image path uses a Windows backslash, logo\CIWLogo.png, and has a leading space; URLs should use forward slashes.) Brainstorm other uses for drag-and-drop.

Optional Lab 8-1: Browser detection with a server-side PHP script

Students install EasyPHP (Windows only) from Lesson08\Optional_Lab_8-1, copy hello.php into EasyPHP’s www folder, choose Local Web from the EasyPHP tray icon, and open hello.php. The server-side script reports the browser and version. Mac and Linux users install PHP another way. Instructor note: students need permission to install software; the EasyPHP version in the lab is old, so a current local server package may be needed.

In-book exercises and activity

Exercise 8-1: Reviewing main server-side scripting languages — after Section 3.
Exercise 8-2: Reviewing main client-side scripting languages — after the JavaScript labs.
Exercise: Reviewing DOM and Exercise 8-3: DHTML and the DOM — after Sections 5–6.
Exercise 8-4: HTML5 APIs — after the three API labs.
Activity 8-1: Reviewing Web technology terms — a closing vocabulary review.

Case study: Choose Your Web Server and Programming Technology

Darius must recommend a Web server and programming technology for his company’s new site. His team asks: Who can manage common Web servers? Who knows common Web languages? What operating systems does the company use, and which are ideal for the project? Which Web servers fit? Because the company is almost entirely Windows and the team knows ASP.NET and C#, they choose ASP.NET with IIS. Worried about users without JavaScript, they decide to use server-side technology for all applications.

Discussion prompts and target answers:

Would they choose the same if the company ran mostly Linux? Probably not. IIS is a Windows server, so they might choose PHP or Python on Apache, or Java/JSP on Apache Tomcat. (Today ASP.NET Core can also run on Linux, which would widen the options.)
If they had used client-side scripting, how could they protect accessibility? Deliver all essential content from the server as regular HTML and use scripts only to enhance the page (progressive enhancement), so the site still works without JavaScript. The book’s answer also mentions <canvas>, but canvas requires JavaScript to draw anything, so it does not solve this problem.

Application project

Explore the W3C, W3Schools, and the official PHP, Perl, ASP.NET, .NET, and Java sites to learn more about these technologies.

Common misconceptions

“Java and JavaScript are the same.” They are different languages that share a marketing-driven name.
“PHP runs in the browser.” PHP always runs on the server; the browser receives only the resulting HTML.
“Client-side scripts always run.” Users can disable them, and some browsers do not support them.
“User-agent sniffing reliably identifies a browser.” User agents can be faked; feature detection is more reliable.
“Cookies are a good place for passwords.” Never store passwords or other sensitive data in cookies.
“DHTML is a language.” It is a combination of HTML, CSS, JavaScript, and the DOM.
“The DOM and COM are the same.” The DOM describes documents in a browser; COM is a Microsoft application model.
“Canvas draws by itself.” Canvas needs JavaScript to draw anything.
“Geolocation just works.” The user must grant permission, and modern browsers require HTTPS.
“Giving a script full permissions fixes errors safely.” Grant only the permissions a file needs.
“Two-tier and n-tier are the same.” N-tier fully separates presentation, logic, and data.

Key terms

API (Application Programming Interface) — commands and functions that let developers communicate with an application or operating system.
Interpreter / compiler — software that runs code directly from text vs. software that translates it into an executable first.
Server-side script / client-side script — code run by the Web server vs. code run by the browser.
Shebang — the #! first line of a Perl (or other) script that points to its interpreter.
Server-side include (SSI) — an instruction in an HTML page that makes the server insert content before sending it.
Object-based — a language with built-in objects that (by the CIW definition) lacks class inheritance.
Cookie — a small text file that helps maintain state and track user activity.
DHTML — HTML, scripts, styles, and the DOM working together for interactivity.
DOM — the W3C standard API describing a document’s objects so scripts can change them.
Canvas — an HTML5 API providing a scriptable bitmap drawing area.
Geolocation — determining a user’s location to provide location-based services.
Drag-and-drop / drop zone — moving an object to a new place; the area defined to accept it.
Application cache / Cache API — stored copies of an app’s files so it can load faster or work offline.
Web application framework — reusable tools and code for building online applications.
N-tier application — an application that separates presentation, business logic, and data.
Emulator — software (or hardware) that imitates another system so non-native software can run.

Lesson summary

Server-side languages (PHP, Perl, ASP.NET, Python, Go, Java/JSP, VB, C#) run on the server; client-side JavaScript runs in the browser and can be disabled.
Programming basics — variables, arrays, functions, interpreters vs. compilers, and conditional and looping statements — apply to every language.
JavaScript lives in <script> elements or external .js files; it can show alerts and prompts, detect the browser, and set cookies. Never store passwords in cookies, and prefer feature detection to user-agent checks.
DHTML combines HTML, CSS, JavaScript, and the DOM; the DOM is the standard tree of objects that scripts use to change a page.
HTML5 APIs replace plug-ins: canvas draws with getContext("2d") and fillRect; geolocation uses getCurrentPosition with user permission; drag-and-drop uses draggable, dragstart, dragover, and drop; the Cache API with service workers enables offline use.
Frameworks such as Django and Ruby on Rails speed development with RAD and DRY.
Database-backed sites need server-database connectivity and least-privilege permissions; n-tier designs separate presentation, logic, and data for scalable, secure transactions.

Next lesson: GUI HTML Editors and Mobile Websites — building, validating, and publishing pages with GUI editors, and designing for mobile devices.