For Dummies JavaScript and AJAX
Contents
1. Results plugin for Error Console Search Guat Firefox is Q eros d uses veces cer complete lt Q Web editor not well formed Line 2 Column 25 Chars 1724 Sel Win C Chapter 1 Taking the Web to the Next Level 23 Introducing Aptana One particular programmer s editor has really taken over the Web develop ment world in recent years Aptana is a full featured programmer s editor based on the powerful and popular Eclipse editor for Java programming Aptana has a lot to recommend Extensive built in support for Web languages Aptana comes out of the box with support for HTML XHTML CSS JavaScript and AJAX 1 Syntax highlighting Most programmer s editors have syntax highlight ing but Aptana is especially capable in this area Sometimes you ll have the same physical document with three or more different languages active and Aptana can usually sense by context whether you re writing CSS XHTML or JavaScript code 1 Code completion This is one of Aptana s most impressive features When you start writing a line of code Aptana will pop up a menu of sug gestions This helps you avoid mistakes so you don t have to memorize all the various CSS attributes and JavaScript commands exactly 1 Error detection Aptana can look over your document as you create it and highlight some areas in real time This feature can help you write better code and can also help hone2. c ctrable gt amp Coches Ecckmaks Tods Helo Animated page demo count toggle visibility toggle style animate show code drag this You can watch this space counting 1 counting 2 counting 3 counting 4 Wied 67 F lt x Thu 52 F k ho Samy 53 F Dore G oerns 0wsris vech CHEND 1 The Show Code button brings in text from an external file This button uses a simple form of AJAX to load an external file into the page in real time This is an easy way to build modular pages In this case I m actu ally pulling in a copy of the JavaScript code so you can see how it works Don t worry if you don t understand it yet That s what this book is for Figure 1 5 shows this operation in action Let the user drag the code The user can pick up the code and move it wherever she wants This is another kind of functionality unheard of in ordinary Web pages No you wouldn t normally display your code to users I m just illustrating that it s pretty easy to pull in an arbitrary text file from a server Since you area programmer now I chose to show you a preview of the code as the text file I brought in These capabilities are profound and they re just the beginning Learning to program transforms your Web pages from static documents to living applica tions that can interact with your users in new and exciting ways Feel free to look over the code for this project It
3. F lt x Thu 52 F 1 The Toggle Style button instantly changes the appearance of part of the page You can use JavaScript to change the contents of any part of the page that is the HTML but you can also use JavaScript to modify the appearance the CSS in real time In this example I ve cre ated a special CSS class called funky that is added to or removed from the output box every time the user clicks the button This approach works with any CSS class Amazing huh Figure 1 4 shows the page with the funky class applied ar If you need a refresher on CSS or XHTML please look over the bonus chapters on the Web site www dummies com go javascriptand ajaxfd or www aharrisbooks net jad av I ve added callouts to some of the figures in this chapter to describe what s happening The images in this book are not sufficient to under stand what the page does Find the program at www dummies com go javascriptandajaxfdor www aharrisbooks net jad and look at it yourself YY The Animate button is even more fun The Animate button makes a series of gradual changes to the output box changing its size shape and appearance over time You ve really got to try it a screen shot won t do it justice ee Figure 1 4 You can dynamically change the appearance of any page element il ar E Demo Mozilla Firefox 13 Chapter 1 Taking the Web to the Next Level The Toggle Style button Fle Edt yew Hstary
4. s actually in three files demo html demo css and demo js All can be found in the Chapter 1 folder of the book s companion Web site Use View Source when the page is displayed in your browser to see the source code of the HTML file 4 Part l Programming with JavaScript Click to see the code from another file lE Demo Mozilla Firefox fie Edt Ye History Gookmerks Joos heb B C gt amp 6 o D fe Progam Fiesjem Desde J Cookes dozsjadhad_Ljdemo hmi G Forms B images infomason Animated page demo count toggle visibility toggle style animate show code ou can drag this De Figure 1 5 The Show Code but ton pulls code from another file and shows it on screen ee I ve added plenty of comments in the code to help you see what s going on but it s okay if you don t have all the intricacies nailed down yet Think of this as a preview of things you ll get to do in this book Getting Started Making your pages do all this stuff looks like fun and it is There s a lot to get under your belt but don t panic I take you through everything The first step is to review the core technologies that JavaScript and AJAX are based on and see how they re related to some other more advanced technologies you ll eventually need Overview of the Core Technologies Powerful as they are JavaScript and AJAX do not stand on their own They only have me
5. code as it originally comes from the browser In JavaScript programming you re often changing the page code on the fly Firebug shows you the page as it really is even if it s being changed by JavaScript This is a very useful facility 1 Firebug lite This is a variation of firebug that works in IE and other browsers This adds most of the power of firebug to any browser Figure 1 13 shows Firebug in inspect mode As the user moves over a piece of the page the related code segment appears in the code window lE Demo Mozilla Firefox Jog fie Edt Ye History Bookmarks Tools heb O c O ren proyan riesana tere hoi e F Disable Cookes E css E Foms Mill images gt GP informazen gt F mscelanecus Resize gP Tools E view Source Oprers Animated page demo count toggle visibility f toggle style animate show code pt ar fo g unting atch this space counting 1 counting 2 x s m gt inspect Ect prewcode u draggable lt body lt himi 6G E l Console HTML CSS Script DOM Net Options Style Layout DOM Options Figure 1 13 Fass 3 e AEN Firebug being used ies to inspect a lt a sput class ecyle block gt Inherited from 4y t lt pre id code class ui draggable style position relative left 390px top EROA Web page 19px gt d 3 Done C Oefrors 0warings veoh GIT Adblock Now Sunny 62 F Wied 67 lt a Thu SAF The inspect
6. Chapter 1 Taking the Web to the Next Level In This Chapter Reviewing HTML XHTML and CSS Examining the role of JavaScript and AJAX Exploring what JavaScript and AJAX can add to Web pages Choosing an editor Building your browser toolkit J Web is a pretty big deal It s a lot of fun to build Web pages and just about every business needs them As the Web has grown and changed the expectations of what a Web page is and does have also changed If you already know HTML or XHTML you know how to create Web documents if you need a refresher check out Bonus Chapter 1 on either the companion Web site at www dummies com go javascriptandajaxfd or my own site at www aharrisbooks net jad As the Web has evolved so have the tools that are used to create Web pages and documents JavaScript and AJAX are two powerful tools for creating dynamic Web documents This chapter gets you started with a look at some of the primary technologies out there for building Web pages Building Something Cool This book is about adding features to Web pages that you cannot do with simple HTML and CSS Make no mistake we re talking about programming here and programming is a little bit harder than plain old Web development However it s really worth it as the example page in Figure 1 1 illustrates To keep this example simple I m using some external libraries They are explained in Part IV of this book but for now just appreciate that something e
7. Part I Programming with JavaScript At some point you ll want your Web pages to be available on the Internet Although you can install a server on your home computer it s usually better to use an online hosting service You can often get very good online hosting very cheaply or even free If you want to have a specific name attached to your Web site such as www mySite com then you ll need to pay about 10 a year to register the domain Hosting services frequently use Linux but you ll probably use an online interface that hides all the details from you The right tools make any job easier but for Web development many of the really great software tools are available entirely free of charge Because these tools are open source available with a license that encourages distribution they are entirely legal to use without paying for them unlike commercial pro grams obtained using illicit methods You can do basic Web development on any computer with a text editor and browser As your Web tweaking skills get more sophisticated you might want more powerful tools Read on to see some great tools that cost absolutely nothing Picking an Editor Web pages JavaScript HTML and CSS are all ultimately forms of text You don t really need any particular program to write them Still having exactly the right tool can make your life a lot easier Since you re going to spend a lot of time with your Web tools you should be aware of your op
8. aning in the context of Web pages so they rely on various Web technologies If you want to build a JavaScript application you ll need several other technologies too Chapter 1 Taking the Web to the Next Level 15 Y HTML HTML HyperText Markup Language is the basic markup lan guage that describes Web pages It s a relatively simple technique for building Web sites that requires nothing but a plain text editor 1 XHTML XHTML is often considered the successor to HTML Because it doesn t allow certain kinds of tags XHTML is actually a smaller language that s a bit easier to use Typically XHTML pages are more dependent on CSS than HTML as many of the HTML tags are replaced with CSS tools 1 CSS CSS Cascading Style Sheets is a way to add specific style informa tion to an HTML or XHTML page HTML and XHTML provide the general framework and CSS describes the color and layout JavaScript JavaScript is a programming language embedded in all modern Web browsers It s specially designed to interact with Web pages you can use it to extract information from parts of a page and to manipulate the page in real time 1 AJAX Asynchronous JavaScript And XML is a technique that allows JavaScript to communicate more directly with the Web server It creates an interesting new relationship between the Web browser and the Web server About half of this book is dedicated to AJAX PHP PHP Hypertext Preprocessor is one of s
9. ectly in the editor The editors also often have tools for predicting certain errors or responding to errors when they occur At a minimum you need the capability to jump directly to a particular line or section of your code Y Indentation support Most programmers use indentation as a power ful tool to help them understand the structure of the Web documents they re building A good editor can assist you with this indentation and also help you recognize when you ve made mistakes in the structure of your document Chapter 1 Taking the Web to the Next Level Getting familiar with some important editors A couple of multi purpose programmer s editors immediately come to mind You should consider investigating one or more of these free programs 1 vi and emacs These are the granddaddies of all text editors Both are very common on Unix Linux environments They are also available for Windows and Mac Though extremely capable editors vi and emacs were developed at a time when modern ideas about usability weren t practical If you already know how to use one of these tools by all means investigate a modern variant Frankly I still use emacs as my primary text editor though I don t know if I d learn it today with all the easier options out there Figure 1 6 shows a Web page being edited with emacs Clean interface without buttons or gadgets WE emacs AHARRIS_LT JEE Fie Ecit Gpters Buffers Tools HTML SGML Heb lt
10. en can help with many more languages 1 Syntax highlighting Various elements are colored in different ways so you can see what is in plain text what is part of an HTML tag and so on This simple feature can make it much easier to find problems like miss ing quotes and to see the general structure of your page quickly 1 Syntax support Programmer s editors often provide some sort of help for remembering the syntax of your language This boost can be in the form of buttons and macros for handling common code pre written tem plates for standard layouts and patterns and syntax completion which looks at what you re typing and suggests completions based on the cur rent language you re using YY Multiple document support Advanced Web applications often involve editing several different documents at once You might have a dozen Web pages with a few CSS style sheets and an external JavaScript file or two A programmer s editor allows you to view and edit all these files simultaneously Many also allow you to generate a project file so you can save all the related files automatically and load them in one batch Y Macro tools Programming often requires repetitive typing tasks Having a feature that records and plays back sequences of keystrokes as macros short automated operations can be incredibly helpful Debugging and preview support Most programmer s editors have a tool for previewing your code in a browser or sometimes dir
11. evel but JavaScript gives you a much more power ful set of tools for changing what parts of the page are visible to the user at any time Look at Figure 1 3 to see the page with the output segment hidden A new line is added to this section each time the user clicks the Count button History Bookmarks oos heb Fs amp PO A Reryyicyemagem Fes amas itdozsjadzad_Lidamo Hml lG 4 gt Cockes E css ET Foms lll images infomazen gt Mscelanecus 4 Gutlhe gt Resize gt g Took gt E view Source 2 aprons show code can drag watch this space counting counting 2 counting 3 counting 4 C Cerrors 0 warings veoh CHEENI itio Now Suny 53 F vied 67 F 11 12 Part l Programming with JavaScript clicked the Toggle Visibility button and the output disappeared lE Demo Mozilla Firefox fie Edt Se History Gogxmarks Tools heb lt C amp amp PO A Fej Progam Fles xemanfhtdorshiedped_tjdano ho Gl Deade Cookes Forms Images gt informazen Mecelanecis Guine 5 5 Resize gt Took h View Source Opters gt Animated page demo count toggle visibility toggle style animate show code ou can drag this Figure 1 3 Click the Toggle Visibility button to make the panel with the output reappear e Done C Oerors 0warings veoh GT Adlok now Sumy 53 F Vied 67
12. everal important lan guages for working on a Web server Although it s not a primary focus of this book the PHP language can do things that JavaScript cannot do AJAX is frequently used to connect JavaScript applications to PHP pro grams You get a brief introduction to PHP in Chapter 14 Java Java is a language that s entirely different from JavaScript despite the similar names Although Java is useful on both the client and server sides of the client server relationship it s not a primary focus of this book When you re looking for online help about JavaScript be sure that you talk to JavaScript experts and not Java programmers Although the languages have similar names they re entirely different languages Java programmers love to act superior and they ll give you grief if you ask a JavaScript question in a Java forum If in doubt ask on my Web site www aharrisbooks net I can help you with either language and I won t mind or bug you about it if you re a little confused Choosing your computer Of course you ll need a computer Fortunately it doesn t have to be anything special Any computer you can use to view Web pages can also be used to create them Any of the major operating systems Windows Mac and Linux is perfectly fine I do most of my work on a combination of Linux Fedora Core and Windows XP but all the programs in the book will work exactly the same on any reasonably modern computer 6
13. load jquery from google jsepi the program won t work without an Int pt type text javascript sre ht pt type text javascript gt rnet connection gt vwu google com jsap lt script gt yoogle lond jquery 1 google load jqueryui 1 lt script gt 4 load up external JavaScript gt sacript type U avascripo arc demo ja gt lt acript gt lt head gt lt body gt hiyanimated page demo lt nl gt form contains all the centre buttons gt tton type button p onclick deTount gt shtml ETML L24 243 Figure 1 6 Emacs isn t global variable used for counting pretty but var 4 03 it s very Function docount ffadd one to i powerful 0 gt h emo btl amp for JavaScript and AJAX for Dummies Use it for fpull current text frow output div vac curcentText output html i extra geek new count to current text 45 Kbe points itText counting cor j gt demo je THE een N TE Up a e areca nae TES SSS You can have many files open at once or look at two spots in the same file 20 Part I Programming with JavaScript 1 notepad This is what Notepad for Windows should be It starts with the speed and simplicity of Windows Notepad but adds tons of features f
14. mode lets you highlight the page and see the relevant code View and edit HTML CSS or JavaScript View the CSS or DOM info for the currently selected window 30 Part I Programming with JavaScript
15. n creat ing form elements such as buttons and text fields in plain HTML but HTML can t do anything with the buttons and text fields that s why you need a programming language If you want something interesting to happen you need a programming language Each of these buttons uses JavaScript to do some interesting ee Figure 1 2 The Count button changes the text in part of the page iw iw The Count button E emg Mozilla Firefox Fie Edit ye Animated page demo icount toggle visibility fi toggle style animate Chapter 1 Taking the Web to the Next Level work but the fact that the page is now interactive is a huge change With JavaScript you can build applications not just pages The Count button dynamically changes the page When you click the Count button new content is added to the page automatically A pro gram counts how many times the Count button is pressed and adds text to the watch this space section As the user interacts with the page the page has material that wasn t originally on the server Of course this example is simple but you will be able to add any kind of text to any Web element dynamically That s a very powerful capability Figure 1 2 shows how the page looks after I click the Count button a few times The Toggle Visibility button makes things appear and disappear You can t really modify whether things appear or go away in HTML You can do so in CSS to some l
16. n this book is tested on JE7 for Windows Firefox 3 for Windows and Firefox 3 for Linux Any time the code is likely to cause particu lar browser problems I try to point out the specific issues Picking a browser or two Here are a few browsers you should be aware of Legacy browsers You ll find a lot of older browsers still being used on the Internet Some people have continued to stick with whatever browser was on their machine when they got it and haven t upgraded in years The browsers earlier than IE6 or Firefox are a particular problem because support for Web standards and for JavaScript was very uneven in the early days of the Web For the most part this book assumes that NBER 2 i 2 your users will be using at least a somewhat modern browser AJAX in particular won t work on really old browsers Microsoft Internet Explorer 6 This is a very common browser still in popular use At one point it was the dominant browser on the Internet but it has fallen from favor in recent years being replaced by newer offerings from Microsoft as well as competitors like Firefox and Opera This browser is well known for a number of features that don t comply with community standards Its use is declining but as of this writing you still have to consider supporting it a lot of users still have it 1 Firefox The Firefox Web browser from Mozilla reopened the so called browser wars by providing the first significant competi
17. nguages A Figure 1 8 Bluefish is a very nice editor for XHTML and JavaScript i Chapter 1 Taking the Web to the Next Level 2 demo js Bluefish 1 0 7w Lee fie Edit Yew Tags Disggs Qocument Go Project Exters l Hep DeBAaA SHE SB 4 BHO X Quick bar Stenderdbsr Fonts Tables Frames Forms List CSS HEaAARA 442 tebe oth eB Custommeru C Apache DHTML DocBook HTML PHP HTM PHP SQL Replace C Program Files x M sala 2 i i 0 function docCount mm v Didero css al 22 E demo he Wideno t DB dero hen WD demonem D damos Ddemo js D demo js Didenous Wet jad0 fig 1 prs output html currentText function toggleVis S output toggle Ea jad0 1fg01 pe 3 Wi jodD2figOL org Mawdifeoicen M gt E Show ful ree function togglestyle S output teggleclass funky E Folow fas aj amp 3 dema css K ldewo homl K demos xX Ln 10 Col 11 mS javasot UTF E 1 jEdit This powerful editor is written in Java so it is available on virtu ally every platform It is a very powerful editor in its basic format but its best feature is the extensive plugin library that allows you to customize it to your own needs If you install the free XML library jEdit has incredi ble support for HTML and XHTML Figure 1 9 shows the sample program being edited in jEdit 1 codetch This editor is unique because rather than being a s
18. ntergrated file management tool Console area for debugging and error messages Automatically generated map showing the main sections of a page or program Creating Vour Browser Collection Web pages live within the context of Web browsers Each browser interprets HTML and CSS a bit differently and the differences are magnified when you start talking about JavaScript and AJAX Subtle and sometimes not so subtle differences in the way browsers support your code can be very important Setting the standard Every Web browser has its own particular way of displaying Web pages Although those ways are pretty similar the differences can sometimes be a problem Worse as you begin to write JavaScript code you ll find that each browser has its own interpretation of the code That can be a real mess Chapter 1 Taking the Web to the Next Level 25 Fortunately there s been a big push toward standardization in recent years The various browser developers have been getting together and agreeing to various standards set forth by a centralized team called the World Wide Web Consortium W3C When a browser implements JavaScript it now agrees theoretically at least to adhere to a set of standards for behavior As long as your code follows the same standards you can expect everything to work pretty well Most of the time anyway ay In this book I adhere to accepted JavaScript standards as practiced by most developers All the code i
19. or programmers I especially like the built in support for page valida tion This is one of the few programs to earn a permanent shortcut on my desktop Unfortunately it s only for Windows Figure 1 7 shows the same page being edited in notepad Y Bluefish The Bluefish text editor is rapidly becoming a favorite tool for Web developers It s quick and powerful and it has plenty of great features for Web developers One especially powerful tool is the CSS generator which helps you develop style sheets with a menu system so you don t have to memorize any syntax It also has a great generator for default templates which makes XHTML strict Web pages much easier to build Bluefish is available for all major platforms for the Windows version you ll also need to install the free GTK library You can see Bluefish running in Figure 1 8 Extensive set of commands and tools for text editing Support for multiple documents Notepad C Program Files xampp htdqcs jad jad_1 demo js Lee x Fle Edt Search wew Format Language Settngs Macro Run TextFx Pligns window 7 global variable used for counting var i 9 function doCount add one To i Ltt a eee ce Koonti 1 Figure 1 7 e EARAITI You ll find atml c notepad a very powerful alternative end togg to Notepad lt gt Javascint fie nb chaj 1790 in 2 Col 1 Sel 0 Des Vindows ANSI INS Automatic syntax highlighting in dozen of la
20. r Wed page Validator errors appear in this window The Validor extension provides helpful error messages Firebug The Firebug extension is one of the most important tools in Web develop ment It turns Firefox into a complete debugging tool Firebug has several especially useful features 1 Inspect Window This incredible tool allows you to move your mouse over any element in your page and instantly see the code that created that section in another panel This is a very easy way to analyze and debug pages You can also see instantly what CSS applies to a particular snippet of code and highlight code to see the corresponding output 1 CSS View and Edit You can look over the CSS of your page in a panel see previews of any colors and edit the values You ll see the results in real time on the page JavaScript Debugging Even pros make mistakes and up to now few debugger tools have been available for JavaScript programmers Firebug has better mechanisms for error trapping than the browsers do and it Chapter 1 Taking the Web to the Next Level 29 also incorporates a very nice debugger that can really help you find your errors as your program runs 1 AJAX monitoring AJAX programming is based on a series of requests back and forth from the server Firebug helps you to keep track of these requests and watch your data move 1 Live code view The ordinary view source menu of most browsers helps you see the
21. sed by the W3C to your browser It gives quick feedback on the validity of any page you view It also adds much more information to Firefox s View Source page including feedback on exactly which validation errors you have Validation informa tion is not provided by the normal View Source page The hints for fixing the errors are actually helpful and there s also a tool for automatically repairing the code with the excellent HTML Tidy program HTML is the foundation for your JavaScript code and invalid HTML provides a faulty framework With the HTML Validator there s no reason to have invalid pages Figure 1 12 shows the improved View Source window with the warnings tab and the but tons for fixing the code with HTML Tidy 28 Part I Programming with JavaScript View Source window E Source of file C Program 20Files xampp htdocs jad jad_1 demo html Mozilla Firefox Lee fie Edt Yew Heb btm Veldetor Figure 1 12 The HTML 21 Validator SES extension 2 Tne Cakam __ HIM errors end werings Hela a hd Result O errors 0 warnings HTML Validator f adds very Doctype ven AVSC OTD NH useful features to the View HTM Source tool at PCs x ge has no errors no warning found by the SGI rand HIML Tig Web page you may add this rs that you have taken the care to qreste an To w you icon on your page Hy z gt Here is the HTML you could use to add this icon to you
22. ses the same engine as Safari so this is an important consideration if you re building applica tions for mobile devices 1 Chrome This newer browser was created by Google It is highly standards compliant and it s especially powerful at handling Java Script and AJAX This is not surprising considering Google is one of the companies that pioneered the use of AJAX and is actively promot ing its use Chrome has one of the fastest JavaScript interpreters in common use Y Other browsers There are many other browsers in use today including specialty browsers on various forms of Linux cell phones and PDAs It is nearly impossible to support them all but many browsers now at least try to support Web standards I prefer to do most of my testing with Firefox 3 because it has very good standards support and an excellent set of tools for improving and debugging your code I then check my pages on other browsers including IE6 IE7 and Chrome Turning Firefox into a Development Machine Firefox is an especially important browser for Web developers It has a number of attractive features including its excellent standards support in HTML and JavaScript However the most important advantage of Firefox as a developer s tool might be its support for extensions Many commercial browsers keep their code a closely guarded secret and are very difficult MBER Chapter 1 Taking the Web to the Next Level 2 7 to extend Firefox was de
23. signed from the beginning to have its capabilities extended and a number of very clever programmers have added incredible extensions to the tool A few of these extensions have become must haves for Web developers Web Developer Toolbar The Web Developer Toolbar by Chris Pederick is an incredible tool It adds a new toolbar to Firefox with a number of extremely useful capabilities 1 Edit CSS You can pop up a small window and type in CSS code The CSS will take effect immediately in real time so you can see exactly what effect your CSS has on the view of the page Display Ruler This incredibly handy tool allows you to draw a ruler on your page to see exactly how large various elements are This is really useful for debugging Web layouts Y Outline tables This tool helps you make sense of table based layouts It s a good way to see how a complex table based design is created It s best to avoid table based layout but sometimes you have to look at somebody else s pages 1 Resize menu The Resize menu lets you see how your page looks ina number of other standard sizes This can be very useful when you re designing a layout YY Validation tools Web Developer includes a number of really handy tools for validating your Web pages It includes links for validating HTML and CSS as well as the primary accessibility standards HTML Validator extension This incredible extension brings the same validation engine u
24. so don t know which browser the user will be viewing pages with which can make a major difference in the output of the page 1 The editor hides details you need A visual editor tries to protect you from some of the details of Web development That s fine at first but at some point you ll need that level of control Most professionals who use Dreamweaver spend most of their time in Code view ignoring the advan tages of a visual editor Why pay for features you re going to ignore Visual editors assume static documents A visual editor is based on the idea that a Web page is an ordinary document The kinds of pages we build in this book are much more than that You will for example be writing code that creates and modifies Web documents on the fly You need to know how to build Web documents by hand so you can write code that builds them and changes them dynamically 8g Part l Programming with JavaScript Introducing programmer s editors A number of specialty editors have propped up which seek to fill the gap between plain text editors and the WYSIWYG tools These editors write in plain text but they have additional features for programmers including v Awareness of languages Programmer s editors often know what lan guage you re writing in and can adapt helping you whether you re writ ing HTML JavaScript or CSS code Most general purpose programmer s editors can handle all these languages natively and oft
25. tandalone editor it is actually an extension for the popular Firefox browser It has most of the same features as the other editors with the convenience of being already a part of your browser It is not quite as configurable as some of the other tools but it s still extremely handy You can see codetch in action in Figure 1 10 2 2 Part I Programming with JavaScript Eile Edit Search Markers Folding Wew Ublites Magos Plugins Help Cats sse 00 RECOGE N demo js S PROGRAMFILESSwamppihidocsjadjad_1 ased with demo html fAndy Marris for JavaScript and AJAX f slobal variable used for counting var a 0 xt from output div var cucrentText foutput heml gt fadd nes ant currentText c 1t fouvput htmL cucrentTexe gt end docour e a 2 function Figure 1 9 jEdit is a fast and capable editor writ tenin Java 4 1900 15 Top Gavascriptnone Cp 1262 Edit Seach Mo fy Inset Toole Yew oy Bibedertarks Common Text Paragraph be amp B Strom Suisse Ty Oy Beeno css case Baemoys a Go sx 8B ae soaa demo js fused with demo html Bndy Harris for JavaScript and AJAX for Dummies global variable used for counting var i 0 function doCount fadd one to i itt Sy fpull current text from output div Figure 1 10 var currentText Soutput htmi The codetch P 2 semeng aeteencel y
26. tion to Microsoft in many years Firefox really opened eyes with its impressive features tabbed browsing improved security and integrated searching For developers Firefox was among the first browsers to truly support Web standards in a serious way Firefox is especially important to devel opers because of its extension architecture which allows a programmer to turn Firefox into a high powered development tool Look at the next section of this chapter for suggestions on some great extensions to add to Firefox 26 Part I Programming with JavaScript ar Microsoft Internet Explorer 7 and 8 IE7 could be considered a tribute to Firefox as it incorporates many of the same features While this book was being written IE8 came out and added a few more improvements Although the support for standards is not as complete in IE7 and IE8 as it is in some of the other current fleet of browsers they are much better than in any earlier versions of IE v Opera Opera is an important browser because it was one of the earliest browsers to actively support Web standards It s very popular in certain circles but has never gained widespread popularity Since it supports Web standards it will typically run any code written for a standards compliant browser YY Safari Safari is the Web browser packaged with Mac OS It is a very capable standards compliant browser There is now a Windows version available The Web browser built into iPhones u
27. tions Avoiding the problem tools Using the wrong tool for the job can really make your life difficult Here area few tools that don t really stand up to the job of Web development YY Microsoft Word Word processors are great I m using one to write this book but they aren t really designed for creating Web pages Word and all other word processors store lots of information in their files besides plain text All the formatting stuff is great for non Web docu ments but HTML and CSS have their own ways of managing this data and the other stuff gets in the way Even the Save as HTML command is problematic Although it stores the page in a form of HTML Word s formatting is extremely clunky and difficult to work with The resulting pages will not be suitable for adapting to JavaScript YY Notepad This is the classic tool built into most versions of Windows It saves pages in plain text so it s better than Word for Web development but Notepad is too simplistic for any sort of serious work It lacks such Chapter 1 Taking the Web to the Next Level 7 basic features as line numbers and it can t handle multiple documents at once You ll quickly outgrow Notepad as a Web development tool vy TextEdit The default text editor on the Mac is a very powerful tool but it s more like a word processor than what I d call a true text editor When you save an HTML file in TextEdit it s usually not stored the way you need it
28. to Rather than seeing the results of the code you ll see the code itself If you want to use TextEdit for HTML or JavaScript make sure you choose Format Make Plain Text before saving your file Graphics editors Some high end graphics editors like Adobe Photoshop Adobe Fireworks and Gimp also have the ability to export to HTML but the code they produce is not easy to work with It s really better to use these programs to edit your graphics and use a dedicated text editor to handle your code Using a WVSIWVG editor The promise of WYSIWYG what you see is what you get editing is very alluring Word processing programs have had this capability for years As you edit a document on screen you can see in real time exactly how it will look on paper A number of tools promise this kind of functionality for Web pages Adobe Dreamweaver is the most popular followed by Microsoft FrontPage and its replacement ExpressionWeb Although these tools are popular for traditional Web development they have some drawbacks when it comes to the kind of interactive work we do in this book 4 WYSIWYG is a lie The whole assumption of WYSIWYG works fine when the output is a paper document printed on a printer You can predict how the output will work Web pages are different because the output shows up on a display that belongs to somebody else You don t know what size it will be what colors it will support or what fonts are installed You al
29. xciting is happening here 10 Figure 1 1 This page has some interesting features that would not be pos sible in basic HTML ee ar Part I Programming with JavaScript The text in this box changes lE Demo Mozilla Firefox Fie Edt Sie O c osde 3 Bookmarks Toos heb Ey 6 D 3 fie i ic Program Fles xemanfitdocs jadijed_t dero howl 4 ini r Forms History Cookes J css Images ifomazon 5 Mscelaneces Animated page demo count toggle visibility toggle style animate show code can drag this watch this space F Qoeroeltvennce veh GRINEMIND 11 nov Sumy 55 F This program requires you to have an active Internet connection to work cor rectly Check Chapter 10 to see some alternatives for connecting to external libraries If you want to see this page in action and you really should please go to the companion Web sites for this book www aharrisbooks net jad or www dummies com go javascriptandajaxfd This program and every other program and example in the book are available at that site At first the Web page looks pretty simple but when you open it in your own browser as you should and begin playing with it you ll soon discover that it packs a lot of surprises This very simple page illustrates a lot of the reasons why you should learn JavaScript and AJAX YY The buttons do something You might already have a handle o
30. your skills at writing code 1 AJAX support AJAX is a relatively new technology and most editors do not directly support it Aptana has a number of features that help you with AJAX including built in support of all the major AJAX libraries Aptana is completely free I ve placed a link to Aptana and indeed all the tools mentioned here on the Web site for this book You can see Aptana in action in Figure 1 11 My personal setup varies from machine to machine but generally I use Aptana for my heavy programming with notepad as a quick editor on Windows and emacs as my primary basic text editor on Linux or Mac machines Of course you ll develop your own preferences as you go All these editors are free and available at www aharrisbooks net jad so they re worthy of some experimentation 24 Part l Programming with JavaScript Automatic syntax highlighting and code completion Multiple document support ic Aptana demo js Aptana Studio Community Edition Js led Fle Edt fiegete Search Project Apara Run Serpts Window Hep Gp S 5 er O Q 54 3 p ire ALK References O 0 cema css dema htmi denojs 2 Olio zm OO Sx id for M if WP try DB js log fit D o Figure 1 11 Aptana might be the best Web editor avail able at any price lt i D Velceton Console D Alelo Oljs O problers E E E E AO lt gt Program Fies xampp ntdocs jad yad_i demo 1s 3Buresd a Gx a I
Download Pdf Manuals
Related Search