Client side scripting

Webtechnologie - Client side scripting, server side scripting

Client side scripting1WebtechnologieLennartHerlaar

Lennart Herlaar - UU1InhoudJavaScriptDocument Object ModelEvent modeljQuery

Lennart Herlaar - UU2HTML5 revisitedHTML5 leunt op JavaScript en eventsAl even gezien bij voorbeeld

Geo LocationDrag and DropServer Sent Events

Lennart Herlaar - UU3Een kijkje thuis...

function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/" + "staticmap?center=" + latlon + "&zoom=17&maptype=satellite" + "&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = '';}

function getLocation() { navigator.geolocation.getCurrentPosition(showPosition);}

Lennart Herlaar - UU4

Sleur en Pleur

function allowDrop(e) { e.preventDefault();}

function drag(e) { e.dataTransfer.setData("Text", e.target.id);}

function drop(e) { var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); e.preventDefault();}

div1.addEventListener("drop", drop, false); div1.addEventListener("dragover", allowDrop, false);drag1.addEventListener("dragstart", drag, false);Lennart Herlaar - UU5

Client side scripting6WebtechnologieLennartHerlaar

jQueryLennart Herlaar - UU6

JavaScript libraries / frameworksEr is al heel veel beschikbaarJavaScript libraries / frameworksPrototype, MooTools (4%), jQuery (65% top sites)Libraries zijn veelal losstaand, minder dwingendFrameworks nemen vaak de flow of control overDefault behavior, the Right Way of Doing ThingsCode size, optimizations6 600 kB; minified, gzipped; jQuery is 28 266 kBLibraries / frameworks die weer voortbouwenPlugins

Lennart Herlaar - UU7jQuery eigenschappenJavaScript libraryCross-browser supportUitbreidbaar met behulp van pluginsWat wordt er precies eenvoudiger?Selecteren van nodes / elementenNavigeren en modificeren van de DOM boomAanpassen van CSS stylesDefiniren van event listenersWerken met AJAXEffecten en animatiesWel weer een nieuwe syntax... (maar...)"jQuery is a lot about making code shorter and therefore easier to read and maintain"Lennart Herlaar - UU8

jQuery mechanismejQuery oogt misschien eerst wat vreemdMix tussen elementen uit JavaScript en CSSUiteindelijk is het gewoon JavaScript

Mechanisme gebaseerd op selectorsWaarna operaties plaatsvinden op de nodes

[...]

[...] Lennart Herlaar - UU9jQuery mechanisme$ is de basisAlias voor het jQuery object

Utility functions$.each is de each methode van het jQuery objectjQuery 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);=Lennart Herlaar - UU10jQuery 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(); }});

Lennart Herlaar - UU11jQuery UIUitbreiding op jQueryHigh level abstractionWidgetsDatepicker, progressbar, autocomplete, ...EffectsColoranimation, toggleclass, hide (explode, blind), ...InteractionsDraggable, droppable, selectable, sortable, ...Merk op: deels ook in HTML5 / CSS3

Lennart Herlaar - UU12As simple as that!Aanvullende JavaScript fileNa jQuery zelf

$(function() { $("#datepicker").datepicker();});$(function() { $("#sortable").sortable(); $("#sortable").disableSelection();});Lennart Herlaar - UU13jQuery, jQuery UI, Flot


Er zijn meer wegenVaak kunnen we kiezenJavaScriptjQuery (UI)HTML5 / CSS3En 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 wordenIntegratie in .NET platform van Microsoft


Server side scripting16WebtechnologieLennartHerlaar

Lennart Herlaar - UU16InhoudPHPMeer PHPEn nog meer PHP


Server side scripting revisitedServer side scripts worden uitgevoerd op de webserver (of application server)Er bestaan verschillende integratiemethodenCGI, inlining code, webserver integratieVeelal het "one resource at a time" paradigmaHet draaien van een webapplicatie is een lange reeks script aanroepenVeel variatie in server side scripting talenPHP, Python, Perl, Ruby, ASP.NET, ...

Lennart Herlaar - UU18Centraal architectuur diagramWebserverInterpreterof compilerRDBMSFilesSQLParameters, codeFile accessResult setWebBrowser+ApplicatieHTML, CSS, JavaScript, JSON, FileForm, parameters,HTML, JavaScript,JSON, Lennart Herlaar - UU19Ontwikkeld door Rasmus Lerdorf in 1995Op basis van een verzameling Perl scriptsPersonal (Pretty?) Home Page ToolsPersonal Home Page/Forms Interpreter (PHP/FI)C implementatie, te gebruiken als CGI binaryVerdere ontwikkeling door Zend TechnologiesPHP: Hypertext PreprocessorRuim 10 jaar op versie 5 (sinds eind 2015 op 7)Versie 6 overgeslagen door met name Unicode issuesOp n na populairste scripting taal op het web

PHPLennart Herlaar - UU20

Rol en werking van PHPSpecifiek ontwikkeld voor web developmentVan webpage toolset tot general purpose server side scripting voor dynamische database driven websitesKan ook op de command line gebruikt wordenPerl en C invloeden in syntax en werkingPHP is een filterInput: stream met tekst / HTML en PHP codeOutput: stream met tekst, meestal HTMLPHP code wordt vervangen door z'n uitvoerPHP vergt installatie op de webserverLennart Herlaar - UU21PHP: Hypertext Preprocessor

Hello World
Lecture time! Lennart Herlaar - UU22

PHP als scripting taalPHP is een scripting taalCompilatie naar bytecode door een PHP parser Bytecode uitgevoerd door een PHP engineMulti-paradigmaObject-georinteerdImperatiefClass basedZwak getypeerd, dynamischVergelijk dit met JavaScript...Lennart Herlaar - UU23Goede voorzieningen voor tekstmanipulatieReguliere expressiesVeel functies in de core languageVeel extensions beschikbaarDiverse frameworks beschikbaarPragmatisch, eenvoudig te leren, it just worksEn ding is PHP niet...ElegantPHP als scripting taal


Means of escapeMet spring je in en uit PHP contextEn dus uit en in HTML context...Afhankelijk van config ook met of Of zelfs met het element (maar...)Dunne scheidslijn tussen code en contentSteeds in en uit context springenDe code wordt snel onleesbaarOngelimiteerd misbruik mogelijk

Lennart Herlaar - UU25Escape to hell

This is true. This is false. > Dantes Inferno. y>

// Dubbele slash betekent// commentaar tot einde regel


No escapeEen PHP toepassing kan omvangrijk wordenIn tegenstelling tot veel JavaScript toepassingenScheiding code en content wenselijkOverzichtelijker, beter onderhoudbaarModernere insteekAlle HTML gegenereerd vanuit de codeTemplates voor vaste onderdelenMVC frameworks waarbij de HTML pagina niet veel meer is dan een aanroep van een generate functieLennart Herlaar - UU27

Server side scripting28WebtechnologieLennartHerlaar

Meer PHPLennart Herlaar - UU28

Yet Another LanguageVariabelen met $, anders functie of constanteVariabelen hebben een dynamisch typeDeclaratie is niet nodigDe-allocatie is niet nodigGlobale en lokale variabelenLokaal tenzij gedeclareerd met globalMet uitzondering van de zogenaamde superglobalsVerder gebruikelijke (function) scoping en shadowing(Gebruik parameter passing in plaats van global)Lennart Herlaar - UU29Herkenbare zaken?Gebruikelijke typenboolean, integer, float, string, arrayassociative array, float in decimal of scientific notatieMaar ook: object, resource, nullGebruikelijke control structuresif else, elseif, while, do while, for, foreach, switchGebruikelijke 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;Lennart Herlaar - UU30Herkenbare zaken?FunctiesCall-by-value parameter passing (maar objecten...)Call-by-reference met &Variabel aantal parameters en defaults mogelijkObject-georinteerd paradigmaClasses, objecten, methodsCase sensitivity, maar niet voor functienamenStatement termination met ; (verplicht)Multi-line strings (maar: HTML negeert whitespace)Commentaar met /* */, // of #functionfoo($arg_1,&$arg_2,...,$arg_n = "42") { global $myvar; echo"Examplefunction.\n"; ... return$retval;} Lennart Herlaar - UU31StringsStrings bestaan uit 8-bits karaktersDubbele of enkele quotes

Interpolatie van stringsStrings in dubbele quotes worden genterpoleerdStrings 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 (").'; Lennart Herlaar - UU32String functies. voor concatenatiestrlen, printf, ltrim, trim, rtrim, str_padstrtolower, strtoupper, ucfirst, ucwordsstrcmp, strncmp, strcasecmp, ... (-1, 0, 1)substr, strpos, strstr, stripos, strrpos, strriposstr_repeat, str_replace, str_ireplace, str_rot13strtr, 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("04 March 2016"); // 1457046000

Lennart Herlaar - UU33ArraysArrays beelden keys op values afValues mogen van elk type zijn, door elkaarArrays zijn heterogeenKeys mogen integers of strings zijnInteger indices kunnen overal beginnen en negatief zijn; alleen de gebruikte keys worden opgeslagenArrays kunnen meerdimensionaal zijnArrays zijn stiekem associative arraysHashes, 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] undefinedecho ($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...Lennart Herlaar - UU34Arrays beelden keys op values afOok als de indices integers zijnPas op met aannames m.b.t. de volgorde

Veel array functiesin_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); // 4list($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?Lennart Herlaar - UU35

Documents

Client side scripting