1. BMES514 – Fall 2010 David R. Brooks Institute for Earth Science Research and Education 610-584-5619 brooksdr@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

2. Introduction 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.

3. Resources 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)

4. The 5 steps in Solving Computing Problems 1. Define the problem. 2. Outline a solution 3. Design an algorithm 4. Convert the algorithm to a program. 5. Verify the operation of the program.

5. Pseudocode for Developing Algorithms ASSIGN Set a variable equal to a value, another variable, or an expression. See also INCREMENT and INITIALIZE. CALL Invoke a subprogram. See SUBPROGRAM. CHOOSE Take action based on a restricted list of possibilities. CLOSE Close an open file. DEFINE Define variables and user-defined data types.

6. Pseudocode 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. INITIALIZE A special kind of assignment statement used to set initial values in a program. LOOP (conditions)… END LOOP Execute instructions repeatedly until (or as long as) certain conditions are met.

7. Pseudocode for Developing Algorithms OPEN Open an external file. READ Pass information to a program through an interface or from an external file. SUBPROGRAM Marks the start of a subprogram module, used to specify the flow of information between parts of a program. WRITE/DISPLAY Display or save output from a program.

8. The Nature of HTML/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.

9. 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.

10. Chapter 1: 1.1 Introducing the Tools What is an HTML document? What is JavaScript? How do you create an HTML/JavaScript document?

11. Chapter 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. … … …

12. Chapter 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.

13. Chapter 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.

14. Chapter 1: 1.2 Your First HTML/JavaScript Document Document 1.1 (HelloWorldHTML.htm) Hello, world! Hello, world! It's a beautiful day!

15. Chapter 1: 1.2 Your First HTML/JavaScript Document (alternate code) Document 1.2 (HelloWorld.htm) Hello, world! // These statements display text in a document. document.write("Hello, world!"); document.write(" It's a beautiful day!");

16. Output 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.

17. Fancier Output… Document 1.3 (HelloWorld2.htm) Hello, world! First JavaScript document.write("<font size='5' color='red'> Hello, world! "); document.write(" It's a beautiful day! ");

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

19. More Options… Document 1.4a (HelloWord3.htm) Hello, world! (v.3) First JavaScript document.write(" This document was last modified on " +document.lastModified+" "); document.write("background = "+document.bgColor); document.write(" font = " + document.fgColor); document.write("<font size='5' color='red'> Hello,world! "); document.write(" He said, "It's a beautiful day!" ");

20. Output 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.

21. Document Properties and Methods Property or Method and UseAction Property document.bgColor Returns current value of background (page) color. Returns "#ffffff" for Property document.fgColor Returns current value of font color. Returns "#0000ff" for Property document.lastModified Returns text string containing date the document was last modified. Method document.write("Hello!") Prints quoted string on document page. Method document.writeln("Hello!") Prints quoted string on document page, followed by line feed. *

22. Chapter 1: 1.3 Accessing HTML Documents 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.

23. Chapter 1: 1.4 Another Example Document 1.5 (house.htm) Our New House document.write(" This document was lastmodified on "+document.lastModified+" "); Our New House Here's the status of our new house. (We know you're fascinated!)