Guia de Aprendizaje Nº3 Sistemas Noveno

MATERIAL PEDAGÓGICO
GUÍAS, TALLERES, EVALUACIONES

INSTITUCIÓN EDUCATIVA TÉCNICA INDUSTRIAL
RAFAEL NAVIA VARÓN Fecha: Página
Versión: 02 RNV-FR-AT-22
2020/03/31 1 de 1
1. Identificación de la Guia de Aprendizaje
Plan Integrador Taller Técnico de Sistemas Periodo 1 Grupo 9°

Propósito
JavaScript
Formativo
Áreas que se Fecha
Taller Técnico de Sistemas Junio 5
integran estimada
Tiempo
Docentes David Parra Cardona 2 Semanas
estimado
En momentos de crisis sólo la imaginación es más importante que el conocimiento

Albert Einstein
Desarrollo de Páginas Web con JavaScript.
2. Descripción de la Unidad
Presentación JavaScript es un sencillo lenguaje de programación, que presenta una característica

especial: sus programas, llamados comúnmente scripts, se en las páginas HTML y se
ejecutan en el navegador (Mozilla Firefox, Microsoft Internet Explorer,...). Estos scripts
normalmente consisten en unas funciones que son llamadas desde el propio HTML cuando
algún evento sucede. De ese modo, podemos añadir efectos como que un botón cambie de
forma al pasar el ratón por encima, o abrir una ventana nueva al pulsar en un enlace, ...
JavaScript fue desarrollado por Netscape, a partir del lenguaje Java, el cual sigue una
filosofía similar, aunque va más allá. Java es un lenguaje de programación por sí mismo,
como lo puedan ser C, Pascal o VisualBasic. Esto quiere decir, que se puede ejecutar un
programa Java fuera de un navegador. Pero, repetimos, que la diferencia fundamental es
que Java es un lenguaje completo, que puede ser utilizado para crear aplicaciones de todo
Sede Educativa Rafael Navia Varón – Jornada Tarde

2020/03/31 1 de 1
tipo, mientras que JavaScript sólo “funciona” dentro de una página HTML. Por otro lado,
también se puede incluir Java en páginas HTML, tal es el caso de los applets.
Scripts y eventos
Para introducir un script JavaScript se hace dentro de las etiquetas:
<SCRIPT LANGUAGE=“JavaScript”> código del script </SCRIPT>
Veamos un ejemplo básico de una página HTML que contiene un script de Javascript:
<HTML>
<BODY>
Esto es HTML
<br>
<SCRIPT LANGUAGE="JavaScript">
document.write("Esto es JavaScript")
</SCRIPT>
<br>
Esto vuelve a ser HTML
</BODY>
</HTML>
El resultado es que escribe:
Esto es HTML
Esto es JavaScript
Esto vuelve a ser HTML
Realmente la funcionalidad del anterior script es nula, ya que para escribir “Esto es
JavaScript” nos basta con usar HTML. La verdadera utilidad de JavaScript es el que los scripts
se ejecuten cuando ocurra algún evento, como sea un click de ratón, que éste pase por
encima de un enlace, que se envíen los datos de un formulario, ... En el siguiente ejemplo,
se ejecuta el script cuando se pasa por encima del enlace con el ratón:
<HTML>
<BODY>
<a href="#" onmouseover="window.status='este es el texto que aparece en la barra de
status'; return true">Pasa el ratón n por aquí</a>
</BODY>
</HTML>
En este ejemplo, al pasar el ratón sobre el enlace, se llama a la acción especificada en la

cláusula onmouseover. Es decir, se ejecuta cuando ocurre un cierto evento. Se dice por eso
que es una programación orientada a eventos. En el ejemplo lo que ocurre es que se cambia
el texto de la barra de status (la de la parte inferior de la ventana).

2020/03/31 1 de 1
Veamos una lista de los eventos más comunes, cuando se producen y sobre qué etiquetas
pueden actuar:
Fuente: Libro “El lenguaje JavaScript” Autor: Toni Navarrete.
3. Actividades y Estrategias de Aprendizaje
Desarrollo de la Actividad Recursos Evaluación

Actividad 1 – Probar los ejemplos.
Deben pasar los códigos de los ejemplos adjuntos al final del
documento al editor de código y observar los resultados.
Ejemplos:
Se suben los
1. Cómo conseguir que un enlace gane o pierda el foco de Dispositivos: PC
archivos a Drive:
entrada. – Móvil.
2. Seleccionar el texto de un cuadro de texto y darle el foco.
3. Obtener y cambiar la URL de un formulario. Programas:
Formato Archivo:
4. Como actualizar dos iframes al mismo tiempo. PC: Sublime Text
.ZIP o
5. Conocer los datos del navegado. / Bloc de notas.
Archivos html y css
6. Conocer los datos relacionados con la pantalla. Android: Touch
7. Refrescar el contenido de una página. Coder
Nombre Carpeta:
8. Generar un reloj a intervalos de un segundo. IOS: HTML Code
Semana_1_Junio
9. Generar otro reloj, fecha y hora a intervalos de un Play
segundo. HTML Master
Fecha Entrega:
10. Manejando el canvas para gráficos web. Time To Code
Junio 5
11. Utilizando la consola de depuración.
12. Visualizar por pantalla un mensaje de bienvenida.
13. Botón para volver hacia atrás.
14. Recoger un dato por teclado y visualizarlo.

2020/03/31 1 de 1
Desarrollo de la Actividad Recursos Evaluación

15. Pedir confirmación para visitar una página.
16. Abrir una ventana pop-up cada cierto tiempo.
17. Visualizar un reloj digital en la página web.
18. Crear una galería de imágenes.
19. Deshabilitar el botón derecho del ratón.
20. Imprimir una página Web.
21. Mostrar mensajes en movimiento en la barra de estado
del navegador.
22. Crear un correo electrónico.
Adaptaciones curriculares Si eres un estudiante con necesidad educativa especial, se recomienda el

acompañamiento de padres o acudiente para mayor comprensión de la guía.
4. Orientaciones Generales/Observaciones
Para evidenciar mejores resultados en su proceso de aprendizaje, es preciso que tenga en cuenta las siguientes
recomendaciones:
 Lea completamente la guía.

 Seguir las indicaciones del docente.
 En la columna evaluación siempre va a encontrar lo q debe entregar con respecto a la actividad.
Caso 1: Cómo conseguir que un enlace gane o pierda el

foco de entrada.
<html>
<head>
<style type="text/css">
a:active {color:blue}
</style>
<script type="text/javascript">
function getfocus()
{
document.getElementById('w3s').focus();
}

2020/03/31 1 de 1
function losefocus()
{
document.getElementById('w3s').blur();
}
</script>
</head>
<body>
<a id="w3s" href="http://www.google.com">Visita
Google.com</a><br><br>//solo por presentacion
<form>
<input type="button" onclick="getfocus()" value="Coge el foco">
<input type="button" onclick="losefocus()" value="Pierde el foco">
</form>
</body>
</html>
getElementById es una función de document que permite llamar a un objeto concreto de la página. Esta es la
forma normal de acceder a los elementos de la página, aunque como en el caso de los formularios, también
es posible acceder a algunos elementos directamente usando sus nombres como propiedades de objetos.
<html>
<head>
function setfocus()
{
document.forms[0].txt.select();
document.forms[0].txt.focus();
}
</script>
</head>
<body>
<form>
<input type="text" name="txt" size="30" value="¡Hola mundo!">
<input type="button" value="Selecciona texto" onclick="setfocus()">

2020/03/31 1 de 1
</form>
</body>
</html>
Caso 2: seleccionar el texto de un cuadro de texto y darle el

foco.
<html>
<head>
function setfocus()
{
document.forms[0].txt.select();
document.forms[0].txt.focus();
}
</script>
</head>
<body>
<form>
<input type="text" name="txt" size="30" value="¡Hola mundo!">
<input type="button" value="Selecciona texto" onclick="setfocus()">
</form>
</body>
</html>
Como podemos ver, es posible conseguir el contenido de los formularios de la página por medio de la matriz
forms[] de document.
Caso 3: obtener y cambiar la URL de un formulario.

<html>
<head>
function getAction()
{
var x=document.forms.myForm;
alert(x.action);

2020/03/31 1 de 1
function changeAction(action)
{
var x=document.forms.myForm;
x.action=action;
alert(x.action);
}
</script>
</head>
<body>
<form name="myForm" action="ejemplos.php">
<input type="button" onclick="getAction()" value="Ver el valor del
atributo action">
<br><br>
<input type="button" onclick="changeAction('hola.php')" value="Cambiar el
valor del atributo action">
</form>
</body>
</html>
En este ejemplo podemos ver otra forma de utilizar los formularios en el código JavaScript.
Caso 4: como actualizar dos iframes al mismo tiempo.

<html>
<head>
<script language="javascript">
function twoframes() {
document.all("frame1").src="frame_c.htm";
document.all("frame2").src="frame_d.htm";
}
</script>
</head>
<body>
<iframe src="frame_a.htm" name="frame1"></iframe>
<iframe src="frame_b.htm" name="frame2"></iframe>

2020/03/31 1 de 1
<br>
<form>
<input type="button" onclick="twoframes()" value="Cambiar la URL de los
dos iframes">
</form>
</body>
</html>
Escríbanse las cuatro páginas de los frames que se especifican y probar. Es muy sencillo darse cuenta de que
la función all nos permite acceder a los distintos elementos de la página, al igual que lo hemos hecho antes
de otras formas.
Caso 5: conocer los datos del navegador.

<html>
<body>
document.write("<p>Navegador: ");
document.write(navigator.appName + "</p>");
document.write("<p>Versión: ");
document.write(navigator.on + "</p>");
document.write("<p>C: ");
document.write(navigator. + "</p>");
document.write("<p>Plataf: ");
document.write("<p>Cookies : ");
document.write("<p>Cabecera de agentnavegador: ");

</script>
</body>
</html>
Caso 6: conocer los datos relacionados con la pantalla.

2020/03/31 1 de 1
<html>
<body>
document.write("Resolución de pantalla: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("Area visible disponible: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("Resolución de color: ");
document.write(screen.colorDepth);
document.write(" bits<br>");
</script>
</body>
</html>
Caso 7: refrescar el contenido de una página.

<html>
<head>
function refresh()
{
window.location.reload();
}
</script>
</head>
<body>
<form>
<input type="button" value="Refrescar página" onclick="refresh()">
</form>
</body>
</html>
Caso 8: Generar un reloj a intervalos de un segundo.

2020/03/31 1 de 1
<html>
<head>
var intval=""
function start_Int()
{
if(intval=="")
{
intval=window.setInterval("start_clock()",1000);
}
else
{
stop_Int();
}
}
function stop_Int()
{
if(intval!="")
{
window.clearInterval(intval);
intval="";
document.formu.tiempo.value="Tiempo detenido";
}
}
function start_clock()
{
var d=new Date(); // Creamos una variable "d" de tipo "Date".
var sw="am";
var h=d.getHours(); // Asignamos a "h" la horas obtenidas de "d".
var m=d.getMinutes() + "";
var s=d.getSeconds() + "";
if(h>12)
{
h-=12;
sw="pm";
}
if(m.length==1)

2020/03/31 1 de 1
{
m="0" + m;
}
if(s.length==1)
{
s="0" + s;
}
document.formu.tiempo.value=h + ":" + m + ":" + s + " " + sw;
}
</script>
</head>
<body>
<form id="formu" name="formu">
<input type="text" name="tiempo" value="Tiempo parado">
</form>
<input type="button" value="Empezar" onclick="start_Int()">
<input type="button" value="Parar" onclick="stop_Int()">
<p>Este ejemplo actualiza el contenido del cuadro de texto cada
segundo.
Pulsa "Empezar" para iniciar la función setInterval. Pulsa "Parar" para
detener el
tiempo con la función clearInterval.</p>
</body>
</html>
Estúdiese bien este ejemplo. La variable intval contiene un valor que setInterval genera, y con el que
podremos detener el intervalo usándolo en la llamada a clearInterval. Especialmente interesante es la
función start_clock, que formatea la hora para su visualización.
Caso 9: Generar otro reloj, fecha y hora a intervalos de un

segundo.
<html>
<head>
<title>Proforma de Computadora</title>
<script>
function relojFecha(){
var mydate=new Date();var year=mydate.getYear();

2020/03/31 1 de 1
if (year < 1000)year+=1900;

var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();
if (daym<10)daym="0"+daym;
var dayarray=new
Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado");
var montharray=new
Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto",
"Septiembre","Octubre","Noviembre","Diciembre");
var horas = mydate.getHours();
horas = (horas<10)?"0"+horas:horas;
var minutos = mydate.getMinutes();
minutos = (minutos<10)?"0"+minutos:minutos;
var segundos = mydate.getSeconds();
segundos = (segundos<10)?"0"+segundos:segundos;
document.getElementById("idReloj").innerHTML = "<"+"small><"+"font
color='000000' face='Verdana'>"+
dayarray[day]+"
"+daym+" de "+montharray[month]+" de "+
year+"
"+horas+":"+minutos+":"+segundos+"<"+"/font><"+"/small>";
setTimeout('relojFecha()',1000);
}
</script>
</head>
<body onload="relojFecha()">
<p id="idReloj"></p>
</body>
</html>
Téngase en cuenta que, a diferencia del anterior ejemplo, el reloj está orientado a usar setTimeout, que
permite lanzar la función relojFecha cada segundo. Por ello, no se puede parar y se lanza usando el
evento onload de body.
Caso 10: Manejando el canvas para gráficos web.

El siguiente ejemplo muestra un conjunto de partículas distribuidas en un plano (Global Array of Particles)
con un movimiento vertical browniano que son representadas en un canvas en perspectiva caballera (falso

2020/03/31 1 de 1
3D). Este ejemplo ha sido probado en Firefox 3.5 aunque debería funcionar en cualquier navegador con
soporte para canvas.
<html>
<head>
<script>
var gcc ; // gcc == "Global Canvas Context"
var gap = []; // gap == "Global Array of Particles"
var SINPI_4 = Math.sin(Math.PI/4);
var COSPI_4 = Math.cos(Math.PI/4);
function ObjectParticle(posX, posY, posZ){

this.posX = posX;
this.posY = posY;
this.posZ = posZ;
this.kgr = 0.01;
}
function drawParticle(context, part) {

posX = part.posX - (0.5 * COSPI_4 * part.posY) ;
posY = (0.5 * part.posY*SINPI_4) ;
context.moveTo(posX,posY);
posY-= + part.posZ;
posX = part.posX - (0.5 * COSPI_4 * part.posY) ;
context.lineTo(posX,posY);
}
function redrawCanvas() {
gcc.clearRect(0,0,1000,1000);
gcc.strokeStyle = "rgb(0,0,0)";
gcc.beginPath();
for (idx=0; idx<gap.length; idx++) {
drawParticle(gcc,gap[idx]);
}
gcc.stroke(); // <--- Or fill()
}
function simulatePhysics() {
// La física simulada es muy simple. Movimiento browniano.
for (idx=0; idx<gap.length; idx++) {

2020/03/31 1 de 1
par = gap[idx];
par.posZ += (Math.random()-0.5);
}
redrawCanvas();
}
function initParticles() {
for (var posX=0; posX<=200; posX+=20){
for (var posY=0; posY<=200; posY+=20){
gap.push(new ObjectParticle(posX, posY, 0));
}
}
return;
}
function initApp(){
canvas1 = document.getElementById('idCanvas1');
gcc = canvas1.getContext('2d');
gcc.scale(1.5,1.5);
gcc.translate(100,50);
initParticles();
setInterval(simulatePhysics,100);
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="initApp();" >
<canvas id="idCanvas1" width="500" height="500"></canvas>
</body>
</html>
Caso 11: Utilizando la consola de depuración

Muchos navegadores soportan de forma estándar o como extensión una consola javascript que permite
depurar y logear las aplicaciones de forma cómoda sin recurrir a trucos como mostrar un alertBox (p.ej
Firefox utiliza la extensión Firebug para ello). Para enviar un texto a la consola basta con hacer:

2020/03/31 1 de 1
console.log("el valor de la variable filaActiva es "+filaActiva);
Para recorrer un objeto y mostrarlo en la consola como un árbol de objetos anidados:
console.dir(objDIVMarco1);
Para visualizar datos en una tabla:
1 // Mostrando datos de varios arreglos

2 console.table([
3 ['javascript', 'PHP', 'CSS', 'HTML'],
4 ['JQuery', 'MooTools'],
5 ['Laravel', 'Symfony', 'Angular JS', 'NativeScript']
6 ]);
7
8 // Mostrando datos de varios objetos
9 console.table([
10 {nombre: 'Juan', edad: 18, email: 'juan@mail.com'},
11 {nombre: 'Sully', edad: 21, email: 'sully@mail.com'},
12 {nombre: 'Axel', edad: 18, email: 'axel@mail.com'}
13 ]);
14
15 console.table({
16 filaA: {nombre: 'Juan', edad: 18, email: 'juan@mail.com'},
17 filaB: {nombre: 'Sully', edad: 21, email: 'sully@mail.com'},
18 filaC: {nombre: 'Axel', edad: 18, email: 'axel@mail.com'}
19 });
Agrupando mensajes
1 console.group('Mensajes');
2 console.log('JavaScript %ces grandioso', 'background-color: #91DC5A;
color: #fff; padding: 3px 8px; border-radius: 2px;');
3 console.error('Error :(');
4 console.warn('Warn!');
5 console.groupEnd();

2020/03/31 1 de 1
Fuente: https://es.wikibooks.org/wiki/Programación_en_JavaScript/Ejemplos_de_código
Visualizar por pantalla un mensaje de bienvenida
Ejemplo 1 . Visualizar por pantalla un mensaje de bienvenida a la página Web.
En nuestro primer ejemplo, simplemente, crearemos un Javascript que lo que hará es visualizar un
mensaje de bienvenida cuando el usuario entre a la página Web. Cada vez más, las páginas Webs
muestran un mensaje de este tipo para dar la bienvenida cuando se entran en ellas.
Como se puede apreciar el código Javascript se coloca (o se embebe) dentro de uno de HTML,
encerrándolo entre las etiquetas < script>< /script>.
Abre el bloc de Notas, copia el código anterior y guárdalo como Ejemplo01.html. (Si no te apetece hacer
esto puedes abrir el mismo desde el directorio Ejemplos I). Después, ejecútalo pulsando doble clic con el
ratón.
Botón para volver hacia atrás

2020/03/31 1 de 1
Ejemplo 2. Botón que al ser pulsado vuelve a la página anterior de la que hubiera en ese momento.
Se trata de un botón para volver hacia atrás, a semejanza del que tenemos en la barra de herramientas
del navegador. Al pulsar el botón se realiza una instrucción Javascript.
Dicha instrucción Javascript, llamada history.go(-1), se encuentra dentro de un atributo de

HTML, onclick, lo cual indica que esa instrucción SOLAMENTE se ejecutará cuando se realice la
pulsación del botón, representado por la etiqueta HTML . Un poco más técnico, el evento es
pulsar el botón (onclick) y la acción (history.go(-1)) es volver a la página anterior en el historial de
navegación. Para verlo correctamente, ejecuta primero Ejemplo01.html! (Necesita el Ejemplo02 alguna
página para volver para atrás).
Recoger un dato por teclado y visualizarlo
Ejemplo 3. Visualiza por pantalla el nombre introducido por teclado
En muchas ocasiones será de gran utilidad recoger un dato por teclado y guardarlo para posteriormente
tomar decisiones según lo que se haya introducido (muy útil por ejemplo para los accesos de los usuarios a
las páginas). En este ejemplo, la variable que definimos, nom nos servirá para guardar lo que
introduzcamos por teclado a través de la función prompt de Javascript.

2020/03/31 1 de 1
Pedir confirmación para visitar una página
Ejemplo 4. Ejemplo que pide confirmación para visitar una página.
En algunas páginas Webs cuando accedemos a ellas nos piden que confirmemos que somos mayores de
edad para que podamos entrar en ellas. Esta confirmación lo podemos hacer con Javascript. La
función confirm visualiza una ventana emergente de confirmación (con el texto que le indiquemos) cuyas
opciones que nos da son Aceptar o Cancelar dicha confirmación. Devolverá dicha función un “ trae”
(si pulsamos Aceptar) o un “ false” (si pulsamos Cancelar) y en el ejemplo solamente visitaremos la
página oficial de la saga tan famosa de Star Wars cuando al pulsar sobre el enlace hayamos pulsado
Aceptar.
Abrir una ventana pop-up cada cierto tiempo

2020/03/31 1 de 1
Ejemplo 5. Ejemplo que abre una ventana emergente cada 3 segundos. Pulsando el botón no se abren
más.
A continuación mostramos un ejemplo de cómo abrir ventanas emergentes (o también llamadas pop-up)
cada cierto tiempo automáticamente. Este ejemplo es muy útil para abrir ventanas de publicidad aparte de
la principal.
En el ejemplo se define un intervalo de ejecución en Javascript con la función setInterval que lo que hará es
ejecutar la función abrir_ventana() cada 3 segundos (3000 milisegundos). La función abrir_ventana()
contiene la función window.open que lo que hará es abrir una nueva página conteniendo la web del Ministerio
de Educación. Al pulsar sobre el botón se ejecutará el código Javascript clearTimeout que detendrá el
intervalo de ejecución de abrir ventanas continuamente.
Visualizar un reloj digital en la página web

2020/03/31 1 de 1
Ejemplo 6. Ejemplo que visualiza un reloj digital.
Este ejemplo es muy útil para visualizar en una página html un reloj dígital que se va actualizando cada
500 milisegundos. Como se puede apreciar, se crea un intervalo de ejecución de 500 milisegundos de la
función “ Ver_Hora.” Ver_Hora() recoge la hora, la formatea con la representación hh:mm:ss (hora,
minutos, segundos) y la visualiza dentro del objeto del html, identificado con el nombre de “ mireloj” .
Dicho objeto, se encuentra dentro del documento de html, a su vez en el
único formulario existente y definitivamente en un botón en forma de texto .
Es por esto que al referenciarlo para escribir en él la hora Javascript lo haga de la siguiente forma:
document.forms[0].mireloj.value
Si hubiera otro formulario en la página que lo contuviera sería de la siguiente manera:

2020/03/31 1 de 1
document.forms[0].mireloj.value
Esto es lo que se denomina anidamiento de objetos (dentro de unos hay otros).
Crear una galería de imágenes
Ejemplo 7. Ejemplo que muestra una galería de imágenes.
Este es un ejemplo práctico de cómo crear una galería de imágenes con Javascript.
Tenemos una etiqueta <img> en html denominada también con el nombre “ img” que iremos cambiando,
según lo que elijamos dentro del formulario imágenes en las opciones de selección <select> llamados
conjuntamente imagen.

2020/03/31 1 de 1
Al cambiar (onChange) de selección, se ejecutará la función ver_imagen() que cargará en el objeto

llamado img ( document.images.img.src) el contenido del valor (value, en este caso contienen ficheros
de imágenes – 1.jpg,2.jpg…) de la opción que en ese momento hayamos seleccionado
(document.imagenes.imagen.selectedIndex) del objeto imagen:
document.imagenes.imagen.options[document.imagenes.imagen.selectedIndex].value
Deshabilitar el botón derecho del ratón
Ejemplo 8. Ejemplo que deshabilita el botón derecho del ratón.
Al pulsar con el botón derecho del ratón sobre una página Web podríamos seleccionar cualquier gráfico o
texto que contuviera este y guardarlo en nuestro ordenador. Es posible que los diseñadores de dichas
páginas sean muy reticentes a esto. Deshabilitando el botón derecho se solucionaría, aunque hay que decir

2020/03/31 1 de 1
que por otros medios (más complejos), se conseguiría igualmente guardar el contenido, aún así esta es
una buena y rápida solución para aquellos usuarios menos avanzados.
Hay que tener en cuenta que el script hace diferencia entre los navegadores de Netscape e Internet
Explorer ya que estos tratan de forma diferente los eventos de pulsar los botones del ratón.
Básicamente este script, cuando se pulsa un botón del

ratón (document.onmousedown o window.onmousedown) lo que hace es ejecutar la
función boton_derecho() que a su vez, lo que hace, es comprobar si se ha pulsado el derecho
(ejemplo event.button == 2 || event.button == 3) y entonces lo que genera es visualizar una alerta.
Imprimir una página Web
Ejemplo 9. Ejemplo que al pulsar un botón se imprime la página Web.
Este ejemplo es tan sencillo como práctico. Con Javascript también podemos imprimir una página Web.
Simplemente ejecutando la función "window.print()" se imprimirá todo el contenido de la página actual.
En este caso, hemos incluido un botón que al pulsarlo (onClick) se realiza la acción de imprimir
la página.
Este ejemplo es muy útil para incluir en páginas que no incluyen las barras típicas del explorador (por
decisión del diseñador) y que por lo tanto en ellas no se puede ejecutar la opción típica de
Archivoà Imprimir…propia del Navegador. De esta forma se podría meter un botón que imprimiera el
contenido de dicha página tal como muestra el ejemplo.

2020/03/31 1 de 1
¿Sabias que…?
Java y Javascript son dos lenguajes totalmente diferentes, que solo tienen en común la primera parte
del nombre. Además de que Java fue creado por Sun Microsystems (Javascript por Netscape) dicho
lenguaje es más general, pudiéndose realizar grandes aplicaciones de gestión para empresas.
Mostrar mensajes en movimiento en la barra de estado del navegador
Ejemplo 10. Ejemplo que muestra un mensaje en movimiento en la barra de estado del navegador.
Cuando se accede a una página Web cualquier método es válido para captar la atención del usuario.

2020/03/31 1 de 1
En algunas ocasiones te habrás fijado que emergen mensajes que se van moviendo en la barra de
estado del navegador, la que está justamente debajo de la página que se ve. Esto recurso es muy útil para
captar rápidamente la atención del usuario y principalmente sirven para mostrar mensajes cortos que se
usan para dar alguna información especifica de la página (cual es el tema principal de la página, algún
enlace de interés dentro de la página, etc). El código Javascript que se presenta aunque pueda parecer muy
complejo en realidad no lo es.
Pasemos a explicarlo.
Cuando se carga la página (onLoad) se ejecuta la función scroll_start() que lo que hace, en primer lugar,
es definir el texto a escribir en la barra. Después, realiza un truquillo. Añade al mensaje 100 caracteres en
blanco. La razón a esto es que si no lo hacemos, el mensaje se ajustará totalmente a la izquierda de la
barra y no se podrá ver con claridad. De esta forma, le estamos diciendo que al añadir unos caracteres
en blanco, deje la parte izquierda de la barra “ libre” para visualizar el texto (si no ves clara la explicación
prueba a comentar las líneas de código de la siguiente forma -añadiendo los caracteres // al principio de
cualquier linea Javascript el Navegador no ejecutará dicha línea- y entenderás mejor) :
// for (i=0;i<space;i++)
// msg=" "+msg;
Después se ejecuta continuamente la función scrollmsg(pos), a través de un intervalo de

ejecución (setTimeOut es muy parecida a setInterval con la diferencia que se ejecuta solo una vez, es por lo
que como se ve hay que volver a ejecutarla cada vez), que lo que hará es visualizar en la barra de estado
el substring que se obtenga de la posición pos de la cadena a visualizar hasta el final de la misma. Así
de esta forma se consigue el efecto scroll deseado.
Crear un correo electrónico

2020/03/31 1 de 1
Ejemplo 11. Ejemplo que construye un correo electrónico para ser mandado.
Un ejemplo muy práctico. Podemos construir un correo electrónico en Javascript simplemente generando
un string con la estructura siguiente:
mailto:correo@destino?subject=Asunto del correo&body=Cuerpo
Y después asignar a la siguiente función de Javascript location.href el string que hubiésemos construido.
Al ejecutar esto último, se abrirá nuestro gestor de correo predeterminado con el correo que quisiésemos
mandar, ya totalmente completado y listo para ser enviado.
Fuente: https://platzi.com/contributions/que-es-y-para-que-sirve-javascript-embeber-javascript-en-
html-
3/?utm_source=google&utm_medium=cpc&utm_campaign=2040392625&utm_adgroup=72126061356
&utm_content=356290584890&utm_source=google&utm_medium=cpc&gclid=Cj0KCQjwp5_qBRDBARI
sANxdcikzq1XVNI5C2fgp20oInYWBVxS8AYy-osA8xN1mMw2c1djC03OnOZ0aAkJAEALw_wcB
CURSOS VIRTUALES

2020/03/31 1 de 1
A continuación les listo los cursos de formación virtual disponibles en la plataforma

www.senasofia.edu.co con los cuales pueden completar la formación.

Guia de Aprendizaje Nº3 Sistemas Noveno

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia de Aprendizaje Nº3 Sistemas Noveno

Cargado por

Copyright:

Formatos disponibles

MATERIAL PEDAGÓGICO

GUÍAS, TALLERES, EVALUACIONES

1. Identificación de la Guia de Aprendizaje

Plan Integrador Taller Técnico de Sistemas Periodo 1 Grupo 9°

En momentos de crisis sólo la imaginación es más importante que el conocimiento

Presentación JavaScript es un sencillo lenguaje de programación, que presenta una característica

Sede Educativa Rafael Navia Varón – Jornada Tarde

Para introducir un script JavaScript se hace dentro de las etiquetas:

<SCRIPT LANGUAGE=“JavaScript”> código del script </SCRIPT>

El resultado es que escribe:

En este ejemplo, al pasar el ratón sobre el enlace, se llama a la acción especificada en la

Sede Educativa Rafael Navia Varón – Jornada Tarde

Fuente: Libro “El lenguaje JavaScript” Autor: Toni Navarrete.

3. Actividades y Estrategias de Aprendizaje

Desarrollo de la Actividad Recursos Evaluación

Sede Educativa Rafael Navia Varón – Jornada Tarde

Desarrollo de la Actividad Recursos Evaluación

Adaptaciones curriculares Si eres un estudiante con necesidad educativa especial, se recomienda el

 Lea completamente la guía.

Caso 1: Cómo conseguir que un enlace gane o pierda el

Sede Educativa Rafael Navia Varón – Jornada Tarde

Sede Educativa Rafael Navia Varón – Jornada Tarde

Caso 2: seleccionar el texto de un cuadro de texto y darle el

Caso 3: obtener y cambiar la URL de un formulario.

Sede Educativa Rafael Navia Varón – Jornada Tarde

Caso 4: como actualizar dos iframes al mismo tiempo.

Sede Educativa Rafael Navia Varón – Jornada Tarde

Caso 5: conocer los datos del navegador.

document.write("&lt;p&gt;Cabecera de agentnavegador: ");

Caso 6: conocer los datos relacionados con la pantalla.

Caso 7: refrescar el contenido de una página.

Caso 8: Generar un reloj a intervalos de un segundo.

Sede Educativa Rafael Navia Varón – Jornada Tarde

Sede Educativa Rafael Navia Varón – Jornada Tarde

Caso 9: Generar otro reloj, fecha y hora a intervalos de un

Sede Educativa Rafael Navia Varón – Jornada Tarde

if (year < 1000)year+=1900;

Caso 10: Manejando el canvas para gráficos web.

Sede Educativa Rafael Navia Varón – Jornada Tarde

function ObjectParticle(posX, posY, posZ){

function drawParticle(context, part) {

Sede Educativa Rafael Navia Varón – Jornada Tarde

Caso 11: Utilizando la consola de depuración

Sede Educativa Rafael Navia Varón – Jornada Tarde

console.log("el valor de la variable filaActiva es "+filaActiva);

Para recorrer un objeto y mostrarlo en la consola como un árbol de objetos anidados:

Para visualizar datos en una tabla:

1 // Mostrando datos de varios arreglos

Sede Educativa Rafael Navia Varón – Jornada Tarde

Visualizar por pantalla un mensaje de bienvenida

Ejemplo 1 . Visualizar por pantalla un mensaje de bienvenida a la página Web.

Botón para volver hacia atrás

Sede Educativa Rafael Navia Varón – Jornada Tarde

Dicha instrucción Javascript, llamada history.go(-1), se encuentra dentro de un atributo de

Recoger un dato por teclado y visualizarlo

Ejemplo 3. Visualiza por pantalla el nombre introducido por teclado

Sede Educativa Rafael Navia Varón – Jornada Tarde

Pedir confirmación para visitar una página

Ejemplo 4. Ejemplo que pide confirmación para visitar una página.

Abrir una ventana pop-up cada cierto tiempo

Sede Educativa Rafael Navia Varón – Jornada Tarde

Visualizar un reloj digital en la página web

Sede Educativa Rafael Navia Varón – Jornada Tarde

document.write("<p>Cabecera de agentnavegador: ");