How the Web Works: Lecture 6

Logistics Homework + Midsemester Grade

Homework 1

Homework 1 Kept Changing, finally settled Out Before Spring Break
Covers PHP, MySQL, HTML, CSS, MVC We’ll talk about MVC after the break

Midsemester Grade Since only HW is compulsory If you’ve done
a mini, Pass! Otherwise... Quick Online Quiz Email Me

Upcoming Mini 5: Javascript Mini 6: MySQL Mini 7: Firebug
HW1: PHP MySQL HTML CSS HW2: Javascript, AJAX, jQuery

Warning This Lecture is Intensive

Lecture 6 Javascript & jQuery

First Things First

But Why? Called Mocha, LiveScript Browser Wars Netscape vs. IE
Java was Hot Coincided with Java Support Publicity Stunt

But what is it then? Weird

GET index.php

GET index.php Return HTML + Javascript Code

Can I see the JS Code?

I’m the Javascript Interpreter

What’s the Difference?

Click Me

Click Me Click Me Click Me

<body>

<body> <a href=”#” onclick=”changecolor()”> Click Me

<body> <a href=”#” onclick=”changecolor()”> Click Me </a>

<body> <a href=”#” onclick=”changecolor()”> Click Me </a> </body>

I feel so neglected =(

I feel so neglected =( Server Not Called | Quicker,
no data transfer

So it manipulates the page, big deal, hmph!

http://www.chromeexperiments.com

http://www.chromeexperiments.com http://www.cmuwebworks.com/movies/gg.mp4

But What If?

But What If? There’s New Data ... but not much

AJAX Just a simple, powerful idea Asynchronous Javascript & XML
Uses XMLHttpRequest() HTTP Request only new data Use JS to replace the HTML Told you HTTP is important

Simple, Right? ... and everything on the web uses it
these days!

Ask Now Understand JS vs. PHP vs. HTML

DOM Tree Document Object Model

<html> </html> <body> </body> <head> </head> <div> </div> Hello World

<html> <body> <head> <div> Hello World

DOM Tree How the Browser Sees HTML Makes Manipulation Easy
JS: Manipulate Nodes (Elements) Traversal Not Required Direct Access with IDs

Enough Abstractness Hands On...

JS Basics Runs inside a web page Plan of Action:
- Write Hello World - Learn in Firebug - Write useful real code

Hello World ... since 1978

http://www.cmuwebworks.com/movies/hello1.mov

A Little More Useful...

http://www.cmuwebworks.com/movies/hello2.mov

The Big Picture JS involves GUI Programming We define functions
Listen for events (ex. Click) Call functions on event Listener: Code that waits Handler: Code that calls

Syntax one last time...

Firebug Eclipse : Java :: Firebug : JS JS must
run in the browser ... so Firebug is a Firefox plugin Powerful Debugger Handy for Development too... Demo Time! http://www.cmurpg.com/assignment.php?n=6&v=b5

Syntax Overview End lines with ; Case Sensitive Interpreted Syntax
similar to Java Variables Weakly Typed!

Syntax Overview End lines with ; Case Sensitive Interpreted Syntax
similar to Java Variables Weakly Typed! The above are from PHP!

Variables, Operators Declared with var No explicit type! Assign with
= operator No integer / floats Good ‘ol operators Boolean true or false

Comments C++ / Java Style Comments

Arrays NOT HashTables Created as var arr = [] Add
with push() C/Java Indexing: arr[i] arr.length slice(), concat(), join() http://www.cmurpg.com/assignment.php?n=6&v=b10

Control Flow Very Similar to Java if, else if switch
while do/while for break continue try/catch

Functions Keyword function No return types Take/not take arguments Overloading
Very similar to PHP function count($i, $max = 10) { while ($i < $max) { print $i; } } function factorial($n) { if ($n == 0) return 0; return $n * factorial($n-1); }

Functions Keyword function No return types Take/not take arguments Overloading
Very similar to PHP function count(i, max = 10) { while (i < max) { console.log(i); } } function factorial(n) { if (n == 0) return 0; return n * factorial(n-1); }

Classes Do Not Exist! Such an $#%#$% mess! But we
love them... So we’ll mimick them Using two other things! class Dog { string name; int id; void bark(); }

function() First Class Functions

Hash Tables ... are a (potentially) many-one mapping between any
types foo bar baz gorp A B C

Hash Tables Different from Arrays Very Important because.. JS Doesn’t
have classes These replace objects! Higher-Order functions! foo bar baz gorp

First Class Functions Its a lot, for now think... Functions
are like values! Can be passed around! f()

alert("get the lobster"); SeafoodCooker("lobster"); SeafoodCooker("water"); alert("get the beef"); Grille("beef"); Grille("seasoning");

function Cook( i1, i2, f ) { alert("get the "
+ i1); f(i1); f(i2); } Cook( "lobster", "water", SeafoodCooker ); Cook( "beef", "seasoning", Grille );

Anonymous Functions I don’t have a name!

Now I do!

Why? Runtime Binding

f() Can we be friends? foo bar baz gorp A
B C

f() Can we be friends? foo bar baz gorp A
B C Mimicking Objects

This is Crazy Ok, but how do I mimick a
Class, not just objects?

JS supports new Seriously dude, WTF?

http://www.phpied.com/3-ways-to-deﬁne-a-javascript-class/

Anonymous Functions http://www.phpied.com/3-ways-to-deﬁne-a-javascript-class/

Anonymous Functions Mimics Constructor http://www.phpied.com/3-ways-to-deﬁne-a-javascript-class/

JS makes this work Anonymous Functions Mimics Constructor http://www.phpied.com/3-ways-to-deﬁne-a-javascript-class/

Recap Classes Don’t Exist We can mimic them For practical
purposes... They Exist So wake up!

GUI Programming Selectors and Listeners

Selectors Many Different Ways By ID, Name, etc. (like CSS)
document.getElementByID(id) Lets see it in action!

http://www.cmuwebworks.com/movies/selectors.mov

The General Idea Select Element from DOM Tree By ID,
Class, etc.. (ID in this case) Manipulate the Node (Element) ex. Change HTML inside it!

But Wait Why manipulate unless asked to?

Listeners Listener: - Node + Action + Function If that
action happens... ... the listener calls the function elem.addEventListener(...) More Demos!

What does this page do?

http://www.cmuwebworks.com/movies/listener1.mov

A Little More Useful

A Little More Useful Default CSS Hidden

A Little More Useful Add listeners when Object exists Default
CSS Hidden

A Little More Useful Add listeners when Object exists Default
CSS Hidden Unhides on Click

http://www.cmuwebworks.com/movies/listener2.mov

AJAX XMLHttpRequest()

XMLHttpRequest() | GET

XMLHttpRequest() | GET param | {snippet = “city”}

XMLHttpRequest() | GET Update HTML param | {snippet = “city”}

Using XHR

Using XHR xmlhttp = new XMLHttpRequest(); Create Object xmlhttp.open(“GET”, url,
false) Open Request Object xmlhttp.send(null) Make Request elem.innerHTML = xmlhttp.responseText Change Page

Using XHR xmlhttp = new XMLHttpRequest(); Create Object xmlhttp.open(“GET”, url,
false) Open Request Object xmlhttp.send(null) Make Request elem.innerHTML = xmlhttp.responseText Change Page Fails on IE6 ActiveXObject instead of XMLHttpRequest

Hello, AJAX

Hello, AJAX Default Content

Hello, AJAX Replace with data from URL Default Content

Hello, AJAX Code that changes content Replace with data from
URL Default Content

http://www.cmuwebworks.com/movies/helloajax.mov

Making it Useful Send Params with GET ... to a
PHP URL Returns smart result Put it on the page Now we’re talking!

Username Checking Demo | Implementation in a Bit

JSON The X in AJAX

AJAXML XML: Format of fetched data But we used plain
text! Two Choices: XML or JSON Extended Markup Language Javascript Object Notation

The Catch Its doesn’t have to be XML

“{name: ‘Fido’, breed: ‘Dalmatian’}”

Why? Because HTTP can return strings So PHP returns a
JSON string JS converts back to object Can do with XML too JSON is the easiest.

Javascript Framework

jQuery So what is a framework? Common patterns in Code
Consistency across browsers Common actions quicker

Examples What you’ve seen so far, simplified!

Hello, World

Hello, World As soon as the DOM is ready!

Hello 2.0

Hello 2.0 When “hi” is clicked

Hello 2.0 When “hi” is clicked Execute This!

jQuery Style $(selector).action(handler_function);

jQuery Style $(selector).action(handler_function); Special jQuery Alias

jQuery Style $(selector).action(handler_function); Like CSS selectors: #my_id .my_class elem Special
jQuery Alias

jQuery Style $(selector).action(handler_function); Like CSS selectors: #my_id .my_class elem Deﬁned
in API keypress, click, blur, lots more... Special jQuery Alias

jQuery Style $(selector).action(handler_function); Like CSS selectors: #my_id .my_class elem Deﬁned
in API keypress, click, blur, lots more... Something to be done... function blow_up_world() Special jQuery Alias

Listener Example

Listener Example Hidden by default

Listener Example If unhider is clicked Hidden by default

Listener Example If unhider is clicked Then Show the secret
Hidden by default

Username Checker HTML contains Input Box, Check Button, Result Space

jQuery AJAX GET $.get(target, data, handler);

jQuery AJAX GET $.get(target, data, handler); Script to send data
to, ex. check.php

to, ex. check.php Data to send, as a hash table

to, ex. check.php Data to send, as a hash table Function to handle response

to, ex. check.php Data to send, as a hash table Function to handle response Cross-Browser Compatible | Detects IE

JS Outline

JS Outline If button clicked, called checker

JS Outline If button clicked, called checker Get username from
form

form Make GET request, handle

form Make GET request, handle Response Handler

Meanwhile... PHP checks for availibility

Demo Take 2

Recap AJAX support for POST, etc.. Lots of event types
Animations too! More on HW2

You Made It! Practice Makes Perfect: SOS Part 2

After the Break Oooh, now the fun begins...

After the Break What I really wanted to teach Now,
you have the tools Lets put them together! ... and make awesome stuff!

Webmasters’ World Putting it together Domains, Web Hosting Publishing on
the Web CMS, Frameworks Analytics, SEO, Ads DNS, Caching, other stuff...

The Intelligent Web How Google Works - PageRank - MapReduce
The Semantic Web HW3: Being Popular!

Building Social Apps Connect to Social Sites Facebook, Twitter, YouTube
REST APIs Socially Rich Applications HW4 implements Connect

Have Fun!

Photo Credits http://api.ning.com/files/KXomTHEv7nIaor6MGM4xe*z6tf2LyIygHOOt8PQr432b0CwDaCD8tHA70HEI-liDXvxAu3maRWLYQyk9o-A0-sTbHILeR6Qn/JavaLogo_1.jpg http://2.bp.blogspot.com/_YYZ0pJ9j30U/SSpfQEZ9u9I/AAAAAAAAAyY/Crdymakw7xg/s320/Internet_Explorer_7_Logo.png http://fullygeek.com/wp-content/uploads/2007/12/netscape9logo.png http://getfirebug.com/img/firebug-large.png http://farm3.static.flickr.com/2326/2378867408_4cc90791d6.jpg http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif http://www.cmurpg.com/assignments/a6/img/b23.png http://www.meredithlibrary.org/images/homeworkhelp.jpg
http://www.flickr.com/photos/mcquinn/2302027163/ http://www.coolestspringbreak.com/image-files/spring-break-crowd.jpg http://www.holidaysparadise.com/wp-content/uploads/2009/02/cancun-beach-spring-party.jpg http://www.flickr.com/photos/wirenine/395678424/ http://www.flickr.com/photos/maydayrelay/3436387683/sizes/l/ http://www.flickr.com/photos/68346513@N00/521465221/ http://www.andreaharner.com/archives/xmen-3.jpg http://www.flickr.com/photos/richardmoross/3132598166/ http://www.wonderday.ca/blog/wp-content/uploads/2009/05/x_men_origins_wolverine_movie_poster1.jpg

How the Web Works: Lecture 6

How the Web Works: Lecture 6

More Decks by Abhinav Sharma

Other Decks in Education

Featured

Transcript