FUNDAMENTOS DE DESARROLLO WEB
Curso académico
2023 – 2024
Fundamentos de Desarrollo Web/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
Fundamentos de Desarrollo Web/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…).
Fundamentos de Desarrollo Web/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
Fundamentos de Desarrollo Web/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. */
Fundamentos de Desarrollo Web/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;
Fundamentos de Desarrollo Web/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 re-declarar una variable, mientras que con var sí.
Fundamentos de Desarrollo Web/JavaScript 8
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
Fundamentos de Desarrollo Web/JavaScript 9
2. Lenguaje JavaScript
TIPOS DE DATOS
Simples
Numéricos (Number)
Cadenas de caracteres (String)
Booleanos (Boolean)
Null
Undefined
Objetos
Arrays
Expresiones regulares
Funciones
Objetos
Fundamentos de Desarrollo Web/JavaScript 10
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 \’ \” \\
Fundamentos de Desarrollo Web/JavaScript 11
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”
Fundamentos de Desarrollo Web/JavaScript 12
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
*= incrementa antes de <= * (multiplicación)
la operación)
/= > / (división)
Sufijo (se
%= incrementa >= % (módulo)
después)
Fundamentos de Desarrollo Web/JavaScript 13
2. Lenguaje JavaScript
PUERTAS LÓGICAS
Fundamentos de Desarrollo Web/JavaScript 14
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
}
Fundamentos de Desarrollo Web/JavaScript 15
2. Lenguaje JavaScript
SENTENCIAS DE CONTROL DE FLUJO
Ejemplo if … else
Ejemplo for
Fundamentos de Desarrollo Web/JavaScript 16
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 )
Fundamentos de Desarrollo Web/JavaScript 17
2. Lenguaje JavaScript
SENTENCIAS DE CONTROL DE FLUJO
Ejemplo for
Ejemplo while
Fundamentos de Desarrollo Web/JavaScript 18
2. Lenguaje JavaScript
SENTENCIAS DE CONTROL DE FLUJO
switch
switch ( expresión ) { // La expresión devuelve un numero,
// 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
}
Fundamentos de Desarrollo Web/JavaScript 19
2. Lenguaje JavaScript
SENTENCIAS DE CONTROL DE FLUJO
Ejemplo switch
Fundamentos de Desarrollo Web/JavaScript 20
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
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/throw
Fundamentos de Desarrollo Web/JavaScript 21
2. Lenguaje JavaScript
FUNCIONES
Bloque de código (con parámetros) asociado a un nombre. La función se invoca (o
ejecuta) 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.
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones
Fundamentos de Desarrollo Web/JavaScript 22
2. Lenguaje JavaScript
FUNCIONES
Sintaxis
function nombre_funcion ( arg1, arg2, ...){
// instrucciones
return resultado;
}
Ejemplo
Fundamentos de Desarrollo Web/JavaScript 23
2. Lenguaje JavaScript
FUNCIONES
alert(), confirm(), prompt()
Reciben como argumento un mensaje que sacan como un cuadro de diálogo o cajas
PopUp.
Fundamentos de Desarrollo Web/JavaScript 24
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”>
document.write(“Esto es una sentencia de JavaScript”)
</script>
</head>
3ª Definir JavaScript en un archivo externo.
<head>
<script type = “text/javascript” src = “archivo.js”> </script>
</head>
Fundamentos de Desarrollo Web/JavaScript 25
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.
<body>
<noscript>
<p>
Esta página requiere JavaScript para su correcto
funcionamiento. Compruebe si JavaScript está deshabilitado
en el navegador.
</p>
</noscript>
</body>
Fundamentos de Desarrollo Web/JavaScript 26
Ejercicio 1
Completar los condicionales if() del siguiente script para que los mensajes alert()
se muestren siempre de forma correcta.
Fundamentos de Desarrollo Web/JavaScript 27
Ejercicio 1: Solución
Fundamentos de Desarrollo Web/JavaScript 28
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 document.write()). 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.
Fundamentos de Desarrollo Web/JavaScript 29
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.
Fundamentos de Desarrollo Web/JavaScript 30
Ejercicio 2: Solución
Archivo .js
Fundamentos de Desarrollo Web/JavaScript 31
Ejercicio 2: Solución
Archivo .js
Continuación
Fundamentos de Desarrollo Web/JavaScript 32
4. Árbol BOM (Browser Object Model)
Objetos característicos que permiten interactuar con el navegador.
Fundamentos de Desarrollo Web/JavaScript 33
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.
Fundamentos de Desarrollo Web/JavaScript 34
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:
Fundamentos de Desarrollo Web/JavaScript 35
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(screen.colorDepth) {
case 1: case 4: document.bgColor = "gray"; break;
case 8: case 15: case 16: document.bgColor = "blue"; break;
case 24: case 32: document.bgColor = "lightgreen"; break;
default: document.bgColor = "white";
}
document.write("Su pantalla soporta color de " + screen.colorDepth +" bits.");
document.write(" La altura es de " + screen.height + " px,");
document.write(" y la anchura son " + screen.width + " px.");
</script>
</body>
</html>
Fundamentos de Desarrollo Web/JavaScript 36
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
Fundamentos de Desarrollo Web/JavaScript 37
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
https://www.w3schools.com/jsref/dom_obj_document.asp
Ejemplos de uso: https://www.w3schools.com/js/js_htmldom_elements.asp
Fundamentos de Desarrollo Web/JavaScript 38
5. Árbol DOM (Document Object Model)
MÉTODOS PARA CAMBIAR O MODIFICAR ELEMENTOS
document.write(string): para escribir en el documento (página web).
element.getAttribute(attribute): devuelve el valor del atributo.
element.setAttribute(attribute, value): permite modificar el valor del atributo, o
añadir un nuevo atributo.
PROPIEDADES
element.innerHTML: para cambiar el contenido del elemento.
element.style.property: para cambiar el estilo del elemento.
element.attribute: para cambiar un atributo del elemento.
Fundamentos de Desarrollo Web/JavaScript 39
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.
https://www.w3schools.com/js/js_htmldom_events.asp
Fundamentos de Desarrollo Web/JavaScript 40
6. Manejadores de Eventos
TIPOS
Atributos de las etiquetas HTML
<input type=”button” value=”Púlsame” onclick=”alert(‘Gracias por pulsarme’);” >
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
document.getElementById(“boton”).onclick = muestra;
// Elemento HTML
<input id=”boton” type=”button” value=”Púlsame” >
Fundamentos de Desarrollo Web/JavaScript 41
6. Manejadores de Eventos
EJEMPLO
Fundamentos de Desarrollo Web/JavaScript 42
6. Manejadores de Eventos
EJEMPLO CON IMAGEN
Fundamentos de Desarrollo Web/JavaScript 43
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.
https://www.w3schools.com/jsref/met_win_setinterval.asp
Fundamentos de Desarrollo Web/JavaScript 44
6. Manejadores de Eventos
EVENTOS
Fundamentos de Desarrollo Web/JavaScript 45
6. Manejadores de Eventos
EJERCICIO
Fundamentos de Desarrollo Web/JavaScript 46
6. Manejadores de Eventos
EJERCICIO
Fundamentos de Desarrollo Web/JavaScript 47
Ejercicio - Solución
Fundamentos de Desarrollo Web/JavaScript 48
6. Manejadores de Eventos
Evento Descripción Elementos para los que está definido
<button>, <input>, <label>, <select>, <textarea>,
onblur Deseleccionar el elemento
<body>
Deseleccionar un elemento que se ha
onchange <input>, <select>, <textarea>
modificado
onclick Pinchar y soltar el ratón Todos los elementos
Pinchar dos veces seguidas con el
ondblclick Todos los elementos
ratón
<button>, <input>, <label>, <select>, <textarea>,
onfocus Seleccionar un elemento
<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
Fundamentos de Desarrollo Web/JavaScript 49
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>
Fundamentos de Desarrollo Web/JavaScript 50
6. Manejadores de Eventos
EJEMPLO
Fundamentos de Desarrollo Web/JavaScript 51
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: foto1.jpg, foto2.jpg, foto3.jpg, …
Fundamentos de Desarrollo Web/JavaScript 52
6. Manejadores de Eventos
EJERCICIO GALERÍA
Fundamentos de Desarrollo Web/JavaScript 53
6. Manejadores de Eventos
EJERCICIO GALERÍA
Fundamentos de Desarrollo Web/JavaScript 54
6. Manejadores de Eventos
EJERCICIO GALERÍA
Fundamentos de Desarrollo Web/JavaScript 55
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
indexOf(char) carácter indicado. Si no está devuelve -1, '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
Fundamentos de Desarrollo Web/JavaScript 56
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
Fundamentos de Desarrollo Web/JavaScript 57
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 = a.join(“ ”)
elementos de la cadena
concat( ) Concatena elementos de varios arrays array1.concat(array2)
Suprime el último elemento del array y lo mete var a = [1, 2, 3]
pop( )
en la variable seleccionada var b = a.pop()
push( ) Agrega un elemento (o varios) al array a.push(4)
suprime el primer elemento del array y lo mete var a = [1, 2, 3]
shift( )
en la variable seleccionada var b = a.shift()
Agrega un elemento (o varios) al principio del var a = [1, 2, 3]
unshift( )
array a.unshift(0)
Fundamentos de Desarrollo Web/JavaScript 58
7. Algunos Métodos
PARA EL TIPO ARRAY
Método Descripción Ejemplo
Coloca los elementos de un array en su
reverse( ) a.reverse()
orden inverso
Propiedad Descripción Ejemplo
Devuelve el número de elementos
length a.length
dentro del array
Fundamentos de Desarrollo Web/JavaScript 59
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 num1.toFixed(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
Fundamentos de Desarrollo Web/JavaScript 60
7. Algunos Métodos
OBJETO Math
Métodos Constantes
Math.random() Math.floor() Math.PI
Math.pow() Math.round() Math.E
Math.sqrt() Math.abs() Math.SQRT2
Math.min() Math.log() Math.LN2
Math.max() Math.exp() Math.LN10
Math.ceil() Math.sin() …
Fundamentos de Desarrollo Web/JavaScript 61
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
Fundamentos de Desarrollo Web/JavaScript 62
7. Algunos Métodos
OBJETO Audio
Ejemplo
Fundamentos de Desarrollo Web/JavaScript 63
7. Algunos Métodos
OBJETO Audio
Webs de descarga de audios
https://www.sshhtt.com/
https://www.freeaudiolibrary.com/es/
https://www.elongsound.com/
http://www.flashkit.com/soundfx/
http://creativesounddesign.com/the-recordist-free-sound-effects/
https://bigsoundbank.com/
https://www.freesfx.co.uk//default.aspx
Fundamentos de Desarrollo Web/JavaScript 64
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
Fundamentos de Desarrollo Web/JavaScript 65
7. Algunos Métodos
OBJETO Date
Ejemplo <!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<title> Date </title>
</head>
<body>
<h2> La fecha y hora de hoy son: </h2>
<div id = “fecha”> </div>
<script type=“text/javascript”>
var fechaActual = document.getElementById(“fecha”);
fechaActual.innerHTML = new Date();
</script>
</body>
</html>
Fundamentos de Desarrollo Web/JavaScript 66
Ejercicio Objeto Date
Fundamentos de Desarrollo Web/JavaScript 67
Ejercicio Objeto Date: Solución
Fundamentos de Desarrollo Web/JavaScript 68
Ejercicio Objeto Date: Solución
Fundamentos de Desarrollo Web/JavaScript 69
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.
Fundamentos de Desarrollo Web/JavaScript 70
Atributos async y defer
Fuente: https://cybmeta.com/diferencia-async-y-defer
Fundamentos de Desarrollo Web/JavaScript 71
Formularios
Fundamentos de Desarrollo Web/JavaScript 72
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: document.forms.
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.
document.forms[i].elements[j] // i=0…n, j=0,…m
Fundamentos de Desarrollo Web/JavaScript 73
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
Fundamentos de Desarrollo Web/JavaScript 74
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
Fundamentos de Desarrollo Web/JavaScript 75
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).
Fundamentos de Desarrollo Web/JavaScript 76
8. Formularios
Elemento <input>
Atributo type
Tipo o clase de información de entrada esperada por parte del usuario.
Valor por defecto: texto.
Tipos
text tel time
password number email
submit range radio
reset date checkbox
search week file
url month image
Fundamentos de Desarrollo Web/JavaScript 77
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
Fundamentos de Desarrollo Web/JavaScript 78
8. Formularios
Inputs – Campos de texto
Para introducir textos más largos o un área de texto.
Etiqueta <textarea>
Ejemplo
Fundamentos de Desarrollo Web/JavaScript 79
8. Formularios
Inputs – Radio buttons
Para seleccionar entre varias opciones.
Sólo se puede seleccionar una.
Ejemplo
Fundamentos de Desarrollo Web/JavaScript 80
8. Formularios
Inputs – Checkboxes
Para seleccionar entre varias opciones.
Se puede seleccionar más de una opción.
Ejemplo
Fundamentos de Desarrollo Web/JavaScript 81
8. Formularios
Inputs – Select
Desplegable con varias opciones.
Ejemplo
Atributo value: valor que se enviará al servidor si se selecciona esa opción.
Fundamentos de Desarrollo Web/JavaScript 82
8. Formularios
Inputs – Tipo button
Input tipo botón que se puede utilizar para realizar una acción.
Ejemplo
Fundamentos de Desarrollo Web/JavaScript 83
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
Fundamentos de Desarrollo Web/JavaScript 84
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.
Más información
Cómo obtener el valor de los campos del formulario
Fundamentos de Desarrollo Web/JavaScript 85
8. Formularios
Ejercicio
Fundamentos de Desarrollo Web/JavaScript 86
Solución
Fundamentos de Desarrollo Web/JavaScript 87
Solución
Fundamentos de Desarrollo Web/JavaScript 88
8. Formularios
Ejercicio
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.
Fundamentos de Desarrollo Web/JavaScript 89
8. Formularios
Ejercicio
Fundamentos de Desarrollo Web/JavaScript 90
Menús
*Menú dots
*Menú hamburguer
Fundamentos de Desarrollo Web/JavaScript 91
9. Menús
Menús
Existen numerosos tipos de menús, y numerosas formas
distintas de realizarlos.
Aquí se pueden encontrar diferentes ejemplos:
https://www.w3schools.com/howto/default.asp
Fundamentos de Desarrollo Web/JavaScript 92
9. Menús
Menú dots
Fundamentos de Desarrollo Web/JavaScript 93
9. Menús
Menú dots
Fundamentos de Desarrollo Web/JavaScript 94
9. Menús
Menú dots
Fundamentos de Desarrollo Web/JavaScript 95
9. Menús
Menú hamburguer
Fundamentos de Desarrollo Web/JavaScript 96
9. Menús
Menú hamburguer
Fundamentos de Desarrollo Web/JavaScript 97
9. Menús
Menú
hamburguer
Fundamentos de Desarrollo Web/JavaScript 98
9. Menús
Menú
hamburguer
Fundamentos de Desarrollo Web/JavaScript 99
9. Menús
Menú hamburguer (sólo con CSS)
Autora: Jelena Jovanovic
Fundamentos de Desarrollo Web/JavaScript 100
INTRODUCCIÓN A JAVASCRIPT
Grado en Ingeniería del Software
Asignatura: Fundamentos de Desarrollo Web
Curso: 2023 – 2024
ramona.ruiz@u-tad.com
