2_Computer science grade 10Using Scripts_presentation1_1 variant
Оценка 5

2_Computer science grade 10Using Scripts_presentation1_1 variant

Оценка 5
pptx
09.05.2020
2_Computer science grade 10Using Scripts_presentation1_1 variant
2_Computer science grade 10Using Scripts_presentation1_1 variant.pptx

Using Scripts 10.4.2.3 use ready-made scripts in web-development

Using Scripts 10.4.2.3 use ready-made scripts in web-development

Using Scripts

10.4.2.3 use ready-made scripts in web-development

CS380

1

Client Side Scripting CS380 2

Client Side Scripting CS380 2

Client Side Scripting

CS380

2

Why use client-side programming?

Why use client-side programming?

Why use client-side programming?

PHP already allows us to create dynamic web pages. Why also use client-side scripting?
client-side scripting (JavaScript) benefits:
usability: can modify a page without having to post back to the server (faster UI)
efficiency: can make small, quick changes to page without waiting for server
event-driven: can respond to user actions like clicks and key presses

CS380

3

Why use client-side programming? server-side programming (PHP) benefits: security : has access to server's private data; client can't see source code compatibility : not subject…

Why use client-side programming? server-side programming (PHP) benefits: security : has access to server's private data; client can't see source code compatibility : not subject…

Why use client-side programming?

server-side programming (PHP) benefits:
security: has access to server's private data; client can't see source code
compatibility: not subject to browser compatibility issues
power: can write files, open connections to servers, connect to databases, ...

CS380

4

What is Javascript? a lightweight programming language ("scripting language") used to make web pages interactive insert dynamic text into

What is Javascript? a lightweight programming language ("scripting language") used to make web pages interactive insert dynamic text into

What is Javascript?

a lightweight programming language ("scripting language")
used to make web pages interactive
insert dynamic text into HTML (ex: user name)
react to events (ex: page load user click)
get information about a user's computer (ex: browser type)
perform calculations on user's computer (ex: form validation)
a web standard (but not supported identically by all browsers)
NOT related to Java other than by name and some syntactic similarities

CS380

5

Linking to a JavaScript file: script script tag should be placed in

Linking to a JavaScript file: script script tag should be placed in

Linking to a JavaScript file: script

script tag should be placed in HTML page's head
script code is stored in a separate .js file
JS code can be placed directly in the HTML file's body or head (like CSS)
but this is bad style (should separate content, presentation, and behavior

CS380

6

HTML

Event-driven programming CS380 7 split breaks apart a string into an array using a delimiter can also be used with regular expressions (seen later) join…

Event-driven programming CS380 7 split breaks apart a string into an array using a delimiter can also be used with regular expressions (seen later) join…

Event-driven programming

CS380

7

split breaks apart a string into an array using a delimiter
can also be used with regular expressions (seen later)
join merges an array into a single string, placing a delimiter between them

A JavaScript statement: alert a

A JavaScript statement: alert a

A JavaScript statement: alert

a JS command that pops up a dialog box with a message

8

alert("IE6 detected. Suck-mode enabled."); JS

Event-driven programming 9 you are used to programs start with a main method (or implicit main like in

Event-driven programming 9 you are used to programs start with a main method (or implicit main like in

Event-driven programming

9

you are used to programs start with a main method (or implicit main like in PHP)
JavaScript programs instead wait for user actions called events and respond to them
event-driven programming: writing programs driven by user events
Let's write a page with a clickable button that pops up a "Hello, World" window...

Buttons button's text appears inside tag; can also contain images

Buttons button's text appears inside tag; can also contain images

Buttons

button's text appears inside tag; can also contain images
To make a responsive button or other UI control:
choose the control (e.g. button) and event (e.g. mouse 1. click) of interest
write a JavaScript function to run when the event occurs
attach the function to the event on the control

10

HTML

JavaScript functions CS380 11 function name() { statement ; statement ;

JavaScript functions CS380 11 function name() { statement ; statement ;

JavaScript functions

CS380

11

function name() {
statement ;
statement ;
...
statement ;
} JS

the above could be the contents of example.js linked to our HTML page
statements placed into functions can be evaluated in response to user events

function myFunction() {
alert("Hello!");
alert("How are you?");
} JS

Event handlers JavaScript functions can be set as event handlers when you interact with the element, the function will execute onclick is just one of…

Event handlers JavaScript functions can be set as event handlers when you interact with the element, the function will execute onclick is just one of…

Event handlers

JavaScript functions can be set as event handlers
when you interact with the element, the function will execute
onclick is just one of many event HTML attributes we'll use
but popping up an alert window is disruptive and annoying
A better user experience would be to have the message appear on the page...

CS380

12

... HTML

HTML

Скачать файл