Learn JavaScript and Ajax with w3Schools

Learn JavaScript the quick and easy way, from the experts at w3schools


Hege Refsnes, Kelly Dobbs Henthorne


267 Pages

17116 Reads

67 Downloads

English

PDF Format

22.6 MB

Java Script

Download PDF format


  • Hege Refsnes, Kelly Dobbs Henthorne   
  • 267 Pages   
  • 26 Feb 2015
  • Page - 1

    read more..

  • Page - 2

    read more..

  • Page - 3

    read more..

  • Page - 4

    read more..

  • Page - 5

    read more..

  • Page - 6

    read more..

  • Page - 7

    read more..

  • Page - 8

    read more..

  • Page - 9

    read more..

  • Page - 10

    read more..

  • Page - 11

    read more..

  • Page - 12

    read more..

  • Page - 13

    read more..

  • Page - 14

    read more..

  • Page - 15

    read more..

  • Page - 16

    read more..

  • Page - 17

    read more..

  • Page - 18

    read more..

  • Page - 19

    read more..

  • Page - 20

    read more..

  • Page - 21

    7 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 read more..

  • Page - 22

    read more..

  • Page - 23

    9 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 tag is used to insert a JavaScript into an HTML page. How To Put a JavaScript into an HTML Page The following example shows how to use JavaScript read more..

  • Page - 24

    Learn JavaScript and Ajax with w3schools 10 Here’s your first opportunity to personalize JavaScript. Change the “Hello World” text to “Happy, Happy, Joy, Joy!” and see what happens. The result of your changes is shown in Figure 1.2. The following example shows how to add HTML tags to the JavaScript. The result of this code is shown in Figure 1.3. Continuing with read more..

  • Page - 25

    Chapter 1: JavaScript How To and Where To 11 To insert a JavaScript into an HTML page, we use the tag. Inside the tag we use the type attribute to define the scripting language. So, and tell where the Java- Script starts and ends: The command is a standard JavaScript command for writing output to a page. When you type the command between the read more..

  • Page - 26

    Learn JavaScript and Ajax with w3schools 12 How to Handle Simple Browsers Browsers that do not support JavaScript will display JavaScript as page content. To prevent them from doing this and as a part of the JavaScript standard, the HTML comment tag should be used to “hide” the JavaScript. Just add an HTML comment tag before the first JavaScript statement, and an read more..

  • Page - 27

    Chapter 1: JavaScript How To and Where To 13 Scripts in <head> Scripts to be executed when they are called, or when an event is triggered, are placed in functions. Put your functions in the head section. This way they are all in one place, and they do not interfere with page content. The resulting alert box is shown in Figure 1.6. Scripts in <body> If read more..

  • Page - 28

    Learn JavaScript and Ajax with w3schools 14 Scripts in <head> and <body> You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. Figure 1.7 read more..

  • Page - 29

    Chapter 1: JavaScript How To and Where To 15 Using an External JavaScript If you want to run the same JavaScript on several pages without having to write the same script on every page, you can write a JavaScript in an external file. Save the external JavaScript file with a file extension. Your results are shown in Figure 1.8. To use the external script, read more..

  • Page - 30

    16 CHAPTER 2 JAVASCRIPT STATEMENTS AND COMMENTS In This Chapter JavaScript Code JavaScript Blocks JavaScript Multiline Comments Using Comments To Prevent Execution Using Comments at the End of a Line JavaScript is a sequence of statements to be executed by the browser. Unlike HTML, JavaScript is case-sensitive; therefore, watch your capitalization closely when read more..

  • Page - 31

    Chapter 2: JavaScript Statements and Comments 17 JavaScript Code JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence it is written. This example will write a heading and two paragraphs to a Web page as shown in Figure 2.1. JavaScript Blocks JavaScript statements can be grouped together in blocks. read more..

  • Page - 32

    Learn JavaScript and Ajax with w3schools 18 The preceding example is not very useful. It just demonstrates the use of a block. Normally, a block is used to group statements together in a function or in a condi- tion (in which a group of statements should be executed if a condition is met). You will learn more about functions and conditions in Chapters 6 and 10. read more..

  • Page - 33

    Chapter 2: JavaScript Statements and Comments 19 Your result is shown in Figure 2.3. JavaScript Multiline Comments Multiline comments start with and end with . The following example uses a multiline comment to explain the code. Your result is shown in Figure 2.4. Figure 2.3 (continued) read more..

  • Page - 34

    Learn JavaScript and Ajax with w3schools 20 Using Comments to Prevent Execution In the following example, the comment is used to prevent the execution of a single code line (can be suitable for debugging): Your result is shown in Figure 2.5. Figure 2.4 (continued) read more..

  • Page - 35

    Chapter 2: JavaScript Statements and Comments 21 In the following example, the comment is used to prevent the execution of a code block (can be suitable for debugging): Your result would be a blank screen. Figure 2.5 read more..

  • Page - 36

    Learn JavaScript and Ajax with w3schools 22 Using Comments at the End of a Line In the following example, the comment is placed at the end of a code line. Your result is shown in Figure 2.6. Figure 2.6 read more..

  • Page - 37

    23 CHAPTER 3 JAVASCRIPT VARIABLES In This Chapter Do You Remember Algebra from School? JavaScript Variables Declaring (Creating) JavaScript Variables Assigning Values to Undeclared JavaScript Variables Redeclaring JavaScript Variables JavaScript Arithmetic Variables are “containers” for storing information. Do You Remember Algebra from School? Do you remember algebra read more..

  • Page - 38

    Learn JavaScript and Ajax with w3schools 24 Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables). Variable names must begin with a letter, the underscore character, or a dollar sign. (The $ character is used primarily by code-generation tools.) Subsequent characters may be letter, number, underscore, or dollar read more..

  • Page - 39

    Chapter 3: Javascript Variables 25 Declaring (Creating) JavaScript Variables Creating variables in JavaScript is most often referred to as “declaring” variables. You can declare JavaScript variables with the statement: After the declaration shown, the variables are empty. (They have no values yet.) However, you can also assign values to the variables when you declare them: After read more..

  • Page - 40

    Learn JavaScript and Ajax with w3schools 26 have the same effect as these: Redeclaring JavaScript Variables If you redeclare a JavaScript variable, it will not lose its original value. After the execution of the preceding statements, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it. JavaScript Arithmetic As with read more..

  • Page - 41

    27 CHAPTER 4 JAVASCRIPT OPERATORS In This Chapter JavaScript Arithmetic Operators JavaScript Assignment Operators The + Operator Used on Strings Adding Strings and Numbers The assignment operator, =, is used to assign values to JavaScript variables, as shown in the first two lines of the following code. The arithmetic operator, +, is used to add values together, as read more..

  • Page - 42

    Learn JavaScript and Ajax with w3schools 28 JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Given that x = 10 and y = 5, the following table explains the assignment operators: Operator Example Same As Result = x = y x = 5 += x+ = y x = x+y x = 15 -= x- = y x = x-y x = 5 *= x* = y x = x*y x = 50 read more..

  • Page - 43

    Chapter 4: Javascript Operators 29 Figure 4.1 read more..

  • Page - 44

    30 CHAPTER 5 JAVASCRIPT COMPARISONS In This Chapter Comparison Operators How to Use Comparisons Logical Operators Conditional Operator Comparison and logical operators are used to test for true or false. Comparison Operators Comparison operators are used in logical statements to determine equality or differ- ence between variables or values. Given that x = 5, the read more..

  • Page - 45

    Chapter 5: Javascript Comparisons 31 How to Use Comparisons Comparison operators can be used in conditional statements to compare values and take action depending on the result: You will learn more about the use of conditional statements in the next chapter. Logical Operators Logical operators are used to determine the logic between variables or values. Given that x = 6 and y read more..

  • Page - 46

    32 CHAPTER 6 JAVASCRIPT IF...ELSE STATEMENTS In This Chapter Conditional Statements if Statement if...else Statement if...else if...else Statement Conditional statements are used to perform different actions based on different conditions. Conditional Statements Very often when you write code, you want to perform different actions for different decisions. You can use conditional read more..

  • Page - 47

    Chapter 6: JavaScript If...Else Statements 33 if Statement Use the statement to execute some code only if a specified condition is true. The syntax is as follows: Your result is shown in Figure 6.1. With conditionals, a { } block must contain the statements to be executed. If curly braces are not present, only the subsequent statement is executed, which is a read more..

  • Page - 48

    Learn JavaScript and Ajax with w3schools 34 if...else Statement Use the statement to execute some code if a condition is true and another code if the condition is not true. The syntax is as follows: (continued) Figure 6.1 There is no in this syntax. You tell the browser to execute some code only if the specified condition is true. NO TE read more..

  • Page - 49

    Chapter 6: JavaScript If...Else Statements 35 Your result is shown in Figure 6.2. Figure 6.2 read more..

  • Page - 50

    Learn JavaScript and Ajax with w3schools 36 The following example demonstrates a random link. When you click on the link, it will take you to w3schools.com OR to RefsnesData.no. There is a 50 percent chance for each of them. Your result is shown in Figure 6.3. if...else if...else Statement Use the statement to select one of several blocks of code to be executed. The read more..

  • Page - 51

    Chapter 6: JavaScript If...Else Statements 37 Your result is shown in Figure 6.4. (continued) read more..

  • Page - 52

    Learn JavaScript and Ajax with w3schools 38 Figure 6.2 (continued) read more..

  • Page - 53

    39 CHAPTER 7 JAVASCRIPT LOOPS In This Chapter The Loop The Loop The Loop Loops execute a block of code a specified number of times or while a specified condition is true. Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script, you can use loops read more..

  • Page - 54

    Learn JavaScript and Ajax with w3schools 40 Figure 7.1 read more..

  • Page - 55

    Chapter 7: Javascript Loops 41 In the following example, you loop through the six different HTML headings. Your result is shown in Figure 7.2. The while Loop The loop loops through a block of code a specified number of times or while a specified condition is true. The syntax is as follows: Figure 7.2 (continued) read more..

  • Page - 56

    Learn JavaScript and Ajax with w3schools 42 The following example defines a loop that starts with . The loop will continue to run as long as i is less than or equal to 5. i will increase by 1 each time the loop runs, as shown in Figure 7.3. The could be any comparing statement. NO TE The distinction between the and the is that in the loop, the read more..

  • Page - 57

    Chapter 7: Javascript Loops 43 The do...while Loop The loop is a variant of the loop. This loop will execute the block of code once, and then it will repeat the loop as long as the specified condi- tion is true. The syntax is as follows: The following example uses a loop. The loop will always be executed at least once, even if the condition is false, read more..

  • Page - 58

    Learn JavaScript and Ajax with w3schools 44 read more..

  • Page - 59

    Chapter 7: Javascript Loops 45 Figure 7.4 read more..

  • Page - 60

    46 CHAPTER 8 ADDITIONAL JAVASCRIPT FLOW CONTROL STATEMENTS In This Chapter The Statement The Statement JavaScript Statement JavaScript Statement The and statements are used to control loop execution. The statement can be used to halt execution of a loop if, for example, an error condition is encountered. The statement is used to begin the read more..

  • Page - 61

    Chapter 8: Additional JavaScript Flow Control Statements 47 The continue Statement The statement will terminate the current iteration and restart the loop with the next value. Your result is shown in Figure 8.2. Figure 8.1 (continued) read more..

  • Page - 62

    Learn JavaScript and Ajax with w3schools 48 JavaScript for...in Statement The statement loops through the elements of an array or through the properties of an object. The syntax is as follows: Figure 8.2 (continued) The code in the body of the loop is executed once for each element/property. NO TE read more..

  • Page - 63

    Chapter 8: Additional JavaScript Flow Control Statements 49 Arrays are discussed more fully in Chapter 17, “JavaScript Array Object.” In the following example, use the statement to loop through an array. Your result is shown in Figure 8.3. Conditional statements are used to perform different actions based on different conditions. The variable argument can be a named read more..

  • Page - 64

    Learn JavaScript and Ajax with w3schools 50 JavaScript switch Statement Use the statement to select one of many blocks of code to be executed. The syntax is as follows: This is how it works: First we have a single expression n (most often a variable) that is evaluated once. The value of the expression is then compared with the values for each case in the structure. read more..

  • Page - 65

    Chapter 8: Additional JavaScript Flow Control Statements 51 Your results are shown in Figure 8.4. (continued) read more..

  • Page - 66

    Learn JavaScript and Ajax with w3schools 52 Figure 8.4 (continued) read more..

  • Page - 67

    53 CHAPTER 9 JAVASCRIPT POPUP BOXES In This Chapter Popup Boxes • Alert Box • Confirm Box • Prompt Box Popup Boxes JavaScript has three types of popup boxes: alert box, confirm box, and prompt box. Alert Box An alert box is often used when you want to display information to the user. When an alert box pops up, the user will have to click OK to read more..

  • Page - 68

    Learn JavaScript and Ajax with w3schools 54 (continued) The following example creates an alert box with line breaks. Your results are shown in Figures 9.3 and 9.4. Figure 9.1 Figure 9.2 read more..

  • Page - 69

    Chapter 9: JavaScript Popup Boxes 55 Confirm Box A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either OK or Cancel to proceed. If the user clicks OK, the box returns true. If the user clicks Cancel, the box returns false. The syntax is as follows: Your results are shown read more..

  • Page - 70

    Learn JavaScript and Ajax with w3schools 56 Prompt Box A prompt box is often used if you want the user to input a value while on a page or from a page. When a prompt box pops up, the user will have to click either OK or Cancel to proceed after entering an input value. Figure 9.5 Figure 9.6 (continued) read more..

  • Page - 71

    Chapter 9: JavaScript Popup Boxes 57 If the user clicks OK, the box returns the input value. If the user clicks Cancel, the box returns null. The syntax is as follows: Your results are shown in Figure 9.7. Figure 9.7 read more..

  • Page - 72

    58 CHAPTER 10 JAVASCRIPT FUNCTIONS In This Chapter How to Define a Function JavaScript Function Examples The Statement The Lifetime of JavaScript Variables A function will be executed by an event or by an explicit call to the function. To keep the browser from executing a script when the page loads, you can put your script into a function. A function read more..

  • Page - 73

    Chapter 10: JavaScript Functions 59 The parameters var1, var2, and so on, are variables or values passed into the function. The and the defines the start and end of the function. JavaScript Function Examples In the following example, if the line had not been put within a function, it would have been executed as soon as the line was loaded. Now, the script read more..

  • Page - 74

    Learn JavaScript and Ajax with w3schools 60 You will learn more about JavaScript events in the Chapter 11, “JavaScript Events.” The following example of a function with a parameter shows how to pass a variable to a function and use the variable in the function. Your results are shown in Figures 10.3 and 10.4. Figure 10.1 (continued) Figure 10.2 read more..

  • Page - 75

    Chapter 10: JavaScript Functions 61 The following example shows how to let a function return a value. Your results are shown in Figure 10.5 Figure 10.3 Figure 10.4 (continued) read more..

  • Page - 76

    Learn JavaScript and Ajax with w3schools 62 The return Statement The statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the statement. A statement also may be used in a function that does not return a value to end execution at any given point in the function; for example, if an read more..

  • Page - 77

    Chapter 10: JavaScript Functions 63 The Lifetime of JavaScript Variables If you declare a variable within a function, the variable can be accessed only within that function. When you exit the function, the variable is destroyed. These vari- ables are called local variables. You can have local variables with the same name in different functions, because each is recognized only read more..

  • Page - 78

    64 CHAPTER 11 JAVASCRIPT EVENTS In This Chapter and , , and and Events are actions that can be detected by JavaScript. By using JavaScript, we have the ability to create dynamic Web pages. Every element on a Web page has certain events that can trigger a JavaScript. For example, we can use the event of a button element to indicate read more..

  • Page - 79

    Chapter 11: JavaScript Events 65 Both the and events often are used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user’s name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup read more..

  • Page - 80

    Learn JavaScript and Ajax with w3schools 66 onMouseOver and onMouseOut and often are used to create Rollover buttons. Following is an example of an event. An alert box appears when an event is detected: onClick The onClick event occurs when the user mouse clicks on a visible element on the screen. The following example could be used to translate text on a page read more..

  • Page - 81

    67 CHAPTER 12 JAVASCRIPT TRY…CATCH AND THROW STATEMENTS In This Chapter JavaScript—Catching Errors The Statement The Statement The statement enables you to trap errors that occur during the execu- tion of a block of code. JavaScript—Catching Errors When browsing Web pages on the Internet, we all have seen a JavaScript alert box telling us there is a read more..

  • Page - 82

    Learn JavaScript and Ajax with w3schools 68 The syntax is as follows: The following example is supposed to alert “Welcome guest!” when the button is clicked. However, there’s a typo in the function. is misspelled as . A JavaScript error occurs. The catch block catches the error and executes a custom code to handle it. The code displays a custom error message read more..

  • Page - 83

    Chapter 12: JavaScript Try…Catch and Throw Statements 69 The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code read more..

  • Page - 84

    Learn JavaScript and Ajax with w3schools 70 The throw Statement The statement allows you to create an exception. If you use this statement together with the statement, you can control program flow and gen- erate accurate error messages. Figure 12.3 Figure 12.4 (continued) read more..

  • Page - 85

    Chapter 12: JavaScript Try…Catch and Throw Statements 71 The syntax is as follows: The exception can be a string, integer, Boolean, or an object. The following example determines the value of a variable called x. If the value of x is higher than 10, lower than 0, or not a number, we are going to throw an error. The error is then caught by the argument, read more..

  • Page - 86

    Learn JavaScript and Ajax with w3schools 72 (continued) read more..

  • Page - 87

    73 CHAPTER 13 JAVASCRIPT SPECIAL CHARACTERS AND GUIDELINES In This Chapter Insert Special Characters JavaScript Is Case Sensitive White Space Break up a Code Line In JavaScript, you can add special characters to a text string by using the back- slash character. Also, when scripting with JavaScript, you should know some other important guidelines. Insert Special read more..

  • Page - 88

    Learn JavaScript and Ajax with w3schools 74 JavaScript will now output the proper text string: We are the so-called “Vikings” fr om the north. Here is another example: The previous example will produce the following output: The following table lists other special characters that can be added to a text string with the backslash sign: Code Outputs \’ single quote \” double read more..

  • Page - 89

    Chapter 13: JavaScript Special Characters and Guidelines 75 The following will generate an “unterminated string literal” script error: Another option is to use the concatenate operator (+) to break the string: Code statements may be broken across lines, but the backslash character must not be used in this case. The following is legal JavaScript: As a rule, break code statements read more..

  • Page - 90

    read more..

  • Page - 91

    77 Section II JavaScript Objects Chapter 14: JavaScript Objects Intro Chapter 15: JavaScript String Object Chapter 16: JavaScript Date Object Chapter 17: JavaScript Array Object Chapter 18: JavaScript Boolean Object Chapter 19: JavaScript Math Object Chapter 20: JavaScript RegExp Objects read more..

  • Page - 92

    read more..

  • Page - 93

    79 CHAPTER 14 JAVASCRIPT OBJECTS INTRO In This Chapter Object-Oriented Programming Properties Methods JavaScript as a programming language has strong object-oriented capabilities. An Object-Oriented (OOL) language enables you to model data using objects consist- ing of properties and methods that operate on those properties. Object-Oriented Programming Creating your own objects is read more..

  • Page - 94

    Learn JavaScript and Ajax with w3schools 80 The output of the previous code will be Methods Methods are the actions that can be performed on objects. In the following example, we use the method of the String object to display a text in uppercase letters: The output of the previous code will be (continued) read more..

  • Page - 95

    81 CHAPTER 15 JAVASCRIPT STRING OBJECT In This Chapter String Object Examples The String object is used to manipulate a stored piece of text. String Object The following example uses the property of the String object to find the length of a string: The preceding code will result in the following output: The following example uses the method of the String object to read more..

  • Page - 96

    Learn JavaScript and Ajax with w3schools 82 Examples The following example shows how to return the length of a string. Your results are shown in Figure 15.1. The following example demonstrates how to use the methods of the String object to style strings. Your results are shown in Figure 15.2. Figure 15.1 read more..

  • Page - 97

    Chapter 15: JavaScript String Object 83 read more..

  • Page - 98

    Learn JavaScript and Ajax with w3schools 84 The following example demonstrates conversion of a string to lowercase or upper- case. Your results are shown in Figure 15.3. Figure 15.2 read more..

  • Page - 99

    Chapter 15: JavaScript String Object 85 Your results are shown in Figure 15.3. The following example demonstrates how to search for a specified value within a string. Your results are shown in Figure 15.4. The following example shows how to replace a specified value with another value in a string. Your results are shown in Figure 15.5. Figure 15.3 Figure 15.4 read more..

  • Page - 100

    Learn JavaScript and Ajax with w3schools 86 The following example demonstrates how to find the position of the first occur- rence of a specified value in a string. Your results are shown in Figure 15.6. Figure 15.5 read more..

  • Page - 101

    Chapter 15: JavaScript String Object 87 For a complete reference of all the properties and methods that can be used with the String object, go to the String object reference in Appendix A. The reference contains a brief description and usage examples for each property and method! Figure 15.6 read more..

  • Page - 102

    88 CHAPTER 16 JAVASCRIPT DATE OBJECT In This Chapter Create a Date Object Set Dates Compare Two Dates Examples The Date object is used to work with dates and times. Create a Date Object The Date object is used to work with dates and times. Date objects are created with the constructor. There are four ways of instantiating a date: Most of the preceding read more..

  • Page - 103

    Chapter 16: JavaScript Date Object 89 All dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal Time (UTC) with a day containing 86,400,000 milliseconds. Some examples of instantiating a date: For a complete reference of all the properties and methods that can be used with the Date object, go to the complete Date object reference in Appendix A. The read more..

  • Page - 104

    Learn JavaScript and Ajax with w3schools 90 Examples The following example demonstrates how to use the method to get today’s date. Your results are shown in Figure 16.1. The following example demonstrates how to use to calculate the mil- liseconds since 1970. Your results are shown in Figure 16.2. Figure 16.1 (continued) read more..

  • Page - 105

    Chapter 16: JavaScript Date Object 91 The following example shows how to use to set a specific date. Your results are shown in Figure 16.3. The following example demonstrates how to use to convert today’s date (according to UTC) to a string. Your results are shown in Figure 16.4. Figure 16.2 Figure 16.3 read more..

  • Page - 106

    Learn JavaScript and Ajax with w3schools 92 The method returns the day of the week as a number, with The following example demonstrates how to use and an array to display the day of the week as a text string rather than a number as shown in Figure 16.5. Figure 16.4 read more..

  • Page - 107

    Chapter 16: JavaScript Date Object 93 The following example demonstrates how to display a clock on your Web page. Your results are shown in Figure 16.6. Figure 16.5 (continued) read more..

  • Page - 108

    Learn JavaScript and Ajax with w3schools 94 Figure 16.6 (continued) read more..

  • Page - 109

    95 CHAPTER 17 JAVASCRIPT ARRAY OBJECT In This Chapter What Is an Array? Create an Array Access an Array Modify Values in an Array Examples The Array object is used to store multiple values in a single variable. What Is an Array? An array is a special variable that can hold more than one value at a time. If you have a list of items (a list read more..

  • Page - 110

    Learn JavaScript and Ajax with w3schools 96 Create an Array An array can be defined in three ways. The following code creates an Array object called : 1. 2. 3. Access an Array You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. The following code line results in the read more..

  • Page - 111

    Chapter 17: JavaScript Array Object 97 Now, the following code line: results in the following output: Examples The following example demonstrates how to create an array, assign values to it, and write the values to the output. Your results are shown in Figure 17.1. Figure 17.1 read more..

  • Page - 112

    Learn JavaScript and Ajax with w3schools 98 The following example demonstrates how to use a statement to loop through the elements of an array. Your results are shown in Figure 17.2. The following example demonstrates how to join two arrays. Your results are shown in Figure 17.3 Figure 17.2 read more..

  • Page - 113

    Chapter 17: JavaScript Array Object 99 The following example demonstrates how to join three arrays. Your results are shown in Figure 17.4 The following example shows you how to join all elements of an array into a string. Your results are shown in Figure 17.5. Figure 17.3 Figure 17.4 (continued) read more..

  • Page - 114

    Learn JavaScript and Ajax with w3schools 100 The following example demonstrates how to remove the last element of an array, and Figure 17.6 shows your results. The following example demonstrates how to add new elements to the end of an array. Your results are shown in Figure 17.7. (continued) Figure 17.5 Figure 17.6 read more..

  • Page - 115

    Chapter 17: JavaScript Array Object 101 In the following example, you see how to reverse the order of the elements in an array. Your results are shown in Figure 17.8. The following example demonstrates how to remove the first element of an array. Your results are shown in Figure 17.9. Figure 17.7 Figure 17.8 (continued) read more..

  • Page - 116

    Learn JavaScript and Ajax with w3schools 102 The following example demonstrates how to use to select elements from an array. Your results are shown in Figure 17.10. (continued) Figure 17.9 Figure 17.10 read more..

  • Page - 117

    Chapter 17: JavaScript Array Object 103 The following three examples demonstrate how to use . The first example shows how to sort alphabetically and ascending. Your results are shown in Figure 17.11. The next example demonstrates how to sort numerically and ascending. Your results are shown in Figure 17.12. Figure 17.11 Figure 17.12 read more..

  • Page - 118

    Learn JavaScript and Ajax with w3schools 104 The third sort() example demonstrates how to sort numerically and descending. Your results are shown in Figure 17.13. The following example demonstrates how to use to add an element to the second position in an array. Your results are shown in Figure 17.14. Figure 17.13 read more..

  • Page - 119

    Chapter 17: JavaScript Array Object 105 The following example shows you how to convert an array to a string. Your results are shown in Figure 17.15. The following example shows you how to add new elements to the beginning of an array. Figure 17.16 shows your results. Figure 17.14 Figure 17.15 (continued) read more..

  • Page - 120

    Learn JavaScript and Ajax with w3schools 106 You can follow these examples on the w3Schools Web site. For a complete reference of all the properties and methods that can be used with the Array object, go to the complete Array object reference in Appendix A. Figure 17.16 (continued) The method does not work properly in Internet Explorer, it only returns undefined, as read more..

  • Page - 121

    107 CHAPTER 18 JAVASCRIPT BOOLEAN OBJECT In This Chapter Create a Boolean Object Examples The Boolean object is used to convert a non-Boolean value to a Boolean value (either true or false). Create a Boolean Object The Boolean object represents two values: true or false. The following code creates a Boolean object called : All the following lines of code create Boolean read more..

  • Page - 122

    Learn JavaScript and Ajax with w3schools 108 And all the following lines of code create Boolean objects with an initial value of true: For a complete reference of all the properties and methods that can be used with the Boolean object, go to the complete Boolean object reference in Appendix A. Examples The following example demonstrates how to check whether a Boolean object read more..

  • Page - 123

    Chapter 18: JavaScript Boolean Object 109 Figure 18.1 read more..

  • Page - 124

    110 CHAPTER 19 JAVASCRIPT MATH OBJECT In This Chapter Math Object Mathematical Constants Mathematical Methods Examples The Math object allows you to perform mathematical tasks. Math Object The Math object allows you to perform mathematical tasks. The Math object includes several mathematical constants and methods. The syntax for using properties/methods of Math is as follows: read more..

  • Page - 125

    Chapter 19: JavaScript Math Object 111 Mathematical Methods In addition to the mathematical constants that can be accessed from the Math object, several methods also are available. The following example uses the method of the Math object to round a number to the nearest integer: The preceding code results in the following output: The following example uses the method of read more..

  • Page - 126

    Learn JavaScript and Ajax with w3schools 112 Examples The following example demonstrates how to use . Your results are shown in Figure 19.1. The following example demonstrates how to use to return a random number between 0 and 1 as shown in Figure 19.2. Figure 19.1 read more..

  • Page - 127

    Chapter 19: JavaScript Math Object 113 The following example demonstrates how to use to return the largest of the specified values. Your results are shown in Figure 19.3. Figure 19.2 Figure 19.3 read more..

  • Page - 128

    Learn JavaScript and Ajax with w3schools 114 The following example shows how to use to return the smallest of the speci- fied values. Your results are shown in Figure 19.4. Figure 19.4 read more..

  • Page - 129

    115 CHAPTER 20 JAVASCRIPT REGEXP OBJECT In This Chapter What Is RegExp? RegExp Modifiers RegExp is short for regular expression. What Is RegExp? A regular expression is an object that describes a pattern of characters. When you search in a text, you can use a pattern to describe what you are searching for. A simple pattern can be a single character. A read more..

  • Page - 130

    Learn JavaScript and Ajax with w3schools 116 The syntax follows a couple of general guidelines: The pattern specifies the pattern of an expression. The modifiers specify whether a search should be global, case-sensitive, and so on. RegExp Modifiers Modifiers are used to perform case-insensitive and global searches. The modifier is used to perform case-insensitive matching. read more..

  • Page - 131

    Chapter 20: JavaScript RegExp Object 117 The following example demonstrates how to do a global search for “is”: Your results are shown in Figure 20.2. The following example demonstrates how to do a global, case-insensitive search for “is”: Your results are shown in Figure 20.3. Figure 20.2 (continued) read more..

  • Page - 132

    Learn JavaScript and Ajax with w3schools 118 test() The method searches a string for a specified value and returns true or false, depending on the result. The following example searches a string for the character “e”: Because there is an “e” in the string, the output of the preceding code is as follows: Your results are shown in Figure 20.4. Figure 20.3 (continued) read more..

  • Page - 133

    Chapter 20: JavaScript RegExp Object 119 exec() The method searches a string for a specified value and returns the text of the found value. If no match is found, it returns null. The following example searches a string for the character “e”: Because there is an “e” in the string, the output of the preceding code is: Your results are shown in Figure 20.5. Figure read more..

  • Page - 134

    Learn JavaScript and Ajax with w3schools 120 For a complete reference of all the properties and methods that can be used with the RegExp object, go to the complete RegExp object reference in Appendix A. Figure 20.5 read more..

  • Page - 135

    121 Section III JavaScript Advanced Chapter 21: JavaScript Browser Detection Chapter 22: JavaScript Cookies Chapter 23: JavaScript Form Validation Chapter 24: JavaScript Animation Chapter 25: JavaScript Image Maps Chapter 26: JavaScript Timing Events Chapter 27: Create Your Own Objects with JavaScript read more..

  • Page - 136

    read more..

  • Page - 137

    123 CHAPTER 21 JAVASCRIPT BROWSER DETECTION In This Chapter Browser Detection The Navigator Object The Navigator object contains information about the visitor’s browser. Browser Detection Almost everything in this tutorial works on all JavaScript-enabled browsers. How- ever, some things just don’t work on certain browsers—especially on older browsers. So, sometimes it can be read more..

  • Page - 138

    Learn JavaScript and Ajax with w3schools 124 The Navigator Object The Navigator object contains all information about the visitor’s browser. We are going to look at two properties of the Navigator object: —holds the name of the browser —holds, among other things, the version of the browser Your results are shown in Figure 21.1. The variable “browser” in the read more..

  • Page - 139

    Chapter 21: JavaScript Browser Detection 125 The following example displays a different alert, depending on the visitor’s browser. The alert box is shown in Figure 21.2. Figure 21.2 read more..

  • Page - 140

    Learn JavaScript and Ajax with w3schools 126 The following example provides more rules about the visitor’s browser. Your results are shown in Figure 21.3. Figure 21.3 read more..

  • Page - 141

    Chapter 21: JavaScript Browser Detection 127 The following example provides ALL the details about the visitor’s browser. Your results are shown in Figure 21.4. read more..

  • Page - 142

    Learn JavaScript and Ajax with w3schools 128 Figure 21.4 read more..

  • Page - 143

    129 CHAPTER 22 JAVASCRIPT COOKIES In This Chapter What Is a Cookie? Create and Store a Cookie A cookie is often used to identify a user. What Is a Cookie? A cookie is a variable that is stored on the visitor’s computer. Each time the same computer requests a page with a browser, it sends the cookie, too. With JavaScript, you can both create and read more..

  • Page - 144

    Learn JavaScript and Ajax with w3schools 130 Create and Store a Cookie In this example we create a cookie that stores the name of a visitor. The first time a visitor arrives at the Web page, she is asked to fill in her name. The name then is stored in a cookie. The next time the visitor arrives at the same page, she sees a welcome message. First, we read more..

  • Page - 145

    Chapter 22: JavaScript Cookies 131 The preceding function first checks whether a cookie is stored at all in the object. If the object holds some cookies, then check to see whether our specific cookie is stored. If our cookie is found, then return the value; if not, return an empty string. Last, we create the function that displays a welcome message if the read more..

  • Page - 146

    Learn JavaScript and Ajax with w3schools 132 (continued) read more..

  • Page - 147

    Chapter 22: JavaScript Cookies 133 Figure 22.1 read more..

  • Page - 148

    134 CHAPTER 23 JAVASCRIPT FORM VALIDATION In This Chapter Required Fields E-mail Validation JavaScript can be used to validate data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: Has the user left required fields empty? Has the user entered a valid e-mail address? Has the user read more..

  • Page - 149

    Chapter 23: JavaScript Form Validation 135 The entire script with the HTML form could look something like this: (continued) read more..

  • Page - 150

    Learn JavaScript and Ajax with w3schools 136 E-mail Validation The following function checks whether the content follows the general syntax of an e-mail address. This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the e-mail address, and the last dot must at least be one character after the @ read more..

  • Page - 151

    Chapter 23: JavaScript Form Validation 137 read more..

  • Page - 152

    138 CHAPTER 24 JAVASCRIPT ANIMATION In This Chapter The HTML Code The JavaScript Code The Entire Code With JavaScript, we can create animated images. The trick is to let a JavaScript change between different images on different events. In the following example, we add an image that should act as a link button on a Web page. We then add an event and read more..

  • Page - 153

    Chapter24: JavaScript Animation 139 The JavaScript Code The changing between the images is done with the following JavaScript: The function causes the image to shift to “b_blue.gif.” The function causes the image to shift to “b_pink.gif.” The Entire Code In the following example, we combine the HTML and JavaScript code to produce animation. The resulting animation is read more..

  • Page - 154

    Learn JavaScript and Ajax with w3schools 140 Figure 24.1 (continued) read more..

  • Page - 155

    141 CHAPTER 25 JAVASCRIPT IMAGE MAPS In This Chapter HTML Image Maps Adding Some JavaScript An image map is an image with clickable regions. HTML Image Maps If you’ve read Learn HTML and CSS with w3schools or completed the HTML tutorial on the w3schools Web site, you know that an image map is an image with clickable regions. Normally, each region has an read more..

  • Page - 156

    Learn JavaScript and Ajax with w3schools 142 Adding Some JavaScript We can add events (that can call a JavaScript) to the tags inside the image map. The tag supports the , , , , , , , , , , , and events. Here’s the HTML image-map example, with some JavaScript added. Your results are shown in Figure 25.2. Figure 25.1 (continued) read more..

  • Page - 157

    Chapter 25: JavaScript Image Maps 143 Figure 25.2 read more..

  • Page - 158

    144 CHAPTER 26 JAVASCRIPT TIMING EVENTS In This Chapter The Method The Method With JavaScript, it is possible to execute some code after a specified time interval. This is called timing events. It’s very easy to time events in JavaScript. The two key methods that are used are as follows: Executes a code some time in the future Cancels the The read more..

  • Page - 159

    Chapter 26: JavaScript Timing Events 145 When the button is clicked in the following example, an alert box is displayed after 3 seconds. Your results are shown in Figure 26.1. To get a timer to work in an infinite loop, you must write a function that calls itself. In the following example, when a button is clicked, the input field starts to count (forever) starting read more..

  • Page - 160

    Learn JavaScript and Ajax with w3schools 146 read more..

  • Page - 161

    Chapter 26: JavaScript Timing Events 147 The following example is another simple timing using the method. Your results are shown in Figure 26.3. Figure 26.2 read more..

  • Page - 162

    Learn JavaScript and Ajax with w3schools 148 The following example shows a clock created with a timing event. Your results are shown in Figure 26.4. Figure 26.3 read more..

  • Page - 163

    Chapter 26: JavaScript Timing Events 149 The clearTimeout() Method The syntax is as follows: The following example is the same as the previous infinite loop example. The only difference is that we have now added a button that stops the timer. Your results are shown in Figure 26.5. Figure 26.4 (continued) read more..

  • Page - 164

    Learn JavaScript and Ajax with w3schools 150 Figure 26.5 (continued) read more..

  • Page - 165

    151 CHAPTER 27 CREATE YOUR OWN OBJECTS WITH JAVASCRIPT In This Chapter JavaScript Objects Creating Your Own Objects Objects are useful to organize information. JavaScript Objects Earlier in this book, you learned that JavaScript has several built-in objects, like String, Date, Array, and more. In addition to these built-in objects, you also can create your own. An object is read more..

  • Page - 166

    Learn JavaScript and Ajax with w3schools 152 You can add a property to an object by simply giving it a value. Assume that the already exists; you can give it properties named , , , and as follows: The preceding code generates the following output: Methods An object also can contain methods. You can call a method with the following syntax: To call a method called read more..

  • Page - 167

    Chapter 27: Create Your Own Objects with JavaScript 153 Adding a method to the is also simple. The following code adds a method called to the : In the following example, you create a direct instance of an object. Your results are shown in Figure 27.1. Figure 27.1 read more..

  • Page - 168

    Learn JavaScript and Ajax with w3schools 154 Create a Template of an Object The template defines the structure of an object so that you can more easily create multiple instances of that object: Notice that the template is just a function. It is also called a constructor. Inside the constructor, you add the properties and methods that will belong to each subsequent instance read more..

  • Page - 169

    Chapter 27: Create Your Own Objects with JavaScript 155 After you have the template, you can create new instances of the object, like this: You can also add some methods to the person object. This is also done inside the template: Note that methods are just functions attached to objects. Then you will have to write the function: The function defines the person’s new read more..

  • Page - 170

    read more..

  • Page - 171

    157 Section IV AJAX Basic Chapter 28: AJAX XMLHttpRequest Chapter 29: AJAX Browser Support Chapter 30: AJAX—The XMLHttpRequest Object’s Methods and Properties Chapter 31: AJAX Server read more..

  • Page - 172

    read more..

  • Page - 173

    159 CHAPTER 28 AJAX XMLHTTPREQUEST In This Chapter AJAX Uses the Object The Object AJAX Example Your First AJAX Application AJAX Uses the XMLHttpRequest Object To get or send information from/to a database or a file on the server with tradi- tional JavaScript, you will have to make an HTML form. A user will have to click the Submit button to read more..

  • Page - 174

    Learn JavaScript and Ajax with w3schools 160 AJAX was made popular in 2005 by Google (with Google Suggest). Google Suggest is using the object to create a very dynamic Web interface: When you start typing in Google’s search box, a JavaScript sends the let- ters off to a server, and the server returns a list of suggestions. The object is supported in all major read more..

  • Page - 175

    Chapter 28: AJAX XMLHttpRequest 161 The next chapters explain the script (using AJAX) and how to make the application work. The various supporting files and images, including the test1.txt and test2.txt files, are accessed when completing this tutorial online at www. w3schools.com. Your results are shown in Figure 28.1. (continued) read more..

  • Page - 176

    Learn JavaScript and Ajax with w3schools 162 Figure 28.1 (continued) read more..

  • Page - 177

    163 CHAPTER 29 AJAX BROWSER SUPPORT In This Chapter The All Together Now The keystone of AJAX is the object. The XMLHttpRequest All new browsers support a new built-in JavaScript object (IE5 and IE6 use an ). The object can be used to request information (data) from a server. Let’s update our HTML file with a JavaScript in the section: read more..

  • Page - 178

    Learn JavaScript and Ajax with w3schools 164 Try to create an object: If not (if IE5 or IE6), create an : Open the request object: Send your request to your server: Update your page with the response from the server: In Chapter 30, “AJAX—the XMLHttpRequest Object”, you learn more about the . All Together Now The following example puts what you’ve learned all together. read more..

  • Page - 179

    Chapter 29: AJAX Browser Support 165 Figure 29.1 read more..

  • Page - 180

    166 CHAPTER 30 AJAX—THE XMLHTTPREQUEST OBJECT’S METHODS AND PROPERTIES In This Chapter Important Methods Sending an AJAX Request to a Server Important Properties The Property Open—Using False Open—Using True The Property The Property In this chapter, you learn about important methods and properties of the object. Important Methods read more..

  • Page - 181

    Chapter 30: AJAX—The XMLHttpRequest Object’s Methods and Objects 167 Sending an AJAX Request to a Server To send a request to a Web server, use the and methods. The method takes three arguments. The first argument defines which method to use (GET or POST). The second argument specifies the name of the server resource (URL). The third argument specifies if read more..

  • Page - 182

    Learn JavaScript and Ajax with w3schools 168 The third parameter in the open call is “false”. This tells the object to wait until the server request is completed before next statement is executed. For small applications and simple server requests, this might be OK. But if the request takes a long time or cannot be served, this might cause your Web applica- tion to hang read more..

  • Page - 183

    Chapter 30: AJAX—The XMLHttpRequest Object’s Methods and Objects 169 The onreadystatechange Property The property stores a function (or the name of a function) to be called automatically each time the property changes. You can define the entire function in the property like this: Or you can simply store the name of a function that is defined elsewhere, like this: read more..

  • Page - 184

    170 CHAPTER 31 AJAX SERVER In This Chapter Object Can Request Any Data Requesting Files Submitting Forms There is no such thing as an AJAX server. XMLHttpRequest Object Can Request Any Data With the object, you can request any Web resource from a server. You can request TXT files, HTML files, XML files, pictures, or any data that is accessible from the read more..

  • Page - 185

    Chapter 31: AJAX Server 171 Submitting Forms With AJAX, you can easily submit form data without having to reload the page. In the following chapters, we request data and files and learn how to submit forms. read more..

  • Page - 186

    read more..

  • Page - 187

    173 Section V AJAX Advanced Chapter 32: AJAX Suggest Chapter 33: AJAX Database Example Chapter 34: AJAX XML Example Chapter 35: AJAX ResponseXML Example read more..

  • Page - 188

    read more..

  • Page - 189

    175 CHAPTER 32 AJAX SUGGEST In This Chapter The HTML Form The Function The Function The Function AJAX Suggest Source Code AJAX can be used to create more interactive applications. The following AJAX example demonstrates how a Web page can communicate with a Web server while a user enters data into an HTML form. For this example, use the name read more..

  • Page - 190

    Learn JavaScript and Ajax with w3schools 176 An event attribute for the input field defines a function to be triggered by the event. The paragraph below the form contains a span called . The span is used as a placeholder for data retrieved from the Web server. When a user inputs data, the function called is executed. The execution of the function is triggered by read more..

  • Page - 191

    Chapter 32: AJAX Suggest 177 If there is input in the input field ( > 0), the function executes the following: Defines the URL (filename) to send to the server Adds a parameter (q) to the URL with the content of the input field Adds a random number to prevent the server from using a cached file Creates an XMLHttp object and tells the object read more..

  • Page - 192

    Learn JavaScript and Ajax with w3schools 178 The function executes every time the state of the XMLHttp object changes. When the state changes to 4 (“complete”), the content of the placeholder is filled with the response text. AJAX Suggest Source Code The following source code belongs to the previous AJAX example. You can copy and paste it, and try it yourself. The AJAX read more..

  • Page - 193

    Chapter 32: AJAX Suggest 179 The AJAX JavaScript This is the JavaScript code, stored in the file clienthint.js: (continued) read more..

  • Page - 194

    Learn JavaScript and Ajax with w3schools 180 The AJAX Server Page—ASP and PHP There is no such thing as an AJAX server. AJAX pages can be served by any Internet server. The server page called by the JavaScript in the previous example is a simple ASP file called gethint.asp. Following are two examples of the server page code, one written in ASP and one in PHP. read more..

  • Page - 195

    Chapter 32: AJAX Suggest 181 (continued) read more..

  • Page - 196

    Learn JavaScript and Ajax with w3schools 182 AJAX PHP Example The preceding code can be rewritten in PHP. To run the entire example in PHP, remember to change the value of the url variable in from to . NO TE (continued) read more..

  • Page - 197

    Chapter 32: AJAX Suggest 183 read more..

  • Page - 198

    184 CHAPTER 33 AJAX DATABASE EXAMPLE In This Chapter The AJAX JavaScript The AJAX Server Page AJAX can be used for interactive communication with a database. The example shown in Figure 33.1 demonstrates how a Web page can fetch infor- mation from a database with AJAX technology. The preceding example contains a simple HTML form and a link to a JavaScript: Figure 33.1 read more..

  • Page - 199

    Chapter 33: AJAX Database Example 185 As you can see, it is just a simple HTML form with a drop-down box called customers. The below the form will be used as a placeholder for info retrieved from the Web server. When the user selects data, a function called is executed. The execution of the function is triggered by the event. In other words, each time read more..

  • Page - 200

    Learn JavaScript and Ajax with w3schools 186 The AJAX Server Page The server page called by the previous JavaScript script is an ASP file called getcus- tomer.asp. The ASP page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP or some other server language. The code runs a query against a database and returns the result read more..

  • Page - 201

    Chapter 33: AJAX Database Example 187 read more..

  • Page - 202

    188 CHAPTER 34 AJAX XML EXAMPLE In This Chapter The AJAX JavaScript The AJAX Server Page The XML File AJAX can be used for interactive communication with an XML file. The example in Figure 34.1 demonstrates how a Web page can fetch information from an XML file with AJAX technology. The preceding example contains a simple HTML form and a link to a JavaScript: read more..

  • Page - 203

    Chapter 34: AJAX XML Example 189 As you can see, it is just a simple HTML form with a simple drop-down box called . The below the form will be used as a placeholder for info retrieved from the Web server. When the user selects data, a function called is executed. The execution of the function is triggered by the event. In other words each time the user read more..

  • Page - 204

    Learn JavaScript and Ajax with w3schools 190 The AJAX Server Page The server page called by the preceding JavaScript is an ASP file called getcd.asp. The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP or some other server language. The code runs a query against an XML file and returns the result as HTML: read more..

  • Page - 205

    Chapter 34: AJAX XML Example 191 The XML File The XML file used in the example is cd_catalog.xml. This document contains a CD collection and appears as follows: (continued) read more..

  • Page - 206

    Learn JavaScript and Ajax with w3schools 192 (continued) read more..

  • Page - 207

    Chapter 34: AJAX XML Example 193 (continued) read more..

  • Page - 208

    Learn JavaScript and Ajax with w3schools 194 (continued) read more..

  • Page - 209

    Chapter 34: AJAX XML Example 195 (continued) read more..

  • Page - 210

    Learn JavaScript and Ajax with w3schools 196 (continued) read more..

  • Page - 211

    Chapter 34: AJAX XML Example 197 read more..

  • Page - 212

    198 CHAPTER 35 AJAX RESPONSEXML EXAMPLE In This Chapter The AJAX JavaScript The AJAX Server Page returns the HTTP response as a string. returns the response as XML. The responseXML property returns an XML document object, which can be examined and parsed using the DOM (Document Object Model). See Appendix B for a complete listing of the HTML DOM Objects. The read more..

  • Page - 213

    Chapter 35: AJAX ResponseXML Example 199 The preceding example contains an HTML form with a drop-down box called . When the user selects a customer in the drop-down box, a function called is executed. The execution of the function is triggered by the event. In other words. each time the user changes the value in the drop- down box, the function is called. read more..

  • Page - 214

    Learn JavaScript and Ajax with w3schools 200 (continued) read more..

  • Page - 215

    Chapter 35: AJAX ResponseXML Example 201 The and functions are the same as in previous chapters. The function also is used earlier in this tuto- rial; however, this time we return the result as an XML document (with ) and use the DOM to extract the values we want to be displayed. The AJAX Server Page The server page called by the JavaScript is an ASP read more..

  • Page - 216

    Learn JavaScript and Ajax with w3schools 202 Notice the second line in the ASP code: . The property sets the HTTP content type for the response object. The default value for this property is . This time we want the content type to be XML. Then we select data from the database and build an XML document with the data. (continued) read more..

  • Page - 217

    203 APPENDIX A JAVASCRIPT OBJECTS In This Appendix Array Object Boolean Object Date Object Math Object Number Object String Object Object Global Properties and Functions Array Object The Array object is used to store multiple values in a single variable. For a tutorial about arrays, see Chapter 17, “JavaScript Array Object.” Array Object Properties read more..

  • Page - 218

    Learn JavaScript and Ajax with w3schools 204 Array Object Methods Method Description concat() Joins two or more arrays, and returns a copy of the joined arrays join() Joins all elements of an array into a string pop() Removes the last element of an array, and returns that element push() Adds new elements to the end of an array, and returns the new length reverse() Reverses read more..

  • Page - 219

    Appendix A: JavaScript Objects 205 For a tutorial about date and times, see Chapter 16, “JavaScript Date Object.” Date Object Properties Property Description constructor Returns the function that created the Date object’s prototype prototype Allows you to add properties and methods to an object Date Object Methods Method Description getDate() Returns the day of the month (from read more..

  • Page - 220

    Learn JavaScript and Ajax with w3schools 206 Method Description setFullYear() Sets the year (four digits) setHours() Sets the hour (from 0–23) setMilliseconds() Sets the milliseconds (from 0–999) setMinutes() Set the minutes (from 0–59) setMonth() Sets the month (from 0–11) setSeconds() Sets the seconds (from 0–59) setTime() Sets a date and time by adding or subtracting a specified read more..

  • Page - 221

    Appendix A: JavaScript Objects 207 Math Object Properties Property Description E Returns Euler’s number, the base of the natural logarithm (approx. 2.718) LN2 Returns the natural logarithm of 2 (approx. 0.693) LN10 Returns the natural logarithm of 10 (approx. 2.302) LOG2E Returns the base-2 logarithm of E (approx. 1.442) LOG10E Returns the base-10 logarithm of E (approx. 0.434) read more..

  • Page - 222

    Learn JavaScript and Ajax with w3schools 208 Number Object Properties Property Description constructor Returns the function that created the Number object’s prototype MAX_VALUE Returns the largest number possible in JavaScript MIN_VALUE Returns the smallest number possible in JavaScript NEGATIVE _INFINITY Represents negative infinity (returned on overflow) POSITIVE_INFINITY Represents infinity (returned read more..

  • Page - 223

    Appendix A: JavaScript Objects 209 String Object Methods Method Description charAt() Returns the character at the specified index charCodeAt() Returns the Unicode of the character at the specified index concat() Joins two or more strings, and returns a copy of the joined strings fromCharCode() Converts Unicode values to characters indexOf() Returns the position of the first found read more..

  • Page - 224

    Learn JavaScript and Ajax with w3schools 210 RegExp Object A regular expression is an object that describes a pattern of characters. Regular expressions are used to perform pattern-matching and search-and-replace functions on text. The syntax is as follows: or more simply: Pattern specifies the pattern of an expression. Modifiers specify whether a search should be global, read more..

  • Page - 225

    Appendix A: JavaScript Objects 211 Metacharacters Metacharacters are characters with a special meaning: Metacharacter Description . Find a single character, except newline or line terminator \w Match any alphanumeric character, including the underscore \W Match any nonalphanumeric character \d Find a digit \D Find a nondigit character \s Find a single whitespace character \S Find a single read more..

  • Page - 226

    Learn JavaScript and Ajax with w3schools 212 RegExp Object Properties Property Description global Specifies if the “g” modifier is set ignoreCase Specifies if the “i” modifier is set lastIndex The index at which to start the next match multiline Specifies if the “m” modifier is set source The text of the RegExp pattern RegExp Object Methods Method Description compile() read more..

  • Page - 227

    Appendix A: JavaScript Objects 213 Function Description parseFloat() Parses a string and returns a floating point number parseInt() Parses a string and returns an integer String() Converts an object’s value to a string unescape() Decodes an encoded string read more..

  • Page - 228

    214 APPENDIX B HTML DOM OBJECTS In This Appendix Document Object Event Object Element Object Anchor Object Area Object Base Object Body Object Button Object (Push Button) Form Object Frame/IFrame Object Frameset Object Image Object Button Object Checkbox Object FileUpload Object Hidden Object Password Object Radio read more..

  • Page - 229

    Appendix B: HTML DOM Objects 215 Link Object Meta Object Object Object Option Object Select Object Style Object Table Object TableCell Object TableRow Object Textarea Object The World Wide Web Consortium (W3C) is an international community that develops standards to ensure the long-term growth of the Web. The W3C DOM page is located at read more..

  • Page - 230

    Learn JavaScript and Ajax with w3schools 216 Document Object Properties Property Description W3C cookie Returns all name/value pairs of cookies in the document Yes documentMode Returns the mode used by the browser to render the docu- ment No domain Returns the domain name of the server that loaded the docu- ment Yes lastModified Returns the date and time the document was last read more..

  • Page - 231

    Appendix B: HTML DOM Objects 217 IE: Internet Explorer; F: Firefox; O: Opera; W3C: W3C Standard. Attribute The event occurs when... IE F O W3C onblur An element loses focus 3 1 9 Yes onchange The content of a field changes 3 1 9 Yes onclick Mouse clicks an object 3 1 9 Yes ondblclick Mouse double-clicks an object 4 1 9 Yes onerror An error occurs when loading a document or an image read more..

  • Page - 232

    Learn JavaScript and Ajax with w3schools 218 Other Event Attributes Property Description IE F O W3C bubbles Returns a Boolean value that indicates whether an event is a bubbling event No 19Yes cancelable Returns a Boolean value that indicates whether an event can have its default action prevented No 19Yes currentTarget Returns the element whose event listeners trig- gered the event No read more..

  • Page - 233

    Appendix B: HTML DOM Objects 219 Property Description W3C lastChild Returns the last child of an element Yes length Does not apply to all objects. See specific object type. Yes nextSibling Returns the element immediately following an element Yes nodeName Returns the tagname of an element (in uppercase) Yes nodeType Returns the type of the element Yes nodeValue Returns the value of the read more..

  • Page - 234

    Learn JavaScript and Ajax with w3schools 220 Method Description W3C hasChildNodes() Returns whether an element has any child elements Yes insertBefore() Inserts a new child element before an existing child element Yes item() Returns an element based on its index within the document tree Yes normalize() Puts all text nodes underneath this element (including attributes) into a “normal” read more..

  • Page - 235

    Appendix B: HTML DOM Objects 221 Anchor Object Properties W3C: W3C Standard. Property Description W3C charset Sets or returns the value of the charset attribute of a link Yes href Sets or returns the value of the href attribute of a link Yes hreflang Sets or returns the value of the hreflang attribute of a link Yes name Sets or returns the value of the name attribute of a read more..

  • Page - 236

    Learn JavaScript and Ajax with w3schools 222 Standard Properties, Methods, and Events The Area object also supports the standard properties, methods, and events. Base Object The Base object represents an HTML base element. The base element is used to specify a default address or a default target for all links on a page. For each tag in an HTML document, a Base object is read more..

  • Page - 237

    Appendix B: HTML DOM Objects 223 Standard Properties, Methods, and Events The Body object also supports the standard properties, methods, and events. Button Object (Push Button) The Button object represents a Button Object (Push Button). For each tag in an HTML document, a Button object is created. Inside an HTML Button element you can put content like text or images. This read more..

  • Page - 238

    Learn JavaScript and Ajax with w3schools 224 Form Object Properties Property Description W3C acceptCharset Sets or returns the value of the accept-charset attribute in a form Yes action Sets or returns the value of the action attribute in a form Yes enctype Sets or returns the value of the enctype attribute in a form Yes length Returns the number of elements in a form Yes method Sets read more..

  • Page - 239

    Appendix B: HTML DOM Objects 225 Frame/IFrame Object Properties W3C: W3C Standard. Property Description W3C align Sets or returns the value of the align attribute in an iframe Yes contentDocument Returns the document object generated by a frame/iframe Yes contentWindow Returns the window object generated by a frame/iframe No frameBorder Sets or returns the value of the frameborder attribute read more..

  • Page - 240

    Learn JavaScript and Ajax with w3schools 226 Frameset Object Events Event Description W3C onload Script to be run when a document loads Yes Standard Properties, Methods, and Events The Frameset object also supports the standard properties, methods, and events. Image Object The Image object represents an embedded image. For each tag in an HTML document, an Image object is created. read more..

  • Page - 241

    Appendix B: HTML DOM Objects 227 Image Object Events Event The event occurs when... W3C onabort Loading of an image is interrupted Yes onerror An error occurs when loading an image Yes onload An image is finished loading Yes Standard Properties, Methods, and Events The Image object also supports the standard properties, methods, and events. Button Object The Button object represents a read more..

  • Page - 242

    Learn JavaScript and Ajax with w3schools 228 Checkbox Object Properties W3C: W3C Standard. Property Description W3C alt Sets or returns an alternate text to display if a browser does not support check boxes Yes checked Sets or returns whether a check box should be checked Yes defaultChecked Returns the default value of the checked attribute Yes disabled Sets or returns whether a read more..

  • Page - 243

    Appendix B: HTML DOM Objects 229 FileUpload Object Methods Method Description W3C select() Selects the FileUpload object Yes Standard Properties, Methods, and Events The FileUpload object also supports the standard properties, methods, and events. Hidden Object The Hidden object represents a hidden input field in an HTML form. For each tag in an HTML form, a Hidden object is read more..

  • Page - 244

    Learn JavaScript and Ajax with w3schools 230 Password Object Properties W3C: W3C Standard. Property Description W3C alt Sets or returns an alternate text to display if a browser does not sup- port password fields Yes defaultValue Sets or returns the default value of a password field Yes disabled Sets or returns whether a password field should be disabled Yes form Returns a read more..

  • Page - 245

    Appendix B: HTML DOM Objects 231 Property Description W3C disabled Sets or returns whether a radio button should be disabled Yes form Returns a reference to the form that contains the radio button Yes name Sets or returns the name of a radio button Yes type Returns the type of form element a radio button is Yes value Sets or returns the value of the value attribute of the read more..

  • Page - 246

    Learn JavaScript and Ajax with w3schools 232 You can access a submit button by searching through the array of the form or by using . Submit Object Properties W3C: W3C Standard. Property Description W3C alt Sets or returns an alternate text to display if a browser does not sup- port submit buttons Yes disabled Sets or returns whether a submit button should be disabled read more..

  • Page - 247

    Appendix B: HTML DOM Objects 233 Text Object Methods Method Description W3C select() Selects the content of a text field Yes Standard Properties, Methods, and Events The Text object also supports the standard properties, methods, and events. Link Object The Link object represents an HTML link element. A link element defines the relationship between two linked documents. The link read more..

  • Page - 248

    Learn JavaScript and Ajax with w3schools 234 Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The tag always goes inside the head element. Meta Object Properties W3C: W3C Standard. Property Description W3C content Sets or returns the value of the content attribute of a <meta> element Yes httpEquiv read more..

  • Page - 249

    Appendix B: HTML DOM Objects 235 Property Description W3C height Sets or returns the height of the object Yes hspace Sets or returns the horizontal margin of the object Yes name Sets or returns the name of the object Yes standby Sets or returns a message when loading the object Yes type Sets or returns the content type for data downloaded via the data attribute Yes useMap Use read more..

  • Page - 250

    Learn JavaScript and Ajax with w3schools 236 Select Object The Select object represents a drop-down list in an HTML form. For each tag in an HTML form, a Select object is created. You can access a Select object by searching through the array of the form or by using . Select Object Collections W3C: W3C Standard. Collection Description W3C options[] Returns an array of all read more..

  • Page - 251

    Appendix B: HTML DOM Objects 237 Syntax for using the Style object properties: The Style object property categories are as follows: Background Border and Margin Layout List Misc Positioning Printing Table Text Background Properties W3C: W3C Standard. Property Description W3C background Sets all background properties Yes backgroundAttachment Sets whether a read more..

  • Page - 252

    Learn JavaScript and Ajax with w3schools 238 Property Description W3C borderColor Sets the color of all four borders (can have up to four colors) Yes borderLeft Sets all properties for the left border Yes borderLeftColor Sets the color of the left border Yes borderLeftStyle Sets the style of the left border Yes borderLeftWidth Sets the width of the left border Yes borderRight Sets all read more..

  • Page - 253

    Appendix B: HTML DOM Objects 239 Property Description W3C cssFloat Sets where an image or a text will appear (float) in another element Yes cursor Sets the type of cursor to be displayed Yes direction Sets the text direction of an element Yes display Sets how an element will be displayed Yes height Sets the height of an element Yes markerOffset Sets the distance between the read more..

  • Page - 254

    Learn JavaScript and Ajax with w3schools 240 Property Description W3C right Sets how far the right edge of an element is to the left/right of the right edge of the parent element Yes top Sets how far the top edge of an element is above/below the top edge of the parent element Yes zIndex Sets the stack order of an element Yes Printing Properties Property Description W3C orphans read more..

  • Page - 255

    Appendix B: HTML DOM Objects 241 Property Description W3C quotes Sets which quotation marks to use in text Yes textAlign Aligns the text Yes textDecoration Sets the decoration of text Yes textIndent Indents the first line of text Yes textShadow Sets the shadow effect of text Yes textTransform Sets capitalization effect on text Yes unicodeBidi Sets the Unicode bidirectional property Yes read more..

  • Page - 256

    Learn JavaScript and Ajax with w3schools 242 Table Object Methods Method Description W3C createCaption() Creates a caption element for a table Yes createTFoot() Creates an empty tFoot element in a table Yes createTHead() Creates an empty tHead element in a table Yes deleteCaption() Deletes the caption element and its content from a table Yes deleteRow() Deletes a row from a table Yes read more..

  • Page - 257

    Appendix B: HTML DOM Objects 243 TableRow Object The TableRow object represents an HTML table row. For each tag in an HTML document, a TableRow object is created. TableRow Object Collections W3C: W3C Standard. Collection Description W3C cells[] Returns an array containing each cell in the table row Yes TableRow Object Properties Property Description W3C align Sets or returns the read more..

  • Page - 258

    Learn JavaScript and Ajax with w3schools 244 Textarea Object Properties W3C: W3C Standard. Property Description W3C cols Sets or returns the width of a textarea Yes defaultValue Sets or returns the default text in a textarea Yes disabled Sets or returns whether a textarea should be disabled Yes form Returns a reference to the form that contains the textarea Yes name Sets or returns read more..

  • Page - 259

    245 INDEX \t, 74 ;, 17 */, 19 /*, 19 \&, 74 \\, 74 \', 74 \", 74 \b, 74 \f, 74 \n, 74 \r, 74 }, 17, 59 {, 17, 59 \ character, 73–75 (), functions, 59 - operator, 27 -- operator, 27 ! operator, 31 != operator, 30 % operator, 27 %= operator, 28 && operator , 31 * operator, 27 *= operator, 28 / operator, 27 /= operator, 28 || operator, 31 + operator, 27–28, 75 read more..

  • Page - 260

    246 Index ASP server page, AJAX, 180–182 assignment operators, 27–28 attributes, src, 15 backslash (\), 73–74 backspace character, 74–75 base-2 log of E constant, 110–111 base-10 log of E constant, 110–111 blocks, statements, 17–18, 21 <body> section functions, 58 scripts, 13–14 Boolean object, 107–109, 204 creation, 107–108 false values, 107 no values, 107 null, 107 true read more..

  • Page - 261

    247 Index direct instance, objects, 152–153 displaymessage() function, 59–60 document.cookie object, 130–131 document.write command, 2, 11–12 do...while loops, 43–45 dynamic text, 2 E constant, 110–111 ECMA International, 2–3 ECMAScript, 2–3 Eich, Brendan, 2 elements, arrays, 99–102, 105–106 adding, 100–101, 105–106 joining, 99–100 removing, 100–102 reversing order, 101 e-mail validation, read more..

  • Page - 262

    248 Index <head> section, 13–14 functions, 58 HTML, 1, 3 HTML DOM objects, 214–244 Anchor object, 220–221 Area object, 221–222 Base object, 222 Body object, 222–223 Button object (push button), 223 Button object, 227 Checkbox object, 227–228 Document object, 215–216 Element object, 218–220 Event object, 216–218 FileUpload object, 228–229 Form object, 223–224 Frame/IFrame object, read more..

  • Page - 263

    249 Index toUpperCase(), 80–81, 84–85 toUTCString(), 91–92 unshift(), 106 XMLHttpRequest, 166–167 Microsoft browsers, 2 min() method, 114 modifiers, RegExp object, 116–118, 210 mouseOut() function, 139 mouseOver() function, 139 multiline comments, 19–20 name cookie, 129–130 names, variables, 23–24 natural log of 2 constant, 110–111 natural log of 10 constant, 110–111 Navigator 2.0, 2 read more..

  • Page - 264

    250 Index Math object, 110–114, 206–207 constants, 110–111 creation errors, 110 floor() method, 111 max() method, 113 methods, 111 min() method, 114 random() method, 111–113 round() method, 111–112 methods, 151 Navigator object, 123–128 appName property, 124 appVersion property, 124 parseFloat() function, 124 properties, 124 userAganet property, 124 Number object, 207–208 properties, 151 RegExp read more..

  • Page - 265

    251 Index random links, 36 random() method, 111–113 redeclaring variables, 26 RegExp object, 115–120, 210–212 case-sensitive searches, 116–118 defined, 115–116 exec() method, 119–120 g modifier, 116–117 i modifier, 116 global searches, 117–118 modifiers, 116–118 pattern-matching functions, 115–116 patterns, 115–116 search-and-replace functions, 115–116 test() method, 118–119 regular read more..

  • Page - 266

    252 Index text, writing to Web pages, see also scripts, 9–12 browsers, 12 comment symbol, 12 comment tag, 12 document.write command, 11–12 <script> tag, 11–13, 15 </script> tag, 11–12 tags, 10–11 throw statement, 70–72 catch argument, 71 exceptions, 71 try...catch combination, 70 time, 88 timing events, 144–150 clearTimeout() method, 144, 149–150 setTimeout() method, 144–149 read more..

  • Page - 267

    There’s no faster, easier way to 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 fi nd read more..

Write Your Review