Javascript Ejemplos2018

Manejo avanzado de JavaScript
En el manejo de una página html, es posible desarrollar tareas más

elaboradas usando comandos del tipo DOM, “Document Object
Model”, o bien la librería jquery. En los siguientes ejercicios se van a
manejar algunas de sus posibilidades, junto con la creación de
funciones.
Antes de comenzar hay que tener claro los elementos que forman
una página html. Los títulos se colocan en la cabecera, o “head”, y los
encabezados, h1, y los párrafos, p, se colocan en el cuerpo o “body”
del html.
Identificación de etiquetas dentro de los objetos de texto (1)

En el siguiente ejemplo, le daremos una identificación a un elemento para los comandos de JavaScript desarrollen su
acción sobre un elemento especifico.
<!DOCTYPE html>
<html>
<head>
<title>Usando DOM</title>
</head>
<body>
<h1 id="encabezado">Hallo! Guten Abend!!</h1>
<script>
var ElementoTexto= document.getElementById("encabezado");
console.log(ElementoTexto.innerHTML);
var NuevoTexto = prompt("Coloque un texto aquí :");
ElementoTexto.innerHTML = NuevoTexto;
</script>
</body>
</html>
Identificación de etiquetas dentro de los objetos de texto (2)

Se puede realizar la misma acción de colocar un texto dentro de un párrafo, usando una librería conocida como Jquery.
En este caso, tendremos que llamar una librería de funciones que se encuentra en la red.
Para su utilización se debe tener una conexión habilitada a internet, en caso contrario no se va a desarrollar nada. A
continuación, veamos algunos ejemplos.
Programa1. En este caso haremos lo mismo que se realizó en el código anterior.
1
<!DOCTYPE html>
<html>
<head>
<title>Qué es DOM 1?</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
$("#encabezado").text(NuevoTexto);
</script>
</body>
</html>
Programa 2. En este caso agregamos un párrafo usando javascript.
<!DOCTYPE html>
<html>
<head>
<title>Qué es DOM 2?</title>
</head>
<body>
<script>
$("#encabezado").text(NuevoTexto);
$("body").append("<p>Vea como se coloca un nuevo parrafo</p>");
</script>
</body>
</html>
Programa 3. Aprovechando la posibilidad que permite esta librería, para agregar elementos a la página, en el siguiente
programa se va a combinar un ciclo for, junto a un requerimiento de información para agregar información en la misma
página html.
2
<!DOCTYPE html>
<html>
<head>
<title>Qué es DOM?</title>
</head>
<body>
<script>
$("body").append("<p>Este es un nuevo parrafo</p>");
for (var i = 0; i < 3; i++) {
var hobby = prompt("Menciona una de tus hobbies!");
$("body").append("<p>" + hobby + "</p>");
}
</script>
</body>
</html>
Incorporación de funciones por medio de un archivo *.js

Los códigos de Javascript se pueden agregar a una página html, desde un archivo externo con extensión “.js”,
para evitar que el código se complique por el incremento de instrucciones que no tienen nada que ver con la
visualización.
A continuación, veremos algunos ejemplos de aplicación para operaciones que son recurrentes a la hora de desarrollar
funciones especiales en las páginas.
3
Escribir y alerta
Pagina01.html.
<html>
<head>
<title> probando1</title>
<script type="text/javascript" src="prog1.js"></script>
</head>
<body>
<input type="button" value="un saludo" onclick="bienvenu()"/>
</body>
</html>
prog1.js
Mostrar en una ventana el valor introducido en una caja de texto
Pagina02.html.
<html>
<head>
<script type="text/javascript" src="prog2.js"> </script>
</head>
<body>
<form name="form1">
<input name="entrada">
<input type="button" onclick="myfunction(form1.entrada.value)" value="escribir
en ventana alert">
</form>
<p> Presionando el botón, una función muestra lo que se escribio en la caja de
texto.
</p>
</body>
</html>
prog2.js
4
Bucle para poner títulos
Pagina03.html.
<html>
<head>
<script type="text/javascript" src="prog3.js"> </script>
</head>
<body>
<input type="button" onclick="escribir_cabeceras()" value="ejemplos de
cabeceras">
</body>
</html>
Prog3.js
function escribir_cabeceras(){
for (i = 1; i <= 6; i++){
document.write("<h" + i + ">Cabecera de nivel " + i);
document.write("</h" + i + ">");
}
}
Abrir y cerrar una ventana
Pagina04.html.
<html>
<head>
<script language=javascript src="prog4.js"> </script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="openwindow()">
<input type=button value="Close Window" onclick="closewindow()">
</form>
</body>
</html>
5
Prog4.js
function openwindow() {
m = window.open("pagina03.html");
}
function closewindow() {
m.close()
}
Validación
Pagina05.html.
<html>
<head>
<script type="text/javascript" src="prog5.js">
</script>
</head>
<body>
<form name="myForm" action="#" onSubmit="return validate()">
Enter a value from 1 to 5: <input type="text" name="myInput">
<input type="submit" value="Send input">
</form>
</body>
</html>
6
Prog5.js
function validate(){
x=document.myForm
txt=x.myInput.value
if (txt>=1 && txt<=5){
alert("el número se encuentra en el rango");
return true;
alert("el número "+txt+" se encuentra en el rango");
} else {
if (txt < 1) alert("Es menor que 1, debe estar entre 1 y 5")
else if (txt > 5) alert("Es mayor que 5, debe estar entre 1 y 5")
else alert("No es válido, debe estar entre 1 y 5")
return false
}
}

Javascript Ejemplos2018

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Ejemplos2018

Uploaded by

Copyright:

Available Formats

Manejo avanzado de JavaScript

En el manejo de una página html, es posible desarrollar tareas más

Identificación de etiquetas dentro de los objetos de texto (1)

Identificación de etiquetas dentro de los objetos de texto (2)

Programa1. En este caso haremos lo mismo que se realizó en el código anterior.

Programa 2. En este caso agregamos un párrafo usando javascript.

Incorporación de funciones por medio de un archivo *.js

Mostrar en una ventana el valor introducido en una caja de texto

Abrir y cerrar una ventana

You might also like