Unit 20 - Client Side Customisation of Web Pages. Week 4 Lesson 5 Fundamentals of Scripting

Size: px

Start display at page:

Download "Unit 20 - Client Side Customisation of Web Pages. Week 4 Lesson 5 Fundamentals of Scripting"

Loraine Butler
5 years ago
Views:

1 Unit 20 - Client Side Customisation of Web Pages Week 4 Lesson 5 Fundamentals of Scripting

2 The story so far... three methods of writing CSS: In-line Embedded }These are sometimes called External } block methods all the CSS is blocked together. The CSS Box model Positioning

3 Fundamentals of Scripting Languages What a scripting language is How it works What types are available The main features How does a scripting language improve functionality Explain in detail how a browser implements a scripting language

4 Fundamentals of Scripting Languages Characteristics of scripting languages: Uses of a scripting language: Scripting language constructs:

5 Characteristics of scripting languages nature of language eg object oriented, event driven; objects; methods; handling events; hiding scripts; security issues eg reading, writing, client files, opening/closing user windows, reading information; including scripts inside HTML

6 Introduction Find definitions for the following terms: Interactivity Static website Dynamic website Interpret Go live Name some scripting languages.

7 Characterisitics Type of language Hiding scripts from older browsers Security issues Including scripts inside HTML

8 A snippet of code... <html> <head> <script> This is where the scripting language would be written. </script> </head> <body>lorem ipsum</body> </html>

9 Types of Scripting Language 2 modes of operation Event-driven Object-oriented Write a brief description of each. Include examples of each mode.

10 Types Object Oriented Code broken into Objects Self-contained modules Knows about itself Knows what it can do Knows what it can interact with Eg VBScript Event driven Code broken into Events Code is triggered when actions occur: Mouse click Key press Movement Transmission of data Eg Javascript

11 Older browsers May not support scripts Need to hide the script to avoid confusion Put the script within HTML comments <script> <!-- script code written here //--!> </script>

12 Security Scripts are executed on the clients PC Entry point for hackers Makes both client and website vulnerable Website owners (if unscrupulous) could also take advantage and read client s PC eg data-mining or reading other browser windows What law attempts to control this?

13 Uses of scripting language To provide interactivity. Interactivity 2-way communication between human and computer

14 Uses of scripting language To provide interactivity. You will need to include 3 different interactivities in your website later in this unit. What examples can you find? Find at least 5 different interactivities now. Reference the URLs Can you find the scripts which run these interactivities?

15 Uses of scripting language To provide interactivity. Alerts (pop-ups) Prompts and confirmation of choices Checking/validating input Handling forms Redirecting Rollover buttons Browser detection Cookies installing and maintaining

16 Designing interactivities For your website you must design interactivities. To do this you should use: Pseudo-code Flow diagrams

17 Pseudo code Code but not code Pseudo Code Age=input from user If age +> 18 then print onscreen I am an adult Else Print onscreen I am x years old JavaScript Age=prompt( Enter age, ); If (age>=18) {document.write( I am an adult );} Else {document.write( I am + age + years old );}

18 Flow diagram Input age Is user >=18? No I am x years old yes I am an adult

19 Design task Refer to two (or more) of the interactivities you previously discovered. Create a design for each using: Pseudo code Flow diagram

20 Scripting language constructs syntax eg dot operator, values, variables, operators, assignment, comparisons; methods eg write(), click(), open(), selected(); properties eg name, width, ID, value loops eg for, for/in, do/while; decision making eg if, if/else, switch/case; functions (calling, parameter passing); handling events eg onfocus, onload, onblur, onmouseover;

21 Constructs Need correct construction: Syntax i.e. Grammar and order correct of words Dot operator allows an object to use a method Variable data stored as text or numbers Must have unique name within script Loops or iterations code which is executed repeatedly.

22 The maths bit Often need calculations within a script, valid operators include: + plus - minus * multiply / divide > greater than < less than ++ increment by 1 -- decrement by 1 == checks if equal >= equal to or less than!= not equal

23 Loops Or iterations Code which is executed repeatedly until preset condition is met Condition is set either at end or start of code Actions are defined in {curly brackets} Different types producing different effects

24 Loops for - loops through a block of code a specified number of times 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 for...in - loops through the properties of an object

25 Loop example <script> For (count = 0; count <= 5; count++) {document.write( The number is + count) Document. Write( <br> )//uses html within script} </script>

26 Loop example (for/in) <script> Numbers = new Array() Numbers [0] = zero Numbers [1] = one Numbers [2] = two For (x in numbers) { document.write ( The number is + numbers [x]) Document.write( <br> )} </script>

27 Loop example (while) <script> Count = 0 While (count <= 5) { document.write( The number is + count) Document.write( <br> ) Count ++ } </script>

28 Playing with loops Break - breaks the loop and continue executing the code that follows after the loop (if any). Continue - breaks the iteration and continues with the next value.

29 Break example for (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + "<br />"; }

30 continue for (i=0;i<=10;i++) { if (i==3) { continue; } x=x + "The number is " + i + "<br />"; }

31 Loops for while for in break continue

32 Task Find or create an example of a loop there may be one in one of the interactivities you discovered earlier. Record this you will need it for the assignment

33 Dot operator <script> Str= first message 1. Document.write(str.replace(/first/, second )) </script> Object string uses the method replace Hw = Hello world 1. Document.write(hw.length) These constructs are nearly right; nearly right doesn t work, can you correct them? 2. Document.write(hw.toUpperCase()

34 Variables A way of storing data (e.g.text or numbers) Must have a unique name within script Names cannot contain spaces Names cannot start with a number Should be meaningful for editing Can be assigned a value (initial data) Collection of variables can be stored in an array Array should be named and each item numbered (starting with 0)

35 Turnip array <html> <head> <script> product_name="turnip" quantity=50 </script> </head> <body> <script> Veg Turnip carrot spinach celery cabbage document.write (product_name, ("<br>"), quantity) </script> </body> </html>

36 Array_1 var vegetables= new Array(5) vegetables["turnip"]= "50"; vegetables["carrot"]= 10; vegetables["spinach"]= 20; vegetables["celery"]= 30 ; vegetables["cabbage"]= 1; </script> <head> <body>

37 As a table <script> document.write("<table border=\"1\" cellpadding=\"5\">"); document.write("<tr><th>veg</th><th>quantity</th></tr>"); //Now we start the for loop using the variable vegetable to hold our key. for ( var vegetable in vegetables) //print the values into a table cell for each iteration document.write( "<tr><td>" + vegetable + "</td><td>" + vegetables[vegetable] + "</td></tr>"); //finally close the table document.write ("</table>");

38 Horizontal table 1 <script>document.write("<table border=\"1\" cellpadding=\"5\">");document.write("<tr>< th>veg</th>");//now we start the for loop using the variable vegetable to hold our key.for ( var vegetable in vegetables) //print the values into a table cell for each iteration on top row document.write("<td>" + vegetable + "</td>")</script>

39 Horizontal table 2 <script>document.write ("</tr><tr><th>quantity</th>"); //close top row, start second row for ( var vegetable in vegetables) //print the values into a table cell for each iteration, bottom row document.write ("<td>" + vegetables[vegetable] + "</td>"); //finally close the table document.write ("</tr></table>"); </script>

40 Array with Maths Using the vegetable array: Create functions to change the stock level depending on user activity. E.g. Stock check to see if the correct number of turnips (50) are present == Adjust stock level because of sales -- Adjust stock level because of purchases + Alarm when less than a certain number

41 Objects A type of data which: Knows things about itself (properties) Knows how to do things (methods) Many objects already exist Can create new ones

42 An example of object code... The String object: <script> Hw= Hello World document.write(hw.length) </script>

43 Methods Each object knows which methods it can carry out, eg (string object): <script> Hw= Hello world document.write(hw.touppercase()) </Script> Copy this code and observe the screen output.

44 Methods A method is an action which can be performed by an object <html> <body> <script type="text/vbscript"> document.write("<h1>hello World!</h1>") </script> </body> </html>

45 Methods The properties of an object may change as a result of a method being carried out. There are several preset objects each with predefined methods:.write display information.click simulate a click.value take the value from an input.open loads a page in a new browser window.selectedindex shows which option from a drop-down list has been selected

46 Useful tools Firefox add-ons: Web-dev firebug

47 Fundamentals of Scripting Languages What is a scripting language? How does it work? What types are available? How does a scripting language improve functionality? Explain in detail how a browser implements a scripting language

48 Reminder L3U20A1 revision Due 17 th April next Sunday

49 Functions function functionname() { some code }

50 Simple alert function 1. <!DOCTYPE html> <html> <head> <script> function myfunction() { alert("hello World!"); } </script> </head> <body> <button onclick="myfunction()">try it</button> </body> </html>

51 arguments Values that are passed along with a function (also called parameters) can be used inside the function. You can send as many arguments as you like, separated by commas (,) Declare the variables when you name the function; must be kept in expected order function myfunction(var1,var2) { some code }

52 Example of arguments <button onclick="myfunction('harry Potter','Wizard')">Try it</button> <script> function myfunction(name,job) { alert("welcome " + name + ", the " + job); } </script> Note how name and job are kept in the expected order. <button onclick="myfunction('harry Potter','Wizard')">Try it</button> <button onclick="myfunction('bob', Lecturer')">Try it</button>

53 Return values return a value back to where the call was made the function will stop executing, and return the specified value.

54 Decision making Script can be used to make decisions automatically. if if else Switch...case

55 if statement Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error. <script> function myfunction() { var time = new Date().getHours(); if (time < 20) {

56 if statement document.getelementbyid("demo").innerh TML = "Good day"; } } </script>

57 <p>click the button to display "Good day", only if the time is less than 20:00.</p> <button onclick="myfunction()">try it</button> <p id="demo"></p>

58 if (time<20) { x="good day"; } else { x="good evening"; } If else

59 If else if else if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true }

60 Switch example Use the switch statement to select one of many blocks of code to be executed. 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 }

61 Default Use the default keyword to specify what to do if there is no match: 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"; }

62 Boxes Alert box Confirm box Prompt box

63 alert <!DOCTYPE html> <html> <head> <script> function myfunction() { alert("i am an alert box!"); } </script> </head> <body> <input type="button" onclick="myfunction()" value="show alert box" /> </body> </html>

64 confirm var r=confirm("press a button"); if (r==true) { x="you pressed OK!"; } else { x="you pressed Cancel!"; }

65 prompt used if you want the user to input a value before entering a page. the user will have to enter an input value the user will have to click either "OK" or "Cancel" to proceed If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. var name=prompt("please enter your name","harry Potter"); if (name!=null && name!="") { x="hello " + name + "! How are you today?"; }

66 Function example <html> <head> <title> Function example </title> <script> Function details() { // insert your new code here } </script> </head> <body> </body> </html>

67 Function example... After the body tag insert: <b> Methods example Page</b> <br> <form name= DetailsForm > Enter full name <input type = text name= fullname ><br> Gender: <select id=gender> <option>male</option> <option>female</option> </select></br> <input type = button value= ClickMe onclick= details() > </form>

68 Function task Save the file as functionexample.html Find out the value of name Find out which gender has been selected Write both to the page so they are displayed on screen

69 Function example Make your function details bring up an alert box when ClickMe is clicked. {alert( Lorem ipsum ); } Substitute suitable text for Lorem ipsum

70 Function example Now have your alert box return a value from your input box along with the text.

71 Function example { alert("welcome - " + fullname); } <form name="detailsform"> Enter full name <input type ="text" id="fullname"/><br> <input type="button" onclick="details(fullname.value)" value="clickme"/>

72 Functions Separate piece of code which can be called and executed whenever desired. Can be written anywhere in the web-page or in a different page Look like this: <script> Function hello() { alert( Hello! ) } </script>

73 Functions... Brackets beside the name allow a parameter to be passed to the function when running. Also allow a value to be passed back to the main code once the function has run. Prompt box takes an input from user: X=prompt( message, )

74 Function activity <head><script type= text/vbscript > Function topping() { Topp=prompt( Enter a topping, ) Alert(topp + + food) } </script></head>

75 Function activity... <body> <script type= text/vbscript > Food= pizza Topping(food) </script> </body>

76 Function activity Create the pizza script. Adapt it to allow the user to enter their favourite food If the favourite food is pizza then call the topping function

77 Properties Characteristics of objects in code eg: Type Name can have more than one element with same name id must be unique Value Width height

78 Handling events Javascript is an event-driven language An event is an action which triggers a reaction from the code. An event handler is a routine that picks up an action that affects the object Eg onmouseover, onclick Many Javascript events will be triggered in this way. They work like this...

79 Onfocus event <form> Other examples (event handling) <input type = text onfocus= alert( An onfocus event ) </form> Onmouseover event <img src= image1.gif OnMouseOver=alert( An onmouseover event ) Onload event <body onload=alert( loaded )> Text of the alert must not contain spaces. Can do more by calling a function from the onload. <body onload= functionname () >

80 Event driven example... <html> <head> <title>using Javascript</title> <script type= text/javascript > </head> <body> </body> </html>

81 Event driven example... After <script type= text/javascript > add Function showalert() { Alert( Hello world! ); } </script>

82 Event driven example... In the body add... <form method= post action = >//the method attribute is post <p><button type= button name = callscript onclick= showalert(); >/* This is a button tag with the name attribute callscript, it has an onclick event with a value of showalerttext for the button eg.*/ show the alert </button></p> </form> Save the page, open and explore.

83 Event handling An event that triggers a piece of code Some examples and further explanation are here: s.html#h

84 M2 Client vs server is not needed Compare examples of object-orientated and eventdriven Explain how Javascript improves functionality: Drop-down menus Mouse-followers Image galleries Validation Browser detection Create cookies Read/write/modify HTML elements hiding or showing elements moving elements changing colors or fonts

85 D1 Understanding client-side scripting Sheryl Canter, April ,00.asp

Introduction to JavaScript

127 Lesson 14 Introduction to JavaScript Aim Objectives : To provide an introduction about JavaScript : To give an idea about, What is JavaScript? How to create a simple JavaScript? More about Java Script