\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 (dwcc.pdf)
  /Creator (Cheatography)
  /Author (Sara (lasago))
  /Subject (DWCC 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}{8FB8BD}
\definecolor{LightBackground}{HTML}{F1F6F6}
\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{DWCC Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Sara (lasago)} via \textcolor{DarkBackground}{\uline{cheatography.com/70899/cs/17980/}}}
\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 21st May, 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}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Vincular JS y HTML}}  \tn
% Row 0
\SetRowColor{LightBackground}
Archivo externo & `\textless{}script \seqsplit{type="text/javascript"} src="Codigo2.js"\textgreater{}\textless{}/script\textgreater{}` \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
En el mismo archivo, dentro de body o head & `\textless{}script type="text/javascript"\textgreater{}\textless{}/script\textgreater{}` \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
El código javascript puede estar insertado en atributos de etiquetas HTML. & \textless{}p \seqsplit{onclick="alert('Insertando} javascript si haces click aquick')"\textgreater{} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
Inserción en código HTML & \textless{}script type="text/javascript"\textgreater{} // Código javascript \textless{}/script\textgreater{} \tn 
% Row Count 14 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{9.1531 cm} x{8.1169 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Depuración de errores}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Click der. en navegador, Inspeccionar elemento, Console o Sources} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Dentro de concidionales, bucles, otras instrucciones... & \seqsplit{alert(variableConValor);} \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
 & \seqsplit{console.log("instrucción"}, texto); \tn 
% Row Count 7 (+ 2)
\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}{Sentencias de control}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Switch Case 	 switch(nota)\{ case 1: case 2: alert("Muy deficiente"); break; case 3: alert("Insuficiente"); break;\}} \tn 
% Row Count 3 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{10.5347 cm} x{6.7353 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Print}}  \tn
% Row 0
\SetRowColor{LightBackground}
Ventana de alerta & alert(" "); \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{6.7353 cm} x{10.5347 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Funciones de cadena}}  \tn
% Row 0
\SetRowColor{LightBackground}
Reemplazar carácteres & cadena = cadena.replace(/,/g, ''); \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{10.7074 cm} x{6.5626 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Funciones de array}}  \tn
% Row 0
\SetRowColor{LightBackground}
Dar la vuelta a los elementos del array & array = \seqsplit{array.reverse();} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Convertir elementos del array en una cadena & array = array.join(); \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{10.0166 cm} x{7.2534 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Objetos}}  \tn
% Row 0
\SetRowColor{LightBackground}
var objeto\_mio = new Object(); & Creaci'on de un objeto \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{var animal1 = Object.create(Animal);} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{objeto\_mio.propiedadtal;} objeto\_mio.metodocual( {[}parámetros o no{]} ); & Acceso a propiedad del objeto \tn 
% Row Count 6 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{tragaperras{[}'saldo'{]} = 10;} \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{tragaperras = \{'saldo': '10, 'puntos' : 1\}} \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
var myObj = \{   myMethod: function(params) \{     // ...do something   \} & Métodos de objeto \tn 
% Row Count 12 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{myOtherMethod(params) \{     // ...do something else   \}} \tn 
% Row Count 14 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{object.methodname(params);} & Llamar al método de objeto \tn 
% Row Count 16 (+ 2)
\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}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Clase Date}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Las fechas se indexan a 0!} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
var miFecha = new Date() & Creación de objeto Date con la fecha por defecto (la actual) \tn 
% Row Count 5 (+ 4)
% Row 2
\SetRowColor{LightBackground}
miFecha = new Date(año,mes,dia,hora,minutos,segundos, milisegundos) & Creación de fecha date con instancia por parámetro \tn 
% Row Count 9 (+ 4)
% Row 3
\SetRowColor{white}
 & {\emph{los parámetros son siempre numéricos}} \tn 
% Row Count 11 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos get}}} \tn 
% Row Count 12 (+ 1)
% Row 5
\SetRowColor{white}
f.getDate(); & Devuelve el día del mes. Número entre 1 y 31. \tn 
% Row Count 15 (+ 3)
% Row 6
\SetRowColor{LightBackground}
getDay() & Devuelve el día de la semana. Entre 0 (domingo) y 6 (sábado) \tn 
% Row Count 19 (+ 4)
% Row 7
\SetRowColor{white}
getFullYear() & Retorna el año con  4 dígitos. \tn 
% Row Count 21 (+ 2)
% Row 8
\SetRowColor{LightBackground}
getHours() & Retorna la hora. Entre 0 y 23. \tn 
% Row Count 23 (+ 2)
% Row 9
\SetRowColor{white}
getMilliseconds() & Devuelve los milisegundos entre O y 9999 \tn 
% Row Count 26 (+ 3)
% Row 10
\SetRowColor{LightBackground}
getMinutes() & Devuelve los minutos. Entre 0 y 59. \tn 
% Row Count 28 (+ 2)
% Row 11
\SetRowColor{white}
getMonth() & Devuelve el mes. Entre 0 (enero) y 11 (diciembre) \tn 
% Row Count 31 (+ 3)
\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}{Clase Date (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
getSeconds() & Devuelve los segundos. Entre 0 y 59. \tn 
% Row Count 2 (+ 2)
% Row 13
\SetRowColor{white}
getTime() & Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto al que se le pasa el mensaje. \tn 
% Row Count 9 (+ 7)
% Row 14
\SetRowColor{LightBackground}
var unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT'); & Analiza una fecha y devuelve el número de milisegundos pasados desde el 1 de enero de 1970 hasta la fecha analizada \tn 
% Row Count 15 (+ 6)
% Row 15
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos set}}} \tn 
% Row Count 16 (+ 1)
% Row 16
\SetRowColor{LightBackground}
var event = new Date('August 19, 1975 23:15:30');  event.setDate(24); & Actualiza el día del mes. \tn 
% Row Count 20 (+ 4)
% Row 17
\SetRowColor{white}
 & ` f.setDate(  f.getDate() + 1 ) ;` \tn 
% Row Count 22 (+ 2)
% Row 18
\SetRowColor{LightBackground}
setFullYear() & Cambia el año de la fecha al número que recibe por parámetro. \tn 
% Row Count 26 (+ 4)
% Row 19
\SetRowColor{white}
setHours() & Actualiza la hora 0-24 \tn 
% Row Count 28 (+ 2)
% Row 20
\SetRowColor{LightBackground}
setMilliseconds() & Establece el valor de los milisegundos. \tn 
% Row Count 30 (+ 2)
\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}{Clase Date (cont)}}  \tn
% Row 21
\SetRowColor{LightBackground}
setMinutes() & Cambia los minutos. \tn 
% Row Count 1 (+ 1)
% Row 22
\SetRowColor{white}
setMonth() & Cambia el mes (el mes empieza por 0). \tn 
% Row Count 3 (+ 2)
% Row 23
\SetRowColor{LightBackground}
setSeconds() & Cambia los segundos. \tn 
% Row Count 4 (+ 1)
% Row 24
\SetRowColor{white}
var event1 = new Date('July 1, 1999'); var event2 = new Date(); \seqsplit{event2.setTime(event1.getTime());} & Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de enero de 1970. \tn 
% Row Count 9 (+ 5)
% Row 25
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Otros}}} \tn 
% Row Count 10 (+ 1)
% Row 26
\SetRowColor{white}
toDateString() & Convierte la fecha del objeto Date en una cadena de caracteres. \tn 
% Row Count 14 (+ 4)
% Row 27
\SetRowColor{LightBackground}
toTimeString() & Convierte la parte de tiempo de un objeto Date en una cadena \tn 
% Row Count 17 (+ 3)
\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}{Clase Math}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{-Math no es un constructor. No se usa como método para objetos ya creados.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Funciones}}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{PI} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
E & constante de Euler \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
return Math.abs(a - b); \seqsplit{console.log(difference(3}, 5)); // expected output: 2 & El valor absoluto de un número \tn 
% Row Count 10 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{console.log(Math.ceil(.95));} // expected output: 1 & Devuelve el número entero superior. \tn 
% Row Count 13 (+ 3)
% Row 7
\SetRowColor{white}
\seqsplit{console.log(Math.round(0.9));} // expected output: 1 & Redondea al número más próximo \tn 
% Row Count 16 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{console.log(Math.exp(0));} // expected output: 1 & Devuelve el exponencial \tn 
% Row Count 19 (+ 3)
% Row 9
\SetRowColor{white}
{\bf{floor()}} & Devuelve el número entero inferior. \tn 
% Row Count 21 (+ 2)
% Row 10
\SetRowColor{LightBackground}
log() & Devuelve el logaritmo natural. \tn 
% Row Count 23 (+ 2)
% Row 11
\SetRowColor{white}
{\bf{Math.max({[}value1{[}, value2{[}, ...{]}{]}{]})}} & Devuelve el número máximo entre los números pasados como argumento. \tn 
% Row Count 27 (+ 4)
% Row 12
\SetRowColor{LightBackground}
{\bf{min()}} & Devuelve el número mínimo entre los números pasados como argumento. \tn 
% Row Count 31 (+ 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}{Clase Math (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
Math.pow(base, exponent) & Devuelve el resultado de un número elevado a una potencia pasada como argumento \tn 
% Row Count 4 (+ 4)
% Row 14
\SetRowColor{white}
function getRandomInt(max) \{   return Math.floor({\bf{Math.random()}} * Math.floor(max)); \} & Devuelve un número aleatorio entre O y 1.   O \textless{}= x \textless{} 1 \tn 
% Row Count 9 (+ 5)
% Row 15
\SetRowColor{LightBackground}
sqrt () & Devuelve la raíz cuadrada. \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{6.7353 cm} x{10.5347 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Objeto Number}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{b = new Number(valor);} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{-Si no pasamos algún valor al constructor, la variable se inicializará con el valor 0.} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Propiedades}}} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{MAX\_VALUE Devuelve el mayor número posible en JavaScript.\{\{nl\}\} MIN\_VALUE Devuelve el menor número posible en JavaScript. \{\{nl\}\}NaN Representa el valor especial Not a Number \{\{nl\}\}NEGATIVE\_INFINITY Representa el infinito negativo \{\{nl\}\}POSITIVE INFINITY Representa el infinito positivo.} \tn 
% Row Count 10 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 11 (+ 1)
% Row 5
\SetRowColor{white}
n = \seqsplit{toExponential(num)} & Notación científica (1.3) \tn 
% Row Count 13 (+ 2)
% Row 6
\SetRowColor{LightBackground}
n = num.toFixed(2) & destinar una cantidad fija de dígitos para la parte entera y otra para la parte fraccionaria, el número representa la fraccionaria \tn 
% Row Count 19 (+ 6)
% Row 7
\SetRowColor{white}
{\bf{n = num.toPrecision(3)}} & marca la longitud fija del número (12.354 =\textgreater{} 12.3) \tn 
% Row Count 22 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.9442 cm} x{9.3258 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{String}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Propiedades}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
length & la longitud de la cadena \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
charAt( num ) & Permite acceder a un carácter en concreto de una cadena \tn 
% Row Count 7 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{paragraph.indexOf(searchTerm);} & Devuelve la posición de la primera ocurrencia del carácter pasado como parámetro. \tn 
% Row Count 11 (+ 4)
% Row 5
\SetRowColor{white}
lastlndexOf( string ) & Devuelve la posición de la última ocurrencia del carácter (string) pasado como parámetro \tn 
% Row Count 16 (+ 5)
% Row 6
\SetRowColor{LightBackground}
match( cadena\_o\_e xpr ) & Busca una coincidencia en una cadena y devuelve todas las coincidencias encontradas \tn 
% Row Count 20 (+ 4)
% Row 7
\SetRowColor{white}
replace( cadena\_o\_e xpr) & Busca una coincidencia en una cadena y si existe, la remplaza por otra cadena pasada como parámetro. \tn 
% Row Count 25 (+ 5)
% Row 8
\SetRowColor{LightBackground}
search( cadena\_o\_e xpr ) & Busca una coincidencia en una cadena y devuelve la posición de la coincidencia. \tn 
% Row Count 29 (+ 4)
% Row 9
\SetRowColor{white}
str.slice(beginIndex{[}, endIndex{]}) & extrae una sección de una cadena y devuelve una cadena nueva.`resultado = resultado.slice(0, -1);` \tn 
% Row Count 34 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.9442 cm} x{9.3258 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{String (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
cadena.split({[}separador{]}{[},limite{]}) & Convierte un objeto String en un array de cadenas mediante un separador \tn 
% Row Count 4 (+ 4)
% Row 11
\SetRowColor{white}
str.substr( inicio, longitud) & Devuelve una subcadena en base a un índice y longitud pasados como parámetros. \tn 
% Row Count 8 (+ 4)
% Row 12
\SetRowColor{LightBackground}
\seqsplit{str.substring(inicio}, fin ) & returns the part of the string between the start and end indexes, or to the end of the string. \tn 
% Row Count 13 (+ 5)
% Row 13
\SetRowColor{white}
str.toLowerCase( ) & Devuelve la cadena en minúsculas. No la cambia. \tn 
% Row Count 16 (+ 3)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{toUpperCase()} \tn 
% Row Count 17 (+ 1)
\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}{Objeto Window}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{`La interfaz Document representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página. El DOM incluye elementos como \textless{}body\textgreater{} y \textless{}table\textgreater{}.El objeto window representa la ventana que contiene un documento DOM. ; la propiedad document apunta al DOM document cargado en esa ventana. `} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{` Se crea un objeto de este tipo para cada ventana que pueda ser lanzada desde una página Web. Se considera un objeto implícito, ya que no es necesario nombrarlo para acceder a los objetos que se encuentran bajo su nivel de jerarquía.`} \tn 
% Row Count 12 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{propiedades}}} \tn 
% Row Count 13 (+ 1)
% Row 3
\SetRowColor{white}
closed & Indica si una ventana está cerrada o no. Booleano \tn 
% Row Count 16 (+ 3)
% Row 4
\SetRowColor{LightBackground}
defaultStatus & Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. \tn 
% Row Count 22 (+ 6)
% Row 5
\SetRowColor{white}
{\bf{document}} & Documento actual de la ventana. \tn 
% Row Count 24 (+ 2)
% Row 6
\SetRowColor{LightBackground}
{\bf{history}} & array que representa las URLS visitadas por la ventana \tn 
% Row Count 27 (+ 3)
% Row 7
\SetRowColor{white}
innerHeight & la altura utilizable de la ventana. \tn 
% Row Count 29 (+ 2)
% Row 8
\SetRowColor{LightBackground}
innerWidth & al ancho utilizable de la ventana \tn 
% Row Count 31 (+ 2)
\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}{Objeto Window (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
length & cuántos frames tiene la ventana actual. \tn 
% Row Count 3 (+ 3)
% Row 10
\SetRowColor{white}
{\bf{location}} = \seqsplit{'http://www.example.com'} & retorna un objeto Location con información acerca de la ubicación actual del documento. \tn 
% Row Count 8 (+ 5)
% Row 11
\SetRowColor{LightBackground}
locationbar & Objeto barra de direcciones de la ventana \tn 
% Row Count 11 (+ 3)
% Row 12
\SetRowColor{white}
menubar & Objeto barra de menús de la ventana. \tn 
% Row Count 13 (+ 2)
% Row 13
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{name} \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{white}
{\bf{opener}} & Hace referencia a la ventana de navegador que abrió la ventana donde estamos trabajando. \tn 
% Row Count 19 (+ 5)
% Row 15
\SetRowColor{LightBackground}
outerHeight & Tamaño en pixels del espacio de toda la ventana, en vertical. Esto incluye las barras de desplazamiento, botones, etc. \tn 
% Row Count 25 (+ 6)
% Row 16
\SetRowColor{white}
outerWidth & Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto incluye las barras de desplazamiento. \tn 
% Row Count 31 (+ 6)
\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}{Objeto Window (cont)}}  \tn
% Row 17
\SetRowColor{LightBackground}
pageXoffset & Corresponde a la posición horizontal de la ventana \tn 
% Row Count 3 (+ 3)
% Row 18
\SetRowColor{white}
pageYoffset & Corresponde a la posición vertical de la ventana \tn 
% Row Count 6 (+ 3)
% Row 19
\SetRowColor{LightBackground}
parent & referencia al parent de al ventana actual \tn 
% Row Count 9 (+ 3)
% Row 20
\SetRowColor{white}
self & Corresponde a la ventana actual. \tn 
% Row Count 11 (+ 2)
% Row 21
\SetRowColor{LightBackground}
status & String con el mensaje que tiene la barra de estado. \tn 
% Row Count 14 (+ 3)
% Row 22
\SetRowColor{white}
top & Corresponde a la ventana de nivel superio \tn 
% Row Count 17 (+ 3)
% Row 23
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 18 (+ 1)
% Row 24
\SetRowColor{white}
alert () & Cuadro de diálogo \tn 
% Row Count 19 (+ 1)
% Row 25
\SetRowColor{LightBackground}
back() & Regresa a  la página anterior según el historial. \tn 
% Row Count 22 (+ 3)
% Row 26
\SetRowColor{white}
blur() & Elimina el foco del objeto window actual. \tn 
% Row Count 25 (+ 3)
% Row 27
\SetRowColor{LightBackground}
close() & Cierra una página \tn 
% Row Count 26 (+ 1)
% Row 28
\SetRowColor{white}
confirm() & Cuadro diálogo con botones aceptar y cancelar. \tn 
% Row Count 29 (+ 3)
% Row 29
\SetRowColor{LightBackground}
find() & Busca texto en una página. \tn 
% Row Count 31 (+ 2)
\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}{Objeto Window (cont)}}  \tn
% Row 30
\SetRowColor{LightBackground}
focus() & Pide traer la ventana al frente \tn 
% Row Count 2 (+ 2)
% Row 31
\SetRowColor{white}
forward() & Avanza una página. \tn 
% Row Count 3 (+ 1)
% Row 32
\SetRowColor{LightBackground}
home() & Mueve la ventana activa. \tn 
% Row Count 5 (+ 2)
% Row 33
\SetRowColor{white}
var ventanaNueva = window.open(); \seqsplit{ventanaNueva.document.write} & Abre una nueva ventana. \tn 
% Row Count 9 (+ 4)
% Row 34
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{print()} \tn 
% Row Count 10 (+ 1)
% Row 35
\SetRowColor{white}
prompt() & Genera un cuadro de diálogo con un cuadro de texto para que el usuario introduzca valores. \tn 
% Row Count 15 (+ 5)
% Row 36
\SetRowColor{LightBackground}
\seqsplit{window.resizeTo(aWidth}, aHeight) & Modifica el tamaño de una ventana. \tn 
% Row Count 17 (+ 2)
% Row 37
\SetRowColor{white}
setInterval() & Evalúa una expresión cada cierto tiempo. \tn 
% Row Count 20 (+ 3)
% Row 38
\SetRowColor{LightBackground}
setTimeOut(aviso() , 5000) & Evalúa una expresión después de un tiempo especificado. \tn 
% Row Count 23 (+ 3)
% Row 39
\SetRowColor{white}
\seqsplit{window.scrollBy(x-coord}, y-coord); & Mueve el contenido de una ventana en función de una cantidad especificada en píxeles. \tn 
% Row Count 28 (+ 5)
% Row 40
\SetRowColor{LightBackground}
\seqsplit{window.scrollTo(x-coord}, y-coord) & Mueve el contenido de una ventana especificando una nueva posición de la esquina superior izquierda. \tn 
% Row Count 34 (+ 6)
\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}{Objeto Window (cont)}}  \tn
% Row 41
\SetRowColor{LightBackground}
stop() & Detiene una página. \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.5988 cm} x{9.6712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Document}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Con este objeto es posible manipular las propiedades y contenido de los elementos principales de las páginas web. Este objeto cuenta con una serie de subobjetos como son puntos de anclaje, imágenes, vínculos o formularios} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Propiedades}}} \tn 
% Row Count 6 (+ 1)
% Row 2
\SetRowColor{LightBackground}
alinkColor & Devuelve o define el color que tendrán los vínculos activos en el cuerpo \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
anchors & Devuelve una lista de todas las anclas (anchors) del documento. \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
document.bgColor = "darkblue"; & da/define el color de fondo (bgColor) del documento actual. \tn 
% Row Count 16 (+ 3)
% Row 5
\SetRowColor{white}
cookie & cadena con los valores de las cookies del documento actual \tn 
% Row Count 19 (+ 3)
% Row 6
\SetRowColor{LightBackground}
domain & Guarda el nombre del servidor que ha servido el documento \tn 
% Row Count 22 (+ 3)
% Row 7
\SetRowColor{white}
fgColor & da/define el color del documento actual o de su texto \tn 
% Row Count 25 (+ 3)
% Row 8
\SetRowColor{LightBackground}
forms & un array con todos los formularios del documento \tn 
% Row Count 28 (+ 3)
% Row 9
\SetRowColor{white}
images & Array con todas las imágenes del documento (etiqueta \textless{}images\textgreater{}) \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.5988 cm} x{9.6712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Document (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
lastModified & una cadena con la fecha de la última modificación del documento \tn 
% Row Count 3 (+ 3)
% Row 11
\SetRowColor{white}
links & array con los enlaces externos (etiqueta \textless{}a   ref\textgreater{}) \tn 
% Row Count 6 (+ 3)
% Row 12
\SetRowColor{LightBackground}
referrer & Cadena con la URL del documento que llamó al actual, en caso de usar un enlace. \tn 
% Row Count 10 (+ 4)
% Row 13
\SetRowColor{white}
URL & Cadena con la dirección del documento \tn 
% Row Count 12 (+ 2)
% Row 14
\SetRowColor{LightBackground}
vlinkColor & Propiedad en la que se guarda el color en formato RGB de los enlaces visitados. \tn 
% Row Count 16 (+ 4)
% Row 15
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 17 (+ 1)
% Row 16
\SetRowColor{LightBackground}
\seqsplit{window.captureEvents(eventType)} & capturar los eventos que ocurran en la página web. Recibe como parámetro el evento que se desea capturar. \tn 
% Row Count 22 (+ 5)
% Row 17
\SetRowColor{white}
document.close() & cierra el flujo de escritura de un documento \tn 
% Row Count 24 (+ 2)
% Row 18
\SetRowColor{LightBackground}
getSelection () & Devuelve un string que contiene el texto que se ha seleccionado \tn 
% Row Count 27 (+ 3)
% Row 19
\SetRowColor{white}
handleEvent() & Activa  el manejador  del evento especificado. \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.5988 cm} x{9.6712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Document (cont)}}  \tn
% Row 20
\SetRowColor{LightBackground}
home() & Carga  la  página de inicio. \tn 
% Row Count 2 (+ 2)
% Row 21
\SetRowColor{white}
open() & Abre el flujo del documento \tn 
% Row Count 4 (+ 2)
% Row 22
\SetRowColor{LightBackground}
releaseEvents() & Libera  los eventos que  han sido interceptados \tn 
% Row Count 7 (+ 3)
% Row 23
\SetRowColor{white}
routeEvents () & Intercepta  un evento  y  lo pasa a lo largo de la jerarquía  del objeto  que  lo lanzó. \tn 
% Row Count 12 (+ 5)
% Row 24
\SetRowColor{LightBackground}
write() & Escribe datos en el documento. \tn 
% Row Count 14 (+ 2)
% Row 25
\SetRowColor{white}
writeln () & Escribe datos además de un salto de  línea  en el  documento. \tn 
% Row Count 17 (+ 3)
% Row 26
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{document.title} \tn 
% Row Count 18 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{3.1086 cm} x{14.1614 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{History}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{current} & la cadena que contiene  la URL de  la entrada actual del historial \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
length & número  de páginas que han sido visitadas. \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
next & la cadena que contiene  la siguiente entrada  del  historial. \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{previous} & la cadena que contiene  la anterior entrada  del  historial \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
back( ) & Carga  la URL del documento anterior  del  historial. \tn 
% Row Count 11 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{forward()} & Carga  la URL del  documento siguiente  del  historial \tn 
% Row Count 13 (+ 2)
% Row 6
\SetRowColor{LightBackground}
go() & Carga  la URL del  documento especificado por el índice que  pasamos como parámetro dentro del historial. \tn 
% Row Count 17 (+ 4)
\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}{Objeto Location}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Su finalidad principal es, por una parte, modificar el objeto location para cambiar a una nueva URL, y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Propiedades}}} \tn 
% Row Count 6 (+ 1)
% Row 2
\SetRowColor{LightBackground}
hash & la cadena que  representa  el  anclaje  de  la URL. Es decir, la  parte de la URL que va después de  la etiqueta  \#. \tn 
% Row Count 12 (+ 6)
% Row 3
\SetRowColor{white}
host & Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL. \tn 
% Row Count 17 (+ 5)
% Row 4
\SetRowColor{LightBackground}
hostname & el nombre de dominio del servidor (o la dirección IP), dentro de la URL. \tn 
% Row Count 21 (+ 4)
% Row 5
\SetRowColor{white}
href & la  URL completa. \tn 
% Row Count 22 (+ 1)
% Row 6
\SetRowColor{LightBackground}
pathname & Cadena que contiene el camino al recurso, dentro de la URL. \tn 
% Row Count 25 (+ 3)
% Row 7
\SetRowColor{white}
port & Cadena que contiene el número de puerto del servidor, dentro de la URL. \tn 
% Row Count 29 (+ 4)
% Row 8
\SetRowColor{LightBackground}
protocol & Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL. \tn 
% Row Count 34 (+ 5)
\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}{Objeto Location (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
search & Cadena que contiene la información pasada en una llamada a un script, dentro de la URL. \tn 
% Row Count 5 (+ 5)
% Row 10
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 6 (+ 1)
% Row 11
\SetRowColor{LightBackground}
\seqsplit{location.assign("http://www.ejemplo.com");}  // Equivalente a location.href = \seqsplit{"http://www.ejemplo.com"} & Carga un nuevo documento. \tn 
% Row Count 12 (+ 6)
% Row 12
\SetRowColor{white}
// Método reload() \seqsplit{location.reload(true);} /{\emph{ Recarga la página. Si el argumento es true, se carga la página desde el servidor.   Si es false, se carga desde la cache del navegador }}/ & Carga de nuevo el documento actual. \tn 
% Row Count 22 (+ 10)
% Row 13
\SetRowColor{LightBackground}
\seqsplit{location.replace("http://www.ejemplo.com");} // Similar a assign(), salvo que se borra la página actual del array history del navegador & Sustituye la URL del documento actual por otra URL. \tn 
% Row Count 29 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.4261 cm} x{9.8439 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Gestión de ventanas}}  \tn
% Row 0
\SetRowColor{LightBackground}
Abrir y cerrar nuevas ventanas & \textless{}a href="mipagina.html" target="\_blank"\textgreater{} \{\{nl\}\} window.open(URL, nombre\_ventana, \seqsplit{parametros\_configuracion} , historia ) \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
window.close() & se cierra la ventana. \tn 
% Row Count 7 (+ 1)
% Row 2
\SetRowColor{LightBackground}
 & ``var ventana = window.open("","","width=300, height=200");` \tn 
% Row Count 10 (+ 3)
% Row 3
\SetRowColor{white}
Apariencia & \seqsplit{directories=yes|no|1|0} Obsoleto. IE only fullscreen=yes|no|1|0 Modo pantalla completa. Valor por defecto es no. IE solo. height=pixels Altura de la ventana. Min. valor es 100 left=pixels Posición izquierda de la ventana. Números negativos no permitidos. location=yes|no|1|0 Campo de direcciones si o no. Opera solo. menubar=yes|no|1|0 Barra de menú si o no. resizable=yes|no|1|0 Si se puede modificar tamaño de la ventana.  IE solo. scrollbars=yes|no|1|0 Barras de desplazamiento si o no. IE, Firefox \& Opera solo status=yes|no|1|0 Barra de estado. titlebar=yes|no|1|0 Barra de título. toolbar=yes|no|1|0 Barra de herramientas. top=pixels Posicion superior de la ventana. \tn 
% Row Count 41 (+ 31)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.4261 cm} x{9.8439 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Gestión de ventanas (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
Comunicación & De la ventana secundaria a la principal.\{\{nl\}\}La propiedad opener del objeto window hace referencia a la ventana principal.\{\{nl\}\}opener.document.bgColor = "red" ; \tn 
% Row Count 8 (+ 8)
\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}{Funciones predefinidas del lenguaje}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{if (isFinite(1000 / x))} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
eval('2 + 2') & Convierte una cadena que pasamos como argumento en código JavaScript ejecutable. \tn 
% Row Count 6 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{IsNaN ()} \tn 
% Row Count 7 (+ 1)
% Row 3
\SetRowColor{white}
Number () & Convierte el objeto pasado como argumento en un número que represente el valor de dicho objeto \tn 
% Row Count 12 (+ 5)
% Row 4
\SetRowColor{LightBackground}
String() & Convierte el objeto pasado como argumento en una cadena que represente el valor de dicho objeto. \tn 
% Row Count 17 (+ 5)
% Row 5
\SetRowColor{white}
parselnt() & Convierte la cadena que pasamos como argumento en un valor numérico de tipo entero. \tn 
% Row Count 22 (+ 5)
% Row 6
\SetRowColor{LightBackground}
parseFloat() & Convierte la cadena que pasamos como argumento en un valor numérico de tipo flotante. \tn 
% Row Count 27 (+ 5)
% Row 7
\SetRowColor{white}
if (typeof this{[}i{]} === 'string') \{         this{[}i{]} = this{[}i{]}.toUpperCase();       \} & Comprobar que variable sea de algún valor \tn 
% Row Count 32 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.5988 cm} x{9.6712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Funciones definidas por el usuario}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{function nombre( {[}parametros{]} ) \{ \seqsplit{grupo\_de\_instrucciones;} {[} return valor; {]} \}\{\{nl\}\}Los valores se pueden definir a la hora de crear la función\{\{nl\}\}function numeroAleatorio( min = 1, max = 100 )\{  	var valorAleatorio = Math.floor( Math.random() * (max - min) + min); 	 	return valorAleatorio; \}} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{- Los argumentos son un array }} : arguments.length, arguments{[}1{]}} \tn 
% Row Count 8 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{- Los parámetros se pueden pasar a las funciones de dos formas : por valor o por referencia. No se peude modificar el argumento dentro de la función, pero sí los objetos.} \tn 
% Row Count 12 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{- El array se considera un objeto} \tn 
% Row Count 13 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{\bf{typeof}} & devuelve el tipo \tn 
% Row Count 14 (+ 1)
% Row 5
\SetRowColor{white}
-Una función puede ser anónima & var cuadrado = function(number) \{return number * number\}; \tn 
% Row Count 17 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{-Es mejor definir un grupo de funciones en el head para poder asegurar su uso en el body} \tn 
% Row Count 19 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{-Poner var para hacer variables locales} \tn 
% Row Count 20 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{-No usar var para usar/modificar valores de las globales} \tn 
% Row Count 22 (+ 2)
\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}{Arrays}}  \tn
% Row 0
\SetRowColor{LightBackground}
Declaración & var nombre\_del\_array = new Array();\{\{nl\}\}var nombreArr = {[}{]}; \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
 & var nombre\_array = new Array(10); \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
 & var lista\_productos = new Array('Pan', 'Agua', 'Lentejas'); \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
Inicialización & nombre\_del\_array{[} i {]} = "valor"; \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
 & lista\_productos{[}0{]} = "pan"; \tn 
% Row Count 12 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Propiedades}}} \tn 
% Row Count 13 (+ 1)
% Row 6
\SetRowColor{LightBackground}
length & Longitud, se puede modificar \tn 
% Row Count 15 (+ 2)
% Row 7
\SetRowColor{white}
{\bf{prototype}} & Sirve para agregar nuevas propiedades y métodos al objeto array. Las instancias Array heredan de Array.prototype. \tn 
% Row Count 21 (+ 6)
% Row 8
\SetRowColor{LightBackground}
 & \seqsplit{Array.prototype.Mayus} = function() \{ ... \} \{\{nl\}\}a.Mayus(); \tn 
% Row Count 24 (+ 3)
% Row 9
\SetRowColor{white}
 & Array.prototype.dia = "lunes"; \tn 
% Row Count 26 (+ 2)
% Row 10
\SetRowColor{LightBackground}
 & \seqsplit{Array.prototype.Susti} = function(vi, vf) \{ for ( var i = 0; i\textless{} this.length; i++) \{ if ( this{[}i{]} == vi ) \{ this{[}i{]} = vf ; \} \} \} \tn 
% Row Count 33 (+ 7)
\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}{Arrays (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{\bf{Métodos}}} \tn 
% Row Count 1 (+ 1)
% Row 12
\SetRowColor{white}
concat() & Une dos o más arrays \tn 
% Row Count 3 (+ 2)
% Row 13
\SetRowColor{LightBackground}
indexOf( string ) & Busca un elemento en el array y devuelve su posición. {\bf{Devuelve -1 si no lo encuentra}} \tn 
% Row Count 8 (+ 5)
% Row 14
\SetRowColor{white}
join() & Junta los elementos de un array en una cadena \tn 
% Row Count 11 (+ 3)
% Row 15
\SetRowColor{LightBackground}
lastIndexOf( string ) & Busca un elemento en un array desde el final  y devuelve su posición. \tn 
% Row Count 15 (+ 4)
% Row 16
\SetRowColor{white}
pop() & Borra el último elemento del array y devuelve su contenido \tn 
% Row Count 18 (+ 3)
% Row 17
\SetRowColor{LightBackground}
push() & Añade nuevos elementos al array y devuelve su nueva longitud. \tn 
% Row Count 22 (+ 4)
% Row 18
\SetRowColor{white}
reverse() & Invierte el orden de los elementos en el array. \tn 
% Row Count 25 (+ 3)
% Row 19
\SetRowColor{LightBackground}
a = frutas.shift() & Elimina el primer elemento del array y devuelve el elemento \tn 
% Row Count 28 (+ 3)
% Row 20
\SetRowColor{white}
var citrus = fruits.slice(1, 3); fruits.slice(-1); & Selecciona parte de un array y devuelve su contenido en un array nuevo. Útil para mostrar elemtnos del array sin accederlos directamente. \tn 
% Row Count 35 (+ 7)
\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}{Arrays (cont)}}  \tn
% Row 21
\SetRowColor{LightBackground}
arr.sort() & Ordena los elementos del array localmente y devuelve el array.La ordenación no es necesariamente estable. El por defecto es de Unicode. \tn 
% Row Count 7 (+ 7)
% Row 22
\SetRowColor{white}
 & arr.sort({[}compareFunction{]}) Especifica una función que define el modo de ordenamiento. los elementos del array son ordenados de acuerdo al valor que retorna dicha función de comparación. Siendo a y b dos elementos comparados\{\{nl\}\}`if (a es menor que b según criterio de ordenamiento) \{     return -1;   \}   if (a es mayor que b según criterio de ordenamiento) \{     return 1;   \}   // a debe ser igual b   return 0; \}\{\{nl\}\}var arr = {[} 40, 1, 5, 200 {]}; function comparar ( a, b )\{ return a - b; \} arr.sort( comparar );  // {[} 1, 5, 40, 200 {]} \{\{nl\}\} arr.sort(function(a,b)\{return a - b;\});` \tn 
% Row Count 37 (+ 30)
\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}{Arrays (cont)}}  \tn
% Row 23
\SetRowColor{LightBackground}
splice() & cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.\{\{nl\}\} `months.splice(4, 1, 'May'); // replaces 1 element at 4th index \{\{nl\}\} months.splice(1, 0, 'Feb'); // inserts at 1st index position` \tn 
% Row Count 12 (+ 12)
% Row 24
\SetRowColor{white}
arr.toString(); & Convierte un array en string y devuelve el resultado (entre comas) \tn 
% Row Count 16 (+ 4)
% Row 25
\SetRowColor{LightBackground}
arr.unshift("Uno","Dos"); & Añade elementos al inicio del array y devuelve la nueva longitud \tn 
% Row Count 20 (+ 4)
% Row 26
\SetRowColor{white}
split(","/g) & Convierte un string en un array \tn 
% Row Count 22 (+ 2)
% Row 27
\SetRowColor{LightBackground}
includes(variable) || !csPais.includes(cPais) & comprueba si existe el argumento en el array, devuelve true o false \tn 
% Row Count 26 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.9804 cm} x{8.2896 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Recuerda}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Los prompt guardan cadenas} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{arguments es un array} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{if(num == undefined || num == null || num == 0 || isNaN(num))\{} \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{En math.random() el rango es de 0 a 1. *(max - min) + min} \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Para definir una variable por defecto se puede hacer en argumentos con =} \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{Hasta que el usuario pulse Cancelar 	 while(cadena !== null)\{\}} \tn 
% Row Count 10 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{indexOf() actúa como booleano} \tn 
% Row Count 11 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{sort ordena en ASCII por defecto, hay que utilizar a,b para ordenar de otra manera} \tn 
% Row Count 13 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{las fechas empeizan por 0} \tn 
% Row Count 14 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{var objeto\_mio = new Object(); \seqsplit{objeto\_mio.propiedadtal;} objeto\_mio.metodocual( {[}parámetros o no{]} );} \tn 
% Row Count 17 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{En notaciones array, la convención es que '-1' devuelva el último elemento. En el caso de JS: `array{[}:-1{]}`  o `array.slice(-1)`} \tn 
% Row Count 20 (+ 3)
% Row 11
\SetRowColor{white}
Para ver el tipo de una variable & console.log(typeof variable); \tn 
% Row Count 22 (+ 2)
\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}{Arrays multidimensionales}}  \tn
% Row 0
\SetRowColor{LightBackground}
En js los arrays guardan información dinámicamente (se le pueden añadir elementos) & var dias = new Array(7);\{\{nl\}\}dias{[}i{]} = new Array(4); // Cada día contiene un array de 4 elementos\{\{nl\}\}dias{[}i{]}{[}j{]} = Math.floor( Math.random() * 40);\{\{nl\}\}for(i = 0; i\textless{} dias.length; i++) \{ for(j = 0; j \textless{} dias{[}i{]}.length ; j++) \{ document.write( "Temperatura dia "+i + " hora "+j + " =  "+dias{[}i{]}{[}j{]} + "\textless{}br\textgreater{}"); \} \tn 
% Row Count 16 (+ 16)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{Pueden almacenar tipos diferentes} \tn 
% Row Count 17 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Guardar array dentro de otro array & arr1.push(arr2); \tn 
% Row Count 19 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{-{}-} \tn 
% Row Count 20 (+ 1)
% Row 4
\SetRowColor{LightBackground}
Inicializar array & var cualificaciones = {[}{]}; \tn 
% Row Count 22 (+ 2)
% Row 5
\SetRowColor{white}
con declaración & var items = {[}   {[}1, 2{]},   {[}3, 4{]},   {[}5, 6{]} {]};\{\{nl\}\} console.log(items{[}0{]}{[}0{]}); // 1 console.log(items); \tn 
% Row Count 28 (+ 6)
% Row 6
\SetRowColor{LightBackground}
 & var arr = {[}1, 2, {[}3, 4{]}, 5{]};\{\{nl\}\}alert (arr{[}2{]}{[}1{]}); //alerts "4" \tn 
% Row Count 32 (+ 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}{Arrays multidimensionales (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
Introducir valores & items.push({[}'a','b','c'{]})\{\{nl\}\}//{[}   {[}1, 2{]},   {[}3, 4{]},   {[}5, 6{]}, {[}'a','b','c'{]} {]} \tn 
% Row Count 4 (+ 4)
% Row 8
\SetRowColor{white}
Recorrer valores & for(var i = 0; i \textless{} cubes.length; i++) \{     var cube = cubes{[}i{]};     for(var j = 0; j \textless{} cube.length; j++) \{         display("cube{[}" + i + "{]}{[}" + j + "{]} = " + cube{[}j{]});     \} \} \tn 
% Row Count 13 (+ 9)
% Row 9
\SetRowColor{LightBackground}
 & for( var i = 0; i \textless{} items.length; i++)\{                          alert(items{[}i{]}{[}0{]});                  \} \tn 
% Row Count 19 (+ 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}{Eventos}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\textless{}element onload = function\textgreater{} || element.onmouseout = function; || \seqsplit{window.addEventListener('load'}, () =\textgreater{} \{ || window.onload = () =\textgreater{} \{   //window loaded \}} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Al dejar los parámetros vacíos, el objeto que llama la función es el parámetro gracias al keyword this & function a()\{  this.style.backgroundColor='aqua';\} \tn 
% Row Count 10 (+ 6)
% Row 2
\SetRowColor{LightBackground}
Para que no cargue todas las funciones hasta que termine de cargarse la página & window.onload = function()\{ \tn 
% Row Count 14 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{el evento tiene varios atributos y métodos como target (el originador del evento), type (el tipo de evento) y stopPropagation() para detener la propagación del evento.} \tn 
% Row Count 18 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Otras propiedades dependen del tipo de evento, ya que hay eventos de ratón, teclado, de drag, de fetch...} \tn 
% Row Count 21 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\seqsplit{https://flaviocopes.com/javascript-events/}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{3.1086 cm} x{14.1614 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Expresiones regulares}}  \tn
% Row 0
\SetRowColor{LightBackground}
\textasciicircum{} & Empieza por \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\$ & Acaba por \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{[}abcd{]} & Deben preceder unos a otros	a, b, c, d, abcd \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
{[}a-z{]} & De un caracetr a otro \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
{[}0-9{]}\{4\} & aparece exactamente 4 veces \tn 
% Row Count 7 (+ 2)
% Row 5
\SetRowColor{white}
{[}\textasciicircum{}abcd{]} & cualquier ocurrencia excepto abcd \tn 
% Row Count 9 (+ 2)
% Row 6
\SetRowColor{LightBackground}
{[}a-c0-2{]}* & zero or more consecutive occurrences of a, b, c, 0, 1, 2. \tn 
% Row Count 11 (+ 2)
% Row 7
\SetRowColor{white}
(|||) & Cualquiera de estas combinaciones \tn 
% Row Count 13 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\textbackslash{}(ab\textbackslash{}) & La expresión hará match en grupo \tn 
% Row Count 15 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Regex caracteres}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1553274308_regex2.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Regex \textbackslash{}}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1553274340_regex1.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Regex 3}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{17.67cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/lasago_1553274417_regex3.PNG}}} \tn 
\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}{eventos 3}}  \tn
% Row 0
\SetRowColor{LightBackground}
evitar acción por defecto & \textless{}A href="pagina.html" onClick="return preguntar()"\textgreater{}Pulsa aqui\textless{}/a\textgreater{} function preguntar()\{ return confirm("¿Desea realmente ir a esa dirección?"); \} \tn 
% Row Count 8 (+ 8)
% Row 1
\SetRowColor{white}
Si se añaden los paréntesis después del nombre de la función, en realidad se está ejecutando la función y guardando el valor devuelto por la función en la propiedad onclick de elemento. & // Asignar una función externa a un evento de un elemento \seqsplit{document.getElementById("pinchable").onclick} = muestraMensaje; // Ejecutar una función y guardar su resultado en una propiedad de un elemento \seqsplit{document.getElementById("pinchable").onclick} = muestraMensaje(); \tn 
% Row Count 22 (+ 14)
% Row 2
\SetRowColor{LightBackground}
al cargar la página... & window.onload = function () \{\} \tn 
% Row Count 24 (+ 2)
% Row 3
\SetRowColor{white}
obtener elementos por tagname & let casillas = \seqsplit{document.getElementsByTagName('td');} casillas{[}i{]}.addEventListener("mouseover", pintar); \tn 
% Row Count 30 (+ 6)
\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}{eventos 3 (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
cada vez que se llama a función, resetea & function seleccionarColor(e)\{     resetSeleccion();     pincel = \seqsplit{this.getAttribute("class");}           \seqsplit{this.style.borderWidth} = "thick";         \seqsplit{this.style.borderColor} = "white";      var selec = \seqsplit{document.getElementById("seleccionado");}     \seqsplit{selec.style.backgroundColor} = pincel; \}  function resetSeleccion()\{     for( let k = 0; k \textless{} paleta.length; k++ )\{         paleta{[}k{]}.style.borderWidth = "thin";         paleta{[}k{]}.style.borderColor = "black";     \} \} \tn 
% Row Count 23 (+ 23)
% Row 5
\SetRowColor{white}
 & function pintar(evento)\{     //this es el elemento que lo llamó     //console.log(this, evento);     \seqsplit{this.style.backgroundColor} = pincel; \} \tn 
% Row Count 30 (+ 7)
\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}{eventos 3 (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
eventos DOM & \seqsplit{boton1.onclick=valida';} \tn 
% Row Count 2 (+ 2)
% Row 7
\SetRowColor{white}
 & var tipo = evento.type; \tn 
% Row Count 4 (+ 2)
% Row 8
\SetRowColor{LightBackground}
 & function resalta(elEvento) \{  var evento = elEvento || window.event;  switch(evento.type) \{    case 'mouseover':      \seqsplit{this.style.borderColor} = 'black';      break;    case 'mouseout':      \seqsplit{this.style.borderColor} = 'silver';      break;  \} \} \tn 
% Row Count 16 (+ 12)
% Row 9
\SetRowColor{white}
 & window.onload = function() \{  \seqsplit{document.getElementById("seccion").onmouseover} = resalta;  \seqsplit{document.getElementById("seccion").onmouseout} = resalta; \} \tn 
% Row Count 24 (+ 8)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Teclado} \tn 
% Row Count 25 (+ 1)
% Row 11
\SetRowColor{white}
 & \seqsplit{window.addEventListener("keypress"}, desactivar);      var pulsado = true;\{\{nl\}\}function desactivar()\{     if(pulsado == true)\{         pulsado = false;     \}     else if(pulsado == false)\{         pulsado = true;     \} \}\{\{nl\}\}function pintar()\{     if( pulsado !== false)\{         \seqsplit{console.log("pintando");}         \seqsplit{this.style.backgroundColor} = pincel;     \} \}\{\{nl\}\} for( let i = 0; i \textless{} casillas.length; i++ )\{         casillas{[}i{]}.addEventListener("mouseover", pintar);     \} \tn 
% Row Count 49 (+ 24)
\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}{eventos 3 (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
keydown & keyCode \tn 
% Row Count 1 (+ 1)
% Row 13
\SetRowColor{white}
keypress & keyCode, charCode \tn 
% Row Count 2 (+ 1)
% Row 14
\SetRowColor{LightBackground}
keyup & keyCode \tn 
% Row Count 3 (+ 1)
% Row 15
\SetRowColor{white}
 & window.onload = function()\{     document.onkeypress = enviar; \}     function enviar(evento)\{              var tecla = evento.keyCode;          if(tecla == 13)\{         return false;     \}else\{         return true;     \} \} \tn 
% Row Count 15 (+ 12)
% Row 16
\SetRowColor{LightBackground}
Ratón & var coordenadaX = evento.clientX;  var coordenadaY = evento.clientY; \tn 
% Row Count 19 (+ 4)
% Row 17
\SetRowColor{white}
Método addEventListener(). & Este método tiene tres argumentos: el tipo de evento, la función a ejecutar y un valor booleano (true o false), que se utiliza para indicar cuándo se debe capturar el evento: en la fase de captura (true) o de burbujeo (false). \seqsplit{elemento.addEventListener('evento'}, función, false|true) \tn 
% Row Count 34 (+ 15)
\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}{eventos 3 (cont)}}  \tn
% Row 18
\SetRowColor{LightBackground}
Formularios & function enviar(form)\{ if  \seqsplit{(formulario.alta.checked} == true)\{ formulario.action = \seqsplit{"paginas/alta.html";} \} \tn 
% Row Count 6 (+ 6)
% Row 19
\SetRowColor{white}
check & var edad = \seqsplit{document.getElementById("edad").value;} \tn 
% Row Count 9 (+ 3)
% Row 20
\SetRowColor{LightBackground}
 & function validaCheck() \{ var elemento = \seqsplit{document.getElementByld("campoCondiciones")} ; if ( !elemento.checked ) \{ return  false; \} return true; \} \tn 
% Row Count 17 (+ 8)
% Row 21
\SetRowColor{white}
regex & var patronE = new RegExp("\textasciicircum{}(1{[}8-9{]}|{[}2-9{]}{[}0-9{]}|100)\$");          if(!patronE.test(edad))\{         alert("Debes ser mayor de 18 y menor de 100");     \} \tn 
% Row Count 25 (+ 8)
% Row 22
\SetRowColor{LightBackground}
select & \seqsplit{valoresGenero=document}.getElementsByName("genero"); 	for(var i=0; i\textless{}valoresGenero.length; i++) \{ 		if(valoresGenero{[}i{]}.checked)\{ \seqsplit{			seleccionado=true;} 		\} \tn 
% Row Count 33 (+ 8)
\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}{eventos 3 (cont)}}  \tn
% Row 23
\SetRowColor{LightBackground}
validación & \textless{}form action="URL" method="post" name="formValidado" onsubmit="return validar()"\textgreater{} \textless{}/form\textgreater{} \tn 
% Row Count 5 (+ 5)
% Row 24
\SetRowColor{white}
 & function validación() \{ valor  = \seqsplit{document.getElementByld("campo").value;} if( valor  ==  null  || valor.length ==  O  )\{ alert("El campo  no puede  esta vacío"); return  false; \} return  true; \} \tn 
% Row Count 15 (+ 10)
% Row 25
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onblur} \tn 
% Row Count 16 (+ 1)
% Row 26
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{onchange} \tn 
% Row Count 17 (+ 1)
% Row 27
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onclick} \tn 
% Row Count 18 (+ 1)
% Row 28
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{ondblclick} \tn 
% Row Count 19 (+ 1)
% Row 29
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onfocus} \tn 
% Row Count 20 (+ 1)
% Row 30
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{onkeydown} \tn 
% Row Count 21 (+ 1)
% Row 31
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onkeypress} \tn 
% Row Count 22 (+ 1)
% Row 32
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{onkeyup} \tn 
% Row Count 23 (+ 1)
% Row 33
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onload} \tn 
% Row Count 24 (+ 1)
% Row 34
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{onmousedown} \tn 
% Row Count 25 (+ 1)
% Row 35
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onmousemove} \tn 
% Row Count 26 (+ 1)
% Row 36
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{onmouseout} \tn 
% Row Count 27 (+ 1)
% Row 37
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{onmouseover} \tn 
% Row Count 28 (+ 1)
% Row 38
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{onmouseup} \tn 
% Row Count 29 (+ 1)
% Row 39
\SetRowColor{LightBackground}
Los objetos de nodo al ponerse en un bucle for modifican el length del mismo objeto, por eso conviene usar while & var lista = \seqsplit{cajaB.getElementsByTagName("option");}     while(lista.length \textgreater{} 0)\{ \tn 
% Row Count 35 (+ 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}{regex 4}}  \tn
% Row 0
\SetRowColor{LightBackground}
var patronE = new RegExp("\textasciicircum{}(1{[}8-9{]}|{[}2-9{]}{[}0-9{]}|100)\$"); & i: no distingue entre mayúsculas y minúsculas.  g: búsqueda global en toda la cadena; no para en la primera coincidencia. m : multiline \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
 & cadena.match cadena.match(er) \tn 
% Row Count 9 (+ 2)
% Row 2
\SetRowColor{LightBackground}
 & cadena.search cadena.search(er) \tn 
% Row Count 11 (+ 2)
% Row 3
\SetRowColor{white}
 & cadena.replace(er, texto) \tn 
% Row Count 13 (+ 2)
% Row 4
\SetRowColor{LightBackground}
 & if(!patronE.test(edad))\{ \tn 
% Row Count 15 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{( ) Agrupar caracteres} \tn 
% Row Count 16 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{{[} {]} Conjunto de caracteres opcionales} \tn 
% Row Count 17 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{\textbackslash{}O Carácter nulo} \tn 
% Row Count 18 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{\textbackslash{}t Caracter ASCII 9 (tabulador)} \tn 
% Row Count 19 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{1.8997 cm} x{15.3703 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Cookies}}  \tn
% Row 0
\SetRowColor{LightBackground}
crear & document.cookie = \seqsplit{'nombreCookie=valorCookie;} \seqsplit{expires=fechaDeExpiración;} path=rutaParaLaCookie'; \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
 & max-age=" + 60{\emph{60}}24*30 \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
 & document.cookie = "name=oeschger"; \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
 & var todas = \seqsplit{document.cookie.split(';');} var c = todas{[}i{]};         while (c.charAt(0)==' ') c = c.substring(1);         if (c.indexOf(name) == 0) return c.substring(name.length,c.length) \tn 
% Row Count 11 (+ 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}{Eventos 2}}  \tn
% Row 0
\SetRowColor{LightBackground}
Añadirle un listener al target (en este caso 'casillas') que llama a la función cuando se produce el evento & casillas{[}i{]}.addEventListener("mouseover", pintar); \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
la función cambia la propiedad del elemento que lo llamó, en este caso el target & function pintar()\{          \seqsplit{this.style.backgroundColor} = pincel; \} \tn 
% Row Count 11 (+ 5)
% Row 2
\SetRowColor{LightBackground}
 & \textless{}form name="registro" method="get" onsubmit="comprobar()"\textgreater{} \tn 
% Row Count 14 (+ 3)
% Row 3
\SetRowColor{white}
llamar función con DOM & \seqsplit{boton.onclick=validar;} \tn 
% Row Count 16 (+ 2)
\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}{Métodos y atributos DOM}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{window.onload = function () \{ console.log("cargada"); \}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{let lienzo = \seqsplit{document.getElementById('lienzo');}} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{let casillas = \seqsplit{document.getElementsByTagName('td');}} \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
var attribute = \seqsplit{element.getAttribute(attributeName);} & \seqsplit{this.getAttribute("class");} \tn 
% Row Count 8 (+ 3)
% Row 4
\SetRowColor{LightBackground}
conseguir valor de campo & var valor = \seqsplit{document.getElementById("usuario").value;} \tn 
% Row Count 11 (+ 3)
% Row 5
\SetRowColor{white}
Dar valor a elemento & \seqsplit{document.getElementById("demo").innerHTML} = 5 + 6; \tn 
% Row Count 14 (+ 3)
% Row 6
\SetRowColor{LightBackground}
Insertar valor conjunto a elemento & var d1 = document.getElementById('one');\{\{nl\}\} \seqsplit{d1.insertAdjacentHTML('afterend'}, '\textless{}div id="two"\textgreater{}two\textless{}/div\textgreater{}'); \tn 
% Row Count 20 (+ 6)
% Row 7
\SetRowColor{white}
index seleccionado de elemento & var cliente = lista.options{[}lista.selectedIndex{]}; \tn 
% Row Count 23 (+ 3)
% Row 8
\SetRowColor{LightBackground}
 & var idCliente = lista.options{[}lista.selectedIndex{]}.value; \tn 
% Row Count 26 (+ 3)
% Row 9
\SetRowColor{white}
coger propiedad de elemento que llama & function cargarContenido( e ) \{\{\{nl\}\}  let id = e.target.value; \tn 
% Row Count 30 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.6629 cm} x{12.6071 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Propiedades DOM}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{document.body.} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{childNodes} & lista de nodos hijo del nodo padre, devuelve array \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
nodeName & cadena, define el nombre del nodo, devuelve una cadena \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
nodeType & número, muestra el tipo, devuelve un número \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
nodeValue & devuelve el valor del nodo, devuelve una cadena \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{firstChild} & El primer hijo del nodo. nodo \tn 
% Row Count 10 (+ 1)
% Row 6
\SetRowColor{LightBackground}
lastChild & El último hijo del nodo, nodo \tn 
% Row Count 12 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{previousSibling} & El hermano anterior al nodo, nodo o null \tn 
% Row Count 14 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{nextSibling} \tn 
% Row Count 15 (+ 1)
% Row 9
\SetRowColor{white}
\seqsplit{hasChildNodes} & tiene hijos o no, booleano \tn 
% Row Count 17 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\seqsplit{Attributes} & matriz con los atributos \tn 
% Row Count 18 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{p{5.0083 cm} x{12.2617 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Iteración}}  \tn
% Row 0
\SetRowColor{LightBackground}
i += 3 & cada 3 veces... \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.5264 cm} x{11.7436 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{HTML}}  \tn
% Row 0
\SetRowColor{LightBackground}
formulario select & \textless{}form action="/action\_page.php"\textgreater{}   \textless{}select name="cars"\textgreater{}     \textless{}option value="volvo"\textgreater{}Volvo XC90\textless{}/option\textgreater{}     \textless{}option value="saab"\textgreater{}Saab 95\textless{}/option\textgreater{}     \textless{}option value="mercedes"\textgreater{}Mercedes SLK\textless{}/option\textgreater{}     \textless{}option value="audi"\textgreater{}Audi TT\textless{}/option\textgreater{}   \textless{}/select\textgreater{}   \textless{}input type="submit" value="Submit"\textgreater{} \textless{}/form\textgreater{} \tn 
% Row Count 11 (+ 11)
% Row 1
\SetRowColor{white}
formulario checkbox & \textless{}input type="checkbox" name="vehicle1" value="Bike"\textgreater{} I have a bike\textless{}br\textgreater{} \textless{}input type="checkbox" name="vehicle2" value="Car"\textgreater{} I have a car\textless{}br\textgreater{} \textless{}input type="checkbox" name="vehicle3" value="Boat" checked\textgreater{} I have a boat\textless{}br\textgreater{} \tn 
% Row Count 20 (+ 9)
% Row 2
\SetRowColor{LightBackground}
espacio & \&nbsp \tn 
% Row Count 21 (+ 1)
\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}{Modificar DOM}}  \tn
% Row 0
\SetRowColor{LightBackground}
crear elemento & var parrafo1 = \seqsplit{document.createElement("p");} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
crear nodo de texto & var texto1 = \seqsplit{document.createTextNode("Memento} mori") \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
adjuntar hijo & \seqsplit{parrafo1.appendChild(texto1);} \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
 & \seqsplit{caja.appendChild(parrafo1);} \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
 & al adjuntar uno existente en otro lugar, desaparece del primero \tn 
% Row Count 14 (+ 4)
% Row 5
\SetRowColor{white}
 & no se puede adjuntar en el documento directamente:  \seqsplit{document.body.appendChild(nodoCheck);} \tn 
% Row Count 19 (+ 5)
% Row 6
\SetRowColor{LightBackground}
crear atributo & \seqsplit{entrada.setAttribute("type"}, "number"); \tn 
% Row Count 21 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{17.67cm}}{eventlistener en elemento adjuntado} \tn 
% Row Count 22 (+ 1)
% Row 8
\SetRowColor{LightBackground}
Coger valores de atributos de nodo & alert(enlace.href);  muestra http://www.com \tn 
% Row Count 25 (+ 3)
% Row 9
\SetRowColor{white}
getElements devuelve un array de objetos al que podemos acceder & var input = \seqsplit{document.getElementsByTagName("input");} \tn 
% Row Count 29 (+ 4)
% Row 10
\SetRowColor{LightBackground}
 & var valor1 = input{[}0{]}.value; \tn 
% Row Count 31 (+ 2)
\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}{Modificar DOM (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
borrar el mismo nodo a que referenciamos & lista{[}0{]}.parentNode.removeChild(lista{[}0{]}); \tn 
% Row Count 3 (+ 3)
% Row 12
\SetRowColor{white}
Coger el valor interno del atributo valor (value="") & var valor1 = input{[}0{]}.value; \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.4623 cm} x{8.8077 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{AJAX}}  \tn
% Row 0
\SetRowColor{LightBackground}
Inicializar ajax & \seqsplit{if(window.XMLHttpRequest)} \{ \{\{\{nl\}\} peticion\_http = new XMLHttpRequest();\} \{\{nl\}\} else \seqsplit{if(window.ActiveXObject)} \{ \{\{nl\}\} peticion\_http = new \seqsplit{ActiveXObject("Microsoft}.XMLHTTP"); \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
 & \seqsplit{if(window.XMLHttpRequest)} \{ \tn 
% Row Count 11 (+ 2)
% Row 2
\SetRowColor{LightBackground}
 & return new XMLHttpRequest(); \tn 
% Row Count 13 (+ 2)
% Row 3
\SetRowColor{white}
 & else \seqsplit{if(window.ActiveXObject)} \{ \tn 
% Row Count 16 (+ 3)
% Row 4
\SetRowColor{LightBackground}
 & return new \seqsplit{ActiveXObject("Microsoft}.XMLHTTP"); \tn 
% Row Count 19 (+ 3)
% Row 5
\SetRowColor{white}
Abrir petición AJAX GET en dirección & ajax.open("GET", \seqsplit{"U73.php?idCliente="+id);} \tn 
% Row Count 22 (+ 3)
% Row 6
\SetRowColor{LightBackground}
Comprobar que AJAX está cargado & \seqsplit{ajax.onreadystatechange} = function () \{\{\{nl\}\}if( ajax.readyState == 4 \&\& ajax.status == 200 )\{\{\{nl\}\}var datos = ajax.responseText;\{\{nl\}\}\}\{\{nl\}\}\}ajax.send(null); \tn 
% Row Count 30 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.4623 cm} x{8.8077 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{AJAX (cont)}}  \tn
% Row 7
\SetRowColor{LightBackground}
Abrir petición AJAX POST & \seqsplit{if(window.XMLHttpRequest)} \{ \tn 
% Row Count 2 (+ 2)
% Row 8
\SetRowColor{white}
 & return new XMLHttpRequest(); \tn 
% Row Count 4 (+ 2)
% Row 9
\SetRowColor{LightBackground}
 & else \seqsplit{if(window.ActiveXObject)} \{ \tn 
% Row Count 7 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{4.4902 cm} x{12.7798 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{AJAX y JSON}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & if(\$idcliente == "c3")\{         \$resultado = {[}"nombre"=\textgreater{}"Sara", "direccion"=\textgreater{}"Pontevedra", "telefono"=\textgreater{}111222333, "email"=\textgreater{}"Sara@mail.com"{]}; \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
Respuesta JSON & \$resul = \seqsplit{json\_encode(\$resultado);} \tn 
% Row Count 7 (+ 2)
\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}{JQuery}}  \tn
% Row 0
\SetRowColor{LightBackground}
Enlazar & \textless{}script \seqsplit{src="jquery-3.4.1.min}.js"\textgreater{}\textless{}/script\textgreater{} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
window onload & \$( document ).ready(function() \{ // \}); \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
añadir comportamiento a nodo & \$( "a" ).click( function( event )\{ \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
prevenir comportamiento por defecto & \seqsplit{event.preventDefault();} \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
añadir clase a nodo & \$( "a" ).addClass( "test" ); \tn 
% Row Count 11 (+ 2)
% Row 5
\SetRowColor{white}
quitar clase a nodo & \$( "a" ).removeClass( "test" ); \tn 
% Row Count 13 (+ 2)
% Row 6
\SetRowColor{LightBackground}
referirse a nodo que llama a evento & \$( this ).hide( "slow" ); \tn 
% Row Count 15 (+ 2)
% Row 7
\SetRowColor{white}
callback & función que se pasa como argumento a otra función y se ejecuta después de que su función padre se haya completado \tn 
% Row Count 21 (+ 6)
% Row 8
\SetRowColor{LightBackground}
callback sin argumentos & \$.get( "myhtmlpage.html", myCallBack ); \tn 
% Row Count 23 (+ 2)
% Row 9
\SetRowColor{white}
 & When \$.get() finishes getting the page myhtmlpage.html, it executes the myCallBack() function. \tn 
% Row Count 28 (+ 5)
% Row 10
\SetRowColor{LightBackground}
callback con argumentos & \$.get( "myhtmlpage.html", function() \{       myCallBack( param1, param2 );   \}); \tn 
% Row Count 32 (+ 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}{JQuery (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
añadir texto & \$( "body" ).append( "Se fue" ) \tn 
% Row Count 2 (+ 2)
% Row 12
\SetRowColor{white}
guardar elemento jquery & var firstHeadingElem = \$( "h1" ).get( 0 ); \tn 
% Row Count 5 (+ 3)
% Row 13
\SetRowColor{LightBackground}
 & var firstHeadingElem = \$( "h1" ){[} 0 {]}; \tn 
% Row Count 7 (+ 2)
% Row 14
\SetRowColor{white}
Although logo1 and logo2 are created in the same way (and wrap the same DOM element), they are not the same object. & var logo1 = \$( "\#logo" ); var logo2 = \$( "\#logo" ); \tn 
% Row Count 13 (+ 6)
% Row 15
\SetRowColor{LightBackground}
 & alert( \$( "\#logo" ) === \$( "\#logo" ) ); // alerts "false" \tn 
% Row Count 16 (+ 3)
% Row 16
\SetRowColor{white}
 & var logo1 = \$( "\#logo" ); var logo1Elem = logo1.get( 0 );   var logo2 = \$( "\#logo" ); var logo2Elem = logo2.get( 0 );   alert( logo1Elem === logo2Elem ); // alerts "true" \tn 
% Row Count 25 (+ 9)
% Row 17
\SetRowColor{LightBackground}
A los elementos p`con clase test les añade un evento click & \$( "p.test" ).on( "click", function()\{  \}); \tn 
% Row Count 28 (+ 3)
% Row 18
\SetRowColor{white}
Varios eventos & \$( "p" ).on(\{     "click": function() \{ console.log( "clicked!" ); \},     "mouseover": function() \{ console.log( "hovered!" ); \} \}); \tn 
% Row Count 35 (+ 7)
\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}{JQuery (cont)}}  \tn
% Row 19
\SetRowColor{LightBackground}
Sçolo ocurre una vez & \$( "p" ).one( "click", firstClick ); \tn 
% Row Count 2 (+ 2)
% Row 20
\SetRowColor{white}
 & function firstClick() \{     console.log( "You just clicked this for the first time!" );       // Now set up the new handler for subsequent clicks;     // omit this step if no further click responses are needed     \$( this ).click( function() \{ console.log( "You have clicked this before!" ); \} ); \} \tn 
% Row Count 17 (+ 15)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Every event handling function receives an event object, which contains many properties and methods. target \newline  \newline The DOM element that initiated the event}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}