\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{kelt}
\pdfinfo{
  /Title (learning-javascript.pdf)
  /Creator (Cheatography)
  /Author (kelt)
  /Subject (Learning 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}{14A327}
\definecolor{LightBackground}{HTML}{F0F9F1}
\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{Learning Javascript Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{kelt} via \textcolor{DarkBackground}{\uline{cheatography.com/27757/cs/8119/}}}
\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}kelt \\
  \uline{cheatography.com/kelt} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 5th May, 2016.\\
   Updated 12th May, 2016.\\
   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}{Comments}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// single line comment \newline //  great place to store your thoughts \newline  \newline /{\emph{ \newline     this is a multi-line comment \newline     everything in here is ignored \newline }}/} \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}{Conditions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{if (person.favoriteColor === 'red') \{ \newline     // give person a rose \newline \} \newline else if (person.favoriteColor === 'blue') \{ \newline     // give person a violet \newline \} \newline else \{ \newline     // tell person a poem \newline \}} \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}{Loops}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{var year = 2016; \newline  \newline while (year \textless{} 2020) \newline \{ \newline    console.log("Party like it's ", year); \newline  \newline    // shorthand for: year = year + 1; \newline    year++; \newline \} \newline  \newline  \newline for (var year = 2016; year \textless{} 2020; year++) \newline \{ \newline    // no need to increment year in here \newline    // because it is done in the for loop \newline  \newline    console.log('...', year); \newline \}} \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}{Scope}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// Scopes are controlled by brackets \{ \} \newline // an {\bf{outer}} scope cannot use variables \newline // declared inside {\bf{inner}} scopes \newline // but an {\bf{inner}} scope can use variables \newline // declared in the {\bf{outer}} scope \newline  \newline // outside scope \newline var x = 1; \newline var y = 2; \newline var z = 3; \newline var result; \newline  \newline function testingScope ( z ) \newline \{ \newline    // new variable inside function scope \newline    var w = 4; \newline  \newline    // y is scoped to this function \newline    // doesn't affect outer y \newline    var y = x;   \newline     \newline    // z is a function parameter \newline    // so it's scope is local to function \newline    z = z + w;   \newline  \newline    // updating x in {\bf{outer}} scope \newline    x = 2;        \newline  \newline   return z;   // returns 8 \newline \} \newline  \newline result = testingScope(4); \newline  \newline /{\emph{ \newline     w is undefined in outer scope \newline     x changed to 2 \newline     y is still 2 \newline     z still 3 \newline     result is 8 \newline  \newline }}/} \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}{Keep Learning More}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Use cheatsheets \& docs}} \newline % Row Count 1 (+ 1)
   DOM cheat    - \seqsplit{https://christianheilmann}.com/stuff/JavaScript-DOM-Cheatsheet.pdf \newline % Row Count 3 (+ 2)
   jQuery cheat - \seqsplit{https://oscarotero.com/jquery/} \newline % Row Count 4 (+ 1)
   jQuery docs  - \seqsplit{http://api.jquery.com/event.pagex/} \newline % Row Count 6 (+ 2)
   javascript   - \seqsplit{https://www.cheatography.com/davechild/cheat-sheets/javascript/} \newline % Row Count 8 (+ 2)
   quickly code - \seqsplit{http://www.quicklycode.com/tag/javascript} \newline % Row Count 10 (+ 2)
{\bf{Good Javascript books}} \newline % Row Count 11 (+ 1)
   \{\{link="http://eloquentjavascript.net/Eloquent\_JavaScript.pdf"\}\}Eloquent Javascript\{\{/link\}\} \newline % Row Count 13 (+ 2)
   \{\{link="ftp://91.193.236.10/pub/docs/linux-support/programming/JavaScript/\%5BO\%60Reilly\%5D\%20-\%20JavaScript.\%20The\%20Definitive\%20Guide,\%206th\%20ed.\%20-\%20\%5BFlanagan\%5D.pdf"\}\}Javascript the definitive guide\{\{/link\}\}% Row Count 18 (+ 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}{Variables}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{var~answer~~~~=~42;~~~~~~//~number} \newline  \newline var~duckSays~~=~'quack';~//~strings~'~\&~" \newline  \newline var~isAwesome~=~true;~~~~//~boolean \newline  \newline var~emptiness~=~null;~~~~//~null \newline  \newline var~catNames~~=~{[}~~~~~~~~//~array~of~strings \newline ~~~'princess', \newline ~~~'fizzy', \newline ~~~'zoro' \newline {]}; \newline  \newline var~cat~~~~~~~=~\{~~~~~~~~//~a~single~object \newline ~~~name:~catName{[}2{]},~~~~~//~zoro \newline ~~~age:~~10 \newline \};} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{answer + 1; \newline // 43 \newline  \newline duckSays + "quack"; \newline // quack quack \newline  \newline catNames{[}2{]}; \newline // zoro \newline  \newline cat.age = 11; \newline // sets cat age to 11}  \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}{Intervals / Timeouts}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{function callMeShirley() \newline \{ \newline    console.log('Surely, we can learn Javascript in 20 minutes?!'); \newline \} \newline  \newline function dontCallMeShirley() \newline \{ \newline    console.log('Don't call me Shirely'); \newline \} \newline  \newline {\emph{// runs every 1000 milliseconds (1 second)}} \newline var interval = \seqsplit{setInterval(callMeShirley}, 1000); \newline  \newline {\emph{// runs {\bf{once}} after 5 seconds}} \newline var timeout = \seqsplit{setTimeout(dontCallMeShirley}, 5000);} \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}{DOM / Document Object Model}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The power to find, remove, replace, clone and create new html inside your web page \newline % Row Count 2 (+ 2)
Nodes are different little bits and pieces of html \newline % Row Count 4 (+ 2)
All nodes have a type (we can find it using, node.nodeType) \newline % Row Count 6 (+ 2)
  `ATTRIBUTE\_NODE` \newline % Row Count 7 (+ 1)
  `CDATA\_SECTION\_NODE` \newline % Row Count 8 (+ 1)
  `COMMENT\_NODE` \newline % Row Count 9 (+ 1)
  `DOCUMENT\_NODE` \newline % Row Count 10 (+ 1)
  \seqsplit{`DOCUMENT\_FRAGMENT\_NODE`} \newline % Row Count 11 (+ 1)
  `ELEMENT\_NODE` \newline % Row Count 12 (+ 1)
  `TEXT\_NODE` \newline % Row Count 13 (+ 1)
  ... and a dozen others omitted ... \newline % Row Count 14 (+ 1)
Elements are nodes that have a nodeType of `ELEMENT\_NODE` such as \newline % Row Count 16 (+ 2)
  `\textless{}div\textgreater{}` \newline % Row Count 17 (+ 1)
  `\textless{}p\textgreater{}` \newline % Row Count 18 (+ 1)
  `\textless{}a\textgreater{}` \newline % Row Count 19 (+ 1)
{\emph{ button element node}} \newline % Row Count 20 (+ 1)
`var button = \seqsplit{document.getElementById('specialButton');`} \newline % Row Count 22 (+ 2)
{\emph{array of element nodes}} \newline % Row Count 23 (+ 1)
`var buttons = \seqsplit{document.getElementsByClassName('button');`} \newline % Row Count 25 (+ 2)
{\emph{new element node}} \newline % Row Count 26 (+ 1)
`var node = \seqsplit{document.createElement('div');`} \newline % Row Count 27 (+ 1)
{\emph{element node type}} \newline % Row Count 28 (+ 1)
`node.nodeType` \newline % Row Count 29 (+ 1)
{\emph{cloned element node}} \newline % Row Count 30 (+ 1)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{DOM / Document Object Model (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{`var clone = node.cloneNode(true);`% Row Count 1 (+ 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}{Functions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{function addTogether(x, y) \newline \{ \newline    return x + y; \newline \} \newline  \newline var z = addTogether(1, 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 (other ways)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{var addEm = addTogether; \newline  \newline var add = function(x, y) \newline \{ \newline    return x + y; \newline \} \newline  \newline var myObj = \{ \newline    add: function(x, y) \{ \newline       return x + y; \newline    \} \newline \} \newline  \newline myObj.addEm = addTogether;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{All these functions return 2}} \newline  \newline addTogether(1, 1); \newline addEm(1, 1); \newline add(1, 1); \newline myObj.add(1, 1); \newline myObj.addEm(1, 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}{Classes / reusable objects}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// constructor called for "new Person" \newline function Person(name) \newline \{ \newline   this.name = name; \newline \} \newline  \newline // all person's that are created will have \newline // this function available \newline Person.prototype.changeName = function(newName) \newline \{ \newline   this.name = newName; \newline \} \newline  \newline var person = new Person("Bob"); \newline  \newline person.changeName('Sponge');} \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}}{\textless{}button id="clickMe"\textgreater{}Surely, You'll Click Me\textless{}/button\textgreater{} \newline  \newline var button = \seqsplit{document.getElementById('clickMe');} \newline  \newline button.onclick = callMeShirley;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Often events are a better alternative than {\emph{intervals}}. Events are fired only when triggered. {\emph{Intervals}} happen regardless. In the above example, `callMeShirley` will only be triggered when the button is clicked. \newline  \newline Here is a \{\{link="http://www.w3schools.com/jsref/dom\_obj\_event.asp"\}\}list of events\{\{/link\}\}}  \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}{jQuery}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{// get mouse position \{\{link="http://stackoverflow.com/questions/7790725/javascript-track-mouse-position"\}\}without jQuery\{\{/link\}\}}} \newline  \newline document.onmousemove = handleMouseMove; \newline  \newline function handleMouseMove(event) \newline \{ \newline   var dot, eventDoc, doc, body, pageX, pageY; \newline  \newline   event = event || window.event; \newline  \newline   if (event.pageX == null \&\& event.clientX != null) \newline   \{ \newline       eventDoc = (event.target \&\& \seqsplit{event.target.ownerDocument)} || document; \newline       doc = \seqsplit{eventDoc.documentElement;} \newline       body = eventDoc.body; \newline  \newline       event.pageX = event.clientX + \newline          (doc \&\& doc.scrollLeft || body \&\& body.scrollLeft || 0) - \newline          (doc \&\& doc.clientLeft || body \&\& body.clientLeft || 0); \newline       event.pageY = event.clientY + \newline          (doc \&\& doc.scrollTop  || body \&\& body.scrollTop  || 0) - \newline          (doc \&\& doc.clientTop  || body \&\& body.clientTop  || 0 ); \newline   \} \newline \} \newline  \newline  \newline {\bf{// get mouse position with jQuery}} \newline  \newline \$('body').on('mousemove', function(event) \newline \{ \newline    var mousePosition = \{ x: event.clientX, y: event.clientY \}; \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{jQuery is a library that can help us when we write javascript for the browser. \newline  \newline As seen in the example above, the jQuery library solves a problem for us. It abstracts away subtle browser inconsistencies for us. \newline  \newline Use jQuery whenever you can to make your code easier \newline to read, understand and maintain. There are also thousands of jQuery plugins too and you are likely to use some to enhance your website.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}