Menade du?

    • Java är ett programmeringsspråk

    JavaScript

    Javascript 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

    Kommentarer

    // En kommentar /* En kommentar */

    ISO

    ISO/IEC 16262

    Typer

    • Vanilla javascript
    • Modern javascript
    • Omodern javascript

    Delar

    Coffee script logotyp

    Reserverade 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

    Typer variabler

    • var
    • let
    • const

    Värden

    • undefined
    • false
    • 0
    • Null

    Tal över 999999999999999934463 skrivs om till 1e+21

    Event för HTML

    • 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
    Här kan du hitta ännu fler event

    Testning

    Zepto logotyp Zepto JS logotyp jQuery logotyp Angular logotyp React logotyp

    Stora ramverk

    Zepto logotyp Zepto JS logotyp jQuery logotyp

    Liknande

    Ikon för Java Typescript logotyp

    Liknande namn

    Vanilj

    Kuriosa

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

    Mindre ramverk

    Plugins

    Funktioner

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

    Ändelser

    defer> async>

    Teckenuppsättning i Javascript

    document.characterSet Testa här

    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 Testa här

    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') Testa här

    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().toLocaleDateString(); Testa här 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)

    Valt option i select-element

    document.getElementsByTagName('select')[0].options[document.getElementsByTagName('select')[0].selectedIndex]

    .getBoundingClientRect()

    Lägg till Zepto med hjälp av JavaScript

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

    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 Zepto i parent head

    var stickyWallpaper = document.createElement('script'); stickyWallpaper.src = 'https://zeptojs.com/zepto.min.js'; window.parent.document.head.appendChild(stickyWallpaper);

    Lägg till jQuery 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

    document.styleSheets[0].href Testa här

    Sätt header för Javascript med PHP

    header('Content-Type: application/javascript'); header('Content-Type: text/javascript');

    RamverktJsFiddle

    Externa länkar

    Babels torn CodeCardCodingCards by Lingonsaft RxJS logotyp RxJS logotyp

    Editorer