Front End Utveckling 2025 - JS Cheatsheet

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"
					}
				}
			}
		}
	}