Curso de JavaScript

De WikiEducator
Saltar a: navegación, buscar



Elementos del lenguaje

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>

Booleanos

Puede tener 2 valores: false o true. Trabajaremos con ellos en programación más avanzada de JavaScript. Ejemplos: 

var clienteRegistrado = false;
var ivaIncluido = true;

Operadores

Operadores de asignación

=	+=	-=	*=	/=	%=

var numero1 = 3;
var numero2 = 4;
 
5 = numero1;
/* Error, la asignación siempre se realiza a una variable,
    por lo que en la izquierda no se puede indicar un número */ 
// Ahora, la variable numero1 vale 5
numero1 = 5;
// Ahora, la variable numero1 vale 4
numero1 = numero2;
var numero = 5;
numero=numero +1;
alert(numero);  // numero = 6
 
var numero = 5;
++numero;
alert(numero);  // numero = 6
 
 
var numero = 5;
numero=numero - 1;
alert(numero);  // numero = 4
 
var numero = 5;
--numero;
alert(numero);  // numero = 4

Los operadores incremento y decremento se pueden ejecutar como prefijo o sufijo: 

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
 
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Sintaxis&oldid=9033»