\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{AEAE00}
\pdfinfo{
  /Title (getting-started-with-programming-javascript.pdf)
  /Creator (Cheatography)
  /Author (AEAE00)
  /Subject (Getting Started with Programming-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}{255994}
\definecolor{LightBackground}{HTML}{F1F4F8}
\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{Getting Started with Programming-Javascript Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{AEAE00} via \textcolor{DarkBackground}{\uline{cheatography.com/30526/cs/9106/}}}
\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}AEAE00 \\
  \uline{cheatography.com/aeae00} \\
  \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 15th September, 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*}{4}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Using console.log}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{You may have noticed that the interpreter doesn't print out every single thing it does. So if we want to know what it's thinking, we sometimes have to ask it to speak to us. \newline % Row Count 4 (+ 4)
console.log() will take whatever is inside the parentheses and log it to the console below your code—that's why it's called console.log()! \newline % Row Count 7 (+ 3)
This is commonly called printing out% Row Count 8 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Comparisons}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{So far we've learned about three data types: \newline % Row Count 1 (+ 1)
strings (e.g. "dogs go woof!") \newline % Row Count 2 (+ 1)
numbers (e.g. 4, 10) \newline % Row Count 3 (+ 1)
booleans (e.g. false, 5 \textgreater{} 4) \newline % Row Count 4 (+ 1)
Now let's learn more about comparison operators. \newline % Row Count 5 (+ 1)
List of comparison operators: \newline % Row Count 6 (+ 1)
\textgreater{} Greater than \newline % Row Count 7 (+ 1)
\textless{} Less than \newline % Row Count 8 (+ 1)
\textless{}= Less than or equal to \newline % Row Count 9 (+ 1)
\textgreater{}= Greater than or equal to \newline % Row Count 10 (+ 1)
=== Equal to \newline % Row Count 11 (+ 1)
!== Not equal to% Row Count 12 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Decisions, decisions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Nice work on comparisons! Now let's see how we can use comparisons to ask yes or no questions. \newline  \newline Say we want to write a program that asks whether your name is longer than 7 letters. If the answer is yes, we can respond with "You have a long name!" We can do this with an if statement: \newline  \newline if( "myName".length \textgreater{}= 7 ) \{ \newline     console.log("You have a long name!"); \newline \} \newline An if statement is made up of the if keyword, a condition like we've seen before, and a pair of curly braces \{ \}. If the answer to the condition is yes, the code inside the curly braces will run.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Computers are smart}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Great! We used an if statement to do something if the answer to the condition was yes, or true as we say in JavaScript. \newline  \newline In addition to doing something when the condition is true, we can do something else if the condition is false. For example, if your name is shorter than 7 letters, we can respond with "You have a short name!" We can do this using an if / else statement: \newline =========================================== \newline if( "myName".length \textgreater{}= 7 ) \{ \newline     console.log("You have a long name!"); \newline \} \newline else \{ \newline     console.log("You have a short name!");   \newline \} \newline =========================================== \newline Just like before, if the condition is true, then only the code inside the first pair of curly braces will run. Otherwise, the condition is false, so only the code inside the second pair of curly braces after the else keyword will run. \newline  \newline In the example above the condition "myName".length \textgreater{}= 7 evaluates to false since "myName" only has 6 letters. Since the condition is false, only the code inside the curly braces after the else keyword runs, and prints out You have a short name!.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Mid-lesson breather}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{1. Confirm and prompt \newline  \newline We can make pop-up boxes appear!  \newline confirm("I am ok"); \newline prompt("Are you ok?"); \newline  \newline 2. Data types \newline  \newline a. numbers (e.g. 4.3, 134) \newline  \newline b. strings (e.g. "dogs go woof!", "JavaScript expert") \newline  \newline c. booleans (e.g. false, 5 \textgreater{} 4) \newline  \newline 3. Conditionals \newline  \newline If the first condition is met, execute the first code block. If it is not met, execute the code in the else block. See the code on the right for another example.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Math and the modulo}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{Let's meet an interesting symbol called modulo. When \% is placed between two numbers, the computer will divide the first number by the second, and then return the remainder of that division. \newline % Row Count 4 (+ 4)
So if we do 23 \% 10, we divide 23 by 10 which equals 2 with 3 left over. So 23 \% 10 evaluates to 3.% Row Count 6 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Substrings}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{Sometimes you don't want to display the entire string, just a part of it. For example, in your Gmail inbox, you can set it to display the first 50 or so characters of each message so you can preview them. This preview is a substring of the original string (the entire message). \newline % Row Count 6 (+ 6)
Code: \newline % Row Count 7 (+ 1)
`"some word".substring(x, y)` where x is where you start chopping and y is where you finish chopping the original string. \newline % Row Count 10 (+ 3)
The number part is a little strange. To select for the "he" in "hello", you would write this: \newline % Row Count 12 (+ 2)
`"hello". substring(0, 2);` \newline % Row Count 13 (+ 1)
Each character in a string is numbered starting from 0, like this: \newline % Row Count 15 (+ 2)
` \newline % Row Count 16 (+ 1)
0 1 2 3 4 \newline % Row Count 17 (+ 1)
 | | | | |  \newline % Row Count 18 (+ 1)
 h e l l o` \newline % Row Count 19 (+ 1)
The letter h is in position 0, the letter e is in position 1, and so on. \newline % Row Count 21 (+ 2)
Therefore if you start at position 0, and slice right up till position 2, you are left with just he \newline % Row Count 23 (+ 2)
{\bf{More examples:}} \newline % Row Count 24 (+ 1)
1. First 3 letters of "Batman"	 \newline % Row Count 25 (+ 1)
`"Batman".substring(0,3);` \newline % Row Count 26 (+ 1)
2. From 4th to 6th letter of "laptop" \newline % Row Count 27 (+ 1)
`"laptop".substring(3,6);`% Row Count 28 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{{\bf{Variables}}}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{Variables \newline % Row Count 1 (+ 1)
We have learned how to do a few things now: make strings, find the length of strings, find what character is in the nth position, do basic math. Not bad for a day's work! \newline % Row Count 5 (+ 4)
To do more complex coding, we need a way to 'save' the values from our coding. We do this by defining a variable with a specific, case-sensitive name. Once you create (or declare) a variable as having a particular name, you can then call up that value by typing the variable name. \newline % Row Count 11 (+ 6)
Code: \newline % Row Count 12 (+ 1)
`var varName = data;` \newline % Row Count 13 (+ 1)
Example: \newline % Row Count 14 (+ 1)
a. `var myName = "Leng";` \newline % Row Count 15 (+ 1)
b. `var myAge = 30;` \newline % Row Count 16 (+ 1)
c. `var isOdd = true;`% Row Count 17 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{More Variable Practice}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{We have seen how to create a variable. But how do we use it? It is useful to think that any time you type the variable's name, you are asking the computer to swap out the variable name and swap in the value of the variable. \newline % Row Count 5 (+ 5)
For example: \newline % Row Count 6 (+ 1)
`var myName = "Steve Jobs";` \newline % Row Count 7 (+ 1)
`myName.substring(0,5)` \newline % Row Count 8 (+ 1)
Look at the second line above. You have asked the computer to swap out `myName` and swap in Steve Jobs, so \newline % Row Count 11 (+ 3)
`myName.substring(0,5)` \newline % Row Count 12 (+ 1)
becomes \newline % Row Count 13 (+ 1)
`"Steve Jobs".substring(0,5)` \newline % Row Count 14 (+ 1)
which evaluates to Steve. \newline % Row Count 15 (+ 1)
Another example \newline % Row Count 16 (+ 1)
`var myAge = 120;` \newline % Row Count 17 (+ 1)
What is \newline % Row Count 18 (+ 1)
`myAge \% 12 `?  \newline % Row Count 19 (+ 1)
So the variable stores the value of the variable, whether that is a number or a string. As you will see soon, this makes writing long programs much easier!% Row Count 23 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Conclusion: Part 1}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{3.833cm}}{Let's do a quick review! \newline % Row Count 1 (+ 1)
{\bf{Data types}} \newline % Row Count 2 (+ 1)
strings (e.g. "dogs go woof!") \newline % Row Count 3 (+ 1)
numbers (e.g. 4, 10) \newline % Row Count 4 (+ 1)
booleans (e.g. false, 5 \textgreater{} 4) \newline % Row Count 5 (+ 1)
{\bf{Variables}} \newline % Row Count 6 (+ 1)
We store data values in variables. We can bring back the values of these variables by typing the variable name. \newline % Row Count 9 (+ 3)
{\bf{Manipulating numbers \& strings}} \newline % Row Count 10 (+ 1)
comparisons (e.g. \textgreater{}, \textless{}=) \newline % Row Count 11 (+ 1)
modulo (e.g. \%) \newline % Row Count 12 (+ 1)
string length (e.g. "Emily".length;) \newline % Row Count 13 (+ 1)
substrings (e.g. "hi".substring(0, 1);) \newline % Row Count 14 (+ 1)
{\bf{console.log( ) }} \newline % Row Count 15 (+ 1)
Prints into the console whatever we put in the parentheses.% Row Count 17 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}