Revisión de 10:22 29 feb 2016

<form> <input type=button/> probando <input type=Text> </form>

Introducción

Qué es JavaScript

Es EL LENGUAJE de scripts en la Web
Es un lenguaje de scripts, interpretado (no se compila, lo interpreta directamente el navegador), sin coste por licencia.
Se inserta directamente en las páginas html.
Para poderlo usar y sacarle partido, requiere tener un conocimiento previo de HTML

JavaScript en la web

Libros en la web http://www.ecma-international.org/publications/standards/Ecma-262.htm w3school http://www.w3schools.com/js/ (En inglés)

Sitio oficial de ecma http://www.ecma-international.org/publications/standards/Ecma-262.htm

Página con información de javascript https://www.javascript.com/

Qué versión estamos en javaSctipt

Podríamos decir que javascript es uno de los lenguajes mas utilizados y populares del mundo.
Ha cogido mucha popularidad y parece que va a ir de aumento
No tiene nada que ver con Java. Son lenguajes diferentes que se usan para diferentes objetivos.
JavaSctipt fue inventado por Brendan Eich en 1995. A partir del año 97 se convirtió en estándar de ECMA, siendo su nombre ofical ECMA-262. La versión última es ECAMScript 6, liberada en Junio del año 2015.

Podríamos decir que ECMA es la especificación de los lenguajes de escript, y JavaScript, es el principal lenguaje que lo implementa.

Para qué sirve JavaScript

Es un lenguaje de programación de propósito general
Herramienta de programación (instruciones y estruccturas de control)

Para qué lo vamos a usar

Para aprender a programar
1. Para muchos javascript va a ser el primer lenguaje de programación
2. Aprender a programar de forma general (algorítmica)
3. Aprender a implementar de forma particular (Usando este lenguaje).
Vamos a interactutar en una página html. Nuestro código va a estar dentro de una página html
El navegador lo va a interpretar y ejecutar.

Qué vamos a hacer con JavaScript en una página html

Para insertar texto de forma dinámico (según se ejecuta) en una página HTML:

	document.write("<h1>" + name + "</h1>")

Para reaccionar ante eventos:
1. Eventos de la páginaPágina que termina de cargar
2. Eventos del usuario, click en un elemento HTML, etc.
Lee y escribe elementos HTML Modificar un elemento existente, cambiar el color, leer datos del formulario
Validación de datos en formularios (ahorra procesamiento al servidor y agiliza la respuesta a errores para el usuario).

Etiquetas de JavaScript en el código html

<html>
	<body>
		<script type="text/javascript">
			<!--
				document.write("¡Hola Mundo!");
			//-->
		</script>
	</body>
</html>

Etiquetas de JavaScript:

<script type="text/javascript"> </script>

Comentario en html (para que el navegador no muestre el javascript como texto si no lo sabe ejecutar). ¡Se debe poner para hacer validación W3C!

<!--  -->

Comentario en JavaScript, útil en el ejemplo anterior, para que no se interprete dentro del JavaScript la marca de comentario de html:

	// Comentario en JavaScript

Método write del objeto document para escribir en la página web:

	document.write

Etiquetas html para incorporar JavaScript

Puntos clave

{{{1}}}

Colocación del JavaScript

Dónde se coloca el código JavaScript dentro de una página html

En la sección head
En la sección body
En un fichero externo

El código JavaScript se ejecutará cuando se cargue esa parte de la página. En secciones siguientes veremos en qué momento se ejecuta en función de dónde sea ubicado
- En secciones

En qué momento se ejecuta el javascript

JavaScript en el head

<html>
	<head>
		<script type="text/javascript">
			....
		</script>
	</head>
...
</html>

Ejecución mediante llamada, al “disparar” (trigger) un evento.
Ejecución previa a la renderización del del body

JavaScript en el body

<html>
	<head>
	</head>
	<body>
		<script type="text/javascript">
			....
		</script>
	</body>
</html>

Ejecución: Al cargar la página (generará contenido de la página)

JavaScript en un fichero externo

<html>
	<head>
		<script type="text/javascript" src="xxx.js"></script>
	</head>
	<body>
	</body>
</html>

Para ahorrar código si se van a ejecutar los mismos scripts en varias páginas html.
El script de JavaScript externo debe tener extensión .js
El type nos lo podemos ahorrar si codificamos en html5

JavaScript como valor de un atributo

<html>
	<head>
	</head>
	<body>
		<p onclick=”funcion();">
			Ejemplo de Javascript
		</p>
	</body>
</html>

Ensucia el código html y complica el mantenimiento del JavaScript
Solo lo utilizaremos aquí para algunos casos especiales

Etiqueta noscript

El javascript puede estar deshabilitado por el usuario o por el navegador.

Si la página web requiere JavaScript para su correcto funcionamiento, se incluya un mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar completamente de la página.

Ejemplo uso etiqueta noscript

<head> 
	….
</head>
<body>
	<noscript>
 		<p>Bienvenido a Mi Sitio</p>
  		<p>
			Esta página  requiere para su funcionamiento el uso de JavaScript. 
			Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.
		</p>
	</noscript>
</body>

Actividades

Javascript en el head

Crea una página web con el siguiente código y observa el orden de carga en el navegador.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ejemplo de código JavaScript en el propio documento</title>
		<script type="text/javascript">
  			alert("Hola Mundo");
		</script>
	</head>
	<body>
		<p>Mi primer programa con Javascript</p>
	</body>
</html>

Javascript en el body

Crea una página web con el siguiente código y observa el orden de carga en el navegador.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ejemplo de código JavaScript en el propio documento</title>
	</head>
	<body>
		<p>Mi primer programa con Javascript</p>
		<script type="text/javascript">
  			alert("Hola Mundo");
		</script>
	</body>
</html>

Tareas

Ejercicio 1

Crea los ejercicios anteriores pero con el JavaScript como elemento inline

Solución Ejercicio 1

¡Ojo con las comillas!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ejercicio 1</title>
	</head>
	<body>
		<p onclick="alert('Hola Mundo')">
			Mi primer programa con Javascript
		</p>
	</body>
</html>

Ejercicio 2

Modificar el ejercicio anterior para que:

Todo el código JavaScript se encuentre en un archivo externo llamado codigo.js y el script siga funcionando de la misma manera.
Después del primer mensaje, se debe mostrar otro mensaje que diga "Soy el primer script"
Añadir algunos comentarios que expliquen el funcionamiento del código
Añadir en la página html un mensaje de aviso para los navegadores que no tengan activado el soporte de JavaScript

Solución Ejercicio 2

Página html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ejercicio 2 - Archivo externo y varios mensajes</title>
		<script type="text/javascript" src="codigo.js"></script>
	</head>
	<body>
		<noscript>
			Esta página <strong>requiere</strong> el uso de JavaScript
		</noscript>
		<p>Esta página muestra 2 mensajes</p>
	</body>
</html>

Solución Ejercicio 2

Página codigo.js:

// Al cargarse el archivo JavaScript, se muestra un mensaje
alert("Hola Mundo!");
 // Despues del primer mensaje, se muestra otro mensaje seguido
alert("Hola Mundo por segunda vez!");

@@ Línea 7: / Línea 7: @@
 <div class="slides layout-regular template-default">
 <div class="slide">
+{{Formulario}}
 == Introducción ==
 </div>

Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/lenguajeJS/conceptosGenerales»

Revisión de 10:22 29 feb 2016

Programación web al lado del cliente