Alt muligt JavaScript lort

Her samler jeg alt muligt JavaScript info og små JavaScript kode stumper

use strict

Strict mode er en striksere variant af JavaScript.

Strict mode kan bruges på hele scriptet eller på individuelle funktioner ved at skrive 'use strict'; eller "use strict"; i begyndelsen af scriptet eller i begyndelsen af funktionen.

Browserunderstøttelse fra caniuse.com :

undefined

Footer i bunden

JavaScript void links

I HTML 4 kunne man gøre sådan her hvis man ville lave et tomt link.
Resultatet ovenfor er skabt af følgende kode


I HTML5 behøver man ikke bruger href attributten.

I stedet kan man blot skrive følgende.
Resultatet ovenfor er skabt af følgende kode


Også eventuelt style med CSS hvis man ønsker markøren skal ændre sig eller der skal være streg under.
Resultatet ovenfor er skabt af følgende kode

blur


Resultatet ovenfor er skabt af følgende kode

CDATA


// <![CDATA[ skal være på en linje for sig selv ellers bliver resten af linjen udkommenteret

OBS : Der er en fejl i SyntaxHighlighter koden som tilføjer ]]> til sidst som ikke skal være med.

setInterval clearInterval setTimeout

Event lytning

getElement getElements

textContent innerHTML value

Form name og value

var

keyCode

Resultatet ovenfor er skabt af følgende kode

addEventListener

Test om addEventListener er understøttet før det bruges.

Fejl

appendChild

appendChild kan bruges til at indsætte noget sidst i et element.

var eller ej

Binær floating point

Alternativ til document.write

document.write() skulle være noget værre noget som kan ende med at give en del forvirrende fejlbeskeder.

I stedet for ...


Kan man gøre sådan...


Eller sådan her...

Info

JavaScript fejl

parentNode

Optimering af for løkke

I mange JavaScript eksempler med for () løkker hentes .length hver gang løkken gennemgåes hvilket er unødigt hvis længden er den samme hele tiden.

I stedet for hente length hver gang så er det hurtigere kun at hente det én gang før første gennemgang.

Anonym funktion

Anonym funktion for at undgå globale variabler.

Skift class i stedet for style

Placeholder

I HTML5 kan man skrive <input placeholder="Søg..."> for at få vist en tekst når feltet er tomt og ikke har fokus.
Det virker så bare kun i de nyere browsere som forstår placeholder attributten.

Hvis man vil have det skal virke i ældre browsere kan man bruge JavaScript som her.
Resultatet ovenfor er skabt af følgende kode

Mouse events

I JavaScript er der noget som hedder events.
Det er når der "sker noget".

For eksempel når man klikker med musen et sted på siden udløser det en "click" event.
Det er så også fint nok men desværre bruger de forskellige browsere forskellige måder at finder ud af det her med når man trykker med musen et sted på siden.

Jeg havde lavet et <canvas> hvor man kunne klikke på for at hoppe i afspilningen til et <audio> eller <video> tag.

Det virkede fint bortset fra at i Firefox var grafikken lidt ved siden af i forhold til der hvor man klikkede.

Koden jeg længe havde let efter var x -= cavas.offsetLeft;.

Så jeg synes mouse events fortjener en side for sig selv så det kan komme på plads og man kan få mouse events til at virke ens i de forskellige browsere.

Med denne kode skulle man i alle browserne kunne klikke et sted på hjemmesiden og få x og y positionen.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.