JavaScript: Hvordan komme i gang med å utvikle interaktive nettsteder

Formidling: Din støtte hjelper med å holde nettstedet i gang! Vi tjener et henvisningsgebyr for noen av tjenestene vi anbefaler på denne siden.


JavaScript er et av de mest populære programmeringsspråkene i verden. Sammen med HTML og CSS er JavaScript en av de tre grunnleggende teknologiene som praktisk talt alle nettsteder er avhengige av.

Mens HTML er språket som brukes til å tildele mening til hver bit av innholdet på et nettsted, og CSS er språket som brukes til å formatere styling og layout av HTML-elementer, legger JavaScript til atferd på en webside.

Introduksjon til JavaScript

Hva er JavaScript?

La oss først oppheve forvirring rundt navnet: JavaScript har ingenting å gjøre med Java. Nå som vi vet hva JavaScript ikke er, kan vi snakke om hva JavaScript er.

Hvis alt du vil gjøre med nettstedet ditt er å vise grunnleggende tekst og bilder, så er HTML og CSS nok til å gjøre jobben.

Imidlertid, hvis du vil gjøre mer – for eksempel å endre stiler dynamisk, animere menyer, lage funksjonsknapper, validere data som er lagt inn i et skjema og mye mer – trenger du et annet verktøy.

JavaScript er verktøyet som oftest brukes til å håndtere disse vanlige oppførselene til nettsteder.

Komme i gang med JavaScript

Hvis du er klar til å gjøre hendene skitne og komme til oppgaven med å lære JavaScript, er det to typer ressurser å sjekke ut.

Hvis du foretrekker å lære-ved-å gjøre, kan du vurdere å jobbe deg gjennom et interaktivt kurs eller to der du lærer JavaScript når du blir bedt om å lage enkle skript i et nettleserbasert interaktivt kurs..

Når du er klar til å dykke dypere og bli en ekte JavaScript-utvikler, kan bøker og opplæringer på nettet hjelpe deg med å komme dit.

Hvis du er en nybegynner, gjør du best for å starte med noen av de gratis interaktive kursene. Når du har et grunnleggende grep om hvordan JavaScript fungerer, kan du gå inn på noen av de kjøttligere bøkene og opplæringsprogrammene som hjelper deg med å nivåere deg fra begynnerstatus til en kompetent programmerer.

Gratis interaktive kurs

Codecademy er den fremste leverandøren av gratis programmeringsutdanning. De tilbyr et JavaScript-spor som kan være den mest effektive måten å komme i gang med å lære JavaScript.

Kodeskole er en premium (betalt) utdanningsleverandør.

Imidlertid er deres raske introduksjonskurs for JavaScript gratis, og vil gi deg en 10-minutters oversikt over JavaScript som vil få utdannelsen din i riktig retning. Hvis du er en absolutt nybegynner, vil du dekke mye grunn på bare noen få minutter på dette kurset.

De jQuery Foundation, har i samarbeid med Code School trukket sammen et introduksjonsinteraktivt jQuery-kurs.

Husk at de fleste alle, inkludert oss, anbefaler å lære noe JavaScript før du kaster deg ut i jQuery. Så etter å ha fullført JavaScript-sporet på Codecademy, kan du prøve dette kurset, så får du en følelse av hva som kan gjøres med jQuery.

Online bøker og opplæringsprogrammer

JavaScript for katter er en gratis opplæring du kan lese på nettet, og som er ment å få deg i gang som en begynnende JavaScript-programmerer.

Denne tutorialen er skrevet for katter, men også egnet for deres menneskelige følgesvenner, og vil ikke gjøre deg til en fullverdig utvikler, men den dekker det grunnleggende og vil hjelpe deg å utvikle et solid grunnlag å bygge videre på.

Vellykket JavaScript av Marijn Haverbeke kan leses gratis på nettet, eller du kan få en gammeldags pocketbok.

Eloquent JavaScript er utviklet med støtte fra nett-tungvektere som Mozilla og Hack Reactor, og blir respektert av erfarne programmerere.

De Mozilla Developer Network (MDN) tilbyr omfattende guider for grunnleggende webteknologier, inkludert JavaScript.

Innholdet som leveres av MDN er ekstremt detaljert og anses som tilstrekkelig for å få en disiplinert student hele veien fra nybegynnerstatus til å være en kompetent front-end-utvikler.

De Du vet ikke JS books series, av Kyle Simpson, er en dybde-dykker-serie som har som mål å hjelpe deg med å utvikle mestring av hvert tema dekket.

Dette er ikke en “komme i gang” -serien. Du bør allerede være relativt kompetent før du begynner på det. Hvis du er klar til å gå utover grunnleggende JavaScript-bruk og bli en virkelig kompetent JavaScript-programmerer, med denne bokserien vil du dykke rett i den dype enden.

JavaScript-biblioteker og rammer

JavaScript-biblioteker og rammer

Når du først begynner å lære JavaScript, vil du lære og bruke det i det opprinnelige formatet. Imidlertid vil du raskt oppdage at mange av de tingene som rutinemessig blir oppnådd med JavaScript, krever mye koding.

Det er her JavaScript-biblioteker og rammer kommer inn: de kutter ned mengden kode som kreves for å utføre vanlige oppgaver.

Selv om du absolutt kan bruke JavaScript i det originale formatet, og du bør utvikle en solid forståelse av ren JavaScript før du går videre, kan du få mye mer ut av JavaScript med mye færre tastetrykk hvis du lærer å bruke noen av de mange bibliotekene og rammer.

I følge W3Techs er jQuery, Bootstrap og Modernizr de mest populære JavaScript-bibliotekene og rammene.

jQuery er det mest populære JavaScript-biblioteket med stor margin, og er designet for å hjelpe deg med å skrive mindre kode.

Det er også et av de enkleste JavaScript-bibliotekene å komme i gang med, siden det stort sett bruker samme syntaks som rent JavaScript. I utgangspunktet, hvis du kan utføre en oppgave med JavaScript, kan du utføre den samme oppgaven med mye mindre kode ved å lære jQuery.

Støvelhempe er mye mer enn bare et JavaScript-bibliotek. Det er et komplett rammeverk, eller pakke med verktøy, for å utvikle responsive nettsteder.

Å bygge en webside foran med en Bootstrap vil produsere solid HTML, CSS og JavaScript-kode. Bootstrap gir alt du trenger for å utvikle frontend for alle typer nettsteder.

Modernizr er et lite stykke JavaScript-kode som brukes til å oppdage funksjonene som er tilgjengelige i nettlesernes besøkende nettleser, og for å skreddersy innholdet og stylingen som leveres basert på funksjonene som er oppdaget.

I motsetning til jQuery og Bootstrap, som kan brukes til å oppnå omtrent hva som helst, er Modernizr et nisjeskript som brukes til et veldig spesifikt formål: å skreddersy en besøkende besøkende opplevelse basert på funksjonene som støttes av den besøkende nettleseren.

Noen ekstra JavaScript-rammer som brukes til å utvikle de mest avanserte webapplikasjonene i dag, er Angular.js, Backbone.js, Ember og React.

Hvis du vil ta JavaScript fra enkel front-end-manipulasjon til fullverdig utvikling av tilpasset app, vil litt tid brukt på å undersøke disse rammene hjelpe deg med å identifisere de beste rammene for prosjektet ditt, og åpne øynene for kraften de tilbyr.

Modernizr

Modernizr er et JavaScript-bibliotek som oppdager om nettleseren er kompatibel med HTML5 og CSS3. Dette gjør at den kan gjøre bare tingene som nettleseren kan gjøre. Den legger ikke til funksjonalitet i koden din, men den sørger for at nettleseren bare blir sendt kommandoer som nettleseren kan utføre.

Det er mange tutorials og bøker du kan finne om dette er noe du tror vil bruke.

Tutorials for Modernizr

Det er ikke mange bøker om Modernizr, fordi de er ganske spesialiserte. Og de som er rundt har ikke blitt godt vurdert. Du har det bedre å holde deg med online tutorials:

  • Modernizr: dette er det offisielle nettstedet for Modernizr og inneholder så mange detaljer du måtte trenge.

  • Komme i gang med Modernizr: dette er en kort introduksjon, men det vil få deg til å sette opp. Og hvis dine behov ikke er for store, kan det være alt du trenger.

  • En nybegynner / designerguide for å bruke Modernizr for å løse utfordringer på tvers av nettlesere: en fin, grunnleggende opplæring som skal ha deg i gang på kort tid.

jQuery

Vi har allerede nevnt jQuery. Og når du først behersker JavaScript, vil du sannsynligvis se nærmere på jQuery, noe som virkelig gjør JavaScript-programmering enklere.

Vi har en hel artikkel om det, Lær og Master jQuery, som ikke bare kommer i gang med jQuerry, men inneholder en tutorial om bruk av jQuery for designere.

Backbone.js

Backbone.js er et JavaScript-bibliotek som ble opprettet av Jeremy Ashkenas, som også co-opprettet CoffeeScript, LiveScript og Underscore.js.

Prosjektet er arrangert på GitHub og den løpende utviklingen er ledet av Ashkenas med et fellesskap av open source-bidragsytere.

Backbone.js er ment å brukes til å bygge en-sides JavaScript-webapplikasjoner. Biblioteket bringer struktur til utviklingen av webapplikasjoner ved å oppmuntre til fullstendig skille mellom applikasjonslogikk og presentasjonen av applikasjonsinnholdet.

Backbone.js Grunnleggende

Backbone.js er et JavaScript-bibliotek på klientsiden. Avhengighetene inkluderer Underscore.js og jQuery-bibliotekene, som må lastes av nettleseren før du laster inn Backbone.js.

Biblioteket har et RESTful JSON-grensesnitt, noe som betyr at det kan sende og motta data til og fra en webserver ved hjelp av det lette JSON-dataformatet.

Biblioteket er designet med MVP-programmeringsarkitekturen (Model-View-Presenter), et populært programvaredesignmønster for brukergrensesnitt. I økosystemet Backbone.js brukes imidlertid terminologien “modeller, visninger og samlinger”.

Modeller, visninger og samlinger

Filosofien bak Backbone.js er at applikasjonslogikk og presentasjon av applikasjonsdata skal skilles fra hverandre. Denne separasjonen opprettholdes på den måten at modeller og synspunkter skapes og manipuleres.

I Backbone.js representerer en modell en enkelt datatabell sammen med funksjonene og logikken som er nødvendig for å manipulere dataene.

Dataene blir presentert ved hjelp av en eller flere visninger, som ganske enkelt er deler av et webapplikasjonsgrensesnitt som oversetter dataene i modellen og justerer websiden DOM til å matche.

Visninger lytter også etter brukerinput og sender den inngangen tilbake til den aktuelle modellen for å oppdatere dataene som er i modellen.

Backbone.js inkluderer en innebygd JSON API. Når en modell endres, kan endringen kommuniseres tilbake til en webserverdatabase over JSON API.

Siden praktisk talt alle programmeringsspråk på serversiden kan utstyres for å sende og motta JSON-data, kan praktisk talt alle serversidespråk eller applikasjoner med en JSON API brukes til å kommunisere data til og fra en Backbone.js webapplikasjon og oppdatere applikasjonsdatabasen tilsvarende.

Beslektede modeller kan organiseres og administreres ved å gruppere dem i samlinger, som gir den ekstra fordelen med å tilveiebringe et enkelt lyttepunkt der flere visninger kan brukes til å holde en eller flere visninger kontinuerlig oppdatert.

Hva er Backbone.js bra for?

Selv om Backbone.js ikke er så allestedsnærværende som de mest populære JavaScript-bibliotekene som jQuery og Modernizr, er biblioteket blant de topp femten av alle JavaScript-teknologier på klientsiden..

I tillegg er kanskje ikke Backbone.js-prosjekter like mange, men prosjekter som bruker biblioteket har en tendens til å være webapplikasjoner med høyere trafikk, hvorav noen har en høy grad av navnegjenkjenning..

For eksempel gir Backbone.js nettsted en liste over kjente prosjekter bygget med Backbone.js som inkluderer en veritabel hvem som er hvem av kjente internettoppstarter og etablerte digitale titaner som:

  • Hulu

  • Quartz

  • Vox

  • WordPress.com

  • Disqus

  • Khan Academy

  • Walmart Mobile

  • Basecamp

  • airbnb

  • Pandora

  • Kodeskole

  • Trello

  • Stripe

  • Og mange flere.

Det som skiller Backbone.js fra mange andre populære JavaScript-rammer – bemerkelsesverdig, AngularJS – er den relative friheten det gir utviklere.

Mens andre ledende rammer kan omfatte innebygde standardfunksjoner som er en god hjelp (ta for eksempel toveis datainbinding), gjør Backbone.js ikke det. Dette er den viktigste grunnen til at Backbone.js blir referert til som et bibliotek i stedet for et rammeverk.

I stedet gir det utviklere full frihet til å bygge en webapplikasjon som samsvarer med deres preferanser i stedet for å tvinge utvikleren til å godta en rekke forhåndsinnlagte beslutninger.

På den annen side betyr dette at det må legges mer grunnleggende grunnarbeid når man bygger en nettapplikasjon med Backbone.js enn med et rammeverk som AngularJS som inkluderer et pre-build grunnleggende grunnarbeid..

Læringsmateriell

Hvis du vil lære Backbone.js, er det første du trenger å gjøre å mestre JavaScript og jQuery.

Siden Backbone.js er et JavaScript-bibliotek bygget for å fungere sammen med jQuery, vil mestring av disse to programmeringsspråk før du takler Backbone.js spare deg for mye tid og frustrasjon.

  • En introduksjon til JavaScript

  • Lær og mestre jQuery

  • JavaScript og jQuery for Designers.

I tillegg vil du komme deg opp med Underscore.js, eller det er etterkommere-biblioteket, Lodash.

Backbone.js krever at ett av disse to bibliotekene lastes før du legger inn Backbone.js, så å ha en viss fortrolighet med det ene eller det andre vil komme godt med.

Online tutorials

Hvis du vil komme i gang med Backbone.js så raskt som mulig, er det det beste alternativet å takle noen av de følgende veiledningene.

Vi har sortert dem i rekkefølge av kompleksitet. Så hvis du er en nybegynner, kan du begynne med en av de første ressursene som er oppført som de sistnevnte ressursene antar ganske mye forkunnskaper.

  • Backbone.js Komme i gang

  • Backbone.js for Absolute Beginners av Adrian Mejia

  • Ryggraden, Grunnen

  • Bygge en enkeltside-app med Backbone.js, Underscore.js og jQuery av Henrik Joreteg

  • Opplæring i ryggrad Kontaktleder

  • Eksempel på ryggrad mobilapp.

Backbone.js GitHub-arkivet inneholder også en omfattende liste med ytterligere opplæringsprogrammer, blogginnlegg og eksempler på Backbone.js webapplikasjoner.

bøker

Hvis du virkelig vil mestre Backbone.js, eller hvis du bare vil at utdannelsen skal skrives ut og innbundet, kan du vurdere følgende positivt gjennomgåtte tekster.

  • Mastering Backbone.js (2016) av Abiee Echamea

  • Full Stack JavaScript: Lær Backbone.js, Node.js og MongoDB (2015) av Azat Mardan

  • Backbone.js Patterns and Best Practices (2014) av Swarnendu De

  • Backbone.js Blueprints (2014) av Andrew Burgess.

Endelige tanker om Backbone.js

Backbone.js er et JavaScript-bibliotek designet for utvikling av en-sides webapplikasjoner.

Biblioteket er bemerkelsesverdig på den måten at det gir fullstendig skille mellom applikasjonsdata og visningene som viser disse dataene til applikasjonsbrukere, så vel som den relative friheten – og tilsvarende ansvar – det gir JavaScript-utviklere.

Funksjonell JavaScript

Funksjonell JavaScript

Når programmerere snakker om funksjonell programmering, snakker de generelt om to forskjellige, men beslektede ting:

  • En programmeringsstil som vektlegger forsettlig unngåelse av bivirkninger samt skjulte innganger og utganger.

  • Et sett programmeringsfunksjoner – for eksempel karri, kart og filter – avledet fra lamba-kalkylen.

Disse konseptene er relatert fordi funksjonstypene assosiert med funksjonell programmering muliggjør en større grad av kodetrykk ved å utføre kraftige og komplekse matematiske beregninger.

Hva som gjør funksjonell programmering funksjonell?

Hver funksjon tar inn en eller flere innganger og produserer en eller flere utganger. Ta for eksempel denne enkle funksjonen:

funksjonseksempel (a) {
var resultat = a + 1;
tilbake resultat;
}

Denne enkle funksjonen tar en enkelt inngang, a, legger til en verdi og lagrer deretter resultatet i en variabel som heter resultat. I dette tilfellet er a inngangen og resultatet er utgangen.

Enkelt nok, ikke sant?

Hva med den litt mer komplekse funksjonen? Hva er inngangene og utgangene?

funksjonseksempel (a) {
var resultat = doSomething (a) + 1;
tilbake resultat;
}

Nå, nå er plutselig ting mer sammensatt. Vi har en funksjon, doSomething (), nestet inne i vår funksjon og virker på variabelen vår. Hvis du skulle endre doSomething () ville du også nødvendigvis endre resultatet fra eksempel ().

I dette tilfellet har vi det som kalles et skjult innspill. Uansett hva det er som doSomething () faktisk gjør i et innspill til vårt eksempel () -funksjon, er det ingen måte å fortelle ved å se på funksjonen vår nøyaktig hva den vil gjøre.

I tillegg vil vi si at funksjonen doSomething () har bivirkninger. Hva dette betyr er at når doSomething () endres, påvirker det andre funksjoner. Hele omfanget av funksjonen inngår ikke i funksjonen.

Funksjonell programmering er en programmeringsstil som prøver å eliminere alle bivirkninger så vel som skjulte innganger og utganger ved å skrive funksjoner som eksplisitt deklarerer alle innganger og utganger.

For eksempel kan vi omarbeide funksjonen ovenfor i funksjonell stil ved å holde funksjonene separate og erklære doSomething (a) som et innspill til eksempel (a), som dette:

funksjon doSomething (a) {
var b = a + 1;
retur b;
}
funksjonseksempel (c) {
var resultat = c + 1;
tilbake resultat;
}
var c = eksempel (doSomething (1));

Selv om dette kan se mer komplisert ut ved første øyekast, kan du enkelt se på linjen som erklærer var c og vite at det er to funksjoner som er involvert i å lage utdataene, mens det forrige eksemplet skjulte informasjonen.

Hvis du fremdeles er litt forvirret over nøyaktig hva funksjonell programmering er, hva er funksjonell programmering? av Kris Jenkins er en utmerket teknisk introduksjon til dette emnet som gjelder ethvert programmeringsspråk.

Funksjonell programmering med JavaScript

Er JavaScript et funksjonelt programmeringsspråk? Vel, svaret på det spørsmålet avhenger av hva du mener med funksjonelt programmeringsspråk.

Du kan skrive kode ved å bruke en funksjonell programmeringsstil med JavaScript. Imidlertid inkluderer vanlig vanilje JavaScript ikke den typen kraftige matematiske funksjoner de fleste programmerere leter etter når de snakker om funksjonell programmering.

Løsningen er selvfølgelig å bygge eller inkludere et JavaScript-bibliotek med funksjonelle programmeringsfunksjoner. Gjør det, og JavaScript blir et flott språk for å skrive funksjonell kode.

Hvis du først og fremst er opptatt av å lære den funksjonelle programmeringsstilen og mindre opptatt av komplekse matematiske funksjoner, vil følgende ressurser hjelpe deg med å forstå den funksjonelle programmeringsstilen og hvordan den kan brukes på JavaScript:

  • En introduksjon til funksjonell JavaScript av M David Green på SitePoint som kort sammenligner imperativ, objektorientert og funksjonell programmering i JavaScript.

  • En mild introduksjon til funksjonell JavaScript: en firdelt serie fra James Sinclair.

  • Funksjonell programmering: kapittel 6 i Eloquent JavaScript.

Funksjonell JavaScript

Selv om JavaScript kan brukes til å programmere i en funksjonell stil, mangler det, som vi nevnte, et bibliotek med den slags funksjoner mange funksjonelle programmerere leter etter.

I 2007 ga Oliver Steele ut Functional – et JavaScript-bibliotek som introduserer den typen matematiske formler og funksjoner som funksjonelle programmerere ofte bruker..

I stedet for å tvinge programmer til å tvinge dem til å skrive funksjonell kode, er Functional i utgangspunktet et sett med lambda-beregningsformler som er konvertert til JavaScript-funksjoner..

  • Høyt ordrefunksjoner som er inkludert i Funksjonell inkluderer kart, reduser og filtrer.

  • Metoder på funksjonsnivå inkluderer karri, delvis, komponere, beskytte og til.

  • I tillegg inkluderer Functional støtte for lambda-uttrykk.

Functional er vert på GitHub og er helt gratis og åpen kildekode. Imidlertid har den ikke sett noen betydelig oppdatering siden 2007. Med andre ord kan du forvente noen ujevnheter underveis hvis du prøver å benytte deg av det gamle biblioteket.

Hvis du vil lære mer om Functional JavasScript, sjekk ut følgende ressurser:

  • Funksjonelt JavaScript-bibliotek: på GitHub.

  • Funksjonell JavaScript: av Oliver Steele. Se også disse arkivene:

    • Funksjonell JavaScript: kunngjøringen

    • Funksjonell JavaScript 1.02: en oppdatering til biblioteket.

Funksjonell JS

Hvis ideen om å bruke et JavaScript-bibliotek circa 2007 gjør deg litt nervøs – som den skal – hvorfor ikke snurre opp et mer moderne alternativ?

Functional JS av Lee Crossly ble utgitt i slutten av 2013. Det ligner funksjonell av Oliver Steele i og med at det i utgangspunktet er en samling kalkulasjonsfunksjoner snarere enn begrensninger for å håndheve en funksjonell programmeringsstil. Imidlertid inkluderer det et mye bredere spekter av funksjoner, inkludert karri, arity, lambda, kartlegge, redusere, velge, partisjonere, gruppere og mye mer.

Functional JS arrangeres på GitHub, og den offisielle prosjektnettstedet tilbyr utmerket og grundig bibliotekdokumentasjon. Skjønt, bør du bli advart om at dokumentet er skrevet i en stil som antar at den blir lest av erfarne utviklere.

Endelige tanker om funksjonell JavaScript

Funksjonell programmering er en programmeringsstil utviklet til støtte for lambda-kalkulus som oppmuntrer til eksplisitt deklarering av alle innganger og utganger og å unngå bivirkninger. En funksjonell programmeringsstil kan brukes når du koder med JavaScript.

Imidlertid inkluderer standard JavaScript ikke den typen kraftige matematiske funksjoner som mange funksjonelle programmerere leter etter. JavaScript kan forbedres for å passe bedre til en funksjonell programmeringsstil ved å bruke gratis JavaScript-biblioteker som Functional av Oliver Steele og Functional JS av Lee Crossley.

JavaScript-stil

JavaScript-stil

JavaScript er et veldig tilgivende programmeringsspråk. Som et resultat vil den samme biten som er skrevet av to forskjellige JavaScript-programmerere ofte se ganske annerledes ut.

I samsvar med et sett med stilistiske retningslinjer sikrer du at all kode ser ut som om den er skrevet av en enkelt programmerer selv når flere programmerere er involvert. Det gjør også koden lettere å lese og forstå.

I denne guiden vil vi gi et sett med JavaScript-koding retningslinjer som du kan bruke for å skrive renere, elegant kode, og sikre at en konsekvent programmeringsstil brukes..

Et ledende prinsipp

Når du programmerer på et hvilket som helst språk, inkludert JavaScript, understreker du klarhet over kløkt.

Dette betyr at målet med programmereren skal være å skrive kode på en måte som er så lesbar som mulig i stedet for å bruke færrest antall tastetrykk.

Hvis det er to måter å gjøre en ting – og i JavaScript er det ofte et halvt dusin eller flere måter å gjøre en ting – bruk metoden som gir mest klarhet i stedet for metoden som er den mest smarte.

For eksempel:

// Smart, men potensielt forvirrende
; [‘foo’, ‘bar’, ‘baz’, ‘qux’] .forEach (funksjon () {
// Funksjonskode
});

// Noe ordrett, men tydelig
var foobars = [‘foo’, ‘bar’, ‘baz’, ‘qux’];
funksjon noe Smart () {
// Funksjonskode
};
foobars.forEach (noe Clever);

kommentarer

Siden vi bruker kommentarer i hele denne guiden, la oss adressere kommentarstyling først.

Programmerere bør feile på siden av å gi for mange kommentarer i stedet for for få. Kommentarer er en uvurderlig måte å hjelpe andre utviklere til å forstå hva som skjer, og også hjelpe den opprinnelige utvikleren til å huske formålet med hver bitkode.

Det er tre typer kommentarer som kan brukes i JavaScript:

  • Kommentarer på en linje.

  • Kommentarer med flere linjer.

  • Inline kommentarer.

Slik anbefaler vi å formatere hver type kommentar:

/ **
Dette er en kommentar på flere linjer. Denne typen kommentarer
skal være forbeholdt filoverskrifter og for å beskrive
formålet med komplekse funksjoner.
* /

// Dette er en enkeltlinjekommentar. Bruk den til å gi korte notater.

// Forsøk å unngå inline-kommentarer som vist nedenfor.
var foobars = [‘foo’, ‘qux’ / * også quux og quuux * /];

Enkelt- og flerlinjekommentarer bør alltid gå foran med en blank linje. I tillegg skal enkeltlinjekommentarer vises over koden de beskriver, ikke ved siden av eller under den.

Kommentarer med flere linjer kan formateres på mange forskjellige måter.

/ ************************************************* **********
* *
* Noen utviklere liker å lage store blokker *
* der du kan hekke flere linjekommentarer. Det absolutt *
* er ikke vår preferanse, men nøkkelen her er konsistens. *
* Hvis du skal bruke dette formatet, bare sørg for å *
* bruk den konsekvent. *
* *
************************************************** ********* /

/ **
* Vår preferanse er for enkelhet. Kommentarer med flere linjer
* skrevet ut krever bare mindre krefter og er like
* Lett å lese – og presentere mindre av en anelse hvis du
* spør oss. Vi anbefaler bruk av en enkelt skråstrek
* og to stjerner for å åpne en kommentar på flere linjer. Deretter,
* hver linje begynner med to plassinnrykk, en
* stjerne, og et mellomrom. Kommentaren er avsluttet med en
* to plassinnrykk, en stjerne, og avslutningen
* fremover skråstrek.
* /

/ ************************************************* **********

Men denne kommentarstilen er uten tvil like lesbar som
de andre stilene. Og det har fordelen av å være det
enkelt å vedlikeholde, uavhengig av redaktør som
programmerer bruker.

************************************************** ********* /

Hvitvidde, linjeskift, kolonner og innrykk

Riktig bruk av plass er den viktigste viktige avgjøreren for kodelesbarhet. Kode som er konsekvent fordelt og innrykket er langt lettere å lese enn alternativet.

innrykk

La oss starte med innrykk. Mens innrykkspraksis varierer, er den dominerende innrykksmetoden – og metoden vi anbefaler – innrykk ved bruk av to mellomrom.

Innrykk kan konfigureres i praktisk talt alle integrerte utviklingsmiljøer (IDE) eller tekstredigeringsprogrammer, så sett bare innrykk til to mellomrom og du bør være god til å gå.

kolonner

Når vi snakker om kolonner i programmering, er det vi viser til antall tegn som skal vises på rad før du legger til en linjeskift. Av hensyn til lesbarheten er det viktig å legge til linjeskift. Generelt er konsensus at 80 tegn, eller kolonner, er et godt gjennombruddspunkt. Andre perfekt mindre lengder, som 65.

Et ytterligere problem som vil kreve illustrasjon er bruken av innrykk etter en linjeskift. Når det skjer, er det beste å gjøre innrykk i det innpakkede innholdet 4 mellomrom i stedet for 2 som vist i eksemplet nedenfor:

var foo = ‘Denne variabelen inneholder en veldig lang’ +
‘streng som vil bryte ut over flere’ +
‘linjer. For klarhetens skyld er ‘ +
“innhold som vises på nye linjer skal være” +
‘innrykk fire mellomrom.’,
bar = ‘Innrykk på denne måten gjør det lettere’ +
å visuelt skille mellom linjen +
“pauser på grunn av kolonneomslag og linjeskift” +
‘på slutten av en uttalelse.’;

(Merk at vi bruker kortere linjelengder for å få dem til å se bra ut på denne nettsiden.)

mellomrom

Et par ekstra regler for god praksis for bruk av mellomrom inkluderer:

  • Unngå mellomrom og tom linje. Det vil si unngå å legge igjen et tomt område på slutten av en kodelinje eller på en tom linje. Når du slår på “vis usynlige” eller “tegn hvitt rom” i de fleste tekstredigerere og IDE-er vil disse tegnene vises slik at du kan oppdage og eliminere dem.

  • Legg til et mellomrom etter komma i lister, som dette: var foo = [‘bar’, ‘baz’, ‘qux’];.

  • Legg til mellomrom mellom parenteser og innholdet, som dette: funksjon (foo)….

  • Legg til mellomrom mellom operatører og innhold når du kobler sammen en streng, som denne: ‘Hei’ + ‘verden!’.

  • Det er greit å legge til en enkel blank linje for å skille og gruppere relaterte kodebiter. Det anbefales ikke å legge til flere linjer.

Naming

Når du navngir funksjoner, variabler og andre elementer i JavaScript, er her noen regler du må overholde:

  • Bruk menneskelige lesbare navn som er intuitivt meningsfulle når det er mulig.

  • Bruk flertallnavn for matriser og entallnavn for andre typer variabler.

  • Bruk camelCase til å navngi funksjoner og variabler, som dette: var longName = ”;.

  • Bruk PascalCase når du navngir konstruktører (objektklasser), som dette: funksjon HostingCompany (navn, url, vurdering) {….

  • Hvis du oppretter symbolkonstanter, kan du navngi dem ved å bruke alle capser og understrekinger, slik: var MAX_RATING = 100;.

  • Når du oppretter vanlige uttrykk, prefikserer du navnet med en liten bokstav r, som dette for å validere e-postadresser: var rEmail = /??A-Z0-9._%+-???? . + [a] {2,63};.

semikolon

Så godt som alle moderne JavaScript-implementeringer inkluderer en funksjon som kalles automatisk semikoloninnsetting (ASI). Denne funksjonen intuitene der semikolon skal vises og legger dem til automatisk.

Som et resultat oppfordrer noen programmerere andre til å aldri bruke semikolon med unntak av noen få kortsaker. Andre programmerere oppfordrer deg til å legge dem til som om ASI ikke eksisterte.

Vi er solid i sistnevnte leir. Vi har bare sett for mange sammenlagte JavaScript-filer til å synes det er greit å utelate dem.

Spørsmålet blir da, når skal semikoloner legges til? Generelt bør semikoloner legges til etter hver erklæring eller oppgave. For eksempel:

var foo = ”;
foo = 1;
foo ++;
foo = funksjon () {
// Semikolon nødvendig fordi denne funksjonen blir tilordnet en variabel.
};
våken (foo);
console.log (foo);

Semikolon er ikke nødvendig etter den avsluttende krøllete selen til en setning eller funksjon – med mindre funksjonen er tilordnet som verdien til en variabel som vist i den siste biten av koden.

Men hvis du legger til semikoloner etter funksjoner og utsagn, kommer du ikke til å ødelegge noe ved å gjøre det.

I tillegg bør semikoloner aldri legges mellom den avsluttende parantesen og åpningen av krøllete stag i en setning eller funksjon som denne: funksjon (parameter); {… eller hvis (betingelse); {….

Quotes

I JavaScript kan enten enkeltnoteringer eller doble anførselstegn brukes. Imidlertid er konsensus blant de fleste publiserte stilguidene for bruk av enkeltsitater – en konsensus vi er glade for å gå sammen med.

Når du trenger å bruke mer enn ett sett med sitater, for eksempel når du hekker HTML inne i JavaScript, kan du veksle mellom enkelt og dobbelt anførselstegn.

// Gjør dette
var foo = ‘bar’;

// Ikke dette
var foo = "Bar";

// Dette er greit
var foo = ‘Noe innhold her.’;

// Men dette er enklere og mer leselig
var foo = ‘Noe innhold her.’;

variabler

JavaScript er veldig tilgivende når det gjelder å tillate variabler å bli erklært i et bredt utvalg av formater. Vi anbefaler å bruke et format som er så lesbart og oversiktlig som mulig.

// Dette er dårlig fordi det er vanskelig å lese. Ikke gjør dette.
var foo = "", bar = [], baz = {}, qux = funksjon () {
/ * Sett inn uttalelser her. * /};

// Dette er ille fordi det er inkonsekvent.
var foo = ”,
stolpe = [];
var baz = {};
qux = funksjon () {/ * Sett inn uttalelser her. * /};

// Dette er bra fordi det er konsistent og leselig.
var foo = ”,
stolpe = [],
baz = {},
qux = funksjon () {
// Sett inn uttalelser her.
};

// Dette er best.
var foo = ”;
var bar = [];
var baz = {};
var qux = funksjon () {
// Sett inn uttalelser her.
};

Det er mange ganger når du vil erklære en variabel på innsiden av en funksjon eller innsiden av en hvis… annet utsagn. Når det skjer, grupperer du alle variablene dine og erklærer dem først.

Arrays og objekter

Å lage komplekse matriser og gjenstander har potensial til å produsere svært uleselig kode. Av denne grunn er riktig innrykk og bruk av linjeskift kritisk. La oss se på noen eksempler på god og dårlig kodingspraksis med hensyn til å lage matriser og gjenstander.

// Det er greit å erklære korte, enkle matriser på en enkelt linje.
var foobars = [‘foo’, ‘bar’, ‘baz’, ‘qux’];

// Lange matriser skal deklareres med linjeskift.
var emailAddresses = [
‘[Email protected]">Kontakt oss’,
‘[Email protected]">webmaster’,
‘[Email protected]">salg,
‘[Email protected]">Brukerstøtte’
];

// Objekter skal alltid deklareres med linjeskift.
var plassholdere = {
1: ‘foo’,
2: ‘bar’,
3: ‘baz’,
4: ‘qux’
};

Uttalelser og funksjoner

Korrekt formatering av utsagn og funksjoner gjør dem enklere å forstå og kan også bidra til å unngå problemer når kode kobles sammen eller gjengis av en nettleser. Slik skal funksjoner og utsagn generelt formateres:

function functionName () {
// Sett inn kode her.
}

Det grunnleggende formatet bør følges for funksjoner, hvis uttalelser, for utsagn, mens uttalelser, og så videre. Reglene som dikterer den stilen inkluderer:

  • Plasser alltid åpningsbraketten på samme linje som funksjons- eller setningsparametere som denne: (parametere) {…. Å legge til et linjeskift mellom lukkearketesen og åpningsbraketten kan føre til at automatisk semikoloninnsetting (ASI) knuses kode ved å legge til semikolon feil.

  • Bryt alltid utsagn og funksjoner på flere linjer med all funksjon eller setningskode som vises på linjene mellom åpnings- og lukkebrakettene.

Hekkefunksjoner

Hekkefunksjoner inne i funksjoner som vist i neste eksempel er helt akseptabelt:

funksjon fooBar (foo) {
var bar = funksjon () {
// Funksjonskode her.
}
function nestedFunction () {
// Mer funksjonskode her.
}
return nestedFunction (bar);
}

Hekkefunksjonene inni utsagnene skal imidlertid bare gjøres når funksjonen er tilordnet en variabel. Dette er fordi ECMAScript-standarden ikke støtter nestede funksjoner i uttalelser.

Selv om de fleste JavaScript-implementeringer vil håndtere denne urettmessige bruken helt fint, vil implementeringer som følger ECMAScript strengere ikke behandle koden riktig.

Følgende eksempel illustrerer forskjellen:

if (foo > bar) {

// Ikke gjør dette
funksjon fooBar (foo, bar) {
foobar = foo + bar;
retur foobar;
}
fooBar (foo, bar);

// Gjør dette i stedet
var foobar = funksjon fooBar (foo, bar) {
return foo + bar;
}
}

Når du skriver om uttalelser om… ellers, gjør det klart at hele utsagnet er koblet ved å unngå å legge til linjeskift før hver del av utsagnet.

// Bruk følgende format.
hvis (betingelse) {
// Sett inn uttalelser her.
} annet hvis (betingelse) {
// Ytterligere uttalelser her.
} annet {
// Enda flere uttalelser her.
}

// Ikke gjør dette. Det er forvirrende.
hvis (betingelse) {
// Sett inn uttalelser her.
}
annet hvis (betingelse) {
// Ytterligere uttalelser her.
}
ellers {
// Enda flere uttalelser her.
}

Sammenligning

Når du sammenligner to verdier i JavaScript har du to alternativer. Du kan sjekke for enten streng likhet ved å bruke === og! == eller du kan sjekke for abstrakt likhet ved å bruke == og! =.

Forskjellen mellom de to alternativene er at når du kontrollerer for abstrakt likhet, vil JavaScript-maskinen prøve å konvertere verditypene før de returnerer usant.

Imidlertid, når du kontrollerer for streng likhet, vil maskinen bare gå tilbake hvis både typen og verdien stemmer overens. Her er noen eksempler på hvordan dette kan spille ut i praksis:

// Et tall
var foo = 0;

// En streng
var bar = ‘0’;

// Evaluerer til ‘sant’
foo == bar;
foo == falsk;
stolpe == falsk;
foo! == bar;

// Evaluerer til ‘usant’
foo! = bar;
foo === bar;
foo === falsk;
foo === falsk;

Bruken av abstrakte sammenligninger kan føre til forvirring rundt variabeltyper. Som et resultat anbefaler vi å holde oss til strenge sammenligninger for å unngå følgende slags problemer:

// En streng
var foo = ‘123’;

// Et tall
var bar = 123;

// Vil komme tilbake
foo == bar;

// Vil returnere usant
foo === bar;

Hvis du bruker abstrakt sammenligning, kan du tro at begge verdiene er lik tallet “123” når foo faktisk er lik strengen “123.”

Som et resultat kan du prøve å utføre matematiske beregninger med strengen i foo. Streng sammenligning av verdiene vil indikere deg i problemet og gi deg beskjed om at du må konvertere foo til et tall før du utfører en beregning.

Lær mer om JavaScript-stil

Hvis du vil lære mer om JavaScript-stil, vil følgende kilder være nyttige:

  • Prinsipper for å skrive konsistent, idiomatisk JavaScript

  • JavaScript standardstil

  • jQuery Foundation JavaScript Style Guide

  • Google JavaScript Style Guide.

Endelige tanker om stil

Hvis du bruker en jevn og gjennomtenkt stil når du skriver JavaScript, kan koden din bli lettere å lese og forstå.

Ved å bruke en jevn stil når du arbeider med prosjekter som involverer flere utviklere, sikrer du at all kode er til stede på en konsistent måte.

I denne guiden har vi presentert en foreslått stil for å skrive JavaScript-kode. Vedta det, modifiser det slik at det passer dine behov, og høst fordelene av renere, tydeligere og mer konsistent kode.

CoffeeScript

CoffeeScript

CoffeeScript (CS) er et kortfattet programmeringsspråk designet av Jeremy Ashkenas som kompilerer til standard JavaScript som kan kjøres i alle JavaScript-omgivelser.

Det er et åpen kildespråk, og den løpende utviklingen er fullført i samarbeid mellom Ashkenas og en hær med nesten 200 bidragsytere.

CS er designet for å la utviklere skrive kode ved å bruke en enkel og kortfattet syntaks. Deretter for å kompilere til JavaScript-kode som drar fordel av programmering av beste fremgangsmåter og som enkelt kan utføres av hvilket som helst JavaScript-runtime-miljø.

History of CoffeeScript

I desember 2009 opprettet Jeremy Ashkenas et nytt GitHub-arkiv med et initialt engasjement merket som “initial commit of the mystery language.”

Denne innledende forpliktelsen ble raskt bygd på, og den første offisielle utgivelsen av språket, CS versjon 0.1.0, kom mindre enn 2 uker senere på julaften i 2009.

CS-kompilatoren ble opprinnelig skrevet i Ruby. Versjon 0.5, som ble utgitt i februar 2010, erstattet imidlertid kompilatoren med en skrevet i CoffeeScript selv. Imidlertid var det fremdeles noen måter å gå før den første stabile versjonen av CS, versjon 1.0.0, som ble utgitt på julaften av 2010, omtrent ett år etter at prosjektet sprang til live.

Den siste versjonen av CoffeeScript er versjon 2.3.1 i mai 2018.

For å følge med på det siste utviklingsarbeidet som blir gjort på CS, se CoffeeScript 6.0 GitHub-arkivet.

Jeremy Ashkenas

Designeren av CS, Jeremy Ashkenas, er en innflytelsesrik og produktiv JavaScript-utvikler. I tillegg til CS, har Jeremy utviklet følgende bemerkelsesverdige prosjekter:

  • LiveScript: et funksjonelt programmeringsspråk med støtte for objektorienterte og tvingende programmeringsstiler som er en indirekte etterkommer fra CoffeeScript. Som CS, samles det til standard JavaScript.

  • Backbone.js: et fleksibelt JavaScript-bibliotek designet med enkeltsidede webapper i tankene som understreker at adskillelsen av programmets logikkode er fra koden som definerer presentasjonen av applikasjonsdata.

  • Underscore.js: et JavaScript-bibliotek med verktøy for å adressere vanlige programmeringsoppgaver.

Jeremy er også en utvikler for The New York Times, så vel som en populær foredragsholder for konferanser, og du vil finne mange videoer av samtalene hans på YouTube, for eksempel:

  • Rise of the Transpilers

  • JS.Neste og CoffeeScript

  • Symbiotiske språk

  • CoffeeScript som en JS / Neste

  • En kopp kaffeScript.

CoffeeScript Syntax

CS-taglinjen er “Unfancy JavaScript”, og den taglinjen fungerer som en effektiv beskrivelse av CS-syntaks.

Et av de primære målene i utformingen av CoffeeScript var å lage et språk som var lett å skrive – modellert etter språk som Ruby, Python og Haskell. Av denne grunn forlater CoffeeScript mange av de syntaktiske reglene som gjelder for JavaScript.

Det mest bemerkelsesverdige er at krøllete seler, semikoloner og bruk av oppgaveord som var og funksjon er utelatt i CS.

Dette gjør CS ekstremt kortfattet, men gjør det på bekostning av lesbarhet. For å forstå hvordan dette fungerer, kan du vurdere følgende JavaScript-funksjon fulgt av CS-ekvivalent.

// Funksjon for å returnere den gjennomsnittlige vertsvurderingen i JavaScript
var hostRating;
hostRating = funksjon (totRatingsVal, totRatingsNo) {
return totRatingsVal / totRatingsNo;
}

// Den samme funksjonen i CoffeeScript
hostRating = (totRatingsVal, totRatingsNo) ->
totRatingsVal / totRatingsNo

Som du ser er CS-versjonen renere, kortere og inneholder færre språkoperatører. Dette gjør CS-versjonen litt raskere å skrive, men den maskerer også hva som skjer bak kulissene til en viss grad.

Literate CoffeeScript

En interessant variant av CS kalles literate CoffeeScript. Kompilatoren vil gjenkjenne denne variasjonen så lenge kildekodefilen slutter med utvidelsen .litcoffee i stedet for .coffee.

Literate CS lar utviklere skrive kode ved bruk av syntaks for markdown. All skriving blir ignorert av kompilatoren som kommentar mens innrykkede kodeblokker gjenkjennes som programkode.

La oss se på et kort eksempel.

## Literate CoffeeScript

[Literate CoffeeScript] (http://coffeescript.org/#literate) tillater bruk av [markdown] (https://daringfireball.net/projects/markdown/syntax#precode) for å skrive CoffeeScript-kode. All tekst – overskrifter, avsnitt, lister og så videre – blir ignorert og behandlet som kommentarer av kompilatoren.

Imidlertid er indrykkede kodeblokker, for eksempel kodeblokken nedenfor, samlet til JavaScript.

fooBar = (foo) -> foo + 1
doSomething = (fooBar) -> varsler fooBar
hvis fooBar? gjør noe

Denne funksjonaliteten skaper noen interessante scenarier der en CoffeeScript-fil kan skrives i markdown og gjengis på en webside som en veiledning, samtidig som den fungerer som en funksjonell del av programkildekoden..

Hvordan få CoffeeScript

CS-kompilatoren er vanligvis installert og kjørt ved hjelp av Node.js, og CS er tilgjengelig som en NPM-pakke. Imidlertid kan prosjektet også lastes ned eller klones fra GitHub.

Hvis du ikke er klar til å installere CoffeeScript helt ennå, kan du også gi den en snurr ved å gå til CoffeeScript.org og velge Try CoffeeScript-fanen.

Denne fanen inneholder et nettleserbasert CoffeeScript-miljø. Bare skriv CoffeeScript til venstre og se hvordan det samles til JavaScript i sanntid til høyre.

CoffeeScript Resources

Hvis du vil lære CS, er det første du må lære JavaScript. Det er best å tenke på CS som et språk designet for å gjøre JavaScript-utviklere mer produktive, gjøre dem i stand til å produsere færre feil og produsere JavaScript som vedtar god praksis.

Siden CS kompilerer til standard JavaScript, krever feilsøking av CS et solid grunnlag i JavaScript-programmering. I tillegg vil CS-læringskurven din bli dramatisk redusert hvis du allerede kjenner JavaScript, siden du vil kunne gjennomgå kompilatorutgangen for å forstå hva CS-koden gjør.

Når det gjelder det, vil følgende ressurser hjelpe kompetente JavaScript-utviklere å komme i gang med CS i kort rekkefølge.

Guider

  • En slurk av CoffeeScript: et kort og gratis introduksjonskurs fra CodeSchool.

  • The Absolute Beginner’s Guide to CoffeeScript: denne opplæringen lever opp til navnet, får programvaren installert og lærer det grunnleggende om språket.

  • CoffeeScript.org: det offisielle CS-nettstedet inneholder en detaljert introduksjon til språket og en nettleserbasert kompilator.

  • Smooth CoffeeScript: en interaktiv, gratis nettleserbasert eBok.

  • Introduksjon til JavaScript-kildekart: feilsøking av CS krever bruk av sourcemaps. Denne opplæringen hjelper deg å begynne å feilsøke CS-koden.

bøker

  • CoffeeScript: Din guide bok om apputvikling med CoffeScript (2016) av Nicholas Brown.

  • CoffeeScript Ristretto (2014) av Reg “raganwald” Braithwaite. Det er tilgjengelig online gratis.

  • CoffeeScript in Action (2014) av Lee og Marino.

  • The Little Book on CoffeeScript (2012) av Alex MacCaw. Det er tilgjengelig online gratis.

Sammendrag

CoffeeScript er et programmeringsspråk med en kortfattet syntaks som minimerer bruken av nøkkelord og operatører og gjør det mulig for utviklere å skrive elegant kode raskt.

I tillegg, etter å ha blitt kompilert til standard JavaScript, kan CS-kode kjøres i alle JavaScript-aktiverte omgivelser.

JavaScript-sammendrag

JavaScript-sammendrag

JavaScript har en dårlig rap. Men dette skyldes det faktum at det er så nyttig og så brukt. Å vite JavaScript er veldig viktig. Selv om du kan gjøre mye mer med andre språk, er JavaScript fortsatt det mest nyttige språket å vite.

Forhåpentligvis med denne introduksjonen, vil du kunne komme raskt i gang – lage interaktive nettsteder.

Videre lesning

Vi har flere guider, veiledninger og infografikk relatert til koding og utvikling:

  • F # -programmering: Finn ut om funksjonell programmering i .NET-rammeverket.

  • Erlang Programming Introduction and Resources: et tidlig funksjonelt språk som brukes til å lage parallell kode.

  • Rask introduksjon og ressurser: dette er et av de nyeste C-lignende språkene. Fremtiden for programmering? Finn ut her!

Hvilken kode skal du lære?

Forvirret om hvilket programmeringsspråk du bør lære å kode på? Ta en titt på infografien vår, hvilken kode du bør lære?

Den diskuterer ikke bare forskjellige sider av språkene, den svarer på viktige spørsmål som “Hvor mye penger vil jeg tjene på å programmere Java for å leve?”

Hvilken kode skal du lære?
Hvilken kode skal du lære?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me