Video-tutorial: Lær JavaScript & jQuery.

Hjerteligt velkommen til den ultimative JavaScript- og jQuery-kursus.

I denne video forklares det, hvad JavaScript er, og hvad det bringer os.

I denne video lærer du, hvilken editor vi vil bruge, og vi installerer den sammen.

I denne video vises det, hvordan man bruger klik med JavaScript, og hvordan variabler fungerer.

If-sætningen. If (oversat: hvis) bliver brugt meget ofte under programmeringen. For eksempel, når man kun vil udføre noget, hvis en bestemt betingelse er opfyldt.

I denne video handler det om arrays (felter) i JavaScript. De giver os mulighed for at gemme flere oplysninger inden for en variabel.

I denne video lærer du at kende for-løkker (loops). Disse gør det muligt for os at køre en bestemt kode flere gange efter hinanden.

Funktionerne er en slags miniprogram, som vi, efter vi har oprettet det, altid kan bruge igen. Når du f.eks. trykker på hjem-knappen på din telefon, bliver en funktion kaldt, som sender dig tilbage til din startskærm. Funktioner gør ens arbejde meget lettere.

Her vises resultatet af udfordringen (nemlig en quiz) og derudover oprettes HTML-grundlaget.

Her bliver CSS'en (udseendet) af quizzen programmeret.

Her programmeres og forklarede JavaScript til vores quiz.

Du har allerede set, hvordan funktioner med en parameter fungerer. Lad os nu se på funktioner med flere parametre. Flere parametre bruges, når man gerne vil bruge en funktion med flere forskellige variabler. I matematikken f.eks. ved addition af flere værdier.

Der er globale og lokale variabler. Kort sagt er globale variabler dem, der oprettes uden for funktioner, og lokale variabler er dem, der oprettes inden for funktioner. Her ser vi nærmere på, hvordan det fungerer.

I programmeringssprog er det muligt at oprette funktioner, så de har en returværdi. Indtil nu har vi kun haft funktioner, der simpelthen har udført noget, men ikke returneret noget, som vi kunne arbejde videre med. Derfor vil vi nu se på RETURN.

I denne artikel behandler vi matematiske operatorer og tildelingsoperatorer. Med matematiske operatorer handler det om ret simple ting som at addere, subtrahere osv., og med tildelingsoperatorer om muligheden for at udføre ret simple operationer såsom f.eks. en forøgelse med 5. Da begge dele er vigtige inden for programmering, behandler vi begge emner her.

Der er tre (eller fire) forskellige typer løkker i programmering: Do-while-, While- og For-løkken. Vi har allerede lært om For-løkken. Nu ser vi nærmere på Do-while- (fodstyret) og While-løkken (hovedstyret).

I denne artikel handler det om et alternativ til If-betingelser. Det handler om Switch (skifter) og Case (tilfælde). Man har altså næsten en kontakt, der skifter mellem de forskellige tilfælde og forbliver ved den, der er aktiv.

Vi har allerede behandlet arrays, men er ikke gået i detaljer med dem. Der er meget mere at vide om arrays. Den vigtigste egenskab ved et JavaScript-array er antallet af elementer (længde). Arrayet har dog også andre egenskaber som f.eks. index, som giver os oplysninger om positionen 0 i arrayet.

Objekter er et ekstremt vigtigt og interessant koncept i mange programmeringssprog. Man kan i princippet beskrive alt som en slags objekt. Lad os tage et objekt, som vi ofte ser på gaden: en BIL. En bil har visse egenskaber/karakteristika og kan udføre visse handlinger.

Lad os se på, hvordan vi kan oprette objekter i JavaScript. For at gøre dette opretter vi en konstruktør funktion og to instanser af vores objekt i vores head-tag. Inde i konstruktør funktionen, som har samme navn som vores objekt, fortæller vi programmet, at parametrene, som bliver givet til konstruktør funktionen ved oprettelsen af en instans af objektet, netop skal være værdierne af objektet.

Som grundlag for funktioner af objekter starter vi med koden fra den seneste vejledning, hvor vi oprettede variabler, der oprettes for hver instans af vores objekt.

I denne vejledning lærer du at kende Math-objektet. Det er et objekt, der er baseret på Math-klassen og kommer med en masse seje egenskaber og funktioner.

I denne video handler det om Date-objektet eller Date-klassen. Dette er objekter, som man kan bruge til at integrere tid i et program. Her er det ikke nødvendigvis tidspunktet eller datoen, der menes, men det kan også være en tidsperiode. Et Date-objekt indeholder tiden, der er gået siden tidspunktet 1970-01-01 00:00:00. Der findes forskellige måder at give parametre til Date-konstruktøren på.

I denne video lærer du, hvordan man bygger et interaktivt ur med JavaScript.

I denne video handler det om arv og om polymorfi. To koncepter inden for objektorienteret programmering.

I denne artikel behandler vi spørgsmålet: Hvad er jQuery? jQuery er et JavaScript-bibliotek, som gør det muligt for os at lave endnu federe hjemmesider.

Her lærer du, hvordan man nemmere behandler klik med jQuery.

I denne vejledning lærer du, hvordan du kan ændre udseendet af en hjemmeside med jQuery. Til dette kan vi meget let f.eks. overskrive attributet af et felt. I dette eksempel kan vi ændre linket til iframen (altså src/source) ved at hovere over firkanten. Man kunne nemt ændre koden og f.eks. forstørre firkanten ved at overskrive Højde- og Breddeattributtet, når man holder over den. Generelt kan man nu bruge denne metode til at ændre udseendet af hjemmesiden uden problemer.

En af de seje funktioner ved jQuery er at lade et element fade ud. I dette eksempel lader vi en knap fade ud, når vi klikker på en anden knap. Vi bruger FadeOut-funktionen ("Fade Out-funktion") til dette. For at vise elementet igen bruger vi FadeIn-funktionen.

I denne video beskæftiger vi os med animation i jQuery. Det handler om noget, der bevæger sig. Så vi sørger for, at et element på vores hjemmeside bevæger sig / ændrer sig. Til dette er der en funktion i jQuery. Den hedder animate() og forventer tre parametre.

Lad os se, hvad jQuery UI er.

Accordionet er et widget, der giver os mulighed for at se kun bestemte dele af helheden, ligesom med et accordeon. Dette er særligt nyttigt, når man ønsker at formidle mange oplysninger, som dog ville være alt for uoverskuelige som en stor tekst.

I denne vejledning handler det om Sortables i jQuery UI. Det handler om sorterings elementer. Det kender du, hvis du bruger produktivitetswebsider som Wunderlist eller Trello. Muligheden for at gøre elementer sorterbar er en ekstremt fed funktion, som du kan bruge i mange forskellige applikationer.

Nogle gange kan det ske, at man gerne vil gøre størrelsen på et element ændringsbart for brugeren. Så er det lige præcis det, Resizables giver dig mulighed for. Disse giver nemlig netop denne mulighed. Man ser nederst til højre på elementet en lille trekant, som man kan klikke på, og derefter, når man holder musen nede, kan forstørre eller formindske det.

I jQuery UI kan man let oprette et element ved hjælp af Draggables, som man nemt kan trække rundt med. Lad os se, hvordan det gøres, her.

Fremdriftslinjer eller fremskridtlinjer er et super redskab til at informere brugeren om, hvor langt han er kommet i en bestemt proces. I en salgsproces i en online butik for eksempel eller i en undersøgelse, hjælper det brugeren med at vide, hvor langt han er nået med at udføre trinene.

I denne vejledning vil jeg kort diskutere effekter i jQuery UI. Der er faktisk ret seje effekter, der gør det muligt at gøre din hjemmeside endnu bedre og også fuldstændig imponere dine brugere.

I denne video ser du resultatet af udfordringen. En FAQ-side.

Her implementerer vi ofte stillede spørgsmål-siden.

I denne video præsenteres hjernespillet, som bliver programmeret i dette kapitel.

Først tager vi os af strukturen og udseendet af spillet.

Nu tager vi os af nogle af spillets funktionaliteter.

Spilleren kan allerede udføre de første handlinger i spillet, men lad os nu sørge for, at spillet kan startes og afsluttes korrekt.

Nu handler det bare om at inkludere timeren i spillet for at beregne scoren korrekt og begrænse spillet tidsmæssigt. Derudover foretager vi også nogle få mindre trin for at færdiggøre spillet.

Her bliver appen for kapitlet præsenteret. Det er en to-do-liste-app/hjemmeside.

Nu opretter vi grundlaget og ser på, hvordan vi kan oprette og redigere det tilsvarende tema med jQuery Mobile.

Fordi vi følger en OOP-tilgang, skal vi oprette den tilsvarende arkitektur. Derfor tager vi os af det her.

I denne video tilføjer vi siderne og tager os af den side, hvor vi opretter opgaverne.

På samme måde som oprettelsessiden skal også redigeringssiden udfyldes og få den tilhørende funktionalitet.

Nu kan vi fokusere på arkitekturen igen og oprette datastrukturen.

Da vi nu har vores datastruktur, kan vi ret nemt kalde den op i vores brugergrænseflade.

Ved programmering har der været behov for nogle trin i "forklare flowet", som vi nu kan rette. Derudover tager vi os af permanent lagring af data og fuldfører appen.