Client side scripting 1 Webtechnologie Lennart Herlaar.

Presentatie over: "Client side scripting 1 Webtechnologie Lennart Herlaar."— Transcript van de presentatie:

1 Client side scripting 1 Webtechnologie Lennart Herlaar

2 Inhoud JavaScript Document Object Model Event model jQuery

3 Client side scripting 3 Webtechnologie Lennart Herlaar

4 jQuery mechanisme $ is de basis Alias voor het jQuery object Utility functions $.each is de each methode van het jQuery object jQuery objecten $("p") maakt een nieuw jQuery object aan dat refereert aan alle elementen (selector) $(document).ready(function(){ // rest van jQuery code }); window.addEventListener("load", myFunc, false);document.addEventListener("DOMContentLoaded", myFunc, false); jQuery(document).ready(handler); jQuery().ready(handler); jQuery(handler); $(document).ready(handler); $().ready(handler); $(handler);

5 jQuery voorbeelden $(function() { $("a").click(function(e){ alert("Hello world"); e.preventDefault(); }); $("div.test").add("p.quote").addClass("blue").slideDown("slow"); $(function() { $("#orderedlist > li").addClass("blue"); }); $("ul.important").children().css("background-color", "red"); $("form").submit(function(e) { if ($("input:first").val() == "correct") { $("span").text("Validated...").show(); } else { $("span").text("Not valid!").show().fadeOut(1000); e.preventDefault(); } });

6 jQuery UI Uitbreiding op jQuery High level abstraction Widgets Datepicker, progressbar, autocomplete,... Effects Coloranimation, toggleclass, hide (explode, blind),... Interactions Draggable, droppable, selectable, sortable,... Merk op: deels ook in HTML5 / CSS3

7 As simple as that! Aanvullende JavaScript file Na jQuery zelf $(function() { $("#datepicker").datepicker(); }); $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); });

8 jQuery, jQuery UI, Flot

9 Er zijn meer wegen… Vaak kunnen we kiezen JavaScript jQuery (UI) HTML5 / CSS3 En zelfs: server side scripting! Afhankelijk van beschikbaarheid (requirements), browser support, kennis webdeveloper, … Beweging steeds meer richting HTML5 / CSS3? jQuery is zelf een standaard aan het worden Integratie in platformen van Microsoft, Nokia

10 Server side scripting 10 Webtechnologie Lennart Herlaar

11 Inhoud PHP Meer PHP En nog meer PHP

12 Server side scripting revisited Server side scripts worden uitgevoerd op de webserver (of application server) Er bestaan verschillende integratiemethoden CGI, inlining code, webserver integratie Veelal het "one resource at a time" paradigma Het draaien van een webapplicatie is een lange reeks script aanroepen Veel variatie in server side scripting talen PHP, Python, Perl, Ruby, ASP.NET,...

13 Centraal architectuur diagram Webserver Interpreter of compiler RDBMS Files SQL Parameters, code File access Result set Web Browser + Applicatie HTML, CSS, JavaScript, JSON, … File Form, parameters, … HTML, JavaScript, JSON, …

14 Ontwikkeld door Rasmus Lerdorf in 1995 Op basis van een verzameling Perl scripts Personal (Pretty?) Home Page Tools Personal Home Page/Forms Interpreter (PHP/FI) C implementatie, te gebruiken als CGI binary Verdere ontwikkeling door Zend Technologies PHP: Hypertext Preprocessor Inmiddels al bijna 10 jaar op versie 5 Versie 6 is uitgesteld door met name Unicode issues Op één na populairste scripting taal op het web PHP

15 Rol en werking van PHP Specifiek ontwikkeld voor web development Van webpage toolset tot general purpose server side scripting voor dynamische database driven websites Kan ook op de command line gebruikt worden Perl en C invloeden in syntax en werking PHP is een filter Input: stream met tekst / HTML en PHP code Output: stream met tekst, meestal HTML PHP code wordt vervangen door z'n uitvoer PHP vergt installatie op de webserver

16 PHP: Hypertext Preprocessor <?php echo "Hello World"; ?> <?php $d=date("D"); if ($d=="Wed" || $d=="Fri") echo "Lecture time!"; ?> Hello World Lecture time!

17 PHP als scripting taal PHP is een scripting taal Compilatie naar bytecode door een PHP parser Bytecode uitgevoerd door een PHP engine Multi-paradigma Object-georiënteerd Imperatief Class based Zwak getypeerd, dynamisch Vergelijk dit met JavaScript...

18 Goede voorzieningen voor tekstmanipulatie Reguliere expressies Veel functies in de core language Veel extensions beschikbaar Diverse frameworks beschikbaar Pragmatisch, eenvoudig te leren, it just works Eén ding is PHP niet... Elegant PHP als scripting taal

19 Means of escape Met spring je in en uit PHP context En dus uit en in HTML context... Afhankelijk van config ook met of Of zelfs met het element (maar...) Dunne scheidslijn tussen code en content Steeds in en uit context springen De code wordt snel onleesbaar Ongelimiteerd misbruik mogelijk

20 Escape to hell <?php if ($expression) { ?> This is true. <?php } else { ?> This is false. <?php } ?> ml> Escape to hell > Dante’s Inferno. o y> // Dubbele slash betekent // commentaar tot einde regel <?php // echo ' '; // Huh? ?>

21 No escape Een PHP toepassing kan omvangrijk worden In tegenstelling tot veel JavaScript toepassingen Scheiding code en content wenselijk Overzichtelijker, beter onderhoudbaar Modernere insteek Alle HTML gegenereerd vanuit de code Templates voor vaste onderdelen MVC frameworks waarbij de HTML pagina niet veel meer is dan een aanroep van een generate functie

22 Server side scripting 22 Webtechnologie Lennart Herlaar

23 Yet Another Language Variabelen met $, anders functie of constante Variabelen hebben een dynamisch type Declaratie is niet nodig De-allocatie is niet nodig Globale en lokale variabelen Lokaal tenzij gedeclareerd met global Met uitzondering van de zogenaamde superglobals Verder gebruikelijke (function) scoping en shadowing (Gebruik parameter passing in plaats van global)

24 Herkenbare zaken? Gebruikelijke typen boolean, integer, float, string, array associative array, float in decimal of scientific notatie Maar ook: object, resource, null Gebruikelijke control structures if else, elseif, while, do while, for, foreach, switch Gebruikelijke operators + - * / = += -= ++ -- == != = && || if ($page == "home") { generate_homepage(); } elseif ($page == "shop") { generate_shop(); } elseif ($page == "forum") { generate_forum(); } else { generate_notfound(); } is_logged_on($user) ? welcome($user) : login(); switch ($page) { case "home": generate_homepage(); break; case "shop": generate_shop(); break; case "forum": generate_forum(); break; default: generate_notfound(); } if ($page == "home"): generate_homepage(); elseif ($page == "shop"): generate_shop(); elseif ($page == "forum"): generate_forum(); else: generate_notfound(); endif;

25 Herkenbare zaken? Functies Call-by-value parameter passing (maar objecten...) Call-by-reference met & Variabel aantal parameters en defaults mogelijk Object-georiënteerd paradigma Classes, objecten, methods Case sensitivity, maar niet voor functienamen Statement termination met ; (verplicht) Multi-line strings (maar: HTML negeert whitespace) Commentaar met /* */, // of # function foo($arg_1, &$arg_2,..., $arg_n = "42") { global $myvar; echo "Example function.\n";... return $retval; }

26 Strings Strings bestaan / bestonden uit 8-bits karakters Dubbele of enkele quotes Interpolatie van strings Strings in dubbele quotes worden geïnterpoleerd Strings in enkele quotes worden letterlijk genomen \n, \t, \", \$, \\ \', \\ $str = "A single quote is ', right?"; $str = 'A double would be "!'; $str = "Single (') and double (\")."; $str = 'Single (\') and double (").'; <?php $user = "Lennart"; echo 'Hello $user'; echo "\n \n"; echo "Hello $user"; ?>

27 String functies. voor concatenatie strlen, printf, ltrim, trim, rtrim, str_pad strtolower, strtoupper, ucfirst, ucwords strcmp, strncmp, strcasecmp,... (-1, 0, 1) substr, strpos, strstr, stripos, strrpos, strripos str_repeat, str_replace, str_ireplace, str_rot13 strtr, nl2br, strtotime, count_chars,... Frustrerende functienamen en inconsistenties $str = "Hello ". $user. '. Welcome back!'; $str = substr("Hello World!", 6, 5); // World $str = substr("Hello World!", -6, -1); // World $pos = strpos("Hello World!", "World"); // 6 $str = strstr("Hello World!", "World"); // World! $ts = strtotime("28 February 2014"); // 1393545600

28 Arrays Arrays beelden keys op values af Values mogen van elk type zijn, door elkaar Arrays zijn heterogeen Keys mogen integers of strings zijn Integer indices kunnen overal beginnen en negatief zijn; alleen de gebruikte keys worden opgeslagen Arrays kunnen meerdimensionaal zijn Arrays zijn stiekem associative arrays Hashes, maps $a = array("Hello World", 24, NULL, "something big"); $b = array(1 => "One", 20 => "Twenty", "a" => "One"); $a[100] = array(1 => "One", 20 => "Twenty", "a" => "One"); // a[4] - a[99] undefined echo ($a[100]["a"]); // Let op de quotes; One $i = 20; echo ($a[100][$i]); // Geen quotes; Twenty $a[] = "My favourite index"; // a[101] unset($a[3]); // Wat ruimte besparen...

29 Arrays beelden keys op values af Ook als de indices integers zijn Pas op met aannames m.b.t. de volgorde Veel array functies in_array, array_search, array_merge, array_reverse, array_flip, array_pop, array_push, array_map,... Associative arrays $myarray = array(1 => "Dog", "Cat", "Scary" => "Bat"); $myarray2 = array(0, 2 => 5, 3); $myarray[0] = "Rat"; print_r($myarray); array_keys($myarray); // (1, 2, "Scary", 0) array_values($myarray); // ("Dog", "Cat", "Bat", "Rat") count($myarray); // 4 list($a,, $c) = $myarray2; // $a is 0, $c is 5 foreach ($students as $student) { echo("$student\n"); } foreach ($library as $isbn => $title) { echo "Book with ISBN $isbn has title $title\n"; } // Volgorde?

30 Frustrerend?

31 Sorteren Grote hoeveelheid sorteerfuncties sort(), asort(), arsort(), ksort(), krsort(), rsort(), usort(), uasort(), uksort(), natsort,... Sort is de basis; herordening, integer keys r = reversed, a = value, k = key, u = user defined a en k laten de associatie intact nat voor "natuurlijk" sorteren: img2.gif vs. img12.gif $fruits = array("d" => "lemon", "a" => "orange", "b" => "banana"); ksort($fruits); // a => orange, b => banana, d => lemon asort($fruits); // b => banana, d => lemon, a => orange sort($fruits); // 0 => banana, 1 => lemon, 2 => orange

32 Strings en arrays revisited $name = "Blob"; echo ":$name:"; // :Blob: echo "$nameje"; // lege string echo "{$name}je"; // Blobje echo "\{$name\}"; // \{Blob\} $a[2][3] = $name; echo "De {$a[2][3]}!"; // De Blob! echo "De ". $a[2][3]. "!"; // De Blob! echo "En niet de $a[2][3]!"; // En niet de Array[3]! $words = explode(" ","Jack in the box"); // Array! $str = implode("-", $words); // Jack-in-the-box strtr($posting, array("ROTFLMAO" => "rolling on the floor...",...)); strtr($posting, "äåö", "aao");

33 Daar gaan we weer... Type juggling en casting $myFirstVar = 42; $myFirstVar = 'We are sorry for the inconvenience'; $x = 1 + true; $x = NULL + false; $x = (bool)0; $x = (bool)0.0; $x = (bool)""; $x = (bool)"0"; $x = (bool)"0.0"; $x = ("0" == true); $x = (true == "false"); $x = ("1" == 1); $x = ("1" === 1); var_dump($x); var_export($x); $x = "the answer is ". "42"; $x = 3. "5"; $x = "the answer is " + "42"; $x = 3 + "5"; $x = 3 * "5"; $x = "this is " + true; Vergelijk dit met JavaScript... $x = array_search($myval, $myarray);