Introducción a
JavaScript
DISEÑO WEB Y APLICACIONES
Curso académico
2025 – 2026
Diseño Web y Aplicaciones/JavaScript 2
Índice
1. Introducción
2. Lenguaje JavaScript
3. Inclusión de JavaScript en una web
4. Árbol BOM (Browser Object Model)
5. Árbol DOM (Document Object Model)
6. Manejadores de eventos
7. Algunos métodos
8. Formularios
9. Menús
Diseño Web y Aplicaciones/JavaScript 3
1. Introducción
▪ ORIGEN
▪ Creado en sólo 10 días en mayo de 1.995, por Brendan Eich cuando
trabajaba en Netscape. Actualmente en Mozilla.
▪ Nombre original: Mocha.
▪ Septiembre de 1.995: LiveScript.
▪ Diciembre de 1.995: JavaScript.
▪ Estandarizado bajo el nombre de ECMAScript (1.996-1.999).
▪ Creación de páginas web dinámicas.
▪ Se actualizan cuando el usuario hace peticiones, navegando por las páginas o
actualizando su contenido, de forma que incorporan todo tipo de efectos
visuales (texto, imágenes, animaciones, ventanas con mensajes de avisos…).
Diseño Web y Aplicaciones/JavaScript 4
1. Introducción
▪ CARACTERÍSTICAS
▪ Lenguaje de programación interpretado.
▪ Débilmente tipado.
▪ Basado en Objetos.
▪ De propósito general, pero utilizado habitualmente en navegadores Web
(client-side JavaScript).
▪ Sentencias de control con sintaxis similar a Java o C.
▪ if, if else, switch
▪ for, while, do while
▪ return, break, continue
Diseño Web y Aplicaciones/JavaScript 5
2. Lenguaje JavaScript
▪ SINTAXIS DEL LENGUAJE
▪ Es case sensitive.
▪ Distingue entre mayúsculas y minúsculas.
▪ No se define el tipo de las variables. A diferencia de otros lenguajes de
programación, una misma variable puede almacenar diferentes tipos de
datos.
▪ Cada sentencia acaba con el carácter ; aunque no es obligatorio.
▪ Comentarios:
// Esto es un comentario de una línea.
/* Esto es un comentario
de varias líneas. */
Diseño Web y Aplicaciones/JavaScript 6
2. Lenguaje JavaScript
▪ VARIABLES
▪ Identificador ≡ nombre de la variable.
▪ Sólo puede estar formado por letras, números y los símbolos ‘$’ y ‘_’. El primer
carácter no puede ser un número.
▪ NO puede ser una palabra reservada del lenguaje.
▪ Declaración con la palabra reservada ‘var’:
var identificador; ¡¡¡NO se indica el TIPO!!!
▪ Inicialización: identificador = valor;
▪ Ejemplo: (declaración e inicialización en la misma sentencia)
var num1 = 2;
var num2 = 3;
var suma = num1 + num2;
Diseño Web y Aplicaciones/JavaScript 7
2. Lenguaje JavaScript
▪ VARIABLES
▪ Formas de declarar una variable:
1) Con la palabra reservada var
2) Con la palabra reservada let
3) Con la palabra reservada const
4) Sin usar ninguna palabra reservada
▪ Var se usa para crear variables globales, mientras que let y const pueden crear variables
de bloque.
▪ Con let y const no se puede redeclarar o reasignar una variable, mientras que con var sí.
Diseño Web y Aplicaciones/JavaScript 8
2. Lenguaje JavaScript
▪ VARIABLES
▪ Formas de nombrar variables: Nomenclaturas
1) camelCase (ej.: nombreEstudiante)
2) snake_case (ej.: nombre_estudiante)
3) SCREAMING_CASE (ej.: NOMBRE_CONSTANTE)
▪ En JavaScript se usa camelCase (aunque no es obligatorio).
▪ snake_case se suele emplear para nombrar los archivos:
mi_archivo.js
▪ SCREAMING_ CASE se usa para nombrar constantes.
Diseño Web y Aplicaciones/JavaScript 9
2. Lenguaje JavaScript
Palabras Reservadas
abstract debugger final instanceof protected transient
boolean default finally int public true
break delete float interface return try
byte do for let short typeof
case double function long static var
catch else goto native super void
char enum if new switch volatile
class export implements null synchronized while
const extends import package this with
continue false in private throw yield
Diseño Web y Aplicaciones/JavaScript 10
2. Lenguaje JavaScript
▪ TIPOS DE DATOS
▪ Simples
▪ Numéricos (Number)
▪ Cadenas de caracteres (String)
▪ Booleanos (Boolean)
▪ Null
▪ Undefined
▪ Objetos
▪ Arrays
▪ Expresiones regulares
▪ Funciones
▪ Objetos
Diseño Web y Aplicaciones/JavaScript 11
2. Lenguaje JavaScript
▪ TIPOS DE DATOS
▪ Numéricos
▪ Valores enteros o decimales.
▪ Dos valores especiales: NaN, Infinite
▪ Cadenas de texto o strings
▪ Encerradas entre comillas dobles o simples.
var c1 = “Esto es una cadena de texto.”;
var c2 = ‘Esto también es una cadena de texto.’;
▪ Para incluir caracteres especiales se utilizan los siguientes caracteres de escape.
Nueva línea Tabulador Comilla simple Comilla doble Barra inclinada
\n \t \’ \” \\
Diseño Web y Aplicaciones/JavaScript 12
2. Lenguaje JavaScript
▪ TIPOS DE DATOS
▪ Booleanos
▪ Dos valores: true, false
▪ Arrays
▪ Conjunto de variables. Pueden ser de cualquier tipo.
▪ Un string es un array de caracteres.
▪ Declaración e inicialización:
var nombre_array = [valor1, valor2, ..., valorN];
▪ Ejemplo:
var diasSemana = [“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”,
“Sábado”, “Domingo”];
var inicioSemana = diasSemana[0]; // inicioSemana = “Lunes”
Diseño Web y Aplicaciones/JavaScript 13
2. Lenguaje JavaScript
▪ TIPOS DE DATOS
▪ Arrays
▪ A diferencia de otros lenguajes se pueden tener distintos tipos de datos dentro de un
array, incluido otro array.
▪ También se pueden crear con la palabra reservada new.
▪ Ejemplo:
var diasSemana = new Array(“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”,
“Sábado”, “Domingo”);
var estudiantes = new Array( new Array( “Pedro”, 18, “H”), new Array( “Sara”,18,”M”));
Diseño Web y Aplicaciones/JavaScript 14
2. Lenguaje JavaScript
▪ OPERADORES
Incremento/ De
Asignación Matemáticos Lógicos
Decremento comparación
= ++ === + (suma números) && (and)
+= -- !== + (concatena strings) || (or)
-= < - (resta) ! (negación)
Prefijo (se * (multiplicación)
*= incrementa antes de <=
la operación) ** (exponente)
/= > / (división)
%= Sufijo (se >= % (módulo)
incrementa después)
Diseño Web y Aplicaciones/JavaScript 15
2. Lenguaje JavaScript
▪ PUERTAS LÓGICAS
Diseño Web y Aplicaciones/JavaScript 16
2. Lenguaje JavaScript
▪ OPERADOR typeof
▪ Devuelve una cadena de texto con el tipo del dato que le pasemos.
BUG
Diseño Web y Aplicaciones/JavaScript 17
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ if … else
if ( condición ) { // 0, “ ” y null equivalen a false
// Instrucciones
}
else {
// Instrucciones
}
▪ for
for ( inicialización; condición; actualización ) {
// Instrucciones
}
Diseño Web y Aplicaciones/JavaScript 18
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ Ejemplo if … else
▪ Ejemplo for
Diseño Web y Aplicaciones/JavaScript 19
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ for … in
for ( índice in array ) {
// Instrucciones
}
▪ while, do … while
while( condición ){
// Instrucciones
}
do {
// Instrucciones
} while( condición )
Diseño Web y Aplicaciones/JavaScript 20
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ Ejemplo for
▪ Ejemplo while
Diseño Web y Aplicaciones/JavaScript 21
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ switch
switch ( expresión ) { // La expresión devuelve un número,
// un valor lógico o un string
case valor1:
// Instrucciones caso 1
break; // para acabar el switch
case valor2:
// Instrucciones caso 2
break;
default: // opcional
// Instrucciones si no se diera ningún caso
}
Diseño Web y Aplicaciones/JavaScript 22
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ Ejemplo switch
Diseño Web y Aplicaciones/JavaScript 23
2. Lenguaje JavaScript
▪ SENTENCIAS DE CONTROL DE FLUJO
▪ Excepciones try … catch
try {
// Código a ejecutar
}
catch(error) {
// Gestión del error
}
▪ Para lanzar la excepción: throw exception
[Link]
Diseño Web y Aplicaciones/JavaScript 24
2. Lenguaje JavaScript
▪ FUNCIONES
▪ Bloque de código (con parámetros) asociado a un nombre, usado para realizar una
tarea simple o una serie de tareas. La función se invoca (o se llama) por el nombre y
devuelve un valor como resultado.
▪ Las funciones permiten crear operaciones de alto nivel. Se denominan también
abstracciones o encapsulaciones de código.
▪ Se definen con la palabra reservada function seguida del nombre y los parámetros
entre paréntesis. Y a continuación el bloque de código entre llaves {}, que termina con
la sentencia return.
▪ En la invocación se deben asignar valores concretos a los parámetros.
▪ La función representa el valor resultante de su ejecución. Si no hay un return, acaba y
devuelve undefined.
[Link]
Diseño Web y Aplicaciones/JavaScript 25
2. Lenguaje JavaScript
▪ FUNCIONES
▪ Sintaxis
function nombre_funcion (parámetro1, parámetro2, ...){
// instrucciones
return resultado;
}
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 26
2. Lenguaje JavaScript
▪ FUNCIONES
▪ alert(), confirm(), prompt()
▪ Reciben como argumento un mensaje que sacan como un cuadro de diálogo o cajas
PopUp.
Diseño Web y Aplicaciones/JavaScript 27
3. Inclusión de JavaScript en una web
▪ Hay tres formas de incluir JavaScript en un documento HTML:
▪ 1ª Dentro de las propias etiquetas de HTML.
<p onclick = "alert('¡¡Gracias por pulsar!!')"> PÚLSAME </p>
▪ 2ª Escribir el código JavaScript en el documento HTML dentro de la etiqueta
<head>. También puede ir en el body.
<head>
<script type = “text/javascript”>
[Link](“Esto es una sentencia de JavaScript”)
</script>
</head>
▪ 3ª Definir JavaScript en un archivo externo.
<head>
<script type = “text/javascript” src = “[Link]”> </script>
</head>
Diseño Web y Aplicaciones/JavaScript 28
3. Inclusión de JavaScript en una web
▪ En el caso de que el navegador NO soporte JavaScript o no lo tenga
activado se puede indicar con la etiqueta <noscript>. Definido como
elemento de bloque. También puede ir en el <head>.
<body>
<noscript>
<p>
Esta página requiere JavaScript para su correcto
funcionamiento. Compruebe si JavaScript está deshabilitado
en el navegador.
</p>
</noscript>
</body>
Diseño Web y Aplicaciones/JavaScript 29
Ejercicio 1
▪ Completar los condicionales if() del siguiente script para que los mensajes alert()
se muestren siempre de forma correcta.
Diseño Web y Aplicaciones/JavaScript 30
Ejercicio 1: Solución
Diseño Web y Aplicaciones/JavaScript 31
Ejercicio 2
▪ Crear una página web que enlace un archivo de JavaScript, cuyo objetivo es
pedir por teclado algunos números (usar la función prompt()) para realizar las
siguientes operaciones:
▪ Multiplica: Crea una función que realice la operación numA multiplicado por
numB y ponga en la web el resultado (usar la función [Link]()). Solicita
los dos números y después formatea en la web el texto:
numA x numB igual a resultado
▪ Mayor: Crea una función que solicite dos números y compare y muestre por
pantalla cuál de los dos es mayor. Formatea la salida para que muestre:
numA es mayor que numB
▪ Encabezado: Crea una función que solicite un texto y un número, y escriba el
texto en el formato de encabezado que le indique la variable número.
Diseño Web y Aplicaciones/JavaScript 32
Ejercicio 2
▪ Para seleccionar cada una de estas operaciones podéis usar un prompt(), como se
muestra en la siguiente imagen, de manera que si introduzco un 1 hará la
multiplicación, si pongo un 2 calculará el mayor y con 3 me pondrá un texto con el
tamaño del encabezado indicado.
Diseño Web y Aplicaciones/JavaScript 33
Ejercicio 2: Solución
▪ Archivo .js
Diseño Web y Aplicaciones/JavaScript 34
Ejercicio 2: Solución
▪ Archivo .js
▪ Continuación
Diseño Web y Aplicaciones/JavaScript 35
4. Árbol BOM (Browser Object Model)
▪ Objetos característicos que permiten interactuar con el navegador
Diseño Web y Aplicaciones/JavaScript 36
4. Árbol BOM (Browser Object Model)
▪ El objeto window es el de más alto nivel, contiene las propiedades de la
ventana y en el supuesto de trabajar con marcos (frames), se genera un objeto
window para cada uno.
▪ El objeto document contiene todas las propiedades del documento actual, como
son su color de fondo, enlaces, imágenes, etc.
Diseño Web y Aplicaciones/JavaScript 37
4. Árbol BOM (Browser Object Model)
▪ El objeto location contiene toda la información sobre la URL que se está
visualizando, así como todos los detalles de esa dirección (puerto, protocolo,…).
▪ El objeto history contiene información sobre los enlaces que el usuario ha
visitado. Se usa principalmente para generar botones de avance y retroceso.
▪ El objeto navigator permite obtener información del navegador con el que se
está visualizando la página.
▪ El objeto screen permite obtener información sobre la resolución de la pantalla.
▪ Ejemplo objeto screen:
Diseño Web y Aplicaciones/JavaScript 38
4. Árbol BOM (Browser Object Model)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Ejemplo Objeto screen</title>
</head>
<body>
<h2> Propiedades de mi pantalla </h2>
<script type = "text/javascript">
switch([Link]) {
case 1: case 4: [Link] = "gray"; break;
case 8: case 15: case 16: [Link] = "blue"; break;
case 24: case 32: [Link] = "lightgreen"; break;
default: [Link] = "white";
}
[Link]("Su pantalla soporta color de " + [Link] +" bits.");
[Link](" La altura es de " + [Link] + " px,");
[Link](" y la anchura son " + [Link] + " px.");
</script>
</body>
</html>
Diseño Web y Aplicaciones/JavaScript 39
5. Árbol DOM (Document Object Model)
▪ Es una interfaz de programación para los documentos HTML.
▪ Define los objetos y propiedades de los elementos HTML y los métodos para
acceder a ellos.
▪ Los objetos DOM permiten inspeccionar y modificar los elementos HTML.
html
head body
title h1 p table
Diseño Web y Aplicaciones/JavaScript 40
5. Árbol DOM (Document Object Model)
▪ MÉTODOS PARA ACCEDER A ELEMENTOS DOM
▪ getElementById(“my_id”)
▪ Devuelve el objeto DOM con el identificador buscado o null si no lo encuentra.
▪ getElementsByName(“my_name”)
▪ getElementsByTagName(“my_tag”)
▪ getElementsByClassName(“my_class”)
▪ Devuelven una matriz de objetos.
▪ Lista de propiedades y métodos del objeto document:
[Link]
▪ Ejemplos de uso: [Link]
Diseño Web y Aplicaciones/JavaScript 41
5. Árbol DOM (Document Object Model)
▪ MÉTODOS PARA CAMBIAR O MODIFICAR ELEMENTOS
▪ [Link](string): para escribir en el documento (página web).
▪ [Link](attribute): devuelve el valor del atributo.
▪ [Link](attribute, value): permite modificar el valor del atributo, o
añadir un nuevo atributo.
▪ PROPIEDADES
▪ [Link]: para cambiar el contenido del elemento.
▪ [Link]: para cambiar el estilo del elemento.
▪ [Link]: para cambiar un atributo del elemento.
Diseño Web y Aplicaciones/JavaScript 42
6. Manejadores de Eventos
▪ EVENTOS
▪ Los eventos permiten ejecutar acciones cuando el usuario realiza una
determinada acción sobre la página web.
▪ Algunos de los más comunes son pasar el ratón o clicar sobre un elemento,
cerrar la página o cambiar el contenido de un input en un formulario.
▪ Se definen con atributos con nombres especiales de elementos HTML.
▪ El valor asignado al atributo es código JavaScript ejecutado al ocurrir el
evento.
▪ [Link]
Diseño Web y Aplicaciones/JavaScript 43
6. Manejadores de Eventos
▪ TIPOS
▪ Atributos de las etiquetas HTML
<input type=”button” value=”Púlsame” onclick=”alert(‘Gracias por pulsar’);” >
▪ Funciones en código JavaScript externo
function muestra() {alert(‘Gracias’);}
<input type=”button” value=”Púlsame” onclick=”muestra()” >
▪ Semánticos
function muestra() {alert(‘Gracias’);} // Función externa
// Asignar la función externa al elemento
[Link](“boton”).onclick = muestra;
// Elemento HTML
<input id=”boton” type=”button” value=”Púlsame” >
Diseño Web y Aplicaciones/JavaScript 44
6. Manejadores de Eventos
▪ EVENTOS MEDIANTE LISTENERS
▪ Métodos addEventListener() y removeEventListener()
<input id=“boton” type=”button” value=”Púlsame”>
[Link]("boton").addEventListener("click", muestra);
function muestra() {
alert('¡¡¡Gracias por pulsar!!!');
}
[Link]("boton").removeEventListener("click", muestra);
[Link]("click", muestra);
Diseño Web y Aplicaciones/JavaScript 45
6. Manejadores de Eventos
▪ EJEMPLO
Diseño Web y Aplicaciones/JavaScript 46
6. Manejadores de Eventos
▪ EJEMPLO CON IMAGEN
Diseño Web y Aplicaciones/JavaScript 47
6. Manejadores de Eventos
▪ EVENTOS
▪ También existen eventos no producidos directamente por una acción del
usuario.
▪ Para detectar la carga de la página web se usa:
<body onload = “miFuncion()”>
▪ Métodos para ejecutar una acción cada cierto tiempo:
▪ setInterval()
▪ clearInterval()
▪ setTimeout()
▪ El método setInterval() llama a la función que se le pasa como argumento indefinidamente,
cada cierto tiempo especificado (en milisegundos)
▪ El método clearInterval() detiene la ejecución del método setInterval()
▪ El método setTimeout() es igual que setinterval() pero se ejecuta solo una vez
[Link]
Diseño Web y Aplicaciones/JavaScript 48
6. Manejadores de Eventos
▪ EVENTOS
Diseño Web y Aplicaciones/JavaScript 49
6. Manejadores de Eventos
▪ EJERCICIO
Diseño Web y Aplicaciones/JavaScript 50
6. Manejadores de Eventos
▪ EJERCICIO
Diseño Web y Aplicaciones/JavaScript 51
Ejercicio - Solución
Diseño Web y Aplicaciones/JavaScript 52
Ejercicio
▪ Hacer un cronómetro con el estilo que se desee que cuente al menos
con los botones de inicio, parada y reinicio. Podéis incluir también la
cuenta de milisegundos.
Diseño Web y Aplicaciones/JavaScript 53
6. Manejadores de Eventos
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento. <button>, <input>, <label>, <select>, <textarea>, <body>
Deseleccionar un elemento que
onchange <input>, <select>, <textarea>
se ha modificado.
onclick Pinchar y soltar el ratón. Todos los elementos
Pinchar dos veces seguidas con
ondblclick Todos los elementos
el ratón.
onfocus Seleccionar un elemento. <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar). Elementos de formulario y <body>
onkeypress Pulsar una tecla. Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada. Elementos de formulario y <body>
La página se ha cargado
onload <body>
completamente.
Diseño Web y Aplicaciones/JavaScript 54
6. Manejadores de Eventos
Evento Descripción Elementos
onmousedown Pulsar (sin soltar) un botón del ratón. Todos los elementos
onmousemove Mover el ratón. Todos los elementos
El ratón “sale” del elemento (pasa por encima de otro
onmouseout Todos los elementos
elemento).
El ratón “entra” en el elemento (pasa por encima del
onmouseover Todos los elementos
elemento).
onmouseup Soltar el botón que estaba pulsado en el ratón. Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos). <form>
onresize Se ha modificado el tamaño de la ventana del navegador. <body>
onselect Seleccionar un texto. <input>, <textarea>
onsubmit Enviar el formulario. <form>
onunload Se abandona la página (por ejemplo, al cerrar el navegador) <body>
Diseño Web y Aplicaciones/JavaScript 55
6. Manejadores de Eventos
▪ EJEMPLO
Diseño Web y Aplicaciones/JavaScript 56
6. Manejadores de Eventos
▪ EJEMPLO
▪ Mediante listerners
Diseño Web y Aplicaciones/JavaScript 57
6. Manejadores de Eventos
▪ EJERCICIO GALERÍA
▪ Crear una página web que muestre una galería de fotos con dos botones,
Siguiente y Anterior, para ir pasando las imágenes.
▪ Se puede usar el ‘truco’ de llamar a todas las imágenes igual salvo un índice.
▪ Por ejemplo: [Link], [Link], [Link], …
Diseño Web y Aplicaciones/JavaScript 58
6. Manejadores de Eventos
▪ EJERCICIO GALERÍA
Diseño Web y Aplicaciones/JavaScript 59
6. Manejadores de Eventos
▪ EJERCICIO GALERÍA
Diseño Web y Aplicaciones/JavaScript 60
6. Manejadores de Eventos
▪ EJERCICIO GALERÍA
Diseño Web y Aplicaciones/JavaScript 61
7. Algunos Métodos
▪ PARA EL TIPO STRING
Método Descripción Ejemplo
toUpperCase() Convierte los caracteres a mayúsculas. ‘hola’.toUpperCase()
toLowerCase() Convierte los caracteres a minúsculas. ‘HOLA’.toLowerCase()
charAt(position) Devuelve el carácter de esa posición. ‘hola’.charAt(2)
Devuelve la posición en la que está el
carácter indicado. Si no está devuelve -1,
indexOf(char) 'mañana'.indexOf('a')
y si está varias veces su primera
aparición.
Devuelve la última posición en la que se
lastIndexOf(char) encuentra el carácter. Si no está devuelve 'mañana'.lastIndexOf('a')
-1.
Diseño Web y Aplicaciones/JavaScript 62
7. Algunos Métodos
▪ PARA EL TIPO STRING
Método Descripción Ejemplo
substring(inicio,fin) Devuelve un trozo del string. ‘hola’.substring(1,3)
concat(“ “) Concatena cadenas de caracteres 'pinta'.concat('labios')
Convierte string a number. El string
parseInt(‘10') => 10
parseInt(string) se interpreta como un entero. Por
parseInt(’10.45') => 10
defecto en base 10.
Convierte string a number. String se parseFloat("1e2") => 100
parseFloat(string)
interpreta como nº en coma flotante. parseFloat(“1.9") => 1.9
Propiedad Descripción Ejemplo
Devuelve el número de caracteres del
length ‘hola’.length
string.
Diseño Web y Aplicaciones/JavaScript 63
7. Algunos Métodos
▪ PARA EL TIPO ARRAY
Método Descripción Ejemplo
Une los elementos del array para formar un
var a = [“hola”, “mundo”]
join(separador) string. Se usa un separador para unir los
var b = [Link](“ ”)
elementos de la cadena.
concat( ) Concatena elementos de varios arrays. [Link](array2)
Suprime el último elemento del array y lo mete var a = [1, 2, 3]
pop( )
en la variable seleccionada. var b = [Link]()
push( ) Agrega un elemento (o varios) al array. [Link](4)
Suprime el primer elemento del array y lo mete var a = [1, 2, 3]
shift( )
en la variable seleccionada. var b = [Link]()
Agrega un elemento (o varios) al principio del var a = [1, 2, 3]
unshift( )
array. [Link](0)
Diseño Web y Aplicaciones/JavaScript 64
7. Algunos Métodos
▪ PARA EL TIPO ARRAY
Método Descripción Ejemplo
Coloca los elementos de un array en su
reverse( ) [Link]()
orden inverso.
Propiedad Descripción Ejemplo
Devuelve el número de elementos
length [Link]
dentro del array.
Diseño Web y Aplicaciones/JavaScript 65
7. Algunos Métodos
▪ PARA EL TIPO NUMBER
Método Descripción Ejemplo
Protege el código de valores no var num1 = 0; var num2 = 0;
isNaN( )
numéricos. if(isNaN(num1/num2)) {…} else {…}
Fija el número de decimales
que tiene que resolver una var num1 = 4564.34567;
toFixed(digitos)
operación y redondea si es [Link](2); // “4564.35”
necesario. Devuelve un string.
Convierte un número a string (31).toString(2) // "11111"
toString(base) con la base indicada. Si no se (31).toString(10) // "31“
pone, por defecto es base 10 (31).toString(16) // "1F“
Diseño Web y Aplicaciones/JavaScript 66
7. Algunos Métodos
▪ OBJETO Math
Métodos Constantes
[Link]() [Link]() [Link]
[Link]() [Link]() Math.E
[Link]() [Link]() Math.SQRT2
[Link]() [Link]() Math.LN2
[Link]() [Link]() Math.LN10
[Link]() [Link]() …
Diseño Web y Aplicaciones/JavaScript 67
7. Algunos Métodos
▪ OBJETO Audio
Métodos
play() Reproduce el audio.
pause() Detiene el audio.
load() Recarga el audio.
Propiedades
currentTime Coloca la reproducción en el segundo indicado.
Diseño Web y Aplicaciones/JavaScript 68
7. Algunos Métodos
▪ OBJETO Audio
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 69
7. Algunos Métodos
▪ OBJETO Audio
▪ Webs de descarga de audios
▪ [Link]
▪ [Link]
▪ [Link]
▪ [Link]
▪ [Link]
▪ [Link]
Diseño Web y Aplicaciones/JavaScript 70
7. Algunos Métodos
▪ OBJETO Date
Métodos
getDay() Devuelve el día de la semana.
getDate() Devuelve el día del mes.
getMonth() Devuelve el mes.
getFullYear() Devuelve el año.
getHours() Devuelve la hora.
getMinutes() Devuelve los minutos.
getSeconds() Devuelve los segundos.
Returns the time in milliseconds since
getTime()
January 1, 1970 at midnight. (Unix Time)
Diseño Web y Aplicaciones/JavaScript 71
7. Algunos Métodos
▪ OBJETO Date
▪ Ejemplo <!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<title> Date </title>
<!-- <script src=“[Link]" defer></script> -->
</head>
<body>
<h2> La fecha y hora de hoy son: </h2>
<div id = “fecha”> </div>
<script type = “text/javascript”>
var fechaActual = [Link](“fecha”);
[Link] = new Date();
</script>
</body>
</html>
Diseño Web y Aplicaciones/JavaScript 72
Atributos async y defer
▪ Diferencia entre los atributos async y defer
▪ <script>
▪ El análisis HTML se detiene, se descarga el archivo (si es un script externo), se ejecuta el script y
después se reanuda el análisis HTML.
▪ <script async>
▪ El script se descarga de forma asíncrona, es decir, sin detener el análisis HTML, pero una vez
descargado, sí se detiene para ejecutar el script. Tras la ejecución se reanuda el análisis HTML.
No se garantiza la ejecución de los scripts asíncronos en el mismo orden en el aparecen en el
documento.
▪ <script defer>
▪ El script se descarga de forma asíncrona, en paralelo con el análisis HTML, y además su
ejecución es diferida hasta que termine el análisis HTML. No hay bloqueo en el renderizado
HTML. La ejecución de todos los scripts diferidos se realiza en el mismo orden en el que
aparecen en el documento.
Diseño Web y Aplicaciones/JavaScript 73
Atributos async y defer
Diseño Web y Aplicaciones/JavaScript 74
Ejercicio Objeto Date
Diseño Web y Aplicaciones/JavaScript 75
Ejercicio Objeto Date: Solución
Diseño Web y Aplicaciones/JavaScript 76
Ejercicio Objeto Date: Solución
Diseño Web y Aplicaciones/JavaScript 77
Formularios
Diseño Web y Aplicaciones/JavaScript 78
8. Formularios
▪ Introducción
▪ Sección de un documento que los usuarios ‘rellenan’ antes de
enviarlo a un agente (servidor web, etc.) para su procesamiento.
▪ El procesamiento se lleva a cabo por programas ubicados en el
servidor (PHP, Java, ASP, etc.).
▪ Objeto form: [Link]
▪ Cada formulario es un array de elementos.
▪ Al cargar la página web el navegador crea automáticamente un array llamado
‘forms’ que contiene la referencia a todos los formularios de la página.
▪ [Link][i].elements[j] // i=0…n, j=0,…m
Diseño Web y Aplicaciones/JavaScript 79
8. Formularios
▪ Sintaxis
▪ Entre las etiquetas <form> y </form> se añaden tantos campos de
entrada <inputs> como sea necesario.
▪ <form> Elemento de bloque.
▪ <input> Elemento de línea.
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 80
8. Formularios
▪ Sintaxis
▪ Atributo action
▪ URL que va a ser llamada cuando se envíen los datos del formulario.
▪ Atributo method
▪ Método de envío al servidor. Dos valores GET (valor por defecto) y POST.
▪ Los datos se envían como una lista de parámetros clave/valor (name/value).
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 81
8. Formularios
▪ Sintaxis
▪ Existen diferentes tipos de inputs:
▪ Campos de texto
▪ Radio Buttons
▪ Checkboxes
▪ Selectores
▪ Otros tipos incorporados en HTML5:
▪ W3Schools
▪ W3C
▪ Los formularios se comprueban y validan de forma automática y nativa (no hace
falta JavaScript).
Diseño Web y Aplicaciones/JavaScript 82
8. Formularios
▪ Elemento <input>
▪ Atributo type
▪ Tipo o clase de información de entrada esperada por parte del usuario.
▪ Valor por defecto: text.
Tipos
text tel time
password number email
submit range radio
reset date checkbox
search week file
url month image
Diseño Web y Aplicaciones/JavaScript 83
8. Formularios
▪ Inputs – Campos de texto
▪ Para introducir textos cortos de sólo una línea.
▪ Texto normal: type = “text”
▪ Password: type = “password” (oculta los caracteres que se escriben).
▪ Atributo required
▪ Para hacer un campo obligatorio en el formulario.
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 84
8. Formularios
▪ Inputs – Campos de texto
▪ Para introducir textos más largos o un área de texto.
▪ Etiqueta <textarea>
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 85
8. Formularios
▪ Inputs – Radio buttons
▪ Para seleccionar entre varias opciones.
▪ Sólo se puede seleccionar una.
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 86
8. Formularios
▪ Inputs – Checkboxes
▪ Para seleccionar entre varias opciones.
▪ Se puede seleccionar más de una opción.
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 87
8. Formularios
▪ Inputs – type = range
▪ Etiqueta <progress>
Diseño Web y Aplicaciones/JavaScript 88
8. Formularios
▪ Inputs – Select
▪ Desplegable con varias opciones.
▪ Ejemplo
▪ Atributo value: valor que se enviará al servidor si se selecciona esa opción
Diseño Web y Aplicaciones/JavaScript 89
8. Formularios
▪ Inputs – Tipo button
▪ Input tipo botón que se puede utilizar para realizar una acción.
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 90
8. Formularios
▪ Inputs – Tipo submit
▪ Envía la información del formulario a la página especificada por
el atributo action del formulario o etiqueta <form>.
▪ Ejemplo
Diseño Web y Aplicaciones/JavaScript 91
8. Formularios
▪ Propiedad value
▪ Indica el valor actual del elemento, valor introducido en el formulario.
▪ Propiedad checked
▪ Informa sobre el estado del checkbox o radio buttons. Puede ser
true o false.
▪ Ejemplo
[Link]('checkbox').checked;
devuelve true
devuelve false
Diseño Web y Aplicaciones/JavaScript 92
8. Formularios: EJERCICIO 1
Diseño Web y Aplicaciones/JavaScript 93
Solución
Diseño Web y Aplicaciones/JavaScript 94
Solución
Diseño Web y Aplicaciones/JavaScript 95
8. Formularios: EJERCICIO 2
▪ Crear el siguiente formulario de manera que devuelva una alerta en el caso de registrarse
correctamente mostrando los datos introducidos. Si por el contrario se deja algún campo en blanco o si
alguno de los datos introducidos no es correcto mostrará un mensaje de error. También sacará una
alerta en caso de poner una contraseña con menos de seis caracteres, así como si no se aceptan los
términos.
Diseño Web y Aplicaciones/JavaScript 96
8. Formularios: EJERCICIO 2
Diseño Web y Aplicaciones/JavaScript 97
Menús
▪*Menú dots
▪*Menú hamburger
Diseño Web y Aplicaciones/JavaScript 98
9. Menús
▪ Menús
▪ Existen numerosos tipos de menús, y numerosas formas
distintas de realizarlos.
▪ Aquí se pueden encontrar diferentes ejemplos:
▪ [Link]
Diseño Web y Aplicaciones/JavaScript 99
9. Menús
▪ Menú dots
Diseño Web y Aplicaciones/JavaScript 100
9. Menús
▪ Menú dots
Diseño Web y Aplicaciones/JavaScript 101
9. Menús
▪ Menú dots
Diseño Web y Aplicaciones/JavaScript 102
9. Menús
▪ Menú hamburger
Diseño Web y Aplicaciones/JavaScript 103
9. Menús
▪ Menú hamburger
Diseño Web y Aplicaciones/JavaScript 104
9. Menús
▪ Menú
hamburger
Diseño Web y Aplicaciones/JavaScript 105
9. Menús
▪ Menú
hamburger
Diseño Web y Aplicaciones/JavaScript 106
9. Menús
▪ Menú hamburger (sólo con CSS)
Autora: Jelena Jovanovic
Diseño Web y Aplicaciones/JavaScript 107
INTRODUCCIÓN A JAVASCRIPT
Grado en Diseño de Productos Interactivos
Asignatura: Diseño Web y Aplicaciones
Curso: 2025 – 2026
[Link]@[Link]