JS Cheatsheet
- JS (JavaScript) är en skriptspråk som tolkas av webbläsaren
- Skapad 1995 av Brendan Eich (Netscape)
- Kommunicerar med DOM (Document Object Model)
- JavaScript kompileras JIT (Just In Time)
- Olika webbläsare kör JavaScript kod med olika JavasScript Engines
-
- Chrome: V8
-
- Firefox: SpiderMonkey
-
- Edge: Chakra
-
- Safari: JavaScriptCore / Nitro / SquirrelFish
- Kan skrivas JavaScript direkt i HTML fil med script tagg
<script language="javascript"> alert("Hello World!"); </script>
- Kan länkas extern JavaScript kod som skrivs i filer med .js på slutet
<script language="javascript" src="fil.js"> </script>
-
-
// fil.js console.log("Du har kopplat till en JavaScript Fil :)"); // Skriver ut i konsolen (inspect i browser) alert("Meddelande"); // Popup meddelande var svar = prompt("Vad heter du?"); // Skriver in svar som sparas på variabel svar.
-
- Man kan deklarera variabler som håller värde
-
var
Global omfattning, kan tilldelas om, behövs inte sätta en värde från början
-
let
Blockomfattning, kan tilldelas om
-
const
Blockomfattning, kan inte tilldelas om
- Funktioner kan skapas i JavaScript som kör en block av kod när det anropas. Man kan sätta in parameter att användas i funktionen och returnera värde som man vill få från funktionen.
-
-
// Sätter in två parametrar och ger tillbaks summan av båda parametrar function exempel(param1, param2) { let sum = param1 + param2; return sum; }
-
- If satse som returnerar om kondition är truthy / sant och else om det är inte sant
-
-
var a = true; // Vi sätter a som sant if (a) { // a är sant så körs det console.log("true!! 100%"); console.log("true!! 100%"); } else { // Om a är false då kör kod som är i else console.log("false!! Liar!"); }
-
- Switch sats utvärderar om uttrycket är sant
-
-
switch(uttryck) { case x: // kod break; default: // kod }
-
- Loopar och iterationer används att köra kod flera gånger.
-
- For loop upprepas till villkor är falsk.
-
-
for (initialization; condition; afterthought) statement for (let i = 0; i < 10; i++) { // Sätter variabel för att loopa genom, tills man möter villkor, updaterar variabel när loopen är klar // kod som ska upprepas }
-
-
- Do while loop Kör kodet åtminstone en gång och slutar tills villkor är falsk.
-
-
do statement while (condition); do { // Körs åtminstone en gång // kod som körs och eventuellt upprepas } while (villkor); // Om vilkor är sant kör loopen
-
-
- While statement Loopar så länge vilkor är sant.
-
-
while (condition) statement while(villkor) { // Om vilkor är sant kör loopen // Kod kom körs }
-
-
- For each Loopar genom alla element i räckan
-
-
const array1 = ["a", "b", "c"]; array1.forEach((element) => console.log(element)); // Expected output: "a" // Expected output: "b" // Expected output: "c" array.forEach(item => { // Item är varje element i räckan // Gör nånting med element i räckan });
-
- Man kan köra en funktion i HTML med event attribut
-
-
<html> <head> <script language="javascript"> // Funktion som kör en poppup med meddelande "Hello :)" function hello() { alert("Hello :)"); } </script> </head> <body> <!-- När man klickar på knappen körs funktionen som skapades i head script --> <button onClick="hello()">Hello!</button> </body> </html>
-
- Object är en variabel som innehåller flera egenskaper och metoder. Extra: Constructor
-
-
const pet = // Skapar en pet object med variabler type, name och age samt metod getFacts { type: "Cat", name: "SamSam", age: "8", getFacts: function() { return this.name + " the " + this.type + ", " + this.age + " yrs"; } }; const petType = pet.type; // Cat const petFacts = pet.getFacts(); // Cat the SamSam, 8 yrs
-
- Man kan manipulera DOM med JavaScript
-
-
// Create the root element var root = document.createElement("root"); // Create a child element var child = document.createElement("child"); // Add the child element to the root element root.appendChild(child); // <div id="elementWithId"></div> var elementWithId = document.getElementById("elementWithId");
-
- Man kan skapa en form i HTML och sätta logiken för det med JavaScript
-
-
<html> <head> <script language="javascript"> function inputFormCheck() { // Funktion som checkar om input är inte tom if (document.form.name.value == "") { alert("You must give a Name!"); } if (document.form.email.value == "") { alert("You must give a Email!"); } } </script> </head> <body> <!-- Om man klickar "Subscribe!" då körs funktionen som kollar om infogad information är inte tom, om det är fyllt skickas information till subscribed_page.html URL query --> <form action="subscribed_page.html" method="get" name="form" onsubmit="return inputFormCheck()" > <div class="form-example"> <label for="name">Enter your name: </label> <input type="text" name="name" id="name" required /> </div> <div class="form-example"> <label for="email">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Subscribe!" /> </div> </form> </body> </html>
-
-
- När man använder form ska man vara medveten om Client-Side och Server-Side
-
- Man kan ha XSS-attacker med form
- Man kan generera slumpmässiga värde med
Math.random * max
- Query sträng används för att överföra variabler i URL address
- Hämta en query sträng från URL kan man använda
window.location.search.substring(1)
-
-
-
// Att hämta en query med namn password let query = window.location.search.substring(1); let vars = query.split('&'); for (let i = 0; i < vars.length; i++) { let pairs = vars[i].split('='); if (pairs[0] === 'password') { document.getElementById('password').value = pairs[1]; } }
-
- Encryption bevarar hela meddelandets innehåll. Resultatets längd beroende på innehållets längd. Kan de-krypteras och innehållet återskapas.
- Hashing räknar ut en ”signatur” för innehållet och ger alltid lika långt resultat oavsett innehållets storlek. Utifrån hashen kan datainnehållet inte återskapas. One way process.
- MD5 – Message Digest Algorithm. Upphovsman Rinald Rivest 1991. 2008 konstaterades att MD5 var “cryptographically broken and unsuitable for further use“. Stor användning fortfarande för hash checksum på nerladdade filer etc, men inte för lösenords”kryptering”.
- SHA-256 SHA1 utvecklades av NSA 1995, påminner om föregångaren MD5 160 bit hash
- SHA2-family
-
- SHA-256 bit hash
-
- SHA-512 bit hash
- Ajax (Asynchronous JavaScript And XML) / XMLHttpRequest Kan updatera information på en webbsida utan att sidan laddas om.
- CORS - Cross-Origin Resource Sharing Av säkerhetsskäl begränsar webbläsare kors ursprung. HTTP-förfrågningar initierade från skript
- Date() Som representerar en moment i tiden som räknas från January 1, 1970, UTC (epoch)
-
-
console.log(new Date(8.64e15).toString()); // "Sat Sep 13 275760 00:00:00 GMT+0000 (Coordinated Universal Time)" console.log(new Date(8.64e15 + 1).toString()); // "Invalid Date"
-
- setTimout() method Väntar millisekunder innan function exekveras
-
-
<script> function myFunction() { alert('Hello'); } </script> <button onclick="setTimeout(myFunction, 3000)">Try it</button>
-
- Fetch API “Fetch is just a simplified way of doing things for most types of XMLHttpRequests”
- JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers
-
-
<head> <script src="jquery-3.6.0.min.js"></script> <!-- Basic syntax: $(selector).action() $(document).ready(function() { }); --> </head>
-
- XML Parser Läser in XML som DOM-object
-
-
<!DOCTYPE html> <!-- <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <registry> <user> <username>Daniel</username> </user> <user> <username>Finn</username> </user> </registry> --> <html> <head> <script language="javascript"> function getList() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function () { var xmlDoc = this.responseXML; var HTMLtxt = ""; const registry = xmlDoc.getElementsByTagName("registry"); const users = registry[0].getElementsByTagName("user"); for (var i = 0; i < users.length; i++) { HTMLtxt += "<div class='name'>" + users[i].getElementsByTagName("username")[0].childNodes[0].nodeValue + " </div>"; } document.getElementById("list").innerHTML = HTMLtxt; } xmlhttp.open("GET", "./data.xml", true); xmlhttp.send(); } </script> </head> <body onload="getList()"> <div id="list"></div> </body> </html>
-
- JSON (JavaScript Object Notation) JSON är en syntax för att serialisera objekt, arrayer, tal, strängar, booleaner och null.
-
-
{ "browsers": { "firefox": { "name": "Firefox", "pref_url": "about:config", "releases": { "1": { "release_date": "2004-11-09", "status": "retired", "engine": "Gecko", "engine_version": "1.7" } } } } }
-