JavaScripts in HTML must be inserted between <script> and </ script> tags.
|
|
|
- Jeffry Augustus Miles
- 8 years ago
- Views:
Transcription
1 JavaScripts in HTML must be inserted between <script> and </ script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. <script> alert("my First JavaScript"); </script> <script> document.write("<h1>this is a heading</h1>"); document.write("<p>this is a paragraph</p>"); </script> <!DOCTYPE html> <html> <head> <script> function myfunction() document.getelementbyid("demo").innerhtml="my First JavaScript Function"; </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</ button> </body> </html>
2 <!DOCTYPE html> <html> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</ button> <script> function myfunction() document.getelementbyid("demo").innerhtml="my First JavaScript Function"; </script> </body> </html> Scripts can also be placed in external files. External files often contain code to be used by several different web pages. External JavaScript files have the file extension.js. To use an external script, point to the.js file in the "src" attribute of the <script> tag: <!DOCTYPE html> <html> <body> <script src="myscript.js"></script> </body> </html>
3 Manipulating HTML Elements To access an HTML element from JavaScript, you can use the document.getelementbyid(id) method. Use the "id" attribute to identify the HTML element: <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <p id="demo">my First Paragraph</p> <script> document.getelementbyid("demo").innerhtml="my First JavaScript"; </script> </body> </html> The JavaScript is executed by the web browser. In this case, the browser will access the HTML element with id="demo", and replace its content (innerhtml) with "My First JavaScript".
4 Writing to The Document Output The example below writes a <p> element directly into the HTML document output: <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <script> document.write("<p>my First JavaScript</p>"); </script> </body> </html>
5 Warning Use document.write() only to write directly into the document output. If you execute document.write after the document has finished loading, the entire HTML page will be overwritten: <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <p>my First Paragraph.</p> <button onclick="myfunction()">try it</button> <script> function myfunction() document.write("oops! The document disappeared!"); </script> </body> </html> JavaScript Statements JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element with id="demo": document.getelementbyid("demo").innerhtml="hello Dolly";
6 Semicolon ; Semicolon separates JavaScript statements. Normally you add a semicolon at the end of each executable statement. JavaScript Code Blocks JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket, and end with a right curly bracket. The purpose of a block is to make the sequence of statements execute together. A good example of statements grouped together in blocks, are JavaScript functions. This example will run a function that will manipulate two HTML elements: function myfunction() document.getelementbyid("demo").innerhtml="hello Dolly"; document.getelementbyid("mydiv").innerhtml="how are you?"; JavaScript is Case Sensitive
7 White Space JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent: var person="hege"; var person = "Hege"; 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!"); However, you cannot break up a code line like this: document.write \ ("Hello World!");
8 JavaScript Comments Comments will not be executed by JavaScript. Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. The following example uses single line comments to explain the code: // Write to a heading: document.getelementbyid("myh1").innerhtml="welcome to my Homepage"; // Write to a paragraph: document.getelementbyid("myp").innerhtml="this is my first paragraph."; JavaScript Multi-Line Comments Multi line comments start with /* and end with */. The following example uses a multi line comment to explain the code: /* The code below will write to a heading and to a paragraph, and will represent the start of my homepage: */ document.getelementbyid("myh1").innerhtml="welcome to my Homepage"; document.getelementbyid("myp").innerhtml="this is my first paragraph.";
9 JavaScript Variables As with algebra, JavaScript variables can be used to hold values (x=5) or expressions (z=x+y). Variable can have short names (like x and y) or more descriptive names (age, sum, totalvolume). Variable names must begin with a letter Variable names can also begin with $ and _ (but we will not use it) Variable names are case sensitive (y and Y are different variables) JavaScript Data Types JavaScript variables can also hold other types of data, like text values (person="john Doe"). In JavaScript a text like "John Doe" is called a string. There are many types of JavaScript variables, but for now, just think of numbers and strings. When you assign a text value to a variable, put double or single quotes around the value. When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.
10 Declaring (Creating) JavaScript Variables Creating a variable in JavaScript is most often referred to as "declaring" a variable. You declare JavaScript variables with the var keyword: var carname; After the declaration, the variable is empty (it has no value). To assign a value to the variable, use the equal sign: carname="volvo"; However, you can also assign a value to the variable when you declare it: var carname="volvo"; In the example below we create a variable called carname, assigns the value "Volvo" to it, and put the value inside the HTML paragraph with id="demo": <p id="demo"></p> var carname="volvo"; document.getelementbyid("demo").innerhtml=carname; One Statement, Many Variables You can declare many variables in one statement. Just start the statement with var and separate the variables by comma: var lastname="doe", age=30, job="carpenter"; Your declaration can also span multiple lines: var lastname="doe", age=30, job="carpenter";
11 Value = undefined In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. Variable declared without a value will have the value undefined. The variable carname will have the value undefined after the execution of the following statement: var carname; Re-Declaring JavaScript Variables If you re-declare a JavaScript variable, it will not lose its value:. The value of the variable carname will still have the value "Volvo" after the execution of the following two statements: var carname="volvo"; var carname; JavaScript Arithmetic As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +: y=5; x=y+2;
12 JavaScript Has Dynamic Types JavaScript has dynamic types. This means that the same variable can be used as different types: var x; var x = 5; var x = "John"; // Now x is undefined // Now x is a Number // Now x is a String JavaScript Strings A string is a variable which stores a series of characters like "John Doe". A string can be any text inside quotes. You can use single or double quotes: var carname="volvo XC60"; var carname='volvo XC60'; You can use quotes inside a string, as long as they don't match the quotes surrounding the string: var answer="it's alright"; var answer="he is called 'Johnny'"; var answer='he is called "Johnny"'; JavaScript Numbers JavaScript has only one type of numbers. Numbers can be written with, or without decimals: var x1=34.00; var x2=34; //Written with decimals //Written without decimals
13 Extra large or extra small numbers can be written with scientific (exponential) notation: var y=123e5; // var z=123e-5; // JavaScript Booleans Booleans can only have two values: true or false. var x=true; var y=false; JavaScript Arrays The following code creates an Array called cars: var cars=new Array(); cars[0]="saab"; cars[1]="volvo"; cars[2]="bmw"; or (condensed array): var cars=new Array("Saab","Volvo","BMW"); or (literal array): var cars=["saab","volvo","bmw"]; Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
![var x=true; var y=false; JavaScript Arrays The following code creates an Array called cars: var cars=new Array(); cars[0]="saab";](/docs-images/45/10688457/images/page_13.jpg "cars[1]=\"volvo\"; cars[2]=\"bmw\"; or (condensed array): var cars=new Array(\"Saab\",\"Volvo\",\"BMW\"); or (literal array): var")
14 JavaScript Objects An object is delimited by curly braces. Inside the braces the object's properties are defined as name and value pairs (name : value). The properties are separated by commas: var person=firstname:"john", lastname:"doe", id:5566; The object (person) in the example above has 3 properties: firstname, lastname, and id. Spaces and line breaks are not important. Your declaration can span multiple lines: var person= firstname : "John", lastname : "Doe", id : 5566 ; You can address the object properties in two ways: name=person.lastname; name=person["lastname"]; Undefined and Null Undefined is the value of a variable with no value. Variables can be emptied by setting the value to null; cars=null; person=null;
15 Declaring Variable Types When you declare a new variable, you can declare its type using the "new" keyword: var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; Properties and Methods Properties are values associated with an object. Methods are actions that can be performed on objects. A Real Life Object. A Car: Properties: car.name=fiat car.model=500 car.weight=850kg Methods: car.start() car.drive() car.brake() car.color=white The properties of the car include name, model, weight, color, etc. All cars have these properties, but the values of those properties differ from car to car.
16 The methods of the car could be start(), drive(), brake(), etc. All cars have these methods, but they are performed at different times. Objects in JavaScript: In JavaScript, objects are data (variables), with properties and methods. When you declare a JavaScript variable like this: var txt = "Hello"; You actually create a JavaScript String object. The String object has a built-in property called length. For the string above, length has the value 5. The String object also have several built-in methods. Properties: txt.length=5 "Hello" Methods: txt.indexof() txt.replace() txt.search()
17 Creating JavaScript Objects Almost "everything" in JavaScript is an object. Strings, Dates, Arrays, Functions. You can also create your own objects. This example creates an object called "person", and adds four properties to it: person=new Object(); person.firstname="john"; person.lastname="doe"; person.age=50; person.eyecolor="blue"; Accessing Object Properties The syntax for accessing the property of an object is: objectname.propertyname This example uses the length property of the String object to find the length of a string: var message="hello World!"; var x=message.length; The value of x, after execution of the code above will be: 12
18 Accessing Object Methods You can call a method with the following syntax: objectname.methodname() This example uses the touppercase() method of the String object, to convert a text to uppercase: var message="hello world!"; var x=message.touppercase(); The value of x, after execution of the code above will be: HELLO WORLD! JavaScript Function Syntax A function is written as a code block (inside curly braces), preceded by the function keyword: function functionname() some code to be executed The code inside the function will be executed when "someone" calls the function. The function can be called directly when an event occurs (like when a user clicks a button), and it can be called from "anywhere" by JavaScript code.
19 Calling a Function with Arguments When you call a function, you can pass along some values to it, these values are called arguments or parameters. These arguments can be used inside the function. You can send as many arguments as you like, separated by commas (,) myfunction(argument1,argument2) Declare the argument, as variables, when you declare the function: function myfunction(var1,var2) some code The variables and the arguments must be in the expected order. The first variable is given the value of the first passed argument etc. <button onclick="myfunction('harry Potter','Wizard')">Try it</button> <script> function myfunction(name,job) alert("welcome " + name + ", the " + job); </script>
20 Functions With a Return Value Sometimes you want your function to return a value back to where the call was made. This is possible by using the return statement. When using the return statement, the function will stop executing, and return the specified value. Syntax function myfunction() var x=5; return x; The function above will return the value 5. Note: It is not the entire JavaScript that will stop executing, only the function. JavaScript will continue executing code, where the function-call was made from. The function-call will be replaced with the returnvalue: var myvar=myfunction(); The variable myvar holds the value 5, which is what the function "myfunction()" returns. You can also use the returnvalue without storing it as a variable: document.getelementbyid("demo").innerhtml=myfunction(); The innerhtml of the "demo" element will be 5, which is what the function "myfunction()" returns. You can make a returnvalue based on arguments passed into the function:
21 Calculate the product of two numbers, and return the result: function myfunction(a,b) return a*b; document.getelementbyid("demo").innerhtml=myfunction(4, 3); The innerhtml of the "demo" element will be: 12 The return statement is also used when you simply want to exit a function. The return value is optional: function myfunction(a,b) if (a>b) return; x=a+b The function above will exit the function if a>b, and will not calculate the sum of a and b.
22 Local JavaScript Variables A variable declared (using var) within a JavaScript function becomes LOCAL and can only be accessed from within that function. (the variable has local scope). You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared. Local variables are deleted as soon as the function is completed. Global JavaScript Variables Variables declared outside a function, become GLOBAL, and all scripts and functions on the web page can access it. The Lifetime of JavaScript Variables The lifetime JavaScript variables starts when they are declared. Local variables are deleted when the function is completed. Global variables are deleted when you close the page. Assigning Values to Undeclared JavaScript Variables If you assign a value to variable that has not yet been declared, the variable will automatically be declared as a GLOBAL variable.
23 This statement: carname="volvo"; will declare the variable carname as a global variable, even if it is executed inside a function. JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators: Operat or Description Result of x Result of y + Addition x=y Subtraction x=y * Multiplicatio n x=y* / Division x=y/ % Modulus (division remainder) x=y% Increment x=++y 6 6 x=y Decrement x=--y 4 4
24 -- Decrement x=y JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators: Operato r 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 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 The + Operator Used on Strings The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator.
25 txt1="what a very"; txt2="nice day"; txt3=txt1+txt2; The result of txt3 will be: What a verynice day To add a space between the two strings, insert a space into one of the strings: txt1="what a very "; txt2="nice day"; txt3=txt1+txt2; The result of txt3 will be: What a very nice day or insert a space into the expression: txt1="what a very"; txt2="nice day"; txt3=txt1+" "+txt2; The result of txt3 will be: What a very nice day Adding Strings and Numbers Adding two numbers, will return the sum, but adding a number and a string will return a string: x=5+5;
26 y="5"+5; z="hello"+5; The result of x,y, and z will be: Hello5 Comparison Operators Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators: Operator Description Comparing Returns == is equal to x==8 FALSE == is exactly equal to (value and type) x==5 x==="5" x===5 TRUE FALSE TRUE!= is not equal x!=8 TRUE!== is not equal (neither value nor type) x!=="5" x!==5 TRUE FALSE
27 > is greater than x>8 FALSE < is less than x<8 TRUE >= is greater than or equal to <= is less than or equal to x>=8 x<=8 FALSE TRUE How Can it be Used Comparison operators can be used in conditional statements to compare values and take action depending on the result: if (age<18) x="too young"; You will learn more about the use of conditional statements in the next chapter of this tutorial. Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators: Operator Description && and (x < 10 && y > 1) is true or (x==5 y==5) is false
28 ! not!(x==y) is true Conditional Operator JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax variablename=(condition)?value1:value2 If the variable age is a value below 18, the value of the variable voteable will be "Too young, otherwise the value of voteable will be "Old enough": voteable=(age<18)?"too young":"old enough"; Conditional Statements Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements: if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false if...else if...else statement - use this statement to select one of many blocks of code to be executed
29 switch statement - use this statement to select one of many blocks of code to be executed If Statement Use the if statement to execute some code only if a specified condition is true. Syntax if (condition) code to be executed if condition is true Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error! Make a "Good day" greeting if the time is less than 20:00: if (time<20) x="good day"; The result of x will be: Notice that there is no..else.. in this syntax. You tell the browser to execute some code only if the specified condition is true. If...else Statement Use the if...else statement to execute some code if a condition is true and another code if the condition is not true. Syntax
30 if (condition) code to be executed if condition is true else code to be executed if condition is not true If the time is less than 20:00, you will get a "Good day" greeting, otherwise you will get a "Good evening" greeting if (time<20) x="good day"; else x="good evening"; The result of x will be: Good evening If...else if...else Statement Use the if...else if...else statement to select one of several blocks of code to be executed. Syntax if (condition1) code to be executed if condition1 is true else if (condition2)
31 code to be executed if condition2 is true else code to be executed if neither condition1 nor condition2 is true If the time is less than 10:00, you will get a "Good morning" greeting, if not, but the time is less than 20:00, you will get a "Good day" greeting, otherwise you will get a "Good evening" greeting: if (time<10) x="good morning"; else if (time<20) x="good day"; else x="good evening"; The result of x will be: Good evening The JavaScript Switch Statement Use the switch statement to select one of many blocks of code to be executed. Syntax
32 switch(n) case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 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. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically. Display today's weekday-name. Note that Sunday=0, Monday=1, Tuesday=2, etc: var day=new Date().getDay(); switch (day) case 0: x="today it's Sunday"; break; case 1: x="today it's Monday"; break; case 2: x="today it's Tuesday"; break; case 3: x="today it's Wednesday"; break; case 4:
33 x="today it's Thursday"; break; case 5: x="today it's Friday"; break; case 6: x="today it's Saturday"; break; The result of x will be: Today it's Monday The default Keyword Use the default keyword to specify what to do if there is no match: If it is NOT Saturday or Sunday, then write a default message: var day=new Date().getDay(); switch (day) case 6: x="today it's Saturday"; break; case 0: x="today it's Sunday"; break; default: x="looking forward to the Weekend"; The result of x will be: Looking forward to the Weekend
34 JavaScript Loops Loops are handy, if you want to run the same code over and over again, each time with a different value. Often this is the case when working with arrays: Instead of writing: document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); You can write: for (var i=0;i<cars.length;i++) document.write(cars[i] + "<br>"); Try it yourself» Different Kinds of Loops JavaScript supports different kinds of loops: for - loops through a block of code a number of times for/in - loops through the properties of an object while - loops through a block of code while a specified condition is true do/while - also loops through a block of code while a specified condition is true
35 The For Loop The for loop is often the tool you will use when you want to create a loop. The for loop has the following syntax: for (statement 1; statement 2; statement 3) the code block to be executed Statement 1 is executed before the loop (the code block) starts. Statement 2 defines the condition for running the loop (the code block). Statement 3 is executed each time after the loop (the code block) has been executed. for (var i=0; i<5; i++) x=x + "The number is " + i + "<br>"; Try it yourself» From the example above, you can read: Statement 1 sets a variable before the loop starts (var i=0). Statement 2 defines the condition for the loop to run (i must be less than 5). Statement 3 increases a value (i++) each time the code block in the loop has been executed. Statement 1
36 Normally you will use statement 1 to initiate the variable used in the loop (var i=0). This is not always the case, JavaScript doesn't care, and statement 1 is optional. You can initiate any (or many) values in statement 1: : for (var i=0,len=cars.length; i<len; i++) document.write(cars[i] + "<br>"); And you can omit statement 1 (like when your values are set before the loop starts): : var i=2,len=cars.length; for (; i<len; i++) document.write(cars[i] + "<br>"); Statement 2 Often statement 2 is used to evaluate the condition of the initial variable. This is not always the case, JavaScript doesn't care, and statement 2 is optional. If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.
37 If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial. Statement 3 Often statement 3 increases the initial variable. This is not always the case, JavaScript doesn't care, and statement 3 is optional. Statement 3 could do anything. The increment could be negative (i--), or larger (i=i+15). Statement 3 can also be omitted (like when you have corresponding code inside the loop): : var i=0,len=cars.length; for (; i<len; ) document.write(cars[i] + "<br>"); i++; The For/In Loop The JavaScript for/in statement loops through the properties of an object: var person=fname:"john",lname:"doe",age:25;
38 for (x in person) txt=txt + person[x]; The While Loop The while loop loops through a block of code as long as a specified condition is true. Syntax while (condition) code block to be executed The loop in this example will continue to run as long as the variable i is less than 5: while (i<5) x=x + "The number is " + i + "<br>"; i++; If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.
39 The Do/While Loop The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true. Syntax do code block to be executed while (condition); The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested: do x=x + "The number is " + i + "<br>"; i++; while (i<5); Do not forget to increase the variable used in the condition, otherwise the loop will never end! Comparing For and While If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with statement 1 and statement 3 omitted.
40 The loop in this example uses a for loop to display all the values in the cars array: cars=["bmw","volvo","saab","ford"]; var i=0; for (;cars[i];) document.write(cars[i] + "<br>"); i++; The loop in this example uses a while loop to display all the values in the cars array: cars=["bmw","volvo","saab","ford"]; var i=0; while (cars[i]) document.write(cars[i] + "<br>"); i++; The Break Statement You have already seen the break statement used in an earlier chapter of this tutorial. It was used to "jump out" of a switch() statement. The break statement can also be used to jump out of a loop. The break statement breaks the loop and continues executing the code after the loop (if any):
41 for (i=0;i<10;i++) if (i==3) break; x=x + "The number is " + i + "<br>"; Since the if statement has only one single line of code, the braces can be omitted: for (i=0;i<10;i++) if (i==3) break; x=x + "The number is " + i + "<br>"; The Continue Statement The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop. This example skips the value of 3: for (i=0;i<=10;i++) if (i==3) continue; x=x + "The number is " + i + "<br>";
42 JavaScript Labels As you have already seen, in the chapter about the switch statement, JavaScript statements can be labeled. To label JavaScript statements you precede the statements with a colon: label: statements The break and the continue statements are the only JavaScript statements that can "jump out of" a code block. Syntax: break labelname; continue labelname; The continue statement (with or without a label reference) can only be used inside a loop. The break statement, without a label reference, can only be used inside a loop or a switch. With a label reference, it can be used to "jump out of" any JavaScript code block: cars=["bmw","volvo","saab","ford"]; list: document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>");
43 The try statement lets you to test a block of code for errors. The catch statement lets you handle the error. The throw statement lets you create custom errors. Errors Will Happen! When the JavaScript engine is executing JavaScript code, different errors can occur: It can be syntax errors, typically coding errors or typos made by the programmer. It can be misspelled or missing features in the language (maybe due to browser differences). It can be errors due to wrong input, from a user, or from an Internet server. And, of course, it can be many other unforeseeable things. JavaScript Throws Errors When an error occurs, when something goes wrong, the JavaScript engine will normally stop, and generate an error message. The technical term for this is: JavaScript will throw an error. JavaScript try and catch
44 The try statement allows you to define a block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to be executed, if an error occurs in the try block. The JavaScript statements try and catch come in pairs. Syntax try //Run some code here catch(err) //Handle errors here s In the example below we have deliberately made a typo in the code in the try block. The catch block catches the error in the try block, and executes code to handle it: <!DOCTYPE html> <html> <head> <script> var txt=""; function message() try adddlert("welcome guest!"); catch(err)
45 txt="there was an error on this page.\n\n"; txt+="error description: " + err.message + "\n\n"; txt+="click OK to continue.\n\n"; alert(txt); </script> </head> <body> <input type="button" value="view message" onclick="message()"> </body> </html> The Throw Statement The throw statement allows you to create a custom error. The correct technical term is to create or throw an exception. If you use the throw statement together with try and catch, you can control program flow and generate custom error messages. Syntax throw exception The exception can be a JavaScript String, a Number, a Boolean or an Object.
46 This example examines the value of an input variable. If the value is wrong, an exception (error) is thrown. The error is caught by the catch statement and a custom error message is displayed: <script> function myfunction() try var x=document.getelementbyid("demo").value; if(x=="") throw "empty"; if(isnan(x)) throw "not a number"; if(x>10) throw "too high"; if(x<5) throw "too low"; catch(err) var y=document.getelementbyid("mess"); y.innerhtml="error: " + err + "."; </script> <h1>my First JavaScript</h1> <p>please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myfunction()">test Input</button> <p id="mess"></p> JavaScript Form 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:
47 has the user left required fields empty? has the user entered a valid address? has the user entered a valid date? has the user entered text in a numeric field? Required Fields The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted: function validateform() var x=document.forms["myform"]["fname"].value; if (x==null x=="") alert("first name must be filled out"); return false; The function above could be called when a form is submitted: <form name="myform" action="demo_form.asp" onsubmit="return validateform()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="submit"> </form> Try it yourself» Validation The function below checks if the content has the general syntax of an .
48 This means that the input data must contain sign and at least one dot (.). Also, must not be the first character of the address, and the last dot must be present after sign, and minimum 2 characters before the end: function validateform() var x=document.forms["myform"][" "].value; var atpos=x.indexof("@"); var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) alert("not a valid address"); return false; The function above could be called when a form is submitted: <form name="myform" action="demo_form.asp" onsubmit="return validateform();" method="post"> <input type="text" name=" "> <input type="submit" value="submit"> </form>
49 The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects: The HTML DOM Tree With a programmable object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can react to all the events in the page Finding HTML Elements Often, with JavaScript, you want to manipulate HTML elements.
50 To do so, you have to find the elements first. There are a couple of ways to do this: Finding HTML elements by id Finding HTML elements by tag name Finding HTML elements by class name Finding HTML Elements by Id The easiest way to find HTML elements in the DOM, is by using the element id. This example finds the element with id="intro": var x=document.getelementbyid("intro"); If the element is found, the method will return the element as an object (in x). If the element is not found, x will contain null. Finding HTML Elements by Tag Name This example finds the element with id="main", and then finds all <p> elements inside "main": var x=document.getelementbyid("main"); var y=x.getelementsbytagname("p"); Finding elements by class name does not work in Internet Explorer 5,6,7, and 8.
51 Changing the HTML Output Stream JavaScript can create dynamic HTML content: Date: Mon Mar :09:51 GMT+0000 (WET) In JavaScript, document.write() can be used to write directly to the HTML output stream: <!DOCTYPE html> <html> <body> <script> document.write(date()); </script> </body> </html> Never use document.write() after the document is loaded. It will overwrite the document. Changing HTML Content The easiest way to modify the content of an HTML element is by using the innerhtml property. To change the content of an HTML element, use this syntax: document.getelementbyid(id).innerhtml=new HTML This example changes the content of a <p> element:
52 <html> <body> <p id="p1">hello World!</p> <script> document.getelementbyid("p1").innerhtml="new text!"; </script> </body> </html> This example changes the content of an <h1> element: <!DOCTYPE html> <html> <body> <h1 id="header">old Header</h1> <script> var element=document.getelementbyid("header"); element.innerhtml="new Header"; </script> </body> </html> explained: The HTML document above contains an <h1> element with id="header" We use the HTML DOM to get the element with id="header" A JavaScript changes the content (innerhtml) of that element
53 Changing an HTML Attribute To change the attribute of an HTML element, use this syntax: document.getelementbyid(id).attribute=new value This example changes the src attribute of an <img> element: <!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getelementbyid("image").src="landscape.jpg"; </script> </body> </html> Changing HTML Style To change the style of an HTML element, use this syntax: document.getelementbyid(id).style.property=new style The following example changes the style of a <p> element: <html> <body> <p id="p2">hello World!</p> <script> document.getelementbyid("p2").style.color="blue";
54 </script> <p>the paragraph above was changed by a script.</p> </body> </html> This example changes the style of the HTML element with id="id1", when the user clicks a button: <!DOCTYPE html> <html> <body> <h1 id="id1">my Heading 1</h1> <button type="button" onclick="document.getelementbyid('id1').style.color='re d'"> Click Me!</button> </body> </html> HTML DOM Style Object Reference HTML DOM allows JavaScript to react to HTML events. Mouse Over Me Goodbye
55 Reacting to Events A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick=javascript s of HTML events: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key In this example, the content of the <h1> element is changed when a user clicks on it: <!DOCTYPE html> <html> <body> <h1 onclick="this.innerhtml='ooops!'">click on this text!</h1> </body> </html> Try it yourself» In this example, a function is called from the event handler: <!DOCTYPE html>
56 <html> <head> <script> function changetext(id) id.innerhtml="ooops!"; </script> </head> <body> <h1 onclick="changetext(this)">click on this text!</h1> </body> </html> Try it yourself» HTML Event Attributes To assign events to HTML elements you can use event attributes. Assign an onclick event to a button element: <button onclick="displaydate()">try it</button> Try it yourself» In the example above, a function named displaydate will be executed when the button is clicked. Assign Events Using the HTML DOM The HTML DOM allows you to assign events to HTML elements using JavaScript:
57 Assign an onclick event to a button element: <script> document.getelementbyid("mybtn").onclick=function() displaydate(); </script> Try it yourself» In the example above, a function named displaydate is assigned to an HTML element with the id=mybutn". The function will be executed when the button is clicked. The onload and onunload Events The onload and onunload events are triggered when the user enters or leaves the page. The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. The onload and onunload events can be used to deal with cookies. <body onload="checkcookies()"> Try it yourself» The onchange Event The onchange event are often used in combination with validation of input fields.
58 Below is an example of how to use the onchange. The uppercase() function will be called when a user changes the content of an input field. <input type="text" id="fname" onchange="uppercase()"> Try it yourself» The onmouseover and onmouseout Events The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element. A simple onmouseover-onmouseout example: Try it yourself» Mouse Over Me The onmousedown, onmouseup and onclick Events The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.
59 HTML DOM Event Object Reference Creating New HTML Elements To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element. <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var para=document.createelement("p"); var node=document.createtextnode("this is new."); para.appendchild(node); var element=document.getelementbyid("div1"); element.appendchild(para); </script> Try it yourself» Explained This code creates a new <p> element: var para=document.createelement("p"); To add text to the <p> element, you must create a text node first. This code creates a text node:
60 var node=document.createtextnode("this is a new paragraph."); Then you must append the text node to the <p> element: para.appendchild(node); Finally you must append the new element to an existing element. This code finds an existing element: var element=document.getelementbyid("div1"); This code appends the new element to the existing element: element.appendchild(para); Removing Existing HTML Elements To remove an HTML element, you must know the parent of the element: <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> <script> var parent=document.getelementbyid("div1"); var child=document.getelementbyid("p1"); parent.removechild(child); </script> Try it yourself» Explained This HTML document contains a <div> element with two child nodes (two <p> elements):
61 <div id="div1"> <p id="p1">this is a paragraph.</p> <p id="p2">this is another paragraph.</p> </div> Find the element with id="div1": var parent=document.getelementbyid("div1"); Find the <p> element with id="p1": var child=document.getelementbyid("p1"); Remove the child from the parent: parent.removechild(child); It would be nice to be able to remove an element without referring to the parent. But sorry. The DOM needs to know both the element you want to remove, and its parent. Here is a common workaround: Find the child you want to remove, and use its parentnode property to find the parent: var child=document.getelementbyid("p1"); child.parentnode.removechild(child); Full HTML DOM Tutorial
JavaScript Introduction
JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML, for the web, for servers, PCs, laptops, tablets, phones, and more. JavaScript is a Scripting
«W3Schools Home Next Chapter» JavaScript is THE scripting language of the Web.
JS Basic JS HOME JS Introduction JS How To JS Where To JS Statements JS Comments JS Variables JS Operators JS Comparisons JS If...Else JS Switch JS Popup Boxes JS Functions JS For Loop JS While Loop JS
PHP Tutorial From beginner to master
PHP Tutorial From beginner to master PHP is a powerful tool for making dynamic and interactive Web pages. PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
JavaScript Basics & HTML DOM. Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com
JavaScript Basics & HTML DOM Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com 2 Disclaimer & Acknowledgments Even though Sang Shin is a full-time employee
JavaScript: Client-Side Scripting. Chapter 6
JavaScript: Client-Side Scripting Chapter 6 Textbook to be published by Pearson Ed 2015 in early Pearson 2014 Fundamentals of Web http://www.funwebdev.com Development Section 1 of 8 WHAT IS JAVASCRIPT
JavaScript: Introduction to Scripting. 2008 Pearson Education, Inc. All rights reserved.
1 6 JavaScript: Introduction to Scripting 2 Comment is free, but facts are sacred. C. P. Scott The creditor hath a better memory than the debtor. James Howell When faced with a decision, I always ask,
JavaScript. JavaScript: fundamentals, concepts, object model. Document Object Model. The Web Page. The window object (1/2) The document object
JavaScript: fundamentals, concepts, object model Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it JavaScript A scripting language:
Technical University of Sofia Faculty of Computer Systems and Control. Web Programming. Lecture 4 JavaScript
Technical University of Sofia Faculty of Computer Systems and Control Web Programming Lecture 4 JavaScript JavaScript basics JavaScript is scripting language for Web. JavaScript is used in billions of
Web Programming Step by Step
Web Programming Step by Step Lecture 13 Introduction to JavaScript Reading: 7.1-7.4 Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. Client-side
DOM, Jav Ja a v Script a and AJA AJ X A Madalina Croitoru IUT Mont Mon pellier
DOM, JavaScript and AJAX Madalina Croitoru IUT Montpellier JavaScript Initially called LiveScript Implemented in Netscape Navigator Microsoft adapts it in 1996: Jscript European Computer Manufacturers
Name: Class: Date: 9. The compiler ignores all comments they are there strictly for the convenience of anyone reading the program.
Name: Class: Date: Exam #1 - Prep True/False Indicate whether the statement is true or false. 1. Programming is the process of writing a computer program in a language that the computer can respond to
How to Code With MooTools
Advanced Web Programming Jaume Aragonés Ferrero Department of Software and Computing Systems A compact JavaScript framework MOOTOOLS Index What is MooTools? Where to find? How to download? Hello World
Custom Javascript In Planning
A Hyperion White Paper Custom Javascript In Planning Creative ways to provide custom Web forms This paper describes several of the methods that can be used to tailor Hyperion Planning Web forms. Hyperion
LAB MANUAL CS-322364(22): Web Technology
RUNGTA COLLEGE OF ENGINEERING & TECHNOLOGY (Approved by AICTE, New Delhi & Affiliated to CSVTU, Bhilai) Kohka Kurud Road Bhilai [C.G.] LAB MANUAL CS-322364(22): Web Technology Department of COMPUTER SCIENCE
Exercise 4 Learning Python language fundamentals
Exercise 4 Learning Python language fundamentals Work with numbers Python can be used as a powerful calculator. Practicing math calculations in Python will help you not only perform these tasks, but also
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
MASTERTAG DEVELOPER GUIDE
MASTERTAG DEVELOPER GUIDE TABLE OF CONTENTS 1 Introduction... 4 1.1 What is the zanox MasterTag?... 4 1.2 What is the zanox page type?... 4 2 Create a MasterTag application in the zanox Application Store...
Retrieving Data Using the SQL SELECT Statement. Copyright 2006, Oracle. All rights reserved.
Retrieving Data Using the SQL SELECT Statement Objectives After completing this lesson, you should be able to do the following: List the capabilities of SQL SELECT statements Execute a basic SELECT statement
INFORMATION BROCHURE Certificate Course in Web Design Using PHP/MySQL
INFORMATION BROCHURE OF Certificate Course in Web Design Using PHP/MySQL National Institute of Electronics & Information Technology (An Autonomous Scientific Society of Department of Information Technology,
Data Tool Platform SQL Development Tools
Data Tool Platform SQL Development Tools ekapner Contents Setting SQL Development Preferences...5 Execution Plan View Options Preferences...5 General Preferences...5 Label Decorations Preferences...6
First Java Programs. V. Paúl Pauca. CSC 111D Fall, 2015. Department of Computer Science Wake Forest University. Introduction to Computer Science
First Java Programs V. Paúl Pauca Department of Computer Science Wake Forest University CSC 111D Fall, 2015 Hello World revisited / 8/23/15 The f i r s t o b l i g a t o r y Java program @author Paul Pauca
Client-side programming with JavaScript. Laura Farinetti Dipartimento di Automatica e Informatica Politecnico di Torino laura.farinetti@polito.
Client-side programming with JavaScript Laura Farinetti Dipartimento di Automatica e Informatica Politecnico di Torino laura.farinetti@polito.it 1 Summary Introduction Language syntax Functions Objects
Moving from CS 61A Scheme to CS 61B Java
Moving from CS 61A Scheme to CS 61B Java Introduction Java is an object-oriented language. This document describes some of the differences between object-oriented programming in Scheme (which we hope you
HTML Form Widgets. Review: HTML Forms. Review: CGI Programs
HTML Form Widgets Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate
NetFlow for SouthWare NetLink
NetFlow for SouthWare NetLink NetFlow is a technology add-on for the SouthWare NetLink module that allows customization of NetLink web pages without modifying the standard page templates or requests! You
WA2099 Introduction to Java using RAD 8.0 EVALUATION ONLY. Student Labs. Web Age Solutions Inc.
WA2099 Introduction to Java using RAD 8.0 Student Labs Web Age Solutions Inc. 1 Table of Contents Lab 1 - The HelloWorld Class...3 Lab 2 - Refining The HelloWorld Class...20 Lab 3 - The Arithmetic Class...25
Lecture 2 Notes: Flow of Control
6.096 Introduction to C++ January, 2011 Massachusetts Institute of Technology John Marrero Lecture 2 Notes: Flow of Control 1 Motivation Normally, a program executes statements from first to last. The
jquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
Web Hosting Prep Lab Homework #2 This week: Setup free web hosting for your project Pick domain name and check whether it is available Lots of free
Web Hosting Prep, Lab Homework #2 Project Requirements Gathering, Design Prototyping Web Application Frameworks JavaScript Introduction / Overview Lab Homework #3 CS 183 10/13/2013 Web Hosting Prep Lab
Informatica e Sistemi in Tempo Reale
Informatica e Sistemi in Tempo Reale Introduction to C programming Giuseppe Lipari http://retis.sssup.it/~lipari Scuola Superiore Sant Anna Pisa October 25, 2010 G. Lipari (Scuola Superiore Sant Anna)
JavaScript: Control Statements I
1 7 JavaScript: Control Statements I 7.1 Introduction 2 The techniques you will learn here are applicable to most high-level languages, including JavaScript 1 7.2 Algorithms 3 Any computable problem can
Exercise 1: Python Language Basics
Exercise 1: Python Language Basics In this exercise we will cover the basic principles of the Python language. All languages have a standard set of functionality including the ability to comment code,
Portal Connector Fields and Widgets Technical Documentation
Portal Connector Fields and Widgets Technical Documentation 1 Form Fields 1.1 Content 1.1.1 CRM Form Configuration The CRM Form Configuration manages all the fields on the form and defines how the fields
Finding XSS in Real World
Finding XSS in Real World by Alexander Korznikov nopernik@gmail.com 1 April 2015 Hi there, in this tutorial, I will try to explain how to find XSS in real world, using some interesting techniques. All
6. Control Structures
- 35 - Control Structures: 6. Control Structures A program is usually not limited to a linear sequence of instructions. During its process it may bifurcate, repeat code or take decisions. For that purpose,
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
Perl in a nutshell. First CGI Script and Perl. Creating a Link to a Script. print Function. Parsing Data 4/27/2009. First CGI Script and Perl
First CGI Script and Perl Perl in a nutshell Prof. Rasley shebang line tells the operating system where the Perl interpreter is located necessary on UNIX comment line ignored by the Perl interpreter End
Import Filter Editor User s Guide
Reference Manager Windows Version Import Filter Editor User s Guide April 7, 1999 Research Information Systems COPYRIGHT NOTICE This software product and accompanying documentation is copyrighted and all
Python Lists and Loops
WEEK THREE Python Lists and Loops You ve made it to Week 3, well done! Most programs need to keep track of a list (or collection) of things (e.g. names) at one time or another, and this week we ll show
Grandstream XML Application Guide Three XML Applications
Grandstream XML Application Guide Three XML Applications PART A Application Explanations PART B XML Syntax, Technical Detail, File Examples Grandstream XML Application Guide - PART A Three XML Applications
Dialog planning in VoiceXML
Dialog planning in VoiceXML Csapó Tamás Gábor 4 January 2011 2. VoiceXML Programming Guide VoiceXML is an XML format programming language, describing the interactions between human
INTEGRATING MICROSOFT DYNAMICS CRM WITH SIMEGO DS3
INTEGRATING MICROSOFT DYNAMICS CRM WITH SIMEGO DS3 Often the most compelling way to introduce yourself to a software product is to try deliver value as soon as possible. Simego DS3 is designed to get you
Python Loops and String Manipulation
WEEK TWO Python Loops and String Manipulation Last week, we showed you some basic Python programming and gave you some intriguing problems to solve. But it is hard to do anything really exciting until
Example. Represent this as XML
Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple
Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation
Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet
Excel: Introduction to Formulas
Excel: Introduction to Formulas Table of Contents Formulas Arithmetic & Comparison Operators... 2 Text Concatenation... 2 Operator Precedence... 2 UPPER, LOWER, PROPER and TRIM... 3 & (Ampersand)... 4
PL / SQL Basics. Chapter 3
PL / SQL Basics Chapter 3 PL / SQL Basics PL / SQL block Lexical units Variable declarations PL / SQL types Expressions and operators PL / SQL control structures PL / SQL style guide 2 PL / SQL Block Basic
Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com JAVASCRIPT
JAVASCRIPT Javascript (JS) web sayfalarında kullanılan ve istemci tarafında çalışan (browserlarda çalışan) popüler bir script (programlama) dilidir. JavaScritp Nedir? * Javascript Html sayfalarını interaktive
ESPResSo Summer School 2012
ESPResSo Summer School 2012 Introduction to Tcl Pedro A. Sánchez Institute for Computational Physics Allmandring 3 D-70569 Stuttgart Germany http://www.icp.uni-stuttgart.de 2/26 Outline History, Characteristics,
Topics. Parts of a Java Program. Topics (2) CS 146. Introduction To Computers And Java Chapter Objectives To understand:
Introduction to Programming and Algorithms Module 2 CS 146 Sam Houston State University Dr. Tim McGuire Introduction To Computers And Java Chapter Objectives To understand: the meaning and placement of
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
COURSE SYLLABUS EDG 6931: Designing Integrated Media Environments 2 Educational Technology Program University of Florida
COURSE SYLLABUS EDG 6931: Designing Integrated Media Environments 2 Educational Technology Program University of Florida CREDIT HOURS 3 credits hours PREREQUISITE Completion of EME 6208 with a passing
NewsletterAdmin 2.4 Setup Manual
NewsletterAdmin 2.4 Setup Manual Updated: 7/22/2011 Contact: corpinteractiveservices@crain.com Contents Overview... 2 What's New in NewsletterAdmin 2.4... 2 Before You Begin... 2 Testing and Production...
When you have selected where you would like the form on your web page, insert these lines of code to start:
Mail Form Tutorial This tutorial will show you how to make use of SIUE s mail form script to allow web users to contact you via e mail regarding anything you wish. This script if most useful for receiving
Syllabus for CS 134 Java Programming
- Java Programming Syllabus Page 1 Syllabus for CS 134 Java Programming Computer Science Course Catalog 2000-2001: This course is an introduction to objectoriented programming using the Java language.
Introduction to Python
Caltech/LEAD Summer 2012 Computer Science Lecture 2: July 10, 2012 Introduction to Python The Python shell Outline Python as a calculator Arithmetic expressions Operator precedence Variables and assignment
Differences in Use between Calc and Excel
Differences in Use between Calc and Excel Title: Differences in Use between Calc and Excel: Version: 1.0 First edition: October 2004 Contents Overview... 3 Copyright and trademark information... 3 Feedback...3
Debugging JavaScript and CSS Using Firebug. Harman Goei CSCI 571 1/27/13
Debugging JavaScript and CSS Using Firebug Harman Goei CSCI 571 1/27/13 Notice for Copying JavaScript Code from these Slides When copying any JavaScript code from these slides, the console might return
PHP and XML. Brian J. Stafford, Mark McIntyre and Fraser Gallop
What is PHP? PHP and XML Brian J. Stafford, Mark McIntyre and Fraser Gallop PHP is a server-side tool for creating dynamic web pages. PHP pages consist of both HTML and program logic. One of the advantages
Windows PowerShell Essentials
Windows PowerShell Essentials Windows PowerShell Essentials Edition 1.0. This ebook is provided for personal use only. Unauthorized use, reproduction and/or distribution strictly prohibited. All rights
Visual Logic Instructions and Assignments
Visual Logic Instructions and Assignments Visual Logic can be installed from the CD that accompanies our textbook. It is a nifty tool for creating program flowcharts, but that is only half of the story.
Instructions for Embedding a Kudos Display within Your Website
Instructions for Embedding a Kudos Display within Your Website You may use either of two technologies for this embedment. A. You may directly insert the underlying PHP code; or B. You may insert some JavaScript
UTILITIES BACKUP. Figure 25-1 Backup & Reindex utilities on the Main Menu
25 UTILITIES PastPerfect provides a variety of utilities to help you manage your data. Two of the most important are accessed from the Main Menu Backup and Reindex. The other utilities are located within
JavaScript: Arrays. 2008 Pearson Education, Inc. All rights reserved.
1 10 JavaScript: Arrays 2 With sobs and tears he sorted out Those of the largest size... Lewis Carroll Attempt the end, and never stand to doubt; Nothing s so hard, but search will find it out. Robert
Installing and Sending with DocuSign for NetSuite v2.2
DocuSign Quick Start Guide Installing and Sending with DocuSign for NetSuite v2.2 This guide provides information on installing and sending documents for signature with DocuSign for NetSuite. It also includes
Data Integrator. Pervasive Software, Inc. 12365-B Riata Trace Parkway Austin, Texas 78727 USA
Data Integrator Event Management Guide Pervasive Software, Inc. 12365-B Riata Trace Parkway Austin, Texas 78727 USA Telephone: 888.296.5969 or 512.231.6000 Fax: 512.231.6010 Email: info@pervasiveintegration.com
Certified PHP Developer VS-1054
Certified PHP Developer VS-1054 Certification Code VS-1054 Certified PHP Developer Vskills certification for PHP Developers assesses the candidate for developing PHP based applications. The certification
HowTo. Planning table online
HowTo Project: Description: Planning table online Installation Version: 1.0 Date: 04.09.2008 Short description: With this document you will get information how to install the online planning table on your
PHP Debugging. Draft: March 19, 2013 2013 Christopher Vickery
PHP Debugging Draft: March 19, 2013 2013 Christopher Vickery Introduction Debugging is the art of locating errors in your code. There are three types of errors to deal with: 1. Syntax errors: When code
G563 Quantitative Paleontology. SQL databases. An introduction. Department of Geological Sciences Indiana University. (c) 2012, P.
SQL databases An introduction AMP: Apache, mysql, PHP This installations installs the Apache webserver, the PHP scripting language, and the mysql database on your computer: Apache: runs in the background
Hypercosm. Studio. www.hypercosm.com
Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks
MICROSOFT ACCESS STEP BY STEP GUIDE
IGCSE ICT SECTION 11 DATA MANIPULATION MICROSOFT ACCESS STEP BY STEP GUIDE Mark Nicholls ICT Lounge P a g e 1 Contents Task 35 details Page 3 Opening a new Database. Page 4 Importing.csv file into the
Introduction to Java Applications. 2005 Pearson Education, Inc. All rights reserved.
1 2 Introduction to Java Applications 2.2 First Program in Java: Printing a Line of Text 2 Application Executes when you use the java command to launch the Java Virtual Machine (JVM) Sample program Displays
We will learn the Python programming language. Why? Because it is easy to learn and many people write programs in Python so we can share.
LING115 Lecture Note Session #4 Python (1) 1. Introduction As we have seen in previous sessions, we can use Linux shell commands to do simple text processing. We now know, for example, how to count words.
GLEN RIDGE PUBLIC SCHOOLS MATHEMATICS MISSION STATEMENT AND GOALS
Course Title: Advanced Web Design Subject: Mathematics / Computer Science Grade Level: 9-12 Duration: 0.5 year Number of Credits: 2.5 Prerequisite: Grade of A or higher in Web Design Elective or Required:
Web development... the server side (of the force)
Web development... the server side (of the force) Fabien POULARD Document under license Creative Commons Attribution Share Alike 2.5 http://www.creativecommons.org/learnmore Web development... the server
Product: DQ Order Manager Release Notes
Product: DQ Order Manager Release Notes Subject: DQ Order Manager v7.1.25 Version: 1.0 March 27, 2015 Distribution: ODT Customers DQ OrderManager v7.1.25 Added option to Move Orders job step Update order
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Intro to Web Programming. using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000
Intro to Web Programming using PHP, HTTP, CSS, and Javascript Layton Smith CSE 4000 Intro Types in PHP Advanced String Manipulation The foreach construct $_REQUEST environmental variable Correction on
WebSphere Business Monitor
WebSphere Business Monitor Monitor models 2010 IBM Corporation This presentation should provide an overview of monitor models in WebSphere Business Monitor. WBPM_Monitor_MonitorModels.ppt Page 1 of 25
Access Queries (Office 2003)
Access Queries (Office 2003) Technical Support Services Office of Information Technology, West Virginia University OIT Help Desk 293-4444 x 1 oit.wvu.edu/support/training/classmat/db/ Instructor: Kathy
Chapter 2 Introduction to Java programming
Chapter 2 Introduction to Java programming 1 Keywords boolean if interface class true char else package volatile false byte final switch while throws float private case return native void protected break
1 Introduction. 2 An Interpreter. 2.1 Handling Source Code
1 Introduction The purpose of this assignment is to write an interpreter for a small subset of the Lisp programming language. The interpreter should be able to perform simple arithmetic and comparisons
FORM-ORIENTED DATA ENTRY
FORM-ORIENTED DATA ENTRY Using form to inquire and collect information from users has been a common practice in modern web page design. Many Web sites used form-oriented input to request customers opinions
Object Oriented Software Design
Object Oriented Software Design Introduction to Java - II Giuseppe Lipari http://retis.sssup.it/~lipari Scuola Superiore Sant Anna Pisa September 14, 2011 G. Lipari (Scuola Superiore Sant Anna) Introduction
How To Insert Hyperlinks In Powerpoint Powerpoint
Lesson 5 Inserting Hyperlinks & Action Buttons Introduction A hyperlink is a graphic or piece of text that links to another web page, document, or slide. By clicking on the hyperlink will activate it and
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
PIC 10A. Lecture 7: Graphics II and intro to the if statement
PIC 10A Lecture 7: Graphics II and intro to the if statement Setting up a coordinate system By default the viewing window has a coordinate system already set up for you 10-10 10-10 The origin is in the
Java Application Developer Certificate Program Competencies
Java Application Developer Certificate Program Competencies After completing the following units, you will be able to: Basic Programming Logic Explain the steps involved in the program development cycle
Microsoft Access 3: Understanding and Creating Queries
Microsoft Access 3: Understanding and Creating Queries In Access Level 2, we learned how to perform basic data retrievals by using Search & Replace functions and Sort & Filter functions. For more complex
10CS73:Web Programming
10CS73:Web Programming Question Bank Fundamentals of Web: 1.What is WWW? 2. What are domain names? Explain domain name conversion with diagram 3.What are the difference between web browser and web server
Resources You can find more resources for Sync & Save at our support site: http://www.doforms.com/support.
Sync & Save Introduction Sync & Save allows you to connect the DoForms service (www.doforms.com) with your accounting or management software. If your system can import a comma delimited, tab delimited
Object Oriented Software Design
Object Oriented Software Design Introduction to Java - II Giuseppe Lipari http://retis.sssup.it/~lipari Scuola Superiore Sant Anna Pisa October 28, 2010 G. Lipari (Scuola Superiore Sant Anna) Introduction
Introduction to Ingeniux Forms Builder. 90 minute Course CMSFB-V6 P.0-20080901
Introduction to Ingeniux Forms Builder 90 minute Course CMSFB-V6 P.0-20080901 Table of Contents COURSE OBJECTIVES... 1 Introducing Ingeniux Forms Builder... 3 Acquiring Ingeniux Forms Builder... 3 Installing
6.170 Tutorial 3 - Ruby Basics
6.170 Tutorial 3 - Ruby Basics Prerequisites 1. Have Ruby installed on your computer a. If you use Mac/Linux, Ruby should already be preinstalled on your machine. b. If you have a Windows Machine, you
DTD Tutorial. About the tutorial. Tutorial
About the tutorial Tutorial Simply Easy Learning 2 About the tutorial DTD Tutorial XML Document Type Declaration commonly known as DTD is a way to describe precisely the XML language. DTDs check the validity
DIY Email Manager User Guide. http://www.diy-email-manager.com
User Guide http://www.diy-email-manager.com Contents Introduction... 3 Help Guides and Tutorials... 4 Sending your first email campaign... 4 Adding a Subscription Form to Your Web Site... 14 Collecting
Introduction. Inserting Hyperlinks. PowerPoint 2010 Hyperlinks and Action Buttons. About Hyperlinks. Page 1
PowerPoint 2010 Hyperlinks and Action Buttons Introduction Page 1 Whenever you use the Web, you are using hyperlinks to navigate from one web page to another. If you want to include a web address or email
Now that we have discussed some PHP background
WWLash02 6/14/02 3:20 PM Page 18 CHAPTER TWO USING VARIABLES Now that we have discussed some PHP background information and learned how to create and publish basic PHP scripts, let s explore how to use