javascript – quiz #9 lecture code: 623358

21
JavaScript– Quiz #9 Lecture Code: 623358 http://decal.aw-industries.com Web Design: Basic to Advanced Techniques

Upload: christopher-hutchinson

Post on 01-Jan-2016

216 views

Category:

Documents


0 download

TRANSCRIPT

JavaScript– Quiz #9Lecture Code: 623358http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques

Web Design:Basic to Advanced Techniques

Today’s AgendaQuiz & Attendance

Announcements

Dynamic Pages – Part 1

Finish Quiz & Attendance

Lab

AnnouncementsFinal Project – Topic due tonight

Final Project – Layout instructions outPhotoshop of main page and navigation

Final Project – Website instructions outGet started early!Last day of class: presentations

Discussion After LectureOptional - for those that want to stay

Web Design:Basic to Advanced Techniques

Correction: Writing Javascript!Inline Javascript

<script type="text/javascript">

// JS code here

</script>

Include .js file<script type="text/javascript" src="javascript.js"></script>

Write both in <head>Goes in <head></head>

Goes in <head></head>or <body></body>

Web Design:Basic to Advanced Techniques

Spring 2010Tuesdays 7-8pm

200 Sutardja-Dai Hall

Dynamic Pages – Part 1

Web Design:Basic to Advanced Techniques

What is PHP?Client Side

Web Browser

HTTP Request (visit website)

Interpret and render received files

Server Side

Web Server

Serve Website Send HTML and CSS files Send images

• Execute JavaScript• Send JavaScript code

• PHP and MySQL

Runs in your browser– on the client side

Web Design:Basic to Advanced Techniques

PHP: Hypertext PreprocessorServer-side

Scripting language (like JavaScript, unlike HTML and CSS)

Dynamically writes HTML pages

Has access to server system’s resourcesDatabase Image processorsAnything else the system can run

Bridges client-side interface with server-side service and functionality

Bridging Interface and Service

When you type in an address in Google Maps…Google’s servers first take your HTTP request and isolate

your user inputThey then do some magic to return the correct map and

search results to youThis magic involves a number of things – from database

lookups, to accessing other services like traffic infoOnce this data has been collected for you, it needs to be

returned in HTML and CSS

PHP aids this process

PHP Use Cases Customization

Facebook shows you your profile despite sending the same file to everyone

Authentication Login PHP can choose to hide your

Facebook profile from those that are unauthorized to view it

Access Database on your Behalf When you use Yelp, Yelp does not

have html files for every search you could possibly make saved. It generates the pages on the fly.

Food Chain

Client to ServerVia Internet

Server to ClientVia Internet

PHP Generates HTML FilesPHP dynamically writes HTML files which are then

downloaded and rendered by the user

User A User B

Profile.phpw/ php code

Profile.phpw/ php code parsedfor User A

Profile.phpw/ php code parsedfor User B

Client Never Sees PHPServer View of .php Client View of .php

Exchange of Data

HTML, CSS, JS, images

Request for filesLogin, password, cookies, …

PHP and User InputGET variables

POST variables

Cookies

PHP and User InputGET variables

Passed via URL in the form of &myVar=value

POST variablesThe result of form submissionCan be a single word, a check box, a selector, a file

CookiesSet by the serverKey, value pairs

PHP and User InputClient Server

http://server.com?user_id=10

<input name=“user_id” value=“10” />

cookie(user_id, 10) $_COOKIE[‘user_id’]

$_POST[‘user_id’]

$_GET[‘user_id’]

GET

<a href=“profile.php?id=999999999”>View Profile</a>

Could use PHP to dynamically create this link too…

POST

<form action=“/sendEmail.php” method=“post”>

<input type=“text” name=“name” />

<input type=“text” name=“from” />

<textarea name=“body”></textarea>

<input type=“submit” value=“Send” />

</form>

GET vs POSTQ: When do we use a GET request and when do we use a

POST request?

A: Use a POST request when the result of the request modifies, creates, or deletes data – has lasting effects.

AJAXBoth submitting a form (POST) or requesting a URL

(GET) require reloading the page.

AJAX allows us to perform POST or GET requests without reloading the page.

JavaScript – Quiz #9Lecture Code: 623358

Lab…http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques