\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{alurcott}
\pdfinfo{
  /Title (javascript.pdf)
  /Creator (Cheatography)
  /Author (alurcott)
  /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}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\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}{alurcott} via \textcolor{DarkBackground}{\uline{cheatography.com/69996/cs/17745/}}}
\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}alurcott \\
  \uline{cheatography.com/alurcott} \\
  \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 4th November, 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}{Script tag}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{In HTML, Javascript must be inserted between the \textless{}script\textgreater{} \textless{}/script\textgreater{} tags.% Row Count 2 (+ 2)
} \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}{window.alert()}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{window.alert() creates a window alert. For example: \newline % Row Count 2 (+ 2)
\textless{}script\textgreater{} \newline % Row Count 3 (+ 1)
window.alert(5 + 6); \newline % Row Count 4 (+ 1)
\textless{}/script\textgreater{}% Row Count 5 (+ 1)
} \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}{Declaring variables}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Muiltiple variables can be declared at once. \newline % Row Count 1 (+ 1)
var x, y, z \newline % Row Count 2 (+ 1)
x = 5  \newline % Row Count 3 (+ 1)
y = 1 \newline % Row Count 4 (+ 1)
z = x + y% Row Count 5 (+ 1)
} \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}{Comments}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Comments can be used to annotate code, or to prevent execution of code without removing it. It is reccomended to use complete sentences to ensure it is readable. Comments should be updated when code is changed to ensure it remains readable and relevant. \newline % Row Count 6 (+ 6)
Single line comments start with // \newline % Row Count 7 (+ 1)
Any code written on this line will be ignored by Javascript. \newline % Row Count 9 (+ 2)
Multi line comments start with /{\emph{ and end with }}/% Row Count 10 (+ 1)
} \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}{Function names}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Functions should be named like this: functionsNameLikeThis% Row Count 2 (+ 2)
} \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}{Class names}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Classes should be named like this: ClassNamedLikeThis% Row Count 2 (+ 2)
} \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}{Using innerHTML}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{To access an HTML element, Javascript can use the \seqsplit{document.getElementById(id)} method. \newline % Row Count 2 (+ 2)
\textless{}h1\textgreater{}My First Web Page\textless{}/h1\textgreater{} \newline % Row Count 3 (+ 1)
\textless{}p\textgreater{}My First Paragraph\textless{}/p\textgreater{} \newline % Row Count 4 (+ 1)
\textless{}p id="demo"\textgreater{}\textless{}/p\textgreater{} \newline % Row Count 5 (+ 1)
\textless{}script\textgreater{} \newline % Row Count 6 (+ 1)
\seqsplit{document.getElementById("demo").innerHTML} = 5 + 6; \newline % Row Count 8 (+ 2)
\textless{}/script\textgreater{} \newline % Row Count 9 (+ 1)
Javascript has been used above to insert the text into the paragraph.% Row Count 11 (+ 2)
} \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}{Functions}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{A function is a block of code which performs a task. \newline % Row Count 2 (+ 2)
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). The code to be executed, by the function, is placed inside curly brackets: \{\} \newline % Row Count 6 (+ 4)
function name(parameter1, parameter2, parameter3) \{ \newline % Row Count 8 (+ 2)
    code to be executed \newline % Row Count 9 (+ 1)
\}% Row Count 10 (+ 1)
} \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}{Variable Names}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Variables should be named like this: variablesNamedLikeThis% Row Count 2 (+ 2)
} \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}{Naming Strings}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{When naming strings it is preferable to use single quotes ' than double quotes " \newline % Row Count 2 (+ 2)
This is helpful when creating strings which include HTML.% Row Count 4 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Using document.write()}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{document.write() can also be used  \newline  \newline \textless{}script\textgreater{} \newline document.write(5 + 6); \newline \textless{}/script\textgreater{}}  \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}{using console.log()}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{You can also use console.log() to display data. \newline % Row Count 1 (+ 1)
\textless{}script\textgreater{} \newline % Row Count 2 (+ 1)
console.log(5+6); \newline % Row Count 3 (+ 1)
\textless{}/script\textgreater{}% Row Count 4 (+ 1)
} \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}{Objects}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Objects are variables too. But objects can contain many values. This code assigns many values (Fiat, 500, white) to a variable named car: \newline % Row Count 3 (+ 3)
var car = \{type:"Fiat", model:"500", color:"white"\};% Row Count 5 (+ 2)
} \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}{Constants}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{If a value is constant and immutable it should be named in CONSTANT\_VALUE\_CASE% Row Count 2 (+ 2)
} \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}{Semi-Colons}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Semi-colons should always be used after a statement in JS. Not using semi-colons can lead to problems which are hard to debug. Nethertheless, it is a good habit to get into.% Row Count 4 (+ 4)
} \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}{Naming variables}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{When naming variables, do not use these reserved words! \newline % Row Count 2 (+ 2)
abstract  	else  	instanceof  	super   \newline % Row Count 3 (+ 1)
boolean  	enum  	int  	switch   \newline % Row Count 4 (+ 1)
break  	export  	interface  	synchronized   \newline % Row Count 5 (+ 1)
byte  	extends  	let  	this   \newline % Row Count 6 (+ 1)
case  	false  	long  	throw   \newline % Row Count 7 (+ 1)
catch  	final  	native  	throws   \newline % Row Count 8 (+ 1)
char  	finally  	new  	transient   \newline % Row Count 9 (+ 1)
class  	float  	null  	true   \newline % Row Count 10 (+ 1)
const  	for  	package  	try   \newline % Row Count 11 (+ 1)
continue  	function  	private  	typeof   \newline % Row Count 12 (+ 1)
debugger  	goto  	protected  	var   \newline % Row Count 13 (+ 1)
default  	if  	public  	void   \newline % Row Count 14 (+ 1)
delete  	implements  	return  	volatile   \newline % Row Count 15 (+ 1)
do  	import  	short  	while   \newline % Row Count 16 (+ 1)
double  	in  	static  	with% Row Count 17 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}