2011 09-13 j query workshop
•Download as PPTX, PDF•
0 likes•248 views
Visma Sirius holdt Onsdag 14. september kurs i JQuery for Abakus og Online ved NTNU i Trondheim. JQuery er et rammeverk for Javascript som forenkler utvikling av webapplikasjoner.
Recommended
More Related Content
Similar to 2011 09-13 j query workshop
Similar to 2011 09-13 j query workshop (20)
More from Visma Consulting AS
More from Visma Consulting AS (18)
2011 09-13 j query workshop
- 1. Page 1 Jquery Workshop Visma Sirius AS
- 2. Hvem er vi? Bjarne Muri – NTNU informatikk 2009 Bjarne Sletten Olsen – NTNU data 2009 Rune J. Hovland – NTNU data 2009 Steinar Hagen – NTNU informatikk 2011 Page 2
- 3. Agenda Visma Sirius Intro JavaScript Hvorfor JQuery? Pizza Workshop Oppgaver Demo Etterpå «vandrer» vi sammen. Page 3
- 4. Visma Sirius Page 4
- 6. 5 gode grunner for fast jobb Faglig dyktige, og dyrking av fag Lavt hierarki, flat struktur Prosjekter Sosialt Jobber som team Page 6
- 7. Server vs klient Klient Server Hvem skal gjøre jobben? Hvem kan gjøre hva? Page 7
- 8. Server vs klient Klient Page 8 Tegne nettsiden (HTML) Manipulere HTML Validering HTML, javascript, Flash files, ActiveX controls, Java applets Server Manipulere HTML Validering Persistere data Active Server Pages (ASP), PHP, C/C++, ASPX, Java Server Pages (JSP), mm Du betaler for lasten Går tregt Validering er dobbeltarbeid Raskt
- 9. JavaScript Implementasjon av ECMAScript Syntaks fra C Navn og navnekonvensjon fra Java Node.js Mest vanlig som klientspråk i nettleser I dag kun i nettlesere Page 9
- 10. Enkel bruk, DHTML Demo 1- 2 Page 10
- 11. Page 11
- 12. Støtte i alle nettlesere? Demo 3 Page 12
- 13. Page 13
- 14. Kom i gang Importere jQuery Kan 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="Scripts/jquery-1.4.1.js"></script> Page 14
- 15. $ Page 15
- 16. DEMO - jQuery Page 16
- 17. Hvordan finne elementer Selectors http://www.w3schools.com/jquery/jquery_ref_selectors.asp Demo Page 17
- 18. I web er din venn w3schools http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=* Page 18
- 19. Riktig verktøy er halve jobben Firefox Firebug Webdeveloper DEMO Page 19
- 20. Oppgave Lag 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
- 21. Effekter .animate( properties, options) properties: map med css-egenskapersomskalendres. options: map med øvrigeparametere for effekten duration: varighetpåeffekten. Se api.jquery.com/animate for flereparametere. Page 21
- 22. JQueryUI Plugins tilJQuery med effekterog widgets. Eksempler: Drag & drop Dialoger Datepicker Tabs Se jqueryui.com for flereeksempler. Page 22
- 23. Komponentrammeverket JQueryhar et komponentrammeverk. JQueryUIogandre plugins erhovedsakeligbasertpådette. Mye boilerplate-kode Enkelt å benytte– Vanskelig å forstå Page 23
- 24. Demonstrasjon JQuery: Animate JQueryUI Drag & drop Rammeverket Page 24
- 25. Events Funksjonersomkanutføresvedspesifikkehendelser. Brukerofteanonymeindrefunksjonertildette. function doSomething(event) { // Kodesomskalutførespå Click-eventen.}$(“.button”).Click(doSomething); $(“.button”).Click( function(event) { // Kodesomskalutførespå Click-eventen.}); Page 25
- 26. AJAX Kommunikasjon 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
- 27. Oppgave Lagekinasjakk: Byggebrettet Flyttekuler (drag & drop) Hindreflerekuler i samme hull. Avansert: Hentbrettet via AJAX. Håndhevflytte-regler. Tjuvstartogfasit:http://dl.dropbox.com/u/41656408/JQueryKurs.zip Page 27
- 28. Page 28
Editor's Notes
- 30 sekunder om vismaVisma 5035 ansatte, store på økonomi og datasystemer for økonomi. I tillegg har vi alt fra jursiter til byggebransjen.Visma Sirius er it konsulent selskapet som eies av Visma, og jeg Bjarne en it konsulent i et hardcore it-selskap. Så kjære Data, komtek, informatik og andre it studenter vi har en bra sommerjobb til deg
- FagligCase, sitter sammen som et prosjektDyktige fagpersoner tilgjengeligDet er sommmerferie og dette er en 8-16 jobb hvor du skal orke å dra på stranden etter endt dag.Sommerstudentene får eget sosial budsjett og blir en del av firmaet. Treninger og moroJobber i 16. etage i et splitter nytt bygg, med utsikt ned på operaen og utover oslo fjorden.
- VI prater om webutvikling i dagNettleseren, IE,FirefoxWebserver, IIS, tomcat, glasfishosv
- ECMA er en standariseringsorganisasjon
- Trykk på knapp som skrifter farge og disabler knappen