Scribd
Cargar
3 vistas

JavaScript 24 25

JavaScript es un lenguaje de programación versátil utilizado en desarrollo web tanto en el frontend como en el backend. Permite la creación de contenido dinámico en páginas web, así como la manipulación de datos a través de funciones y variables. A lo largo de su evolución desde 1995, ha pasado por múltiples versiones de ECMAScript, mejorando continuamente sus capacidades y funcionalidades.

Cargado por

haimarmoralesdaw
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
3 vistas

JavaScript 24 25

JavaScript es un lenguaje de programación versátil utilizado en desarrollo web tanto en el frontend como en el backend. Permite la creación de contenido dinámico en páginas web, así como la manipulación de datos a través de funciones y variables. A lo largo de su evolución desde 1995, ha pasado por múltiples versiones de ECMAScript, mejorando continuamente sus capacidades y funcionalidades.

Cargado por

haimarmoralesdaw
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 87

Javascript

Lenguaje de programación web

Lo utilizan como lenguaje base librerías/frameworks


(angular, react, vue,…)

Se puede utilizar para desarrollo en entornos front y


back

Se puede ejecutar en:

• Client-side: navegador

• Server-side: servidor (nodejs)


Desarrollo web

Frontend Backend
Javascript en el navegador
(frontend)
Permitirá:

• Poner, quitar o modificar el contenido de la página web


dinámicamente

• Hacer los sitios webs responsivos

• Detectar el navegador del usuario

• Crear cookies

• Validar formularios

• Crear animaciones

• Crear aplicaciones webs (parte de funcionalidad en el


navegador cliente)
JavaScript hasta hoy
1995 – Brendan Eich
• LiveScript → JavaScript
• W3C – DOM
1997 – ECMAScript 2, 3,…
…
2015 – ECMAScript 6
…
2019 – ECMAScript 10
2020 – ECMAScript 2020 - edición 11
2021 – ECMAScript 2021
JavaScript nativo
2022 – ECMAScript 2022
Vanilla
2024 – ECMAScript 2024
SCRIPTS
Se pueden realizar programas (scripts) dentro de una
página web (html) que permiten añadir contenido dinámico
a dichas páginas.

Contenido dinámico es el que puede cambiar en función de


las operaciones que realiza el usuario a lo largo de la
ejecución de dicho programa.
JavaScript
En cualquier parte del documento o en otro documento
externo se incluyen las etiquetas:

<script type=“text/javascript”>
…
</script>

Ponerlo en el head o al final del body

Cuando el navegador va interpretando la página HTML, al llegar


a la etiqueta <script> sabe que lo que hay dentro es código
JavaScript y lo ejecutará.
Varias formas de incluir JavaScript
Los scripts también se pueden escribir en ficheros externos
con la extensión .js

Para usar un fichero externo utilizamos:

<script src="ruta/ficheroScripts.js"></script>
Ejemplo. Javascript en linea

<!DOCTYPE html>
<html>
<body>
<h1>Mi primer programa en JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Haz clic sobre mí para ver la fecha y hora</button>
<p id="demo"></p>
</body>
</html>
Ejemplo. Javascript en script (sin funciones)
Se pone al final del documento para que haya cargado toda la página web y al ejecutarse
conozca todos los elementos.
<!DOCTYPE html>
<html>
<head>
<title>pagina principal</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<td>NOMBRE </td>
<td id="nombre"></td>
</tr>
<tr>
<td>EDAD </td>
<td id="edad"></td>
</tr>
</table>
<script type="text/javascript">
var nombre, edad;
nombre = prompt('teclea tu nombre: ');
edad = prompt('teclea tu edad: ');
document.getElementById('nombre').innerHTML=nombre;
document.getElementById('edad').innerHTML=edad;
</script>
</body>
</html>
Ejemplo. Javascript en script (con función)
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript puede cambiar imágenes</h1>
<img id="miBombilla" onclick="cambiaImagen()" src="apagada.gif" width="100" height="180">
<p>Haz clic sobre la bombilla para encenderla o apagarla.</p>

<script>
function cambiaImagen() {
var image = document.getElementById('miBombilla');
if (image.src.match("encendida")) {
image.src = "apagada.gif";
} else {
image.src = "encendida.gif";
}
}
</script>

</body>
</html>

Otros ejemplos: http://www.w3schools.com/js/js_intro.asp


Consola y depuración de javascript
Tipos de datos JavaScript
//String
"esto es una cadena de texto"
'esto también es una cadena de texto'

//números
3922
-9.7462

//boolean (lógicos)
true
false

//arrays, vectores, arreglos, listas,…


['uno','dos']
[1,2,3,4,5]
[false, true, false, false]

//objetos
{
"nombre": 'Pepe',
"poblacion": "Madrid",
"edad": 18,
"estudiante": true
}
Variables
Las variables son zonas de memoria a las que se les pone un
nombre y que se utilizan para almacenar datos.

Las reglas generales para construir los nombres de variables (nombres


únicos) son:
• Pueden contener letras, números, subrayados y símbolo del
dolar
• Deben empezar por letra, por $ y _
• Distingue entre mayúsculas y minúsculas
• Las palabras reservadas que se utilizan en otros ámbitos de la
página web no se pueden usar.

Cuando una variable se crea se dice que se define (definición) y se le


puede asignar un valor inicial → var vble = valorInicial
Ámbito de las variables
El ámbito de una variable determina dónde puede ser accedida en el
código

• Ámbito global:

Las variables declaradas fuera de cualquier función o bloque tienen un ámbito global.
Están disponibles en cualquier lugar del código.

• Ámbito de función:

Las variables declaradas dentro de una función solo están disponibles dentro de esa
función.

• Ámbito de bloque:

Las variables declaradas dentro de un bloque ({}) solo son accesibles dentro de ese
bloque.

Las variables declaradas con let tienen un ámbito de bloque, lo que significa que
solo están disponibles dentro del bloque donde fueron declaradas

Las variables declaradas con var tienen un ámbito de función o global, lo que
significa que están disponibles dentro de toda la función donde se declaran, incluso
antes de que se ejecuten
Vbles (o constantes) globales
locales de una función
de bloque (let)

Ámbito global

Ámbito
de
bloque

Ámbito
de
función
Funciones para trabajar con vbles
Operadores aritméticos

Operación Significado
+ Suma (números), concatenación (texto)
- Resta
* Multiplicación
/ División
% Módulo (resto de una división entera)
++ Incremento en 1
-- Decremento en 1

Pruébalos en la consola
Operadores de asignación

Operación Significado
= Asignación
+= Asignación del resultado de la suma
-= Asignación del resultado de la resta
*= Asignación del resultado de la multiplicación
/= Asignación del resultado de la división
%= Asignación del resultado del módulo
Funciones
Una función es un conjunto de instrucciones que se
agrupan con un nombre para realizar una tarea concreta
y que se pueden reutilizar fácilmente, simplemente
poniendo el nombre.

Definición de una función:


function nombreFuncion() {
instrucciones;
}
Llamada a una función:
nombreFunción();
Si queremos realizar varias sumas,
se puede definir la función 1 vez y
llamarla varias veces…
function suma () {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}

var resultado, numero1 = 3, numero2 = 5;


suma();

numero1 = 10; numero2 = 7;


suma();

numero1 = 5; numero2 = 8;
suma();
Valores de variables que se mandan a las funciones
Parámetros o argumentos

(en la llamada) para que los utilice en sus


operaciones.

Las variables que necesitan las funciones se


llaman argumentos o parámetros.

function NombreFuncion([argumento1, arg2,…]){


...
}
Son datos que les pasamos a la función cuando la llamamos para
que se ejecute.
Parámetros o argumentos

//Definición de la función
function sumaYMuestra(primerNumero, segundoNumero) {
var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado);
}

// Declaración de las variables


var numero1 = 3;
var numero2 = 5;

// Llamada a la función
sumaYMuestra(numero1, numero2);
Ejemplo. Suma de dos números introducidos en controles
de formulario, y pasados a la función para ser sumados
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function suma(n1,n2) {
var resultado;
resultado = n1 + n2;
document.body.insertAdjacentHTML("beforeEnd","<br>"+n1+ " +
"+ n2+ " = " + resultado);
}
</script>
</head>
<body>
<form name="miFormulario" action="" method="get">
<input type="number" name="numero1" />
<input type="number" name="numero2" />
<input type="button" value="Sumar"
onClick="suma(numero1.value,numero2.value);" >
</form>
</body>
</html>
<script type="text/javascript">
function suma(numero1,numero2) {
var resultado = parseInt(numero1) + parseInt(numero2);
document.getElementById("resultado").innerHTML="Resultado= "+resultado;
}
</script>

<body>
<form name="miForm">
Numero 1 = <input type="text" id="n1" name="n1"></br>
Numero 2 = <input type="text" id="n2" name="n2"></br>
</form>
<div onclick="suma(document.getElementById('n1').value , document.getElementById('n2').value)">
Cliquea aquí para calcular el resultado
</div>
<div id="resultado">Resultado: </div>
</body>
Ejercicios
1. Crea una función que reciba el nombre de una persona como
parámetro y muestre un saludo en la página web.

2. Crea una función que reciba la base y la altura de un rectángulo, y


muestre su perímetro en la página web.

3. Crea una función que reciba la edad de una persona como parámetro
y muestre un mensaje indicando si es mayor o menor de edad.

4. Y si recibe la fecha de nacimiento?


<h1>Formulario de entrada de datos personales</h1>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre"><br>
<label for="fNac">Fecha de nacimiento</label>
<input type="date" id="fNac" name="fNac"><br>
<button onclick="escribeTabla();">Mostrar datos en tabla</button>
<p id="tabla"></p>
function escribeTabla(){
//declaramos las variables que necesitamos
var nombre, fNacimiento, edad, hoy;

nombre= document.getElementById("nombre").value;

//obtenemos la fecha de nacimiento, que es una cadena (String) y la convertimos a fecha


fNacimiento = new Date(document.getElementById("fNac").value);

//obtenemos la fecha actual


hoy=new Date();

//restamos las fechas, dándonos los milisg de diferencia, que hay que pasar a años
edad=Math.trunc((hoy-fNacimiento)/(1000*60*60*24*365));

//mostramos en una tabla el nombre y la edad


document.getElementById("tabla").innerHTML=`<table><tr><td>Nombre:
${nombre}</td></tr><tr><td>Edad: ${edad} </td></tr></table>`;
}
Modifica el ejemplo anterior
creando varias funciones:

1. Función que reciba la fecha de nacimiento


como parámetro, calcula la edad y la
devuelve (return)

2. Función que reciba el nombre y la fecha de


nacimiento como parámetros y muestre
finalmente el nombre y la edad en una
tabla. Ha de llamar a la función1 pasándole
la fecha de nacimiento y recibiendo la edad
function escribeTabla(nombre,fNacimiento){
var edad, hoy;
hoy=new Date();
edad=Math.trunc((hoy-fNacimiento)/(1000*60*60*24*365));
document.getElementById("tabla").innerHTML=`<table> <tr><td>Nombre: ${nombre}
</td></tr><tr><td>Edad: ${edad}</td></tr></table>`;
}
Las funciones no solamente puede recibir variables y
datos, sino que también pueden devolver los valores
que han calculado.
Valores devueltos por la función

Para devolver valores dentro de una función, se utiliza


la palabra reservada return.

Aunque las funciones pueden devolver valores de


cualquier tipo, solamente pueden devolver un valor
cada vez que se ejecutan.

function nombreFuncion ([argumento1, …]) {


var variableADevolver;
operaciones;
…;
return variableADevolver;
}
function calculaPrecioTotal(precio) {
Valores devueltos por la función

var impuestos = 1.21;


var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
return precioTotal;
}

var precio= calculaPrecioTotal(23.34);

alert("El precio es: "+precio);


Ejercicio

Crea un formulario en pantalla donde el usuario dirá


dos números a multiplicar.

Crea una función llamada multiplica2 que admita 2


datos y devuelva el resultado de multiplicarlos.

Crea una función llamada resuelve que admita los dos


números dados por el usuario, se los pase a la función
multiplica2, recoja el resultado y lo muestre por
pantalla.

solución
Ejercicios
1. Realiza una función que solicite un texto, y sustituya otro
texto que aparece en la página web en una determinada
ubicación por el texto solicitado.
solución

2. Realiza una función a la que se le pase un número como


argumento, y que devuelva un número aleatorio (sin
decimales) entre 0 y ese número (pista: Math.random(),
Math.floor())
solución
<!DOCTYPE html>
<html>
¿Qué hace el
<head> siguiente
<script type="text/javascript">
function pideNumero(){ script?
var n=prompt("Dime el numero");
return parseFloat(n);
}

var numero=pideNumero();
document.write("<h1> ¿? </h1> <br/>");
document.write(numero + " * " + 1 + " = " + numero*1 + "<br/>");
document.write(numero + " * " + 2 + " = " + numero*2 + "<br/>");
document.write(numero + " * " + 3 + " = " + numero*3 + "<br/>");
document.write(numero + " * " + 4 + " = " + numero*4 + "<br/>");
document.write(numero + " * " + 5 + " = " + numero*5 + "<br/>");
document.write(numero + " * " + 6 + " = " + numero*6 + "<br/>");
document.write(numero + " * " + 7 + " = " + numero*7 + "<br/>");
document.write(numero + " * " + 8 + " = " + numero*8 + "<br/>");
document.write(numero + " * " + 9 + " = " + numero*9 + "<br/>");
document.write(numero + " * " + 10 + " = " + numero*10 + "<br/>");
</script>
</head>
<body>
</body>
</html>
Mayor que (a > b)
Mayor o igual que (a >= b)
Menor que (a < b)
Menor o igual que (a <= b)
Igual que (a == b)
Condiciones

Igual que (no solo valor, sino tipo tb) (a ===b)


Distinto de (a != b)

(condición1 Y condición2) (condición1 && condición2)

(condición1 O condición2) (condición1 || condición2)


Permite tomar decisiones en función de una condición.

En pseudocódigo sería:

Si (condición) entonces
acción a realizar

En JavaScript sería:
If condicional

if (condición) {
acción1;
acción2;
}
acción3;
…
Permite realizar ciertas acciones si se cumple una condición, y
otras determinadas acciones si la condición resulta falsa.

En pseudocódigo sería:

Si (condición) entonces
acciones a realizar
If-else condicional

si no
acciones a realizar

En JavaScript sería:

if (condición) {
acción1;
acción2;
} else {
acción3;
acción4;
}
acción5;
Ejemplo2 if-else
Permite tomar decisiones en función de una condición.
Switch condicional múltiple En pseudocódigo sería:
Según (expresión)hacer
si valor1:
acción a realizar
si valor2:
acción
…
en otro caso:
acción
Fin_según

En JavaScript sería:
switch(expresion) {
case x:
…
break;
case y:
…
break;
default:
…
}
Bucles
1. Escribe un script que utilice un bucle for que pida
un número y muestre en la página web su tabla de
multiplicar
2. Igual, pero con un bucle while
3. Igual, pero con un bucle do_while
4. Realiza un script que muestre todas las tablas de
multiplicar del 1 al 9 en una misma tabla
5. Crea un script que dado un número en decimal lo
Ejercicios

pase a binario
6. Crea un script que permita calcular una potencia de
un número basándose en multiplicaciones
Ejemplo círculo
<canvas id="tutorial" width="500" height="500" style="border
: 1px solid grey;">
Tu navegador no soporta canvas. Actualizalo
</canvas>

<script type="text/javascript">
var c=document.getElementById("tutorial");
var dibujo=c.getContext("2d");

dibujo.fillStyle ="blue";
dibujo.beginPath();
dibujo.arc(200,100,50,0,Math.PI*2,true);
dibujo.closePath();
dibujo.fill();
</script>

Investiga qué son cada uno de los parámetros del método arc
Cambiar estilos dinámicamente
con JavaScript
#c749df

#abd2c8

Eventos a utilizar: #93d62c


• onmouseover
• onmouseout (volverlo a poner blanco)
Métodos (hay más) para crear
nuevos elementos en una página
web

(modificación del DOM)


Acceso a objetos en el DOM usando JavaScript
Puedes acceder y manipular cualquier parte de este árbol usando
JavaScript. Algunos métodos comunes para interactuar con el DOM
son:

Acceder a elementos:
• document.getElementById('id'): Selecciona un elemento por su ID.
• document.querySelector('.clase'): Selecciona el primer elemento
que coincida con un selector CSS.
• document.getElementsByTagName('tag'): Selecciona todos los
elementos de un tipo dado.

Crear nuevos elementos:


• document.createElement('div'): Crea un nuevo elemento <div>.

Modificar el contenido de un nodo de texto:


• element.textContent = 'Nuevo texto': Cambia el contenido textual
de un nodo

Modificar atributos de un elemento:


• element.setAttribute('class', 'nueva-clase'): Modifica un atributo,
como class o id.
Visualizando la jerarquía DOM con JavaScript
Usa el siguiente código para recorrer y mostrar la estructura del DOM en la
consola:

function recorrerDOM(nodo, nivel = 0) {


console.log(' '.repeat(nivel * 2) + nodo.nodeName);
nodo.childNodes.forEach(hijo => recorrerDOM(hijo, nivel + 1));
}

// Empieza desde el document


recorrerDOM(document);

Este script te imprimirá en la consola una representación jerárquica del árbol DOM,
mostrando la relación entre nodos.
Métodos para crear nuevos elementos en
una página web
HTML del ejemplo

<form name="miFormulario">
<label for="mensaje">Escribe el mensaje:</label>
<input type="text" id="mensaje" name="mensaje"><br><br>
<label for="veces">Indica la cantidad de veces que quieres mos
trar el mensaje:</label>
<input type="number" id="veces" name="veces">
</form>
<p onclick="">Haz clic para probarme</p>
<table id="tabla">
</table>
Método 1 para crear nuevos
elementos en una página web
var tabla="<table>";
for (i=0; i<veces; i++ ){
tabla+="<tr><td>"+ mensaje + "</td></tr>";
}
tabla+="</table>";
document.getElementById('tabla').innerHTML=tabla;

1. Montamos la vble tabla con todo el html de la tabla y filas

2. Lo agregamos al id tabla
Método 2 para crear nuevos
elementos en una página web
var tabla, fila, celda;
tabla = document.createElement('table');
for (i=0; i<veces; i++ ){
console.log(i);
fila = tabla.insertRow(i);
celda = fila.insertCell(0);
celda.innerHTML = mensaje;
}
document.getElementById("addTable").appendChild(tabla);

1. Creamos varias vbles (para tabla, para cada fila, para cada celda

2. Creamos un nuevo elemento tipo <table> en la vble tabla

3. Insertamos filas y una celda en cada fila, asociados a la vble tabla

4. Metemos en la celda el contenido a visualizar

5. Ponemos la vble tabla en la página web


Método 3 para crear nuevos
elementos en una página web
var tabla = document.getElementById("tabla");
var fila, celda, textocelda;
for (i=0; i<veces; i++ ){
fila = document.createElement("tr");
celda = document.createElement("td");
textoCelda = document.createTextNode(mensaje);
celda.appendChild(textoCelda);
fila.appendChild(celda);
tabla.appendChild(fila);
}

1. Metemos el elemento <table> de la página web en la vble tabla

2. Creamos filas y celdas asignándolas a las vbles fila y celda

3. Creamos un textNode (contenido de la celda)

4. Asignamos jerárquicamente (contenidoCelda → celda → fila →


Práctica
Crea un formulario donde el usuario pondrá los
datos del producto (nombre del artículo, el precio
del producto y la cantidad vendida) y al pulsar el
botón se AÑADA una nueva fila a la tabla con esos
datos
Práctica
Crea un formulario donde el usuario pondrá los datos del
producto (nombre del artículo, el precio del producto (se
permiten decimales→step) y la cantidad vendida) y al pulsar el
botón:
• Se añada una nueva fila a la tabla con esos datos
• Se recalcule el total factura contando las filas
existentes
• Se vacíen los controles del formulario
• Se coloque el foco en el primer control
Agregar gestor de eventos de
forma dinámica
Dado el siguiente ejemplo que no tiene gestor del evento click.
¿Cómo se lo agregamos dinámicamente?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="pulsa">Púlsame</div>
</body>
</html>
Con el método addEventListener()
Miramos la documentación de este método:
https://www.w3schools.com/jsref/met_document_addeventlistener.asp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="pulsa">Púlsame</div>
<script>
document.getElementById('pulsa').addEventListener('click', funcion1);

function funcion1 (){


alert("clic");
}
</script>
</body>
</html>
Se puede definir el gestor de evento con una función anónima
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="pulsa">Púlsame</div>
<script>
document.getElementById('pulsa').addEventListener('click', function(){
alert("clic")
})
</script>
</body>
</html>

Si utilizamos un elemento de ECMAScript 6 como son las arrow functions


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="pulsa">Púlsame</div>
<script>
document.getElementById('pulsa').addEventListener('click', () => {
alert("clic")
})
</script>
</body>
</html>
O bien, accediendo a su método onclick

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<div id="pulsa">Púlsame</div>
<script>
document.getElementById('pulsa').onclick = function (){
alert("clic");
}
</script>
</body>
</html>
¿Recuerdas este ejercicio?
adáptalo utilizando
el método visto
addEventListener
#c749df

#abd2c8

versión1 versión2

Eventos a utilizar:
•onmouseover #93d62c
•onmouseout (volverlo a poner
blanco)
Versión optimizada e independiente del número de celdas
Validación de formularios

Para validar el formulario


proporcionado de manera
efectiva, se debe
combinar la validación
del lado del cliente con la
validación del lado del
servidor (si el formulario
se conecta a un
backend).
Validación de formularios Los formularios se utilizan para enviar información desde el
cliente al servidor web.

Los campos del formulario obedecen a un formato


determinado y conviene revisarlos para evitar errores en el
servidor.

Javascript permite realizar esta revisión desde el cliente


(navegador) antes de que llegue al servidor.

Conviene ponerle nombre, action y method al formulario


Hay ciertas condiciones que se pueden validar
con atributos HTML
required, maxlength, max, min, pattern, title,…

Propiedades HTML que permiten validar ciertos aspectos de los controles


<input type="radio" name="nombreCampo" value="1"> Respuesta 1
<input type="radio" name="nombreCampo" value="2"> Respuesta 2
<input type="radio" name="nombreCampo" value="3"> Respuesta 3
<input type="radio" name="nombreCampo" value="4"> Respuesta 4
Recuerda:
Forma 1 numOpción comienza por 0.
Validar radiobutton

if (!document.miFormulario.nombreCampo[0].checked &&
!document.miFormulario.nombreCampo[1].checked &&
!document.miFormulario.nombreCampo[2].checked &&
!document.miFormulario.nombreCampo[3].checked){
//no se ha elegido ninguna opción
}

Forma 2
const seleccion = document.querySelector("input[name=‘nombreCampo']:checked");
if (!seleccion) {
//no se ha elegido ninguna opción
}
selecciona el radio que esté checked, tomará el valor null si
no hay ninguno
Respuesta 1<input type="checkbox" name="nombreCampo" value="1">
Respuesta 2<input type="checkbox" name="nombreCampo" value="2">
Respuesta 3<input type="checkbox" name="nombreCampo" value="3">
Respuesta 4<input type="checkbox" name="nombreCampo" value="4">

document.nombreFormulario.nombreCampo[numOpción].checked
Validar checkbox

numOpción comienza por 0.

Forma 1
if (!document.miFormulario.nombreCampo[0].checked &&
!document.miFormulario.nombreCampo[1].checked &&
!document.miFormulario.nombreCampo[2].checked &&
!document.miFormulario.nombreCampo[3].checked){
//no se ha elegido ninguna opción
}

Forma 2
const valores = document.querySelectorAll('input[name="nombreCampo"]:checked');
if (valores.length === 0) {
//no se ha elegido ninguna opción
}
<select name="nombreControl" id="idControl">
<option value="valor0">- Selecciona un valor -</option>
<option value="valor1">Primer valor</option>
<option value="valor2">Segundo valor</option>
<option value="valor3">Tercer valor</option>
</select>
Validar select

document.nombreFormulario.nombreControl.selectedIndex
Devuelve el número del elemento seleccionado
(empieza en 0)

document.nombreFormulario.nombreControl[indice].selected
Devuelve true si el elemento indicado está seleccionado

Forma 1
if (document.miFormulario.nombreControl.selectedIndex==0){
//está elegida la opción inicial (no válida)
}
Forma 2
if (document.getElementById("idControl").value=="valor0”){
//está elegida la opción inicial (no válida)
}
Realiza su validación siguiendo las
formas 1 y 2 en dos prácticas
distintas
Investiga en w3schools ….

Si el usuario selecciona «Otra población» (evento onchange) debe


aparecer un control que hasta entonces estaba oculto (hidden),
además del texto «escribe su nombre» que estaba en una zona
identificada como «otraPoblacion».

Del mismo modo si el usuario elige cualquier población de la lista,


estos campos deben desaparecer.
Forma1
return false → finaliza la función
sin enviar el
formulario

return true → finaliza la función y


se envía el
formulario (submit),
ya que se llamó a
la función desde
Forma2 Para homogeneizar los mensajes de error cuando un dato no cumple las
condiciones, podemos crear unos estilos que nos ayudarán a visualizar
dónde hay error:
• Si hay error se pondrá el fondo rojo y texto en blanco
• Si no hay error, se pondrá fondo blanco y texto negro (normal)
Forma2 La función va comprobando si los distintos datos introducidos en el formulario
tienen errores, si son incorrectos les asigna la clase .error (fondo rojo), si están
correctos, le asigna la clase .ok (fondo blanco), puesto que podría venir de estar
ese dato incorrecto y tendría el fondo rojo.
Forma2
Podemos llamar a la función con el
formulario como argumento
Ejercicio propuesto
Corrección de un examen
NOMBRE: obligatorio FECHA: obligatorio

PARTE TEÓRICA (3 ptos, respuesta incorrecta=- 0.5 ptos)

1.(1 pto) (como radiobutton)¿En qué lugar se ejecuta generalmente el código


Javascript?
a) Servidor
b) Cliente (en el propio navegador de internet)

2. (1 pto) (como select) ¿Cuál de estas es para la inserción del código


Javascript en las páginas HTML?
a) < javascript _code > y < /javascript_code >
b) < script > y < /script >
c) < ?script > y < script? >
d) <javascript> y </javascript>

3. (1 pto) (como checkbox) ¿Cómo se escriben los comentarios en javascript?


– /* comentario */
– <! Comentario -->
– // comentario de una línea
– / comentario de una línea
Investiga en w3schools cómo Ejercicio propuesto
poner la nota y la imagen Corrección de un examen
Nota:
NOMBRE: obligatorio FECHA: obligatorio

PARTE TEÓRICA (3 ptos, respuesta incorrecta=- 0.5 ptos)

1.(1 pto) (como radiobutton)¿En qué lugar se ejecuta generalmente el código


Javascript?
a) Servidor
b) Cliente (en el propio navegador de internet)

2. (1 pto) (como select) ¿Cuál de estas es para la inserción del código


Javascript en las páginas HTML?
a) < javascript _code > y < /javascript_code >
b) < script > y < /script >
c) < ?script > y < script? >
d) <javascript> y </javascript>

3. (1 pto) (como checkbox) ¿Cómo se escriben los comentarios en javascript?


– /* comentario */
– <! Comentario -->
– // comentario de una línea
– / comentario de una línea
Nota aclaratoria: Aprobado >=2
Para entrar en una página web que tú quieras se le muestra al usuario una
pantalla inicial para poner usuario y contraseña, solamente accederá a la
siguiente web si los datos de autenticación son correctos.
Ejercicios varias pantallas
Pantalla 1 Pantalla 2

Pantalla 3
ARRAYS en JavaScript
Es una variable que puede almacenar más de un
valor a la vez.
Los valores pueden ser de distintos tipos
Creación de arrays
var lista = [ ] → array vacío

var lista = [ elemento1, elemento2,…]

var lista = [
elemento1,
elemento2,
…
]
Acceder a los elementos del array
• Se utiliza un índice (empieza por 0)

var lista = [ elemento1, elemento2,…]

lista [0] → elemento1

lista[1] → elemento2

• Acceder al array completo→ utilizando el nombre del array

lista

• Cambiar el valor de un elemento del array

lista[0]=nuevoValor
Propiedades y métodos de los arrays
• Devuelve la cantidad de elementos del array → lista.length

• Acceder al último elemento del array → lista[lista.length-1]

• Recorrer todos los elementos del array →

for (i = 0; i < lista.length; i++){


lista[i]
}

lista.forEach(nombreFuncion);
function nombreFuncion(value){
//value es el valor de cada elemento del array
//esta función es llamada tantas veces como elementos tenga el array
}
• Añadir elementos al array → lista.push(nuevoElemento)
• Quitar el último elemento del array (lo devuelve)→ valor = lista.pop()
• Quitar el primer elemento del array y reindexar los que quedan →
valor = lista.shift()
• …
https://www.w3schools.com/js/js_array_methods.asp
Rellenar un select con un array
con javascript
Ejercicio
Rellena el select de la página web con los nombres de los meses de un
array
Modifica este ejercicio cargando los select con javascript
Pantalla 1 Pantalla 2

Pantalla 3

También podría gustarte