SlideShare a Scribd company logo
1 of 8
Webb workshop 1 : Javascript och jQuery En workshop om hur webbupplevelsen kan förbättras med Klient Kod. Av Kaveh H
Vad är javascript bra till? Animationer och effekter som förbättrar upplevelsen på sidan (login på https://www.comviq.se/default.aspx ) Validering av input-fält (tanka kontant på http://www.comviq.se) Ajax-laddning (söktips http://www.google.se) Minska på antal requests mot servern (http://www.tele2.se/foretag/mobiltelefoner.html, http://angliatest5.tele2.se/mobiel/abonnement.html)
Nackdelar med javascript Ajax ej SEO-vänligt Blir onödig komplicerad om man gör det ”fel” (http://www.tele2.se/foretag/mobiltelefoner/apple-iphone-4-16gb) Slött på äldre browsers (IE6) Browser inkompabilitet
När skam använda server kod istället? Stor mängd data som ska genomsökas (http://www.google.com) Sidor som bör vara SEO-optimerade Landingssidor Informationssidor Validering måste göras på server p.g.a säkerhet Authentisering Integrationer Ajax stödjer ej utomstående domäner
När kan javascript/ajax användas på en sida? Interaktiva sidor där gränssnitt tillståndet bör bevaras. (http://www.tele2.se/foretag/mobilabonnemang/lag) Sökning av mindre mängd information (http://www.tele2.se/kundservice/kopstallen-iphone.html)
Javascript +Server kod =     Interaktiviteten av klientscript sidor + SEO av server sidor
Varför $(’.jQuery’)  Väldokumenterat + stor community (http://jquery.org) Löser många problem med browser javascript inkompabilitet Mindre och mer lättläst kod (http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1) Plugins (http://plugins.jquery.com/) Många hjälp funktioner ($.fn.map, $.fn.inArray, $.fn.a
Javascript kodning stöd och verktyg Visual Studio Intellisense. Kodning och felsökning: Firefox Firebug, Google Chrome developer tools, Internet Explorer developer tools.

More Related Content

Viewers also liked

Numbers on iPhone market
Numbers on iPhone marketNumbers on iPhone market
Numbers on iPhone marketKaveh_Hadjari
 
Cms Summit 2009 Com Score
Cms Summit 2009   Com ScoreCms Summit 2009   Com Score
Cms Summit 2009 Com Scoretiniporter
 
Eat Smart Product Design
Eat Smart Product DesignEat Smart Product Design
Eat Smart Product DesignTICS
 
Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...
Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...
Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...Learn.com
 
Insurance Abroad
Insurance AbroadInsurance Abroad
Insurance AbroadTICS
 
Pvr Ppt
Pvr PptPvr Ppt
Pvr PptTICS
 

Viewers also liked (11)

My Visual Arts Journey
My Visual Arts JourneyMy Visual Arts Journey
My Visual Arts Journey
 
Numbers on iPhone market
Numbers on iPhone marketNumbers on iPhone market
Numbers on iPhone market
 
DEX Imaging
DEX ImagingDEX Imaging
DEX Imaging
 
Jungle
JungleJungle
Jungle
 
Cms Summit 2009 Com Score
Cms Summit 2009   Com ScoreCms Summit 2009   Com Score
Cms Summit 2009 Com Score
 
Eat Smart Product Design
Eat Smart Product DesignEat Smart Product Design
Eat Smart Product Design
 
agil-IT-y Consulting
agil-IT-y Consultingagil-IT-y Consulting
agil-IT-y Consulting
 
Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...
Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...
Planning For Success: How To Avoid The Top Five Causes Of Lms Implementation ...
 
Insurance Abroad
Insurance AbroadInsurance Abroad
Insurance Abroad
 
Pvr Ppt
Pvr PptPvr Ppt
Pvr Ppt
 
Miller Presentation
Miller PresentationMiller Presentation
Miller Presentation
 

Similar to Webb workshop 1

VT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och AjaxVT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och AjaxAnton Tibblin
 
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbteknikerVT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbteknikerAnton Tibblin
 
VT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & BootstrapVT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & BootstrapAnton Tibblin
 
VT2018 - DA355A - Ajax
VT2018 - DA355A - AjaxVT2018 - DA355A - Ajax
VT2018 - DA355A - AjaxAnton Tibblin
 
VT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.jsVT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.jsAnton Tibblin
 
RIA-utveckling Kalmar
RIA-utveckling KalmarRIA-utveckling Kalmar
RIA-utveckling KalmarDavid Waller
 
WebSockets för applikationstestare
WebSockets för applikationstestareWebSockets för applikationstestare
WebSockets för applikationstestareholiman
 
VT2019 - DA355A - JS-ramverk
VT2019 - DA355A - JS-ramverkVT2019 - DA355A - JS-ramverk
VT2019 - DA355A - JS-ramverkAnton Tibblin
 
HT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScriptHT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScriptAnton Tibblin
 

Similar to Webb workshop 1 (12)

VT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och AjaxVT2019 - DA355A - jQuery och Ajax
VT2019 - DA355A - jQuery och Ajax
 
jQuery & Ajax
jQuery & AjaxjQuery & Ajax
jQuery & Ajax
 
jQuery and Ajax
jQuery and AjaxjQuery and Ajax
jQuery and Ajax
 
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbteknikerVT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
 
VT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & BootstrapVT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & Bootstrap
 
VT2018 - DA355A - Ajax
VT2018 - DA355A - AjaxVT2018 - DA355A - Ajax
VT2018 - DA355A - Ajax
 
VT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.jsVT2018 - DA355A - Phonegap, react, vue.js
VT2018 - DA355A - Phonegap, react, vue.js
 
RIA-utveckling Kalmar
RIA-utveckling KalmarRIA-utveckling Kalmar
RIA-utveckling Kalmar
 
WebSockets för applikationstestare
WebSockets för applikationstestareWebSockets för applikationstestare
WebSockets för applikationstestare
 
VT2019 - DA355A - JS-ramverk
VT2019 - DA355A - JS-ramverkVT2019 - DA355A - JS-ramverk
VT2019 - DA355A - JS-ramverk
 
OPTIMERA STHLM! Loadimpact
OPTIMERA STHLM! LoadimpactOPTIMERA STHLM! Loadimpact
OPTIMERA STHLM! Loadimpact
 
HT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScriptHT23 - DA106A - Introduktion till JavaScript
HT23 - DA106A - Introduktion till JavaScript
 

Webb workshop 1

  • 1. Webb workshop 1 : Javascript och jQuery En workshop om hur webbupplevelsen kan förbättras med Klient Kod. Av Kaveh H
  • 2. Vad är javascript bra till? Animationer och effekter som förbättrar upplevelsen på sidan (login på https://www.comviq.se/default.aspx ) Validering av input-fält (tanka kontant på http://www.comviq.se) Ajax-laddning (söktips http://www.google.se) Minska på antal requests mot servern (http://www.tele2.se/foretag/mobiltelefoner.html, http://angliatest5.tele2.se/mobiel/abonnement.html)
  • 3. Nackdelar med javascript Ajax ej SEO-vänligt Blir onödig komplicerad om man gör det ”fel” (http://www.tele2.se/foretag/mobiltelefoner/apple-iphone-4-16gb) Slött på äldre browsers (IE6) Browser inkompabilitet
  • 4. När skam använda server kod istället? Stor mängd data som ska genomsökas (http://www.google.com) Sidor som bör vara SEO-optimerade Landingssidor Informationssidor Validering måste göras på server p.g.a säkerhet Authentisering Integrationer Ajax stödjer ej utomstående domäner
  • 5. När kan javascript/ajax användas på en sida? Interaktiva sidor där gränssnitt tillståndet bör bevaras. (http://www.tele2.se/foretag/mobilabonnemang/lag) Sökning av mindre mängd information (http://www.tele2.se/kundservice/kopstallen-iphone.html)
  • 6. Javascript +Server kod = Interaktiviteten av klientscript sidor + SEO av server sidor
  • 7. Varför $(’.jQuery’) Väldokumenterat + stor community (http://jquery.org) Löser många problem med browser javascript inkompabilitet Mindre och mer lättläst kod (http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip1) Plugins (http://plugins.jquery.com/) Många hjälp funktioner ($.fn.map, $.fn.inArray, $.fn.a
  • 8. Javascript kodning stöd och verktyg Visual Studio Intellisense. Kodning och felsökning: Firefox Firebug, Google Chrome developer tools, Internet Explorer developer tools.