Este documento proporciona una introducción a JavaScript, incluyendo que es el lenguaje de programación que da interactividad a las páginas web, que se mezcla con HTML, y las diferentes maneras de escribir scripts JavaScript como ejecución directa y respuesta a eventos.
2. Es el lenguaje de
programación encargado
de dotar de mayor
interactividad y dinamismo
a las páginas web.
01
¿Qué es JavaScript?
El código JavaScript, en la
mayoría de los casos, se
mezcla con el propio
código HTML para generar
la página.
02
3. Maneras de escribir
scripts JavaScript
Ejecución directa
Es el método de ejecutar
scripts más básico. En este
caso se incluyen las
instrucciones dentro de la
etiqueta <script> .
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo ejecución directa</title>
</head>
<body>
<h1>Página con Javascript</h1>
<p>Esta página tiene un cuadro de diálogo, que se
mostrará nada más el navegador la procese.</p>
<script>
var personas = 4;
var importeEntradas = 3500000;
alert('Necesitas ' + personas * importeEntradas + '
Bs. para que entren todos al cine');
</script>
<p>Cuando el usuario pulse aceptar en el cuadro de
diálogo, el navegador mostrará la página completa.</p>
</body>
</html>
4. Maneras de escribir
scripts JavaScript
Respuesta a evento
Atributos que se colocan
dentro de la etiqueta que
queremos que responda a las
acciones del usuario.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo pasar ratón por encima</title>
</head>
<body>
<h1>Ejemplo Javascript</h1>
<span id="mielemento">Pasa el ratón por
aquí</span>
<script>
var pasadas = 0;
function anunciarPasadas() {
pasadas = pasadas + 1;
alert('Has pasado el ratón encima ' + pasadas + '
veces');
}
document.getElementById('mielemento').addEventListen
er('mouseenter', anunciarPasadas);
</script>
</body>
</html>
5. <script>
//Este es un comentario
de una línea
/*Este comentario se
puede extender
por varias líneas.
Las que quieras*/
</script>
Comentarios en el
código
En JavaScript se han de
respetar las mayúsculas
y las minúsculas.
No es lo mismo la
función alert() que la
función Alert().
Mayúsculas y
minúsculas
es a través del carácter
punto y coma (;)
var input;
if (input == undefined)
{
doThis();
} else
{
doThat();
}
Separación de
instrucciones
Sintaxis
JavaScript tiene una sintaxis
muy parecida a la de Java
6. Declaraciones en JavaScript
const
Declara un nombre de
constante de solo lectura y
ámbito de bloque.
Variables globales
<script>
var variableGlobal
</script>
Variables locales
<script>
function miFuncion ()
{
var variableLocal
}
</script>
var
Declara una variable,
opcionalmente la inicia a un
valor.
let
Declara una variable local
con ámbito de bloque,
opcionalmente la inicia a un
valor.
7. Tipos de datos
true y false
Booleano
Una secuencia de caracteres que
representan un valor de texto.
String
Un número entero o un número con
coma flotante.
Number
Un valor nulo
null
Un número entero con precisión
arbitraria.
BigInt
8. Operadores
Operadores de asignación
= Asignación.
+= Asignación con suma.
-= Asignación con resta
*= Asignación de la multiplicación
/= Asignación de la división
%= Se obtiene el resto y se
asigna
Operadores lógicos
! Operador NO o negación.
&& Operador Y.
|| Operador O.
Operadores aritméticos
+ Suma de dos valores
- Resta de dos valores
* Multiplicación de dos valores
/ División de dos valores
% El resto de la división de
dos números
++ Incremento en una unidad
-- Decremento en una unidad
Operadores de cadenas
+ Concatena dos cadenas
Operadores condicionales
== Comprueba si son iguales
!= Comprueba si dos son distintos
> Mayor que
< Menor que
>= Mayor igual
<= Menor igual
9. Estructuras de Control
If
Switch
For
W
hile
while (condition){
statement;
}
while
switch (expression) {
case label_1: statements_1; break;
case label_2: statements_2; break;
}
switch
if (condition) { statement_1; }
else { statement_2; }
if...else
for ([expresiónInicial]; [expresiónCondicional];
[expresiónDeActualización])
{ statement; }
for
11. Objetos incorporados
POO
Clases
para realizar funciones
matemáticas.
Math
para el trabajo con cadenas de caracteres
String
para realizar algunas cosas con números
Number
para el trabajo con fechas.
Date
Las clases se
escriben con la
primera letra en
mayúsculas.
Tiene que quedar
claro que una
clase es una
especie de
"declaración de
características y
funcionalidades"
de los objetos.
Las clases que
se encuentran
disponibles de
manera nativa en
Javascript
POO