Introducción a JavaScript
1
¿Qué es JavaScript?
● JavaScript es un lenguaje de programación que se
utiliza principalmente para crear páginas web dinámicas.
● Una página web dinámica es aquella que reacciona al
producirse eventos
● JavaScript es un lenguaje de programación interpretado,
se pueden probar directamente en cualquier navegador
sin necesidad de compilarlo.
2
Incluir JavaScript en HTML
● Existen 3 formas de incluir JavaScript en un documento:
– Incluir JavaScript en el mismo documento HTML
– Definir JavaScript en un archivo externo
– Incluir JavaScript en los elementos HTML
3
Incluir JavaScript en el mismo
documento HTML
● El código JavaScript se encierra entre etiquetas <script> y se
incluye en cualquier parte del documento.
● En HTML5 no hace falta especificar el atributo type:
● Se recomienda definir el código JavaScript dentro de la
cabecera del documento (dentro de la etiqueta <head>)
● Inconveniente: si se quiere modificar el bloque de código, hay
que modificarlo en todas las páginas que lo incluyan.
4
5
6
Definir JavaScript en un archivo
externo
● Las instrucciones se incluyen en un archivo externo de
tipo JavaScript, (extensión ".js").
● Los documentos HTML enlazan mediante la etiqueta
<script>. En el atributo src, le indicaremos el nombre del
archivo.
● Los archivos de tipo JavaScript son documentos
normales de texto con la extensión .js, que se pueden
crear con cualquier editor de texto.
● Ventaja: Se simplifica el código HTML de la página, que
se puede reutilizar el mismo código JavaScript en todas
las páginas del sitio web 7
Ejemplo
8
Definir JavaScript en elementos
HTML
● Consiste en incluir trozos de JavaScript dentro del código
HTML de la página.
● Inconveniente: ensucia innecesariamente el código
HTML de la página y complica el mantenimiento del
código JavaScript.
● En general, este método sólo se utiliza para definir
algunos eventos y en algunos otros casos especiales.
9
Ejemplo:
10
11
Etiqueta noscript
● Algunos navegadores no disponen de soporte completo
de JavaScript, o permiten bloquearlo parcialmente o
completamente.
● El lenguaje HTML define la etiqueta <noscript> para
mostrar un mensaje al usuario cuando su navegador no
puede ejecutar JavaScript.
12
En las opciones de Chrome
● Por ejemplo en Chrome, para acrtivarlas o desactivarlas:
– Abra Chrome en su ordenador.
– Haga clic en. Configuración.
– Seleccione Seguridad y privacidad.
– Haga clic en Configuración de sitios.
– Haga clic en JavaScript.
– Seleccione Los sitios pueden usar JavaScript.
13
14
Ejemplo
15
Algunos conceptos
●
Script: cada uno de los programas, aplicaciones o trozos de
código creados con el lenguaje de programación JavaScript.
●
Sentencia: cada una de las instrucciones que forman un
script.
●
Palabras reservadas: son las palabras (en inglés) que se
utilizan para construir las sentencias de JavaScript y que por
tanto no pueden ser utilizadas libremente. Las palabras
actualmente reservadas por JavaScript son: break, case,
catch, continue, default, delete, do, else, finally, for, function,
if, in, instanceof, new, return, switch, this, throw, try, typeof,
var, void, while, with.
16
Sintaxis
● Conjunto de reglas que deben seguirse al escribir un
programa. Las de JavaScript son:
– No se tienen en cuenta los espacios en blanco y las
nuevas líneas
– Se distinguen las mayúsculas y minúsculas
– No se define el tipo de las variables
– No es necesario terminar cada sentencia con ;
– Se pueden incluir comentarios // o /* comentario */
17
Concepto de variable
● Una variable es un elemento que se
emplea para almacenar y hacer
referencia a datos.
● Su utilización permite crear programas
independientemente de los valores
concretos utilizados.
18
Las variables en JavaSript
● Declaración:
– Mediante la palabra reservada var.
– La palabra reservada var solamente se debe indicar al
definir por primera vez la variable, en el resto de
instrucciones del script, solamente es necesario
indicar su nombre.
● Por ejemplo
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2; 19
Las variables en JavaSript
● Inicialización: Si cuando se declara una variable se le
asigna también un valor, se dice que la variable ha sido
inicializada. var a=1;
● En JavaScript no es obligatorio inicializar las variables,
ya que se pueden declarar por una parte y asignarles un
valor posteriormente. Por ejemplo:
var a;
a=1
20
El nombre de las variables
● El nombre de una variable también se conoce como
identificador y debe cumplir las siguientes normas:
– Sólo puede estar formado por letras, números y los
símbolos $ (dólar) y _ (guión bajo).
– El primer carácter no puede ser un número.
● Ejemplo de nombres válidos: $numero1, _$letra,
$$$otroNumero, $_a__$4;
● Ejemplo de nombres no válidos: 1numero,
numero;1_123
21
Tipos de variables
● Determinan el espacio a reservar en función del tipo de
dato que almacenan.
● En Javascript no se indica el tipo de datos al
declararlas, determinan el tipo en función del
contenido que tengan en un momento dado.
● El contenido puede ser:
– Numérico: entero o real
– Cadena de texto: Carácter o conjunto de palabras o
frases
– Arrays: conjunto de variables 22
– Booleanos: true o false
Tipos de datos en JavaScript:
Numéricos
● Numéricas: Se utilizan para almacenar valores
numéricos enteros (llamados integer en inglés) o
decimales (llamados float en inglés).
– El valor se asigna indicando directamente el número
entero o decimal.
– Los números decimales utilizan el carácter . (punto)
en vez de , (coma) para separar la parte entera y la
parte decimal
● Ejemplos:
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal 23
Tipos de datos en JavaScript:
Cadenas de texto
● Cadenas de texto: Se utilizan para almacenar caracteres,
palabras y/o frases de texto. Para asignar el valor a la
variable, se encierra el valor entre comillas dobles o
simples, para delimitar su comienzo y su final:
● Ejemplos:
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
24
Caracteres especiales
● Para incluir caracteres que tienen un significado para el
lenguaje se utilizan:
● Si se quiere incluir... Se debe incluir...
– Una nueva línea \n
– Un tabulador \t
– Una comilla simple \'
– Una comilla doble \"
– Una barra inclinada \\
● Ejemplos:
var texto1 = 'Una frase con \'comillas simples\' dentro'; 25
var texto2 = "Una frase con \"comillas dobles\" dentro";
Tipos de datos JavaScript:
Boolean
● También conocidas como variables de tipo lógico.
● Almacena un tipo especial de valor que solamente puede
tomar dos valores: true (verdadero) o false (falso). No se
puede utilizar para almacenar números y tampoco
permite guardar cadenas de texto.
● Los únicos valores que pueden almacenar estas
variables son true y false, por lo que no pueden utilizarse
los valores verdadero y falso.
● Por ejemplo:
var clienteRegistrado = false;
28
var ivaIncluido = true;
Operadores
● Los operadores permiten manipular el valor de las
variables, realizar operaciones matemáticas con sus
valores y comparar diferentes variables.
● Permiten a los programas realizar cálculos complejos y
tomar decisiones lógicas en función de comparaciones y
otros tipos de condiciones.
29
El operador de asignación
● Es el más utilizado y el más sencillo.
● Se utiliza para guardar un valor específico en una
variable.
● El símbolo utilizado es =
● Ejemplo:
var numero1 = 3;
● A la izquierda del operador, siempre debe indicarse el
nombre de una variable.
● A la derecha del operador, se pueden indicar variables,
valores, condiciones lógicas, etc. 30
Incremento y decremento
● Estos dos operadores solamente son válidos para las
variables numéricas enteras y se utilizan para
incrementar o decrementar en una unidad el valor de una
variable.
var numero = 5;
++numero;
alert(numero); // numero = 6
● Son operadores unarios que pueden aparecer delante o
detrás del nombre de la variable.
31
++ y -- en una expresión
compuesta:
● Si el operador ++ se indica como prefijo del identificador
de la variable, su valor se incrementa antes de realizar
cualquier otra operación.
● Si el operador ++ se indica como sufijo del identificador
de la variable, su valor se incrementa después de
ejecutar la sentencia en la que aparece.
var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2; // numero3 = 7,
numero1 = 6
32
var numero1 = 5;
Los operadores lógicos
● Se utilizan para tomar decisiones sobre las instrucciones
que debería ejecutar el programa en función de ciertas
condiciones.
● El resultado de cualquier operación que utilice
operadores lógicos siempre es un valor lógico o
booleano.
– Negación (not) ---> JavaScript lo representa con !
– Conjunción (and) ----> &&
– Disyunción (or) ----> ||
33
Operadores lógicos
a !a a b a&&b a||b
true false false false false false
false true false true false true
true false false true
true true true true
34
Operadores matemáticos
● JavaScript permite realizar manipulaciones matemáticas
sobre el valor de las variables numéricas. Los
operadores definidos son:
– Suma (+)
– Resta (-)
– Multiplicación (*)
– División (/)
– Resto (%)
35
Operadores relacionales
● Los operadores relacionales definidos por JavaScript
permiten realizar comparaciones y el resultado es un
valor lógico:
– mayor que (>)
– menor que (<)
– mayor o igual (>=)
– menor o igual (<=)
– igual que (==)
– distinto de (!=)
36
== / =
● Se debe tener especial cuidado con el operador de
igualdad (==), ya que es el origen de la mayoría de
errores de programación, incluso para los usuarios que
ya tienen cierta experiencia desarrollando scripts.
● El operador == se utiliza para comparar el valor de dos
variables, por lo que es muy diferente del operador =,
que se utiliza para asignar un valor a una variable
37
Estructuras condicionales
● Permiten alterar el orden de ejecución de las
instrucciones, haciendo que se ejecuten unas u otras en
función del cumplimiento de una condición.
● Existen 3 tipos:
– Simples
– Dobles
– Multiples
38
Condicional simple
if (condicion){
…..
}
39
Ejemplo:
var mostrarMensaje = true;
if (mostrarMensaje) {
alert("Hola Mundo");
}
40
Condicional doble
If (condicion) {
...
} else {
...
} 41
Ejemplo:
var edad = 18;
If (edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
42
Múltiple
switch (expresión) {
case valor1:
// Sentencias a ejecutar si expresión es valor1
break;
case valor2:
// Sentencias a ejecutar si la expresión es valor2
break;
case valor3:
// Sentencias a ejecutar si la expresión es valor3
break;
default:
//Sentencias a ejecutar si el valor no es ninguno de los anteriores
43
}
Ejemplo:
Prompt saca
ventana para
pedir datos,
Devuelve una
cadena
parseInt(cadena,base)
Convierte la cadena a entero
44
Estructuras repetitivas:
● Su cometido es la repetición de un conjunto de
instrucciones un cierto número de veces.
● Existen varios tipos:
– Las que evalúan la condición al comienzo
● For:
● While
– Las que la evalúan al final
● Do..while
–
45
Estructura repetitiva FOR
● Se usa principalmente cuando se sabe el número de
veces que se va a repetir el bucle.
● Su sintaxis es:
for(inicializacion; condicion; actualizacion) {
...
}
●
46
Ejemplo for
47
Estructura repetitiva while
● La estructura while permite crear bucles que se ejecutan
ninguna o más veces, dependiendo de
● la condición indicada. Su definición formal es:
while(condicion) {
...
}
48
Ejemplo:
49
Estructura repetitiva do..while
● El bucle de tipo do...while es muy similar al bucle while,
salvo que en este caso siempre se ejecutan las
instrucciones del bucle al menos la primera vez. Su
definición formal es:
do {
...
} while(condicion);
● La condición se comprueba después de cada repetición,
la primera vez siempre se ejecutan las instrucciones del
bucle.
50
Ejemplo
51
Funcionamiento
● Al llegar al for inicializa la variable de control del bucle
● Mientras la condición indicada se siga cumpliendo, repite
la ejecución de las instrucciones definidas dentro del for.
Además, después de cada repetición, actualiza el valor
de las variables que se utilizan en la condición".
– La "inicialización" es la zona en la que se establece
los valores iniciales de la/s variable/s de control.
– La "condición" es el único elemento que decide si
continua o se detiene la repetición.
– La "actualización" incrementa o decrementa la
variable de control del bucle. 52
Formas de escribir
● [Link](mensaje) ←-- tiene mas posibilidades
Este método imprime datos sobre la consola de desarrollo. Y es muy útil
para tomar notas, verificar el estado de nuestras variables, hacer
debugging, y probar nuestro proyecto.
● [Link](mensaje)
Escribe una cadena de texto dentro del hilo de un document
Principalmente se utiliza para generar codigo html de forma dinámica
● alert (mensaje)
El método [Link]() muestra un diálogo de alerta con un mensaje
opcional, y aguardará hasta que el usuario cierre la ventana de diálogo.
53
Pedir datos
● El método [Link]() muestra un diálogo con mensaje opcional,
que solicita al usuario que introduzca un texto.
Sintaxis
result = [Link](message, default);
● result es una cadena de texto que contiene el valor introducido por el
usuario, o null.
● message es una cadena de texto que se mostrará al usuario. Este
parámetro es opcional y puede ser omitido si no se necesita mostrar nada
en la ventana.
● default es una cadena de texto que contiene el valor predeterminado para
el texto de entrada. Es un parámetro opcional.
54
