Diferencia entre revisiones de «Usuario:Juanda/javascript/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎Actividades)
 
(41 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
−
{{#widget:Slides}} {{MiTitulo| Personalización Ubuntu 12.04}}  
+
{{Usuario:juanda/javascript/nav }}
 +
 
 +
{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
−
= Curso de JavaScript =
+
<div class="slide">
  
 
== Introducción ==
 
== Introducción ==
−
 
+
</div>
 +
<div class="slide">
 
=== Qué es JavaScript ===
 
=== Qué es JavaScript ===
  
Línea 12: Línea 15:
 
*No tiene nada que ver con Java. Java es un lenguaje mucho más complejo y potente.  
 
*No tiene nada que ver con Java. Java es un lenguaje mucho más complejo y potente.  
 
*Requiere tener un conocimiento previo de HTML / XHTML
 
*Requiere tener un conocimiento previo de HTML / XHTML
−
 
+
</div>
 +
<div class="slide">
 
=== Para que sirve JavaScript ===
 
=== Para que sirve JavaScript ===
  
Línea 22: Línea 26:
 
</source>  
 
</source>  
  
−
*Puede reaccionar a eventos:<br/>
+
*Puede reaccionar a eventos: Página que termina de cargar, click en un elemento HTML, etc.
−
Página que termina de cargar <br/> Click en un elemento HTML ** …
+
 
*Lee y escribe elementos HTML  
 
*Lee y escribe elementos HTML  
 
*Validación de datos en formularios (ahorra procesamiento al servidor y agiliza la respuesta a errores para el usuario).  
 
*Validación de datos en formularios (ahorra procesamiento al servidor y agiliza la respuesta a errores para el usuario).  
 
*Detección del navegador del usuario  
 
*Detección del navegador del usuario  
 
*Creación de cookies
 
*Creación de cookies
 +
</div>
 +
<div class="slide">
 +
=== Etiquetas de JavaScript en el código html ===
 +
<source lang="html4strict">
 +
<html>
 +
<body>
 +
<script type="text/javascript">
 +
<!--
 +
document.write("¡Hola Mundo!");
 +
//-->
 +
</script>
 +
</body>
 +
</html>
 +
</source>
 +
*Etiquetas de JavaScript:
 +
<source lang="javascript">
 +
 +
<script type="text/javascript"> </script>
 +
</source>
 +
* 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!
 +
</div>
 +
<div class="slide">
 +
<source lang="html4strict">
 +
<!--  -->
 +
</source>
 +
* Comentario en JavaScript, útil en el ejemplo anterior, para que no se interprete dentro del JavaScript la marca de comentario de html:
 +
<source lang="javascript">
 +
// Comentario en JavaScript
 +
</source>
 +
 +
* Método write del objeto document para escribir en la página web:
 +
<source lang="javascript">
 +
document.write
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
===Colocación del JavaScript===
 +
====JavaScript en el head====
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
<script type="text/javascript">
 +
....
 +
</script>
 +
</head>
 +
...
 +
</html>
 +
</source>
 +
*Ejecución mediante llamada, al “disparar” (trigger) un evento.
 +
*Ejecución previa a la renderización del del body
 +
 +
</div>
 +
<div class="slide">
 +
====JavaScript en el body====
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
</head>
 +
<body>
 +
<script type="text/javascript">
 +
....
 +
</script>
 +
</body>
 +
</html>
 +
</source>
 +
* Ejecución: Al cargar la página (generará contenido de la página)
 +
 +
</div>
 +
<div class="slide">
 +
====JavaScript en un fichero externo====
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
<script type="text/javascript" src="xxx.js"></script>
 +
</head>
 +
<body>
 +
</body>
 +
</html>
 +
</source>
 +
 +
*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
 +
</div>
 +
<div class="slide">
 +
 +
====JavaScript como valor de un atributo ====
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
</head>
 +
<body>
 +
<p onclick=”funcion();">
 +
Ejemplo de Javascript
 +
</p>
 +
</body>
 +
</html>
 +
</source>
 +
 +
* Ensucia el código html y complica el mantenimiento del JavaScript
 +
* Solo lo utilizaremos aquí para algunos casos especiales
 +
 +
</div>
 +
<div class="slide">
 +
 +
=== 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.
 +
 +
</div>
 +
<div class="slide">
 +
 +
====Ejemplo uso etiqueta noscript====
 +
<source lang="html4strict">
 +
<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>
 +
 +
</source>
 +
 +
</div>
 +
 +
<div class="slide">
 +
===Actividades===
 +
 +
</div>
 +
 +
<div class="slide">
 +
 +
{{Actividad|
 +
Title=Javascript en el head|
 +
* Crea una página web con el siguiente código y observa el orden de carga en el navegador.
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
}}
 +
 +
</div>
 +
 +
<div class="slide">
 +
 +
 +
{{Actividad|
 +
Title=Javascript en el body|
 +
* Crea una página web con el siguiente código y observa el orden de carga en el navegador.
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
}}
 +
 +
 +
</div>
 +
<div class="slide">
 +
 +
===Tareas===
 +
 +
</div>
 +
<div class="slide">
 +
 +
{{DGA tarea|
 +
Title=Ejercicio 1|
 +
Crea los ejercicios anteriores pero con el JavaScript como elemento inline
 +
}}
 +
 +
</div>
 +
<div class="slide">
 +
* Solución Ejercicio 1
 +
¡Ojo con las comillas!
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
 +
</div>
 +
 +
<div class="slide">
 +
 +
{{DGA tarea|
 +
Title=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
 +
}}
 +
 +
</div>
 +
 +
<div class="slide">
 +
* Solución Ejercicio 2
 +
Página html:
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
* Solución Ejercicio 2
 +
Página codigo.js:
 +
<source lang="html4strict">
 +
// 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!");
 +
 +
</source>
 +
</div>
 +
 
</div>
 
</div>

Última revisión de 12:00 25 sep 2012



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.
  • No tiene nada que ver con Java. Java es un lenguaje mucho más complejo y potente.
  • Requiere tener un conocimiento previo de HTML / XHTML

Para que sirve JavaScript

  • Herramienta de programación (sentencias condicionales, bucles...)
  • Inserción de texto dinámico en una página HTML: 
	document.write("<h1>" + name + "</h1>")
  • Puede reaccionar a eventos: Página que termina de cargar, click en un elemento HTML, etc.
  • Lee y escribe elementos HTML
  • Validación de datos en formularios (ahorra procesamiento al servidor y agiliza la respuesta a errores para el usuario).
  • Detección del navegador del usuario
  • Creación de cookies

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

Colocación del 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



Icon activity.jpg

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>







Icon activity.jpg

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



Crystal Clear app vcalendar.png

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>



Crystal Clear app vcalendar.png

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!");
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Introducción&oldid=9188»