\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{Sara (lasago)}
\pdfinfo{
  /Title (javascript.pdf)
  /Creator (Cheatography)
  /Author (Sara (lasago))
  /Subject (Javascript 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}{FAB4E7}
\definecolor{LightBackground}{HTML}{FDECF9}
\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 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Sara (lasago)} via \textcolor{DarkBackground}{\uline{cheatography.com/70899/cs/18456/}}}
\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}Sara (lasago) \\
  \uline{cheatography.com/lasago} \\
  \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 13th August, 2019.\\
   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{tabularx}{17.67cm}{p{1.727 cm} p{1.727 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Closures}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} p{1.727 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{event delegation}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} p{1.727 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{this}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} p{1.727 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{prototypal inheritance}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\seqsplit{https://codeburst.io/clearing-your-front-end-job-interview-javascript-d5ec896adda4} \newline http://thatjsdude.com/interview/index.html \newline https://frontendmasters.com/books/front-end-handbook/2018/practice/interview-q.html \newline https://github.com/h5bp}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} p{1.727 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Math Class}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Math.max({[}value1{[}, value2{[}, ...{]}{]}{]})} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{2.9359 cm} x{14.3341 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Function.prototype}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{.apply()} & The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).\{\{nl\}\}`var max = Math.max.apply(null, numbers);` \tn 
% Row Count 6 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Array.prototype.}}  \tn
% Row 0
\SetRowColor{LightBackground}
arr{\bf{.indexOf(}}searchElement{[}, fromIndex{]}{\bf{)}} & The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.\{\{nl\}\}`` \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
.find() & The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.\{\{nl\}\}`var found = \seqsplit{array1.find(function(element)} \{   return element \textgreater{} 10; \});` \tn 
% Row Count 19 (+ 12)
% Row 2
\SetRowColor{LightBackground}
arr{\bf{.map()}} & The map() method creates a new array with the results of calling a provided function on every element in the calling array. \{\{nl\}\}`const map1 = array1.map(x =\textgreater{} x * 2);` \tn 
% Row Count 28 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Objects}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation: & objectName.propertyName\{\{nl\}\}var myCar = new Object(); myCar.make = 'Ford'; myCar.model = 'Mustang'; myCar.year = 1969; \tn 
% Row Count 26 (+ 20)
% Row 2
\SetRowColor{LightBackground}
Unassigned properties of an object are undefined (and not null). & myCar.color; // undefined \tn 
% Row Count 30 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Objects (cont)}}  \tn
% Row 3
\SetRowColor{LightBackground}
Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors). Objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the myCar object as follows: & myCar{[}'make'{]} = 'Ford'; myCar{[}'model'{]} = 'Mustang'; myCar{[}'year'{]} = 1969; \tn 
% Row Count 18 (+ 18)
% Row 4
\SetRowColor{white}
Property accessors provide access to an object's properties by using the dot notation or the bracket notatio & person = \{'firstname': 'John', 'lastname': 'Doe'\}\{\{nl\}\}person{[}'firstname'{]} = 'Mario'; person{[}'lastname'{]} = 'Rossi'; \tn 
% Row Count 24 (+ 6)
% Row 5
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{myOtherMethod(params) \{     // ...do something else   \}} \tn 
% Row Count 26 (+ 2)
% Row 6
\SetRowColor{white}
Object.Prototype & Nearly all objects in JavaScript are instances of Object; a typical object inherits properties (including methods) from Object.prototype, although these properties may be shadowed (a.k.a. overridden). However, an Object may be deliberately created for which this is not true (e.g. by \seqsplit{Object.create(null))}, or it may be altered so that this is no longer true (e.g. with \seqsplit{Object.setPrototypeOf).} \tn 
% Row Count 46 (+ 20)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\seqsplit{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working\_with\_Objects}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.727 cm} x{15.543 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Events}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{These are code structures which listen for things happening in browser, running code in response.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Attach event to an element}}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
 & \seqsplit{document.querySelector('html').onclick} = function() \{\}; \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
 & var myHTML = \seqsplit{document.querySelector('html');} myHTML.onclick = function() \{\}; \tn 
% Row Count 8 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}