Lesson Plan. Course Title: Web Technologies

Transcription

1 Lesson Duration: 4 hours Lesson Plan Course Title: Web Technologies Session Title: Scripting with Client-Side Processing (NOTE: This lesson should follow the Web Forms lesson) Performance Objective: Upon completion of the lesson, students will understand and be able to create simple Scripting programs and process data entered into a web form. Specific Objectives: Students will be able to create simple scripts understand and utilize variables within their scripts output data to the screen create and use scripting functions successfully pass data from a form to a scripting function Preparation TEKS Correlations: (9) The student employs knowledge of web programming to develop and maintain web applications. The student is expected to o (C) Articulate the advantages and disadvantages to client-side processing; o (D) Identify issues related to client-side processing; and o (E) Use standard scripting languages to facilitate interactivity. Instructor / Trainer Instructional Aids: Scripting presentation Scripting student files Materials Needed: Printout of the sample code for each student Printout of the presentation for each student in notes format Lab exercises 1 & 2 printed for each student Quiz printed for each student Equipment Needed: Projector for the scripting presentation Computers for each student Learner

2 Introduction MI Introduction (LSI Quadrant I): Search for simple online games using scripting languages. Demonstrate to the students some of the games created using a scripting language. Explain to the students that scripting languages are powerful tools for creating interactive websites. Explain to students that scripting languages can be used for other purposes as well, such as processing forms and creating dynamic content on web pages. Outline MI Outline (LSI Quadrant II): Instructor Notes: I. Introduction to the scripting lesson II. III. IV. Introduction to programming a. What is Programming? b. Programming Languages Examining a script program a. Objects i. Document objects ii. Object properties Variables a. Initializing variables b. Variable names c. Arithmetic operators V. Functions a. Creating functions b. Passing values to functions VI. VII. Using forms with scripting software a. Event handlers b. Retrieving data from forms Creating a simple calculator VIII. Students complete hands-on labs 1 and 2 on their own IX. End of Lesson Quiz 2

3 Application MI Guided Practice (LSI Quadrant III): As the instructor presents the lesson, the students should be following along on their computers and entering the sample codes as demonstrated. During the presentation, guide the students through creating a simple script calculator. MI Independent Practice (LSI Quadrant III): Following the lecture and guided practice, the students should complete the handson lab exercises 1 & 2. Summary MI Review (LSI Quadrants I and IV): The instructor should go over the lab exercises, pointing out how the programs work and how data flows. It is important that students understand the sequence of how data flows and is passed from the forms to the script functions. Evaluation MI Informal Assessment (LSI Quadrant III): As students are working on the lab exercises, observe to make sure they understand the logic of the lab and that they are creating the forms and script functions properly. During any error corrections, point out why what the student did that caused the error. MI Formal Assessment (LSI Quadrant III, IV): Following the lesson, give the students the script quiz over the concepts presented. Extension MI Extension/Enrichment (LSI Quadrant IV): The instructor can give students more challenging exercises such as creating simple games like blackjack. In order to complete games, to the instructor should introduce students to random number generation. 3

4 Icon MI Teaching Strategies Verbal/ Linguistic Logical/ Mathematical Visual/Spatial Musical/ Rhythmic Bodily/ Kinesthetic Intrapersonal Interpersonal Lecture, discussion, journal writing, cooperative learning, word origins Problem solving, number games, critical thinking, classifying and organizing, Socratic questioning Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video, DVD, charts, maps Use music, compose songs or raps, use musical language or metaphors Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, roleplaying, action problems Reflective teaching, interviews, reflective listening, KWL charts Cooperative learning, roleplaying, group brainstorming, cross-cultural interactions Personal Development Strategies Reading, highlighting, outlining, teaching others, reciting information Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information Developing graphic organizers, mindmapping, charting, graphing, organizing with color, mental imagery (drawing in the mind s eye) Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling Studying in a group, discussing information, using flash cards with other, teaching others Naturalist Existentialist Natural objects as manipulatives and as background for learning Socratic questions, real life situations, global problems/questions Connecting with nature, forming study groups with like-minded people Considering personal relationship to larger context 4

5 Name: Date: Period: Scripting Code Samples from Lecture Sample Code 1a NOTE: Throughout this lesson, NAME (as seen here) is the name of the scripting language you are using. <html> <head> <style> body background-color: #336699; color: #ffffff </style> <title>sample NAMEScript Program 1</title> </head> <body> <h2>simple NAMEScript Program</h2> <script language="namescript"> document.write("here is my output."); document.write("<br />"); document.write(document.bgcolor); </script> </html> Sample Code 1b document.write("<br />"); document.write(document.bgcolor); document.write("<br />"); document.write(document.lastmodified); </script> </html> Sample Code 1c document.write("<br />"); document.write(document.lastmodified); document.write("<br />"); document.write(document.url); </script> </html> 5

6 6

7 Sample Code 2 <html> <head> <title>namescript Program 2</title> </head> <body> <h2>using Variables</h2> <script language= NAMEScript > var x; x=5; document.write("the value of x is "); document.write(x); </script> <p>try changing the value of the variable x on line 8.</p> </html> Sample Code 3a (4 sets Enter when instructed) <html> <head> <title>namescript Program 3a</title> <script language= NAMEScript > function hello() window.alert("hello World"); </script> </head> <body> <h1>sample NAMEScript Program</h1> </html> Sample Code 3b <body> <h1>sample NAMEScript Program</h1> <script language= NAMEScript > hello(); </script> </html> 7

8 Sample Code 3c <body> <h1>sample NAMEScript Program</h1> <script language= NAMEScript > var visiter = yourname ; hello(visiter); </script> </html> Sample Code 3d function hello (person) window.alert("hello"+ person); Sample Code 4 <html> <head> <script> </script> </head> <body> </html> Sample Code 5 <form name="nameupdate"> <input type="text" name="name1"disabled="true"> <input type="text" name="name2"> </form> 8

9 Sample Code 6 <head> <script> function update() name = document.nameupdate.name2.value; document.nameupdate.name1.value = name; </script> </head> Sample Code 7 <form> <input type="text" name="name1"disabled="true"> <input type="text" name="name2" onkeyup= update() > </form> Sample Code 8 <html> <head> <script> </script> </head> <body> </html> 9

10 Sample Code 9 <body> <form name= calculator > <input type= text name= result disabled= true ><br /> First Number <input type= text name= num1 ><br /> Second Number <input type= text name= num2 ><br /> <br> <input type= button value= + onclick= addnum() > <input type= button value= - onclick= subtract() > <input type= button value= * onclick= multiply() > <input type= button value= / onclick= divide() > <input type= button value= % onclick= modulus() > </form> Sample Code 10 <script> function addnum() function subtract() function multiply() functiondivide() functionmodulus() <script> 10

11 Sample Code 11 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 12 function subtract() function multiply() function divide() function modulus() 11

12 Sample Code 13 <body> <form name= calculator > <input type= text name= result disabled= true ><br /> First Number <input type= text name= num1 size= 5 ><br /> Second Number <input type= text name= num2 size= 5 ><br /> Sample Code 14 <html> <head> <style> </style> <script> Sample Code 15 <html> <head> <style> form background-color: #ededed; border: solid # px; font-family: Arial;.result text-align: right.button background-color: ; color: #ffffff </style> <script> 12

13 Sample Code 16 <body> <form name= calculator > <input type= text name= result disabled= true class= result ><br /> First Number <input type= text name= num1 size= 5 ><br /> Second Number <input type= text name= num2 size= 5 ><br /> <br /> <input type= button value= + onclick= addnum() class= button > <input type= button value= - onclick= subtract() class= button > <input type= button value= * onclick= multiply() class= button > <input type= button value= / onclick= divide() class= button > <input type= button value= % onclick= modulus() class= button > </form> 13

14 Name: Date: Period: Script Lab Exercise 1 1. Open your text editor. 2. Type the sample program shown below. NOTE: NAME should be replaced with the name of the scripting language you are using. 3. The document.write() method can be used to output HTML code as well as plain text and HTML code. Table shown between the script tags should be output using 8 document.write() methods. 4. The opening table tags, along with the table properties, should be output in the first document.write() method. 5. Each of the 6 rows of the table should then be output using separate document.write() method. 6. The closing table tag should then be output using another document.write() method. 7. The table should have a width of 600, be aligned to the center, and have a border of The left cells should have a width of Save the file as Lab1.htm. 10. Preview the document in your web browser. <html> <head> <title> Your Name </title> </head> <body> <h1>simple NAMEScript Program</h1> <script language = "NAMEscript"> document.write("<h3 align=\ center\ >The Document Object</h3>"); Output this table on your screen Methods of the Document Object document.write() Writes data to the screen document.writeln() Writes data with a new line character document.open() Opens a new document stream document.close() Closes a document stream document.clear() Clears a document of its contents (not used) </script> </html> NOTE: If your table does not show up when you preview your document, check for the following common errors: Misspelled or omitted opening or closing script tags. 14

15 Quotation mark out of place within the document.wirite() method. Capital letter where a lower case letter should be on the document.write() method. The slashes before the quotes ( \ ) in the output of the document.write() method instruct the browser to ignore those particular quotes when interpreting the scripting code and to include them as part of the output. document.write("<h3 align=\ center\ >The Document Object</h3>"); 15

16 Name: Date: Period: Script Lab Exercise 2 1. Open your text editor. 2. Setup a basic HTML document and include both the heading and the body sections. 3. Set the background color of the document to # and the text color to #ffffff. 4. In the opening body tag, add the onload event handler to call the dealer() function when the page loads. 5. Below the opening body tag, add Simple BlackJack! as a centered level 1 heading. You will now create the form shown here inside a one-cell table. Follow the steps below very carefully so that the form is constructed properly. 6. Open a table tag, set the width of the table to 350 and the background color of the table to #00aa00, and center the table on the screen. 7. Within the cell of the table, open a form tag and name the form cardtable. 8. Add the label Dealer Cards: as shown above followed by two text fields. The first text field should be named dealer1 and the second should be named dealer2. Both should be have a size of Add a line break. 10. Next add the label Your Card Total: followed by a text field named player with a size of Add a line break. 12. On the next line, you will create three buttons. Each button will call a function that we will define within the heading of the document. Deal Card Button 13. The button should be named deal but display Deal Card on the button. The button should call the dealcard() function when clicked. (Use the onclick event handler). Stand Button 14. The button should display Stand and call the stand() function when clicked. New Game Button 15. The button should display New Game and call the dealer() function when clicked. 16. Save the file as Lab2.htm and preview it in your browser to make sure everything shows up. Your screen should resemble the example shown here. If not, fix any errors before moving on. 16

17 17. Move into the heading section and open a set of script tags. 18. At the top of the script section, declare three variables called player, dealer1, and dealer2, and initialize all to Create the following stub functions within the script section. Creating the dealer() Function function dealer() function stand() function dealcard() 20. Move into the dealer function and add the following line of code. document.cardtable.deal.disabled=false; This line of code will make sure that the deal button is enabled. Random Number Notes (Do not type this information) Scripts can generate random numbers; the code below will return a random floating point number (number with a decimal point) ranging from 0 to 4. (Use one number higher than you want the random number to be) var num = Math.randon()*5; To remove the decimal and convert the number to an integer, use the Math.floor() method. num = Math.floor(num); 21. Within the dealer() function, use the Math.random() and Math.floor() methods to generate a random integer between 1 and 11 and assign it to the dealer1 variable. NOTE: You will need to add 1 to the number generated because it starts at Generate another random integer between 1 and 11 and assign it to dealer2 variable. 23. Generate a third random integer, this time between 2 and 22, and assign it to the player variable. 24. The function should then place the value of dealer1 into the form field named dealer Next, place the text hidden into the form field named dealer Then place the value of player into the form field named player. 27. Move to the body tag of the document and add the onload event handler to run the dealer() function when the page loads. 17

18 Creating the stand() Function 28. Place your cursor between the curly braces of the stand() function. 29. Place the value of the dealer2 variable into the form field named dealer Next, add the following line of code to deactivate the deal button: document.cardtable.deal.disabled=true; Creating the dealcard() Function 31. Move your cursor to inside the curly braces of the dealcard() function. 32. Declare a variable called card and assign it a random integer between 1 and 11. (look back up at the Random Numbers notes under Creating the dealer() Function section) 33. Increase the value of the player variable by the value of the card variable player = player + card; 34. Place the new value of player into the form field named player. 35. Resave the document and test it in your browser. Check each button to make sure each calls its appropriate functions, and make sure each function operates properly. 18

19 Name: Date: Period: Script Quiz 1. Machine language consisting of 1s and 0s A. Script B. Binary Code C. ASCII D. None of the above 2. Scripting is considered what type of language? A. Server side scripting language B. Compiled language C. Client side scripting language D. Formatting language 3. The operator separating the document and its method or property is called the A. dot access operator B. modules operator C. addition operator D. object operator 4. Which is the correct command to output content to a web page? A. document.write() B. document.print() C. document.open() D. document.display() 5. Which document property can modify the background color of the document? A. document.fgcolor B. document.bgcolor C. document.background D. document.bgcolor 6. Which document property can tell when the document was last updated? A. document.lastupdated B. document.modified C. document.lastmodified D. document.update 7. A named location in the computer s memory that can store a value is referred to as a A. variable B. string C. operator D. method 8. What scripting words have a specific purpose and cannot be used for any other purpose? A. strings B. reserved words C. operators 19

20 D. properties 9. Which arithmetic operator returns the remainder only when dividing two integers? A. Division operator B. Overloaded operator C. Multiplication operator D. Modules operator 10. A grouping of code which performs a related action and can be reused is called a A. statement B. program C. segment D. function 11. The process of connecting two or more strings or variables is called A. connecting B. assembling C. concatenation D. operating 12. A tool that can call a function when a specific action occurs is called what? A. Execution B. Variables C. Operator D. Event Handler 13. A function consisting of only the function heading and opening and closing curly brace is called what? A. An empty function B. A stub function C. A method D. A segment 14. Which command will call a function when a button is pressed? A. onclick B. onpush C. onbutton D. buttonpress 15. Which command will call a function when the document first loads? A. Run B. onload C. onstart D. onpageload 20

21 Script Quiz - KEY 1. Machine language consisting of 1s and 0s. A. Script B. Binary Code C. ASCII D. None of the above 2. Scripting is considered what type of language? A. Server side scripting language B. Compiled language C. Client side scripting language D. Formatting language 3. The operator separating the document and its method or property is called the A. dot access operator B. modules operator C. addition operator D. object operator 4. Which is the correct command to output content to a web page? A. document.write() B. document.print() C. document.open() D. document.display() 5. Which document property can modify the background color of the document? A. document.fgcolor B. document.bgcolor C. document.background D. document.bgcolor 6. Which document property can tell when the document was last updated? A. document.lastupdated B. document.modified C. document.lastmodified D. document.update 7. A named location in the computer s memory that can store a value is referred to as a A. variable B. string C. operator D. method 8. What scripting words have a specific purpose and cannot be used for any other purpose? A. strings B. reserved words C. operators D. properties 21

22 9. Which arithmetic operator returns the remainder only when dividing two integers? A. Division operator B. Overloaded operator C. Multiplication operator D. Modules operator 10. A grouping of code which performs a related action and can be reused is called a A. statement B. program C. segment D. function 11. The process of connecting two or more strings or variables is called A. connecting B. assembling C. concatenation D. operating 12. A tool that can call a function when a specific action occurs is called what? A. Execution B. Variables C. Operator D. Event Handler 13. A function consisting of only the function heading and opening and closing curly brace is called what? A. An empty function B. A stub function C. A method D. A segment 14. Which command will call a function when a button is pressed? A. onclick B. onpush C. onbutton D. buttonpress 15. Which command will call a function when the document first loads? A. Run B. onload C. onstart D. onpageload 22