\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{camilo.herbert}
\pdfinfo{
  /Title (javascript-cheatsheet.pdf)
  /Creator (Cheatography)
  /Author (camilo.herbert)
  /Subject (Javascript Cheatsheet Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{E6511A}
\definecolor{LightBackground}{HTML}{FDF4F0}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Javascript Cheatsheet Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{camilo.herbert} via \textcolor{DarkBackground}{\uline{cheatography.com/66323/cs/16559/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}camilo.herbert \\
  \uline{cheatography.com/camilo-herbert} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 3rd August, 2018.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Numbers and Math}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{var pi = 3.141;}} \newline {\bf{pi.toFixed(0);}} returns 3 \newline {\bf{pi.toFixed(2); }}returns 3.14 - for working with money \newline {\bf{pi.toPrecision(2)}} returns 3.1 \newline {\bf{pi.valueOf();}} returns number \newline {\bf{Number(true);}} converts to number \newline {\bf{Number(new Date()) }}number of milliseconds since 1970 \newline {\bf{parseInt("3 months"); }}returns the first number: 3 \newline {\bf{parseFloat("3.5 days");}}  returns 3.5 \newline {\bf{Number.MAX\_VALUE }} largest possible JS number \newline {\bf{Number.MIN\_VALUE}} smallest possible JS number \newline {\bf{Number.NEGATIVE\_INFINITY }} -Infinity \newline {\bf{Number.POSITIVE\_INFINITY}} Infinity \newline  \newline {\bf{var pi = Math.PI;}}  3.141592653589793 \newline {\bf{Math.round(4.4);}}  = 4 - rounded \newline {\bf{Math.round(4.5);}}  = 5 \newline {\bf{Math.pow(2,8);}}  = 256 - 2 to the power of 8 \newline {\bf{Math.sqrt(49);}}  = 7 - square root  \newline {\bf{Math.abs(-3.14);}}  = 3.14 - absolute, positive value \newline {\bf{Math.ceil(3.14); }} = 4 - rounded up \newline {\bf{Math.floor(3.99);}} = 3 - rounded down \newline {\bf{Math.sin(0);}}  = 0 - sine \newline {\bf{Math.cos(Math.PI);}}  OTHERS: tan,atan,asin,acos, \newline {\bf{Math.min(0, 3, -2, 2);}} = -2 - the lowest value \newline {\bf{Math.max(0, 3, -2, 2);}} = 3 - the highest value \newline {\bf{Math.log(1);}}   = 0 natural logarithm  \newline {\bf{Math.exp(1);}}  = 2.7182pow(E,x) \newline {\bf{Math.random();}} random number between 0 and 1 \newline {\bf{Math.floor(Math.random() * 5) + 1;}}  random integer, from 1 to 5} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Miscellaneous}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Parsing / Serializing JSON \newline {\bf{obj = JSON.parse(str);}} \newline {\bf{var myJSON = JSON.stringify(object);}} \newline  \newline decode URI. Result: "my page.asp" \newline {\bf{decodeURI(enc);}} \newline  \newline encode URI. Result: "my\%page.asp" \newline {\bf{encodeURI(uri);}} \newline  \newline Decode a URI component \newline {\bf{decodeURIComponent(enc);}} \newline  \newline Encode a URI component \newline {\bf{encodeURIComponent(uri);}} \newline  \newline Is variable a finite, legal number \newline {\bf{isFinite();}} \newline  \newline is variable an illegal number \newline {\bf{isNaN();}} \newline  \newline Parses a string into a float / integer \newline {\bf{parseFloat();}} \newline {\bf{parseInt();}} \newline  \newline {\bf{ TRY / CATCH / THROW }} \newline try \{ \newline     undefinedFunction(); \newline \} \newline catch(err) \{ \newline     \seqsplit{console.log(err.message);} \newline \} \newline  \newline throw "My error message"; \newline  \newline {\bf{ STRICT MODE }} \newline "use strict"; \newline x = 1;  // Throws an error because variable is not defined} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Events}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Mouse}} \newline onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup \newline  \newline {\bf{Keyboard}} \newline onkeydown, onkeypress, onkeyup \newline  \newline {\bf{Frame}} \newline onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload \newline  \newline {\bf{Form}} \newline onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit \newline  \newline {\bf{Drag}} \newline ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop \newline  \newline {\bf{Clipboard}} \newline oncopy, oncut, onpaste \newline  \newline {\bf{Media}} \newline onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting \newline  \newline {\bf{Animation}} \newline animationend, animationiteration, animationstart \newline  \newline {\bf{Miscellaneous}} \newline transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel, ontouchcancel, ontouchend, ontouchmove, ontouchstart} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Arrays}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{var dogs = {[}"Bulldog", "Beagle", "Labrador"{]}; }} \newline {\bf{var dogs = new Array("Bulldog", "Beagle", "Labrador");}} \newline  \newline Access value at index, first item being {[}0{]} \newline {\bf{alert(dogs{[}1{]});}} \newline  \newline Change the first item \newline {\bf{dogs{[}0{]} = "Bull Terier";}} \newline  \newline Iterate through Array \newline {\bf{for (var i = 0; i \textless{} dogs.length; i++) \{}} \newline     {\bf{console.log(dogs{[}i{]});}} \newline {\bf{\}}} \newline  \newline {\bf{ METHODS }} \newline convert to string: results "Bulldog,Beagle,Labrador" \newline {\bf{dogs.toString();}} \newline  \newline join: "Bulldog {\emph{ Beagle }} Labrador" \newline {\bf{dogs.join(" * ");}} \newline  \newline remove last element \newline {\bf{dogs.pop();}} \newline  \newline add new element to the end \newline {\bf{dogs.push("Chihuahua");}} \newline  \newline the same as push \newline {\bf{dogs{[}dogs.length{]} = "Chihuahua";}} \newline  \newline remove first element \newline {\bf{dogs.shift();}} \newline  \newline add new element to the beginning \newline {\bf{dogs.unshift("Chihuahua");}} \newline  \newline change element to undefined (not recommended) \newline {\bf{delete dogs{[}0{]};}} \newline  \newline add elements (where, how many to remove, element list) \newline {\bf{dogs.splice(2, 0, "Pug", "Boxer");}} \newline  \newline join two arrays (dogs followed by cats and birds) \newline {\bf{var animals = dogs.concat(cats,birds);}} \newline  \newline elements from {[}1{]} to {[}4-1{]} \newline {\bf{dogs.slice(1,4);}} \newline  \newline sort string alphabetically \newline {\bf{dogs.sort();}} \newline  \newline sort string in descending order \newline {\bf{dogs.reverse();}} \newline  \newline numeric sort \newline {\bf{x.sort(function(a, b)\{return a - b\});}} \newline  \newline numeric descending sort \newline {\bf{x.sort(function(a, b)\{return b - a\});}} \newline  \newline first item in sorted array is the lowest (or highest) value \newline {\bf{highest = x{[}0{]};}} \newline  \newline random order sort \newline {\bf{x.sort(function(a, b)\{return 0.5 - Math.random()\});}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Date \& Time}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{var d = new Date();}} \newline = Fri Aug 03 2018 15:52:36 GMT-0300 (Uruguay Standard Time) \newline  \newline = 1533322356511 (miliseconds passed since 1970) \newline {\bf{Number(d) }} \newline  \newline Date declaration \newline {\bf{Date("2017-06-23"); }} \newline  \newline (set to Jan 01) \newline {\bf{Date("2017");}} \newline  \newline {\bf{Date("2017-06-23T12:00:00-09:45");}} \newline {\bf{Date("June 23 2017");}} \newline {\bf{Date("Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)");}} \newline  \newline {\bf{var d = new Date();}} \newline  \newline getting the weekday \newline {\bf{a = d.getDay();}} \newline  \newline day as a number (1-31) \newline {\bf{d.getDate();   }} \newline  \newline weekday as a number (0-6)  \newline {\bf{d.getDay(); }}  \newline  \newline four digit year (yyyy) \newline {\bf{d.getFullYear();}} \newline  \newline hour (0-23) \newline {\bf{d.getHours();}} \newline  \newline milliseconds (0-999) \newline {\bf{d.getMilliseconds();}} \newline  \newline minutes (0-59) \newline {\bf{d.getMinutes();}} \newline  \newline month (0-11) \newline {\bf{d.getMonth();}} \newline  \newline seconds (0-59) \newline {\bf{d.getSeconds();}} \newline  \newline milliseconds since 1970 \newline {\bf{d.getTime();}} \newline  \newline {\bf{SET DATES}} \newline  \newline adds a week to a date \newline {\bf{d.setDate(d.getDate() + 7);}} \newline  \newline day as a number (1-31) \newline {\bf{d.setDate();}} \newline  \newline year (optionally month and day) \newline {\bf{d.setFullYear();}} \newline  \newline hour (0-23) \newline {\bf{d.setHours();}} \newline  \newline milliseconds (0-999) \newline {\bf{d.setMilliseconds();}} \newline  \newline minutes (0-59) \newline {\bf{d.setMinutes();}} \newline  \newline month (0-11) \newline {\bf{d.setMonth();}} \newline  \newline seconds (0-59) \newline {\bf{d.setSeconds();}} \newline  \newline milliseconds since 1970) \newline {\bf{d.setTime();}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Strings}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{var abc = "abcdefghijklmnopqrstuvwxyz";}} \newline  \newline \textbackslash{}n new line \newline {\bf{var esc = 'I don\textbackslash{}'t \textbackslash{}n know';}} \newline  \newline string length \newline {\bf{var len = abc.length;}} \newline  \newline find substring, -1 if doesn't contain  \newline {\bf{abc.indexOf("lmno");}} \newline  \newline last occurance \newline {\bf{abc.lastIndexOf("lmno");}} \newline  \newline cuts out "def", negative values count from behind \newline {\bf{abc.slice(3, 6);}} \newline  \newline find and replace, takes regular expressions \newline {\bf{abc.replace("abc","123");}} \newline  \newline convert to upper case \newline {\bf{abc.toUpperCase();}} \newline  \newline convert to lower case \newline {\bf{abc.toLowerCase();}} \newline  \newline abc + " " + str2 \newline {\bf{abc.concat(" ", str2);}} \newline  \newline character at index: "c" \newline {\bf{abc.charAt(2);}} \newline  \newline unsafe, abc{[}2{]} = "C" doesn't work \newline {\bf{abc{[}2{]};}} \newline  \newline character code at index: "c" -\textgreater{} 99 \newline {\bf{abc.charCodeAt(2);}} \newline  \newline splitting a string on commas gives an array \newline {\bf{abc.split(",");}} \newline  \newline splitting on characters \newline {\bf{abc.split("");}} \newline  \newline number to hex(16), octal (8) or binary (2) \newline {\bf{128.toString(16);}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}