BMES514 – Fall 2010BMES514 – Fall 2010

David R. BrooksDavid R. BrooksInstitute for Earth Science Research and EducationInstitute for Earth Science Research and Education

610-584-5619610-584-5619brooksdr@drexel.edu

www.pages.drexel.edu/~brooksdr

““The best way to become acquainted with a subject is to write a book about it.” -- Benjamin Disraeli

IntroductionIntroduction Purpose of this course:

To learn principles of programming using the HTML/JavaScript/PHP environment.

Better than a “conventional” programming language?

Learning by example:Most online Web page development material

involves learning by example (i.e., “copying other people’s work”).

Make sure you learn, and don’t just learn to copy. (It doesn’t work, anyhow.)

Intellectual honesty counts!Reference online sources just as you would print

or other sources.Online plagiarism has the same consequences as

other forms of plagiarism.

ResourcesResources Brooks, David R.: An Introduction to HTML and JavaScript for

Scientists and Engineers. Springer, 2007. ISBN: 978-1-84628-656-8

Brooks, David R.: An Introduction to PHP for Scientists and Engineers: Beyond JavaScript. Springer, ISBN 2008. 978-1-84800-236-4

Thomas Powell and Dan Whitworth, HTML Programmer’s Reference, Second Edition, 2001, Osborne/McGraw-Hill, Berkeley, CA. ISBN 0-07-213232-9

Thomas Powell and Fritz Schneider, JavaScript: The Complete Reference, 2001, Osborne/McGraw-Hill, Berkeley, CA. ISBN 0-07-219127

Todd Stauffer, Using HTML 3.2, Second Edition, 1996, Que Corporation, Indianapolis, IN. ISBN 0-7897-0985-6

Thomas Powell, HTML: The Complete Reference, Third Edition, 2001, Osborne/McGraw-Hill, Berkeley, CA. ISBN 0-07-212951-4.

us2.php.net/manual/en (online PHP information)

The 5 steps in Solving Computing The 5 steps in Solving Computing ProblemsProblems

1. Define the problem.2. Outline a solution3. Design an algorithm4. Convert the algorithm to a program.5. Verify the operation of the program.

Pseudocode for Developing AlgorithmsPseudocode for Developing Algorithms

ASSIGNSet a variable equal to a value, another variable, or an

expression. See also INCREMENT and INITIALIZE.

CALLInvoke a subprogram. See SUBPROGRAM.

CHOOSETake action based on a restricted list of possibilities.

CLOSEClose an open file.

DEFINEDefine variables and user-defined data types.

Pseudocode for Developing AlgorithmsPseudocode for Developing Algorithms

IF… THEN… ELSE…If something is true, take a specified action. If false,

take some other action (including doing nothing).

INCREMENT (DECREMENT)A special type of assignment statement, such as x=x+1.

INITIALIZEA special kind of assignment statement used to set initial

values in a program.

LOOP (conditions)… END LOOPExecute instructions repeatedly until (or as long as)

certain conditions are met.

Pseudocode for Developing AlgorithmsPseudocode for Developing Algorithms

OPENOpen an external file.

READPass information to a program through an interface

or from an external file.

SUBPROGRAMMarks the start of a subprogram module, used to specify

the flow of information between parts of a program.

WRITE/DISPLAYDisplay or save output from a program.

The Nature of The Nature of HTML/JavaScript/PHPHTML/JavaScript/PHP

HTML is a “language” in the sense that it provides instructions for displaying content and provides a user interface for modifying content (but not the actual capabilities for modifying that content).

We will use a “platform independent” (??) subset of HTML.

HTML has syntax rules that are only loosely enforced (see XHTML). It ignores bad syntax rather than "crashing.”

JavaScript is a “client side” programming language that can manipulate the content of HTML documents. JavaScript has syntax rules that are actually enforced, but not all browsers support all JavaScript features.

PHP is a language for manipulating information passed from an HTML document (or a command line), including using that information to access, create, modify (and destroy) files on remote servers. Its capabilities do not depend on browser implementations.

To summarize… To summarize…

JavaScript is a “client-side” language that cannot access information on a remote server.

PHP is a “server-side” language that resides on a remote server and can read and write files on that server.

Both JavaScript and PHP are C-like languages that can be used for science and engineering applications.

Chapter 1: 1.1 Introducing the Chapter 1: 1.1 Introducing the ToolsTools

What is an HTML document? What is JavaScript? How do you create an

HTML/JavaScript document?

Chapter 1: 1.1 … ToolsChapter 1: 1.1 … Tools What is an HTML document?

A series of “tags” in a text file that are used to control the appearance of content.

<html> <head>

<title> … </title> … <!-- Script elements are optional. --><script> … </script>

</head><body>

… </body></html>

Chapter 1: 1.1 … ToolsChapter 1: 1.1 … Tools

What is JavaScript?JavaScript is an interpreted object-oriented programming language.

It is used to manipulate the contents of HTML documents.

It is used for writing client-side applications that cannot access information on a host computer.

Chapter 1: 1.1 …ToolsChapter 1: 1.1 …Tools How do you create an HTML/JavaScript

document?You can use a simple text editor, even Windows’ Notepad, but…

It is much better to have a “real” HTML/JavaScript/PHP editor. You do not need elaborate Web-content creation software.

We will use AceHTML 5.0, a freeware script editor.

You need a browser, with or without Web access, to view HTML documents. The browser must also implement JavaScript.

Later, you will need access to a server that supports PHP.

Chapter 1: 1.2 Your First Chapter 1: 1.2 Your First HTML/JavaScript DocumentHTML/JavaScript Document

Document 1.1 (HelloWorldHTML.htm)

<html><head> <title>Hello, world!</title></head><body> <p>

Hello, world!<br />It's a beautiful day! </p></body></html>

Chapter 1: 1.2 Your First Chapter 1: 1.2 Your First HTML/JavaScript Document HTML/JavaScript Document

(alternate code)(alternate code)Document 1.2 (HelloWorld.htm)

<html><head> <title>Hello, world!</title> <script language="javascript" type="text/javascript"> // These statements display text in a document. document.write("Hello, world!"); document.write("<br />It's a beautiful day!"); </script></head><body> <!-- No content in the body of this document. --></body></html>

Output from Document 1.1Output from Document 1.1 Documents 1.1 and 1.2 both

producebasic default-formatted text output. The font may differ among browsers, but probably it will be Times New Roman, or some similar serif font, black against a white background.

Fancier Output…Fancier Output…

Document 1.3 (HelloWorld2.htm)

<html><head><title>Hello, world!</title></head><body><h1 align="center">First JavaScript</h1><hr /><script language="javascript" type="text/javascript"> document.write("<font size='5' color='red'><center>Hello, world!</font>"); document.write("<br /><font size='7' color='blue'> It's a beautiful day!</center></font>");</script></body></html>

Output from Document 1.3Output from Document 1.3

Now we have taken control over text size, color, and formatting by assigning values to attributes of the font element.

More Options…More Options…Document 1.4a (HelloWord3.htm)

<html><head><title>Hello, world! (v.3)</title></head><body bgcolor="lightgreen" text="magenta"><h1 align="center">First JavaScript</h1><script language="javascript" type="text/javascript"> document.write("<font color='green'>

This document was last modified on " +document.lastModified+"</font>");

</script><hr /><script language="javascript" type="text/javascript"> document.write("background = "+document.bgColor); document.write("<br />font = " + document.fgColor); document.write("<font size='5'

color='red'><center>Hello,world!</font><br />"); document.write("<font size='7' color='blue'>

He said, &quot;It's a beautiful day!&quot; </center></font>");

</script></body></html>

Output from Document 1.4aOutput from Document 1.4a

This output includes output from the lastModified property of the document object. It also shows the hex codes for some colors.

Document Properties and Document Properties and MethodsMethods

Property or Method and Use Action

Propertydocument.bgColor

Returns current value of background (page) color. Returns "#ffffff" for

<body bgcolor="white">

Propertydocument.fgColor

Returns current value of font color. Returns "#0000ff" for

<body text="blue">

Propertydocument.lastModified

Returns text string containing date the document was last modified.

Methoddocument.write("Hello!")

Prints quoted string on document page.

Methoddocument.writeln("Hello!")

Prints quoted string on document page, followed by line feed.*

Chapter 1: 1.3 Accessing HTML Chapter 1: 1.3 Accessing HTML Documents on the WebDocuments on the Web

HTML documents are accessible locally, with any computer that has a browser, and globally if the document is on an Internet-accessible server.

A typical URL: http://www.myUniversity.edu/~myName/index.htm index.htm or index.html is always the default “home

page.” This means that http://www.myUniversity.edu/~myName is equivalent.

Locally, clicking on any file with an .htm or .html extension should open that file in your browser.

Chapter 1: 1.4 Another Chapter 1: 1.4 Another ExampleExample

Document 1.5 (house.htm)

<html><head><title>Our New House</title><script language="javascript" type="text/javascript"> document.write("<font color='green'>This document was last modified on "+document.lastModified+"</font>");</script></head><body><h1>Our New House</h1><p>Here's the status of our new house. (We know you're fascinated!)</p><!-- Substitute your own image here. --><img src="house.jpg" align="left" /><br /></body></html>