Introduction to JavaScript

Chia sẻ: Nguyễn Thị Tú Uyên | Ngày: | Loại File: PDF | Số trang:13

Thêm vào BST

Báo xấu

238
lượt xem 55
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Welcome to JavaScript: A Beginner’s Guide! You’re obviously interested in learning JavaScript, but perhaps you’re not sure what you need to know to use it. This module answers some basic questions about what JavaScript is, discusses its advantages and limitations, explains how you can use it to create more dynamic and inviting Web pages, and provides a brief history of the language.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Introduction to JavaScript

Module Introduction to 1 JavaScript The Goals of This Module q Understand the role of text editors in using JavaScript q Understand the role of Web browsers in using JavaScript q Review which types of text editors and Web browsers are recommended for coding with JavaScript q Introduce the JavaScript language q Understand how to use HTML with JavaScript
2 JavaScript: A Beginner’s Guide W elcome to JavaScript: A Beginner’s Guide! You’re obviously interested in learning JavaScript, but perhaps you’re not sure what you need to know to use it. This module answers some basic questions about what JavaScript is, discusses its advantages and limitations, explains how you can use it to create more dynamic and inviting Web pages, and provides a brief history of the language. JavaScript is ubiquitous on the World Wide Web. It can help your pages become more interactive, allowing them to react to a viewer’s actions or allowing you to have some special effects (visual or otherwise) on your pages. JavaScript often gets thrown in with Hypertext Markup Language (HTML) as one of the recommended languages for beginning Web developers (whether you build Web sites for business or pleasure). Of course, you can build a Web page by using only HTML, but JavaScript allows you to add additional features that a static page of HTML can’t provide without some sort of scripting or programming help. What You Need to Know Before you begin learning about JavaScript, you should have a basic knowledge of the following: q HTML q Text editors q Web browsers q The different versions of JavaScript If you have this basic knowledge (and most likely you do), then you’ll do just fine as you work through this book. Knowing another programming/scripting language or having previous experience with JavaScript isn’t required. This book is a beginner’s guide to JavaScript. If you think you don’t have enough experience in one of the aforementioned areas, a closer look at each one may help you decide what to do.
Module 1: Introduction to JavaScript 3 Basic HTML Knowledge 1 While you don’t need to be an HTML guru, you will need to know where to place certain elements (like the head and body elements) and how to add your own attributes. This book will often reference scripts in the head section (between the and tags) and the body section (between the and tags). Occasionally, you will also need to add an attribute to a tag for a script to function properly. For example, you may need to name a form element using the name attribute, as shown in the following code: If you know the basics of using tags and attributes, the HTML portion shouldn’t pose any problems to learning JavaScript. If you don’t have a basic knowledge of HTML, you can learn it fairly quickly through a number of mediums. For example, you can buy a book or look for some helpful information on the Web. A good book is HTML: A Beginner’s Guide by Wendy Willard (Osborne, 2000). To find information about HTML on the Web, check out these sites: http:// www.pageresource.com/html/ and http://htmlgoodies.earthweb.com. Basic Text Editor and Web Browser Knowledge Before jumping in and coding with JavaScript, you must be able to use a text editor or HTML editor, and a Web browser. You’ll use these tools to code your scripts. Text Editors A number of text editors and HTML editors support JavaScript. If you know HTML, you’ve probably already used an HTML editor to create your HTML files, so you might not have to change. However, some HTML editors have problems related to adding JavaScript code (such as changing where the code is placed or altering the code itself when you save the file). You may need to use a simpler editor or look for an HTML editor that handles the addition of your own JavaScript code easily. Some examples of text editors are Notepad, TextPad, and Simple Text.
4 JavaScript: A Beginner’s Guide Web Browsers Again, if you’ve been coding in HTML, you probably won’t need to change your browser. However, some browsers have trouble with the newer versions of JavaScript. The choice of Web browser is ultimately up to you, as long as it’s compatible with JavaScript. I recommend one of the following browsers to test your JavaScript code: q Microsoft Internet Explorer version 4.0 or later q Netscape Navigator version 4.0 or later New versions of these browsers continue to be produced. At the time of this writing, nonbeta versions of Internet Explorer 5.5 and Netscape Navigator 4.7 are available. To give you an idea of what each browser looks like, Figure 1-1 shows a Web page when viewed in Microsoft Internet Explorer. Figure 1-2 shows the same page when viewed in Netscape Navigator. Figure 1-1 A Web page viewed in Microsoft Internet Explorer
Module 1: Introduction to JavaScript 5 1 Figure 1-2 A Web page viewed in Netscape Navigator If you have an older browser and you can’t upgrade, a number of features (mostly discussed later in the book) may not work in that browser. Even so, the book can still help you learn the JavaScript language itself, so you don’t need to give up if you have an older browser. The two major browsers mentioned and the versions of JavaScript they support are shown in Table 1-1. The next section, “Which Version,” explains what the version numbers mean in more detail. For a complete listing (which includes a number of popular browsers, and addresses platform issues like which version is used in Windows or a Macintosh in the same browser), see this excellent online reference: http://www.webreview.com/browsers/browsers.shtml. Once you’ve determined that you meet the basic requirements, you’re ready to begin learning the language.
6 JavaScript: A Beginner’s Guide Microsoft Internet Netscape Navigator JavaScript Version Explorer Version Version Supported 5.0 4.5 1.3 4.0 4.0 1.2 3.0 3.0 1.0/1.1 Table 1-1 JavaScript Versions Supported by the Two Major Browsers Which Version? At the time of this writing, the browsers recommended earlier in this module should support at least JavaScript 1.2. (Some of the newer ones will likely support JavaScript 1.3.) A browser version of 3.0 or earlier may support only JavaScript 1.0 or 1.1, which is why I suggested version 4.0 or later of the recommended browsers. JavaScript 1.4 is currently in the works and already has some documentation from Netscape at http://developer.netscape.com/docs/ manuals/js/core/jsguide/index.htm. You may also see or hear about JScript or ECMAScript. JScript is the version of JavaScript that Microsoft Internet Explorer uses (which has additional features because it is implemented as a Windows Script engine; it can use server-side languages to perform more complex tasks like updating databases). For more information on JScript, see http:// msdn.microsoft.com/scripting/default.htm. ECMAScript is the international standard name and specification for the JavaScript language, so it’s not a new language but a standard that is set for JavaScript and JScript. For more on ECMAScript, see http:// www.jsworld.com/ecmascript. Remember, It’s Not Java JavaScript and Java are two different languages. Java is a full programming language that must be compiled before a program (often called a Java applet) can be executed. Java is more powerful but also more complex. JavaScript doesn’t need a compiler and is more lenient in a number of areas, such as syntax.
Module 1: Introduction to JavaScript 7 Similarities to Other Languages 1 JavaScript does have similarities to other programming and scripting languages. If you have experience with Java, C++, or C, you’ll notice some similarities in the syntax, which may help you learn more quickly. Because it’s a scripting language, JavaScript also has similarities to languages like Perl—it, too, can be run through an interpreter rather than being compiled. If you have programming or scripting experience in any language, it will make learning JavaScript easier—but it isn’t required. Ask the Expert Question: You mentioned that I could use a text editor or HTML editor of my choice, but I’m not quite sure what that means. What is a text editor and where can I find one? Answer: A text editor is a program that you can use to save and edit written text. Text editors range from simple to complex, and a number of choices are available: Notepad, Wordpad, Simple Text, Microsoft Word, and Corel WordPerfect Millennium Edition, to name a few. You can also purchase and download some from the Web, like NoteTab or TextPad. An HTML editor is either a more complex text editor, or it’s an editor that allows you to add code by clicking buttons or by other means—often called a What You See Is What You Get (WYSIWYG) editor. I recommend a plain text editor or an HTML editor that doesn’t change any code you add to it manually. Some examples of HTML editors are Microsoft FrontPage, Allaire HomeSite, and Macromedia Dreamweaver. Question: What exactly do I need to know about using a text editor? Answer: Basically, you only need to know how to type plain text into the editor, save the file with an .html or .htm extension, and be able to open it again and edit it if necessary. Special features aren’t needed because HTML files are made up of plain text.
8 JavaScript: A Beginner’s Guide Question: What do I need to know about using a browser? Answer: All you absolutely need to know is how to open a local HTML file on your computer (or on the Web) and how to reload a page. If you don’t know how to open an HTML file from your own computer, open your browser and go to the File menu. Look for an option that says something like Open or Open File, and select it. You should be able to browse for the file you want to open like you would with other programs. This shows where the option is in Microsoft Internet Explorer 5.5: Question: Where do I get those browsers you mentioned? Answer: Microsoft Internet Explorer: http://www.microsoft.com/ie Netscape Navigator: http://home.netscape.com/computing/download Introduction to JavaScript JavaScript came about as a joint effort between Netscape Communications Corporation and Sun Microsystems, Inc. The news release of the new language came on December 4, 1995, back when Netscape Navigator 2.0
Module 1: Introduction to JavaScript 9 was still in its beta version. (See http://home.netscape.com/newsref/pr/ newsrelease67.html for the news release.) JavaScript version 1.0 became 1 available with the new browser. (Before its release as JavaScript, it was called LiveScript.) JavaScript is an object-based, client-side scripting language that you can use to make Web pages more dynamic. To make sense of such a definition, let’s look at its important parts one by one. Object Based Object based means that JavaScript can use items called objects. However, the objects are not class based (meaning no distinction is made between a class and an instance); instead, they are just general objects. You’ll learn how to work with JavaScript objects in Module 8. You don’t need to understand them in any detail until you know a few other features of the language. Client Side Client side means that JavaScript runs in the client (software) that the viewer is using, rather than on the Web server of the site serving the page. In this case, the client would be a Web browser. To make more sense of this, let’s take a look at how a server-side language works and how a client-side language works. Server-Side Languages A server-side language needs to get information from the Web page or the Web browser, send it to a program that is run on the host’s server, and then send the information back to the browser. Therefore, an intermediate step must send and retrieve information from the server before the results of the program are seen in the browser. A server-side language often gives the programmer options that a client-side language doesn’t have, such as saving information on the Web server for later use, or using the new information to update a Web page and save the updates. However, a server-side language is likely to be limited in its ability to deal with special features of the browser window that can be accessed with a client-side language (like the content seen in the status bar of a browser window or the contents of a form before it’s submitted to the server).
10 JavaScript: A Beginner’s Guide Client-Side Languages A client-side language is run directly through the client being used by the viewer. In the case of JavaScript, the client is a Web browser. Therefore, JavaScript is run directly in the Web browser and doesn’t need to go through the extra step of sending and retrieving information from the Web server. With a client-side language, the browser reads and interprets the code, and the results can be given to the viewer without getting information from the server first. This process can make certain tasks run more quickly. A client-side language can also access special features of a browser window that may not be possible with a server-side language. However, a client-side language lacks the ability to save files or updates to files on a Web server like a server-side language can. A client-side language is most useful for tasks that deal with parts of the browser or that allow information to be validated before it is sent to a server-side program or script. For instance, JavaScript can open a new window with specific dimensions, specific features (such as a toolbar or status bar), and its point of placement on the screen. JavaScript can also be used to check the information entered into a form before it is sent to a server-side program to be processed. The information can prevent strain on the Web server by preventing submissions with inaccurate or incomplete information. Rather than running the program on the server until the information is correct, that data can be sent to the server just once with correct information. Scripting Language A scripting language doesn’t require a program to be compiled before it is run. All the interpretation is done on the fly by the client. With a regular programming language, you must write the code; compile it using a special compiler to be sure there are no syntax errors; and then, after that, you can run the program. With a scripting language, the code is interpreted as it is loaded in the client. Thus, you can test the results of your code more quickly. However, errors won’t be caught before the script is run and could cause problems with the client if it can’t handle the errors well. In the case of JavaScript, the error handling is up to the browser being used by the viewer.
Module 1: Introduction to JavaScript 11 Putting It All Together 1 With all this in mind, you might wonder how JavaScript is run in a browser. You might wonder where to write your JavaScript code and what tells the browser it is different than anything else on a Web page. The answers are general for now, but the next module provides more details. JavaScript runs in the browser by being added directly into an existing HTML document. You can add special tags and commands to the HTML code that will tell the browser that it needs to run a script. Once the browser sees these, it interprets the JavaScript commands and will do what you have directed it to do with your code. Thus, by simply editing an HTML document, you can begin using JavaScript on your Web pages and see the results. For example, the following code adds some JavaScript to an HTML file that writes some text onto the Web page. Notice the addition of and tags. The code within them is JavaScript: This tag tells the browser that JavaScript follows document.write("This writes text to the page"); This line writes the text inside This line tells the the quote marks browser that this is the on the page end of the script The next module looks at how to add JavaScript in an HTML file by using the and HTML tags. This will be your first step on the road to becoming a JavaScript coder! Online Resources To find additional information online to help you with JavaScript, here are some useful resources: q A place to find tutorials with working examples of the results: http://www.pageresource.com/jscript
12 JavaScript: A Beginner’s Guide q An excellent tutorial site that includes cut-and-paste scripts: http://www.wsabstract.com q A place where you can address questions about JavaScript to fellow coders: http://www.javascriptcity.com/forums 1-Minute Drill q What is JavaScript? q Are objects in JavaScript class based? q Can JavaScript save a file on a Web server? Project 1-1: Using JavaScript to Write Text pr1_1.html This project shows you JavaScript in action by loading an HTML document in your browser. The script writes a line of text in the browser using JavaScript. Step-by-Step 1. Copy and paste the code shown here into your text editor: 2. Save the file as pr1_1.html and open it in your Web browser. You should see a single line of text that was written with JavaScript. q JavaScript is an object-oriented, client-side scripting language that can be used to make Web pages more dynamic q No q No
Module 1: Introduction to JavaScript 13 Mastery Check 1 1. You must know which of the following to be able to use JavaScript? A. Perl B. C++ C. HTML D. SGML 2. Which of the following is something you should have to use JavaScript? A. A Web browser B. A C++ compiler C. A 50GB hard drive D. A CD-RW drive 3. How can a client-side language help when using forms on a Web page? A. It can save the information on the server. B. It can validate the information before it is sent to the server. C. It can update a file and save the file with the new information. D. It can’t help at all. 4. How is JavaScript added to a Web page? A. It is written into a special editor in the browser. B. It is taken from a compiled program on the server. C. You place the code in a file by itself and open that file. D. It is added to an HTML document.