Upload
baldric-morris
View
221
Download
6
Embed Size (px)
Citation preview
BMES514 – Fall 2010BMES514 – Fall 2010
David R. BrooksDavid R. BrooksInstitute for Earth Science Research and EducationInstitute for Earth Science Research and Education
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, "It's a beautiful day!" </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>