�ݺ�ߣ

Jquery WorkshopVisma Sirius AS

Hvem er vi?Bjarne Muri – NTNU informatikk 2009Bjarne Sletten Olsen – NTNU data 2009Rune J. Hovland – NTNU data 2009Steinar Hagen – NTNU informatikk 2011Page 2

AgendaVisma Sirius Intro JavaScriptHvorfor JQuery? PizzaWorkshopOppgaverDemoEtterpå «vandrer» vi sammen.Page 3

5 gode grunner for fast jobbFaglig dyktige, og dyrking av fagLavt hierarki, flat strukturProsjekterSosialtJobber som teamPage 6

Server vs klientKlientServerHvem skal gjøre jobben?Hvem kan gjøre hva?Page 7

Server vs klientKlientPage 8Tegne nettsiden (HTML)Manipulere HTMLValideringHTML, javascript, Flash files, ActiveX controls, Java appletsServerManipulere HTMLValideringPersistere dataActive Server Pages (ASP), PHP, C/C++, ASPX, Java Server Pages (JSP), mmDu betaler for lastenGår tregtValidering er dobbeltarbeidRaskt

JavaScriptImplementasjon av ECMAScriptSyntaks fra CNavn og navnekonvensjon fra JavaNode.jsMest vanlig som klientspråk i nettleserI dag kun i nettleserePage 9

Enkel bruk, DHTMLDemo 1- 2Page 10

Støtte i alle nettlesere? Demo 3Page 12

Kom i gangImportere jQueryKan både være i HTML siden eller egen js fil<html��xmlns="http://www.w3.org/1999/xhtml"> <head> ��<title></title></head><body>��<script��type="text/javascript"��src=/slideshow/2011-0913-j-query-workshop/9389404/"Scripts/jquery-1.4.1.js"></script>Page 14

Hvordan finne elementerSelectorshttp://www.w3schools.com/jquery/jquery_ref_selectors.aspDemoPage 17

I web er din venn w3schoolshttp://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=*Page 18

Riktig verktøy er halve jobbenFirefoxFirebugWebdeveloperDEMOPage 19

OppgaveLag en <div> i HTML.Hentdiv’en med JQuery.Sett css-klasse (“hole”).Sett posisjon (feks: {position: absolute, left: 50px, right: 100px}).Legg til en <div> inniførstediv’en.Sett css-klassepådiv’en (“peg”).Eksperimenter med andreegenskaper.Flytt et element fra et stedtil et annet.Hint: append() og detach() er fine funksjoner.Page 20

Effekter.animate( properties, options)properties: map med css-egenskapersomskalendres.options: map med øvrigeparametere for effektenduration: varighetpåeffekten.Se api.jquery.com/animate for flereparametere.Page 21

JQueryUIPlugins tilJQuery med effekterog widgets.Eksempler:Drag & dropDialogerDatepickerTabsSe jqueryui.com for flereeksempler.Page 22

KomponentrammeverketJQueryhar et komponentrammeverk.JQueryUIogandre plugins erhovedsakeligbasertpådette.Mye boilerplate-kodeEnkelt å benytte– Vanskelig å forståPage 23

DemonstrasjonJQuery:AnimateJQueryUIDrag & dropRammeverketPage 24

EventsFunksjonersomkanutføresvedspesifikkehendelser.Brukerofteanonymeindrefunksjonertildette.function doSomething(event) { // Kodesomskalutførespå Click-eventen.}$(“.button”).Click(doSomething);$(“.button”).Click( function(event) { // Kodesomskalutførespå Click-eventen.});Page 25

AJAXKommunikasjon med server utensidelasting.Eventbasert.$.get( “search.aspx”, { query: “NTNU, Trondheim”, max: 100 },�� function(data){ // Process data. });Mange fleremuligheter: api.jquery.com/category/ajax/Page 26

OppgaveLagekinasjakk:ByggebrettetFlyttekuler (drag & drop)Hindreflerekuler i samme hull.Avansert:Hentbrettet via AJAX.Håndhevflytte-regler.Tjuvstartogfasit:http://dl.dropbox.com/u/41656408/JQueryKurs.zipPage 27

�ݺ�ߣ

2011 09-13 j query workshop

Recommended

More Related Content

Similar to 2011 09-13 j query workshop (20)

More from Visma Consulting AS (18)

2011 09-13 j query workshop

Editor's Notes