JavaScript Cheat Sheet

JavaScript Cheat Sheet PDFHieronder vind je de Javascript-spiekbrief in .pdf en in de tekst.


JavaScript Cheat Sheet

  • Download link

Basisprincipes van JavaScript

Laten we beginnen met de basis: hoe u JavaScript opneemt in een website.

JavaScript opnemen in een HTML-pagina

Om JavaScript in een pagina op te nemen, moet je het inpakken

Met deze invoer kan de browser de code correct identificeren en uitvoeren.

Bel een extern JavaScript-bestand

U kunt JavaScript ook in een eigen bestand plaatsen en het een naam geven in uw HTML. Op die manier kunt u verschillende soorten code van elkaar scheiden, wat zorgt voor beter georganiseerde bestanden. Als uw code in een bestand staat met de naam myscript.js, je zou het noemen:

Inclusief opmerkingen

Opmerkingen zijn belangrijk omdat ze andere mensen helpen begrijpen wat er in uw code gebeurt of u eraan herinneren als u zelf iets bent vergeten. Houd er rekening mee dat ze correct moeten worden gemarkeerd, zodat de browser ze niet probeert uit te voeren.

In JavaScript heb je twee verschillende opties:

  • Enkele regel opmerkingen - Om een ​​opmerking toe te voegen die beperkt is tot een enkele regel, moet u deze voorafgaan met //
  • Opmerkingen met meerdere regels - Als u langere opmerkingen tussen verschillende regels wilt schrijven, wikkel het er dan in / * en * / om te voorkomen dat het wordt uitgevoerd

Variabelen in JavaScript

Variabelen zijn stand-in waarden die u kunt gebruiken om bewerkingen uit te voeren. Je moet ze kennen uit de wiskundeles.

var, const, laat

Je hebt drie verschillende mogelijkheden om een ​​variabele in JavaScript te declareren, elk met hun eigen specialiteiten:

  • var - De meest voorkomende variabele. Het kan opnieuw worden toegewezen, maar is alleen toegankelijk binnen een functie. Variabelen gedefinieerd met var ga naar boven wanneer de code wordt uitgevoerd.
  • const - Kunnen niet opnieuw worden toegewezen en zijn niet toegankelijk voordat ze in de code verschijnen.
  • laat - Gelijkwaardig aan const, de laat variabele kan opnieuw worden toegewezen, maar kan niet opnieuw worden gedeclareerd.

Gegevenstypen

Variabelen kunnen verschillende soorten waarden en gegevenstypen bevatten. Je gebruikt = om ze toe te wijzen:

  • Nummers - var leeftijd = 23
  • Variabelen - var x
  • Tekst (strings) - var a = "init"
  • Operaties - var b = 1 + 2 + 3
  • Waar of niet waar - var c = waar
  • Constante cijfers - const PI = 3,14
  • Voorwerpen - var name = {firstName: "John", lastName: "Doe"}

Er zijn meer mogelijkheden. Merk op dat variabelen hoofdlettergevoelig zijn. Dat betekent achternaam en achternaam worden behandeld als twee verschillende variabelen.

Voorwerpen

Objecten zijn bepaalde soorten variabelen. Het zijn variabelen die hun eigen waarden en methoden kunnen hebben. Deze laatste zijn acties die u op objecten kunt uitvoeren.

var person = {
firstName: "John",
lastName: "Doe",
leeftijd: 20,
nationaliteit: "Duits"
};

Het volgende niveau: arrays

De volgende in onze JavaScript-spiekbrief zijn arrays. Arrays maken deel uit van veel verschillende programmeertalen. Ze zijn een manier om variabelen en eigenschappen in groepen te ordenen. Zo maakt u er een in JavaScript:

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

Nu heb je een array genaamd fruit die drie items bevat die u kunt gebruiken voor toekomstige bewerkingen.

Array-methoden

Nadat u arrays heeft gemaakt, kunt u er een paar dingen mee doen:

  • concat () - Voeg meerdere arrays samen
  • index van() - Retourneert de eerste positie waarop een bepaald element in een array verschijnt
  • meedoen () - Combineer elementen van een array in een enkele string en retourneer de string
  • lastIndexOf () - Geeft de laatste positie waarop een bepaald element in een array voorkomt
  • knal() - Verwijdert het laatste element van een array
  • Duwen() - Voeg aan het einde een nieuw element toe
  • omgekeerde() - Sorteer elementen in aflopende volgorde
  • verschuiving() - Verwijder het eerste element van een array
  • plak() - Haalt een kopie van een deel van een array naar een nieuwe array
  • soort() - Sorteert elementen alfabetisch
  • splitsing () - Voegt elementen toe op een gespecificeerde manier en positie
  • toString () - Converteert elementen naar strings
  • ongedaan maken () —Voegt een nieuw element toe aan het begin
  • waarde van() - Retourneert de primitieve waarde van het opgegeven object

Exploitanten

Als u variabelen heeft, kunt u deze gebruiken om verschillende soorten bewerkingen uit te voeren. Hiervoor heeft u operators nodig.

Basisoperators

  • + - Toevoeging
  • - - Aftrekken
  • * - Vermenigvuldiging
  • / - Afdeling
  • (...) - Groeperingsoperator, bewerkingen tussen haakjes worden eerder uitgevoerd dan die daarbuiten
  • % - Modulus (rest)
  • ++ - Verhogen nummers
  • -- - Verlaag nummers

Vergelijkingsoperatoren

  • == - Gelijk aan
  • === - Gelijke waarde en gelijk type
  • != - Niet gelijk
  • !== - Niet gelijke waarde of niet gelijk type
  • > - Groter dan
  • < - Minder dan
  • > = - Groter dan of gelijk aan
  • <= - Minder dan of gelijk aan
  • ? - Ternary operator

Logische operators

  • && - Logisch en
  • || - Logisch of
  • ! - Logisch niet

Bitwise Operators

  • & - EN verklaring
  • | - OF-verklaring
  • ~ - NIET
  • ^ - XOR
  • << - Linker shift
  • >> - Juiste shift
  • >>> - Zero fill rechter shift

Functies

JavaScript-functies zijn codeblokken die een bepaalde taak uitvoeren. Een basisfunctie ziet er zo uit:

functienaam (parameter1, parameter2, parameter3) {
// wat de functie doet
}

Zoals je kunt zien, bestaat het uit de functie zoekwoord plus een naam. De parameters van de functie staan ​​tussen haakjes en je hebt accolades rond wat de functie presteert. U kunt er zelf een maken, maar om uw leven gemakkelijker te maken - er zijn ook een aantal standaardfuncties.

Gegevens uitvoeren

Een veel voorkomende toepassing voor functies is de uitvoer van gegevens. Voor de uitvoer heeft u de volgende opties:

  • alert () - Voer gegevens uit in een waarschuwingsvenster in het browservenster
  • bevestigen() - Opent een ja / nee-dialoogvenster en geeft waar / onwaar terug afhankelijk van de klik van de gebruiker
  • console.log () - Schrijft informatie naar de browser console, goed voor debug doeleinden
  • document.write () - Schrijf rechtstreeks naar het HTML-document
  • prompt () - Creëert een dialoog voor gebruikersinvoer

Globale functies

Globale functies zijn functies die zijn ingebouwd in elke browser die JavaScript kan uitvoeren.

  • decodeURI () - Decodeert een Uniform Resource Identifier (URI) gemaakt door encodeURI of vergelijkbaar
  • decodeURIComponent () - Decodeert een URI-component
  • encodeURI () - Codeert een URI in UTF-8
  • encodeURIComponent () - Hetzelfde maar voor URI-componenten
  • eval () - Evalueert JavaScript-code weergegeven als een tekenreeks
  • isFinite () - Bepaalt of een doorgegeven waarde een eindig getal is
  • isNaN () - Bepaalt of een waarde NaN is of niet
  • Aantal() —- Geeft een getal terug dat is geconverteerd uit zijn argument
  • parseFloat () - Parseert een argument en retourneert een drijvende-kommagetal
  • parseInt () - Parseert zijn argument en geeft een geheel getal terug

JavaScript-lussen

Loops maken deel uit van de meeste programmeertalen. Hiermee kunt u het gewenste aantal codeblokken uitvoeren met verschillende waarden:

for (before loop; condition for loop; execute after loop) {
// wat te doen tijdens de lus
}

Je hebt verschillende parameters om lussen te maken:

  • voor - De meest gebruikelijke manier om een ​​lus in JavaScript te maken
  • terwijl - Stelt voorwaarden in waaronder een lus wordt uitgevoerd
  • doen terwijl - Vergelijkbaar met de terwijl lus, maar het wordt minstens één keer uitgevoerd en voert aan het einde een controle uit om te zien of aan de voorwaarde is voldaan om het opnieuw uit te voeren
  • breken - Gebruikt om de cyclus onder bepaalde omstandigheden te stoppen en te verlaten
  • doorgaan met - Sla delen van de cyclus over als aan bepaalde voorwaarden is voldaan

Als - Anders Verklaringen

Dit soort verklaringen is gemakkelijk te begrijpen. Door ze te gebruiken, kunt u voorwaarden stellen voor wanneer uw code wordt uitgevoerd. Als bepaalde voorwaarden van toepassing zijn, wordt er iets gedaan, zo niet, dan wordt er iets anders uitgevoerd.

if (voorwaarde) {
// wat te doen als aan de voorwaarde is voldaan
} anders {
// wat te doen als niet aan de voorwaarde wordt voldaan
}

Een soortgelijk concept als als anders is de schakelaar uitspraak. Met de schakelaar selecteert u echter een van de verschillende codeblokken die u wilt uitvoeren.

Snaren

Tekenreeksen zijn wat JavaScript oproept naar tekst die geen functie heeft, maar wel op het scherm kan verschijnen.

var person = "John Doe";

In dit geval, John Doe is de string.

Escape-personages

In JavaScript worden strings gemarkeerd met enkele of dubbele aanhalingstekens. Als u aanhalingstekens in een tekenreeks wilt gebruiken, moet u speciale tekens gebruiken:

  • ' - Alleenstaande citaat
  • \ " - Dubbele aanhalingstekens

Afgezien daarvan heb je ook extra escapetekens:

  • \\ - Backslash
  • \ b - Backspace
  • \ f - Form feed
  • \ n - Nieuwe lijn
  • \ r - Vervoer terug
  • \ t - Horizontale tabulator
  • \ v - Verticale tabulator

String-methoden

Er zijn veel verschillende manieren om met strings te werken:

  • charAt () - Retourneert een teken op een opgegeven positie binnen een tekenreeks
  • charCodeAt () - Geeft je de Unicode van een personage op die positie
  • concat () - Verbindt (voegt) twee of meer strings samen tot één
  • fromCharCode () - Retourneert een tekenreeks die is gemaakt op basis van de opgegeven reeks UTF-16-code-eenheden
  • index van() - Geeft de positie van het eerste voorkomen van een opgegeven tekst binnen een string
  • lastIndexOf () - Hetzelfde als index van() maar bij de laatste keer achteruit zoeken
  • bij elkaar passen() - Haalt de overeenkomsten van een string op tegen een zoekpatroon
  • vervangen() - Zoek en vervang gespecificeerde tekst in een string
  • zoeken() - Voert een zoekopdracht uit naar een overeenkomende tekst en retourneert zijn positie
  • plak() - Haalt een gedeelte van een string uit en retourneert het als een nieuwe string
  • splitsen () - Splitst een stringobject in een array van strings op een gespecificeerde positie
  • substr () - Gelijkwaardig aan plak() maar extraheert een substring afhankelijk van een bepaald aantal tekens
  • substring () - Ook vergelijkbaar met plak() maar kan geen negatieve indices accepteren
  • toLowerCase () - Converteer strings naar kleine letters
  • toUpperCase () - Converteer strings naar hoofdletters
  • waarde van() - Retourneert de primitieve waarde (die geen eigenschappen of methoden heeft) van een stringobject

Syntaxis van reguliere expressie

Reguliere expressies zijn zoekpatronen die worden gebruikt om tekencombinaties in tekenreeksen te matchen. Het zoekpatroon kan worden gebruikt voor tekstzoekopdrachten en tekst ter vervanging van bewerkingen.

Patroonaanpassers

  • e - Evalueer vervanging
  • ik - Voer niet-hoofdlettergevoelige matching uit
  • g - Voer wereldwijde matching uit
  • m - Voer meerdere regels uit
  • s - Behandel snaren als een enkele regel
  • X - Sta opmerkingen en witruimte toe in het patroon
  • U - Ongulzig patroon

Beugels

  • [abc] - Zoek een van de tekens tussen de haakjes
  • [^ abc] - Zoek een personage dat niet tussen haakjes staat
  • [0-9] - Gebruikt om een ​​cijfer van 0 tot 9 te vinden
  • [A-z] - Zoek een teken van hoofdletter A tot kleine letter z
  • (a | b | c) - Zoek een van de alternatieven gescheiden met |

Metatekens

  • . - Zoek een enkel teken, behalve newline of line terminator
  • \ w - Woordkarakter
  • \ W - Niet-woordteken
  • \ d - Een cijfer
  • \ D - Een niet-cijferig teken
  • \ s - Witruimte karakter
  • \ S - Niet-witruimte-teken
  • \ b - Zoek een match aan het begin / einde van een woord
  • \ B - Een match niet aan het begin / einde van een woord
  • \ 0 - NUL karakter
  • \ n - Een nieuw lijnpersonage
  • \ f - Form feed karakter
  • \ r - Carriage return karakter
  • \ t - Tab-teken
  • \ v - Verticaal tabbladkarakter
  • \ xxx - Het teken met een octaal nummer xxx
  • \ xdd - Teken gespecificeerd door een hexadecimaal getal dd
  • \ uxxxx - Het Unicode-teken met een hexadecimaal getal XXXX

Quantifiers

  • n+ - Komt overeen met elke tekenreeks die ten minste één n bevat
  • n * - Elke tekenreeks die nul of meer exemplaren van n bevat
  • n? - Een tekenreeks die nul of één keer n bevat
  • n {X} - String die een reeks van X n's bevat
  • n {X, Y} - Tekenreeksen die een reeks van X tot Y n's bevatten
  • n {X,} - Komt overeen met elke tekenreeks die een reeks van minimaal X n's bevat
  • n $ - Elke string met n aan het einde ervan
  • ^ n - String met n aan het begin ervan
  • ?= n - Elke tekenreeks die wordt gevolgd door een specifieke tekenreeks n
  • ?!n - String die niet wordt gevolgd door een specifieke string ni

Cijfers en wiskunde

In JavaScript kunt u ook werken met cijfers, constanten en wiskundige functies uitvoeren.

Nummer Eigenschappen

  • MAXIMUM WAARDE - De maximale numerieke waarde die kan worden weergegeven in JavaScript
  • MIN_VALUE - Kleinste positieve numerieke waarde die kan worden weergegeven in JavaScript
  • NaN - De waarde "Geen nummer"
  • NEGATIEF_INFINITEIT - De negatieve Infinity-waarde
  • POSITIVE_INFINITY - Positieve oneindige waarde

Nummer Methoden

  • toExponential () - Retourneert de tekenreeks met een afgerond getal geschreven als exponentiële notatie
  • toFixed () - Retourneert de tekenreeks van een getal met een opgegeven aantal decimalen
  • toPrecision () - String van een nummer geschreven met een opgegeven lengte
  • toString () - Retourneert een getal als een tekenreeks
  • waarde van() - Geeft een getal als getal terug

Wiskundige eigenschappen

  • E - Euler's nummer
  • LN2 - De natuurlijke logaritme van 2
  • LN10 - Natuurlijke logaritme van 10
  • LOG2E - Base 2 logaritme van E
  • LOG10E - Base 10 logaritme van E
  • PI - Het nummer PI
  • WORTEL1_2 - Vierkantswortel van 1/2
  • WORTEL2 - De vierkantswortel van 2

Wiskundige methoden

  • buikspieren (x) - Retourneert de absolute (positieve) waarde van x
  • acos (x) - De arccosine van x, in radialen
  • asin (x) - Arcsine van x, in radialen
  • atan (x) - De arctangens van x als numerieke waarde
  • atan2 (y, x) - Arctangent van het quotiënt van zijn argumenten
  • ceil (x) - Waarde van x afgerond op het dichtstbijzijnde gehele getal
  • cos (x) - De cosinus van x (x is in radialen)
  • exp (x) - Waarde van EX
  • verdieping (x) - De waarde van x naar beneden afgerond op het dichtstbijzijnde gehele getal
  • logboek (x) - De natuurlijke logaritme (grondtal E) van x
  • max (x, y, z, ..., n) - Retourneert het getal met de hoogste waarde
  • min (x, y, z, ..., n) - Hetzelfde geldt voor het nummer met de laagste waarde
  • pow (x, y) - X tot de macht van y
  • willekeurig() - Retourneert een willekeurig getal tussen 0 en 1
  • rond (x) - De waarde van x afgerond op het dichtstbijzijnde gehele getal
  • zonde (x) - De sinus van x (x is in radialen)
  • sqrt (x) - Vierkantswortel van x
  • bruin (x) - De tangens van een hoek

Omgaan met datums in JavaScript

U kunt ook met JavaScript werken en datums en tijd wijzigen. Dit is het volgende hoofdstuk in de JavaScript-spiekbrief.

Datums instellen

  • Datum() - Maakt een nieuw datumobject met de huidige datum en tijd
  • Datum (2017, 5, 21, 3, 23, 10, 0) - Maak een aangepast datumobject. De cijfers vertegenwoordigen een jaar, maand, dag, uur, minuten, seconden, milliseconden. U kunt alles weglaten wat u maar wilt, behalve een jaar en een maand.
  • Datum ("2017-06-23") - Datumverklaring als string

Datum- en tijdwaarden ophalen

  • krijg datum() - Krijg de dag van de maand als een nummer (1-31)
  • getDay () - De weekdag als een cijfer (0-6)
  • getFullYear () - Jaar als een getal van vier cijfers (jjjj)
  • getHours () - Haal het uur (0-23)
  • getMilliseconds () - De milliseconde (0-999)
  • getMinutes () - Krijg de minuut (0-59)
  • getMonth () - Maand als nummer (0-11)
  • getSeconds () - Haal de tweede (0-59)
  • krijg tijd() - Ontvang de milliseconden sinds 1 januari 1970
  • getUTCDate () - De dag (datum) van de maand op de opgegeven datum volgens universele tijd (ook beschikbaar voor dag, maand, volledig jaar, uren, minuten enz.)
  • ontleden - Parseert een tekenreeksrepresentatie van een datum en retourneert het aantal milliseconden sinds 1 januari 1970

Deel van een datum instellen

  • setDate () - Stel de dag in als een nummer (1-31)
  • setFullYear () - Stelt het jaar in (optioneel maand en dag)
  • setHours () - Stel het uur in (0-23)
  • setMilliseconds () - Stel milliseconden in (0-999)
  • setMinutes () - Stelt de minuten in (0-59)
  • setMonth () - Stel de maand in (0-11)
  • setSeconds () - Stelt de seconden in (0-59)
  • tijd instellen() - Stel de tijd in (milliseconden sinds 1 januari 1970)
  • setUTCDate () - Stelt de dag van de maand in voor een gespecificeerde datum volgens universele tijd (ook beschikbaar voor dag, maand, volledig jaar, uren, minuten etc.)

DOM-modus

De DOM is de Document Object Model van een pagina. Het is de code van de structuur van een webpagina. JavaScript wordt geleverd met veel verschillende manieren om HTML-elementen te maken en te manipuleren (knooppunten genoemd).

Eigenschappen van knooppunten

  • attributen - Retourneert een live verzameling van alle attributen die zijn geregistreerd voor een element
  • baseURI - Biedt de absolute basis-URL van een HTML-element
  • childNodes - Geeft een verzameling van de onderliggende knooppunten van een element
  • eerstgeborene - Retourneert het eerste onderliggende knooppunt van een element
  • laatste kind - Het laatste onderliggende knooppunt van een element
  • nextSibling - Geeft u het volgende knooppunt op hetzelfde knooppuntboomniveau
  • knooppuntnaam —Retourneert de naam van een knooppunt
  • nodeType - Retourneert het type van een knooppunt
  • nodeValue - Stelt de waarde van een knooppunt in of retourneert deze
  • ownerDocument - Het documentobject op het hoogste niveau voor dit knooppunt
  • parentNode - Retourneert het bovenliggende knooppunt van een element
  • vorige broer of zus - Retourneert het knooppunt onmiddellijk voorafgaand aan het huidige knooppunt
  • textContent - Stelt de tekstuele inhoud van een knooppunt en zijn nakomelingen in of retourneert deze

Knooppuntmethoden

  • appendChild () - Voegt een nieuw kindknooppunt toe aan een element als het laatste kindknooppunt
  • cloneNode () - Kloneert een HTML-element
  • vergelijkDocumentPosition () - Vergelijkt de documentpositie van twee elementen
  • getFeature () - Retourneert een object dat de API's van een opgegeven functie implementeert
  • hasAttributes () - Geeft true terug als een element attributen heeft, anders false
  • hasChildNodes () - Retourneert true als een element onderliggende knooppunten heeft, anders false
  • insertBefore () - Voegt een nieuw kindknooppunt in vóór een gespecificeerd, bestaand kindknooppunt
  • isDefaultNamespace () - Retourneert true als een opgegeven naamruimteURI de standaard is, anders false
  • isEqualNode () - Controleert of twee elementen gelijk zijn
  • isSameNode () - Controleert of twee elementen hetzelfde knooppunt zijn
  • is ondersteund() - Retourneert true als een opgegeven functie op het element wordt ondersteund
  • lookupNamespaceURI () - Retourneert de naamruimte-URI die aan een bepaald knooppunt is gekoppeld
  • lookupPrefix () - Retourneert een DOMString met het voorvoegsel voor een gegeven naamruimte-URI, indien aanwezig
  • normaliseren () - Voegt aangrenzende tekstknooppunten samen en verwijdert lege tekstknooppunten in een element
  • removeChild () - Verwijdert een kindknooppunt uit een element
  • ReplaceChild () - Vervangt een kindknooppunt in een element

Elementmethoden

  • getAttribute () - Retourneert de opgegeven kenmerkwaarde van een elementknooppunt
  • getAttributeNS () - Retourneert de tekenreekswaarde van het kenmerk met de opgegeven naamruimte en naam
  • getAttributeNode () - Haalt het opgegeven kenmerkknooppunt op
  • getAttributeNodeNS () - Retourneert het kenmerkknooppunt voor het kenmerk met de opgegeven naamruimte en naam
  • getElementsByTagName () - Biedt een verzameling van alle onderliggende elementen met de opgegeven tagnaam
  • getElementsByTagNameNS () - Retourneert een live HTMLCollectie van elementen met een bepaalde tagnaam die tot de gegeven naamruimte behoort
  • hasAttribute () - Geeft true terug als een element attributen heeft, anders false
  • hasAttributeNS () - Geeft een waar / onwaar waarde aan die aangeeft of het huidige element in een gegeven naamruimte het gespecificeerde attribuut heeft
  • removeAttribute () - Verwijdert een gespecificeerd attribuut uit een element
  • removeAttributeNS () - Verwijdert het gespecificeerde attribuut uit een element binnen een bepaalde naamruimte
  • removeAttributeNode () - Haalt een opgegeven kenmerkknooppunt weg en retourneert het verwijderde knooppunt
  • setAttribute () - Stelt het gespecificeerde attribuut in of wijzigt het in een gespecificeerde waarde
  • setAttributeNS () - Voegt een nieuw attribuut toe of verandert de waarde van een attribuut met de gegeven naamruimte en naam
  • setAttributeNode () - Hiermee stelt u het opgegeven kenmerkknooppunt in of wijzigt u het
  • setAttributeNodeNS () - Voegt een nieuw naamruimte attribuutknooppunt toe aan een element

Werken met de gebruikersbrowser

Naast HTML-elementen kan JavaScript ook rekening houden met de gebruikersbrowser en de eigenschappen ervan in de code opnemen.

Venstereigenschappen

  • Gesloten - Controleert of een venster al dan niet gesloten is en geeft waar of onwaar terug
  • defaultStatus - Stelt de standaardtekst in of geeft deze terug in de statusbalk van een venster
  • document - Retourneert het documentobject voor het venster
  • kaders - Retourneert alles