JavaScript (1)

1. JavaScript (1) Mohammed M. Hassoun

2. Head lines • Introduction • Using Variables • Functions • HTML Forms

3. JavaScript JavaScript came about as a joint effort between Netscape Communications Corporation and Sun Microsystems, Inc. It is an interpreted programming language with object-oriented(OO)capabilities. Syntactically , the core JavaScript language resembles C,C++, and Java , with programming constructs such as the if statement ,the while loop , and the && operator JavaScript Is Not Java One of the most common misconceptions about JavaScript is that it is a simplified version of Java , the programming language from Sun Microsystems. Other than an incomplete syntactic resemblance and the fact that both Java and JavaScript can provide executable content in web browsers , the two languages are entirely unrelated. The similarity of names is purely a marketing ploy by Netscape and Sun(the language was originally called LiveScript ; its name was changed to JavaScript at the last minute).

4. Which Version? At the time of this writing, the browsers recommended earlier in this chapter should support at least JavaScript 1.5. (The newest version of Firefox supports JavaScript 1.8.) You may also see or hear about JScript or ECMAScript. JScript is the version of JavaScript that Microsoft Internet Explorer uses (which has additional features because it is implemented as a Windows Script engine; it can use server-side languages to perform more complex tasks like updating databases). For more information on JScript, see http://msdn.microsoft.com/en-us/library/hbxc2t98.aspx. ECMAScript is the international standard name and specification for the JavaScript language, so it’s not a new language but a standard that is set for JavaScript and JScript. For more on ECMAScript, see www.ecma-international.org/publications/standards/Ecma-262.htm.

5. Remember, It’s Not Java JavaScript and Java are two different languages. Java is a full programming language that must be compiled (running a program through software that converts the higher-level code to machine language) before a program (often called a Java applet) can be executed. Java is more powerful but also more complex. JavaScript doesn’t need a compiler and is more lenient in a number of areas, such as syntax. Scripting Language A scripting language doesn’t require a program to be compiled before it is run. All the interpretation is done on-the-fly by the client. With a regular programming language, before you can run a program you have written, you must compile it using a special compiler to be sure there are no syntax errors. With a scripting language, the code is interpreted as it is loaded in the client. Thus, you can test the results of your code more quickly

6. Calling External Scripts Script tags are also useful if you wish to call an external JavaScript file in your document. An external JavaScript file is a text file that contains nothing but JavaScript code, and it is saved with the .js file extension. By calling an external file, you can save the time of coding or copying a long script into each page in which the script is needed. Instead, you can use a single line on each page that points to the JavaScript file with all of the code. You can call external scripts by adding an src (source) attribute to the opening script tag: <script type="text/javascript" src="yourfile.js"></script>

7. Using <noscript></noscript> Tags One way of providing alternate content for those viewers without JavaScript (or with JavaScript turned off) is to use the noscript tag. The <noscript></noscript> tags may be placed anywhere in the HTML document and can contain any content needed for those viewers browsing without JavaScript (such as viewers using mobile browsers like the ones on a Blackberry or iPhone). For example:

8. Inserting Comments on One Line If you want to add commentary on a single line in your code, place a pair of forward slashes before the text of the comment: // Your comment here Multiple line comments : Forward slash followed by an asterisk at the beginning of the comment, then the text of the comment, and then an asterisk followed by a forward slash at the end of the comment. Here’s an example: /* My script will write some text into my HTML document! All of this text is ignored by the browser. */

9. Using Variables

10. Declaring Variables To declare text as a variable, you use the var keyword, which tells the browser that the text to follow will be the name of a new variable: varvariablename; For example, to name your variable coolcar, the declaration looks like this: varcoolcar; In this example, you have a new variable with the name coolcar. The semicolon ends the statement. The variable coolcar does not have a value assigned to it yet. As described in the next section, you can give your new variable a value at the same time that you declare it or you can assign it a value later in your script. The code for giving a variable a name is simple, but there are some restrictions on words that you can use for variables and the cases of the letters. You’ll learn more about JavaScript naming rules after you see how to assign a value to a variable

11. Naming Variables Before you start naming your own variables, you need to be aware of JavaScript’s naming rules. The factors you need to consider when choosing names are case sensitivity, invalid characters, and the names that are reserved by JavaScript. Additionally, you should try to give your variables names that are both easy to remember and meaningful Using Allowed Characters An important rule to remember is that a variable name must begin with a letter or an underscore character ( _ ). The variable name cannot begin with a number or any other character that is not a letter (other than the underscore). The other characters in the variable name can be letters, numbers, or underscores. Blank spaces are not allowed in variable names. So, the following variable names would be valid: ● paycheck ● _paycheck ● pay2check ● pay_check ● pay_245

12. Variable Type Number Number variables are just that—numbers. JavaScript does not require numbers to be declared as integers, floating-point (decimal) numbers, or any other number type. String String variables are variables that represent a string of text. The string may contain letters, words, spaces, numbers, symbols, or most anything you like. Strings are defined in a slightly different way than numbers, using this format: varvariablename="stringtext"; Matching the Quotation Marks In JavaScript, you define strings by placing them inside quotation marks (quotes, for short), as you saw in the examples. JavaScript allows you to use either double quotes or single quotes to define a string value. The catch is that if the string is opened with double quotes, it must be closed with double quotes: varmycar="Red Corvette";

13. Using Special Characters Special characters enable you to add things to your strings that could not be added otherwise. For example, suppose that you need a tab character between each word in a string. If you press the TAB key on the keyboard, JavaScript will probably see it as a bunch of spaces. Instead, use the special character \t, which places a tab in the string, as in this example: varmypets="dog\tcat\tbird"; In each spot where the special character \t appears, JavaScript interprets a tab character. The special characters all begin with a backslash character (\). Thus, if you want a single backslash character in your string, you need to use the special code for a backslash: \\. For instance, suppose you wish to write the following sentence on a Web page: “Go to the directory c:\javascript on your computer.” If you use the string as it is written, your code would look like this:

14. The problem is that the single backslash would not be printed on the Web page. It would appear as Go to the directory c:javascript on your computer Unless the backslash is followed with the code for a special character, JavaScript prints the character after the slash as it appears (you will see this in the escape technique discussed in the next section). To fix this, use the \\ special code to print a single backslash on the page:

15. Boolean A Boolean variable is one with a value of true or false. Here are examples: varJohnCodes=true; varJohnIsCool=false; Notice that the words true and false do not need to be enclosed in quotes. This is because they are reserved words, which JavaScript recognizes as Boolean values. Instead of using the words true and false, JavaScript also allows you to use the number 1 for true and the number 0 for false.

16. Null Null means that the variable has no value. It is not a space, nor is it a zero; it is simply nothing. If you need to define a variable with a value of null, use a declaration like this: varvariablename=null; As with the Boolean variables, you do not need to enclose this value in quotation marks as you do with string values, because JavaScript recognizes null as a keyword with a predefined value (nothing). Adding Variables to Text Strings The preceding code just prints the value of the variable in the browser. If you want that variable to print along with some other text in a string, the document.write() command becomes more complex. The text string needs quotes around it if it has not been defined as a variable, and the variable needs to be on its own. You use the addition operator (+) to dd the value of the variable to the string, as shown in this example: <script type="text/javascript"> varmycar="Corvette"; document.write("I like driving my "+mycar); </script>

17. varheadingtext="<h1>A Page of JavaScript</h1>"; varmyintro="Hello, welcome to my JavaScript page!"; varlinktag="<a href=\"http://www.pageresource.com\">Link to a Site</a>"; varredtext="<span style=\"color:red\">I am so colorful today!</span>"; varbegineffect="<strong>"; varendeffect= "</strong>"; varbeginpara="<p>"; varendpara="</p>"; document.write(headingtext); document.write(begineffect+myintro+endeffect); document.write(beginpara); document.write(linktag); document.write(endpara); document.write(beginpara); document.write(redtext); document.write(endpara);

18. Functions

19. What a Function Is? A function is basically a little script within a larger script. Its purpose is to perform a single task or a series of tasks. What a function does depends on what code you place inside it. For instance, a function might write a line of text to the browser or calculate a numeric value and return that value to the main script.

20. In addition to returning a variable value, you can return a simple value or even nothing. All of the following would be valid return statements:

21. All of these return the control back to the first JavaScript statement after the function call. Returning nothing does this without sending back a value.You can also return an expression, such as the addition of numbers or strings (or any other expression you decide to build). The following would also be valid return statements: Calling Functions in Your Scripts A call to a function in JavaScript is simply the function name along with the set of parentheses (with or without parameters between the opening and closing parentheses), ending with a semicolon, like a normal JavaScript statement: functionname();

22. This example creates a function named show_message() to do the job of showing the alert. The alert will be shown only if you call the show_message() function somewhere after it is defined. In this case, the function is called right after its definition. The result is a small alert box with the message “This is an alert!”

23. Definition and Usage • The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute).The form-data can be sent as URL variables (with method="get") or as HTTP post (with method="post"). • Notes on the "get" method: • This method appends the form-data to the URL in name/value pairs • This method is useful for form submissions where a user want to bookmark the result. • There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred • Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar) • Notes on the "post" method: • This method sends the form-data as an HTTP post transaction • Form submissions with the "post" method cannot be bookmarked • The "post" method is more robust and secure than "get", and "post" does not have size limitations

25. Thank You