Desarrollo de páginas web con JavaScript

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 2 Grupo 9°

Propósito
JavaScript
Formativo
Áreas que se Fecha
Taller Técnico de Sistemas Julio 3
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.
Fuente: https://www.google.com/url?sa=i&url=https%3A%2F%2Fdevcode.la%2Fblog%2Fque-es-
javascript%2F&psig=AOvVaw2JGvDVVbGnETwFnogP9oHr&ust=1592674471236000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJDF4fm0juoCFQAAAAAdAAAAABAD
2. Descripción de la Unidad
Presentación En el taller anterior se buscaba la familiarización con los códigos y el lenguaje. Es momento
de comenzar a comprender y entender como funciona.
El texto guía se llama “El gran libro de HTML5, CSS3 y JavaScript” Autor: Juan Diego Gauchat
3. Actividades y Estrategias de Aprendizaje
Sede Educativa Rafael Navia Varón – Jornada Tarde

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

Incorporando Javascript
Siguiendo los mismos lineamientos que en CSS, existen tres

técnicas para incorporar código Javascript dentro de HTML. Sin
embargo, al igual que en CSS, solo la inclusión de archivos externo
es la recomendada a usar en HTML5.
Actividad 1 – En Línea
Esta es una la técnica simple para insertar Javascript en nuestro

documento que se aprovecha de atributos disponibles en
elementos HTML. Estos atributos son manejadores de eventos que
ejecutan código de acuerdo a la acción del usuario.
Los manejadores de eventos más usados son, en general, los

relacionados con el ratón, como por ejemplo onclick,
onMouseOver, u onMouseOut. Sin embargo, encontraremos Se suben los
sitios web que implementan eventos de teclado y de una ventana, Dispositivos: PC archivos a Drive:
ejecutando acciones de luego que una techa es presionada o – Móvil.
alguna condición en la ventana del navegador cambia (por
ejemplo, onload u onfocus). Programas:
Formato Archivo:
PC: Sublime Text
.ZIP o
/ Bloc de notas.
Archivos html y js
Android: Touch
Coder
Nombre Carpeta:
IOS: HTML Code
JavaScript_Act2
Play
HTML Master
Fecha Entrega:
Time To Code
Julio 3
Imagen 1: onclick
Usando el manejador de eventos onclick en la imagen 1, un código

es ejecutado cada vez que el usuario hace clic con el ratón sobre
el texto que dice “Hacer Clic”. Lo que el manejador onclick está
diciendo es algo como: “cuando alguien haga clic sobre este
elemento ejecute este código” y el código en este caso es una
predefinida en Javascript que muestra una pequeña ventana con
el mensaje “hizo clic!”.
Intente cambiar el manejador onclick por onMouseOver, por

ejemplo, y verá como el código es ejecuta solo pasando el puntero
del ratón sobre el elemento.

2020/03/31 1 de 1
Imagen 2: onMouseOver
El uso de Javascript dentro de etiquetas HTML está permitido en

HTML5, pero por las mismas razones que en CSS, esta clase de
práctica no es recomendable.
Imagen 3: onMouseOut
Actividad 2: Embebido Se suben los

Dispositivos: PC
archivos a Drive:
– Móvil.
Para trabajar con códigos extensos y funciones personalizadas
debemos agrupar los códigos en un mismo lugar entre etiquetas
Programas:
<script>. El elemento <script> actúa exactamente igual al Formato Archivo:
PC: Sublime Text
elemento <style> usado para incorporar estilos CSS. Nos ayuda a .ZIP o
/ Bloc de notas.
organizar el código en un solo lugar, afectando a los elementos Archivos html y js
Android: Touch
HTML por medio de referencias.
Coder
Del mismo modo que con el elemento <style>, en HTML5 no Nombre Carpeta:
IOS: HTML Code
debemos usar ningún atributo para especificar lenguaje. Ya no es JavaScript_Act2
Play
necesario incluir el atributo type en la etiqueta <script>. HTML5
HTML Master
asigna Javascript por defecto. Fecha Entrega:
Time To Code
Julio 3

2020/03/31 1 de 1
Imagen 4: Javascript embebido
El elemento <script> y su contenido pueden ser posicionados en

cualquier lugar del documento, dentro de otros elementos o entre
ellos. Para mayor claridad, se recomienda siempre colocar sus
códigos Javascript en la cabecera del documento (como en el
ejemplo de la imagen 4) y luego referenciar los elementos a ser
afectados usando los métodos Javascript apropiados para ese
propósito.
Actualmente existen tres métodos disponibles para referenciar

elementos HTML desde Javascript:
• getElementsByTagName (usado en la imagen 4)

referencia un elemento por su nombre o palabra clave.
• getElementById referencia un elemento por el valor de su
atributo id.
• getElementsByClassName permite referenciar un
elemento por el nombre de su atributo class.
En la imagen 4, el código es posicionado en la cabecera del

documento y es leído por el navegador previo a la creación del
elemento <p> que estamos referenciando.
Las funciones mostraralerta() y hacerclic() son llamadas desde la
última línea del código usando otro navegador de eventos llamado
onload. Este manejador ejecutará la función hacerclic() cuando el
documento sea completamente cargado y todos los elementos
creados.
El método getElementsByTagName referencia todos los

elementos <p>. Este método retorna un arreglo (array)

2020/03/31 1 de 1

conteniendo una lista de los elementos de la clase especificada
encontrados en el documento. Sin embargo, usando el índice [0]
al final del método indicamos que solo queremos que el primer
elemento de la lista sea retornado. Una vez que este elemento es
identificado, el código registra el manejador de eventos onclick
para el mismo. La función mostraralerta() será ejecutada cuando
el evento click es disparado sobre este elementos mostrando el
mensaje “hizo clic!”.
Conceptos básicos: Una función es un código agrupado

que es ejecutado solo cuando la función es invocada
(activada o llamada) por su nombre.
Actividad 3: Archivos Externo
Los códigos Javascript crecen exponencialmente cuando

agregamos nuevas funciones y aplicamos algunas de las APIs.
Códigos embebidos incrementan el tamaño de nuestros
documentos y los hacen repetitivos (cada documento debe volver
a incluir los mismos códigos). Para reducir los tiempos de descarga,
incrementar nuestra productividad y poder distribuir y reusar
nuestros códigos en cada documento sin comprometer eficiencia,
se recomienda grabar todos los códigos Javascript en uno o mas Se suben los
archivos externos y llamarlos usando el atributo src: Dispositivos: PC
archivos a Drive:
– Móvil.
Programas:
Formato Archivo:
PC: Sublime Text
.ZIP o
/ Bloc de notas.
Archivos html y js
Android: Touch
Coder
Nombre Carpeta:
IOS: HTML Code
JavaScript_Act2
Play
HTML Master
Fecha Entrega:
Time To Code
Julio 3
Imagen 5: Llamado archivo externo.
El elemento <script> en la imagen 5 carga los códigos Javascript

desde un archivo externo llamado micodigo.js. Desde ahora,
podremos insertar nuestros códigos en este archivo y luego incluir
el mismo en cualquier documento de nuestro sitio web que lo
necesite. Desde la perspectiva del usuario, esta práctica reduce
tiempo de descarga y acceso a nuestro sitio web, mientras que

2020/03/31 1 de 1

para nosotros simplifica la organización y facilita el
mantenimiento.
Hágalo usted mismo: Copia el código de Javascript dentro

del archivo HTML previamente creado. Cree un nuevo
archivo de texto vacío llamado micodigo.js y copie en su
interior el código Javascript de la imagen 4. Tenga en
cuenta que solo el código entre las etiquetas <script> debe
ser copiado, sin incluir las etiquetas mismas.
Actividad 4:
Utilizar los ejercicios de la Guía de Aprendizaje No 3 y separar los

códigos de javascript en un archivo aparte; después realizar los
cambios en el HTML para que este llame el archivo creado con el
código javascript.
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.

2020/03/31 1 de 1
CURSOS VIRTUALES
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.

Desarrollo de páginas web con JavaScript

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Desarrollo de páginas web con JavaScript

Загружено:

Авторское право:

Доступные форматы

MATERIAL PEDAGÓGICO

GUÍAS, TALLERES, EVALUACIONES

1. Identificación de la Guia de Aprendizaje

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

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

3. Actividades y Estrategias de Aprendizaje

Sede Educativa Rafael Navia Varón – Jornada Tarde

Desarrollo de la Actividad Recursos Evaluación

Siguiendo los mismos lineamientos que en CSS, existen tres

Esta es una la técnica simple para insertar Javascript en nuestro

Los manejadores de eventos más usados son, en general, los

Usando el manejador de eventos onclick en la imagen 1, un código

Intente cambiar el manejador onclick por onMouseOver, por

Sede Educativa Rafael Navia Varón – Jornada Tarde

Desarrollo de la Actividad Recursos Evaluación

El uso de Javascript dentro de etiquetas HTML está permitido en

Actividad 2: Embebido Se suben los

Sede Educativa Rafael Navia Varón – Jornada Tarde

Desarrollo de la Actividad Recursos Evaluación

Imagen 4: Javascript embebido

El elemento <script> y su contenido pueden ser posicionados en

Actualmente existen tres métodos disponibles para referenciar

• getElementsByTagName (usado en la imagen 4)

En la imagen 4, el código es posicionado en la cabecera del

El método getElementsByTagName referencia todos los

Sede Educativa Rafael Navia Varón – Jornada Tarde

Desarrollo de la Actividad Recursos Evaluación

Conceptos básicos: Una función es un código agrupado

Actividad 3: Archivos Externo

Los códigos Javascript crecen exponencialmente cuando

Imagen 5: Llamado archivo externo.

El elemento <script> en la imagen 5 carga los códigos Javascript

Sede Educativa Rafael Navia Varón – Jornada Tarde

Desarrollo de la Actividad Recursos Evaluación

Hágalo usted mismo: Copia el código de Javascript dentro

Utilizar los ejercicios de la Guía de Aprendizaje No 3 y separar los

 Lea completamente la guía.

Sede Educativa Rafael Navia Varón – Jornada Tarde

Sede Educativa Rafael Navia Varón – Jornada Tarde

Вам также может понравиться