Transcript
Learn JavaScript the quick and easy way, from the experts at w3schools
There’s no faster, easier way to learn JavaScript and Ajax
You will learn: • What JavaScript is and isn’t • How to put JavaScript into an HTML page • JavaScript special characters and guidelines • How to use JavaScript operators • If…else statements and do…while loops
Learn
JavaScript
®
and Ajax
with w3schools
®
Learn JavaScript and Ajax
If you want to start building interactive Web pages right away, you should begin by learning how to use JavaScript and Ajax. w3schools has perfected a straightforward tutorial approach that gives you what you need to know in manageable lessons, liberally supported with examples. You’ll find that tried-and-true format in this book, along with a detailed reference section that you will use again and again.
• All about JavaScript objects • How to use Ajax properties • What the Ajax XMLHttpRequest Object does
$29.99 US/$35.99 CAN
with w3schools
w3schools is a leading Web destination for learning key Web technologies online. Founded in 1999, it receives more than 10 million unique visitors each month. w3schools tutorials are required reading in more than 100 high schools and universities.
Add JavaScript Define functions Create cookies Declare variables Create objects Build Ajax pages
Programming Languages/ JavaScript
611944-Ch01.F.indd 8
4/20/10 1:35 PM
Learn
JavaScript
®
and AJAX with w3schools Hege Refsnes, Ståle Refsnes, Kai Jim Refsnes, and Jan Egil Refsnes with Kelly Dobbs Henthorne
Wiley Publishing, Inc.
611944-FM.F.indd 1
4/29/10 9:47 PM
Learn JavaScript and AJAX with w3schools ®
Published by Wiley Publishing, Inc. 111 River Street Hoboken, NJ 07030-5774 www.wiley.com Copyright © 2010 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-0-470-61194-4 LOC/CIP: 2010925161 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, N 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions. Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read. For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 5723993 or fax (317) 572-4002. Trademarks: Wiley, the Wiley logo, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. w3schools and the w3schools logo are registered trademarks of w3schools. JavaScript is a registered trademark of Sun Microsystems, Inc. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress CIP Data is available from the publisher.
611944-FM.F.indd 2
4/29/10 9:47 PM
w3schools Authors/Editors w3schools’ mission is to publish well-organized and easy-to-understand online tutorials based on the W3C Web standards.
Hege Refsnes Hege is a writer and editor for w3schools. She works to improve the usability and accessibility of the Web. Hege has been writing tutorials for w3schools since 1998.
Ståle Refsnes Ståle has ten years of Internet development experience, developing all the Web-based solutions for The Norwegian Handball Federation. Ståle has been writing tutorials for w3schools since 1999.
Kai Jim Refsnes Kai Jim has been around computers since childhood, working with them since the age of 14. He has been writing tutorials for w3schools since completing a bachelor’s degree in information technology in 2005.
Jan Egil Refsnes Jan Egil is the president and founder of w3schools. He is a senior system developer with a master’s degree in information technology and more than 30 years of computing experience. “Jani” has supervised a large number of company-critical development projects for oil companies like Amoco, British Petroleum, ELF, Halliburton, and Brown & Root. He has also developed computer-based solutions for more than 20 governmental institutions like The National Library, Norwegian High Schools, The State Hospital, and many others. Jani started w3schools in 1998.
611944-FM.F.indd 3
4/29/10 9:47 PM
Credits Acquisitions Editor Scott Meyers Production Abshier House Technical Editor Harry Buss Copy Editor Abshier House Associate Director of Marketing David Mayhew Production Manager Tim Tate
611944-FM.F.indd 4
Vice President and Executive Group Publisher Richard Swadley Vice President and Executive Publisher Barry Pruett Associate Publisher Jim Minatel Project Coordinator, Cover Lynsey Stanford Proofreading and Indexing Abshier House Cover Designer Michael Trent
4/29/10 9:47 PM
Table of Contents Introduction..................................................1 JavaScript............................................................................................ 1 AJAX................................................................................................... 3 How To Use This Book....................................................................... 4
Section I: JavaScript Basic..............................7 Chapter 1: JavaScript How To and Where To............... 9 How To Put a JavaScript into an HTML Page..................................... 9 How to Handle Simple Browsers....................................................... 12 Where to Put the JavaScript.............................................................. 12 Using an External JavaScript............................................................. 15
Chapter 2: JavaScript Statements and Comments....... 16 JavaScript Statements........................................................................ 16 JavaScript Comments........................................................................ 18
Chapter 3: JavaScript Variables................................... 23 Do You Remember Algebra from School?.......................................... 23 JavaScript Variables........................................................................... 23 Declaring (Creating) JavaScript Variables.......................................... 25 Assigning Values to Undeclared JavaScript Variables.......................... 25 Redeclaring JavaScript Variables........................................................ 26 JavaScript Arithmetic........................................................................ 26
v
611944-FM.F.indd 5
4/29/10 9:47 PM
Table of Contents
Chapter 4: JavaScript Operators................................. 27 JavaScript Arithmetic Operators........................................................ 27 JavaScript Assignment Operators....................................................... 28 The + Operator Used on Strings........................................................ 28 Adding Strings and Numbers............................................................ 28
Chapter 5: JavaScript Comparisons............................ 30 Comparison Operators...................................................................... 30 How to Use Comparisons................................................................. 31 Logical Operators.............................................................................. 31 Conditional Operator....................................................................... 31
Chapter 6: JavaScript If...Else Statements................... 32 Conditional Statements..................................................................... 32 if Statement....................................................................................... 33 if...else Statement.............................................................................. 34 if...else if...else Statement................................................................... 36
Chapter 7: JavaScript Loops....................................... 39 The for Loop..................................................................................... 39 The while Loop................................................................................. 41 The do...while Loop.......................................................................... 43
Chapter 8: Additional JavaScript Flow Control Statements.................................................................... 46 The break Statement......................................................................... 46 The continue Statement.................................................................... 47 JavaScript for...in Statement.............................................................. 48 JavaScript switch Statement............................................................... 50 vi
611944-FM.F.indd 6
4/29/10 9:47 PM
Table of Contents
Chapter 9: JavaScript Popup Boxes............................. 53 Popup Boxes...................................................................................... 53
Chapter 10: JavaScript Functions............................... 58 How to Define a Function................................................................ 58 JavaScript Function Examples........................................................... 59 The return Statement........................................................................ 62 The Lifetime of JavaScript Variables.................................................. 63
Chapter 11: JavaScript Events..................................... 64 onLoad and onUnload...................................................................... 64 onFocus, onBlur, and onChange....................................................... 65 onSubmit.......................................................................................... 65 onMouseOver and onMouseOut....................................................... 66 onClick............................................................................................. 66
Chapter 12: Javascript try…catch and throw Statements.......................................................... 67 JavaScript—Catching Errors............................................................. 67 The try...catch Statement.................................................................. 67 The throw Statement......................................................................... 70
Chapter 13: JavaScript Special Characters and Guidelines.................................................................... 73 Insert Special Characters................................................................... 73 JavaScript Is Case Sensitive................................................................ 74 White Space...................................................................................... 74 Break up a Code Line........................................................................ 74
vii
611944-FM.F.indd 7
4/29/10 9:47 PM
Table of Contents
Section II: JavaScript Objects.......................77 Chapter 14: JavaScript Objects Intro.......................... 79 Object-Oriented Programming......................................................... 79 Properties.......................................................................................... 79 Methods............................................................................................ 80
Chapter 15: JavaScript String Object.......................... 81 String Object..................................................................................... 81 Examples........................................................................................... 82
Chapter 16: JavaScript Date Object............................ 88 Create a Date Object......................................................................... 88 Set Dates........................................................................................... 89 Compare Two Dates.......................................................................... 89 Examples........................................................................................... 90
Chapter 17: JavaScript Array Object........................... 95 What Is an Array?.............................................................................. 95 Create an Array................................................................................. 96 Access an Array................................................................................. 96 Modify Values in an Array................................................................. 96 Examples........................................................................................... 97
Chapter 18: JavaScript Boolean Object.................... 107 Create a Boolean Object.................................................................. 107 Examples......................................................................................... 108
viii
611944-FM.F.indd 8
4/29/10 9:47 PM
Table of Contents
Chapter 19: JavaScript Math Object......................... 110 Math Object................................................................................... 110 Mathematical Constants.................................................................. 110 Mathematical Methods................................................................... 111 Examples......................................................................................... 112
Chapter 20: JavaScript RegExp Object..................... 115 What Is RegExp?............................................................................. 115 RegExp Modifiers............................................................................ 116 test()................................................................................................ 118 exec().............................................................................................. 119
Section III: JavaScript Advanced.................121 Chapter 21: JavaScrip Browser Detection................. 123 Browser Detection........................................................................... 123 The Navigator Object..................................................................... 124
Chapter 22: JavaScript Cookies................................ 129 What Is a Cookie?........................................................................... 129 Create and Store a Cookie............................................................... 130
Chapter 23: JavaScript Form Validation................... 134 Required Fields............................................................................... 134 E-mail Validation............................................................................ 136
ix
611944-FM.F.indd 9
4/29/10 9:47 PM
Table of Contents
Chapter 24: JavaScript Animation............................ 138 The HTML Code........................................................................... 138 The JavaScript Code........................................................................ 139 The Entire Code............................................................................. 139
Chapter 25: JavaScript Image Maps.......................... 141 HTML Image Maps........................................................................ 141 Adding Some JavaScript.................................................................. 142
Chapter 26: JavaScript Timing Events...................... 144 The setTimeout() Method............................................................... 144 The clearTimeout() Method............................................................ 149
Chapter 27: Create Your Own Objects with JavaScript............................................................ 151 JavaScript Objects........................................................................... 151 Creating Your Own Objects............................................................ 152
Section IV: AJAX Basic................................157 Chapter 28: AJAX XMLHttpRequest....................... 159 AJAX Uses the XMLHttpRequest Object........................................ 159 The XMLHttpRequest Object........................................................ 159 Your First AJAX Application........................................................... 160
Chapter 29: AJAX Browser Support......................... 163 The XMLHttpRequest.................................................................... 163 All Together Now............................................................................ 164
x
611944-FM.F.indd 10
4/29/10 9:47 PM
Table of Contents
Chapter 30: AJAX—The XMLHttpRequest Object’s Methods and Properties................................. 166 Important Methods......................................................................... 166 Sending an AJAX Request to a Server.............................................. 167 Important Properties....................................................................... 167 The responseText Property.............................................................. 167 XMLHttpRequest Open—Using False............................................ 167 XMLHttpRequest Open—Using True............................................ 168 The readyState Property.................................................................. 168 The onreadystatechange Property.................................................... 169
Chapter 31: AJAX Server.......................................... 170 XMLHttpRequest Object Can Request Any Data........................... 170 Requesting Files.............................................................................. 170 Submitting Forms........................................................................... 171
Section V: AJAX Advanced.........................173 Chapter 32: AJAX Suggest....................................... 175 The HTML Form........................................................................... 175 The showHint() Function............................................................... 176 The GetXmlHttpObject() Function................................................ 177 The stateChanged() Function.......................................................... 177 AJAX Suggest Source Code............................................................. 178
Chapter 33: AJAX Database Example....................... 184 The AJAX JavaScript....................................................................... 185 The AJAX Server Page..................................................................... 186 xi
611944-FM.F.indd 11
4/29/10 9:47 PM
Table of Contents
Chapter 34: AJAX XML Example............................ 188 The AJAX JavaScript....................................................................... 189 The AJAX Server Page..................................................................... 190 The XML File................................................................................. 191
Chapter 35: AJAX ResponseXML Example.............. 198 The AJAX JavaScript....................................................................... 199 The AJAX Server Page..................................................................... 201
Appendixes...............................................203 Appendix A: JavaScript Objects........................................................................203 Appendix B: HTML DOM Objects.................................................................214
Index.........................................................245
xii
611944-FM.F.indd 12
4/29/10 9:47 PM
Introduction W
elcome to Learn JavaScript and Ajax with w3schools. This book is for Web site designers and builders who want to learn to add interactivity to their Web pages with JavaScript and Ajax. w3schools (www.w3schools.com), is one of the top Web destinations to learn JavaScript and many other key Web languages. Founded in 1998, w3schools’ tutorials are recommended reading in more than 100 universities and high schools all over the world. This book is a great companion to the JavaScript and Ajax tutorials on the w3schools site, which were written by Jan Egil Refsnes, Ståle Refsnes, Kai Jim Refsnes, and Hege Refsnes. Like the w3schools online tutorials, this book features a brief presentation of each topic, trading lengthy explanations for abundant examples showcasing each key feature. This book, as well as other w3schools books published by Wiley, features straight-forward and concise tutorials on each topic from which the beginning Web developer can easily learn. All of the book’s content is derived from w3schools’ accurate, user-tested content used by millions of learners every month.
JavaScript JavaScript is the scripting language of the Web. JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more. JavaScript is the most popular scripting language on the Internet and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
What You Should Already Know Before you continue you should have a basic understanding of HTML. If you want to study this subject first, please read Learn HTML and CSS with w3schools.
What Is JavaScript? 8 JavaScript was designed to add interactivity to HTML pages. 8 JavaScript is a scripting language. 8 A scripting language is a lightweight programming language. 8 JavaScript is usually embedded directly into HTML pages.
611944-FM.F.indd 1
4/29/10 9:47 PM
Learn JavaScript and AJAX with w3schools 8 JavaScript is an interpreted language (means that scripts execute without preliminary compilation). 8 Everyone can use JavaScript without purchasing a license.
Are Java and JavaScript the Same? No, they are not. Java and JavaScript are two completely different languages in both concept and design. Java (developed by Sun Microsystems) is a powerful and much more complex programming language in the same category as C and C++.
What Can JavaScript Do? 8 JavaScript gives HTML designers a programming tool. HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax. Almost anyone can put small “snippets” of code into their HTML pages. 8 JavaScript can put dynamic text into an HTML page. A JavaScript statement like document.write(“” + name + “
”) can write a variable text into an HTML page. 8 JavaScript can react to events. A JavaScript script can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element. 8 JavaScript can read and write HTML elements. A JavaScript script can read and change the content of an HTML element. 8 JavaScript can be used to validate data. A JavaScript script can be used to validate form data before it is submitted to a server. This saves the server from extra processing. 8 JavaScript can be used to detect the visitor’s browser. A JavaScript script can be used to detect the visitor’s browser, and depending on the browser, load another page specifically designed for that browser. 8 JavaScript can be used to create cookies. A JavaScript script can be used to store and retrieve information on the visitor’s computer.
The Real Name Is ECMAScript JavaScript’s official name is ECMAScript, which is developed and maintained by the ECMA International organization. The language was invented by Brendan Eich at Netscape (with Navigator 2.0) and has appeared in all Netscape and Microsoft browsers since 1996.
2
611944-FM.F.indd 2
4/29/10 9:47 PM
Introduction ECMA-262 is the official JavaScript standard. The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997. The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998. The development of the standard is still in progress.
AJAX AJAX equals Asynchronous JavaScript and XML. AJAX is based on JavaScript and HTTP requests. AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of trading data with a Web server, and changing parts of a Web page, without reloading the whole page.
What You Should Already Know Before you continue you should have a basic understanding of the following: 8 HTML 8 JavaScript If you want to study these subjects first, find the tutorials on the w3schools home page.
AJAX = Asynchronous JavaScript and XML AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive Web applications. With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a Web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the Web server, allowing Web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster, and more user friendly.
AJAX Is Based on Internet Standards AJAX is based on the following Web standards: 8 JavaScript 8 XML
3
611944-FM.F.indd 3
4/29/10 9:47 PM
Learn JavaScript and AJAX with w3schools 8 HTML 8 CSS AJAX applications are browser- and platform-independent.
AJAX Is About Better Internet-Applications Internet applications have many benefits over desktop applications: They can reach a larger audience; they are easier to install and support; and they are easier to develop. However, Internet applications are not always as “rich” and user friendly as traditional desktop applications. With AJAX, Internet applications can be made richer and more user friendly.
Start Using AJAX Today There is nothing new to learn. AJAX is based on existing standards. These standards have been used by developers for several years.
How To Use This Book Throughout this book, you will see several icons:
Try it yourself >> The Try It Yourself icon indicates an opportunity for you to practice what you’ve just learned. The code and examples under this icon come from examples on the w3schools site, which allow you to make changes to the code and see the results immediately. You do not have to type in the code examples in this book; you will find them all on the w3schools site. he w3schools icon indicates that more information is available on the w3schools T site. This icon indicates where you will find further information about a topic that is covered more thoroughly elsewhere within the book. This book is divided into five sections: 8 Section I: JavaScript Basic 8 Section II: JavaScript Objects 8 Section III: JavaScript Advanced 8 Section IV: AJAX Basic 8 Section V: SectionAJAX Advanced
4
611944-FM.F.indd 4
4/29/10 9:47 PM
Introduction If you’re anxious to improve your Web pages and to add some interactivity, jump right in with JavaScript Basic. Plenty of examples and opportunities to try things await, and w3schools will be right there when you need them!
5
611944-FM.F.indd 5
4/29/10 9:47 PM
611944-FM.F.indd 6
4/29/10 9:47 PM
Section I JavaScript Basic ❑ Chapter 1: JavaScript How To and Where To ❑ Chapter 2: JavaScript Statements and Comments ❑ Chapter 3: JavaScript Variables ❑ Chapter 4: JavaScript Operators ❑ Chapter 5: JavaScript Comparisons ❑ Chapter 6: JavaScript If…Else ❑ Chapter 7: JavaScript Loops ❑ Chapter 8: JavaScript Flow Control Statements ❑ Chapter 9: JavaScript Switch and Popup Boxes ❑ Chapter 10: JavaScript Functions ❑ Chapter 11: JavaScript Events ❑ Chapter 12: JavaScript Try…Catch and Throw Statements ❑ Chapter 13: JavaScript Special Characters and Guidelines 7
611944-Ch01.F.indd 7
4/20/10 1:35 PM
611944-Ch01.F.indd 8
4/20/10 1:35 PM
Chapter 1
JavaScript How To and Where To In This Chapter ❑ How To Put a JavaScript into an HTML Page ❑ How To Handle Simple Browsers ❑ Where To Put the JavaScript ❑ Using an External JavaScript The HTML