Fundamentos de JAVASCRIPT Manuel Gértrudix
¿Qué es? ¿Dónde aparece? ¿Para qué sirve? ¿Qué es Javascript?
¿Qué es Javascript? ¿Qué es? Un lenguaje interpretado por los navegadores en tiempo real. No es un lenguaje compilado.
Vamos a ser originales… Abre tu editor de código en Liveweave Escribe el siguiente fragmento de código en un nuevo documento html La opción facil es abrir el enlace al código ;-)
Dónde puede estar… Como sucede en CSS, el JS puede cargarse: Como fichero independiente: fichero.js Mediante el atributo src: <script src=“fichero.js”> </script> En la sección <head> de las páginas En atributos designadores de manejadores de eventos (event handlers) dentro del HTML: <input type=“button” value=“clickMe” onClick=‘alert(“gracias por hacer clic”);’/> <html><body> <script type=“text/javascript”> // El código va aquí… </script> </body></html> Aquí vamos a Liveweave y vemos las diferentes cajas para entender dónde puede ubicarse
¿Qué es Javascript? ¿Para qué sirve? Es un lenguaje que permite dotar de interactividad a las páginas web. Permite acceder a información en internet Organizar y presentar datos Permite acceder a información en internet: por ejemplo, buscar y obtener las palabras más populares en Twitter de un tema, o para hacer scraping de web Organizar y presentar datos (por ejemplo, automatizar el trabajo de las hojas de cálculo; o la visualización de datos
¿Qué hace JS? Escribir en HTML Reaccionar a eventos
¿Qué hace JS? Modificar contenido en HTML Validar entrada de datos
¿Qué hace JS? Intercambiar imágenes
¿Qué resultados produce? Displays de escritura innerHTML Console.log() document.write() Window.alert() Caja de alerta Salida HTML Elemento HTML Consola de navegador Hacer los cuatro ejemplos: //window.alert (2453*4567) document.write(45*12) <button onclick="document.write(45*56)">Suma</button>
¿Dónde lo colocamos? Sintaxis básica Sintaxis básica de JS
Sintaxis JS Etiqueta script Cuando va dentro del html, el código va entre <script> y </script> Puede ir en cualquier parte la página como hemos visto, pero es recomendable que lo haga en el encabezado, o al final del código del body, para facilitar la lectura. <html> <head> <title>Mi primer script</title> <script type="text/javascript”> // Esta función cargará el texto Hola Javascript alert('Hola Javascript!'); </script> </head> <body> </body> </html>
Sintaxis JS Javascript es una secuencia de declaraciones (sentencias) que son ejecutadas por el navegador. Cada sentencia corresponde con un “comando” para el navegador: Es como decirle: “Haz esto”
Sintaxis JS Consideraciones en la escritura: Distingue entre MayúsculaS y minúsculas Ignora los espacios en blanco Los paréntesis indican prioridad La tabulación ayuda a leer mejor el código pero no tiene valor en sí
Sintaxis JS Las sentencias se separan con ; No es obligatorio, pero es una buena costumbre. Se ponen, normalmente, al final. El orden de ejecución de las sentencias es el de aparición en el código. 1 2
Sintaxis JS Las sentencias se pueden agrupar en bloques: Comienzan con { y finalizan con } Los bloques sirven para definir grupos de sentencias que deben ejecutarse conjuntamente Las funciones son un ejemplo de sentencias agrupadas Llaves
Sintaxis JS Hay dos tipos de comentarios: Comentarios en una línea Comienzan con // (sin cierre) Comentarios de más de una línea comienzan con /* y cierran con */