Curso de JavaScript

De WikiEducator
Saltar a: navegación, buscar



Sintaxis

  • JavaScript diferencia MAYÚSCULAS y minúsculas
  • Las instrucciones no necesitan acabar en punto y coma.
document.write("¡Hola Mundo!");
//también puede acabar en salto de línea:
document.write("¡Hola de nuevo Mundo!")
  • Comentarios:
// comentario de una línea
/* comentario 
	Multilínea */
  • Se ignoran los espacios extras en blanco:
nombre="Pepito";
nombre = "Pepito";

Son equivalentes

  • Aviso de continuación de sentencia en otra línea:
document.write("Hello \
World!");


Variables

  • Declaración de variables
var x;
var _nombrecoche;

Las variables no se inicializan (su valor está vacío). ¡Habrá que inicializarlas!

  • Declaración e inicialización de variables
var x=5;
var _nombrecoche=”volvo”;

Las variables se pueden declarar e inicializar a la vez. Si es texto, ¡entre comillas!

  • Se pueden utilizar variables sin haber sido declaradas:
var numero_1;
var numero_2;
 
numero_1 = 3;
numero_2 = 1;
 
resultado = numero_1 + numero_2;
  • Numéricas
var iva = 16;        // variable tipo entero
var total = 234.65;  // variable tipo decimal


  • Cadenas de texto
/* El contenido de texto1 tiene comillas simples, por lo que  
se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
 
/* El contenido de texto2 tiene comillas dobles, por lo que
    se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';
  • Caracteres especiales:
\'		comilla simple
\"		comillas
\&		ampersand
\\		backslash
\n		nueva línea
\r		retorno de carro
\t		tabulador
\b		backspace
\f		form feed



Crystal Clear app vcalendar.png

Ejercicio 3

Crea una página que guarde un texto en una variable y lo muestre luego por pantalla:

Pantallazo ejercicio


  • Solución ejercicio 3:
<!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 - Mostrar mensajes complejos</title>
		<script type="text/javascript">
  			var msg = "Hola Mundo! \n Qué facil es incluir \'comillas simples\' \n 							y \"comillas dobles\" ";
  			alert(msg);
		</script>
	</head>
	<body>
		<p>Esta página muestra un mensaje complejo</p>
	</body>
</html>

Arrays

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente.

//variables para los días de la semana:
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";
//usando un array:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
//el array empieza en 0
var diaSeleccionado = dias[0];    // diaSeleccionado = "Lunes"
var otroDia = dias[5];            // otroDia = "Sábado"



Crystal Clear app vcalendar.png

Ejercicio 4

Crear un array llamado meses y que almacene el nombre de los doce meses del año. Mostrar por pantalla los doce nombres utilizando la función alert().


  • Solución ejercicio 4:
<!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 3 - Arrays simples</title>
		<script type="text/javascript">
			var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", 							"Julio", “Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
			alert(meses[0]); alert(meses[1]);alert(meses[2]);alert(meses[3]);
			alert(meses[4]); alert(meses[5]);alert(meses[6]);alert(meses[7]);
			alert(meses[8]); alert(meses[9]);alert(meses[10]);alert(meses[11]);
		</script>
	</head>
	 <body>
		<p>Esta página muestra los 12 meses del año</p>
	</body>
</html>