Menade du?

  • Java är ett programmeringsspråk

JavaScript

Logotyp för JavaScript

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

Header

content-type: text/javascript;charset=UTF-8

MIME-typ med stöd för UTF-8

text/javascript;charset=UTF-8 Logotyp för Open JavaScript Foundation

Grupp

Kommentarer

// En kommentar /* En kommentar */

Standardisering

ISO/IEC 16262

Typer

  • Vanilla javascript
  • Modern javascript
  • Omodern javascript
Logotyp för JSON - JavaScript Object Notation

Delar

Logotyp för Coffee script

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
Var, let & const

Typer variabler

  • var
  • let
  • const

Värden

  • undefined
  • false
  • 0
  • Null

Tal över 999999999999999934463 skrivs om till 1e+21

Attribut för event i 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

Logotyp för node.js Logotyp för Zepto Logotyp för Zepto JS Logotyp för jQuery Logotyp för Angular Logotyp för React Logotyp för Vue.js Logotyp för SVELTE

Stora ramverk

Logotyp för Zepto Logotyp för Zepto JS Logotyp för jQuery

Liknande

Ikon för Java Logotyp för Typescript

Liknande namn

Vanilj

Kuriosa

Tagg i HTML som visas när JavaScript inte är aktiverat

<noscript>JavaScript är inte aktiverat</noscript>

Avaktivera JavaScript för Safari på iOS

Ramverk

Visa alla Logotyp för jQuery Logotyp för Angular Logotyp för React Logotyp för Vue.js Logotyp för Typescript Logotyp för Node Logotyp för NPM - Logotyp för Grunt Logotyp för Gulp Logotyp för Zepto Logotyp för Zepto JS Logotyp för JavaScript framework Knockout Logotyp för three.js Logotyp för Glimmer Logotyp för BABEL Logotyp för BABEL Logotyp för SVELTE Logotyp för Rollup.js Logotyp för Electron Logotyp för handlebars.js

Plugins

Funktioner

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

Attribut för JavaScript i HTML

  • defer
  • async

Teckenuppsättning i Javascript

document.characterSet Testa här

Skapa ett element

document.createElement('meta')

Ovanliggande element

.parentNode

Flytta ett element framför ett annat

parentElement = elementToMove.parentNode; siblingElement = parentElement.querySelector('.sibling-element'); parentElement.insertBefore(elementToMove, siblingElement);

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

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

Datum

Date() Testa här new Date() Testa här

ISO

new Date().toISOString() Testa här now = new Date(); now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

UNIX timestamp

Date.now() new Date().now() 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 kommer snart

setInterval(function() { new Date.getHour() + ':' + new Date().getSeconds(); }, 1000) 00:00 Testa här

Countdown kommer snart

setInterval(function() {}, 1000) 10 Testa här Muspekare Muspekare

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() void(0)

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

Beräkna återstående tid fö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 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

Exempel på test med regex i JavaScript

new RegExp('ipsum','g').test('Lorem ipsum dolor') Testa här

Ramverkt på JsFiddle

Sätt header för Javascript med PHP

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

Länkar

Logotyp för JSFiddle

Externa länkar

Babels torn CodeCardCodingCards by Lingonsaft Logotyp för RxJS Logotyp för RxJS

Editorer