Translation: Chapter 1 of JavaScript authoritative guide (version 5th)

Document directory

• 1.4. Javascript in other contexts
• 1.4. Javascript in other environments
• 1.5. processing Javascript
• 1.5. go deep into Javascript

Statement: translation has only one purpose: learning purposes. If you have any copyright issues, please contact me in time.

This post divides the first chapter into two parts based on the length. This is the second part.

Figure 1-3 shows what the program looks like when displayed in a web browser. as you can see, it consists of an HTML form and some other text. but the figure captures only a static snapshot of the program. the addition of JavaScript code makes it dynamic: whenever the user changes the amount of the loan, the interest rate, or the number of payments, the JavaScript code recomputes the monthly payment, the total of all payments, and the total interest paid over the lifetime of the loan.

Figure 1-3 shows a program in a web browser. As you can see, there are HTML forms and some text. Although the screenshot is a static screenshot, the addition of JavaScript makes it dynamic: the user changes the loan amount, interest rate, or payment amount, the javascript code recalculates the monthly spending, the total amount of borrowing, and the overall interest rate.

Figure 1-3. A JavaScript loan payment Calculator

Figure 1-3 JavaScript Loan Cost Calculator

The first half of Example 1-3 is a simple CSS stylesheet and an HTML form, formatted within an HTML table. note that the form elements define onchange or onclick event handlers. the Web browser triggers these Event Handlers when the user changes the input or clicks on the compute button displayed in the form, respectively. in each case, the value of the event handler attribute is a string of JavaScript code: Calculate (). when the event handler is triggered, it executes this code, which CILS the function calculate ().

In example 1-3, half of them are CSS style sheets and HTML forms. The layout is HTML tables. The onchange or onclick event processing is defined in the form element. When you change the input or click the compute button, the Web browser triggers these events and displays them in the form. The event processing property values are all JavaScript code: Calculate (). Functions called calculate () will be executed when event processing is triggered.

The Calculate () function is defined in the second half of the example, inside a <SCRIPT> tag. the function reads the user's input from the form, does the math required to compute the loan payments, and inserts the results of these calculations into the document within <span> tags that are specially named with ID attributes.

The lower part of the example is the definition of the calculate () function. It is located in the <SCRIPT> label. The function reads the content entered by the user in the form and performs mathematical calculations on the loan cost, then, insert the calculation results to the <span> label with the specified name's ID attribute in the document.

Example 1-3 is not a short example, but it is straightforward, and it is worth taking the time to look at it carefully. you shouldn't just CT to understand all the code at this point, but the HTML, CSS, and JavaScript are all commented, and studying this example will give you the feel for client-side JavaScript. [*]

The example 1-3 is not short, but not complex. It will be worth reading after careful reading. In this case, we do not require readers to understand all the code, but in this example, HTML, CSS, and JavaScript are all annotated, which will be helpful for readers to learn the client JavaScript. (Note 1)

[*] If your intuition tells you that it is a bad idea to intermingle HTML markup, CSS styles, and JavaScript code like this, you are not alone. the trend in JavaScript programming and web design circles is to keep content, presentation, and behavior in separate files. section 13.1.5 in chapter 13 explains how to do this.

Note 1: Is it difficult to mix HTML tags, CSS styles, and JavaScript code? Yes. Now the JavaScript programming and web design circles have separated content, representation, and behavior from their respective files. For details, see chapter 13.1.5 in Chapter 13th.

Example 1-3. Computing loan payments with JavaScript

Example 1-3 Calculation of loan spending with JavaScript

1.4. Javascript in other contexts1.4. Javascript in other environments
Javascript is a general-purpose programming language, and its use is not restricted to Web browsers. javascript was designed to be embedded within, and provide scripting capabilities for, any application. from the earliest days, in fact, Netscape's Web servers encoded a javascript interpreter so that server-side scripts cocould be written in JavaScript. similarly, Microsoft uses its JScript interpreter in its IIS Web server and in its Windows Scripting host product in addition to using it in Internet Explorer. adobe uses a language derived from JavaScript For scripting its Flash Player. and Sun bundles a javascript interpreter with its Java 6.0 distribution so that scripting capabilities can easily be added to any Java application (Chapter 12 shows how to do this ).
Javascript is a common programming language. Javascript is not only used in Web browsers, but is embedded in any application at design time with the ability to program scripts. In retrospect, because the Netscape Web server actually contains a javascript interpreter, you can use JavaScript to write server scripts. Microsoft applies the JScript interpreter to IE on its IIS Web server and its Windows Scripting host. Adobe uses a scripting language derived from JavaScript For Flash Player. Sun binds the javascript interpreter with Java 6.0, so it is easier to add Script Programming to Java applications (see Chapter 12th ).
Both Netscape and Microsoft have made their JavaScript interpreters available to companies and programmers who want to embed them in their applications. netscape's interpreter was released as open source and is now available through the Mozilla organization (see http://www.mozilla.org/js ). mozilla actually provides two different versions of the Javascript 1.5 interpreter. one is written in C and is called spidermonkey. the other is written in Java and, in a flattering reference to this book, is called rhino.
Both Netscape and Microsoft have javascript interpreters that people can use and programmers want to embed in their applications. The Netscape interpreter is released by Mozilla and can be downloaded now at http://www.mozilla.org/js /. Mozilla actually provides two different versions of JavaScript 1.5 interpreter. One is C writing, called spidermonkey; the other is Java writing, Called Rhino.
If you are writing scripts for an application that includes des an embedded javascript interpreter, you'll find the first half of this book, documenting the core language, to be useful. the web-browser-specific chapters, however, will probably not be applicable to your scripts.
If the script is written in an application embedded with a javascript interpreter, the first half of this book is the core of a practical language. The specified Web browser may not be applicable to the written scripts.
1.5. Implicit ing javascript1.5. go deep into Javascript
The way to really learn a new programming language is to write programs with it. as you read through this book, I encourage you to try out JavaScript features as you learn about them. A number of techniques make it easy to experiment with JavaScript.
Next I will start to learn this programming language and write programs. When reading this book, I encourage readers to experiment with the features of javascript when learning the relevant knowledge. A lot of JavaScript technologies are not difficult to try.
The most obvious way to writable e Javascript is to write simple scripts. one of the nice things about client-side Javascript is that anyone with a Web browser and a simple text editor has a complete development environment; there is no need to buy or download special-purpose software in order to begin writing JavaScript scripts.
The most obvious way to dive into Javascript is to write a simple script. Web browsers are proud to have the client JavaScript, and a simple text editor is the development environment of JavaScript scripts. You don't have to order or download special software to start writing.
For example, you cocould modify Example 1-1 to display Fibonacci numbers instead of factorials:
For example, you want to modify the factorial of Example 1 to 1 and display it in the number of Fibonacci
<script>document.write("
This code may be convoluted (and don't worry if you don't yet understand it), but the point is that when you want to experiment with short programs like this, you can simply type them up and try them out in your web browser using a local file: URL. note that the Code uses the document. write () method to display its HTML output so that you can see the results of its computations. this is an important technique for experimenting with JavaScript. as an alternative, you can also use the alert () method to display plain-text output in a dialog box:
Although this Code may not be clear for the moment, it does not matter-you just need to enter the above Code and open the local file in the Web browser: run the URL to see what the result is. Note that the document. Write () method is used in the code to display the HTML output, so that you can see the calculation result. This is an important way to test JavaScript. The other method is to use the alert () method to display the output content of plain text in the dialog box:
alert("Fibonacci ("  + i +  ") = " + fib);
Note also that for simple JavaScript experiments like this, you can omit the <HTML>, 
Note that the <HTML>, 
For even simpler experiments with JavaScript, you can sometimes use the javascript: URL pseudo protocol to evaluate a javascript expression and return the result. a javascript URL consists of the javascript: Protocol specifier followed by arbitrary JavaScript code (with statements separated from one another by semicolons ). when the browser loads such a URL, it executes the JavaScript code. the value of the last expression in the URL is converted to a string, and this string is displayed by the web browser as its new document. for example, you might type the following JavaScript URLs into the location field of your web browser to test your understanding of some of JavaScript's operators and statements:
To further test JavaScript, you can use the javascript: URL pseudo protocol to evaluate JavaScript expressions and return results. Javascript URLs are composed of javascript: Protocol specifiers followed by arbitrary JavaScript code (separated by semicolons ). When the browser opens such a URL, it will execute JavaScript code. The value of the last expression in the URL is converted to a string and displayed as a new document in the Web browser. For example, enter the following javascript URL in the address bar [1] (location field) of the web browser to test JavaScript operators and statements:
Note 1: location field: IE and Google Chrome are called address bar. Firefox is called location.
javascript:5%2javascript:x = 3; (x > 5)? "x is less": "x is greater"javascript:d = new Date(); typeof d;javascript:for(i=0,j=1,k=0,fib=1; i>5; i++,fib=j+k,k=j,j=fib) alert(fib);javascript:s=""; for(i in navigator) s+=i+":"+navigator[i]+"\n"; alert(s);
In the Firefox Web browser, you can also type single-line experiments into the Javascript console, which you access through the Tools menu. simply type in an expression you want to evaluate or a statement you want to execute. when using the console instead of the Location bar, you omit the javascript: prefix.
In Firefox Web browser, you can also click a line of code in the Javascript Console (click "tool" on the menu bar to find it) to perform a test. In an expression, you can simply enter the desired value or statement. If you use the console to replace the address bar, you can omit the prefix javascript :.
While processing Javascript, you'll probably write code that doesn't work as you need CT it to, and you'll want to debug it. the Basic Debugging Technique for Javascript is like that in your other versions: insert statements into your code to print out the values of relevant variables so that you can try to figure out what is actually happening. as shown previusly, you can use the document. write () or alert () methods to do this. (example 15-9 provides a more sophisticated facility for logging debugging messages .)
When you go deep into JavaScript, you may also write code that is inconsistent with your intention and then want to debug it. The javascript debugging method is the same as that in many other languages: insert the statements that output the values of relevant variables in the code, and try to figure out what actually happened in your mind. As mentioned above, you can use the document. Write () or alert () method. (Example 15-9 provides a complex tool for recording debugging information)
The for/in loop (described in chapter 6) is also useful for debugging. you can use it, along with the alert () method, to display a list of the names and values of all properties of an object, for example. this kind of function can be handy when debugging ing the language or trying to debug code.
For/in loops are also useful for debugging. For example, you can use it with the alert () method to compile a function that displays the names and values of all attributes of an object. Such a function is very convenient to go deep into this language or debug code.
If your JavaScript bugs are persistent and aggravating, you may be interested in an actual JavaScript debugger. in Internet Explorer, you can use Microsoft Script debugger. in Firefox, you can use a debugger extension known as Venkman. both tools are beyond the scope of this book, but you can find them easily with an Internet search. another useful tool that is not strictly a debugger is jslint, which looks for common problems in JavaScript code (see http://jslint.com ).
If you have more and more JavaScript bugs, you may be interested in a real JavaScript debugging tool. You can use Microsoft Script Debugger in Internet Explorer. You can use debugging tool extensions (such as Venkman) in Firefox ). These two tools are beyond the scope of this book, but you can easily find them on the Internet. Another useful tool is not strictly debugging tool jslint -- look for common issues with JavaScript code (see http://jslint.com)
Translation: Chapter 1 of JavaScript authoritative guide (5th)