Table Of Content

David R. Brooks Guide to HTML, JavaScript and PHP For Scientists and Engineers David R. Brooks Institute for Earth Science Research and Education 2686 Overhill Drive Eagleville, PA 19403 USA [email protected] ISBN 978-0-85729-448-7 e-ISBN 978-0-85729-449-4 DOI 10.1007/978-0-85729-449-4 Springer London Dordrecht Heidelberg New York British Library Cataloguing in Publication Data A catalogue record for this book is available from the British Library Library of Congress Control Number: 2011926229 © Springer-Verlag London Limited 2011 Apart from any fair dealing for the purposes of research or private study, or criticism or review, as permitted under the Copyright, Designs and Patents Act 1988, this publication may only be reproduced, stored or transmitted, in any form or by any means, with the prior permission in writing of the publishers, or in the case of reprographic reproduction in accordance with the terms of licenses issued by the Copyright Licensing Agency. Enquiries concerning reproduction outside those terms should be sent to the publishers. The use of registered names, trademarks, etc., in this publication does not imply, even in the absence of a specific statement, that such names are exempt from the relevant laws and regulations and therefore free for general use. The publisher makes no representation, express or implied, with regard to the accuracy of the information contained in this book and cannot accept any legal responsibility or liability for any errors or omissions that may be made. Printed on acid-free paper Springer is part of Springer Science+Business Media (www.springer.com) Contents 1 Introducing HTML and JavaScript ................................................................ 1 1.1 Introducing the Tools ................................................................................. 1 1.1.1 What Is an HTML Document? ...................................................... 1 1.1.2 What Is JavaScript? ........................................................................ 3 1.1.3 How Do You Create HTML/JavaScript Documents? .................... 4 1.1.4 Some Typographic Conventions Used in This Book ..................... 6 1.1.5 Where Can You Find More Information About HTML and JavaScript? .............................................................................. 6 1.2 Your First HTML/JavaScript Documents .................................................. 7 1.3 Accessing HTML Documents on the Web ................................................. 14 1.4 Another Example ....................................................................................... 16 2 HTML Document Basics .................................................................................. 19 2.1 Documents, Elements, Attributes, and Values ........................................... 19 2.1.1 Essential Elements ......................................................................... 19 2.1.2 Some Other Important Elements .................................................... 20 2.2 HTML Syntax and Style ............................................................................ 26 2.3 Using the Element....................................................................... 28 script 2.4 Creating and Organizing a Web Site .......................................................... 28 2.5 Selecting and Using Colors ........................................................................ 32 2.6 Using Cascading Style Sheets .................................................................... 34 2.7 Another Example ....................................................................................... 39 3 HTML Tables, Forms, Lists, and Frames ....................................................... 41 3.1 The Element .................................................................................. 41 table 3.1.1 Basic Table Formatting .................................................................. 41 3.1.2 Subdividing Tables into Sections ................................................... 43 3.1.3 Merging Cells Across Rows and Columns .................................... 45 3.2 The and Elements ............................................................... 48 form input 3.3 Creating Pull-Down Lists ........................................................................... 52 3.4 Combining Tables and Forms .................................................................... 53 3.5 E-Mailing the Contents of Forms ............................................................... 55 3.6 The List Elements ...................................................................................... 57 3.7 Using HTML Frames ............................................................................... 62 3.8 More Examples......................................................................................... 67 3.8.1 Selecting Cloud Types from a List of Possibilities .................... 67 3.8.2 A Simple “Split Window” Application ...................................... 69 4 Fundamentals of the JavaScript Language .................................................... 73 4.1 Capabilities of JavaScript ......................................................................... 73 4.2 Some Essential Terminology .................................................................... 74 4.3 Structure of JavaScript Code .................................................................... 76 4.3.1 JavaScript Statements ................................................................. 76 4.3.2 Statement Blocks ........................................................................ 76 4.3.3 Comments ................................................................................... 77 4.4 Data and Objects ...................................................................................... 78 4.4.1 Data Declarations and Variables ................................................. 78 4.4.2 Data Types .................................................................................. 79 4.4.3 Literals ........................................................................................ 80 4.4.4 Case Sensitivity .......................................................................... 80 4.4.5 Objects and Methods for Input and Output ................................ 81 4.4.6 String Methods ........................................................................... 83 4.5 Tokens, Operators, Expressions, and Statements ..................................... 85 4.5.1 Tokens ......................................................................................... 85 4.5.2 Arithmetic Operators .................................................................. 85 4.5.3 The Assignment Operator ........................................................... 86 4.5.4 Shorthand Arithmetic/Assignment Operators ............................ 87 4.6 The JavaScript Object .................................................................... 89 Math 4.7 Comparison Operators and Decision-Making Structures ......................... 93 4.7.1 Relational and Logical Operators ............................................... 93 4.7.2 The Construct (Branching Structures) .................................. 93 if 4.7.3 The Construct .............................................................. 98 switch 4.8 Loop Structures ........................................................................................ 99 4.8.1 Count-Controlled Loops ............................................................. 99 4.8.2 Conditional Loops ...................................................................... 101 4.9 Using JavaScript to Change Values in Form Fields ................................. 104 4.10 More Examples......................................................................................... 107 4.10.1 Solving the Quadratic Equation .................................................. 107 4.10.2 Rectangular Rule Numerical Integration .................................... 108 5 Using Arrays in HTML/JavaScript ................................................................. 111 5.1 Basic Array Properties.............................................................................. 111 5.2 Some Operations on Arrays ..................................................................... 115 5.2.1 Manipulating Stacks and Queues ............................................... 115 5.2.2 Sorting ........................................................................................ 117 5.3 More about Array Methods ...................................................................... 118 5.4 Creating Two-Dimensional Arrays .......................................................... 119 5.5 Using Arrays to Access the Contents of Forms ....................................... 122 5.5.1 Accessing values of Fields ................................. 122 type="text" 5.5.2 Accessing and type="radio" type="checkbox" Fields .............................................................................................. 125 5.5.3 Accessing Multiple Options Chosen in tags .............. 127 <select> 5.6 Hiding the Contents of a JavaScript Script ................................................ 129 5.7 More Examples .......................................................................................... 131 5.7.1 Checking IDs and Passwords ......................................................... 131 5.7.2 Magic Squares ................................................................................ 132 6 JavaScript Functions ........................................................................................ 135 6.1 The Purpose of Functions in Programming ............................................... 135 6.2 Defining JavaScript Functions ................................................................... 136 6.3 Using JavaScript Functions With HTML Forms ....................................... 138 6.3.1 Passing Numerical Values to a Function ........................................ 139 6.3.2 Using Entire Forms as Input .......................................................... 142 6.3.3 Using Arrays to Return Output Values .......................................... 145 6.4 Some Global Methods and Event Handlers ............................................... 146 6.4.1 Global Methods .............................................................................. 146 6.4.2 Using Event Handlers with Forms and Functions ......................... 149 6.5 Recursive Functions ................................................................................... 150 6.6 Passing Values from One Document to Another ....................................... 154 6.7 Revisiting the JavaScript Methods ............................................. 157 sort() 6.8 More Examples .......................................................................................... 158 6.8.1 Dewpoint Temperature ................................................................... 158 6.8.2 Loan Repayment Schedule ............................................................ 160 6.8.3 Legendre Polynomials ................................................................... 162 6.8.4 Array-Derived Pull-Down Menus .................................................. 163 6.8.5 Creating a “Password-Protected” HTML Document ..................... 165 7 Creating a Server-Side Environment with PHP ............................................. 167 7.1 Getting Started with PHP ........................................................................... 167 7.2 More Examples .......................................................................................... 182 7.2.1 Solving the Quadratic Equation ..................................................... 182 7.2.2 Preventing Multiple Submissions from a Form ............................. 184 8 Working with PHP ............................................................................................ 187 8.1 Structure of PHP Scripts ............................................................................ 187 8.1 Calculations with PHP ............................................................................... 188 8.3 More About PHP File Input/Output ........................................................... 203 8.4 More Examples .......................................................................................... 206 8.4.1 Calculating Volumes of Solid Objects ........................................... 206 8.4.2 Processing Image Files ........................................................ 211 .bmp 8.4.3 Transforming and Displaying Images ............................................ 221 8.4.4 Self-Contained HTML/JavaScript/PHP Documents ...................... 222 9 PHP Arrays ........................................................................................................ 225 9.1 Array Definition ....................................................................................... 225 9.2 Array Sorting ............................................................................................ 229 9.3 Stacks, Queues, and Line Crashers .......................................................... 232 9.4 More Examples......................................................................................... 234 9.4.1 The Quadratic Formula Revisited .............................................. 234 9.4.2 Reading Values ....................................................... 237 checkbox 9.4.3 Building a Histogram Array ....................................................... 241 9.4.4 Shuffle a Card Deck .................................................................... 243 9.4.5 Manage a Data File ..................................................................... 244 9.4.6 Recursive Insertion Sort ............................................................. 249 10 Summary of Selected PHP Language Elements ............................................. 251 10.1 Data Types and Operators ........................................................................ 251 10.1.1 Data Types .................................................................................. 251 10.1.2 Operators .................................................................................... 252 10.2 Conditional Execution .............................................................................. 253 10.2.1 Conditional Execution ................................................................ 253 10.2.2 Case-Controlled Conditional Execution ..................................... 254 10.3 Loops ........................................................................................................ 255 10.3.1 Count-Controlled Loops ............................................................. 256 10.3.2 Condition-Controlled Loops ....................................................... 258 10.4 Functions and Language Constructs......................................................... 259 10.4.1 File Handling and I/O Functions ................................................ 259 10.4.2 String Handling Functions .......................................................... 269 10.4.3 Math Constants and Functions ................................................... 273 10.4.4 Array Functions and Language Constructs ................................ 275 10.4.5 Miscellaneous Functions and Constructs ................................... 281 11 Using PHP from a Command Line .................................................................. 287 12 Using Graphics with PHP ................................................................................. 293 12.1 Introduction .............................................................................................. 293 12.2 Writing GD Graphics Applications for Displaying Data ......................... 293 12.2.1 Getting Started ............................................................................ 295 12.2.2 Pie Charts .................................................................................... 297 12.2.3 Horizontal Bar Charts ................................................................. 306 12.2.4 Vertical Bar Charts ..................................................................... 316 12.2.5 Line Graphs ................................................................................ 330 12.3 Summary of Some GD Graphics Functions ............................................. 344 12.3.1 Create and Destroy Images ......................................................... 344 12.3.2 Draw Lines and Shapes .............................................................. 345 12.3.3 Display Text ................................................................................ 347 Appendices ................................................................................................................. 349 A.1 List of Document Examples .............................................................................. 349 A.2 Displaying Special Characters in an HTML Document ................................... 353 A.3 ASCII Character Codes ..................................................................................... 355 A.4 Strategies for Solving Computational Problems ............................................... 357 Exercises ..................................................................................................................... 365 Glossary ..................................................................................................................... 395 Index ........................................................................................................................... 403 Output Examples in Color ....................................................................................... 413 Introducing HTML and JavaScript 1 Abstract Chapter 1 provides a very brief introduction to using HTML and JavaScript for creating simple Web pages. It presents examples of how JavaScript interfaces with an HTML document to display some printed output in a Web browser window. The chapter introduces the concept of an HTML document as an object, with certain methods and properties accessible through JavaScript to act on that object. Numerous examples show how to modify the appearance of a document by using HTML tags and their attributes, including as part of a text string passed as a calling argu- ment to JavaScript’s method. write() 1.1 Introducing the Tools 1.1.1 What Is an HTML Document? HTML is an acronym for HyperText Markup Language. HTML documents, the foun- dation of all content appearing on the World Wide Web (WWW), consist of two essential parts: information content and a set of instructions that tells your computer how to display that content. The instructions—the “markup,” in editorial jargon—comprise the HTML language. It is not a programming language in the traditional sense, but rather a set of instructions about how to display content. The computer application that translates this description is called a Web browser. Ideally, online content should look the same regardless of the operating system on which a Web browser resides or the browser used. This goal of complete platform independence is achieved only approximately in practice. A basic HTML document requires a minimum of four sets of elements: <html> … </html> <head> … </head> <title> … </title> <body> … </body> D.R. Brooks, Guide to HTML, JavaScript and PHP: For Scientists and Engineers, 1 DOI 10.1007/978-0-85729-449-4_1, © Springer-Verlag London Limited 2011 2 1 Introducing HTML and JavaScript 1 These elements define the essential parts of an HTML document: the document itself, a heading section, a title section, and a body. Each of the elements is defined by two tags—a start tag and an end tag. Tags are always enclosed in angle brackets: . End tags start <…> with a slash ( ). As will be shown later, some HTML elements have only one tag. Most / tags are supposed to occur in pairs, although this rule is enforced only loosely in HTML. In order to support a scripting language such as JavaScript (much more about that later!), another element must be added to the four basic elements: <script> … </script> As used in this book, a element always contains JavaScript code. script These elements are organized as follows within an HTML document: <html> <head> <title> … </title> …  <script> … </script> </head> <body> … </body> </html> The tag encloses all other tags and defines the boundaries of the HTML docu- html ment. We will return to the other tags later. tags often appear inside the script <head> tag, but they can appear elsewhere in a document, too. The indenting used to set off pairs of tags is optional, but it makes documents easier to create, read, and edit. This style is part of good programming practice in all languages. Because JavaScript is so tightly bound to HTML documents, you must learn JavaScript along with at least a subset of HTML. Unfortunately for anyone trying to learn and use HTML and JavaScript, each of the several available browsers is free to implement and support JavaScript in its own way. A browser doesn’t even have to support JavaScript at all, although it is hard to imagine why it wouldn’t. Browsers can and do incorporate some pro- prietary HTML and JavaScript features that may not be supported by other browsers. Newer versions of any browser may support features that won’t be recognized by earlier versions. Fortunately, it is possible to work with what is essentially a de facto standardized subset of HTML and JavaScript. As a result, some of the descriptions of the details of HTML and JavaScript in this book will be incomplete; this is not necessarily a bad thing! Although HTML documents are usually considered to be a way of distributing information for remote access on the Web, they are equally useful when used locally on any computer that has a browser. So, in conjunction with JavaScript (and later with PHP), you can create a self-contained problem-solving environment that can be used locally as well as (literally) globally. 1.1 Introducing the Tools 3 Good programming technique often involves separating the input/output (I/O) interface from the underlying calculations that do the work of a program. The programming environment provided by HTML/JavaScript provides a conceptually elegant means of implementing this strategy. An HTML document provides the I/O interface and JavaScript (and/or PHP, as will be seen later in this book) handle the calculations. An advantage of HTML is that it provides a wealth of interface possibilities that far surpass those of text-based languages such as C. 1.1.2 What Is JavaScript? JavaScript is an interpreted (rather than compiled) object-oriented programming language that has been developed for use alongside other Web tools. JavaScript does not operate as a standalone language. It is designed to work together with HTML for creating interactive Web pages. It is not the same as Java, which is a compiled object-oriented language. JavaScript is used to write client side applications, which means that JavaScript code is sent to a user’s computer when a Web page is loaded. The code is then executed, basi- cally line by line, by a JavaScript interpreter included as part of the user’s (client’s) Web browser. This arrangement minimizes security issues that can arise when a client computer interacts with the computer that sent the page. It also makes it easy to package an entire problem, with its own user interface and solution, self-contained within a single document. But the inability to interact dynamically with information stored on a server imposes limi- tations on the kinds of tasks that JavaScript can accomplish. It is commonplace to refer to any set of written computer instructions as a “program.” However, this term is more rigorously applied to a separate entity that can be executed on its own. Because JavaScript is interpreted rather than compiled, a separately executable entity is never created. Instead, JavaScript code statements are interpreted and executed one at a time, essentially “on the fly.” Although this may seem inefficient, there is rarely any discernible time lag associated with executing JavaScript commands on modern computers. JavaScript is one of a class of scripting languages whose purpose is to access and modify components of an existing information interface. (Microsoft’s VBScript is another scripting language.) In this case, the interface is an HTML document. As soon as HTML documents on the Web evolved from one-way delivery systems for displaying fixed content, something like JavaScript immediately became necessary. One of its first applications arose from the need to check values entered by users into the fields of HTML forms that can be sent back to the originator. (Forms are discussed in a later chapter.) JavaScript can be used to compare input values against an expected range or set of values and to generate appropriate messages and other actions based on those comparisons. JavaScript has evolved into a complete programming language with extensive capabilities for manipulating text and handling mathematical operations, useful for a wide range of computing problems. Possible applications include many self-contained scientific and engineering calculations. As noted earlier, JavaScript is restricted to problems that do not need to access external data sources, regardless of whether those sources reside on a local computer or on a remote server.