Videointroduktion: Lär dig JavaScript och jQuery

Välkommen till den ultimata JavaScript- och jQuery-kursen.

I den här videon förklaras vad JavaScript är och vad det ger oss.

I den här videon kommer du att lära dig vilken redigerare vi kommer att använda och vi kommer att installera den tillsammans.

I den här videon visas hur man använder klickar med JavaScript och hur variabler fungerar.

If-satsen. If (översatt: om) används mycket ofta när man programmerar. Till exempel, när man vill utföra något endast om en viss villkor är uppfyllt.

I den här videon handlar det om arrayer (fält) i JavaScript. De gör det möjligt för oss att lagra flera informationer inom en variabel.

I den här videon lär du dig om for-loopar. Dessa gör det möjligt för oss att köra en viss kod flera gånger i rad.

Funktioner är en slags miniprogram som vi, när vi har skapat det, kan använda när som helst igen. När du till exempel trycker på startknappen på din mobil kallas en funktion som tar dig tillbaka till din startskärm. Funktioner gör att arbetet blir mycket lättare.

Här visas resultatet av utmaningen (nämligen en quiz) och dessutom skapas HTML-grundstommen.

Här programmeras CSS:en (utseendet) för quizet.

Här programmeras och förklaras JavaScript för vårt quiz.

Du har redan sett hur funktioner med en parameter fungerar. Nu tittar vi på funktioner med flera parametrar. Flera parametrar används när man vill använda en funktion med flera olika variabler. I matematiken, till exempel vid addering av flera värden.

Det finns globala och lokala variabler. Kort sammanfattat: Globala variabler är de variabler som man skapar utanför funktioner, och lokala variabler är de som man skapar inuti funktioner. Här tittar vi närmare på hur det fungerar.

I programmeringsspråk finns möjligheten att skapa funktioner som har en returvärde. Hittills har vi bara haft funktioner som bara har utfört något, men inte har returnerat något som vi kunde fortsätta arbeta med. Därför ska vi nu titta på RETURN.

I den här artikeln behandlar vi matematiska operatorer och tilldelningsoperatorer. När det gäller matematiska operatorer handlar det om ganska enkla saker som addition, subtraktion osv., medan tilldelningsoperatorerna gör det möjligt att ganska enkelt utföra enkla operationer som t.ex. att öka med 5. Eftersom båda är viktiga inom programmering, kommer de två ämnena att behandlas här.

Det finns tre (eller fyra) olika typer av loopar i programmering: Do-while-, While- och For-loopar. Vi har redan lärt oss om For-loopen. Nu ska vi titta på Do-while-loop (fotstyrd) och While-loop (huvudstyrd).

I den här artikeln handlar det om ett alternativ till If-villkor. Det handlar om Switch (omkopplare) och Case (fall). Man har alltså i princip en omkopplare som växlar mellan olika fall och stannar vid det som är aktivt.

Vi har redan behandlat matriser, men gick inte in på detaljer. Det finns mycket mer att veta om matriser. Den viktigaste egenskapen hos en JavaScript-matris är antalet element (length). Matrisen har dock ytterligare egenskaper som t.ex. index, som ger oss information om position 0 i matrisen.

Objekt är ett extremt viktigt och intressant begrepp i många programmeringsspråk. I princip kan man beskriva allt som en sorts objekt. Låt oss ta ett objekt som vi oftast ser på gatorna: en BIL. En bil har vissa egenskaper/karaktärsdrag och kan utföra vissa åtgärder.

Låt oss se hur vi kan skapa objekt i JavaScript. För detta ska vi skapa en konstruktorfunktion och två instanser av vårt objekt i vår head-tag. Inom konstruktorfunktionen, som har samma namn som vårt objekt, talar vi om för programmet att parametrarna som överförs till konstruktorfunktionen när en instans av objektet skapas ska vara värdena för objektet.

Som grund för funktioner i objekt börjar vi med koden från den senaste handledningen, där vi skapade variabler som skapas vid varje instans av vårt objekt.

I den här handledningen lär du dig att känna Math-objektet. Det är ett objekt som baseras på Math-klassen och kommer med massor av coola egenskaper och funktioner.

I den här videon handlar det om Date-objektet eller Date-klassen. Det är objekt som man kan använda för att införliva tiden i ett program. Här handlar det inte nödvändigtvis om tiden eller datumet, utan det kan även handla om en tidsperiod. Ett Date-objekt innehåller tiden som har gått sedan tiden 1970-01-01 00:00:00. Det finns olika sätt att skicka parametrar till Date-konstruktören.

I den här videon lär du dig hur man bygger en interaktiv klocka med JavaScript.

I den här videon handlar det om arv och polymorfism. Två begrepp inom objektorienterad programmering.

I den här artikeln ska vi diskutera frågan: Vad är jQuery? jQuery är en JavaScript-bibliotek som gör det möjligt för oss att skapa ännu coolare webbplatser.

Här lär du dig hur man hanterar klicks ännu lättare med jQuery.

I den här handledningen lär du dig hur du kan ändra utseendet på en webbsida med jQuery. För att göra detta kan vi enkelt t.ex. skriva över en fältattribut. I det här exemplet kan vi ändra länken på iframen (alltså src/source) genom att sväva över rutan. Man kan enkelt ändra koden och t.ex. förstora rutan genom att skriva över Height- och Width-attributen när man svävar över den. I allmänhet kan man nu använda den här metoden för att ändra utseendet på webbsidan utan problem.

En av de coola funktionerna i jQuery är att låta en element försvinna. I det här exemplet låter vi en knapp försvinna så fort vi klickar på en annan knapp. Vi använder FadeOut-funktionen (”Försvinna-funktionen”). För att sedan visa elementet igen använder vi FadeIn-funktionen.

I den här videon fokuserar vi på animation i jQuery. Det handlar om något som rör sig. Så vi ser till att ett element på vår webbplats rör sig/förändras. Det finns en funktion i jQuery för detta. Den heter animate() och förväntar sig tre parametrar.

Låt oss titta på vad jQuery UI är.

Accordion-widgetet gör det möjligt för oss att endast se vissa delar av helheten, på samma sätt som med ett dragspel. Det är särskilt användbart när man vill förmedla många informationer som dock skulle vara alltför oöverskådliga som en stor text.

I den här handledningen handlar det om Sortables i jQuery UI. Det handlar om sorteerbara element. Det känner du igen om du använder produktivitetswebbplatser som Wunderlist eller Trello. Möjligheten att göra element sorterbara är en extremt cool funktion som du kan använda i många olika applikationer.

Ibland vill man att användaren ska kunna ändra storleken på ett element. Då är det Resizables som är helt rätt. De gör det möjligt att göra just det. Man ser en liten triangel längst ned till höger på elementet, som man kan klicka på och sedan, när man håller muspekaren nedtryckt, kan förstora eller förminska det.

I jQuery UI kan man enkelt bygga ett element med hjälp av Draggables som man kan dra fram och tillbaka. Hur man gör detta, tittar vi på här.

Progressbars eller framstegsfält är ett fantastiskt sätt att förmedla till användaren hur långt denne är i en viss process för tillfället. I säljprocessen hos en onlinebutik till exempel, eller vid en undersökning, hjälper det användaren att veta hur långt denne har kommit med att utföra stegen.

I den här handledningen vill jag kort gå in på effekter i jQuery UI. Det finns faktiskt ganska coola effekter som gör det möjligt att få din webbplats att se ännu bättre ut och dessutom att helt knocka dina användare.

I den här videon ser du resultatet av utmaningen. En FAQ-sida.

Här ska vi implementera sidan med vanliga frågor.

I den här videon presenteras hjärn-spelet, som programmeras i detta avsnitt.

Först tar vi hand om spelets struktur och utseende.

Nu ska vi ta hand om några av spelets funktioner.

Spelaren kan redan utföra de första åtgärderna i spelet, men nu ser vi till att spelet kan startas om och avslutas på rätt sätt.

Nu handlar det bara om att inkludera timern i spelet för att räkna ut poängen korrekt och begränsa spelet tidsmässigt. Dessutom kommer vi att göra några ytterligare mindre steg för att färdigställa spelet.

Här presenteras kapitlets app. Det är en att-göra-lista-app/webbplats.

Nu skapar vi grunden och tittar på hur vi kan skapa och redigera det motsvarande temat med jQuery Mobile.

Eftersom vi följer en OOP-ansats måste vi skapa den lämpliga arkitekturen. Det är det vi tar hand om här.

I den här videon lägger vi till sidor och tar hand om sidan där vi skapar uppgifter.

Liksom sidan för skapande av investeringar behöver även sidan för redigering fyllas i och få motsvarande funktionalitet.

Nu kan vi ta hand om arkitekturen och skapa datastrukturen igen.

Nu när vi har vår datastruktur kan vi ganska enkelt hämta den i vårt användargränssnitt.

Vid programmering har några steg varit nödvändiga i "förklaringsflödet" som vi nu kan fixa. Dessutom tar vi hand om permanent lagring av data och slutför appen.