CHTML-B-Ejercicio-SelectJavaScript

•

Outros

0

marketingdigital1995

17/6/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Libros

93.136 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

www.globalmentoring.com.mx
Por el experto: Ing. Ubaldo Acosta
www.globalmentoring.com.mx
Crear un proyecto con JavaScript para poner en práctica el 
concepto de Select. Al finalizar veremos:
www.globalmentoring.com.mx
Creamos un nuevo proyecto:
www.globalmentoring.com.mx
Creamos un nuevo archivo funciones.js:
www.globalmentoring.com.mx
Creamos un nuevo archivo javaFaq.html:
www.globalmentoring.com.mx
Creamos un nuevo archivo netFaq.html:
www.globalmentoring.com.mx
Creamos un nuevo archivo phpFaq.html:
www.globalmentoring.com.mx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cambio de Navegación</title>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Cambio de Navegaci&oacute;n</h1>
<select id="selectFaq">
<option selected>Selecciona un FAQ</option>
<option value="javaFaq.html">Java FAQ</option>
<option value="netFaq.html">.Net FAQ</option>
<option value="phpFaq.html">PHP FAQ</option>
</select>
</body>
</html>
Archivo index.html:
http://icursos.net/cursos/HTML/Leccion08/SelectJavaScript/index.txt
www.globalmentoring.com.mx
/**
* @author ubaldo
*/
window.onload = configuraSelect;
function configuraSelect() {
//Este es el elemento seleccionado por default
document.getElementById("selectFaq").selectedIndex = 0;
document.getElementById("selectFaq").onchange = cambiaPagina;
}
function cambiaPagina() {
var elementoSelect = document.getElementById("selectFaq");
var nuevaPagina = elementoSelect.options[elementoSelect.selectedIndex].value;
if (nuevaPagina != "") {
window.location = nuevaPagina;
}
}
Archivo funciones.js:
http://icursos.net/cursos/HTML/Leccion08/SelectJavaScript/funciones.js
www.globalmentoring.com.mx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java FAQ</title>
</head>
<body>
<h1>Java FAQ</h1>
<a href="index.html">Regresar al Inicio</a>
</body>
</html>
Archivo javaFaq.html:
http://icursos.net/cursos/HTML/Leccion08/SelectJavaScript/javaFaq.txt
www.globalmentoring.com.mx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.Net FAQ</title>
</head>
<body>
<h1>.Net FAQ</h1>
<a href="index.html">Regresar al Inicio</a>
</body>
</html>
Archivo netFaq.html:
http://icursos.net/cursos/HTML/Leccion08/SelectJavaScript/netFaq.txt
www.globalmentoring.com.mx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Php FAQ</title>
</head>
<body>
<h1>Php FAQ</h1>
<a href="index.html">Regresar al Inicio</a>
</body>
</html>
Archivo phpFaq.html:
http://icursos.net/cursos/HTML/Leccion08/SelectJavaScript/phpFaq.txt
www.globalmentoring.com.mx
www.globalmentoring.com.mx
Con este ejercicio hemos puesto en práctica el concepto del 
elemento Select de HTML, y con esto podemos agregarlo a 
cualquier de nuestros formularios html.
Vimos cómo al seleccionar cualquiera de las opciones del 
elemento Select, JavaScript detecta la opción seleccionada y 
puede mandar una respuesta acorde a lo escogido.
www.globalmentoring.com.mx
Por: Ing. Ubaldo Acosta