JavaScript (1)

Mohammed M. Hassoun

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

JavaScriptJavaScript 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 JavaOne 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).

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.

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

Calling External ScriptsScript 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>

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:

Inserting Comments on One LineIf 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. */

Using Variables

Declaring VariablesTo 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:var variablename;For example, to name your variable coolcar, the declaration looks like this:var coolcar;

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

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 CharactersAn 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

Variable Type

NumberNumber variables are just that—numbers. JavaScript does not

require numbers to be declared as integers, floating-point (decimal) numbers, or any other number type.

StringString 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:var variablename="stringtext";

Matching the Quotation MarksIn 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:var mycar="Red Corvette";

Using Special CharactersSpecial 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:var mypets="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:

The problem is that the single backslash would not be printed on the Web page. It would appear asGo to the directory c:javascript on your computerUnless 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:

BooleanA Boolean variable is one with a value of true or false. Here are examples:

var JohnCodes=true; var JohnIsCool=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.

NullNull 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:var variablename=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 StringsThe 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"> var mycar="Corvette"; document.write("I like driving my "+mycar); </script>

var headingtext="<h1>A Page of JavaScript</h1>"; var myintro="Hello, welcome to my JavaScript page!"; var linktag="<a href=\"http://www.pageresource.com\">Link to a Site</a>"; var redtext="<span style=\"color:red\">I am so colorful today!</span>"; var begineffect="<strong>"; var endeffect= "</strong>"; var beginpara="<p>"; var endpara="</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);

Functions

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.

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:

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 ScriptsA 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();

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!”

Definition and UsageThe 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

Thank You