1 / 33

Client side scripting

Client side scripting. Webtechnologie. Lennart Herlaar. Inhoud. JavaScript Document Object Model Event model jQuery. Client side scripting. jQuery. Webtechnologie. Lennart Herlaar. jQuery mechanisme. $ is de basis Alias voor het jQuery object Utility functions

noleta
Download Presentation

Client side scripting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Client side scripting Webtechnologie Lennart Herlaar

  2. Inhoud • JavaScript • Document Object Model • Event model • jQuery

  3. Client side scripting jQuery 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 <p> elementen (selector) = jQuery(document).ready(handler); jQuery().ready(handler); jQuery(handler); $(document).ready(handler); $().ready(handler); $(handler); $(document).ready(function(){ // rest van jQuery code }); document.addEventListener("DOMContentLoaded", myFunc, false); window.addEventListener("load", myFunc, false);

  5. jQuery voorbeelden $(function() { $("a").click(function(e){ alert("Hello world"); e.preventDefault(); }); }); $(function() { $("#orderedlist > li").addClass("blue"); }); $("ul.important").children().css("background-color", "red"); $("div.test").add("p.quote").addClass("blue").slideDown("slow"); $("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 <script type="text/javascript" src="js/jquery-ui"></script> $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); $(function() { $("#datepicker").datepicker(); });

  8. jQuery, jQuery UI, Flot

  9. Erzijnmeerwegen… • Vaakkunnen we kiezen • JavaScript • jQuery (UI) • HTML5 / CSS3 • En zelfs: server side scripting! • Afhankelijk van beschikbaarheid (requirements), browser support, kenniswebdeveloper, … • Beweging steeds meerrichting HTML5 / CSS3? • jQueryis zelfeenstandaardaan het worden • Integratie in platformen van Microsoft, Nokia

  10. Server side scripting Webtechnologie Lennart Herlaar

  11. Inhoud • PHP • Meer PHP • En nog meer PHP

  12. Server side scripting revisited • Server side scripts wordenuitgevoerdop de webserver (of application server) • Erbestaanverschillendeintegratiemethoden • CGI, inlining code, webserver integratie • Veelalhet "one resource at a time" paradigma • Het draaien van eenwebapplicatie is eenlange reeks script aanroepen • Veel variatie in server side scripting talen • PHP, Python, Perl, Ruby, ASP.NET, ...

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

  14. PHP • 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

  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 <html> <body> <p> <?php echo "HelloWorld"; ?><br/> <?php $d=date("D"); if($d=="Wed" || $d=="Fri") echo "Lecture time!"; ?> </p> </body> </html> <html> <body> <p> HelloWorld<br/> Lecturetime! </p> </body> </html>

  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 • Zwakgetypeerd, dynamisch Vergelijk dit met JavaScript...

  18. PHP als scripting taal • Goedevoorzieningenvoortekstmanipulatie • Reguliereexpressies • 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

  19. Means of escape • Met <?php en ?> spring je in en uit PHP context • En dus uit en in HTML context... • Afhankelijk van config ook met <? ?> of <% %> • Of zelfs met het <script> element (maar...) • Dunne scheidslijntussen code en content • Steeds in en uit context springen • De code wordtsnelonleesbaar • Ongelimiteerd misbruik mogelijk

  20. Escape to hell <?php if ($expression) { ?> <strong>This is true.</strong> <?php } else { ?> <strong>This is false.</strong> <?php } ?> <h<?php echo "t" ?>ml> <head> <title>Escape to hell</title> </he<?php echo "ad" ?>> <body> Dante’s Inferno. </<?php echo "b" ?>o<?php echo "d" ?>y> </html> // Dubbele slash betekent // commentaar tot einde regel <?php // echo '<?xml ... ?>'; // Huh? ?>

  21. No escape • Een PHP toepassing kan omvangrijk worden • In tegenstelling tot veel JavaScript toepassingen • Scheiding code en content wenselijk • Overzichtelijker, beter onderhoudbaar • Modernereinsteek • Alle HTML gegenereerdvanuit de code • Templates voorvasteonderdelen • MVC frameworks waarbij de HTML paginanietveelmeer is daneenaanroep van een generate functie

  22. Server side scripting Meer PHP 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 tenzijgedeclareerd met global • Met uitzondering van de zogenaamde superglobals • Verdergebruikelijke (function) scoping en shadowing • (Gebruik parameter passing in plaats van global)

  24. Herkenbarezaken? • Gebruikelijketypen • boolean, integer, float, string, array • associative array, float in decimal of scientific notatie • Maar ook: object, resource, null • Gebruikelijkecontrol 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(); } 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; is_logged_on($user) ? welcome($user) : login();

  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 "!'; <p> <?php $user = "Lennart"; echo 'Hello $user'; echo "\n<br/>\n"; echo "Hello $user"; ?> </p> $str = "Single (') and double (\")."; $str = 'Single (\') and double (").';

  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. Associative arrays • 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, ... $myarray = array(1 => "Dog", "Cat", "Scary" => "Bat"); $myarray2 = array(0, 2 => 5, 3); $myarray[0] = "Rat"; print_r($myarray); foreach ($students as $student) { echo("$student\n"); } foreach ($library as $isbn => $title) { echo "Book with ISBN $isbn has title $title\n"; } // Volgorde? 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

  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. Type juggling en casting • Daar gaan we weer... Vergelijk dit met JavaScript... $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 = array_search($myval, $myarray); $x = "the answer is " . "42"; $x = 3 . "5"; $x = "the answer is " + "42"; $x = 3 + "5"; $x = 3 * "5"; $x = "this is " + true;

More Related