Introduction To Java Script

GS 3066: Introduction to JavaScript
JavaScript is used in millions of Web pages to improve the design, validate forms, and much more. JavaScript was developed by Netscape JavaScript is the most popular client-side scripting language on the Internet.
What is JavaScript?

JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language, which is a lightweight programming language A JavaScript is a collection of lines of executable computer code A JavaScript is usually embedded directly in HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license JavaScript is supported by all major browsers, like Netscape and Internet Explorer
What can a JavaScript Do?
JavaScript gives HTML designers a programming tool o HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! JavaScript can put dynamic text into an HTML page
o
A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write variable into an HTML page
JavaScript can react to events

o
A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements

o
A JavaScript can read and change the content of an HTML element
JavaScript can be used to validate data
A JavaScript can be used to validate form data before it is submitted to a server, this saves the server from extra processing
How to Put a JavaScript Into an HTML Page

<html> <body> <script type="text/javascript"> <!-document.write("Hello World!") //--> </script> </body> </html>
The code above will produce this output on an HTML page: Hello World!
Example Explained
To insert a script in an HTML page, we use the <script> tag. Use the type attribute to define the scripting language.
<script type="text/javascript">
Then the JavaScript starts: The JavaScript command for writing some output to a page is document.write
document.write("Hello World!")
Ending Statements With a Semicolon?

With traditional programming languages, like PHP, C++ and Java, each code statement has to end with a semicolon. Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.
How to Handle Older Browsers

Browsers that do not support scripts will display the script as page content. To prevent them from doing this, we may use the HTML comment tag:
<script type="text/javascript">
 </script>
The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. Note: You cannot put // in front of the first comment line (like // </script> </head>
Scripts in the body section:

Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.
<html> <head> </head> <body> <script type="text/javascript"> <!-some statements //--> </script> </body>
Scripts in both the body and the head section:
You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.
<html> <head> <script type="text/javascript"> <!-some statements //--> </script> </head> <body> <script type="text/javascript"> <!-some statements //--> </script> </body>
How to Run an External JavaScript

Sometimes you might want to run the same script on several pages, without writing the script on each and every page. To simplify this you can write a script in an external file, and save it with a .js file extension, like this:
document.write("This script is external")
Save the external file as xxx.js (the .js extension is not required, but it is convention to do so). The external files is simply a collection of JavaScript statements. It cannot contain the <script> tag. To reference the scripts within the external file, include a script tag at the appropriate location in your document (where you normally would write the script) and at a src attribute. The value of the src attribute is the location of the script file.
<html> <head> </head> <body> <script src="xxx.js"></script> </body> </html>
CGS 3066: JavaScript Guidelines
JavaScript is Case Sensitive

A function named "myfunction" is not the same as "myFunction". Therefore watch your capitalization when you create or call variables, objects and functions.
Symbols
Open symbols, like ( { [ " ', must have a matching closing symbol, like ' " ] } ).
White Space
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. These two lines mean exactly the same:
name = "Ryan" name="Ryan"
Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:
document.write("Hello \ World!")
Note: You can not break up a code line like this:
document.write \ ("Hello World!")
The example above will cause an error.
Insert \ Escape Special Characters

Special care must be used when putting special characters within a string. For example, the double quote mark typically starts or ends a quote. If, instead, you want a double quote mark inside of the quote, you must escape it. You can insert \ escape special characters (like " ' ; &) with the backslash:
document.write ("You \& I sing \"Happy Birthday\".")
The example above will produce this output:

You & I sing "Happy Birthday".
Common Escape Sequences double quote single quote newline form feed carraige return backslash tab \" \' \n \f \r \\ \t
Comments
You can add a comment to your JavaScript code starting the comment with two slashes "//":
sum = a + b //calculating the sum
You can also add a comment to the JavaScript code, starting the comment with "/*" and ending it with "*/"
sum = a + b /*calculating the sum*/
Using "/*" and "*/" is the only way to create a multi-line comment:
/* This is a comment block. It contains several lines*/
CGS 3066: JavaScript Debugging As you write JavaScript, you will invariably introduce bugs, or errors, in your script. There are several techniques to debug your script.
test as you write your codedo not write your entire script and then test it. Rather, write several lines of code, test it, and verify that it works as you expect. Doing so will allow you to find errors more quickly and correct them more easily. comment out codeif you are unable to determine where the bug is within your code, comment out sections of your code. In effect, you are disabling pieces of it. If you disable a piece and your script then works, you have just isolated where the bug is likely to reside. use netscape's javascript consoleNetscape has a built-in javascript console, which provides information on any errors in your script. To use the console, load the page within Netscape. After the page has loaded, enter "javascript:" in the address bar. Doing so will pop-up Netscape's JavaScript console (see image below).
use internet explorer's debuggerwith Internet Explorer's default settings, when a JavaScript error occurs in a page, a "Done" message, with an exclamation point, appears in the status bar (see lower-left of image). Clicking on "Done" pops-up a dialog box which describes the error (see image). If you want greater control over the reporting of errors, modify Internet Explorer's settings by clicking Tools - Internet Options Advanced; look for "Disable script debugging" and "Display a notification about every script"; uncheck "Disable script debugging" and check "Display a notification about every script".
The script below contains 2 errors. Try using both IE's debugger and Netscape's debugger to find the errors. The intent of the script is to output, via document.write(); , the statement, "hi there".
<script type="text/javascript"> <!-doucment.write("hi there!); //--> </script>
CGS 3066: JavaScript Variables

A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value.
Rules for Variable names:

Variable names are case sensitive They must begin with a letter or the underscore character "_"
Declare a Variable
You can create a variable with/without the var statement:
var strname = some value strname = some value
Assign a Value to a Variable

You assign a value to a variable like this:
var strname = "Chris" or like this: strname = "Chris"
The variable name is on the left side of the expression and the The value you want to assign to the variable is on the right.
Example:
<html> <body> <script type="text/javascript"> var name = "chris" document.write(name) document.write("<h1>"+name+"</h1>") </script> </body> </html>
chris
chri s
Lifetime of Variables
Variables declared within a function:

Can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared.
Variables declared outside a function:

All the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed
CGS 3066: JavaScript Operators Operators are used to operate on (manipulate) values/variables.
Arithmetic Operators
Operator + Addition Subtraction Description Example Suppose x=2 x+2 = 4 Suppose x=2
5-x = 3 * / % Multiplication Division Modulus (division remainder) Increment By One Decrement By One Suppose x=4 x*5 = 20 15/5 = 3 5/2 = 2.5 5%2 = 1 10%6 = 4 10%5 = 0 Suppose x=5 x++ = 6 Suppose x=5 x-- = 4
++ --
Note: the increment and decrement operators can either be used as a pre- or a post- operator. As a pre- operator, the increment or decrement is performed before whatever other operations are present within the given line of code. As a post-operator, the reverse is true: the line of code is executed as then the increment/decrement is performed. In other words: Post-Increment y = x++ is equivalent to y = x; x = x + 1; Pre-Increment y = ++x is equivalent to x = x + 1; y = x;
Example
Note that both i and j are initialized to 0. Also note that there value is outputted via a document.write() statement. However, the value of i is increased with a post-increment operator whereas the value of j is increased with the pre-increment operator.
var i = 0; document.write("<p>"); document.write("value of i: " + i++ + " (post-increment)<br />"); var j = 0; document.write("value of j: " + ++j + " (pre-increment)"); document.write("</p>");
Output
value of i: 0 (post-increment) value of j: 1 (pre-increment)
Assignment Operators
Operator = += -= *= /= %= x=y x += y
Example x=y x=x+y
Is The Same As
x -= y +12 x *= 3 + y x /= y x %= y
x = x - (y + 12) x = x * (3 + y) x=x/y x=x%y
Note that in the third and fourth examples, parentheses have been added to illustrate the grouping of the expression. Recall that x * (3 + y) is not necessarily equal to x*3+y
Comparison Operators
Operator == != > < >= <= Description is equal to is not equal is greater than is less than is less than or equal to Example 5 == 8 returns false 5 != 8 returns true 5 > 8 returns false 5 < 8 returns true 5 <= 8 returns true
is greater than or equal to 5 >= 8 returns false
Logical Operators
Operator && and Description Example Suppose x=6; y=3 (x < 10 && y > 1) returns true (x < 10 && y < 1) returns false (x > 10 && y > 1) returns false (x > 10 && y < 1) returns false
In order for the logical operator "and" to return true, all expressions, that are being and'ed together must be true. || or Suppose x=6; y=3 (x < 10 || y > 1) returns true (x < 10 || y < 1) returns true (x > 10 || y > 1) returns true (x > 10 || y < 1) returns false
In order for the logical operator "or" to return true, any of the expressions, that are being or'ed together must be true.
not
Suppose x=6; y=3 !(x == y) returns true !(x > y) returns false
The not operator simply inverses the truth value of the expression to which it is being applied.
String Concatenation Operator

A string is most often text, for example "Hello World!". To concatenate (stick together) two or more string variables, use the + operator.
txt1 = "What a very" txt2 = "nice day!" txt3 = txt1 + txt2
The variable txt3 now contains "What a verynice day!". Notice that there is no space between "very" and "nice"; this is because there is no space at the end of "What a very" or at the beginning of "nice day!". To add a space between two string variables, either:
txt1 txt2 txt3 or txt1 txt2 txt3
Insert a space into the expression Insert a space into one of the strings.
= "What a very" = "nice day!" = txt1 + " " + txt2 = "What a very " = "nice day!" = txt1+txt2
The variable txt3 now contains "What a very nice day!"
CGS 3066: Conditional Statements
Conditional statements in JavaScript are used to perform different actions based on different conditions. In JavaScript we have three conditional statements:
o o
if statement - used to execute a set of code only when a condition is true. if...else statement - used to execute one of two blocks of code. The important distinction, when compared to the if statement, is that one of two blocks is guarenteed to execute. switch statement - used to select one of many blocks of code to execute.
If and If...else Statement
You should use the if statement if you want to execute some code if a condition is true.
Syntax
if (condition) { code to be executed if condition is true }
Example
<script type="text/javascript"> var num = window.prompt("Grade:", 0); var grade = parseInt(num); if (grade < 70) { document.write("<b>You Failed</b>") } </script>
Notice that there is no ..else.. in this syntax. You just tell the browser to execute some code if the condition is true. If you want to execute some code if a condition is true and another code if a condition is false, use the if....else statement.
Syntax
if (condition) { code to be executed if condition is true } else { code to be executed if condition is false }
Example
<script type="text/javascript"> var num = window.prompt("Grade:", 0); var grade = parseInt(num); if (grade < 70) { document.write("You Failed!") } else {
document.write("You Passed!") document.write("<br />I said you passed!") } </script>
<html> <body> <script type="text/javascript"> var num = window.prompt("Grade:", 0); grade = parseInt(num); if (grade > 90) { document.write("A") } else if (grade > 80) { document.write("B") } else if (grade > 70) { document.write("C") } else if (grade > 60) { document.write("D") } else { document.write("F") } </script> </body> </html>
Switch Statement
You should use the switch statement if you want to select one of many blocks of code to be executed.
Syntax
switch (expression) { case label1:
code to be executed if expression = label1 break case label2: code to be executed if expression = label2 break default: code to be executed if expression is different from both label1 and label2
This is how it works:

First we have a single expression (most often a variable), that is evaluated once. It can evaluate to a character, string, number, or boolean (true/false). The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed as well as any code, in any of the other case statements that follow unless a break statement is used.
o o
Use the break to prevent the code from running into the next case automatically. This may seem odd, but it can be helpful. See the example below. Notice that the case 6 statement does not use a break. So, if it is either case 6 or case 0 (Saturday or Sunday), the same block of code executes.
Example
<script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d = new Date() theDay = d.getDay() switch (theDay) { case 3: document.write("Woeful Wednesday") break case 4: document.write("Thirsty Thursday") break case 5: document.write("Finally Friday") break case 6: case 0: document.write("Wacky Weekend") break default: document.write("What day is it?") } </script>
Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. It is very similar to an if...else statement, but written in a shorthand form. It, also, is designed to assign a variable a value whereas the if...else statement wider uses.
Syntax
variablename = (condition) ? value1 : value2
Example
greeting = (visitor == "PRESIDENT")? "Dear President " : "Dear "
If the variable visitor is equal to PRESIDENT, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRESIDENT, then put the string "Dear " into the variable named greeting.
CGS 3066: JavaScript Loops Looping statements in JavaScript are used to execute the same block of code a specified number of times. In JavaScript we have the following loop types:
while - evaluates a condition and loops through a block of code while the condition remains true; considered a pretest loop because the condition is tested and then, if appropriate, the loop is executed. do...while - also loops through a block of code while a condition is true; however, it executes the loop and then evaluates a condition. Very similar to a while loop except that the loop will run at least once whereas a while loop may never be executed. This style of loop, where the condition is evaluated after the body of the loop, is a posttest loop. for - a loop best suited to run a block of statements a specific number of times.
while
The while statement will execute a block of code while a condition is true..
while (condition) { code to be executed }
do...while
The do...while statement will execute a block of code once, and then it will repeat the loop while a condition is true
do {
code to be executed } while (condition)
for
The for statement will execute a block of code a specified number of times
for (initialization; condition; increment) { code to be executed }
Example of a while loop:

<html> <body> <script type="text/javascript"> i = 0 while (i <= 5) { document.write("The number is " + i) document.write("<br />") i++ } </script> <p>Explanation:</p>
<p><b>i</b> equal to 0.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html>
Output:
The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: i equal to 0. While i is less than , or equal to, 5, the loop will continue to run. i will increase by 1 each time the loop runs.
Example of a do...while loop:

<html> <body> <script type="text/javascript"> i = 0 do { document.write("The number is " + i) document.write("<br />") i++ } while (i <= 5) </script> <p>Explanation:</p> <p><b>i</b> equal to 0.</p> <p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> </body> </html>
Output:
The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: i equal to 0. The loop will run i will increase by 1 each time the loop runs. While i is less than , or equal to, 5, the loop will continue to run.
Example of a for loop:

<html> <body> <script type="text/javascript"> for (i = 0; i <= 5; i++) { document.write("The number is " + i) document.write("<br />") } </script> <p>Explanation:</p> <p>The for loop sets <b>i</b> equal to 0.</p> <p>As long as <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html>
Output:
The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: The for loop sets i equal to 0. As long as i is less than , or equal to, 5, the loop will continue to run. i will increase by 1 each time the loop runs.
CGS 3066: JavaScript Arrays

An Array object is used to store a set of values in a single variable name. Each value is an element of the array and has an associated index number. You can refer to a particular element in the array by using the name of the array and the index number. The index number starts at zero.
You create an instance of the Array object with the "new" keyword. A conceptual representation of a 10-cell array looks like the following. Note that the first cell is referenced by index zero.
var family_names=new Array(5)
The expected number of elements goes inside the parentheses, in this case 5. You assign data to each of the elements in the array like this:
family_names[0]="Tom" family_names[1]="Janit" family_names[2]="Stale" family_names[3]="Marcus" family_names[4]="Jim"
And the data can be retrieved from any element by using the index of the particular array element you want. Like this:
mother=family_names[0] father=family_names[1]
Example:
<html> <body> <script type="text/javascript"> var famname = new Array(6) famname[0] = "David Gaitros" famname[1] = "Tammy" famname[2] = "Hanson" famname[3] = "Stale" famname[4] = "Jim" famname[5] = "Bush, G" var ages = [20, 21, 22, 23, 24, 25] for (i=0; i<6; i++) { document.write(famname[i] + " " + ages[i] + "<br>") } </script>
</body> </html>
Output:
David Gaitros 20 Tammy 21 Hanson 22 Stale 23 Jim 24 Bush, G 25 The Array object's has several properties/methods. The most commonly used are described below. In particular, the length property used very frequently. Using the length property and a for-loop, you can step through each element of the array and perform some task on each element. See example below. Methods/Properties length Explanation Returns the number of elements in an array. This property is assigned a value when an array is created
concat(arrayName) Returns an array concatenated of two arrays. It takes 1 parameter, the name of the array to be concatenated to the array whose concat method is being invoked. join(separator) The join method is used to join all the elements of an array into a single string separated by a specified string separator (if none is specified, the default is a comma). Returns the array reversed Returns a specified part of the array. The method takes 2 numbers as parameters. start is the start index of where, in the original array, to begin the slice. The array is then sliced upto, but not including, the index end. Note that end is optional; if it is not included then the default is the very last element. Returns a sorted array. By default, the array will be sorted lexicographically. I.e., "apple" comes before "orange". Note that 50, 10, 2, 300 would be sorted as 10, 2, 300, 50. To sort in some other manner, you must define a sortFunction which dictates the sort order.
reverse() slice(start, end)
sort(sortFunction)
Examples
Length:
words = new Array("limit","lines","finish","complete","In","Out") document.writeln("array length is: " + words.length); for (i = 0; i < words.length; i++) { document.write("The value in cell with index = " + i + " is \"" + words[i] + "<br/>"); } array length is: 6 The value in cell with The value in cell with The value in cell with The value in cell with The value in cell with The value in cell with Join: words = new Array("limit","lines","finish","complete","In","Out") var jwords = words.join(";") The value of the string jwords is: limit;lines;finish;complete;In;Out Reverse: words = new Array("limit","lines","finish","complete","In","Out") words.reverse() The array, "words", will be ordered as: Out, In, complete, finish, lines, limit Concat: var array1 = [1, 2, 3, 4]; var array2 = [5, 6, 7, 8]; var array3 = array1.concat(array2); document.writeln("array3 length is: " + array3.length); for (i = 0; i < array3.length; i++) { document.write(array3[i]); } Output: array3 length is: 8 1 2 3 4 5 6 7 8 Slice:
index index index index index index
= = = = = =
0 1 2 3 4 5
is is is is is is
limit lines finish complete In Out
var array1 = [1, 2, 3, 4, 5, 6, 7]; var array3 = array1.slice(3, 6); document.write("array3 length = " + array3.length); document.write(array3[0] + " " + array3[1]); Output: array3 length = 3 4 5 Sort: array6 = new Array("Red","Blue","Green") array5 = new Array(50,10,2,300) function compareNum(a,b) { return a-b } document.write("Sorted: " + array6.sort()) document.write("<br/><br/>") document.write("Sorted without compareNum: " + array5.sort()) document.write("<br/><br/>") document.write("Sorted with compareNum: " + array5.sort(compareNum)) Output: Sorted: Blue,Green,Red Sorted without compareNum: 10,2,300,50 Sorted with compareNum: 2,10,50,300
CGS 3066: JavaScript Functions
A function contains code which is executed when triggered by an event or a call to that function.
A function is a set of statements. You can reuse a function within the same script or even in separate documents. Functions are typically defined at the beginning of a file, in the head section, and called later in the document - either in the head section or the body section. By placing functions in the head section of the document, you make sure that all the code in the function has been loaded before the function is called.
How to Define a Function

To create a function, define:
Its name. The name may be anything so long as it begins with a letter or the underscore. The name is followed immediately by a pair of parentheses. If your function has parameters, you list the parentheses within the parentheses. Parameters are simply variables and provide a means for information to be passed to the function. For example, you might have a function that calculates the square root of a number. The function would likely have one parameter - a parameter to hold the value that you to know its square root. Statements that compose the body of the function. Note the use of the keyword "return". The purpose of this keyword is described below. Parameters are optional. A return statement also is optional.
function myfunction(argument1,argument2,etc) { some statements return }
A function with no arguments must include the parentheses.

function myfunction() { some statements }
How to Call a Function

A function is not executed until it is called. You may either call the function within a JavaScript block or you may call within an HTML block by using an event handler or a link. Regardless, the actual function call (with/without arguments), is simply the name of the function (and any arguments).
myfunction() or with arguments: myfunction(argument1,argument2,etc)
Examples of function calls

1. Within a JavaScript block The example below is a call to JavaScript's built-in window.alert function to alert the user. Note that, in this instance, the function is more properly referred to as a method. A method can be thought of as a function of an object. Here, it is the alert method of the window object.
<script type="text/javascript"> window.alert("This is a message") </script>
2. Via an event handler Event handlers will be discussed in greater depth during the description of DHTML. In brief, they are JavaScript code that is not added inside the <script> tags, but rather inside the html tags. They cause JavaScript code to be executed when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. The basic syntax of these event handlers is: name_of_handler="JavaScript code here" In the example below, the onclick event handler is used to call the function named "myfunction()".
<html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO") } </script> </head> <body> <form action=""> <input type="button" onclick="myfunction()" value="Call function" /> </form> <p>By pressing the button, a function will be called. The function will alert a message.</p>
</body> </html>
3. Via a href link You also may invoke a JavaScript function via a link. The form of the link is as follows: <a href="javascript: JavaScript Code Here">Launch some javascript code</a>
<html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO") } function myotherfunction() { alert("GOODBYE") } </script> </head> <body> <p><a href="javascript: myfunction(); myotherfunction(); alert('wasn\'t that fun?')">Launch some javascript code</a></p> </body> </html>
Launch some javascript code. Note that multiple statements can be included. However, each statement must be separated by a semicolon. Also note that you have to be mindful of the quotation marks. In this case, the JavaScript code is contained within a pair of double quotes. Therefore, any quotation marks in the JavaScript code must either be single quotes or must be escaped double quotes in order to not conflict with the double quotes that encapsulate the entire JavaScript block. Look at the example above; note the semicolons between statements and note the use of single quotes in the JavaScript block.
The return Statement

Functions that will return a result use the "return" statement to do so. This statement specifies the value which will be returned. It is returned to whatever called the function in the first place.
Say you have a function that returns the sum of two numbers:
function total(a, b) { result = a + b return result }
When you call this function, you must send two arguments with it:
sum = total(2,3)
The returned value from the function (in this case, 5) will be stored in the variable called sum.
<html> <head> <script type="text/javascript"> function total(numberA, numberB) { return numberA + numberB } </script> </head> <body> <script type="text/javascript"> document.write("the sum of 2, 3 is: ") document.write(total(2,3)) document.write("<br />") </script> </body> </html>
the sum of 2, 3 is: 5

Introduction To Java Script

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduction To Java Script

Transféré par

Droits d'auteur :

Formats disponibles

GS 3066: Introduction to JavaScript

What can a JavaScript Do?

JavaScript can react to events

JavaScript can read and write HTML elements

A JavaScript can read and change the content of an HTML element

JavaScript can be used to validate data

How to Put a JavaScript Into an HTML Page

Ending Statements With a Semicolon?

How to Handle Older Browsers

some statements //--> </script>

Where to Put the JavaScript

Scripts in the head section:

<html> <head> <script type="text/javascript"> <!-some statements //--> </script> </head>

Scripts in the body section:

Scripts in both the body and the head section:

How to Run an External JavaScript

document.write("This script is external")

CGS 3066: JavaScript Guidelines

JavaScript is Case Sensitive

Break up a Code Line

Note: You can not break up a code line like this:

document.write \ ("Hello World!")

The example above will cause an error.

Insert \ Escape Special Characters

The example above will produce this output:

/* This is a comment block. It contains several lines*/

<script type="text/javascript"> <!-doucment.write("hi there!); //--> </script>

CGS 3066: JavaScript Variables

Rules for Variable names:

var strname = some value strname = some value

Assign a Value to a Variable

Variables declared within a function:

Variables declared outside a function:

Example x=y x=x+y

x = x - (y + 12) x = x * (3 + y) x=x/y x=x%y

is greater than or equal to 5 >= 8 returns false

String Concatenation Operator

txt1 = "What a very" txt2 = "nice day!" txt3 = txt1 + txt2

The variable txt3 now contains "What a very nice day!"

CGS 3066: Conditional Statements

If and If...else Statement

document.write("You Passed!") document.write("<br />I said you passed!") } </script>

This is how it works:

code to be executed } while (condition)

Example of a while loop:

Example of a do...while loop:

Example of a for loop:

CGS 3066: JavaScript Arrays

var family_names=new Array(5)

family_names[0]="Tom" family_names[1]="Janit" family_names[2]="Stale" family_names[3]="Marcus" family_names[4]="Jim"

reverse() slice(start, end)

index index index index index index

limit lines finish complete In Out

CGS 3066: JavaScript Functions

How to Define a Function

function myfunction(argument1,argument2,etc) { some statements return }

A function with no arguments must include the parentheses.

How to Call a Function

myfunction() or with arguments: myfunction(argument1,argument2,etc)

Examples of function calls

The return Statement

function total(a, b) { result = a + b return result }