1 / 23

BMES514 – Fall 2010

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

taran
Download Presentation

BMES514 – Fall 2010

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. <html> <head> <title> … </title> … <!-- Script elements are optional. --> <script> … </script> </head> <body> … </body> </html>

  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) <html><head><title>Hello, world!</title></head> <body> <p> Hello, world!<br />It's a beautiful day! </p> </body> </html>

  15. Chapter 1: 1.2 Your First HTML/JavaScript Document (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>

  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) <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>

  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. 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> More Options…

  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

  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.htmlis always the default “home page.” This means that http://www.myUniversity.edu/~myNameis equivalent. • Locally, clicking on any file with an.htmor.htmlextension should open that file in your browser.

  23. Chapter 1: 1.4 Another Example 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>

More Related