Videoveiledning: Lære JavaScript og jQuery

Hjertelig velkommen til den ultimate JavaScript- og jQuery-kurset.

I denne videoen blir det forklart hva JavaScript er og hva det gir oss.

I denne videoen lærer du hvilken editor vi kommer til å bruke, og vi installerer den sammen.

I denne videoen vises det hvordan man bruker Klikk med JavaScript og hvordan variabler fungerer.

If-setningen. If (oversatt: hvis) blir ofte brukt i programmering. For eksempel når man bare vil utføre noe hvis en bestemt betingelse er oppfylt.

I denne videoen handler det om arrays (tabeller) i JavaScript. De lar oss lagre flere informasjoner innenfor en variabel.

I denne videoen lærer du å kjenne til For-løkker. Disse muliggjør at vi kan utføre en bestemt kode gjentatte ganger etter hverandre.

Funksjoner er en slags miniprogram som vi, etter å ha opprettet det, alltid kan bruke igjen. Hvis du for eksempel trykker på hjemknappen på mobilen din, blir en funksjon kalt, som tar deg tilbake til startskjermen din. Funksjoner gjør arbeidet mye lettere.

Her blir resultatet av utfordringen vist (nemlig en quiz) og i tillegg legges grunnlaget for HTML.

Her blir CSS (utseendet) til quizen programmert.

Her blir JavaScript til quiz-programmet vårt programmert og forklart.

Du har allerede sett hvordan funksjoner med én parameter fungerer. Nå skal vi se på funksjoner med flere parametere. Flere parametere er nyttige når man vil bruke en funksjon med flere ulike variabler, for eksempel i matematikk ved addisjon av flere verdier.

Det er globale og lokale variabler. Kort oppsummert: Globale variabler er de variablene som man oppretter utenfor funksjoner, og lokale variabler er de som man oppretter innenfor funksjoner. Her skal vi se nærmere på hvordan det fungerer.

I programmeringsspråk er det mulig å sette opp funksjoner slik at de har en returverdi. Hittil har vi bare hatt funksjoner som bare har utført noe, men ikke returnert noe som vi kunne jobbe videre med. Derfor ser vi nå på RETURN.

I denne artikkelen vil vi behandle matematiske operatører og tildelingsoperatører. Matematiske operatører inkluderer ganske enkle ting som addisjon, subtraksjon osv., mens tildelingsoperatører handler om muligheten til å utføre ganske enkle operasjoner som for eksempel øke med 5. Siden begge deler er viktige i programmering, vil begge temaene bli behandlet her.

Det er tre (evt. fire) forskjellige typer løkker i programmering: do-while-, while- og for-løkker. Vi har allerede lært om for-løkker. Nå skal vi se på do-while- (fotstyrt) og while-løkker (hodestyrt).

I denne artikkelen handler det om et alternativ til if-betingelser. Dette er Switch (bryter) og Case (tilfelle). Så man har egentlig en bryter som bytter mellom forskjellige tilfeller og forblir på den som er aktiv.

Vi har allerede behandlet matriser, men har ikke gått i detalj. Det er mye mer å vite om matriser. Den viktigste egenskapen til en JavaScript-matrise er antall elementer (length). Matrisen har imidlertid flere egenskaper, for eksempel indeks, som gir oss informasjon om posisjonen 0 i matrisen.

Objekter er et ekstremt viktig og interessant konsept i mange programmeringsspråk. I prinsippet kan man beskrive alt som en form for objekt. La oss ta et eksempel på et objekt som vi vanligvis ser på gatene: en BIL. En bil har visse egenskaper og kan utføre visse handlinger.

La oss se hvordan vi kan opprette objekter i JavaScript. For å gjøre dette oppretter vi en konstruktørfunksjon og to instanser av objektet vårt i HEAD-taggen. Innenfor konstruktørfunksjonen, som har samme navn som objektet vårt, forteller vi programmet at parameterne som blir overført til konstruktørfunksjonen når en instans av objektet blir opprettet, skal være verdiene til objektet.

Som utgangspunkt for funksjoner av objekter starter vi med koden fra forrige opplæring, der vi opprettet variabler som blir generert for hver instans av objektet vårt.

I denne opplæringen lærer du å kjenne Math-objektet. Dette er et objekt som er basert på Math-klassen og kommer med en rekke kule egenskaper og funksjoner.

I denne videoen handler det om Date-objektet eller Date-klassen. Dette er objekter som man kan bruke til å integrere tid i et program. Her er ikke nødvendigvis tiden eller datoen ment, det kan også dreie seg om en tidsperiode. Et Date-objekt inneholder tiden som har gått siden tidspunktet 1970-01-01 00:00:00. Det er ulike måter å gi parametere til Date-konstruktøren på.

I denne videoen lærer du hvordan du lager et interaktivt klokke med JavaScript.

I denne videoen handler det om arv og polymorfisme. To konsepter innen objektorientert programmering.

I denne artikkelen skal vi behandle spørsmålet: Hva er jQuery? jQuery er et JavaScript-bibliotek som lar oss lage enda kulere nettsider.

Her lærer du hvordan du enklere kan håndtere klikk med jQuery.

I denne opplæringen vil du lære hvordan du kan endre utseendet på en nettside ved hjelp av jQuery. For å gjøre dette kan vi enkelt overskrive for eksempel et attributt til et felt. I dette eksemplet kan vi endre lenken til Iframe (altså src/source) ved å sveve over boksen. Man kunne enkelt endre koden og for eksempel forstørre boksen ved å overskrive både høyde- og breddeattributtet når man svever over den. Generelt sett kan man nå bruke denne metoden for å endre nettsidens utseende uten problemer.

En av de kule funksjonene til jQuery er å få et element til å viskes bort. I dette eksempelet får vi en knapp til å viskes bort når vi klikker på en annen knapp. Her bruker vi FadeOut-funksjonen ("Viske bort-funksjonen"). For å vise elementet igjen, bruker vi FadeIn-funksjonen.

I denne videoen ser vi på animasjon i jQuery. Dette handler om noe som beveger seg. Så vi sørger for at et element på nettsiden vår beveger seg/endres. For dette er det en funksjon i jQuery. Denne heter animate() og forventer tre parametere.

La oss se på hva jQuery UI er.

Akkordionet er et widget som gjør det mulig for oss å kun se visse deler av helheten, akkurat som med et trekkspill. Dette er spesielt nyttig når man ønsker å formidle mye informasjon, men denne informasjonen ville være altfor uoversiktlig som én stor tekst.

I denne opplæringen handler det om Sortables i jQuery UI. Dette er sorter- og flyttbare elementer. Du kjenner til dette hvis du bruker produktivitetsnettsteder som Wunderlist eller Trello. Muligheten til å gjøre elementer sorter- og flyttbare er en veldig kul funksjon som du kan bruke i mange forskjellige applikasjoner.

Noen ganger ønsker man å gjøre størrelsen på et element justerbar av brukeren. Da er Resizables akkurat det rette. Disse gjør det nemlig mulig. Du kan se en liten pil nederst til høyre på elementet, som du kan klikke på og deretter, når du holder musepekeren nede, kan forstørre eller forminske det.

I jQuery UI kan man enkelt lage et element som kan dras hit og dit ved hjelp av Draggables. La oss se hvordan det gjøres her.

Fremdriftslinjer eller framdriftslinjer er et flott verktøy for å kommunisere til brukeren hvor langt han er i en bestemt prosess akkurat nå. I salgsprosessen i en nettbutikk for eksempel, eller i en undersøkelse, hjelper det brukeren å vite hvor langt han har kommet med å gjennomføre trinnene.

I denne opplæringen vil jeg kort gå gjennom effekter i jQuery UI. Det finnes faktisk ganske kule effekter som lar deg få nettsiden din til å se enda bedre ut og samtidig blåse brukerne dine fullstendig av banen.

I denne videoen ser du resultatet av utfordringen. En FAQ-side.

Her setter vi opp FAQ-siden.

I denne videoen blir hjernespillet presentert, som blir programmert i dette kapittelet.

Først tar vi oss av strukturen og utseendet på spillet.

Nå tar vi oss av noen av spillfunksjonene.

Spilleren kan allerede utføre de første handlingene i spillet, men nå må vi sørge for at spillet kan startes og avsluttes riktig.

Nå handler det bare om å integrere timen i spillet for å beregne poengsummen riktig og begrense spillet i tid. I tillegg vil vi ta noen flere små skritt for å fullføre spillet.

Her blir appen for kapittelet presentert. Det er en to-do-liste-app/nettside.

Nå legger vi grunnlaget og ser på hvordan vi kan opprette og redigere det tilsvarende temaet med jQuery Mobile.

Fordi vi følger en OOP-tilnærming, må vi opprette den tilsvarende arkitekturen. Vi tar oss av dette her.

I denne videoen legger vi til sidene og tar oss av siden der vi oppretter oppgaver.

På samme måte som opprettelsessiden må også redigeringssiden fylles ut og få tilsvarende funksjonalitet.

Nå kan vi ta oss av arkitekturen igjen og opprette datastrukturen.

Etter at vi har vår datastruktur, kan vi ganske enkelt kalle den opp i grensesnittet vårt.

Ved programmering har det vært nødvendig å gjøre noen trinn i "forklaringstrømmen" som vi nå kan fikse. I tillegg tar vi oss av permanent lagring av data og fullfører appen.