\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{LeSep7ieme (LeSep7ieme)}
\pdfinfo{
  /Title (javascript.pdf)
  /Creator (Cheatography)
  /Author (LeSep7ieme (LeSep7ieme))
  /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}{3B9CA3}
\definecolor{LightBackground}{HTML}{F2F8F9}
\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}{LeSep7ieme (LeSep7ieme)} via \textcolor{DarkBackground}{\uline{cheatography.com/20351/cs/3147/}}}
\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}LeSep7ieme (LeSep7ieme) \\
  \uline{cheatography.com/lesep7ieme} \\
  \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 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*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Variables}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{var myvariable; \newline var myvariable = 5.5; \newline myvariable = 6; \newline var myvariable1, myvariable2 = 'text'; \newline alert(typeof number); // Affiche : « number » \newline alert(typeof text); // Affiche : « string » \newline alert(typeof aBoolean); //Affiche : « boolean » \newline alert(typeof nothing); //Affiche: « undefined » \newline Opérateurs : +, -, *, /, \% \newline var input = prompt('Entrez un texte'); \newline var six = parseInt('6');} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Boucles}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{while (condition) \newline \{ instructions; \} \newline  \newline do \newline \{ instructions; \} while (condition); \newline  \newline for (initialisation; condition; incrémentation) \newline \{ instructions; \} \newline Ordre : initialisation avant toute autre chose, condition avant chaque passage, incrémentation en fin de boucle.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{number++ renvoie number et l'incrémente et ++number incrémente number et renvoie le résultat. \newline break permet de sortir d'une boucle tandis que continue permet de passer à l'itération suivante.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Objets et Tableaux}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{var myArray = {[}'Sébastien', 'Laurent', 42{]}; \newline myArray.push('Bob'); // Ajoute à la fin \newline myArray.unshift('Bob'); // Ajoute au début \newline myArray.shift(); // Enlève au début \newline myArray.pop(); // Enlève à la fin \newline  \newline chaine.split(c); Renvoie un tableau contenant les chaines séparées par c \newline myArray.join(-); Renvoie une chaine concaténant celles de myArray intercalant des - \newline  \newline Objets littéraux : \newline var myArray = \{clé1 : value1, clé2 : value2\}; \newline alert(myArray.clé2); // Affiche value2 \newline myArray{[}'clé3'{]} = value3; ou myArray.clé3 = value3; \newline  \newline Parcours : \newline for (var id in myLArray) \{ alert(myLArray{[}id{]});\}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Les arrays ne sont pas typés.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Évènements}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{click : Cliquer (appuyer puis relâcher) sur l'élément \newline dblclick : Double-cliquer sur l'élément \newline mouseover : Faire entrer le curseur sur l'élément \newline mouseout : Faire sortir le curseur de l'élément \newline mousedown : Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément \newline mouseup : Relâcher le bouton gauche de la souris sur l'élément \newline mousemove : Faire déplacer le curseur sur l'élément \newline keydown : Appuyer (sans relâcher) sur une touche de clavier sur l'élément \newline keyup : Relâcher une touche de clavier sur l'élément \newline keypress : Frapper (appuyer puis relâcher) une touche de clavier sur l'élément \newline focus : « Cibler » l'élément \newline blur : Annuler le « ciblage » de l'élément \newline change : Changer la valeur d'un élément spécifique aux formulaires (input, checkbox, etc.) \newline select : Sélectionner le contenu d'un champ de texte (input, textarea, etc.) \newline  \newline Spécifiques à \textless{}form\textgreater{} \newline submit : Envoyer le formulaire \newline reset : Réinitialiser le formulaire \newline  \newline addEventListener() : \newline \textless{}span id="clickme"\textgreater{}Cliquez-moi !\textless{}/span\textgreater{} \newline \textless{}script\textgreater{} \newline     var element = \seqsplit{document.getElementById('clickme');} \newline     \seqsplit{element.addEventListener('click'}, function() \{ \newline         alert("Vous m'avez cliqué !"); \newline     \}, false); \newline \textless{}/script\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Bouillonnement (true) : de l'enfant vers le parent. \newline Capture (false) : du parent vers l'enfant. \newline  \newline event.clientX (resp. clientY) : position selon l'axe des X (resp. Y).}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Conditions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{==, !=, \textgreater{}, \textgreater{}=, \textless{}, \textless{}= \newline === : égalité de contenu et type \newline !== : contenu ou type différent de \newline \&\&, ||, ! \newline  \newline if (condition1) \{\} \newline else if (condition2) \{\} \newline ... \newline else \{\} \newline  \newline switch (variable) \{ \newline   case value1: ... break; \newline   case value2: ... break; \newline   ... \newline   default: \newline \} \newline  \newline  Ternaire :  \newline (condition) ? valueTrue : valueFalse;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{L'opérateur ou renvoie la première valeur évaluée à true.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Les fonctions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{function myFunction (arguments) \newline   \{ instructions; return output;\} \newline  \newline Avec arguments facultatifs : \newline function myFunction (args, argOptional) \newline \{ \newline   if (typeof argOptional === 'undefined')  \newline     \{ argOptional = value; return output; \} \newline   instructions; \newline \} \newline  \newline Fonctions anonymes : \newline function (arguments) \newline   \{ contenu \} \newline  \newline var fonction1 = function (args) \{\}; \newline fonction1(args); \newline  \newline Code isolé: \newline (function (args) \{\})();} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Manipuler le code HTML}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{var div = getElementById('myDiv'); \newline var divs = \seqsplit{getElementsByTagName('div');} \newline var query = \seqsplit{document.querySelector('\#menu} .item span'); \newline var queryAll = \seqsplit{document.querySelectorAll('\#menu} .item span'); \newline alert(query.innerHTML); \newline alert(queryAll.length); \newline  \newline var link = \seqsplit{document.getElementById('myLink');} \newline var href = \seqsplit{link.getAttribute('href');} \newline link.setAttribute('href', \seqsplit{'http://www.monsite.com');} \newline  \newline L'attribut innerText contient le texte sans le balisage pour internet explorer, c'est textContent pour les autres navigateurs. \newline  \newline var parent = child.parentNode; \newline  \newline Attributs intéressants : firstChild, lastChild, previousSibling, nextSibling (ne retournent que les éléments et pas les \#text). \newline  \newline var newLink = \seqsplit{document.createElement('a');} \newline  \newline document.getElementById('myP').appendChild(newLink); \newline  \newline var newLinkText = \seqsplit{document.createTextNode("Le} Site du Zéro"); \newline newLink.appendChild(newLinkText); \newline  \newline Méthode clondeNode(boléen) clone un noeud avec ou sans ses enfants et ses attributs. \newline  \newline Méthode replaceChild(child1, child2) remplace l'enfant 2 par l'enfant 1. \newline  \newline parentNode.removeChild(child); \newline parentNode.hasChildNodes(); \newline parent.insertBefore(toInsert, child);} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Manipuler le CSS}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\seqsplit{element.style.backgroundColor} = 'blue'; // Pour les mots avec un tiret on l'enlève et on met une majuscule \newline  \newline getComputedStyle() : \newline \textless{}script\textgreater{} \newline     var text = \seqsplit{document.getElementById('text')}, \newline         color = \seqsplit{getComputedStyle(text).color;} \newline     alert(color); \newline \textless{}/script\textgreater{} \newline  \newline Propriétés offset : \newline offsetWidth : Contient la largeur complète (width + padding + border) de l'élément. \newline offsetHeight : Contient la hauteur complète (height + padding + border) de l'élément. \newline offsetLeft : Surtout utile pour les éléments en position absolue. \newline Contient la position de l'élément par rapport au bord gauche de son élément parent. \newline offsetTop : Surtout utile pour les éléments en position absolue. \newline Contient la position de l'élément par rapport au bord supérieur de son élément parent. \newline offsetParent : Utile que pour un élément en position absolue ou relative ! \newline Contient l'objet de l'élément parent par rapport auquel est positionné l'élément actuel.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}