Aqui un parrafo de texto situado antes de la Imagen, dentro de un dv contenedor

Aqui otro pérrafo de texto, JavaScript es un lenguale utilzado para dotar de efectos dinémicos a las paginas web, Crea un archivo de nombre functions.js (créalo con un editor de textos como el bloc de notas, Notepad++ 0 cualquier otro) y escribe el siguiente cédigo: function mostrarMensaje1({ ‘alert(’Blenvenido al curso Javascript de aprenderaprogramar.com); d function mostrarMensaje2(){ ‘alert Ha hecho click sobre el prrafo inferior’; y El resultado esperado al cargar la pagina html sera el siguiente: 1) Nada més cargarse la pagina aparecerd una ventana informativa con el texto “Completada la carga de la pagina’, Esto se debe a que hemos incluido JavaScript en linea asociado a la etiqueta body. El evento onload se produce cuando el elemento body se ha cargado completamente en el navegador. En ese momento se dispara el cédigo JavaScript asociado. 2) Al hacer click sobre la imagen se muestra un mensaje (el mensaje 1), debido a que hemos indicado que cuando se produzca el evento onclick sobre la imagen, debe ejecutarse la funcién mostrarMensaje1(). Esta funcién no se encuentra dentro del documento html, pero el navegador ha incorporado el cédigo JavaScript externo porque asi se lo hemos indicado al indicar sre = “functions.php”. Por tanto el cédigo externo funciona como si fuera cédigo incluido en el propio documento html. 3) Al hacer click sobre el pérrafo inferior se mostraré otro mensaje (el mensaje 2), debido a que hemos indicado que cuando se produzca el evento onclick sobre el segundo parrafo debe ejecutarse la funcién mostrarMensaje2() © aprenderaprogramar.com, 2006-2029Javscript entero en archives de etensin Apr ENDER pr OGRAMARE Nos podemos hacer algunas preguntas como: éPor qué tenemos una funcién definida en linea y otras definidas en archivos externos? En general seré més interesante tener todo el cédigo organizado en un archivo externo en lugar de tenerlo “desperdigado” en scripts dentro de html, cédigo en linea, etc. No obstante, acostimbrate a que por miiltiples motivos te puedes encontrar con paginas web donde la organizacién del cédigo no sea buena. El navegador aceptara el cédigo que se encuentre, tanto en linea, como interno, como externo. Como programadores deberemos intentar mantener el cédigo tan ordenado como sea posible. Para ello es util usar archivos externos y agrupar las funciones de un mismo tipo dentro de carpetas y archivos con nombres descriptivos. Por ejemplo si tenemos un reloj javascript, todas las funciones asociadas al reloj pueden ir dentro de un archivo de nombre reloj.js. Si tenemos una calculadora con diferentes funciones, podemos crear una carpeta calculadora y dentro de ella poner los archivos calculosAritmeticos.js, calculosFinancieros,js y calculosCientificos.js por ejemplo. No hay que incluir las etiquetas en el archivo js? No, de hecho si lo hacemos el cédigo JavaScript es probable que no funcione al no ser capaz el intérprete del navegador de entender su significado en ese contexto. En los archivos js se incluye cédigo JavaScript Gnicamente. La etiqueta es cédigo html que se utiliza para delimitar el cédigo JavaScript dentro de un documento html. Esas etiquetas no forman parte del lenguaje JavaScript, por tanto no tiene sentido incluirlas en un documento JavaScript. Si el navegador encuentra cosas extrafias en un archivo js posiblemente ignore todo su contenido (con lo cual no ejecutaré ninguna funcidn y no veremos resultado alguno). ePuedo ver el cédigo JavaScript si visualizo el cédigo fuente de la pagina web? Depende. El cédigo JavaScript en linea 0 interno forma parte del documento HTML, por tanto si visualizas el cédigo fuente de la pagina si podrés verlo. En cambio el cédigo en archivos externos no podrds verlo directamente dentro del cédigo HTML de la web, aunque si podras ver el archivo al que se referencia, Podrés acceder al cédigo JavaScript escribiendo la ruta correspondiente. Por ejemplo file:///C:/EjemplosCursolavaScript/functions.js podria ser una ruta en local (en nuestro ordenador) 0 http://aprenderaprogramar.com/media/system/js/modal,js podria ser una ruta en una pagina web on- line. De este modo podemos visualizar el cédigo JavaScript asociado a una pagina web. éEntonces me pueden copiar otras personas mi c6\ 0 JavaScript (y yo copiarlo de otras webs)? Si, Ten en cuenta que JavaScript se ejecuta del lado del cliente, es decir, en el ordenador del usuario, Lo mismo que el cédigo HTML y el cédigo CSS. éPuede robarse informacién del usario o introducir virus usando JavaScript? En general no, ya que los navegadores y sistemas operativos incluyen medidas de seguridad que impiden que a través de cédigo JavaScript se pueda acceder al ordenador del usuario. No obstante, © aprenderaprogramar.com, 2006-2029snnscrigt eterno enrchives de etn apr ENDER apr OGRAMARE siempre hay “mentes perversas” que buscan fallos de seguridad en los sistemas e intentan hacer cosas de este tipo. Es muy dificil, pero a veces lo consiguen (y seguidamente son perseguidos por la policia). éDeshabilitar JavaScript puede ser una buena medida de seguridad? Podria serlo, pero no tiene demasiado sentido. Es como no salir de casa para evitar que te roben. Puedes hacerlo, pero te perderias todo lo que hay fuera de tu casa y nadie quiere vivir sin disfrutar de lo que nos puede ofrecer la vida. 4Es posible ejecutar cédigo JavaScript sin estar asociado a una respuesta a un evento? Si, escribe este cédigo en un archivo html y visualiza el resultado en tu navegador.

-

/Aqui un parrafo de texto situado antes de la imagen, dentro de un div contenedor

Aqui otre pérrafo de texto. Javascript es un lengua utlzado para dotar de efectos dindmicos alas paginas web.

=!Notepades, Visualiza el resultado y comprueba que la pagina web se muestra con normalidad y que JavaScript se ejecuta con normalidad cuando pulsas sobre la imagen. El resultado esperado es que se muestre lo siguiente (compruébalo): cadena texto vale © aprenderaprogramar.com cadena texto es "aprenderaprogramar.com' cadena texto ahora contiene Letra A: A, 0 con tilde: 6 sigue Caracter \ igualmente \ seguido de tres saltos de linea Prosigue comilla simple ' y doble " Introduzca un texto por favor: andamio El texto introducido fueandamio con longitud de 7 caracteres La longitud de extraordinario es de 14 caracteres La longitud de la cadena vacia es de 0 caracteres © aprenderaprogramar.com, 2006-2029Tinos de variables en JavaScript. tring (Texto). “apr eENDER apr OGRAMARS EJERCICIO Consulta en internet cual es el cédigo unicode que corresponde al cardcter 1 (simbolo matematico Fi) y usando el cédigo muestra por pantalla el mensaje “El ntimero n vale 3.1416". Para comprobar si es correcta tu solucién puedes consultar en los foros aprenderaprogramar.com, Proxima entrega: CU01115€ Acceso al curso completo en aprenderaprogramar.com ~ > Cursos, o en la direccién siguiente: http://aprenderaprogramar.com/index.php?option=com_content&view=category&iid=788.Jtemid=206 © aprenderaprogramar.com, 2006-2029ar = APRENDERAPROGRAMAR.COMcapP ENDER apr OGRAMARS Declaracién de variables JavaScript. Variables booleanas. DECLARACION DE VARIABLES JAVASCRIPT. VARIABLES BOOLEANAS. Aunque no es obligatorio, se recomienda declarar siempre las variables antes de usarlas en JavaScript. Como sabemos esta declaracién se hace escribiendo la palabra clave var seguida del nombre de variable. También se pueden declarar multiples variables en una sola linea escribiendo var y a continuacién los nombres de las variables separados por comas, Por ejemplo podemos declarar: var coches; var motos; var trenes; Obbien hacerlo en una sola linea de esta manera: var coches, motos, trenes; También se permite la inicializacién de variables en linea. Por ejemplo podriamos escribir: var coches = 32, motos = 9, trenes = 12; De este modo quedan las variables inicializadas en el mismo momento de deciaracién. Aunque la declaracién de variables no es obligatoria, se recomienda siempre declarar las variables. Si se trata de hacer uso de un nombre de variable que no existe para asignérselo a una variable si existente, se produce un error y el cédigo JavaScript deja de funcionar. Ejemplo: function mostrarMensaje1() { var mayorDe25 = false; ‘mayorDe25 = variablelnexistente; //Genera un error y el cédigo no se ejecuta alert (‘Mostrar un mensaje no se ejecuta’); Importante: un “pequefio error” al escribir un nombre de variable puede generar un error (no visualizado al no aparecer mensaje de error) y hacer que nuestro cédigo JavaScript deje de funcionar. VARIABLES BOOLEANAS En JavaScript una variable es booleana si se le asigna como contenido true 6 false. Estas variables se usan para almacenar informacién del tipo si / no, cumple / no cumple, verdadero / falso, existe / no existe, es decir, informacién que tnicamente puede tener dos estados. Ejemplo: var casado = true; true y false son palabras clave JavaScript. Por tanto no podemos usarlas como nombres de variables. Si escribiéramos true = 25; el intérprete del navegador interpretaria que existe un error, por lo que el © aprenderaprogramar.com, 2006-2029Declaracion de variables JavaScript Variables booleanas. SAPP ENDER apr OGRAMARS cédigo JavaScript no se ejecutaré (sin embargo, no veremos ningtin mensaje de error, simplemente veremos que JavaScript no funciona). Las variables booleanas normalmente se emplean para evaluar si se cumplen condiciones mediante instrucciones if else, como veremos mas adelante. Un razonamiento usando variables booleanas puede ser <>. Las variables booleanas toman valor true o false. Puede considerarse que existe un equivalente numérico (1 para true y 0 para false), pero debemos decidir si queremos operar con niimeros, usar una variable numérica, y si queremos operar con los valores true y false, operar con variables booleanas. En general toda variable tiene un equivalente numérico y un equivalente en forma de texto. Por ejemplo el equivalente en forma de texto del valor true seria ‘true’ y se puede obtener escribiendo el nombre de la variable seguido de toStringt). Por ejemplo casado.tostring() devuelve la cadena de texto ‘true’, que es diferente del valor booleano true. \Veamos un ejemplo. Escribe este cédigo y guardalo en un archivo de extensién html (puedes cambiar la ruta de la imagen si quieres):

-

AAqui tun pérrafo de texto situado antes de la imagen, dentro de un dv contenedor

Aqui otro pérrafo de texto. JavaScript es un lengua utiizado para dotar de efectos dindmicos alas paginas web.

‘aprenderaprogramar.coms/titie> Cursos, o en la direccién siguiente: htto://aprenderaprogramar.com/index.pho?option=com_content&.view=category&id=788.lternid=206 © aprenderaprogramar.com, 2006-2029apr = NaN Pa ec ARR aeL YL)Operadores ligicos yrelacionales JavaScript. Valores de verdad. ‘apr ENDER apr OGRAMARS OPERADORES LOGICOS PRINCIPALES EN JAVASCRIPT En JavaScript disponemos de los operadores logicos habituales en lenguajes de programacién como son “es igual”, “es distinto”, menor, menor o igual, mayor, mayor o igual, and (y), or (0) y not (no). La sintaxis se basa en simbolos como veremos a continuacién y cabe destacar que hay que prestar con = porque implican distintas cosas, atencién ano confundir OPERADORES LOGICOS Y RELACIONALES Disve ale iaTAV Ke) Es igual Es estrictamente igual ! Es distinto al=b Es estrictamente distinto Menor, menor 0 igual, mayor, SS mayor o igual Ba Operador and (y) a&&b ' Operador or (0) allb ! Operador not (no) la ‘Operadores logicos y relacionales principales en JavaScript, La sintaxis coincide con la empleada en otros lenguajes de programacién. ‘Ademas de los operadores habituales existen los operadores === que se interpreta como “es estrictamente igual” y !== que se interpreta como “no es estrictamente igual”. Estos operadores resultan un poco mas complejos de comprender por lo que volveremos a hablar de ellos mas adelante. De momento tener en cuenta que si una variable contiene textol= “1” y hacemos la comparacién 1, obtendremos false, es decir, que no es igual (porque un texto no es igual a un numero). devolverd true ya que esta comparacién no es estricta y textol = Sin embargo una comparacién como texto © aprenderaprogramar.com, 2006-202cperdoresleeorvieaconalesinscipt Valresdeverte. __—= k) tiene tres evaluaciones: la primera comprueba si la variable a es igual a b. Si no se cumple esta condicién, el resultado de la expresién es falso y no se evaluan las otras dos condiciones posteriores. En un caso como (a <[head>

-

Pulsa adelante o atrésc/p> *utt"> {1 && movimiento == 'atra! || numerolmayendctual humor informatico_fote jpg’ contenedor"> * moverimagen(‘atras)> << Atrés

‘moverlmagen(‘adelante)" >Adelante >>>

© aprenderaprogramar.com, 2006-2029Acceder a elementos JavaScript. getlementByi. APP ENDER apr OGRAMARS EJERCICIO L.Comprueba que el cédigo anterior te permite cambiar la imagen que se muestra haciendo uso de los botones. 2. En el cédigo anterior hay una declaracién de variables (var numerolmagenActual =9;) que no esta dentro de una funcién. Por qué crees que se ha hecho esto asi? Prueba a colocarla dentro de la funcién, comprueba qué ocurre y razona el por qué 3. Modifica el cédigo anterior para que en lugar de definirse src, alt y title para cada imagen dentro de los if, se definan estos valores usando arrays declarados en cabecera de la funcién. Por ejemplo tendremos que: valorSrc{0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/ camiseta_6_humor_informatico_foto.jpg'; Las asignaciones dentro de los if deberdn hacer referencia a los elementos del array y el resultado de ejecucién debera ser el mismo que se obtenia con el cédigo original 4, Duplica todo el cédigo HTML existente dentro de la etiqueta body, de modo que se muestren dos veces el texto, dos veces la imagen y dos veces los botones. éCuando pulsas un botén situado debajo a la imagen inferior qué ocurre? éPor qué ocurre esto? Para comprobar si tus respuestas son correctas puedes consultar_ en los foros aprenderaprogramar.com. Proxima entrega: CU01128E Acceso al curso completo en aprenderaprogramar.com ~ > Cursos, o en la direccién siguiente: htto://aprenderaprogramar.com/index.pho?option=com_content&view=categorvBiid=788.lternid=206 © aprenderaprogramar.com, 2006-2029apr = ON aa ec ARR aeL YL)Acceder a elementos JavaScript. getElementsByTagName. “APP ENDER apr OGRAMARS GETELEMENTSBYTAGNAME EI acceso a un nodo concreto del DOM usando getElementByld es muy frecuente, pero hay otras maneras de acceder a los nodos del DOM. Una de ellas es usando getElementsByTagName(‘etiquetaBuscada’). Esta funcién nos devuelve un array conteniendo todos los nodos DOM cuya etiqueta coincide con etiquetaBuscada. El orden en que apareceran los elementos en el array (comenzando con indice cero) es el mismo en el que aparezcan en el cédigo de la pagina web. Ejemplo: var elementosDiv = document getElementsByTagName(‘div'); Nos devolverd un array con todos los nodos de tipo element cuya etiqueta sea div, empezando con indice cero: elementosDiv{0}, elementosDiv{1], elementosDiv{2], elementos div(3]... hasta el indice que sea necesario para abarcar tantos elementos div como haya en el cédigo. Podemos obtener los nodos de cualquier tipo de etiqueta: div, span, p, label, input, hi, h2, ete. Tener en cuenta que escribimos document.getElementsByTagName('div’) porque queremos empezar la biisqueda desde el nodo raiz del DOM, es decir, el nodo document (asi exploramos todos los nodos) Podriamos empezar la busqueda por otro nodo si resultara de interés. CAMBIAR ESTILOS CSS CON JAVASCRIPT Una posibilidad interesante de JavaScript serd poder modificar de forma dinamica el aspecto de la web modificando el CSS asociado. La sintaxis para poder ejecutar modificaciones de estilo seré la siguiente: nodoDelDomAlqueAccedemos.style.nombrePropiedad = 'valorPropiedad’; Un ejemplo seria: elementosObtenidos{1].style.backgroundColor = '#FF9933'; Donde elementosObtenidos{1 corresponde a un nodo del DOM. Y backgroundColor es la propiedad CSS que deseamos cambiar pero expresada con sintaxis JavaScript. Si te fijas, la sintaxis CSS es background-color mientras que la sintaxis JavaScript es backgroundColor. En este caso son similares, pero no exactamente iguales. En otros casos si hay coincidencia. Mas adelante veremos una tabla de equivalencia entre propiedades CSS © aprenderaprogramar.com, 2006-2029Acad mento nec etree Toga ajir ENDER@prOGRAMARES Para ver la aplicacién del acceso con getElementsByTagName y el cambio de propiedades CSS con JavaScript escribe el siguiente cédigo y comprueba sus efectos al visualizar la pagina: chead>