JS Snippets

I often find myself on stackoverflow looking for these snippets of code, so I put it all in one place.

key input

key={pressed:false,up:function(){},down:function(){},name:””,code:null};keyList={num8:”backspace”,num9:”tab”,num13:”enter”,n…


This content originally appeared on DEV Community and was authored by coolprofessor

I often find myself on stackoverflow looking for these snippets of code, so I put it all in one place.

key input

key={pressed:false,up:function(){},down:function(){},name:"",code:null};keyList={num8:"backspace",num9:"tab",num13:"enter",num16:"shift",num17:"ctrl",num18:"alt",num19:"pause",num20:"caps",num27:"exit",num32:" ",num33:"pgup",num34:"pgdn",num35:"end",num36:"home",num37:"left",num38:"up",num39:"right",num40:"down",num45:"insert",num46:"del",num48:0,num49:1,num50:2,num51:3,num52:4,num53:5,num54:6,num55:7,num56:8,num57:9,num65:"a",num66:"b",num67:"c",num68:"d",num69:"e",num70:"f",num71:"g",num72:"h",num73:"i",num74:"j",num75:"k",num76:"l",num77:"m",num78:"n",num79:"o",num80:"p",num81:"q",num82:"r",num83:"s",num84:"t",num85:"u",num86:"v",num87:"w",num88:"x",num89:"y",num90:"z",num91:"win",num92:"win",num93:"select",num96:0,num97:1,num98:2,num99:3,num100:4,num101:5,num102:6,num103:7,num104:8,num105:9,num106:"*",num107:"+",num109:"-",num110:".",num111:"/",num112:"F1",num113:"F2",num114:"F3",num115:"F4",num116:"F5",num117:"F6",num118:"F7",num119:"F8",num120:"F9",num121:"F10",num122:"F11",num123:"F12",num144:"numlock",num145:"scroll lock",num186:";",num187:"=",num188:",",num189:"-",num190:".",num191:"/",num192:"`",num219:"[",num219:"-",num220:"\\",num221:"]",num222:"'"};window.addEventListener("keypress",(keyIsPressed)=>{key.name=eval("keyList.num"+keyIsPressed.keyCode);if(key.name===undefined){key.code=""}key.pressed=true;key.down()});window.addEventListener("keyup",(event)=>{key.pressed=false;key.up()});

This creates a key object that holds keyboard info.

name type value
name str name of last key pressed
pressed bool whether key up or down
up func function triggered on keyup
down func function triggered on keydown
num int JS keycode

Mouse input

mouse={x:0,y:0,scroll:function(){},scrollX:0,scrollY:0,down:function(){},up:function(){},moved:function(){},pressed:false,button:undefined};window.addEventListener("mousedown",(event)=>{mouse.pressed=true;mouse.down();mouse.button=event.button});document.addEventListener('mousemove',(event)=>{mouse.moved();mouse.px=mouse.x;mouse.px=mouse.x;mouse.x=event.clientX+mouse.scrollX;mouse.y=event.clientY+mouse.scrollY});window.addEventListener('touchstart',function(e){mouse.pressed=true;mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY},false);window.addEventListener('touchmove',function(e){mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY;},false);window.addEventListener('touchend',function(e){mouse.pressed=false},false);window.addEventListener("mouseup",(event)=>{mouse.pressed=false;mouse.up()});window.addEventListener("scroll",function(){mouse.scroll();mouse.x+=window.scrollX-mouse.scrollX;mouse.y+=window.scrollY-mouse.scrollY;mouse.scrollX=window.scrollX;mouse.scrollY=window.scrollY});

This creates a mouse object that holds mouse info.

name type value
x int horizontal mouse position
y int vertical mouse position
scrollX int horizontal scroll position
scrollY int vertical scroll position
up func function triggered on mouseup
down func function triggered on mousedown
up func function triggered on keyup
scroll func function triggered on scroll
button int button number pressed

mouse cursor

//This code is required for Firefox.
document.documentElement.style='height:100%;width:100%;padding:0';
//use this to change the CSS cursor
document.documentElement.style.cursor = 'pointer'

sound

audio.play(new Audio('audio_file.mp3'));

download

function download(name,contents){var c=document.createElement("a");c.download=name;var t=new Blob([contents],{type:"text/plain"});c.href=window.URL.createObjectURL(t);c.click()}

user-highlighted text

function highlightedText(){var text="";if(window.getSelection){text=window.getSelection().toString()}else if(document.selection&&document.selection.type!="Control"){text=document.selection.createRange().text}return text}

copy

function copy(copytext){navigator.clipboard.writeText(copytext)};

random

function random(min,max){return min+Math.random()*(max-min)};

distance

const distance = (x1,y1,x2,y2) => Math.hypot(x1 - x2, y1 - y2);

angle

function angle(x1,y1,x2,y2){var theta=Math.atan2((y2-y1),(x2-x1))*(180/Math.PI);if(theta<0){theta=360+theta}return theta}

wait

wait=(ms)=>{forever();refresh();let now=Date.now(),end=now+ms;while(now<end){now=Date.now()}};

This is not recommended, because it stops the entire JS engine.

repeat

repeat=(times,what)=>{for(i=0;i<times;i+=1){what()}}

make editable

document.getElementById('el').contentEditable = 'true'

I hope this was somewhat helpful!


This content originally appeared on DEV Community and was authored by coolprofessor


Print Share Comment Cite Upload Translate Updates
APA

coolprofessor | Sciencx (2021-10-14T23:30:14+00:00) JS Snippets. Retrieved from https://www.scien.cx/2021/10/14/js-snippets/

MLA
" » JS Snippets." coolprofessor | Sciencx - Thursday October 14, 2021, https://www.scien.cx/2021/10/14/js-snippets/
HARVARD
coolprofessor | Sciencx Thursday October 14, 2021 » JS Snippets., viewed ,<https://www.scien.cx/2021/10/14/js-snippets/>
VANCOUVER
coolprofessor | Sciencx - » JS Snippets. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/14/js-snippets/
CHICAGO
" » JS Snippets." coolprofessor | Sciencx - Accessed . https://www.scien.cx/2021/10/14/js-snippets/
IEEE
" » JS Snippets." coolprofessor | Sciencx [Online]. Available: https://www.scien.cx/2021/10/14/js-snippets/. [Accessed: ]
rf:citation
» JS Snippets | coolprofessor | Sciencx | https://www.scien.cx/2021/10/14/js-snippets/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.