JavaScript Cheat Sheet

JavaScript Cheat Sheet PDFNedan hittar du Javascript-fuskbladet i .pdf och i texten.


JavaScript Cheat Sheet

  • Nedladdningslänk

Grunderna i JavaScript

Låt oss börja med grunderna – hur du inkluderar JavaScript på en webbplats.

Inklusive JavaScript på en HTML-sida

För att inkludera JavaScript på en sida måste du packa in den

Med denna inmatning kan webbläsaren identifiera och köra koden korrekt.

Ring en extern JavaScript-fil

Du kan också placera JavaScript i sin egen fil och namnge det i din HTML. På så sätt kan du hålla olika typer av koder åtskilda från varandra, vilket skapar bättre organiserade filer. Om din kod finns i en fil som heter myscript.js, du skulle kalla det:

Inklusive kommentarer

Kommentarer är viktiga eftersom de hjälper andra att förstå vad som händer i din kod eller påminna om du har glömt något själv. Tänk på att de måste markeras ordentligt så att webbläsaren inte försöker köra dem.

I JavaScript har du två olika alternativ:

  • Enlinjerad kommentarer - Om du vill inkludera en kommentar som är begränsad till en enda rad bör du gå före den med //
  • Kommentarer med flera linjer - Om du vill skriva längre kommentarer mellan flera rader, packa in den / * och * / för att undvika att den körs

Variabler i JavaScript

Variabler är stand-in värden som du kan använda för att utföra operationer. Du bör känna till dem från matematik.

var, const, låta

Du har tre olika möjligheter att deklarera en variabel i JavaScript, alla med sina egna specialiteter:

  • var - Den vanligaste variabeln. Det kan tilldelas om igen men bara åtkomst till en funktion. Variabler definierade med var gå till toppen när koden körs.
  • const - Kan inte tilldelas om och inte vara tillgängligt innan de visas i koden.
  • låta - Liknande const, de låta variabel kan tilldelas men inte deklareras på nytt.

Datatyper

Variabler kan innehålla olika typer av värden och datatyper. Du använder = att tilldela dem:

  • Tal - var ålder = 23
  • Variabler - var x
  • Text (strängar) - var a = "init"
  • Operationer - var b = 1 + 2 + 3
  • Riktiga eller falska uttalanden - var c = sant
  • Konstant antal - const PI = 3,14
  • Objekt - var name = {firstName: "John", lastName: "Doe"}

Det finns fler möjligheter. Observera att variabler är skiftlägeskänsliga. Det betyder efternamn och efternamn kommer att hanteras som två olika variabler.

Objekt

Objekt är vissa typer av variabler. Det är variabler som kan ha sina egna värden och metoder. Det senare är åtgärder som du kan utföra på objekt.

var person = {
Förnamn: "John",
Efternamn: "Doe",
ålder: 20,
nationalitet: "German"
};

Nästa nivå: Arrays

Nästa upp i vårt JavaScript-fuskark är matriser. Matriser är en del av många olika programmeringsspråk. De är ett sätt att organisera variabler och egenskaper i grupper. Så här skapar du en i JavaScript:

var frukt = ["Banana", "Apple", "Pear"];

Nu har du en grupp som heter frukt som innehåller tre objekt som du kan använda för framtida operationer.

Matrismetoder

När du har skapat matriser finns det några saker du kan göra med dem:

  • concat () - Följ flera matriser till ett
  • index för() - Returnerar den första positionen där ett givet element visas i en matris
  • Ansluta sig() - Kombinera element i en matris i en enda sträng och returnera strängen
  • lastIndexOf () - Ger den sista positionen där ett givet element visas i en matris
  • pop() - Tar bort det sista elementet i en matris
  • skjuta på() - Lägg till ett nytt element i slutet
  • omvänd() - Sortera element i fallande ordning
  • flytta() - Ta bort det första elementet i en matris
  • skiva() - Drar en kopia av en del av en matris till en ny matris
  • sortera() - Sorterar element alfabetiskt
  • splitsa() - Lägger till element på ett specifikt sätt och position
  • att stränga() - Konverterar element till strängar
  • unshift () - Lägger till ett nytt element till början
  • värdet av() - Returnerar det primitiva värdet för det angivna objektet

operatörer

Om du har variabler kan du använda dem för att utföra olika typer av operationer. För att göra det behöver du operatörer.

Grundläggande operatörer

  • + - Tillägg
  • - - Subtraktion
  • * - Multiplikation
  • / - Avdelning
  • (...) - Gruppera operatör, operationer inom parentes utförs tidigare än de utanför
  • % - Modul (återstående)
  • ++ - Ökningsnummer
  • -- - Dekrementnummer

Jämförelseoperatörer

  • == - Lika med
  • === - Lika värde och lika typ
  • != - Inte lika med
  • !== - Inte lika värde eller inte lika typ
  • > - Större än
  • < - Mindre än
  • > = - Större än eller lika med
  • <= - Mindre än eller lika med
  • ? - Ternary operatör

Logiska operatörer

  • && - Logiskt och
  • || - Logiskt eller
  • ! - Logiskt inte

Bitvisa operatörer

  • & - OCH uttalande
  • | - ELLER uttalande
  • ~ - INTE
  • ^ - XOR
  • << - Vänster Shift
  • >> - Höger skift
  • >>> - Nollfyll höger skift

funktioner

JavaScript-funktioner är kodblock som utför en viss uppgift. En grundläggande funktion ser ut så här:

funktionsnamn (parameter1, parameter2, parameter3) {
// vad funktionen gör
}

Som ni ser består det av fungera nyckelord plus ett namn. Funktionens parametrar finns i parenteserna och du har lockiga parenteser kring vad funktionen utför. Du kan skapa dina egna, men för att göra ditt liv enklare - det finns också ett antal standardfunktioner.

Skickar ut data

En vanlig applikation för funktioner är utdata av data. För utgången har du följande alternativ:

  • varna() - Utdata data i en varningsruta i webbläsarfönstret
  • bekräfta() - Öppnar en dialogruta med ja / nej och returnerar sann / falsk beroende på användarklick
  • console.log () - Skriver information till webbläsarkonsolen, bra för felsökning
  • document.write () - Skriv direkt till HTML-dokumentet
  • prompt() - Skapar en dialog för användarinmatning

Globala funktioner

Globala funktioner är funktioner inbyggda i varje webbläsare som kan köra JavaScript.

  • decodeURI () - Avkodar a Uniform Resource Identifier (URI) skapad av encodeURI eller liknande
  • decodeURIComponent () - Avkodar en URI-komponent
  • encodeURI () - Koderar en URI till UTF-8
  • encodeURIComponent () - Samma men för URI-komponenter
  • eval () - Utvärderar JavaScript-kod representerad som en sträng
  • isFinite () - Bestämmer om ett godkänt värde är ett ändligt antal
  • isNaN () - Bestämmer om ett värde är NaN eller inte
  • Siffra() —- Returnerar ett nummer konverterat från dess argument
  • parseFloat () - Skriver ett argument och returnerar ett flytpunktsnummer
  • parseInt () - Analyserar argumentet och returnerar ett heltal

JavaScript-loopar

Loops är en del av de flesta programmeringsspråk. De låter dig köra blockblock med önskat antal gånger med olika värden:

för (före slinga; villkor för slinga; kör efter slinga) {
// vad man ska göra under slingan
}

Du har flera parametrar för att skapa loopar:

  • för - Det vanligaste sättet att skapa en loop i JavaScript
  • medan - Ställer in villkor under vilka en slinga körs
  • göra medan - Liknar den medan loop men den körs minst en gång och utför en kontroll i slutet för att se om villkoret är uppfyllt för att köra igen
  • ha sönder —Används för att stoppa och avsluta cykeln under vissa förhållanden
  • Fortsätta - Hoppa över delar av cykeln om vissa villkor är uppfyllda

Om - Annan uttalanden

Dessa typer av uttalanden är lätta att förstå. Med hjälp av dem kan du ställa villkor för när din kod körs. Om vissa villkor gäller görs något, om inte - exekveras något annat.

if (villkor) {
// vad man ska göra om villkoret är uppfyllt
} annat {
// vad man ska göra om villkoret inte uppfylls
}

Ett liknande koncept till om annat är växla påstående. Men med omkopplaren väljer du ett av flera kodblock att köra.

strängar

Strängar är vad JavaScript kallar till text som inte utför en funktion men som kan visas på skärmen.

var person = "John Doe";

I detta fall, John Doe är strängen.

Escape karaktärer

I JavaScript är strängar markerade med enstaka eller dubbla citat. Om du vill använda citattecken i en sträng måste du använda specialtecken:

  • \' - Enstaka offert
  • \" - Dubbla offert

Bortsett från det har du också fler flyktecken:

  • \\ - Backslash
  • \ b - Backspace
  • \ f - Formfoder
  • \ n - Ny linje
  • \ r - Vagnretur
  • \ t - Horisontell tabulator
  • \ v - Vertikal tabulator

Strängmetoder

Det finns många olika sätt att arbeta med strängar:

  • charAt () - Returnerar ett tecken på en specificerad position inuti en sträng
  • charCodeAt () - Ger dig Unicode för ett tecken på den positionen
  • concat () - Sammanfogar (sammanfogar) två eller flera strängar i en
  • fromCharCode () - Returnerar en sträng skapad från den angivna sekvensen för UTF-16-kodenheter
  • index för() - Ger platsen för den första förekomsten av en specificerad text i en sträng
  • lastIndexOf () - Samma som index för() men med den sista händelsen, söka bakåt
  • match() - Hämtar matchningarna i en sträng mot ett sökmönster
  • byta ut() - Hitta och ersätt specificerad text i en sträng
  • Sök() - Utför en sökning efter en matchande text och returnerar sin position
  • skiva() - Extraherar en del av en sträng och returnerar den som en ny sträng
  • dela() - Dela upp ett strängobjekt i en rad strängar på en specificerad position
  • substr () - Liknande skiva() men extraherar en substring beroende på ett specificerat antal tecken
  • träng () - Liknar också skiva() men kan inte acceptera negativa index
  • toLowerCase () - Konvertera strängar till små bokstäver
  • toUpperCase () - Konvertera strängar till versaler
  • värdet av() - Returnerar det primitiva värdet (som inte har några egenskaper eller metoder) för ett strängobjekt

Regular Expression Syntax

Vanliga uttryck är sökmönster som används för att matcha teckenkombinationer i strängar. Sökmönstret kan användas för textsökning och text för att ersätta operationer.

Mönstermodifierare

  • e - Utvärdera ersättningen
  • jag - Utför en okänslig matchning
  • g - Utför global matchning
  • m - Utför flera matchningar
  • s - Behandla strängar som en enda rad
  • x - Tillåt kommentarer och vitrum i mönstret
  • U - Oförskämt mönster

konsoler

  • [Abc] - Hitta någon av karaktärerna mellan parenteserna
  • [^ Abc] - Hitta alla tecken som inte finns i parenteserna
  • [0-9] - Används för att hitta en siffra från 0 till 9
  • [A-z] - Hitta alla tecken från versaler A till gemener
  • (A | b | c) - Hitta något av alternativen separerade med |

metatecken

  • . - Hitta ett enda tecken, förutom ny linje eller linjeavslutare
  • \ w - Ordet karaktär
  • \ W - Icke-ord karaktär
  • \ d - En siffra
  • \ D - Ett icke-siffrigt tecken
  • \ s - Whitespace-karaktär
  • \ S - Karaktär som inte är whitespace
  • \ b - Hitta en match i början / slutet av ett ord
  • \ B - En match inte i början / slutet av ett ord
  • \ 0 - NUL karaktär
  • \ n - En ny radkaraktär
  • \ f - Forma flödeskaraktär
  • \ r - Karaktär för returåterföring
  • \ t - Flikkaraktär
  • \ v - Vertikalt flikkaraktär
  • \ xxx - Tecknet som anges av ett oktaltal xxx
  • \ xdd - Tecken som anges av ett hexadecimalt tal dd
  • \ uxxxx - Unicode-tecknet som anges av ett hexadecimalt nummer XXXX

Kvantifierare

  • n+ - Matchar alla strängar som innehåller minst en n
  • n * - Alla strängar som innehåller noll eller fler förekomster av n
  • n? - En sträng som innehåller noll eller en förekomst av n
  • n {X} - Sträng som innehåller en sekvens av X n's
  • n {X, Y} - Strängar som innehåller en sekvens av X till Y n
  • n {X,} - Matchar alla strängar som innehåller en sekvens på minst X n
  • n $ - Alla strängar med n i slutet av den
  • ^ n - Sträng med n i början av det
  • ?= n - Alla strängar som följs av en specifik sträng n
  • ?!n - Sträng som inte följs av en specifik sträng ni

Siffror och matematik

I JavaScript kan du också arbeta med siffror, konstanter och utföra matematiska funktioner.

Antalegenskaper

  • MAX_VALUE - Det maximala numeriska värdet som kan representeras i JavaScript
  • MIN_VALUE - Minsta positiva numeriska värde som kan representeras i JavaScript
  • NaN - "Not-a-Number" -värdet
  • NEGATIVE_INFINITY - Det negativa oändlighetsvärdet
  • POSITIVE_INFINITY - Positivt oändlighetsvärde

Antalmetoder

  • toExponential () - Returnerar strängen med ett avrundat nummer skrivet som exponentiell notation
  • toFixed () - Returnerar strängen för ett nummer med ett specificerat antal decimaler
  • toPrecision () - Sträng av ett nummer skrivet med en viss längd
  • att stränga() - Returnerar ett nummer som en sträng
  • värdet av() - Returnerar ett nummer som ett nummer

Matematiska egenskaper

  • E - Eulers nummer
  • LN2 - Den naturliga logaritmen av 2
  • LN10 - Naturlig logaritm av 10
  • log2e - Base 2 logaritm av E
  • LOG10E - Base 10 logaritm av E
  • PI - Numret PI
  • SQRT1_2 - Kvadratrot på 1/2
  • SQRT2 - Kvadratroten av 2

Matematikmetoder

  • abs (x) - Returnerar det absoluta (positiva) värdet på x
  • Acos (x) - Arccosine av x, i radianer
  • asin (x) - Arcsine av x, i radianer
  • atan (x) - Arktangenten av x som ett numeriskt värde
  • atan2 (y, x) - Arktangent för kvoten på sina argument
  • ceil (x) - Värdet på x avrundas till dess närmaste heltal
  • cos (x) - Kosinus av x (x är i radianer)
  • exp (x) - Värdet på Ex
  • golv (x) - Värdet på x avrundas till dess närmaste heltal
  • log (x) - Den naturliga logaritmen (bas E) på x
  • max (x, y, z, ..., n) - Returnerar numret med det högsta värdet
  • min (x, y, z, ..., n) - Samma för antalet med det lägsta värdet
  • pow (x, y) - X till kraften hos y
  • slumpmässig() - Returnerar ett slumptal mellan 0 och 1
  • round (x) - Värdet på x avrundat till dess närmaste heltal
  • sin (x) - Sinus till x (x är i radianer)
  • sqrt (x) - Kvadratrot av x
  • tan (x) - Vinkelens tangens

Att hantera datum i JavaScript

Du kan också arbeta med och ändra datum och tid med JavaScript. Detta är nästa kapitel i JavaScript-fusket.

Ställa in datum

  • Datum() - Skapar ett nytt datumobjekt med aktuellt datum och tid
  • Datum (2017, 5, 21, 3, 23, 10, 0) - Skapa ett anpassat datumobjekt. Siffrorna representerar ett år, månad, dag, timme, minuter, sekunder, millisekunder. Du kan utelämna allt du vill utom för ett år och en månad.
  • Datum ( "2017/06/23") - Datumdeklaration som en sträng

Dra datum och tidsvärden

  • getDate () - Få månadens månad som nummer (1-31)
  • getDay () - Veckodagen som ett nummer (0-6)
  • getFullYear () - År som ett fyrsiffrigt nummer (åååå)
  • getHours () - Få timmen (0-23)
  • getMilliseconds () - Millisekundet (0-999)
  • getMinutes () - Få minut (0-59)
  • getMonth () - Månad som nummer (0-11)
  • getSeconds () - Få den andra (0-59)
  • få tid() - Få millisekunderna sedan 1 januari 1970
  • getUTCDate () - Dagens (datum) för månaden på det angivna datumet enligt universell tid (finns också för dag, månad, helår, timmar, minuter etc.)
  • parse - Analyserar en strängrepresentation av ett datum och returnerar antalet millisekunder sedan 1 januari 1970

Ställ in en del av ett datum

  • bestämma datum() - Ställ in dagen som ett nummer (1-31)
  • setFullYear () - Ställer in året (valfritt månad och dag)
  • setHours () - Ställ in timmen (0-23)
  • setMilliseconds () - Ställ in millisekunder (0-999)
  • setMinutes () - Ställer in minuter (0-59)
  • setMonth () - Ställ in månaden (0-11)
  • setSeconds () - Ställer in sekunderna (0-59)
  • Ställ klockan() - Ställ in tiden (millisekunder sedan 1 januari 1970)
  • setUTCDate () - Ställer in månadens dag för ett specificerat datum enligt universell tid (finns också för dag, månad, helår, timmar, minuter etc.)

DOM-läge

DOM är den Dokumentobjektmodell på en sida. Det är koden för strukturen på en webbsida. JavaScript kommer med många olika sätt att skapa och manipulera HTML-element (kallas noder).

Nodegenskaper

  • attribut - Returnerar en live-samling av alla attribut som är registrerade i ett element
  • baseURI - Ger den absoluta bas-URL för ett HTML-element
  • childNodes - Ger en samling av elementets barnnoder
  • förstfödde - Returnerar den första barnnoden för ett element
  • sista barnet - Det sista barnnoden i ett element
  • nextSibling - Ger dig nästa nod på samma nodträdnivå
  • nodename — Återger namnet på en nod
  • nodetype - Returnerar typen av en nod
  • nodevalue - Ställer in eller returnerar värdet på en nod
  • ownerDocument - Det översta dokumentobjektet för denna nod
  • parent - Returnerar överordnad nod för ett element
  • previousSibling - Returnerar noden omedelbart före den aktuella
  • textcontent - Ställer in eller returnerar textinnehållet i en nod och dess efterkommande

Nodmetoder

  • appendChild () - Lägger till en ny barndom till ett element som den sista barnnoden
  • cloneNode () - Klonar ett HTML-element
  • compareDocumentPosition () - Jämför dokumentens position för två element
  • getFeature () - Returnerar ett objekt som implementerar API: erna för en specifik funktion
  • hasAttributes () - Returnerar sant om ett element har några attribut, annars falskt
  • hasChildNodes () - Returnerar sant om ett element har några underordnade noder, annars falskt
  • insert () - Infogar en ny underordnad nod innan en specificerad, befintlig underordnad nod
  • isDefaultNamespace () - Returnerar sant om ett specificerat namnutrymme är standard, annars falskt
  • isEqualNode () - Kontrollerar om två element är lika
  • isSameNode () - Kontrollerar om två element är samma nod
  • isSupported () - Returnerar sant om en specifik funktion stöds av elementet
  • lookupNamespaceURI () - Returnerar namnområdet URI associerat med en given nod
  • lookupPrefix () - Returnerar en DOMString som innehåller prefixet för ett givet namnområde URI om det finns
  • normalisera() - Fogar samman intilliggande textnoder och tar bort tomma textnoder i ett element
  • removeChild () - Tar bort en barnnod från ett element
  • replaceChild () - Ersätter en barnnod i ett element

Elementmetoder

  • getAttribute () - Returnerar det angivna attributvärdet för en elementnod
  • getAttributeNS () - Returnerar strängvärdet för attributet med det angivna namnområdet och namnet
  • getAttributeNode () - Hämtar den angivna attributnoden
  • getAttributeNodeNS () - Returnerar attributnoden för attributet med det givna namnområdet och namnet
  • getElementsByTagName () - Ger en samling av alla underordnade element med det angivna tagnamnet
  • getElementsByTagNameNS () - Returnerar en live HTMLC-samling av element med ett visst tagnamn som tillhör det givna namnområdet
  • hasAttribute () - Returnerar sant om ett element har några attribut, annars falskt
  • hasAttributeNS () - Ger ett sant / falskt värde som indikerar om det aktuella elementet i ett givet namnutrymme har det angivna attributet
  • removeAttribute () - Tar bort ett specificerat attribut från ett element
  • removeAttributeNS () - Tar bort det angivna attributet från ett element inom ett visst namnområde
  • removeAttributeNode () - Tar bort en specificerad attributnod och returnerar den borttagna noden
  • setAttribute () - Ställer in eller ändrar det angivna attributet till ett angivet värde
  • setAttributeNS () - Lägger till ett nytt attribut eller ändrar värdet på ett attribut med det givna namnområdet och namnet
  • setAttributeNode () - Ställer in eller ändrar den angivna attributnoden
  • setAttributeNodeNS () - Lägger till en ny namnpacad attributnod till ett element

Arbeta med användarwebbläsaren

Förutom HTML-element kan JavaScript också ta hänsyn till användarens webbläsare och integrera dess egenskaper i koden.

Fönsteregenskaper

  • stängd - Kontrollerar om ett fönster har stängts eller inte och returnerar sant eller falskt
  • default - Ställer in eller returnerar standardtexten i statusfältet i ett fönster
  • dokumentera - Returnerar dokumentobjektet för fönstret
  • ramar - Returnerar alla