Existen varias formas de incluir javascript en html.
Ejemplo:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Ejemplo 1</title>
<script type="text/javascript">
alert("Prueba de JavaScript en el head");
</script>
</head>
<body>
</body>
</html>
Ejemplo:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Ejemplo 1</title>
</head>
<body>
<h1>Ejemplo 2</h1>
<script type="text/javascript">
alert("Prueba de JavaScript en el body");
</script>
</body>
</html>
Ejemplo:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Hola Mundo</title> <script type="text/javascript" src="codigo.js"></script> </head> El archivo codigo.js tendría por ejemplo: Hola, esta es mi página.
Ejemplo:
<body>
<h1>Ejemplo 3</h1>
<p> Esto es un párrafo normal </p>
<p onclick="alert('Insertando javascript si haces click aquick')">
Cuidado si haces click aqui !!!
</p>
<script type="text/javascript">
alert("Prueba de JavaScript en el body");
</script>
</body>
No es lo mismo:
alert("hola");
Alert("hola");
Ejemplo:
var jose = 4 Funciona pero no es recomendable. var luis = 5; Mejor así.
Javascript tiene una serie de palabras reservadas que no se pueden utilizar para definir variables, funciones, etc. Estas palabras son :
break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with
Tipos de datos primitivos: Números, cadenas de texto y valores booleanos.
Todos se representan a través del formato punto flotante de 64 bits. Es el formato llamado double en Java o C++.
Se pueden utilizar tambien valores hexadecimales escribiendo 0x y luego el número hexadecimal.
Con este tipo de datos (string) es posible representar secuencias de letras, dígitos, signos de puntuación o cualquier otro carácter de Unicode. La cadena de caracteres va entre comillas simples o dobles ( " o ' ). Las cadenas de texto se pueden concatenar (juntar) con el signo +.
Ejemplo:
var cadena = "Pepe"; cadena = cadena + "Perez"; La cadena contiene ahora "Pepe Perez".
Secuencias de escape:
| Secuencia de escape | Resultado |
|---|---|
| \' | Comilla simple |
| \" | Comilla doble |
| \\ | Símbolo \ |
| \n | Nueva línea |
| \t | Tabulador horizontal |
| \v | Tabulador vertical |
| \f | Salto de página |
| \r | Retorno de carro |
| \b | Retroceso |
Almacena valores lógicos: true o false.
Zonas de memoria de un ordenador que se identifican con un nombre y en las cuales se almacenan datos.
Declaración:
var variable1; var variable2; var variable3, variable4;
Inicialización:
var variable1 = 30; Por asignación directa.
var variable2 = variable1 *^20; Asignación indirecta a través de un cálculo.
var variable3 = prompt("Introduce un valor"); Solicitando valor al usuario.
Se pueden definir variables sin la palabra clave var. En ese caso la variable se crea como global, con lo que si la variable ya existe se sustituirá su valor por el de la nueva variable. O sea, que es muy recomendable utilizar la palabra clave var para declarar variables.
Tipos:
- Operadores aritméticos. - Operadores lógicos. - Operadores de asignación. - Operadores de comparación. - Operadores condicionales.
| Operador | Función |
|---|---|
| + | Suma entre dos operandos |
| - | Resta entre dos operandos |
| * | Multiplicación |
| / | División |
| % | Divide dos operandos y devuelve el resto |
| ++ | Incremento de un valor |
| -- | Decremento de un valor |
| Operador | Función |
|---|---|
| += | Suma y asigna |
| -= | Resta y asigna |
| *= | Multiplica y asigna |
| /= | Divide y asigna |
| %= | Módulo y asigna |
Ejemplo:
var ingresos = 1000; ingresos *= 2; Es lo mismo que poner: ingresos = ingresos * 2;
| Operador | Función |
|---|---|
| < | Si el operando izquierdo es menor que el derecho devuelve true |
| <= | Si es menor o igual |
| == | Si es igual |
| > | Si es mayor |
| >= | Si es mayor o igual |
| != | Si los dos operandos no son iguales devuelve true |
| === | Si los dos operandos son iguales y del mismo tipo de datos |
| !== | Si los operandos son diferentes y/o de tipos diferentes devuelve true |
Combinan expresiones lógicas con el fin de evaluar si el resultado de una combinación es verdadero o falso. Se suelen utilizar para tomar decisiones.
| Operador | Significado | Función |
|---|---|---|
| && | Y | Verdadero si todos los valores son verdaderos (true) |
| || | O | Verdadero si al menos uno de los valores es verdadero |
| ! | No | Invierte el valor booleano del operando |
Podemos indicarle al navegador que ejecute una acción después de evaluar una expresión. Consta de tres partes : la expresión a evaluar, la acción a realizar si es verdadera y la acción a realizar si es falsa.
El operador es:
expresión ? AcciónVerdadero : AcciónFalso;
<script type="text/javascript">
var a = prompt("Introduce un número");
a <= 5 ? alert("menor que 5") : alert("mayor o igual que 5");
</script>
Permite tomar decisiones. En este formato, si la expresión es verdadera se ejecutan instrucción1, instrucción2 y siguientes, al terminar sigue con instruccionA, instruccionB y siguientes.
Si la expresión es falsa, no se ejecutan las instrucciones entre llaves y pasa a ejecutar instrucciónA, instruccionB y siguientes.
if(expresion) {
instruccion1;
instrucción2;
…...
}
instruccionA;
instrucciónB;
…..
En este formato se indica que si la expresión es verdadera se ejecutarán las instrucciones que terminan con un número y en caso contrario (else) se ejecutarán las que terminan el letra.
if(expresion) {
instruccion1;
instruccion2;
} else {
instruccionA;
instruccionB;
}
Se complica un poco el if con la expresion else if, de todas formas lo ponemos aunque se recomienda cuando hay muchos if anidados que se utilice la sentencia switch en aras de una mejor comprensión y seguimiento del código.
if(expresion) {
instrucciones1;
instrucciones2;
} else if (expresion2) {
instruccionesA;
instruccionesB;
}
else {
instrucciones_1;
instrucciones_2;
}
Permite comparar el valor de una variable con algunos valores conocidos.
switch ( expresion) {
case valor1:
instrucciones si expresion es igual a valor1 ;
break;
case valor2:
instrucciones si expresion es igual a valor2;
break;
default:
instrucciones si expresion no es ninguno de los anteriores;
}
Se evalua la expresión. Si es verdadera, se ejecutan las instrucciones. Al terminar se vuelve a evaluar la expresión. De esta forma se ejecutarán las instrucciones mientras la expresión sea verdadera.
while (expresion) {
instruccion1;
instruccion2;
}
Una variación del bucle while. En el do while la instrucción se ejecuta al menos una vez.
do {
instruccion1;
instruccion2;
} while (expresion);
Bucle que permite que el navegador ejecute las instrucciones que se encuentran dentro hasta que la expresión sea false.
for ( valor_inicial ; expresion_condicional ; incremento_decremento ) {
instruccion1;
instruccion2;
}