UPPRIFJUNFYRIRLESTUR 25, 24. NÓVEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, KJARNI@GMAIL.COM

mailto:kjarni@gmail.com

JAVASCRIPT

JavaScript er túlkað skriftumál,byggt á prótótýpum meðdýnamískar, veikar týpur,fyrsta flokks föll og stuðningvið hlutbunda-, gildinga- ogfallaforritun

SEMÍKOMMANSemíkomma er statement terminator einsog í Java eða C

Ekki krafa, Automatic Semicolon Insertion sér um að setjainn ef þú sleppir, þarf þó að passa:

verður

returna+b

return; a+b;verður

foo = a + b(d + 1)

foo = a + b(d+1);

DÝNAMÍSKAR TÝPURBreytur hafa ekki týpu, gildi hafa týpu, sér í lagi:

string

number

boolean

function

undefined

object

VEIKAR TÝPURÞegar við notum gildi mun þeim vera kastað óbeint

Reglur um hvernig þeim er kastað, type coercion

Þannig komumst við að mestu framhjá týpu villum íkeyrslu sem gefur okkur...

ÖRUGGAR TÝPURFáum ekki týpu villur á keyrslutíma

Getum fengið furðulega hegðun þó..

a = 1, b = "2", c = [0];a + b // "12"a + c // "10"c + b // "02"

OBJECTObject er tengdt fylki, associative array, með eigindumsem eiga sér nafn og gildi

var foo = {bar: "bar, baz: 1};

Hægt að vinna með á tvenna vegu

dot notation: foo.bar

bracket notation: foo["bar"], öruggari leið

Getum breytt eigindum á keyrslu tíma: bætt við, breytt ogeytt (delete foo.bar)

FÆRIBREYTURFæribreytur á föllum hafa ekki týpur heldur gildið

Fall getur því tekið inn eina færibreytu sem getur veriðhvaða gildi sem er

Primitives eru pass by value

Objects eru pass by reference

VARIADIC FUNCTIONSGetum skilgreint föll sem taka óskilgreindan fjölda affæribreytum

Höfum arguments hlut innan hvers fall sem er geymsla(ekki fylki) af færibreytum

SCOPEBreytur eru skilgreindar með lexical scope per fall

En aðeins ef var er fyrir utan

Ef ekki er breytan sett í global scope

Breytur skilgreindar utan falla eru í global scope

NAFNLAUS FÖLLVið getum bundið föll við breytur án þess að gefa þeim nöfn

Getum líka skilgreint föll án nafns og keyrt strax

Getum líka skilað föllum úr föllum

var foo = function(bar) { /* bar er local hér */ };

(function(bar) { /* bar er local hér, með gildi 10*/ })(10)

HOISTINGÞegar breytur eru skilgreindar og þeim gefið gildi innan falls,er skilgreiningu breytu ýtt efst í scope

var foo = 1;(function(){ console.log(foo); // -> undefined var foo = 2; console.log(foo); // -> 2})()

// túlkað sem...var foo = 1;(function(){ var foo; console.log(foo); // -> undefined foo = 2; console.log(foo); // -> 2})()

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

INNRI FÖLLGetum skilgreint föll innan fall

Innri föll eru aðeins í scope fyrir ytra fall

Innri föll hafa aðgang að scope ytra falls

LOKANIR – CLOSURESÞegar við höfum innri föll þá myndum við lokun umumhverfi þess

Innra fall hefur aðgang að ytra scope meðan það lifir

Breytu nöfn í innriföllum skrifa yfir ytri

function makeAdder(x){ return function(y) { return x + y; } // hefur alltaf aðgang að x}

TRUTHY & FALSYÞegar við erum með hluti sem haga sér einsog boolean ánþess að vera það tölum við um að þeir séu truthy eða falsy

FALSYfalse0"" // tómi strengurnullundefinedNaN

TRUTHYAllt sem er ekki falsy

null og undefined eru ekki jafnir neinu nema þeim sjálfum

SKAMMHLAUP – SHORTCIRCUIT

|| og && valda skammhlaupi – skila seinasta gildi semþeir skoða

a || b – Ef a er truthy er því skilað

a && b – Ef a er falsy er b skilað

http://www.grauw.nl/blog/entry/510

http://www.grauw.nl/blog/entry/510

TÝPU ÞVINGUN – TYPECOERCION

Reglur skilgreindar í spec en geta komið manni á óvart

Á við þegar við notum virkja eða samanburð með ==

Á ekki við þegar við notum ===

VILLUMEÐHÖNDLUNJavaScript hefur

exceptions

try

catch

finally

FALLAFORRITUNEin leið til að vinna með flækjustig

Blöndum saman einföldum föllum til að gera flókna hluti

Ekki mikið af föllum til staðar í flestum JS umhverfum svovið skrifum eigin eða notum forritasöfn

t.d. Underscore

http://underscorejs.org/

HLUTIRGetum bætt föllum við hluti

Föllin geta nálgast gögn á hlutnum gegnum this

Getum notað apply og call til að skipta um samhengi

Fjölyrt og klaufalegt

SMIÐIR OG NEWÍ JavaScript eru smiðir föll, skýrum með stórum staf

Þegar við notum new og tilgreinum fall búum við til nýjanhlut þar sem this bendir á hann (þurfum ekki að skila thisen ekki undefined)

Smiðir skila sjálfkrafa hlutnum ef engu er skilað

PRÓTÓTÝPURVið notum new til að búa til nýjan hlut en við það fáum viðlíka prótótýpu sem bendir á prótótýpu smiðs

Allir hlutir eru byggðir á prótótýpu og fá þeir þaðanákveðin eigindi

Í grunninn höfum við Object

PRÓTÓTÝPU KEÐJANHlutir fá eigindi frá prótótýpunni en eigindi á hlutnumhafa aldrei áhrif á hana

Ef við biðjum um eigindi á hlut er reglan:

Ef það er á hlut fáum við það

Ef ekki förum við upp prótótýpu keðjuna og leitum þar

Ef finnst hvergi er undefined skilað

Að setja eigindi á hlut setur það alltaf á honum sjálfum

PRÓTÓTÝPU KEÐJANÚt frá þessu getum við bætt við eigindum á alla hluti semeru byggðir á ákveðinni prótótýpu, hvenær sem er

Á okkar eigin hluti...

Eða innbyggða hluti...

ERFÐIRÍ klassískum erfðum

Hlutir eru tilvik af klösum

Klasar erfa frá öðrum klösum

Með prótótýpum:

Engir klasar

Hlutir erfa frá öðrum hlutum

http://www.crockford.com/javascript/inheritance.htmlDouglas Crockford: Advanced JavaScript

http://www.crockford.com/javascript/inheritance.htmlhttp://www.youtube.com/watch?v=DwYPG6vreJg

ERFÐIR Í JAVASCRIPTVið erfum klasa með því að skilgreina prótótýpuna á honum semforeldrið

En... þurfum að leiðrétta skilgreindan smið vegna galla í Javascript

Nýrri útfærslur (ECMAScript 5), eða sérskilgreint fall einfalda þetta í:

Child.prototype = new Parent(); // erfum ParentChild.prototype.constructor = Child; // lögum skilgreindan smið

Child.prototype = Object.create(Parent.prototype);

SPURNINGARHvað er ECMAscript?

Hvernig er semíkomman sérstök?

Hvernig haga breytur sér m.t.t. var?

Hvernig er týpukerfið?

Hvað eru dýnamískar týpur?

Hvað eru veikar týpur?

Hvaða vandamálum getum við lent í með veikar týpur?

Hvernig hagar object sér?

SPURNINGAR

Hvernig skilgreinum við föll?

SPURNINGARHvað er týpu þvingun (type coercion)?

Hvernig er villumeðhöndlun?

Hvað er fallaforritun?

Hvernig vinnum við hlutbundnaforritun?

Hvað er prótótýpan og prótótýpukeðjan?

Hvernig virka erfðir?

JAVASCRIPTOG VAFRINN

ATBURÐIR – EVENTSNotum atburði til að bregðast við notkun á vefnum okkar

Getum fest okkur við atburði:

Sem vafrinn veldur

Sem notandi veldur

UNOBTRUSIVE JAVASCRIPTTengt progressive enhancement er hugtakið unobtrusive JavaScript:

Aðskilnaður hegðunar frá markupi,

Sem minnst fótspor – ekki skilgreina í global scope

Bæta hegðun við og virka án hennar – ekki festa viðburði viðelement

document.getElementById('link').addEventListener("click",handleClick, false)

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

DOMDocument Object Model

Hlutlaust á platform og mál

Leyfir forritum og skriptum að gera dýnamískar breytingará efni, skipulagi og útliti skjala (oftast HTML eða XML)

http://en.wikipedia.org/wiki/Document_Object_Model

http://en.wikipedia.org/wiki/Document_Object_Model

My home page My home page

Hello, I am Marijn and this is my home page.

I also wrote a book! Read it here.

html head title My home page

body h1 My home page

p Hello! I am...

p I also wrote...

herea

.

JQUERY HLUTURINN & $Notum $ (eða jQuery) til að vinna með skjalið okkar

Hjúpar mismun í meðhöndlun á DOM og gefur okkurþægilegra viðmót

jQuery hluturinn inniheldur element sem við höfum leitaðað en er ekki fylki

CSS OG ÚTLITÖruggasta leiðin til að eiga við útlit gegnum jQuery (ogJavaScript yfirhöfuð) er að breyta klösum á elementum

addClass() bætir við klasa á element

removeClass() fjarlægir klasa af elementi

toggleClass() bætir klasa við ef hann er ekki til enfjarlægir annars

AJAX"Asynchronous JavaScript and XML"

Ekki ein tækni heldur hugtakið að sækja gögn samfasa tilað koma í veg fyrir að hlaða allri síðunni aftur

Skilgreint 2005

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/

JSONJavaScript Object Notation

Létt gagna format sem er auðvelt að lesa og skrifa, bæðifyrir menn og vélar

Byggir á:

Heiti/gildi pörum (objects, dictionary, hash table o.s.fr.)

Röðuðum listum (array, vector o.s.fr.)

JAVASCRIPT & HTML5Áframhaldandi þróun á forritunarskilum í vafra sem hægter að nota með JavaScript

SPURNINGAR

Hvað eru atburðir?

SPURNINGAR

Hvað er jQuery?

PHP

PHP er almennt skriftumálsem er sértaklega sniðið aðvefþróun. Það hefurdýnamískar, veikar týpur,stuðning við OO forritun ogrisastórt standard library

GAGNRÝNIPHP er frekar vinsælt forritunarmál

PHP er ekki vel hannaðforriturnarmál

Því eru margir sem hafa og munugagnrýna PHP

PHP er tól sem er gott að vita af ogjafnvel kunna

PHP: a fractal of bad design

The PHP Singularity

http://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/http://blog.codinghorror.com/the-php-singularity/

PHP & HTMLHægt að blanda HTML og PHP saman nokkuð frjálslega

Viljum forðast og aðskilja lógík frá útliti

Halló

STRENGIRSameinum strengi með .

$a = 'Hello '.$foo."\n";

Stafasett

Ekki unicode stuðningur, svo við getum ekki treystföllum sem vinna með strengi

"...this means writing correct programs using Unicodedepends on carefully avoiding functions that will not workand that most likely will corrupt the data.."

http://php.net/manual/en/language.types.string.php

http://php.net/manual/en/language.types.string.php

TÝPU JÖGGLÞegar unnið er með týpur í PHP er ekki augljóst hvernigþær hegða sér saman

Stór ókostur og getur valdið rugling

Höfum == og === til samanburðar einsog í Javascript

http://php.net/manual/en/language.types.type-juggling.phphttp://php.net/manual/en/language.types.comparisons.php

http://php.net/manual/en/language.types.type-juggling.phphttp://php.net/manual/en/types.comparisons.php

BREYTURSkilgreindar með $ og nafni, hástafanæmt, $a = 10;

Fá gildið null þegar þær eru skilgreindar

Getum skilgreint vísanir, aliasa, með &

$b = &$a;$b = 20; // $a er núna 20 og þ.a.l. $b líka

http://php.net/manual/en/language.variables.basics.php

http://php.net/manual/en/language.variables.basics.php

FYLKIFylki í PHP eru allskonar, getum notað sem:

Fylki, lista, hashtöflur, dictionary, stakk, röð...

Skilgreinum með array(key => value), eða [key => value] íPHP 5.4+

Key er tala eða strengur, þarf ekki að skilgreina

Value er hvaða gildi sem er

Þurfum að passa okkur á þessari blöndun

FYLKIVinna með fylki:

$a[] – bætir gildi við fylki (push)

$a["x"] – sækir gildi með lykil "x"

$a[0] – sækir gildi með lykil 0

unset($a[1]); – fjarlægir stak með lykil 1 úr fylki

http://php.net/manual/en/language.types.array.php

http://php.net/manual/en/language.types.array.php

SUPERGLOBALSSumar breytur (fylki) eru alltaf aðgengilegar og erusuperglobals!

$GLOBALS – allar breytur í global scope$_SERVER – breytur sem varða þjón$_GET – Breytur úr HTTP GET kalli$_POST – Breytur úr HTTP POST kalli$_FILES – Skjöl úr HTTP POST kalli$_COOKIE – Cookies sem eru skilgreinar$_REQUEST – Samansafn úr $_GET, $_POST og$_COOKIE$_ENV – upplýsingar úr umhverfi

GALDRA-FASTARPHP skilgreinir fasta á keyrslutíma sem eru breytilegir oggeta verið gagnlegir

__LINE__ – línu númer í keyrslu

__FILE__ – núverandi skrá

__FUNCTION__ – núverandi fall

SKIPTA UPP KÓÐAGetum skipt upp kóða í margar skrár og sótt þær

include(slóð) – sækir skrá, túlkar og setur inn sem kóðaþar sem skilgreint

Slóð getur verið nákvæm, relative, úr include_path(stilling) eða yfir HTTP

Erfum scope á breytum

Getum skilgreint skilagildi í skrám

KLASARSkilgreinum með class lykilorði og nafni

Nafn verður að byrja á staf eða undirstriki (_), síðanstöfum, tölum og undirstrikum

Skilgreinum fasta, breytur og föll innan klasa

$this er breyta sem er aðgengileg föllum innan klasa ogvísar yfirleitt í þann hlut sem kallað var í

SQLITE útfærður í smáu C forritasafni

Keyrir ekki í sér ferli heldur með forriti sem notar

og útfærir mest allan SQL staðalinn

Almenningseign

RDBMS

ACID

http://www.sqlite.org/

http://en.wikipedia.org/wiki/Relational_database_management_systemhttp://en.wikipedia.org/wiki/ACIDhttp://www.sqlite.org/

PDOPDO er PHP Data Objects, létt viðmót til að eiga samskiptivið gagnagrunna í PHP

Þurfum rekil (driver) fyrir gagnagrunninn sem við notum

Ef við þurfum að nota sérhæfða virkni gagnagrunnsþurfum við að nota eitthvað flóknara

SPURNINGARHvað er PHP?

Hver er algeng gagnrýni á PHP?

Hvernig vinnum við HTML og PHP saman?

Hvernig er týpukerfi PHP?

Hvað ber að varast í strengjavinnslu í PHP?

Hvernig er scope?

Hvernig er breytur?

Hvernig haga fylki sér í PHP?

SPURNINGARHvað eru superglobals?

Hvað eru galdra-fastar?

Hvernig vinnum við með foreach?

Hvernig getum við skipt upp kóða með include ogrequire?

Hvernig skilgreinum við föll?

Hvernig notum við hlutbundna forritun?

SPURNINGARHvernig eru smiðir og eyðar?

Hvernig er villumeðhöndlun?

Hverju þurfum við að huga að þegar við vinnum PHPverkefni?

Hvað er PDO?

Hvað eru prepared statements?

Hvað er SQLite?

Hvernig eru týpur meðhöndlaðar í SQLite?

HTTP

FRAMENDI VS. BAKENDIEinfölduð mynd:

Framendi er það sem vafrinn birtir, oftast nær HTML, CSS& JavaScript

Bakendi er á vefþjón og útbýr það sem sent er með HTTPá framenda. Tekur við gögnum frá framenda

BAKENDIt.d. PHP, node.js, .NET

↔HTTP

FRAMENDIHTML, CSS, JavaScript

TCP/IPHTTP er staðsett á application layer, notar TCP/IP til aðferja gögn á milli

skilgreinir application layer semnotendaviðmót, ber ábyrgð á að birta gögn og myndir tilnotanda á nothæfan máta

OSI model

http://en.wikipedia.org/wiki/OSI_model

DNS

Geymir upplýsingar um lén, sér í lagi hvaða IP-tölur svarafyrir hvaða lén

"Símaskrá Internetsins"

Í fyrstu var til HOSTS.TXT skjal hjá Standford ResearchInstitiute sem mappaði heiti yfir á tölu-addressur áARPANET, þessu skjali var síðan dreift á allar vélar áARPANET

Domain Name System

http://en.wikipedia.org/wiki/Domain_Name_System

REQUEST—RESPONSEHTTP er request—response protocol í client-servermódelinu

Client sendir request á server

Server framkvæmir aðgerðir og sendir response á client

REQUESTRequest er:

Request line, aðferð (eða sögn) sem notuð er, auðlindog útgáfu af HTTP

Headers fyrir aðgerð

Tómri línu

Hugsanlegum gögnum

RESPONSEResponse er:

Status lína, útgáfa af HTTP, staða sem tala og staða semtexti

Headers frá þjóni

Tómri línu

Hugsanlegum gögnum

STATELESSHTTP er hannað sem stöðulaus prótókoll

Server þarf ekki að geyma neinar upplýsingar milli beiðna

Stöður geta þó verið geymdar á nokkra máta

URIUniform Resource Identifier –strengur sem skilgreinir auðlind,einsog t.d. nafn eða staðsetning

URN – Uniform Resource Name,skilgreinir auðlind með sérkennisem er einstakt yfir tíma og rúm

URL – Uniform Resource Locator,skilgreinir auðlind og staðseturhana

http://en.wikipedia.org/wiki/Uniform_resource_identifier

HTTP AÐFERÐIRHTTP Request þarf að hafa aðferð/sögn tilgreinda

HTTP 1.0 skilgreindi GET, POST og HEAD

HTTP 1.1 bætti við OPTIONS, PUT, DELETE, TRACE ogCONNECT

ÖRYGGI AÐGERÐAÁkveðnar aðgerðir (t.d. GET og HEAD) eru skilgreindarsem öruggar að því leiti að köll í þær fyrir auðlind á ekki aðbreyta neinni stöðu

Aðrar aðgerðir (t.d. POST og PUT) eru það ekki, þær munuað öllum líkindum breyta stöðu á vefþjón

IDEMPOTENCYPUT og DELETE eru aðgerðir eru idempotent, þ.e.a.s. aðkalla í þær mörgum sinnum með sömu skilyrðum hefursömu áhrif og að kalla einu sinni

POST er ekki idempotent þar sem hvert kall getur bætt viðnýrri einingu

GET, HEAD, OPTIONS og TRACE eru einnig idempotent þarsem HTTP er stöðulaust

ÖRYGGI AÐGERÐAÁkveðnar aðgerðir (t.d. GET og HEAD) eru skilgreindarsem öruggar að því leiti að köll í þær fyrir auðlind á ekki aðbreyta neinni stöðu

Aðrar aðgerðir (t.d. POST og PUT) eru það ekki, þær munuað öllum líkindum breyta stöðu á vefþjón

IDEMPOTENCYPUT og DELETE eru aðgerðir eru idempotent, þ.e.a.s. aðkalla í þær mörgum sinnum með sömu skilyrðum hefursömu áhrif og að kalla einu sinni

POST er ekki idempotent þar sem hvert kall getur bætt viðnýrri einingu

GET, HEAD, OPTIONS og TRACE eru einnig idempotent þarsem HTTP er stöðulaust

AÐ GEYMA STÖÐUFaldar breytur í formum ()

HTTP Cookies

Gögn í query string (/?session=FOO)

KÖKUR – COOKIESKökur eru sendar af server til client og eru þaðan í frásendar með hverju request, samanstendur af:

Nafni & gildi

Dagsetningu sem kakan rennur út á

Á hvaða slóð kakan er sett, t.d. /foo

Á hvaða léni er kakan sett, t.d. bar.foo.com eða öllundirlén með .foo.com

Er kakan örugg? Þ.e.a.s. á aðeins að senda hana yfirHTTPS?

Á að leyfa kökuna aðeins yfir HTTP?

CACHINGÞrjár leiðir til að cache-a gögn í HTTP:

Ferskleiki – gefinn tími sem gögn eru "fersk" og ekkiþarf að sækja aftur á vefþjón, t.d. með Cache-Control:max-age=n haus

Staðfesting – getum fengið staðfestingu hvort gögn séuenn í lagi, t.d. með If-Last-Modified haus og ETaghaus

Ógilding – ef við breytum gögnum (POST, PUT, DELETE)þá er cache hreinsað

SPURNINGARHvað er framendi?

Hvað er bakendi?

Hver er munurinn þarna á?

Hvernig eiga samskipti sér stað á milli?

Hver bjó til HTTP?

Hvernig fer HTTP "yfir vírinn"?

Hvað er DNS?

SPURNINGARHvað er request?

Hvað er response?

Hvað eru hausar - headers?

Hvað þýðir að HTTP sé stateless?

Hvað er URI?

Hvað er URL?

Hverjir eru partar URLs?

SPURNINGARHvað eru HTTP aðferðir?

Hvað gerir GET aðferðin?

Hvað gerir POST aðferðin?

Hvað er átt við með öryggi aðgerða?

Hvað er idempotency?

Hvað eru stöðukóðar?

Hvernig flokkast stöðukóðar?

Hvað eru cookies?

Hvað týpur eru af cookies?

SPURNINGARHvað er þjöppun í HTTP?

Hvað er caching í HTTP?

Hverjir cachea gögn?

Hvað er HTTPS?

Hvað eru efnissamningaviðræður, content negotiation?

Hvað er basic authentication?

VEFÞJÓNUSTUR

VEFÞJÓNUSTURW3C skilgreining:

"A Web service is a software system designed tosupport interoperable machine-to-machine interactionover a network"

Vefþjónusta er hugbúnaðarkerfi hannað til að eigasamvirk samskipti, vél-í-vél yfir net

SAMVIRKNI –INTEROPERABILITY

Samvirkni gengur út á að láta kerfi virka saman

Syntactic interoperability – málskipunarsamvirkni

Við getum talað saman og skipst á gögnum

Semantic interoperability – merkingarbærsamvirkni

Við vitum merkinguna í samskiptum okkar – getumtúlkað

SOAPPrótókoll – samskiptareglur – til að skiptast á skipulegumgögnum í útfærslum á vefþjónustum

Notar XML fyrir form og oftast HTTP fyrir gagnasendingar– POSTum gögnum á endapunkt

Stóð upprunalega fyrir Simple Object Access Protocol enþví var hætt þegar W3C tók yfir stöðlun

RESTRepresentational State Transfer, skilgreint í doktorsritgerðRoy Fielding árið 2000

REST er arkitektúrsstíll sem hunsar útfærslu og samskiptien einblínir á hlutverk hluta, samskipti þeirra á milli ogtakmarkanir þar á

Skilgreinir sex takmarkanir á arkitektúr

REST TAKMARKANIRClient-server – samræmt viðmót aðskilur client og server

Stöðulaust – engin staða er geymd á milli beiðna

Cacheable – client getur geymt afrit af svari, svör verða þvíað skilgreina hvort það megi eða ekki

REST TAKMARKANIRLagskipt kerfi – client þarf ekki að vita hvort hann sétengdur enda server eða hvort hann tengist einhverjummillilið

Samræmt viðmót – einfaldar og aðskildur arkítektúr þ.a.client og server geta vaxið óháð hvor öðrum

Kóði eftir þörfum (ekki krafist) – server getur sent kóða tilclient til að auka virkni hans

SAMRÆMT VIÐMÓTGrunnur að hönnun á REST þjónustu, fjögur atriði aðleiðarljósi:

Auðkennum auðlindir – biðjum um auðlind og fáumhana ekki sjálfa heldur framsetningu á henni

Vinnum með auðlindir gegnum framsetningu – clientsem þekkir framsetningu á auðlind veit nóg til að getabreytt henni

Sjálf-lýsandi skilaboð – vitum alltaf nóg til að geta unniðmeð skilaboðin

HATEOS

REST & HTTPVefurinn er stærsta útfærsla á REST arkitektúr

Fielding einn af aðalhöfundum HTTP

Notum..

URI fyrir auðlindirnar okkar – nafnorðin

Content types fyrir framsetningu á auðlindum

HTTP aðgerðir til að tilgreina hvað við gerum –sagnirnar

HTTP skilgreinir caching, auðkenningu, contentnegotiation...

SPURNINGARHvað eru vefþjónustur?

Hvað er samvirkni, interoperability?

Hvað er WSDL?

Hvað er SOAP?

Hvað er REST?

SPURNINGARHvaða takmarkanir skilgreinir REST?

Hvað er átt við með samræmdu viðmóti í REST?

Hvað er HATEOAS?

Hver eru tengslin milli HTTP og REST?

ÖRYGGI

OWASP

Opin samtök sem stuðla að þróun öruggra forrita semhægt er að treysta

Open Web Application Security Project

https://www.owasp.org/

OWASP TOP 10 – 2013A1 Injection

A2 Broken Authentication and Session Management

A3 Cross-Site Scripting (XSS)

A4 Insecure Direct Object References

A5 Security Misconfiguration

OWASP TOP 10 – 2013A6 Sensitive Data Exposure

A7 Missing Function Level Access Control

A8 Cross-Site Request Forgery (CSRF)

A9 Using Components with Known Vulnerabilities

A10 Unvalidated Redirects and Forwards

SPURNINGAR

Hvað er OWASP?

NODE.JS

NODE.JSNode.js er verkvangur (platform) byggður á V8 til að smíðahröð, skalanleg netforrit

Node.js notar atburðadrifið, ekki-blokkandi I/O módel semgerir það létt, skilvirkt og fullkomið fyrir rauntíma forritsem meðhöndla mikil gögn yfir dreifð kerfi

NODE.JSBeislar kraft V8 með því að skrifa lag ofan á það

core í node.js reynir að vera mjög einfalt – flækjan ípökkum

Mjög gott pakkakerfi, NPM, styður við þetta

Kynning frá Ryan Dahl

http://www.youtube.com/watch?v=jo_B4LTHi3I

V8Open source JavaScript vél, hönnuð af Google fyrirChrome

Skrifuð í C++ og útfærir ECMAScript, þriðju útgáfu

Þýðir JavaScript í vélamál fyrir keyrslu í staðinn fyrir aðtúlka og með ýmsum bestunar aðferðum keyrir JavaScripthratt

https://developers.google.com/v8/

https://developers.google.com/v8/

ATBURÐADRIFIÐNode.js forrit eiga að vera atburðadrifin – erfitt að skrifaekki þannig

Gefum upp callback fall fyrir hluti sem taka tíma, kallað íþað þegar aðgerð klárast

Allar aðgerðir í core sem gera eitthvað í lengri tíma takavið callback

Node.js er sjálfgefið keyrt í einum process, þar sem CPU eryfirleitt ekki það sem takmarkar

Þ.a. ef við blokkum -- bíðum eftir I/O, minni, neti o.sfr. þáblokkar allt node.js keyrsluumhverfið

EKKI-BLOKKANDI I/O –ASYNC I/O

I/O er ótrúlega hægt m.v. annað sem við gerum

Þegar við biðjum um I/O í node.js sendum við atburði semverða keyrðir þegar stýrikerfi er búið

Þurfum því ekki að bíða! Gerum eitthvað nytsamlegt ámeðan

CALLBACKSLang flest API í node.js taka við callbacks

Ef villa kom upp eru gögn í err, annars eru niðurstöður ídata

function (err, data) { }

STRAUMARHugmyndin um strauma hefur verið til síðan unix var aðverða til

Hver hlutur gerir einn hlut vel og síðan streymiru á milliþeirra – búum til stórt kerfi úr mörgum litlum

Virkar vel með async I/O og mikið notað í Node.js

NPM

"Node Packaged Modules"

EXPRESSWeb app framework fyrir node

Smátt í sniðum en gefur möguleika á middleware til aðbæta við hegðun

Notaði Connect middleware sem gefur aðgang að t.d.logger, authentication, json o.s.fr. en það er allt núna settsérstaklega upp

MIDDLEWAREMiddleware er hugbúnaður sem tengir forrit

Í frameworkum er þetta yfirleitt einhverskonar pluginarkítektúr sem keyrir fyrir hvert request/response

Bætir við ákveðinni virkni í request eða response

PROMISESPromises eru notuð til að samstilla async kóða

Staðgengill gildis sem mun koma í framtíðinni

Auðveldar að vissu leiti að vinna með async kóða

SPURNINGARHvað er Node.js?

Hvað er V8?

Hvað þýðir það að Node.js sé atburðadrifið?

Hvað er ekki-blokkandi I/O?

Hvað eru callbacks?

Hvað eru straumar?

SPURNINGARHvað er NPM?

Hvað er express?

Hvað er middleware?

Hvað eru Grunt og Gulp og hvernig hjálpar það okkur?

Hvað eru promises?

WEB APPS

WEB APPSVerður alltaf þægilegra og þægilegra að skrifa vefforrit

All flest "mjóir" clientar – treysta á bakenda til að sjá ummest af vinnu

Ný tækni bíður upp á að vefforrit eru jafngóð eða jafnvelbetri en "feitir" clientar

MVCModel–view–controller

Kom snemma fram þegar farið var að vinna með GUI

Útfært í Smalltalk á sjöunda áratugnum

Mikið notað í frameworkum fyrir vefforritun

FRAMEWORKSHvert forritunarumhverfi hefur upp á að bjóða mörgmismunandi framework

Leysa algeng vandamál og létta algeng verkefni

Hvetja til góðra vinnubragða, skipulags og endurnýtingar

I18N & L10NStuðningur við að skrifa vefi sem hægt er að þýða – i18neða internationalization

Stuðningur við þýðingar fyrir ákveðin svæði – l10n eðalocalization

SPURNINGARHvað eru vefforrit?

Hverjir eru einhverjir kostir við vefforrit?

Hverjir eru einhverjir ókostir við vefforrit?

MVC

Hvað er MVC?

Hvert er hlutverk módelsins?

Hvert er hlutverk views?

Hvert er hlutverk controllers?

Hverjir eru kostir MVC?

SPURNINGARHvað eru framework fyrir vefforrit?

Hvað er routing?

Hvað er templating og hvernig tengist það MVC?

Hvað er internationalization?

Hvað er localization?

Til hvers útfærum við caching í vefforritum?

Hvað er ORM?

Hvað er scaffolding í samehengi við framework?

VERKEFNI

SPURNINGARGeta lesið úr og sett upp síðu með merkingarbæru HTML

Geta vísað í W3C validator og útskýrt

Geta lesið úr og bætt inn í CSS reglur

Geta sagt til um hvaða reglur eigi við hvaða element íHTML

Geta reiknað gildi úr CSS reglum

Geta útskýrt responsive vef

Geta lesið úr JavaScript kóða

SPURNINGARGeta bætt við/breytt JavaScript kóða

Útskýra DOM aðgerðir gerðir gegnum JavaScript

Geta lesið úr einföldum jQuery aðgerðum og breytt/bættvið

Útskýra validation á gögnum, bæði á framenda og íbakenda

Útskýra Ajax virkni

Geta lesið úr PHP kóða

SPURNINGARGeta breytt/bætt við PHP kóða

Geta lesið úr PHP klösum

Geta lesið úr aðgerðum á gagnagrunn með PDO

Geta lesið úr SQL skipunum, t.d. til að búa til töflu, lesa úrtöflu o.s.fr.

Geta dæmt kóða út frá SQL injection og XSS

SPURNINGARGeta útskýrt vefþjónustur

Geta útskýrt hvernig tengjast mætti vefþjónustu og notagögn hennar

Geta lesið úr JavaScript kóða skrifuðum fyrir Node.js

Útskýra routes í Express

Útskýra Jade template