Client-side processing 26 Client-side processing 26

Client-side processing 26 Our next two topics involve a more advanced look at how webpages work With client-side processing, we’ll look at the special interactive features that make today’s webpages more exciting And with server-side processing, we’ll look at what happens after you click a button to ‘submit’ data or ‘search’ But both topics are based on concepts that should be pretty familiar by now…

Client-side processing 26 Remember what we mean by ‘client-side’ & ‘server-side’ Client SideServer Side Database Web Server Our diagram has always had these three parts… Client Device Internet Backbone

Client-side processing 26 Client SideServer Side Database Web Server Client Device Internet Backbone Remember what we mean by ‘client-side’ & ‘sever-side’ Our diagram has always had these three parts… We’ll look at two examples of ‘client-side’ processing And later we’ll learn two ‘server-side’ examples And don’t forget the examples all involve data travelling across the Internet That means interactive features in your browser That means handling the data that people post But data takes time to travel from server to client And there’s a security risk that data can be hacked!

Client-side processing 26 So for our examples of client-side processing, we’ll look at two kinds of interactive features One is called a ‘hover’ image The other is called a ‘slider’ Both features are displayed in your browser on your client device, such as a tablet or laptop That’s why they are ‘client-side’ features

Client-side processing 26 We’ll now look at how to create a simple version of a hover image You now know that basic pages are created using HTML But interactivity is created using another coding language, JavaScript So we’ll now combine HTML & JavaScript to create a basic hover image…

Client-side processing 26 Example 1 Hover image This image changes when you roll your mouse pointer over it. This ‘hover’ effect is achieved using JavaScript code with the HTML.

Client-side processing 26 Example 1 – HTML & JavaScript code This code is called a script. It tells the Browser how to make the image interactive. This code is written using the language called JavaScript. This is the HTML code that tells the browser how to display the page.

Client-side processing 26 Example 1 – HTML & JavaScript code Code Change Now change this code for ‘onmouseover’. Change it from shaun2 to shaun3.

Client-side processing 26 Example 1 Popup Message Now click this link to see a different kind of interactive feature. It will display a message. But what the message looks like will depend on your browser.

Client-side processing 26 Example 1 The message looks different in different browsers. It’s because each browser runs the script its own way Web coders get annoyed with this lack of consistency

Client-side processing 26 Our second example of an interactive feature is a ‘slider’ It’s a feature that’s displayed in your browser on your client device, such as a tablet or laptop That’s why it’s called ‘client-side’

Client-side processing 26 Example 2 Slider It automatically shows a sequence of images but you can click the links to scroll through the images interactively.

Client-side processing 26 Example 2 – HTML & JavaScript code This code is another script. It tells the Browser how to display the slider. This code is written using the language called JavaScript. This is the HTML code that tells the browser how to display the page.

Client-side processing 26 Example 2 – HTML & JavaScript code Code Changes Now change this script code to alter the slider. Change effect to fold Change pauseTime to 5 Change startSlide to 4 Change animSpeed to 80

Client-side processing 26

Client-side processing 26 So we have now seen two examples of client-side processing Both create interactive features Both used special code scripts One was a hover image The other was a slider Now let’s summarise the advantages and disadvantages of client-side processing…

Client-side processing 26 Interactivity: Client code scripts tell the browser how to display special features that let users interact with the page Speed: Processing is faster on the client because code & data does not have to travel back to the server across the Internet Security: No security risk because there’s no data to transmit back to the server across the Internet, where it could be intercepted Advantages

Client-side processing 26 Browser-specific: Different browsers process client scripts in different ways, so a web coder cannot be sure how their website will appear on a screen on the client side Computer speed: The web coder is relying on the speed of the client device to deliver the interactive features, so if that hardware is slow then the processing will be slow Disadvantages

Client-side processing 26 Client-side processing 26

Client-side processing 26 Client-side processing 26