1. Scripting with Client-Side Processing Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved. 1 Web Technologies

2. What is Programming? A program is a sequence of instructions that makes a computer perform a desired task. There are many different programming languages. 2 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

3. Programming Languages Computers only know two basic instructions: 1 (indicating on) and 0 (indicating off) called binary code. The computer language first used was called assembly language. With this new language, the programmers could write their instructions in a more English-like format. The instructions were then translated into binary code using a program called a compiler. 3 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

4. Scripting NAME For the purposes of this lesson, replace the word NAME with the name of the scripting language you are using. This applies throughout the lesson. 4 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

5. Enter the following code in your text editor and save it as program1.htm 1 2 3 Sample NAMEScript Program 1 4 5 6 Simple NAMEScript Program 7 8 document.write("Here is my output."); 9 10 11 5 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

6. Code Breakdown 1 2 3 Sample NAMEScript Program 1 4 5 6 Simple NAMEScript Program 7 8 document.write("Here is my output."); 9 10 11 Lines 1 - 6 are standard HTML code. Line 8 is the actual line of code that performs an action. All statements should end with a semicolon. Because there is more than one type of scripting language, you must tell the browser the type of language you will be using in the script tag as shown in line 7. Remember that the word NAME above should reflect the name of the scripting language you are using. The semicolon tells the browser that the statement has ended. 6 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

7. Preview the program1.htm in your browser. 7 Simple NAMEScript Program Here is my output. Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

8. Object Oriented Programming In object oriented programming, objects are created to represent physical parts of a program or web document. Object oriented programming allows for common program code to be reused. This scripting language is considered object based. 8 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

9. 8 document.write("Here is my output."); Notice on line 8 of program 1, you see statement document.write( ). The object being used is the document object. The object represents a group where the related methods are stored. Methods are prewritten code written within an object that perform a specific task. All the methods associated with the document object perform some action on the document, such as writing text to it, opening a document, or closing documents. 9 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

10. Object Oriented Programming To access a particular method, you indicate the object the method is a part of and then the method name with a dot between the two names. This dot is called the dot access operator. Document Object Methods document.open() document.close() document.write() document.writeln() document.clear() 10 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

11. Object Properties Objects not only have methods associated with them, but they also have properties. The properties simply specify character traits about an object such as its background color. The statement below will assign a new background color to the documents. document.bgColor=“#009900”; This statement will display the current background color of the document. document.write(document.bgColor); 11 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

12. Sample NAMEScript Program 1 body {background-color: #336699; color: #ffffff} Simple NAMEScript Program document.write("Here is my output."); document.write(" "); document.write(document.bgColor); Return to your notepad software and add the red code to your document. Sample Code 1a 12 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

13. Refresh your browser. Notice the output of the rgb color code on the screen. 13 Simple NAMEScript Program Here is my output. #336699 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

14. document.write(" "); document.write(document.bgColor); document.write(" "); document.write(document.lastModified); Sample Code 1b document.lastModified The document.lastModified property can be used to display when a web page was last updated. You can use the document.write() method to display the property value. Add the code in red to your document. 14 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

15. Resave and preview your document in your browser. The date and time of when you saved the file should be displayed. Note: You can format the output of the time by using the Date object built into your scripting language. 15 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

16. document.URL The document.URL property will store the URL of the document. You can again use the document.write() method. Add the code in red to your document. document.write(" "); document.write(document.lastModified); document.write(" "); document.write(document.URL); Sample Code 1c 16 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

17. Resave and preview your document in your browser. The file location where you saved the file should be displayed. 17 Simple NAMEScript Program Here is my output. #336699 07/02/2013 09:28:15 file//C:\UNT Web Tech Curriculum 2013\Script\ScriptSampleCode.htm Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

18. Variables The computer can temporarily store data for processing in its memory. The computer's memory is divided into blocks. The named blocks are knows as variables.. var count; A storage box named count is created and is ready to store a value. This is called declaring a variable. 18 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

19. count = 20; Initializing Variables Before a variable can be used, it must be initialized, or assigned a value. 20 The numeric value of 20 is placed within the block named count. 19 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

20. A scripting program may create many different variables that may be accessed many times throughout a program’s operation. 20 undefined Variables without assigned values hold an “undefined” value until they are initialized. 20 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

21. Variable Names For the most part, you have a lot of flexibility in what you can name variables, but some words in scripting languages are not allowed. These are called reserved words. Reserved Words in Scripting Languages breakelseinthis casefalsenewtypeof continuefornullvar defaultfunctionreturnwhile deletegotoswitchwith doiftrueadd Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

22. Arithmetic Operators Most of the arithmetic operators used in scripting languages are the same that you would use in your math class with some differences. Arithmetic Operators Addition+ Adds values together Subtraction- Subtracts numeric values Multiplication* Multiplies numeric values Division/ Divides numeric values; cuts off decimal of integers Modulus% Divides integers and gives only the remainder 22 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

23. Variables can, and often do, change their values throughout a program as it runs. All you have to do to change the value of a variable is simply reassign it a new value. X=10 would reassign a new value to X. Using Variables 23 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

24. 1 2 3 NAMEScript Program 2 4 5 6 Using Variables 7 8 var x; 9 x=5; 10 document.write("The value of x is "); 11 document.write(x); 12 13 Try changing the value of the variable x on line 8. 14 15 Open program2.htm in your text editor and add the code shown in orange. Sample Code 2 24 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

25. Try changing the value assigned to variable x to 8. The value displayed for X should become 8. Open program2.htm and preview in your browser 25 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

26. 7 8 var x; 9 x=8; 10 document.write("The value of x is "); 11 document.write(x); 12 This program declares and assigns a value to the variables on separate lines. Line 8 declares the variable x. Line 9 assigns the value of 8 to variable x. You can also declare and assign a variable in a single step: var x=8; 26 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

27. 7 8 var x; 9 x=5; 10 document.write("The value of x is "); 11 document.write(x); 12 Line 10 displays a string, or a line of text, to the screen, but line 11 will display the value of x. Line 11 does not use quotes around the x because x is not a string, but a value. If x was in quotes, the output would be the character ‘x’, not 5 (the value of the variable x). 27 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

28. Functions A function is similar to a method. Functions are user created and focus on accomplishing a single task. 28 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

29. 1 2 3 NAMEScript Program 3 4 5 function hello() 6 { 7 window.alert("Hello World"); 8 } 9 10 11 12 Sample NAMEScript Program 13 14 Open program3.htm in your text editor and add the code shown in red. Sample Code 3a 29 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

30. 5 function hello() 6 { 7 window.alert("Hello World"); 8 } The function name created in Program 3 is named hello( ). The function definition begins with the word function to indicate that a function is being created; it is followed by the name of the function. Function names always include the parameters, ( ), after them. All the lines of code that make up the function are contained within curly braces { }. 30 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

31. 5 function hello() 6 { 7 window.alert("Hello World"); 8 } If you were to run this file in your browser, the heading of the page (Sample NAMEScript Program) would be the only thing that would show up. However, that doesn’t mean that the program didn’t work. Even though you create a function, it will not execute until you tell it to. In order to tell a function to execute, you create a function call. 31 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

32. Sample NAMEScript Program hello(); Add the code in red to Program 3 When you call a function, you are essentially calling its name. When it hears its name, it will execute. The name of the function is hello(), so the function call is hello();. Sample Code 3b 32 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

33. Sending values to a function 33 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

34. These are the two variables that the function will be adding together. These variables are automatically declared when they are included inside the functions’ parameters. The function call add(2,2) would output 4. Function with Arguments function add(a, b) { var c = a+b; document.write(c); } The parameters of the function add() contain an a and a b. 34 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

35. Sample NAMEScript Program var visitor = “yourname”; hello(visitor); Add the code shown in red to the body of your document. Sample Code 3c 35 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

36. function hello(person) { window.alert("Hello “ + person); } Add the code shown in red to the hello() function of your document. You can combine a variable with another variable or literal string as shown here. The + operator is also used to combine strings in addition to adding numeric values. The process of combining strings is called concatenation. Sample Code 3d 36 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

37. When you run the document, you should get the result shown below. 37 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

38. Sample NAMEScript Program var visitor = prompt(“Enter your name”, “”); hello(visitor); Add the code shown in red to the body of your document. User Entered Values 38 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

39. Using Forms in Scripting Scripting provides tools for calling functions and methods when certain events occur, such as when a page loads or when you move your mouse over a specific object on the page. These tools are called event handlers. Event handlers are attributes that are added to standard HTML tags that are set equal to the function name you want to execute. 39 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

40. onAbortExecutes code when the user aborts loading an image onBlurExecutes code when the window loses focus onClick Executes code when the user clicks on a regular, radio, or submit button onMouseOver Executes code when the mouse is over a particular object, area, or link onMouseOut Executes code when the mouse leaves a particular object, area, or link onChange Executes code when input focus exits the field after the user modifies text Event Handlers 40 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

41. 41 onError Executes code when an error occurs while a document or image is being loaded onFocusExecutes code when a field comes in focus onLoadExecutes code when a window or image finishes loading onSelect Executes code when the user selects some of the text within a textarea field onSubmitExecutes code when the form is submitted onUnloadExecutes code when a document is exited Event Handlers Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

42. Applying Event Handlers Below is an example of using an event handler to call a function. The example uses the onClick event handler. function add(a,b) { alert(a+b); } When the button is clicked, the function add is called. 42 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

43. Retrieving Data From a Form Much of the data used by scripting functions is entered into a web form by a visitor to the web site. The scripting function is able to retrieve the data from the form by specifying the path to the value it needs. 43 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

44. Create a new document in your notepad software and start with the following tags: Sample Code 4 Save the file as jsforms.htm 44 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

45. Add the following web form in the body section of your document. Sample Code 5 45 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

46. function update() { name = document.nameUpdate.name2.value; document.nameUpdate.name1.value = name; } Add the following function to the heading of your document between the script tags. Sample Code 6 46 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

47. Sample Code 7 Add the event handler to the name2 field. The update() function will be called when the key is released while typing in the name2 field. 47 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

48. Resave and enter text in the right text field. The text should be copied to the left text field. 48 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

49. Remove everything between the script tags and the body tags. Resave the file as calculator.htm Sample Code 8 49 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

50. First Number Second Number Sample Code 9 Add the following form to your document. Copy the code from your handout. 50 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

51. function addnum() { } function subtract() { } function multiply() { } function divide() { } function modulus() { } Stub Functions Stub functions are empty functions that are added to test code functionality. Add the stub functions shown here between the script tags of your document. Sample Code 10 51 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

52. Save the document and preview it in your browser. You should be able to click each button without getting an error. STOP: Correct any errors before moving on. 52 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

53. function addnum() { //get values num1 = document.calculator.num1.value; num2 = document.calculator.num2.value; //convert to numerical values num1 = eval(num1); num2 = eval(num2); //calculate result result = num1 + num2; //place result back in form document.calculator.result.value = result; } Sample Code 11 Add the following code to the addnum() function on your document. 53 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

54. Resave the document and test the + button to make sure it calls the addnum() function without error. 54 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

55. function subtract() { } function multiply() { } function divide() { } function modulus() { } Complete the code for the remaining functions on your own, making sure that each works properly without error when called. You can copy and paste the code from the addnum function to the remaining functions and just change the operator. 55 Sample Code 12 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

56. First Number Second Number Customizing the Form Appearance Change the size of the input fields to 5. Sample Code 13 56 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

57. In the heading of the document, add an opening and closing style tag below the opening head tag. Sample Code 14 57 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

58. form {background-color: #ededed; border: solid #000000 3px; font-family: Arial; }.result {text-align: right}.button {background-color: #000099; color: #ffffff } Sample Code 15 58 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

59. First Number Second Number Sample Code 16 Apply the classes to the result field and each of the buttons. 59 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.

60. Resave and preview your calculator in your browser. Your output should resemble the example below. 60 Scripting with Client Side Processing Lesson – Web Technologies Copyright © Texas Education Agency, 2013. All rights reserved.