jquery Grundkurs 1 Copyright Mahmud Al Hakim
|
|
|
- Björn Jörgen Åkesson
- för 7 år sedan
- Visningar:
Transkript
1 jquery Grundkurs Copyright Mahmud Al Hakim Innehåll Introduktion till JavaScript-bibliotek Vad är jquery? Implementation och Grundsyntax Selectors (väljare) jquery CSS jquery Events jquery Effects Chaining Ajax jquery UI jquery Plugins (tillägg) Copyright 2015 Mahmud Al Hakim 2 jquery Grundkurs 1
2 JavaScript-bibliotek För att förenkla användning av JavaScript och för att undvika återuppfinnandet av hjulet, har erfarna programmerare skrivit ett antal bibliotek som innehåller funktioner och objekt som man kan återanvända. Copyright 2015 Mahmud Al Hakim 3 Några JavaScript-bibliotek jquery Modernizr Bootstrap Mootools Prototype Copyright 2015 Mahmud Al Hakim 4 jquery Grundkurs 2
3 Lite statistik (2015) Usage of JavaScript libraries for websites Copyright 2015 Mahmud Al Hakim Vad är jquery jquery är ett JavaScript-bibliotek. Syftet med jquery är att förenkla och snabba upp webbutvecklingen. Med jquery kan du manipulera HTML, DOM och CSS. Du kan även hantera händelser (events) och skapa animeringar på ett snabbt och effektivt sätt. Version 1 lanserades 2006 av John Resig. OBS! Version 2 är inte kompatibel med IE 6/7/8 Copyright 2015 Mahmud Al Hakim 6 jquery Grundkurs 3
4 Implementation jquery-biblioteket består av en enda JavaScript-fil som innehåller all funktionalitet. Filen kan inkluderas på en webbsida på två olika sätt: 1. Ladda ner från Spara lokalt och lägg till en script-tagg <script src="jquery min.js"></script> 2. Använd en CDN (Content Delivery Network) t.ex. från Google <script src=" </script> Copyright 2015 Mahmud Al Hakim 7 Placering av jquery-kod Du kan placera jquery-kod antingen i huvudet i en script-tagg eller en extern JavaScript-fil (js-fil). <head> <title>jquery</title> <script src=" </script> <script> // Skriv jquery här... </script> </head> Copyright 2015 Mahmud Al Hakim 8 jquery Grundkurs 4
5 jquery Grundsyntax $(selector).action(); $ anropar jquery En väljare för att hitta HTML-element En metod (event/händelse) t.ex. click eller hide Copyright 2015 Mahmud Al Hakim 9 Document Ready För att vara säker på att jquery hittar element och stilmallar på sidan, så bör du först vänta tills hela dokumentet (inkl. CSS) är nerladdad och färdig (ready). Därför placeras jquery-metoder normalt i en speciell metod som heter ready() // Skriv jquery kod här... Copyright 2015 Mahmud Al Hakim 10 jquery Grundkurs 5
6 En förkortad version av Document Ready Det finns en enklare metod för att kolla om dokumentet är ready. $(function(){ Detta är samma som Copyright 2015 Mahmud Al Hakim 11 jquery Selectors (väljare) Med hjälp av en selector väljs ett eller flera HTML-element. Olika sätt att välja element: 1. Element-väljare (Element Selector) 2. ID-väljare (#id Selector) 3. Klass-väljare (.class Selector) 4. This-väljare (väljer detta element) Copyright 2015 Mahmud Al Hakim 12 jquery Grundkurs 6
7 Element Selector - Exempel $(document).ready(function() { $("button").click(function() { $("p").hide(); } ); } ); <p>lite text och annat smått och gott</p> <p>lite text och annat smått och gott</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim 13 #id Selector - Exempel $(document).ready(function() { $("button").click(function() { $("#ingress").hide(); } ); } ); <p id="ingress">första stycket</p> <p>lite text och annat smått och gott</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim 14 jquery Grundkurs 7
8 .class Selector - Exempel $(document).ready(function() { $("button").click(function() { $(".test").hide(); } ); } ); <p class="test">stycke 1</p> <p>stycke 2</p> <p class="test">stycke 3</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim 15 This-väljare - Exempel $(document).ready(function() { $("p").click(function() { $(this).hide(); } ); } ); <p>stycke 1</p> <p>stycke 2</p> <p>stycke 3</p> Copyright 2015 Mahmud Al Hakim 16 jquery Grundkurs 8
9 Tips! jquery Selector Tester Copyright 2015 Mahmud Al Hakim 17 jquery CSS() Med hjälp av metoden css() du kan hämta eller sätta CSS-egenskaper. Exempel $("p").css("background-color"); Hämtar värdet av CSS-egenskapen background-color för det absolut första stycket (p) som hittas i dokumentet. Copyright 2015 Mahmud Al Hakim 18 jquery Grundkurs 9
10 jquery CSS() Exempel 1 $("button").click(function(){ alert( $("p").css("background-color") ); <p style="background-color:#ff00ff"> Lite text och annat smått och gott.</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim 19 jquery CSS() Exempel 2 $("button").click(function(){ $("p").css("background-color", "yellow"); Sätter värdet yellow på egenskapen background-color på ALLA p-element Copyright 2015 Mahmud Al Hakim 20 jquery Grundkurs 10
11 jquery CSS() Exempel 3 $("button").click(function(){ $("p").css({"background-color": "yellow ", "font-size": "200%" Ändrar flera CSS-egenskapar css({"egenskap":"värde","egenskap":"värde",... Copyright 2015 Mahmud Al Hakim 21 addclass() och removeclass() <script> $("button").click(function(){ $("div, p").addclass("important"); </script> Metoden addclass() kopplar en CSS-klass till olika element. <style> Testa även removeclass().important { font-weight: bold; } </style> Copyright 2015 Mahmud Al Hakim 22 jquery Grundkurs 11
12 jquery toggleclass() <script> $("button").click(function(){ $("div").toggleclass("important"); </script> Metoden toggleclass() växlar mellan addclass och removeclass() Copyright 2015 Mahmud Al Hakim 23 Händelser (Events) jquery är skräddarsytt för att reagerar på händelser som uppstår i HTMLdokument. Alla händelser som görs på sidan kallas events t.ex. klicka, välja, peka, m.m. Copyright 2015 Mahmud Al Hakim 24 jquery Grundkurs 12
13 jquery Events Mouse Events Keyboard Events Form Events Document/ Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Copyright 2015 Mahmud Al Hakim 25 jquery Events mouseenter och mouseleave $("p").mouseenter(function () { $(this).css("background-color", "#FF0") ); $("p").mouseleave(function () { $(this).css("background-color", "#FFF") ); Copyright 2015 Mahmud Al Hakim 26 jquery Grundkurs 13
14 jquery Events focus och blur $("input").focus(function(){ $(this).css("background-color", "gold"); $("input").blur(function(){ $(this).css("background-color", "white"); Namn: <input type="text" name="namn"> <br> E-post: <input type="text" name="epost"> Copyright 2015 Mahmud Al Hakim 27 jquery DOM Manipulation En av de viktigaste delarna med jquery är möjligheten att manipulera DOM (Document Object Model). Några användbara metoder text() Hämtar eller sätter text (innehåll). html() Hämtar eller sätter text och HTML. attr() Hämtar eller sätter attribut. val() Hämtar eller sätter värdet (value) från textfält. Copyright 2015 Mahmud Al Hakim 28 jquery Grundkurs 14
15 jquery text() Exempel 1 <script> $("#knapp").click(function(){ alert("text: " + $("#test").text()); </script> <p id="test"> Lite <b>fet</b> text och annat smått och gott.</p> <button id="knapp">visa Text</button> Copyright 2015 Mahmud Al Hakim 29 jquery text() Exempel 2 <script> $("#knapp").click(function(){ $("#test").text("lite text.") </script> <p id="test"></p> <button id="knapp">ändra Text</button> Copyright 2015 Mahmud Al Hakim 30 jquery Grundkurs 15
16 jquery html() Exempel 1 <script> $("#knapp").click(function(){ alert("html: " + $("#test").html()); </script> <p id="test"> Lite <b>fet</b> text och annat smått och gott.</p> <button id="knapp">visa HTML</button> Copyright 2015 Mahmud Al Hakim 31 jquery html() Exempel 2 <script> $("#knapp").click(function(){ $("#test").html("lite <b>fet</b> text.") </script> <p id="test"></p> <button id="knapp">ändra Text</button> Copyright 2015 Mahmud Al Hakim 32 jquery Grundkurs 16
17 jquery attr() Exempel 1 <script> $("#knapp").click(function(){ alert("url: " + $("#test").attr("href")); </script> <a id="test" href=" Webbacademy</a> <br> <button id="knapp">visa URL</button> Copyright 2015 Mahmud Al Hakim 33 jquery attr() Exempel 2 <script> $("#knapp").click(function(){ $("#test").attr("href", "Ny URL") </script> <a id="test" href=" Webbacademy</a> <br> <button id="knapp">ändra URL</button> Copyright 2015 Mahmud Al Hakim 34 jquery Grundkurs 17
18 jquery val() Exempel 1 <script> $("#knapp").click(function(){ alert("value: " + $("#test").val()); </script> <p>namn: <input type="text" id="test" value="mahmud Al Hakim"></p> <button id="knapp">visa value</button> Copyright 2015 Mahmud Al Hakim 35 jquery val() Exempel 2 <script> $("#knapp").click(function(){ $("#test").val("mahmud") </script> <p>förnamn: <input type="text" id="test" value=""></p> <button id="knapp">sätt value</button> Copyright 2015 Mahmud Al Hakim 36 jquery Grundkurs 18
19 Lägga till innehåll append() Infogar innehåll i slutet av valda element. prepend() Infogar innehåll i början av valda element. after() Lägger till innehåll efter valda element. before() Lägger till innehåll före valda element. Copyright 2015 Mahmud Al Hakim 37 append() - Exempel $("#knapp").click(function(){ $("ol").append("<li>ny Punkt</li>") <ol> <li>punkt</li> <li>punkt</li> </ol> <button id="knapp">lägg till en punkt</button> Copyright 2015 Mahmud Al Hakim 38 jquery Grundkurs 19
20 prepend() - Exempel $("#knapp").click(function(){ $("ol").prepend("<li>ny Punkt</li>") <ol> <li>punkt</li> <li>punkt</li> </ol> <button id="knapp">lägg till en punkt</button> Copyright 2015 Mahmud Al Hakim 39 before() och after() $("#knapp1").click(function(){ $("ol").after("<li>ny Text</li>") $("#knapp2").click(function(){ $("ol").before("<li>ny Text</li>") <button id="knapp1">lägg till före</button> <button id="knapp2">lägg till efter</button> Copyright 2015 Mahmud Al Hakim 40 jquery Grundkurs 20
21 Ta bort innehåll empty() Tömmer valda element (tar bort innehåll och alla barnelement) remove() Tar bort valda element från DOM. Tips! Jämför med hide() som enbart sätter CSS-egenskapen display till none. Copyright 2015 Mahmud Al Hakim 41 remove() och empty() $("#div1").click(function(){ $(this).remove() $("#div2").click(function(){ $(this).empty() div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <div id="div2">box 2</div> <div id="div3">box 3</div> Copyright 2015 Mahmud Al Hakim 42 jquery Grundkurs 21
22 jquery Effects Visa/dölj $("#dolj").click(function(){ $("p").hide(1000) $("#visa").click(function(){ $("p").show(1000) Hastighet anges i millisekunder <p>lite text och annat smått och gott.</p> <button id="dolj">dölj</button> <button id="visa">visa</button> Copyright 2015 Mahmud Al Hakim 43 jquery Effects toggle() Växla mellan hide() och show() $("#visa").click(function(){ $("p").toggle(1000); <p>lite text och annat smått och gott.</p> <button id="visa">visa/dölj</button> Copyright 2015 Mahmud Al Hakim 44 jquery Grundkurs 22
23 jquery Effects Fading (toning) Del 1 $("#fade").click(function(){ $("#div1").fadeout(5000); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <button id="fade">dölj</button> Copyright 2015 Mahmud Al Hakim 45 jquery Effects Fading (toning) Del 2 $("#fade").click(function(){ $("#div1").fadein(5000); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; display:none; } <div id="div1">box 1</div> <button id="fade">visa</button> Copyright 2015 Mahmud Al Hakim 46 jquery Grundkurs 23
24 jquery Effects Fading (toning) Del 3 $("#fade").click(function(){ $("#div1").fadetoggle(5000); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <button id="fade">visa/dölj</button> Copyright 2015 Mahmud Al Hakim 47 jquery Effects Fading (toning) Del 4 $("#fade").click(function(){ $("#div1").fadeto(500,0.5); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <button id="fade">tona ner</button> Copyright 2015 Mahmud Al Hakim 48 jquery Grundkurs 24
25 jquery Effects Sliding (glida) $("#glid").click(function(){ $("#panel").slidetoggle("slow"); #glid, #panel { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } <div id="glid">klicka här för mer info</div> <div id="panel">här kommer mer info...</div> Copyright 2015 Mahmud Al Hakim 49 jquery Chaining (Kedja) Med jquery, kan du kedja ihop flera metoder i en och samma sats. Exempel: Kör slideup och slidedown på samma element (i samma sats). $(document).ready(function () { $("#knapp").click(function () { $("#p1").slideup(2000).slidedown(2000); Copyright 2015 Mahmud Al Hakim 50 jquery Grundkurs 25
26 Ajax Asynchronous JavaScript and XML Ajax är inte ett programmeringsspråk. Ajax är ett samlingsnamn för flera olika tekniker som kan användas för att bygga webbapplikationer med bättre interaktivitet. Huvudidén med Ajax är att hämta data från servern utan att behöva ladda om webbapplikationen. Exempel på webbtjänster som använder Ajax är Gmail, Google Maps och Facebook. Copyright 2015 Mahmud Al Hakim 51 jquery - AJAX jquery har ett API (Application Programmers Interface) för Ajax. jquery har ett antal enkla och kraftfulla Ajaxfunktioner (metoder) som du kan få en översikt av på Copyright 2015 Mahmud Al Hakim 52 jquery Grundkurs 26
27 Ajax load() En av viktigaste jquery Ajax-metoder är load() load() laddar data (från t.ex. en textfil eller HTML-fil) från servern och sätter de returnerade data i det valda elementet. Copyright 2015 Mahmud Al Hakim 53 Ajax load() Exempel 1 $(document).ready(function() { $("#knapp").click(function() { $("#div1").load("test.txt"); Filen test.txt <h1>exempel</h1> <p>lite text och annat smått och gott.</p> <button id="knapp"> Hämta data från en extfil </button> <div id="div1"></div> Copyright 2015 Mahmud Al Hakim 54 jquery Grundkurs 27
28 Ajax load() Exempel 2 $("#meny").load("meny.html"); Filen meny.html <a href="index.html">hem</a> <a href="om.html">om oss</a> <a href="kontakt.html">kontakt</a> <div id="meny"></div> <h1>start</h1> Copyright 2015 Mahmud Al Hakim 55 jquery UI jquery UI är ett systerprojekt till jquery som innehåller ett antal UI-objekt (UI = User interface). Några vanliga användargränssnittskomponenter (Widgets) är: Tabs Accordion Datepicker Dialog Titta på exempel här: Copyright 2015 Mahmud Al Hakim 56 jquery Grundkurs 28
29 jquery plugins Det finns hundratals tillägg till jquery på Här hittar du bl.a. fina bildgallerier och animeringar. Testa gärna dessa tillägg: Lightbox Magnific Popup Fancy Form Copyright 2015 Mahmud Al Hakim 57 jquery Grundkurs 29
JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI
JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI Återanvända
E07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2014 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
INTRODUKTION TILL ANGULAR JS
INTRODUKTION TILL ANGULAR JS DEL 1 Mahmud Al Hakim www.alhakim.se mahmud@alhakim.se VAD ÄR ANGULAR? Angular är ett JavaScript ramverk. Angular används för utveckling av frontendwebbapplikationer. Angular
Kursplanering Utveckling av webbapplikationer
Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare
<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
E07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2012 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
Lektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion
Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida
ORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Lektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
JavaScript in SharePoint and not just for Apps. Wictor Wilén
JavaScript in SharePoint and not just for Apps Wictor Wilén Wictor Wilén Agenda Varför JavaScript? JavaScript bibliotek SharePoint JS bibliotek JavaScript Client Side Object Model (JSOM/CSOM) REST Client
Appar med ryggrad. Introduktion till JavaScriptramverket Backbone
Appar med ryggrad Introduktion till JavaScriptramverket Backbone Vanlig webbsida Databas MVC - Model View Controller MVC - Model View Controller MVC Backbone.js Ger struktur Bygger på MVC konceptet Tvingar
EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
JavaScript. DOM Scripting
JavaScript DOM Scripting Vad är Document object Model (DOM)? En standardiserad modell där man ser en webbsida och dess innehåll som objekt document.getelementsbytagname( p ); document.getelementbyid( mittid
JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?
Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia
JAVASCRIPT. Beteende
JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren
TDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
Labora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
Föreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
E11 "Protection" Föreläsning 11, HT2014 Säkerhet, tillgänglighet. Johan Leitet. Kurs: 1dv403 Webbteknik I
Föreläsning 11, HT2014 Säkerhet, tillgänglighet E11 "Protection" Kurs: 1dv403 Webbteknik I Johan Leitet E11 Protection Dagens agenda Tillgänglighet Säkerhet Webbsajt vs. Webbapp Webbsida/webbsajt Webbapplikation
F07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
Objektorienterad programmering Föreläsning 15. Grafiska användargränssnitt (GUI Graphical User Interface)
Objektorienterad programmering Föreläsning 15 Copyright Mahmud Al Hakim mahmud@dynamicos.se www.webacademy.se Agenda Grafiska användargränssnitt (GUI Graphical User Interface) Standardklassen (Control)
12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
Spelprogrammering med JavaScript och HTML5
Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.
Lektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
JS & beteende. TNMK30 - Elektronisk publicering
JS & beteende TNMK30 - Elektronisk publicering Dagens föreläsning HTML Formulär JavaScript Syntax Events DOM Validering av fomulär JavaScript Skriptspråk som körs på klientsidan (klientskript). Koden exekveras
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
AngularJS Skriven av: Isak Glans. Datum: 2015-04-29. Kurs: Webbutveckling. Lärare: Per Sahlin. Utbildning: Systemutvecklare i.net, Newtons Yrkeshögskola. 1 Sammanfattning Syftet med denna uppsats är att
Visa och dölja element med JavaScript
Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility
Webbsidor och webbservrar
Webbsidor och webbservrar Server HTTP-protokollet Dokument (t.ex. HTML kod) Klient URL (t.ex. länk) Normal funktion hos webben: Användaren klickar på länk eller anger URL på annat sätt. Servern lokaliserar
Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:
Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både
En grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
Elektronisk publicering TNMK30
Elektronisk publicering TNMK30 Förra gången Usability & interaktionsdesign Projektintroduktion Bildbehandling. Byte av handledare Istället för Martin Johansson Annsofi Pettersson, annpe655@student.liu.se
ASP.NET Web Forms. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Vad är Web Forms?
ASP.NET Web Forms Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Vad är Web Forms? Web Forms är en del av ASP.NET ramverket. Web Forms är kontroll- och händelsestyrd programmeringsmodell
Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 4. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 4 Peter Dalenius Institutionen för datavetenskap 2015-02-03 Från förra gången XML-dokument specificeras med t.ex. en DTD Två olika sätt att
1ME323 Webbteknik 3 Lektion 6 API. Rune Körnefors. Medieteknik Rune Körnefors
1ME323 Webbteknik 3 Lektion 6 API Rune Körnefors Medieteknik 1 2019 Rune Körnefors rune.kornefors@lnu.se Agenda API (Application Programming Interface) Mashup Flickr API Google Maps API Labb 6 2 API (Application
Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem
Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem Målsättning Att bygg upp en komplett webbplats i ett publiceringssystem. Platsen ska vara snygg,
Innehåll. JavaScript - Grundkurs. Vad är JavaScript? Vad är JavaScript? Vad behövs? Lite historia
JavaScript - Grundkurs Mahmud Al Hakim mahmud@dynamicos.se www.dynamicos.se www.webbacademy.se Innehåll Introduktion till JavaScript JavaScript i HTML-dokument Lite om DOM (Document Object Model) Händelser
En stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
En snabb titt på XML LEKTION 6
LEKTION 6 En snabb titt på XML Bokstaven x i Ajax står för XML, ett mycket användbart beskrivningsspråk som gör det möjligt för Ajax-tillämpningar att hantera komplex strukturerad information. I den här
E12 "Evil is going on"
E12 "Evil is going on" Föreläsning 12, HT2014 AJAX Kurs: 1dv403 Webbteknik I Johan Leitet E12 Evil is going on Dagens agenda AJAX XMLHttpRequest-objektet JSON Vad är AJAX? Asynchronous JavaScript and XML
Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.
Informationsinfrastruktur 7.5 hp Mattias Nordlindh Inledning Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Dokumentet består av
Webbprogrammering TDDD52
Webbprogrammering TDDD52 ERD MySQL+PHP. Förra gången Idag Javascript jquery Progressive enhancement XML & AJAX Lab 4 och 5 Sammanfattning av kursen. Om databastabeller varje tabell ska beskriva en typ
Räkna med ASP.NET MVC 3
Instruktion Räkna med ASP.NET MVC 3 Introduktionsuppgift Författare: Mats Loock Kurs: ASP.NET MVC Kurskod:1DV409 Innehåll Du ska följa steg-för-steg -instruktionen i denna introduktionsuppgift och skapa
Introduk+on +ll programmering i JavaScript
Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,
Lite mer om CGI-programmering
Lite mer om CGI-programmering Innehåll Vad är CGI? Vad är Forms? Vad är Perl? Forms, CGI och Perl Läs också: Internetprogrammering F 14 Kursboken s s 48-51 Exemplen på på kursens sidor: sidor: http://www.nada.kth.se/kurser/kth/2d4334/98-99/contents/cgi/examples.html
2I1073 Föreläsning 1. HTML och XHTML XHTML
2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan
Android översikt. TDDD80 Mobila och sociala applikationer
Android översikt TDDD80 Mobila och sociala applikationer Översikt Köra app på mobil / emulator Android Studio introduktion Android kodning Android labb 1 Köra på mobil / emulator Developer mode på mobilen
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.
Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan
Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Konstruktion av datorspråk
Konstruktion av datorspråk Fö3: Uppmärkningsspråk Peter Dalenius petda@ida.liu.se Institutionen för datavetenskap Linköpings universitet 2009-01-29 Översikt Uppmärkningsspråk Struktur och specifikation
On-line produktion TDDC61
On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner
ASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll
ASP.NET MVC Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till MVC Controller Action-metoder Views Arbeta med Layout-sidor och sektioner Route konfiguration
Webbprogrammering. Sahand Sadjadee
Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages
Innehåll. Dokumentet gäller från och med version 2014.3 1
Innehåll Introduktion... 2 Före installation... 2 Beroenden... 2 Syftet med programmet... 2 Installation av IIS... 2 Windows Server 2008... 2 Windows Server 2012... 6 Installation av webbapplikationen
Räkna med ASP.NET Web Forms
Instruktion Räkna med ASP.NET Web Forms Introduktionsuppgift Författare: Mats Loock Kurs: ASP.NET Web Forms Kurskod:1DV406 Innehåll Du ska följa steg för steg -instruktionen i denna introduktionsuppgift
Ajax TruClient. Erfarenheter, tips och trix från Swedbank IT. Christian Gerdes Performance Engineer, LIGHTS IN LINE AB
Ajax TruClient Erfarenheter, tips och trix från Swedbank IT Christian Gerdes Performance Engineer, LIGHTS IN LINE AB Intro Lite om Swedbanks Teknik Test Varför TruClient En ny teknik kräver ett nytt tänk
Introduktion till programmering
Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med
Webbstandarder för fler än en plattform
Beteckning: Institutionen för matematik, natur- och datavetenskap Webbstandarder för fler än en plattform Mikael Norling, Tomas Wigren Juni 2008 Examensarbete, 15 poäng, B Datavetenskap Internetteknologi
PHP - Fortsättning. PHP och MySQL
PHP - Fortsättning Copyright 2016 Mahmud Al Hakim mahmud@dynamicos.se www.webacademy.se PHP och MySQL Skapa en databasbaserad telefonkatalog Steg 1 Skapa en MySQL databas. Steg 2 Skapa en tabell i denna
E13 Behind the Wild. Dagens agenda. Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium
E13 Behind the Wild Dagens agenda Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium Cookies Alternativ: IP-adress URL
Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Fortsättningskurs Webbklientprogrammering
Tentamen, Fortsättningskurs Webbklientprogrammering (40 YH-poäng) Plats: Övningstenta Tid: Övningstenta Tillåtna hjälpmedel: Papper, penna, suddgummi, linjal. Ej tillåtna hjälpmedel: Datorer, mobiltelefoner,
F8 Webbteknologier 2. PHP PHP: Hypertext Preprocessor
PHP PHP: Hypertext Preprocessor F8 Webbteknologier 2 EDA095 Roger Henriksson Datavetenskap Lunds universitet Skriptspråk särskilt lämpligt för webbapplikationer. Öppen, gratis, programvara. HTML-kod med
Att styla webbsidor. Nivå. Uppgiften
Nivå 2 Att styla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
Övning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Webbutveckling med AngularJS
Webbutveckling med AngularJS Kommunikation och Användargränssnitt HT 2016 Per Lind Upplägg Laboration 1 - Skapa en SPA (single-page application) med AngularJS Laboration 2 - Responsiv design, mobile-first
Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012
Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna
On-line produktion TDDC61
On-line produktion TDDC61 Sök till Legionen! Förra gången MuddyCards PHP Lab 4. Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs. Webbsida Webbsida
6 LÄGG TILL INTERAKTIVITET
6 LÄGG TILL INTERAKTIVITET I den här lektionen, lägger du till Webb 2.0-funktionalitet till dina webbsidor genom att göra följande: Använda Dreamweaver-beteenden Tillämpa ett beteende med hjälp av Spry-effekter
HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Vis it. jquery jquery används lite överallt i appen på olika sätt. Det främsta användningsområdet är vid selektering och manipulering av HTML element.
Vis it Introduktion Vi har skapat den webbaserade appen Vis it som bygger på att användare kan ta bilder på och lägga upp sevärdheter via sin mobiltelefon. Dessa sevärdheter är positionsbaserade vilket
E13 "Behind the Wild"
E13 "Behind the Wild" Föreläsning 13, HT2014 Det vi missat och lite till Kurs: 1dv403 Webbteknik I Johan Leitet E13 Behind the Wild Dagens agenda Cookies Web storage Context/ändra context Augmentation
Laboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
CMS. - Content management system
CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell
Nätet. Uppgiften. Nivå
Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har
Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20
Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering
Webbplats analys ipchecker.us
Webbplats analys ipchecker.us Genereras på Juni 22 2016 19:19 PM Ställningen är 39/100 SEO Innehåll Titel IPChecker.us - Display Your IP - Whois IP - IP Lookup - What Is My IP? Längd : 70 Perfekt, din
A" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad
A" utveckla kartor med responsiv design Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap)
F8 Webbteknologier 2. EDA095 Nätverksprogrammering. Roger Henriksson Datavetenskap Lunds universitet
F8 Webbteknologier 2 EDA095 Nätverksprogrammering Roger Henriksson Datavetenskap Lunds universitet PHP PHP: Hypertext Preprocessor Skriptspråk särskilt lämpligt för webbapplikationer. Öppen, gratis, programvara.
! HTML Formulär! JavaScript! Syntax! Events! DOM. ! URL variabler i en query string (get) ! HTTP post request (post)
OVERVIEW JAVASCRIPT Beteende! HTML Formulär! JavaScript! Syntax! Events! DOM! Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN HTML FORMULÄR! Skriptspråk som körs på klientsidan (klientskript)! Koden
Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 3 Peter Dalenius Institutionen för datavetenskap 2015-01-29 Vad handlar det andra seminaret om? Strukturerad text Uppgifter Hämta information
Styla med CSS3. Översikt. Lektion 1: Styla text med CSS3
Styla med CSS3 Översikt Styla text med CSS3. Styla med Block element. Pseudo-Classes och Pseudo-Elements. Förhöja grafiska effekter med CSS3. Lektion 1: Styla text med CSS3 Fonter och storlek. @font-face.
Cascading Style Sheets (CSS) An Introduction. Nayeb Maleki
Cascading Style Sheets (CSS) An Introduction Nayeb Maleki CSS CSS utvecklades under mitten av 90-talet för att kunna separera stilformatering och formateringsinformation från innehåll i HTML sidor. Fungerar
Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.
Klient/server Översikt Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Lektion 1: Webbtekniker från Microsoft Microsoft webbtekniker. ASP.NET. Klientsidan. Internet Information Server.
IGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)
CSS Presentation IGÅR Internet, www, TCP/IP, IP-adress, DNS, URL client HTTP Request server HTTP Response (HTML & status code) HTML Innehåll och struktur via semantiska märkningar Block, inline element
F r a m e s - r a m a r
skriv ut» F r a m e s - r a m a r Exempel på framesets» Ramkanter (borders)» Färg på ramkanter» Bläddringslister (scrolling)» Marginaler» Länkning i ramar» Uppdatera flera ramar samtidigt» IFRAME - inbäddad
Objektorienterad programmering Föreläsning 5
Objektorienterad programmering Föreläsning 5 Copyright Mahmud Al Hakim mahmud@dynamicos.se www.webbacademy.se Agenda UML Övning Mer om metoder Standardklassen String Konstruktorer Överlagrade metoder Standardklassen
F13 HTML5 Dagens agenda
F13 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats WHAT Working Group? Initiativ, 2004, startat av Apple, Mozilla och Opera WHATWG adapterades 2007 av W3C och rekommendationen
Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03
Laborationsanvisning HTML5 Laboration 6 Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Inledning I denna avslutande laboration ska du testa att märka upp en sida med de nya taggarna i HTML5. Mikroformat
Content Management System. Publiceringssystem
Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor
Introduktion Till WordPress
Introduktion Till WordPress Vad är WordPress? ett blogg- och innehållshanteringssystem skrivet i PHP och som använder databasen MySQL för datalagringen Wordpress har under åren utvecklats från ett bloggsystem
HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
HTML. Introduktion till HyperText Markup Language
HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera
JavaScript En Introduktion
Innehåll JavaScript En Introduktion Introduktion till JavaScript Händelsehantering och CSS Felhantering i JavaScript Validering i JavaScript Introduktion Ingen koppling till Java Statiska och dynamiska