Publicado el 9 de Mayo del 2018
1.695 visualizaciones desde el 9 de Mayo del 2018
6,8 MB
89 paginas
Creado hace 8a (07/10/2015)
Carlos Roberto Jaimez González
Programación de Web Dinámico
Carlos Roberto Jaimez González
Programación de Web Dinámico
Esta investigación fue dictaminada por pares académicos
Clasificación Dewey: 005.13 J35
Clasificación LC: QA76.7 J35
Jaimez González, Carlos Roberto
Programación de web dinámico / Carlos Roberto Jaimez -- México : UAM, Unidad Cuajimalpa, c2015.
88 p. : il., tablas, col. ; 24 cm. -- (Una década de la Unidad Cuajimalpa de la Universidad
Autónoma Metropolitana)
ISBN de la Colección Una Década: 978-607-28-0452-4
ISBN de este libro: 978-607-28-0470-8
1. Lenguajes de programación (Computadoras) – Libros de texto 2. Desarrollo de sitios web – Libros de texto 3. JavaScript
(Lenguaje de programación para computadora) – Libros de texto 4. Document Object Model (Tecnología para el desarrollo de
sitios web) – Libros de texto 5. HTML (Lenguaje de marcado de hipertexto) – Libros de texto 6. Universidad Autónoma
Metropolitana – Unidad Cuajimalpa – Planes de estudio 7. Planes de estudio universitario - México
UNIVERSIDAD AUTÓNOMA METROPOLITANA
Dr. Salvador Vega y León
Rector General
M. en C. Q. Norberto Manjarrez Álvarez
Secretario General
Dr. Eduardo Abel Peñalosa Castro
Rector de la Unidad Cuajimalpa
Dra. Caridad García Hernández
Secretaria de la Unidad
D.R. © 2015 UNIVERSIDAD AUTÓNOMA METROPOLITANA
Universidad Autónoma Metropolitana Unidad Cuajimalpa
.Avenida Vasco de Quiroga 4871,
Col. Santa Fe Cuajimalpa. Delegación Cuajimalpa de Morelos,
C.P. 05348, México D.F. ( Tel.: 5814 6500)
www.cua.uam.mx
ISBN de la Colección Una Década: 978-607-28-0452-4
ISBN de este libro: 978-607-28-0470-8
Diseño de portada: Ricardo López Gómez.
Formación y edición: Juan Carlos Rosas Ramírez.
CONTENIDO
Agradecimientos
Introducción
Capítulo 1. Introducción a JavaScript y DOM
El lenguaje JavaScript
Objetos, atributos y métodos
El Document Object Model (DOM)
Capítulo 2. Acceso a elementos HTML
Métodos para encontrar objetos
Encontrando objetos por su identificador
Encontrando objetos por el nombre de su etiqueta
Encontrando objetos por el nombre de su clase
Encontrando objetos por colecciones
Resumen de métodos y atributos
Capítulo 3. Manejo de eventos
Eventos en un documento HTML
Funciones JavaScript para manejar eventos
Eventos onmouseover y onmouseout
Resumen de eventos
Capítulo 4. Creación y eliminación de elementos HTML
Creación de elementos HTML
Eliminación de elementos HTML
Resumen de métodos
5
7
9
9
10
13
17
17
18
21
24
28
32
33
33
37
42
46
49
50
61
66
Capítulo 5. Manejo de estilos
Cambio de estilos a elementos HTML
Cambio del color del texto
Cambio del tamaño y tipo de letra
Resumen de atributos
Bibliografía de consulta y apoyo
Glosario
Acerca del autor
67
67
68
73
81
83
85
87
5
Agradecimientos
Agradezco a los revisores anónimos de este material por sus valiosos comen-
tarios y observaciones. También agradezco a Wulfrano Luna Ramírez por sus
sugerencias y comentarios, así como por la labor de señalar puntualmente
las modificaciones pertinentes a este texto. Asimismo, expreso mi gratitud
a Betzabet García Mendoza por su valiosa opinión y sugerencias acerca del
texto en general, pero principalmente por su revisión a los ejemplos y ejer-
cicios contenidos en este material.
La oportunidad de ser profesor universitario me ha permitido crear ejem-
plos y ejercicios para complementar mis clases, algunos de estos se encuen-
tran en el presente texto. Muchas gracias a todos los alumnos con quienes
he compartido el salón de clases en la Universidad Autónoma Metropolita-
na, ustedes son la principal motivación para la creación de estos materiales.
Gracias a la colaboración de todos ustedes he podido mejorar la calidad
y presentación de este trabajo.
7
Introducción
El presente material didáctico tiene como objetivo apoyar la enseñanza de
la UEA Programación de Web Dinámico de la Licenciatura en Tecnologías y
Sistemas de Información de la Universidad Autónoma Metropolitana Unidad
Cuajimalpa. El contenido de este trabajo es útil no solo para estudiantes de
dicha UEA, sino también para personas con conocimientos sobre creación
de páginas web estáticas que utilicen el lenguaje de marcado de hipertexto
(HTML) y las hojas de estilo en cascada (CSS), quienes estén interesadas en
un curso introductorio acerca del desarrollo de páginas web dinámicas e
interactivas utilizando el lenguaje de programación JavaScript y el modelo
de objetos de documento (DOM).
Este material de apoyo aborda diversos temas que cubren parte del con-
tenido sintético de la UEA Programación de Web Dinámico. Específicamen-
te abarca los temas relacionados a la programación web dinámica del lado
del cliente en un navegador web.
La información que se proporciona en este material ayudará al estudiante
a entender el funcionamiento y desarrollar sus propios sitios web dinámicos
e interactivos con JavaScript. Este material también le permitirá adquirir los
conocimientos y habilidades necesarias para posteriormente incursionar en
el desarrollo de aplicaciones web dinámicas del lado del servidor con tecno-
logías como JSP o PHP.
La organización de este título se distribuyó en cinco capítulos, bibliografía
de consulta y apoyo, además de un glosario de términos. En cada uno de los
capítulos se brinda una explicación de los temas que serán cubiertos; ejem-
plos con los documentos HTML que contienen código JavaScript, los cuales
se muestran completos y explicados detalladamente; figuras con las páginas
web como serán visualizadas en un navegador web, así como ejercicios para
reforzar lo aprendido en los temas del capítulo.
8
A su vez, los capítulos se subdividen de la siguiente manera. En el capítulo
uno se presenta una introducción al lenguaje de programación JavaScript,
la estructura básica de un documento HTML traducido a un árbol de ele-
mentos DOM, así como los diferentes tipos de objetos que se manejan en
un documento HTML. El capítulo dos explica las diferentes formas de en-
contrar elementos HTML en una página web. El capítulo tres describe cómo
manejar los eventos que ocurren en un documento HTML y responder a
estos mediante la ejecución de código JavaScript. La creación y eliminación
de elementos en un documento HTML a través de DOM con JavaScript se
muestra en el capítulo cuatro. Finalmente, en el capítulo cinco se expone la
manera en que se pueden cambiar los estilos de los elementos de un docu-
mento HTML para modificar la apariencia de una página web.
Programación de web dinámico 9
Capítulo 1. Introducción a JavaScript y DOM
En este capítulo se ofrece una introducción a JavaScript, lenguaje script ba-
sado en objetos y que está diseñado específicamente para hacer que las
páginas web sean dinámicas e interactivas. Además, se presenta el Modelo
de Objetos de Documento (Document Object Model, DOM, por sus siglas
en inglés), mismo que traduce la estructura de una página web a un árbol de
objetos cuando esta es cargada en un navegador web. Al utilizar JavaScript
y DOM será posible cambiar cualquier elemento de una página web a tra-
vés de los métodos y atributos de los objetos. En este capítulo también se
proporcionan ejemplos y ejercicios para ilustrar el uso de objetos, métodos
y atributos en una página web con JavaScript, así como para identificar los
objetos en el árbol generado con DOM en una página web.
Los objetivos que deben cumplirse al final de este capítulo son:
Identificar las diferencias entre objetos, métodos y atributos.
• Conocer las características más importantes del lenguaje JavaScript.
•
• Utilizar el objeto document para escribir dinámicamente en una página web.
• Conocer qué es DOM y cómo transforma una página web a un árbol de
objetos.
Identificar los diferentes tipos de objetos en un árbol generado con DOM.
•
El lEnguajE javaScript
JavaScript es un lenguaje script basado en objetos, diseñado específicamen-
te para hacer que las páginas web sean dinámicas e interactivas. JavaScript
es un lenguaje para hacer programación web dinámica del lado del cliente.
Un lenguaje script es un lenguaje de programación interpretado que re-
quiere de un intérprete, quien traduzca las sentencias escritas en el lenguaje
10
a código máquina cada vez que el programa es ejecutado. JavaScript es
interpretado por navegadores web, los cuales representan a los clientes.
El lenguaje JavaScript está basado en objetos, ya que proporciona una
implementación del DOM, modelo que traduce la estructura de un docu-
mento HTML a un árbol de objetos cuando este es cargado en un navega-
dor web. Cada objeto tiene métodos y atributos que pueden ser invocados
desde código JavaScript para su manipulación con el propósito de cambiar
cualquier elemento del documento HTML.
JavaScript puede ser incrustado directamente en el código de un docu-
mento HTML o mediante archivos separados, con el fin de que un navega-
dor web los interprete y los ejecute cuando sea requerido. Los archivos crea-
dos con JavaScript son en texto plano, sin formato, que se almacenan con
la extensión .js y están asociados a documentos HTML. El código JavaScript
puede ser interpretado por cualquier navegador web moderno, como Mozilla
Firefox, Google Chrome, Opera, Safari, Internet Explorer, entre otros.
En cada ejemplo que se presente en este material se proporcionarán los
listados correspondientes a los documentos HTML, con extensión .html,
los cuales contienen las etiquetas HTML e incluyen los segmentos de código
o funciones JavaScript que se utilizan, las cuales serán incrustadas directa-
mente en los documentos HTML.
Se puede emplear cualquier editor de texto para crear los documentos
HTML de los ejemplos, así como cualquier navegador web para visualizarlos.
En las figuras que se muestran en los ejemplos y ejercicios se utilizó Mozilla Fi-
refox como navegador web. En
Comentarios de: Programación de Web Dinámico (0)
No hay comentarios