1 / 22

Week Three: Using Scripts and Forms in HTML (Week Three)

Week Three: Using Scripts and Forms in HTML (Week Three). By Dr Fadi Safieddine. Lecture Content. Using Scripts in HTML How to insert Scripts? Essential Codes Demonstration Important notes Using Forms in HTML Using combinations of Forms and Scripts. What is a script?.

danno
Download Presentation

Week Three: Using Scripts and Forms in HTML (Week Three)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Week Three: Using Scripts and Forms in HTML(Week Three) By Dr Fadi Safieddine

  2. Lecture Content • Using Scripts in HTML • How to insert Scripts? • Essential Codes • Demonstration • Important notes • Using Forms in HTML • Using combinations of Forms and Scripts.

  3. What is a script? • A scripts is a small piece of program that you can add to your HTML page. • We have two (main) languages: JavaScript and Visual Basic Scripts. • JavaScript is the most popular in the market. • Today we only focus on ‘Client-side’ scripts.

  4. How to insert a script? • To insert a script to an HTML page, we would use the script tag <script>….</script>. • The Web page would want to know what programming scripts is it :(Java/VP script). So in attribute type we specify the type: • <script type="text/javascript">… </script>

  5. How to insert a script? • Some essential codes in JavaScript: • document.write("….."); to write one line. • document.writeln("…."); to write one line and move cursor to next line. • window.alert("…."); to show a warning message, similar to ‘MsgBox’ in VB. • window.prompt("….", ".."); to request input from user, similar to "InputBox" in VB. First value is for ‘message’ and second value is for ‘default value’. Example window.prompt("Input value", "0");

  6. Branching • Some essential code in JavaScript: • if (condition) {action} else {action}; Used when we have possible choices and conditions checks. Example: • if (grade>=50) { • document.writeln(" Pass") • } • else { • document.writeln("Fail") • }; • Please note that if you want to check that Grade is equal to a value, you have to say: • if (grade == 90) …etc

  7. Looping • Used when we have loop that needs to satisfy a condition before moving on. Example: • while (condition) (action); • var count; // defining variable • count = 0; // initializing variable. • while (count <= 3) { // condition of variable document.writeln( "Hello!!") • count = count + 1 • }; • This loop will print on the page ‘Hello!!’ three times.

  8. Looping (2) • for (condition) (action); • Example: • for (a=0; a<=3; a++){ • document.writeln( "Hello!!") • }

  9. How to insert a script? • Take a look at the following code: <script type= "text/javascript" > var name, count; count = 0; while (count < 3) { name = window.prompt("Can you guess your WSD tutor's name?","0"); if (name == "Fadi") { count = 3; window.alert("Correct Answer!"); document.writeln("Well done, you have a good memory"); } count = count + 1; } if (name != "Fadi") { document.writeln("I cannot believe you forgot my name!! Its Fadi!"); } </script>

  10. How to insert a script? • Important notes: • You can insert your script both in the HEAD and in the BODY areas of your document. • Be warned, if you make a mistake the website will not tell you the mistake…it would just not work! • Use Firefox’s JavaScript console to see JavaScript errors (CTRL+SHIFT+J) • Keep it simple.

  11. How to create an HTML Form? • Forms represent a mechanism to collecting or processing information from people viewing the website. • We will demonstrate basic forms now and later during the term we see how we can use them to connect to a database.

  12. How to create an HTML Form? • Lets start by viewing how to create two objects on an HTML page: Text Box and buttons. • To create a text box: • <input name="year" type="text" size="25"> • We specify name for object, a type, and size.

  13. How to create an HTML Form? • To create a button: • <input type="button" value="Calculate my age"> • We specify name for object, and caption is stored in ‘value’. This will display a button with caption saying ‘Calculate my age’ • Note that these codes appear with in the body tags <body>…</body>.

  14. How to create an HTML Form?

  15. Other objects codes • Create a multi-line text box: • Your Comments:<textarea name= "comments" rows= "4" cols="36"> </textarea> • Create a radio box: • Select Gender: <input name= "gender" type = "radio" value="Male"> Male … • You always need at least 2 radio buttons. • Create check box: • Do you want reply? <input name= "reply" type= "checkbox" value ="Require reply">

  16. Other objects codes • Create drop down menu: • Rate my website: • <select name = "rating"> • <option selected="selected"> Amazing :-) • <option value="9-7"> 9 – 7</option> • <option value="7-5"> 7 – 5 </option> • <option value="5-3"> 5 – 3 </option> • <option value="3-0"> 3 – 0 </option> • </select>

  17. Combining Scripts with Forms! This would allow you to create a form of interactive web page. The interactivity takes place on the page itself and not on the server. So we call it ‘Client side’ scripting.

  18. Combining Scripts with Forms! • We first need to specify to the ‘script’ what event would trigger the action. Events such as ‘onclick’, ‘onload’, ‘onmouseover’…etc. • The script would also call for the action to take place on the HTML forms.

  19. Combining Scripts with Forms (2)! • Say we want a script to take your year of birth and then tell you how old you are. • The HTML form would contain this code: <p> When is your birth year? </p> <script type="text/javascript"> function calculateAge() { var age; var year_birth = document.getElementById("year").value; age = 2010 - year_birth; alert('You will be '+ age + ' years old by the end of this year') ; } </script> <form> <input name = "year" ID="year" type = "text" size ="25"> <input type = "button" value ="Calculate my age" onclick ="calculateAge()"> </form>

  20. For this week: • You will be working on HTML during the tutorial and practicals. • Next Week you will be practicing scripts and forms in your tutorials and practicals.

  21. Reminder: • Please check your assignment online. • The first stage is static, it doesn’t have to work. • Focus on completing the Web pages, being creative, and enhancing the design.

  22. Further reading • Flanagan, D. (2006) JavaScript: The Definitive Guide, 5th edition. O’Reilly. • Baravalle, A. (ed) (2008) Open JavaScript Guide [online]. Available from http://sourceforge.net/projects/javascriptguide/files/ [Accessed 08/10/2010] • Deitel, H. M., Deitel, P. J., Nieto, T. R. (2000). E-business & e-commerce: how to program, pp. 364 – 485.

More Related