Det bästa sättet att lära sig JavaScript

Lär dig JavaScript: Den fullständiga guiden

Vi har byggt en komplett guide för att hjälpa dig att lära dig JavaScript, oavsett om du precis börjat som webbutvecklare eller vill utforska mer avancerade ämnen.

Eller hoppa direkt och titta på våra JavaScript-kurser:

Att lära sig något nytt är läskigt. För mig är det största problemet med att ta upp en ny skicklighet att jag inte vet vad jag inte vet. Med tanke på det är det ofta användbart att hitta en plan för att lära sig vad du är intresserad av. Det är vad detta inlägg är: din plan, din färdplan, din handlingsplan för att lära dig JavaScript! Du behöver inte oroa dig för att hitta de bästa resurserna, sortera ut de dåliga och räkna ut vad du ska lära dig nästa. Det är allt här. Följ bara det, steg för steg.

Och om du vid något tillfälle känner dig fast kan du få hjälp från en av JavaScript-experterna på Envato Studio.

Uppgift 0: Förstå vad JavaScript är och inte

JavaScript är språket i webbläsaren.

Innan du faktiskt börjar lära JavaScript, ta en minut för att förstå vad det är och gör.

JavaScript är inte jQuery, Flash eller Java. Det är ett programmeringsspråk som är separat från alla dessa.

JavaScript är språket i webbläsaren (inte exklusivt idag). Det primära syftet är att lägga till interaktivitet på en annars statisk sida. I webbläsaren kommer det inte att ersätta PHP eller Ruby för dig. Det kommer inte ens att ersätta din HTML eller CSS; du kommer använda den i samband med dem. Det är också inte så hemskt att lära sig som du kanske har tänkt eller hört.

Ytterligare en anmärkning: du har hört talas om jQuery, vilket är förmodligen det mest använda JavaScript-biblioteket. Eller kanske har du hört talas om ett av de andra populära JavaScript-ramarna, som Mootools, YUI, Dojo och andra. Var passar dessa in i bilden? Tänk på dem en samling JavaScript-hjälpprogram. du skriver fortfarande JavaScript när du använder dem, men det är kraftigt abstraherat JavaScript. Det sparar dig massor av arbete.

Du har kanske hört någon säga att du ska börja med jQuery (eller ett annat bibliotek) och lära dig JavaScript efter. Jag är respektfull men ändå starkt oense. Få ett bra handtag på JavaScript först och använd sedan biblioteken. Du förstår vad du gör mycket bättre; och följaktligen skriver du mycket bättre JavaScript.

Uppgift 1: Arbeta genom kurser på Codecademy.com

Codecademy är en relativt ny webbplats som räknar sig som "det enklaste sättet att lära sig hur man kodar.? Du kommer att döma det! För närvarande finns det bara två kurs:? Komma igång med programmering? och? JavaScript snabbstartsguide.? Detta är ett fantastiskt sätt att doppa tårna i JavaScript-poolen. Mycket lik Test Rubys övningar följer du korta lektioner, skriv kod i webbläsaren och tittar på resultaten. Medan du tjänar poäng och låser upp prestationsmärken.

Om du redan är bekant med ett annat programmeringsspråk kan du förmodligen börja med JavaScript-snabbguiden? Om det här är första gången du tar upp programmering (utöver HTML och CSS), hittar du "Komma igång med programmering? kursen oerhört hjälpsamma. Codecademy är gratis, men anmälan krävs.

Uppgift 2: AppendOm Screencasts

De som lägger till har en fantastisk uppsättning screencasts speciellt anpassade för nybörjare. Om du vill lära dig JavaScript rätt (och enkelt) sätt, definitivt arbeta tillsammans med dessa lektioner. Visuell träning är alltid ett plus!

"Nivå på dina färdigheter med vår efterfrågan, pragmatisk träningslösning. Ingen registrering krävs. Ingen fångst. Ingen skojar."

Uppgift 3: Läs en bra JavaScript-inledning

När du arbetar genom kurserna vid Codecademy vill du få en mer ingående introduktion till JavaScript - en introduktion som introducerar dig till alla typer, operatörer, kontrollstrukturer och mer.

En handfull bra introduktioner, om jag kan:

  • En återinledning till JavaScript - Denna introduktion finns på Mozilla Developers Network, och verkligen gör språkrätten. Det är ett tätt arbete, med nästan lika många kodexempel som stycken.
  • Eloquent JavaScript - Den här boken, av Marijn Haverbeke, finns fritt online, men du kan också hämta den på Amazon om du vill ha en kopia. Det går utöver MDN-introet, eftersom det inte bara omfattar JavaScript, men också kodningstyp och användning av JavaScript i webbläsaren. Också,? Veltalande? är inte en överstatistik.
  • Blir bra med JavaScript - Okej, ja, det här är min egen bok, men det finns en annan anledning till att jag inkluderar den här. Det är verkligen ganska annorlunda än de andra två intros jag har listat här; Jag täcker bara vad du behöver veta för att komma igång så fort som möjligt. Det kommer också med över 6 timmars screencasts, så om du är sak, kolla in den. (Och ja, den här kostar.)

Uppgift 4: Installera och läs Firebug (eller utvecklarverktygen)

När du börjar arbeta med JavaScript i webbläsaren vill du installera Firebug och bli bekant med den. Firebug är ett plugin för Firefox som hjälper dig att bygga och felsöka dina webbsidor: Tänk på det som kirurgens kniv för webbutvecklare. Använd inte Firefox? Gilla Safari eller Chrome bättre? Inga problem: kolla in de inbyggda utvecklingsverktygen, som är mycket lik Firebug.

Du kan öppna utvecklingsverktygspanelen genom att trycka på Alternativ + Kommando + I på Mac, eller Kontroll + Skift + I på datorn.

Du lär dig mycket genom att öppna ditt valfria verktyg och bara klicka runt på en av dina favoritwebbplatser. Här är några resurser som får dig till snabbhet:

  • Pyroman
    • Firebug webbplats och wiki
    • Introduktion till Firebug på CSS-Tricks
    • 10 skäl till att du borde använda Firebug här på nätet+.
  • Utvecklarverktyg
    • Utvecklarverktygswebbplats
    • Google I / O 2011: Chrome Dev Tools Reloaded av Paul Irish
    • Utvecklingsverktyg för Google Chrome: 12 tricks för att utvecklas snabbare av Paul Irish

Uppgift 5: Läs en bok

Så nu är du bekant med grunderna. Det finns dock mycket mer att lära. Medan jag kunde rekommendera en lista med böcker som skulle gå i konkurs, håller jag den till fyra av de bästa böckerna som du hittar någonstans:

Dessa två är allmänna, djupgående JavaScript-resurser som tar vad du vet från introduktionerna till en mycket djupare nivå. Visst, de kommer att vara överlappande från introduktionerna, men inte mycket: bara tillräckligt för att hålla dig bekväm.

(Obs! När alla dessa böcker finns på Amazon har jag länkat till förlagens webbplatser, så du kan kolla in de tillgängliga kapitalkapslarna).

  • Professionell JavaScript för webbutvecklare - Skriven av Nicolas C. Zakas, den här boken kunde knappast täcka mer än vad den gör. Om du har sett något av Zakas arbete tidigare vet du att han är otroligt noggrann. Förutom att täcka JavaScript, kommer den här boken att ge dig ett bra hand om att använda JavaScript i webbläsaren.
  • JavaScript 24-timmars Trainer - Den här fantastiska resursen sammanställdes av Jeremy McPeak, som också skriver för Nettuts +. Det är inte bara en bok: den levereras med över 4 timmars video-tutorials på DVD. Det finns 43 lektioner som täcker allt från syntax till kodningsriktlinjer och kodoptimering.

Medan dessa böcker är bra för att förstå JavaScript-språket och hur man använder det i webbläsaren, finns det mycket mer att lära. Och medan de böckerna går in i några mönster och praktikar, här är två böcker som ägnas åt de ämnen som jag tycker du kommer att hitta användbara.

  • JavaScript-mönster - Skriven av Stoyan Stefanov. Jag har precis slutat läsa den här boken, och pojke, önskar jag att jag hade läst det tidigare. Efter att ha läst resurserna ovan vet du hur du skriver JavaScript, men den här boken lär dig hur du organiserar den, en viktig färdighet som inte är lika vanlig som du skulle tro.
  • JavaScript: De bra delarna - Skriven av Douglas Crockford. Denna lilla pärla kommer att förklara vad som är bra och vad som är dåligt om JavaScript-språket.

Uppgift 6: Bygg någonting!

När du arbetat med resurserna ovan borde du ha följt med kodproverna: dra ihop dem och tweak dem för att se vad som händer. Men nu är det dags att verkligen slå ut på egen hand. Det är dags att faktiskt bygga något.

Så vad kan du bygga? Det finns mycket du kan göra. Här är några idéer.

  • Ett fotogalleri: Visa en uppsättning miniatyrbilder och ett huvudfoto. När en användare klickar på en miniatyrbild, ska den större versionen av miniatyren (inte miniatyren själv) ersätta det aktuella huvudbildet. Bonuspoäng om du kan överlappa en bildtext som kommer från miniatyrbilden alt tagg eller loop genom bilderna om användaren inte har klickat på en i en minut.
  • En att göra-lista: Det här låter tuffare än det är; men jag föreslår inte att du bygger en fullfjädrad applikation. Bara ha en textruta med en knapp bredvid den; När du klickar på knappen blir den inmatade texten en vara i en orörd lista nedan. Genom att klicka på ett listobjekt tas det bort. Det låter enkelt nog, men det finns flera gotchor att det kommer att vara bra för dig att tänka på som nybörjare.
  • En Animerande Box: Animering är alltid knepig, men det behöver inte vara komplicerat. Ha en div med lite text i den och flera knappar ovanför. En knapp kan justera bredden; en, höjden; och en, bakgrundsfärgen. Nyckeln är att inte få förändringarna att hända omedelbart, men under en sekund. Kom ihåg att Google är din vän, speciellt om du inte har gjort någon animering i JavaScript hittills.

Jag är säker på att du kan tänka på andra projekt som kommer att bli bra. Självklart trycker du dig själv ur din komfortzon; det är det enda sättet att lära sig.

Se även till JavaScript-kategorin här på Webuts + för en omfattande lista med handledning, på alla nivåer.

Uppgift 7: Börja lära dig ett JavaScript-bibliotek

Om du har kommit så långt kommer du säkert att inse att det finns flera saker som är svåra att åstadkomma i en webbläsare (eller alls) i JavaScript. De största brottslingarna är förmodligen saker som överdriven DOM-manipulation, AJAX och animering. Här kommer ett bibliotek.

Som jag nämnde tidigare är poängen med ett JavaScript-bibliotek att socker ner de smärtsamma sakerna. Därför nu makt Var dags att titta på en. Det finns massor att välja mellan, och jag låter dig bestämma vilka experter som ska experimenteras med. Oavsett om det är jQuery eller Mootools, YUI eller Dojo, kommer deras respektive webbplatser att ge dig allt du behöver för att komma igång. Om du känner behovet, prova.

Mest populära biblioteken

Medan det verkligen finns ett otaligt antal bibliotek tillgängliga, borde du försöka hålla fast vid ett populärt val - åtminstone först.

  • jQuery
  • dojo
  • YUI
  • MooTools
  • Prototyp

Uppgift 8: Fortsätt med mästarna

Släpp vad du gör, och prenumerera / följ dessa utvecklare. Detta är ett krav.

Det finns massor av otroliga JavaScript genier där ute, som alltid gör coola saker som du inte vill missa. Lyckligtvis har vår sömnförbundsredaktör Siddharth avrundat en lista med? 33 utvecklare du måste prenumerera på som en JavaScript Junkie. Släpp vad du gör, och prenumerera / följ dessa utvecklare. Detta är ett krav.

Men du kan göra mer. Denna rättvisa webbplats skickar ofta om JavaScript, så gå inte bort. Titta även på JavaScript Show, en podcast om det senaste och bästa i JavaScript-världen. Du kanske också vill anmäla dig till javascript-nyhetsbrevet.

Valfritt Extra: Kolla in Premium-objekten

Envato Market har hundratals populära JavaScript-objekt, från reglage till nyheter, och från kalendrar till kundvagnar.

Så ta en titt på vad som finns där ute. Även om du inte köper någonting kan du se vad andra människor har skapat för att inspirera dig med en känsla av vad som är möjligt med JavaScript.

Ett urval av JavaScript-objekt på Envato Market

Slutsats

Tack för att du läser! Förhoppningsvis kan den här planen hjälpa dig att bli en JavaScript-fanatiker. Om du redan är bekant med JavaScript kan du rekommendera andra resurser i kommentarerna?