03 Dynamic HTML clientside scripting Mark Dixon Page
- Slides: 27
03 – Dynamic HTML (client-side scripting) Mark Dixon Page 1
Questions: HTML Consider the following HTML: <a href=“next. htm”>Next Page</a> a) Give an example of a tag <a> </a> <a href=“next. htm”> b) Give an example of an element <a href=“next. htm”>Next Page</a> c) Give an example of an attribute href=“next. htm” Mark Dixon Page 2
Questions: HTML a) Is the following a tag? No (element) <b>Hello</b> b) Is the following an element? No (start tag) <font size=+2> c) Is the following an attribute? No (start tag) <img src=“Car. jpg”> d) How many tags are there in: 4 <center><b>Title</b></center> e) How many attributes are there in: 2 <font color=“green” size=3> Mark Dixon Page 3
Session Aims & Objectives • Aims – introduce you to the fundamental aspects of dynamic (interactive) web pages via client-side scripting • Objectives, after this week’s sessions, you should be able to: – Add objects to a web-page – Create Event Handler Procedures to do things in response to an event of a object – Put Assignment instructions in the event handler, that change the value of properties at run-time – Enable and use the Interactive Debugger, and the immediate window Mark Dixon Page 4
Dynamic processing (what) • HTML is static – identical on each load – very limiting • Dynamic processing – client-side: browser (this week) • quicker (no request-response cycle) • insecure (view source) • limited (can't access server-side databases) – server-side: server application (next term) • slower • more powerful Mark Dixon Page 5
Example: Colour Change Trigger (when) • Events: – Click: user releases left mouse button on object – Mouse. Over: mouse moves over object – Mouse. Out: mouse moves off object Mark Dixon Actions (what) Click event of Red Change background button to Red Mouse. Over event Make button text of Red button capitals (RED) Mouse. Out event Make button text of Red button normal (Red) Click event of Blue Change background button to Blue Mouse. Over event Make button text of Blue button capitals (BLUE) Mouse. Out event Make button text of Blue button normal (Blue) Page 6
Active Content • Allow active content: Mark Dixon Page 7
<Input> Tags <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="Re onclick="btn. Red_On. Click()" onmouseover="btn. Red_On. Mouse. Over()" onmouseout="btn. Red_On. Mouse. Out()" /> <input id="btn. Blue" type="button" value="Bl </body> </html> <script language="javascript"> function btn. Red_On. Click(){ document. bg. Color = "red"; } function btn. Red_On. Mouse. Over(){ btn. Red. value = "RED"; } • Use <input> tags to create buttons Mark Dixon function btn. Red_On. Mouse. Out(){ btn. Red. value = "Red"; } </script> Page 8
<Script> Tag <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R onclick="btn. Red_On. Click()" onmouseover="btn. Red_On. Mouse. Over()" onmouseout="btn. Red_On. Mouse. Out()" /> <input id="btn. Blue" type="button" value="B </body> </html> <script language="javascript"> function btn. Red_On. Click(){ document. bg. Color = "red"; } • Use <script> tags to enclose script code Mark Dixon Java Script function btn. Red_On. Mouse. Over(){ btn. Red. value = "RED"; } function btn. Red_On. Mouse. Out(){ btn. Red. value = "Red"; } </script> Page 9
Event Handler Procedures <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R onclick="btn. Red_On. Click()" onmouseover="btn. Red_On. Mouse. Over()" onmouseout="btn. Red_On. Mouse. Out()" /> <input id="btn. Blue" type="button" value="B </body> </html> <script language="javascript"> function btn. Red_On. Click(){ document. bg. Color = "red"; } Event Handler Procedure function btn. Red_On. Mouse. Over(){ btn. Red. value = "RED"; } function btn. Red_On. Mouse. Out(){ btn. Red. value = "Red"; } Mark Dixon </script> Page 10
Objects & Events <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="Red onclick="btn. Red_On. Click()" onmouseover="btn. Red_On. Mouse. Over()" onmouseout="btn. Red_On. Mouse. Out()" /> <input id="btn. Blue" type="button" value="Blue </body> </html> <script language="javascript"> function btn. Red_On. Click(){ document. bg. Color = "red"; } Object Event function btn. Red_On. Mouse. Over(){ btn. Red. value = "RED"; } function btn. Red_On. Mouse. Out(){ btn. Red. value = "Red"; } </script> Mark Dixon Page 11
Instructions <html> <head><title>Colour Change</title></head> <body> <input id="btn. Red" type="button" value="R onclick="btn. Red_On. Click()" onmouseover="btn. Red_On. Mouse. Over()" onmouseout="btn. Red_On. Mouse. Out()" /> <input id="btn. Blue" type="button" value="B </body> </html> <script language="javascript"> function btn. Red_On. Click(){ document. bg. Color = "red"; } • Assignment: Object. Property = Literal function btn. Red_On. Mouse. Over(){ btn. Red. value = "RED"; } function btn. Red_On. Mouse. Out(){ btn. Red. value = "Red"; btn. Red. Value = "Red" Mark Dixon } </script> Page 12
Sequence • Inside event procedures – lines executed in sequence Mark Dixon Page 13
• Order is important: data flow btn. Red. Value = "Red"; destination (must be object property) source (object property or literal) • The above means: put "Red" into the Value of btn. Red Mark Dixon Page 14
Assignment Errors btn. Red. Value = "Red"; put "Red" into the Value of btn. Red "Red" = btn. Red. Value; put the Value of btn. Red into "Red" btn. Red. Value = document. bg. Color; put the bg. Color of the document into the Value of btn. Red 67 = document. bg. Color; put the bg. Color of the document into 67 Mark Dixon Page 15
Example: Puppy <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes her <a href="toy. wmv">toy</a>. </p> <center><img id="pic. Face" src="Face. jpg" /></center> <input id="btn. Puppy" type="button" value="Large" onclick="btn. Puppy_On. Click()" /> </body> </html> <script language="javascript"> function btn. Puppy_On. Click(){ document. title = "Freya (large image)"; pic. Face. src = "Face. Large. jpg"; } </script> Mark Dixon Page 16
Example: Puppy (code) <html> <head><title>Freya's web page</title></head> <body> <p>Welcome, <b>Freya's</b> web page. </p> <p>Freya likes her <a href="toy. wmv">toy</a>. </p> <center><img id="pic. Face" src="Face. jpg" /></center> <input id="btn. Puppy" type="button" value="Large" onclick="btn. Puppy_On. Click()" /> </body> </html> <script language="javascript"> function btn. Puppy_On. Click(){ document. title = "Freya (large image)" pic. Face. src = "Face. Large. jpg" } </script> Mark Dixon picture and button, given identifiers (names) Script ignored, until button pressed Page 17
Question: Parts of Code In the following code, name: function btn. Puppy_On. Click(){ document. title = "Puppy (large image)"; pic. Face. src = "Face. Large. jpg"; } a) b) c) d) e) Mark Dixon a property a keyword an object an event handler title src function document pic. Face click btn. Puppy_On. Click Page 18
Question: Assignment Which of the following are valid: document. bg. Color = ; document. bg. Color = "red"; "red" = document. bg. Color; document = "red"; btn. Red = "Hello"; Mark Dixon Page 19
Example: Ball Character (design) Trigger (when) Actions (what) click event of Right button move ball character right click event of Left button move ball character left click event of Up button move ball character up click event of Down button move ball character down Mark Dixon Page 20
Absolute Positioning pic. Ball. style. pos. Top pic. Ball. style. pos. Left pic. Ball. height pic. Ball. width document. body. client. Width • change properties – change position Mark Dixon Page 21
Example: Ball Character (script) <html> <head><title>Ball Character</title></head> <body bgcolor="#00 ff 00" onload="Window_On. Load()"> <input type="button" id="btn. Right" value="Right" onclick="btn. Right_On. Click()" /> <input type="button" id="btn. Down" value="Down" onclick="btn. Down_On. Click()" /> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute </body> </html> <script language="javascript"> function Window_On. Load(){ pic. Ball. style. posl. Left = 200; pic. Ball. style. pos. Top = 100; } function btn. Right_On. Click(){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 10; } function btn. Down_On. Click(){ pic. Ball. style. pos. Top = pic. Ball. style. pos. Top + 10; } </script> Mark Dixon Page 22
Substitution • Right hand side of assignment (after = sign) – contains expressions (calculations) Mark Dixon Page 23
Tutorial Exercise: Setup • LEARNING OBJECTIVE: to change your computer's settings so that Visual Studio works properly • TASK 1: Enable active content in Internet Explorer: 1. 1 Start Internet Explorer 1. 2 Click the Tools Menu 1. 3 Click the Internet Options Item 1. 4 Click the Advanced tab 1. 5 Ensure 'Disable Script Debugging' is unchecked 1. 6 Ensure 'Allow active content on My Computer' is checked 1. 7 Click the OK button 1. 8 Close Internet Explorer • TASK 2: Ensure Visual Studio uses the correct settings. 1. 1 Start Visual Studio 2005 1. 2 If it asks you to set the environment settings, choose Visual BASIC settings 1. 3 Click the Start Visual Studio button Mark Dixon Page 24
Tutorial Exercise: Colour Change • LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages • TASK 1: Get the Red button from the Colour Change example working. (the code is provided) • TASK 2: Get the Blue button working. (You will need to work out what code to use. Use the code provided as inspiration) • TASK 3: Add another button (you choose the colour). Mark Dixon Page 25
Tutorial Exercise: Puppy • LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages • TASK 1: Get the Puppy example working. (code provided, images in resources area on server). • TASK 2: Add a button, which changes the image back to the smaller picture. Mark Dixon Page 26
Tutorial Exercise: Ball Char • LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages • TASK 1: Get the Right and Down buttons from the Ball Character example working. (code provided, images in resources area on server). • TASK 2: Get the Left and Up buttons working. (You will need to work out what code to use. Use the code provided as inspiration) • TASK 3: Make the Ball Character blink when the user moves the mouse over it. (You will need to add code that changes the picture) • TASK 4: Add a button to move the Ball Character diagonally. (You will need two lines of code in the same event handler) Mark Dixon Page 27
Mark dixon artist
Mark dixon
Canvas доска
Slidetodoc.com
12.html?action=
Bhtml?title=
1
02.html?page=
Table in html
02.html?site=
01.html?page=
11.html?site=
Page html
Page html
02.html?page=
Page html
Html code
2016.html?site=
04.html?page=
01.html?page=
02.html?title=
Slidetodoc
Html code for creating web page
Html code for creating web page
Apa header
Dynamic html data binding
Spreidingsbreedte
George washington dixon
