JavaScript

Javascript logotyp Javascript logotyp Javascript logotyp Typescript logotyp Node logotyp

Förkortningar

  • JS - JavaScript
  • JSC - JavaScriptCore

  • JSON - JavaScript Object Notation

  • DOM - Document Object Model
  • XSS - Cross-site scripting
  • WYSIWYG - What You See Is What You Get
  • AJAX - Asynchronous JavaScript and XML
  • AMASS - AJAX Massive Storage System
  • XHR - XMLHTTPRequest
  • XDR - XDomainRequest
  • CORS - Cross-Origin Resource Sharing
  • JSSS - JavaScript-Based Style Sheets
  • ECMA - European Computer Manufacturers Association
  • HBS - Handlebars
  • LD - Linked Data
  • IIFE - Immediately-Invoked Function Expression
  • OLOO - objects linked to other objects

Förkortningar

  • JSX - JavaScript XML

Filändelser

  • .js
  • .jsx

ISO

ISO/IEC 16262 Coffee script logotyp

Regler för variabler

  • Får inte börja med en siffra (dock innehålla)
  • Får inte innehålla matematisk logik
  • Får inte innehålla punktion
  • Får inte innehålla mellanslag
  • Får inte vara window, open, location eller string

  • Javascript är versalkänsligt

Citat

Glöm stöd för associativa arrayer

Värden

  • undefined
  • false
  • 0
  • Null

HTML Event Handlers

  • onblur
  • onclick
  • onerror
  • onfocus
  • onkeydown
  • onkeypress
  • onkeyup
  • onmouseover
  • onload
  • onmouseup
  • onmousedown
  • onsubmit

Fler event från Apple

  • loadstart
  • canplaythrough
  • canplay
  • loadeddata
  • loadedmetadata
  • abort
  • emptied
  • error
  • stalled
  • suspend
  • waiting
  • pause
  • play
  • volumechange
  • playing
  • seeked
  • seeking
  • durationchange
  • progress
  • ratechange
  • timeupdate
  • ended
  • webkitbeginfullscreen
  • webkitendfullscreen

Tal över 999999999999999934463 skrivs om till 1e+21

jQuery logotyp Angular logotyp NPM logotyp Grunt logotyp Gulp logotyp Zepto logotyp Zepto JS logotyp JavaScript framework Knockout logotyp three.js logotyp Glimmer logotyp

Ramverk

Plugins

Funktioner

  • eval
  • indexOf
  • isNaN
  • join
  • length
  • parseFloat
  • replace
  • slice
  • splice
  • split
  • toString
  • getAttribute
  • setAttribute
  • dataset
  • querySelectorAll
  • offsetLeft
  • offsetTop
  • navigator.userAgent
  • keyCode
  • tagName

Teckenuppsättning i Javascript

document.characterSet

Skapa ett element

document.createElement('meta')

Ovanliggande element

.parentNode

Bredd på element

.offsetWidth

Arbeta offline (utan internet)

navigator.onLine

Säker anslutning (med SSL)

document.location.protocol

Meddelanden

document.write('Lorem ipsum') console.log('Lorem ipsum') Testa här console.table(['anders', 'andersson'], ['erik', 'eriksson'], ['sven', 'svensson']) Testa här alert('Lorem ipsum') Testa här

Prompt

prompt('title', 'message') Testa här

Nuvarande URL

window.location.href Testa här

Ändra URL

location = "//www.example.com" Testa här

Historik

Bakåt

window.history.go(-1) Testa här

Öppna nytt fönster

window.open('//www.example.com')

Operativsystem

navigator.oscpu Testa här

Webbläsare

navigator.userAgent Testa här

Mobil webbläsare

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) Testa här

Språk

navigator.language Testa här

Cookies aktiverat

navigator.cookieEnabled Testa här document.cookie Testa här

Plugins aktiverat

navigator.plugins.forEach(function(el, i) { alert(el); }); x = navigator.plugins.length; alert('Total plugin installed: ' + x); for (i = 0; i < x; i++) { alert(navigator.plugins[i].name); } Testa här

Flash aktiverat

navigator.mimeTypes ["application/x-shockwave-flash"]

Java aktiverat

navigator.javaEnabled Testa här

Tillgång till internet

navigator.onLine Testa här

Random

Random värde med JavaScript

Returnera ett random nummer mellan 0 (inklusive) och 1 (exklusive).

Math.random(); Testa här

Mellan 0-10

Math.floor(Math.random()*11) Testa här

Random värde från array med JavaScript

rand = myArray[Math.floor(Math.random() * myArray.length)];

Random färg med JavaScript

document.body.style.background = '#' + (Math.random().toString(16) + "000000").substring(2,8); Testa här

Tid

now = new Date(); now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

UNIX timestamp

Date.now() Testa här new Date().getTime() Testa här

UTC (oavsett tidszon)

new Date().toLocaleTimeString(); Testa här hours = now.getUTCHours() minutes = now.getUTCMinutes() seconds = now.getUTCSeconds()

Klocka

00:00 Testa här

Countdown

10 Testa här

Lyssnare på event

element.onclick = doSomething element.addEventListener('click', doSomething, false)

Typ av event

event.type

Förhindra event

return false event.preventDefault() event.stopPropagation()

Alla events

Upplösning

Fönster

Höjd

window.innerHeight Testa här

Bredd

window.innerWidth Testa här

Skärmen

Höjd

screen.height Testa här

Bredd

screen.width Testa här

Knapp på tangentbord

event.key event.keyCode

Knapp på mus

Position på mus

window.onmousemove

Skärmen

event.screenX event.screenY

Fönster

event.clientX event.clientY

Klick med mus på element

event.target.tagName

Touch

event.touches[0].pageX event.touches[0].pageY

Webbapplikationer

window.navigator.standalone

Riktning på enhet

window.orientation Testa här

Gyroskop

Rörelse

window.ondevicemotion

Riktning

window.ondeviceorientation

GPS

navigator.geolocation.getCurrentPosition() Testa här

Dataset (HTML 5)

element.dataset.key = 'Lorem ipsum'

Web storage (HTML 5)

localStorage.setItem(key, value) localStorage.getItem(key)

Strict

"use strict";

Klasser på body

document.getElementsByTagName('body')[0].classList

Modifiera klasser på body

this.body.classList.add('expanded'); this.body.classList.remove('expanded'); this.body.classList.toggle('expanded'); this.body.classList.contains('expanded');

Protokoll

document.location.protocol Testa här

Ta bort element

this.remove()

Välj element

document.querySelector('body')

Retina

window.devicePixelRatio Testa här

Batteri

navigator.battery.dischargingTime Testa här

Teckenkod

"a".charCodeAt(0)

.getBoundingClientRect()

Lägg till jQuery med hjälp av JavaScript

var script = document.createElement('script'); //script.type = 'text/javascript'; script.src = '//code.jquery.com/jquery-latest.min.js'; document.getElementsByTagName('head')[0].appendChild(script);

Lägg till skript i parent head

var stickyWallpaper = document.createElement('script'); stickyWallpaper.src = '//code.jquery.com/jquery-latest.min.js'; window.parent.document.head.appendChild(stickyWallpaper);

Skrolling

window.pageYOffset Testa här document.body.scrollTop Testa här window.scrollY Testa här window.scrollTo(0, document.body.scrollHeight); Testa här document.body.scrollHeight Testa här window.outerHeight Testa här document.height Testa här document.body.clientHeight Testa här

Vibration

navigator.vibrate(1000); Testa här

Geolocation

navigator.geolocation.getCurrentPosition(function(pos){ var crd = pos.coords; console.log('Your current position is:'); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }, function(err) {alert(err)}); Testa här

Audio

navigator.mozGetUserMedia({video: false, audio: true}, function(mozLocalMediaStream) {alert(mozLocalMediaStream)}, function(err) {alert(err)}); Testa här

Video

navigator.mozGetUserMedia({video: true, audio: false}, function(mozLocalMediaStream) {alert(mozLocalMediaStream)}, function(err) {alert(err)}); Testa här

Notiser

Post message

Fullscreen

Clipboard

Loop

obj = document.querySelectorAll('img'); obj.forEach(function(el, i) { el.onclick = function() { alert(arr[i]); }; });

Kärnor

navigator.hardwareConcurrency Testa här

Canvas

canvas = document.createElement('canvas'); ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); console.log(ctx.getSupportedExtensions()); Testa här Testa här

GPU

console.log(ctx.getParameter(ctx.RENDERER)); console.log(ctx.getParameter(ctx.VENDOR)); console.log(ctx.getParameter(ctx.getExtension("WEBGL_debug_renderer_info").UNMASKED_RENDERER_WEBGL)); console.log(ctx.getParameter(ctx.getExtension("WEBGL_debug_renderer_info").UNMASKED_VENDOR_WEBGL)); Testa här

Aktivt element document.activeElement

Klasser

document.body.classList.add('class'); document.body.classList.remove('class'); document.body.classList.toggle('class'); document.body.classList.contains('class');

Manipulera URL

Encode URL

will not encode @*/+

escape()

will not encode ~!@#$&*()=:/,;?+'

encodeURI()

will not encode ~!*()'

encodeURIComponent()

Nuvarande URL

document.URL Testa här window.location.href Testa här location.origin Testa här location.hash Testa här location.host Testa här location.hostname Testa här location.href Testa här location.pathname Testa här location.port Testa här location.protocol Testa här location.search Testa här

Första stilmallen

ldocument.styleSheets[0].href Testa här jQuery logotyp

Ramverk

RamverktJsFiddle

Ikon för Java

Kuriosa

Externa länkar

Babels torn CodeCardCodingCards by Lingonsaft RxJS logotyp RxJS logotyp