Scribd
Cargar
457 vistas

Introduccion A HTML CSS Javascript

Este documento introduce los conceptos básicos de HTML5 y CSS3, incluyendo nuevos elementos semánticos en HTML5 como header, nav, article y footer, así como nuevos tipos de entrada en formularios. También cubre selectores y propiedades básicas en CSS3 para modificar el estilo de texto.

Cargado por

Francisco Herrera García
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
457 vistas

Introduccion A HTML CSS Javascript

Este documento introduce los conceptos básicos de HTML5 y CSS3, incluyendo nuevos elementos semánticos en HTML5 como header, nav, article y footer, así como nuevos tipos de entrada en formularios. También cubre selectores y propiedades básicas en CSS3 para modificar el estilo de texto.

Cargado por

Francisco Herrera García
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 23

INTRODUCCIÓN A LA PROGRAMACIÓN WEB

INTRODUCCIÓN AL HTML 5

Su definición empieza en el año 2003.


Es aceptado por la W3C en el año 2007.
Sus principios de diseño son claros:
Simplicar el uso de HTML.
Formalización de las prácticas actuales.
Garantizar compatibilidad con versiones anteriores.

En resumen:

HTML 5, conduce a una fusión entre JavaScript como lenguaje de programación ,


HTML como modelo semántico y CSS3 como lenguaje de estilo.

¿Que es el DOCTYPE?

Es lo primero que se encuentra en un documento HTML y en realidad es una instruc-


ción para decirle al navegador la versión de HTML que se está utilizando.

Ejemplo:

<! DOCTYPE html>

Estructura de un archivo HTML5

Un documento HTML 5, puede tener la siguiente estructura.

<HEADER> </HEADER>
<NAV> </NAV>
<SECTION>
<ASIDE> </ASIDE> <ARTICLE> </ARTICLE>
</SECTION>
<FOOTER> </FOOTER>

Donde:

<HEADER> : Se utiliza para contener información tal como, logos, iconos de redes
sociales etc.

<NAV> : Esta etiqueta, está diseñada para colocar la botonera o navegación princi-
pal, se puede colocar cualquier etiqueta, aunque se recomienda el uso de la etiqueta
<ul> con su respectivo <li>.
Ejemplo:

<NAV>
<UL>
<LI> <a href="#"> HOME </a></LI>
<LI> <a href="#"> QUIENES SOMOS </a></LI>
<LI> <a href="#"> PORTAFOLIO </a></LI>
</UL>
</NAV>

<ASIDE> : Esta etiqueta fue creada para contener información no relevante para un
sitio web. Puede contener en cualquier caso desde un reproductor multimedia, hasta
una galeria de imágenes.

<SECTION> : Define un área de contenido en un sitio. En ella se pueden agrupar


contenidos relacionados con un tema.

<ARTICLE> : Especifica un contenido independiente y autónomo.

<FOOTER> : Define un pie de página con la información del copyright, autor, un


menú, etc.

Ejemplo:

<! DOCTYPE html>


<html lang = "es">
<head>
<title> Página en HTML 5 </title>
</head>
<body>
<header>
<nav>
<ul>
<li> <a href="#"> Home </a></li>
<li> <a href="#"> Contacto </a></li>
</ul>
</nav>
</header>
<article>
<h2> Info 1 de article </h2>
<p> Aqui mas información </p>
</article>
<aside>
<h2> Título de aside </h2>
<p> Info de la barra lateral </p>
</aside>
<footer>
<p> Pie de página con copyright </p>
</footer>
</body>
</html>
Se debe visualizar de la siguiente forma:

Formularios en HTML 5.

<INPUT TYPE = text> : Especifica al usuario que debe llenar el campo de texto.

<INPUT TYPE = email> : Especifica al usuario que debe llenar el campo con un
email en formato válido (user@domain)

<INPUT TYPE = url>: Especifica que el usuario debe llenar el campo con un url
válido.

<INPUT TYPE = date> : Especifica que el usuario debe llenar el campo con una fe-
cha.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo nuevos controles</title>
</head>
<body>
<form action="." oninput="range_control_value.value = range_control.valueAsNumber">
<p>
Nombre: <input type="text" name="name_control" autofocus required />
<br />
Correo Electrónico: <input type="email" name="email_control" required />
<br />
URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página web
personal" />
<br />
Fecha: <input type="date" name="date_control" />
<br />
Tiempo: <input type="time" name="time_control" />
<br />
Fecha y hora de nacimiento: <input type="datetime" name="datetime_control" />
<br />
Mes: <input type="month" name="month_control" />
<br />
Semana: <input type="week" name="week_control" />
<br />
Número (min -10, max 10): <input type="number" name="number_control" min="-10"
max="10" value="0" />
<br />
Intervalo (min 0, max 10): <input type="range" name="range_control" min="0" max="10" va-
lue="0" /> <output for="range_control" name="range_control_value" >0</output>
<br />
Teléfono: <input type="tel" name="tel_control" />
<br />
Término de búsqueda: <input type="search" name="search_control" />
<br />
Color Favorito: <input type="color" name="color_control" />
<br />
<input type="submit" value="Submit!" />
</p>
</form>
</body>
</html>

El elemento <datalist>

Este elemento proporciona un "autocompletar" en función de las entradas <INPUT> .


Es decir, cuando el usuario se situe dentro del campo y comience a escribir, este cam-
po despliega una serie de opciones predefinidas.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DATA LIST</title>
</head>
<body>
<label> Selecciona un país:
<input list="europa" name="listado"/></label>
<datalist id="europa">
<option value="España">
<option value="Francia">
<option value="Alemania">
<option value="Italia">
<option value="Portugal">
<option value="Holanda">
</datalist>
</body>
</html>
El atributo autofocus.

El autofocus o enfoque automático, proporciona una forma declarativa para enfocar


el control del formulario durante la carga de una página. Anteriormente, un progra-
mador necesitaba escribir código en JavaScript para implementar esta funcionalidad.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AUTOFOCUS</title>
</head>
<body>
<FORM ACTION=".">
Nombre: <INPUT TYPE="text" name="fname" ><BR>
Apellido: <INPUT TYPE="text" name="lname" autofocus="autofocus"><BR>
Email: <INPUT TYPE="email" name="email" autofocus="autofocus"><BR>
</FORM>
</body>
</html>

Observe que al cargar esta página, el cursor se ubica sobre el elemento de formulario
marcado como apellido.

El atributo required.

Establece que el usuario está obligado a llenar el campo para continuar, es decir, el
navegador no permitirá que se envíe la forma hasta que no se llenen los <INPUT>.

Ejemplo:

<html>
<head>
<meta charset="utf-8" />
<title>REQUIRED</title>
</head>
<body>
<FORM ACTION=".">
Nombre: <INPUT TYPE="text" name="name" required="required"><BR>
<INPUT TYPE="submit">
</FORM>
</body>
</html>

Al cargar la página, si se presiona el botón dejando vacío el campo Nombre, pedirá


que este se llene.
El atributo min and max.

Nos permite especificar un valor mínimo y máximo para un elemento <INPUT>.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MIN & MAX</title>
</head>
<body>
<FORM ACTION=".">
Cantidad: <INPUT TYPE="number" name="cantidad" required="required" min="1"
max="5"><BR>
<INPUT TYPE="submit">
</FORM>
</body>
</html>

Manejo de listas desordenadas.

Las listas desordenadas comienzan con la etiquera <UL> (unordered list) y cada ele-
mento empieza con el la etiqueta <li>.

<!DOCTYPE html>
<html>
<body>
<h2>Lista desordenada en HTML</h2>
<ul>
<li>Café</li>
<li>Leche</li>
<li>Azúcar</li>
</ul>
</body>
</html>

Listas ordenadas.

Las listas ordenadas empiezan con la etiqueta <OL> y cada elemento empiezan con
la etiqueta <li>.

Ejemplo:

!DOCTYPE html>
<html>
<body>
<h2>Lista desordenada en HTML</h2>
<ol>
<li>Café</li>
<li>Leche</li>
<li>Azúcar</li>
</ol>
</body>
</html>

Como podrá observar la diferencia entre ambos tipos de listas, es la forma como se
numeran los elementos.

El elemento <div>

El elemento <div> es un contenedor genérico sin un significado semántico en particu-


lar. Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos,
en conjunto con los atributos style y class. También puede resultar útil para proveer
atributos comunes a los elementos contenidos por el, como por ejemplo lang o title.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> DIV </title>
</head>
<body>
<h1>Tim Berners-Lee</h1>
<div style="color: #00AA00; font-style: italic">
<p>Timothy "Tim" John Berners-Lee es un científico de la computación británico, conocido
por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usan-
do el protocolo HTTP en noviembre de 1989.</p>
<p>En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT,
para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y
que permiten el funcionamiento de Internet.</p>
</div>
</body>
</html>

Se puede observar en color rojo, que se establece para el bloque de texto dentro de
<div> un color verde para el texto y un estilo de texto en itálica.
INTRODUCCIÓN A LAS HOJAS DE ESTILO CSS3.

CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documen-


to HTML viene siendo coloquialmente “una página web”. Así, podemos decir que el
lenguaje CSS sirve para dotar de presentación y aspecto, de “estilo”, a una página
web. Este lenguaje es principalmente utilizado por parte de diseñadores y programa-
dores web para elegir multitud de opciones de presentación como colores, tipos y ta-
maños de letra, imágenes de fondo, bordes, etc.

Para empezar a demostrar como funciona CSS, se utilizará como documento base el
siguiente código HTML.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aplicación CSS </title>
</head>
<body>

<p>Texto inicial </p>

</body>
</html>

Se empezará por explorar las características de CSS, el siguiente código muestra có-
mo se puede modificar los estilos de texto utilizando CSS.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo HTML aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
#negrita{font-weight:bold;}
#italica{font-style:italic;}
#tachado{text-decoration: line-through;}
#verde{color:green;}
</style>
</head>
<body>
<p>Negrita: <span id="negrita">Texto en negrita</span></p>
<p>Italica: <span id="italica">Texto en itálica</span></p>
<p>Tachado: <span id="tachado">Texto tachado</span></p>
<p>Color fuente: <span id="verde">Texto color verde</span></p>
</body>
</html>

Al introducirlo al servidor web, se observará cómo desde la definición en las etique-


tas <style> </style> se controla la apariencia del texto, por medio de un id.
El modelo de cajas

HTML define una organización donde todos los elementos están dentro de un ele-
mento matriz (el elemento body) y a su vez cada elemento puede tener otros elemen-
tos dentro de él y así sucesivamente.

A partir del HTML, los navegadores tienen que realizar la interpretación del código y
mostrar en pantalla una página web. Ahora bien, a partir de un documento HTML ha-
bría distintas formas de presentar la información en pantalla. Por ejemplo, podrían
mostrarse los sucesivos elementos de izquierda a derecha, o bien de arriba abajo, o
bien de derecha a izquierda… ¿Qué hacen los navegadores? Los navegadores actúan
según unas reglas predefinidas aceptadas por todos (o casi todos) según la cual cada
elemento HTML se considera que está delimitado por un rectángulo o caja invisible.
De ahí que se hable de “modelo de cajas” para la web.

Cada caja puede ser o bien tipo <<block>> que podríamos considerar como “bloque
a lo ancho” o bien tipo <<inline>> que podríamos considerar como “elemento dentro
de una línea”. Cada caja se coloca dentro de la pantalla de la siguiente manera:

- Una caja debajo de otra, si son elementos block del documento HTML del mismo
rango o nivel en la jerarquía. Muchas de las etiquetas HTML se tratan por defecto co-
mo elementos block. Por ejemplo los elementos <div> … </div> son elementos
block. Igualmente son elementos block los formularios <form> … </form> o las lis-
tas <ul> … </ul>.

- Una caja al lado de otra, de izquierda a derecha de acuerdo con el orden con que
aparezcan en el documento HTML, si son elementos inline del documento HTML del
mismo rango o nivel en la jerarquía. Los elementos se mantienen uno al lado de otro
(excepto en el caso de que ya no haya espacio para ubicarlos, en cuyo caso pasan a la
siguiente línea). Algunas de las etiquetas HTML se tratan por defecto como elemen-
tos inline. Por ejemplo los elementos <img> son elementos inline.

- Una caja dentro de otra, siendo la caja interior la de menor rango o jerarquía. Puede
haber varias cajas dentro de cada caja, según se defina en el documento HTML.

El siguiente esquema reflejaría el modelo de cajas del documento HTML de forma si-
milar a como lo construye un navegador web como pueda ser Internet Explorer, Goo-
gle Chrome o Mozilla Firefox, Safari, etc.
Ejemplo:

Se tomará el siguiente código, y se identará ¿Que es eso?, se pondrán a la derecha,


las etiquetas contenidas dentro de otras etiquetas para tener una idea de cómo está or-
ganizado el código.

El código originales el siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 3</title>
<meta charset="utf-8">
</head>
<body>
<p><a href="." title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto
fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto MOTION</p>
</body>
</html>

Al acomodar el código este queda de la siguente manera:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 3</title>
<meta charset="utf-8">
</head>
<body>
<p><a href="." title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto
fashion" /></p>
<h3>Mejoramos el producto MOTION</h3>
<p>Hemos lanzado una nueva versión del producto MOTION</p>
</body>
</html>

Esto nos proporciona una idea de las jerarquias, pero para saber cuales elementos son
inline y cuales de tipo block, habrá que visualizarla.
Estilos en Linea
Una de las formas más simples e intuitivas de dotar de estilos al código HTML es
usando el atributo style que admiten la mayoría de las etiquetas HTML.

Obsever el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 4</title>
<meta charset="utf-8">
</head>
<body>
<ul style = "color: red;">
<li><a href="#" >Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</body>
</html>

El resultado es el siguiente:

Observe como los elementos que identifican a cada elemento del menú, son de color
rojo.

Tomando el mismo ejemplo, ahora se pretende dejar las viñetas en rojo, Los textos de
menú en color verde y sin subrayado.

El código para lograr esto es el siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 5</title>
<meta charset="utf-8">
</head>
<body>
<ul style = "color: red;">
<li><a href="#" style = "color: green; text-decoration: none;">Inicio</a></li>
<li> <a href="libros.html" style = "color: green; text-decoration: none;" >Libros </a> </li>
<li> <a href="cursos.html" style = "color: green; text-decoration: none;" >Cursos</a> </li>
<li> <a href="humor.html" style = "color: green; text-decoration: none;" >Humor </a> </li>
</ul>
</body>
</html>
Se puede observar que se aplica un estilo a cada uno de los elementos, y con ello se
sobre escribe el estilo por defecto.

Ejercicio :

Modifica el código HTML siguiente para cumplir con estos requisitos mediante la
aplicación de estilos en línea:
a) La etiqueta h1 debe mostrar su texto en color rojo.
b) La etiqueta h3 con el texto relativo a FASHION debe mostrar su texto en color ver-
de.
c) La etiqueta h3 con el texto relativo a MOTION debe mostrar su texto en color
azul.
d) Todos los párrafos deben mostrar su texto en color brown (marrón).

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 3</title>
<meta charset="utf-8">
</head>
<body>
<p><a href="." title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto
fashion" /></p>
<h3>Mejoramos el producto MOTION</h3>
<p>Hemos lanzado una nueva versión del producto MOTION</p>
</body>
</html>

CSS interno.

Es posible establecer estilos dentro del encabezado <head> usando la siguiente sin-
taxis.

<head>
…
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad1ParaEseTipoDeElementos:valor;
propiedad2ParaEseTipoDeElementos:valor;
propiedad3ParaEseTipoDeElementos:valor;
…
propiedadnParaEseTipoDeElementos:valor;
}
</style>
</head>

Con un ejemplo quedará mas claro:


<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 6</title>
<meta charset="utf-8">
<style type="text/css">
ul {color:red;}
a {color:green; text-decoration: none;}
</style>
</head>
<body>
<div>
<h1>Ejemplo 6</h1>
<h2>CSS interno</h2>
</div> <br />
<div>
<div>
<div>Menú
</div> <hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros</a> </li>
<li> <a href="cursos.html">Cursos</a> </li>
<li> <a href="humor.html">Humor</a> </li>
</ul>
</div>
</html>

Se puede observar en el código que la sección en color rojo, determina los estilos pa-
ra las etiquetas <ul> y <a>.

CSS Externo.

Aunque el CSS interno nos permite unificar en una declaración todos los estilos para
un archivo html, seguimos teniendo el problema de tener que repetir la definición de
estilos en la cabecera de cada uno de los archivos html de nuestro desarrollo web. Si
el desarrollo tiene pocos archivos quizás sea menos problemático, pero cuando el de-
sarrollo tiene cientos o miles de archivos sí se convierte en un verdadero problema,
ya que cada vez que introdujéramos cambios habría que hacerlo en los cientos o mi-
les de archivos de que constara el desarrollo.

Para solventar esta solución se ideó la declaración externa de CSS, basada en declarar
los estilos CSS en un archivo independiente que puede servir como referente para do-
tar de estilos a decenas, cientos o miles de archivos html, que únicamente deberán in-
vocar el nombre de archivo utilizando una sintaxis específica. De este modo un cam-
bio en los estilos habrá que hacerlo únicamente en el archivo de estilos correspon-
diente, lo cual supone una gran ventaja. Incluso un cambio completo de los estilos de
una página web se puede conseguir simplemente sustituyendo el archivo correspon-
diente.

Para introducir, código JavaScript desde un archivo externo, se debe seguir la si-
guiente sintaxis.

<head>
…
<link rel="stylesheet" type="text/css" href="rutaDelArchivo.css">
</head>

Para el ejemplo que se ha estado trabajando, se puede agregar el CSS de la siguiente


manera:

Veamos un ejemplo:

Para el ejemplo que se ha estado manejando, este queda de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 7</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div>
<h1>Ejemplo 7</h1>
<h2>CSS interno</h2>
</div> <br />
<div>
<div>
<div>Menú
</div> <hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros</a> </li>
<li> <a href="cursos.html">Cursos</a> </li>
<li> <a href="humor.html">Humor</a> </li>
</ul>
</div>
</html>

En el código en rojo, se incorporan los estilos, al llamar al archivo estilos.css

El archivo estilos.css a su vez, contiene lo siguiente:

ul {color:red;}
a {color:green; text-decoration: none;}

Ejercicio:

Modifica el código HTML mostrado a continuación para cumplir con estos requisitos
mediante la aplicación de estilos internos:

a) Todas las etiquetas h1 deben mostrar su texto en color rojo.


b) Todas las etiquetas h3 deben mostrar su texto en color verde.
c) Todos los párrafos deben mostrar su texto en color brown (marrón).

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio</title>
<meta charset="utf-8">
</head>
<body>
<p><a href="." title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto
fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto MOTION</p>
</body>
</html>

Ejercicio:

Modifica el código HTML del ejercicio anterior para cumplir con estos requisitos me-
diante la aplicación de CSS externo definido en un archivo independiente.

a) Todas las etiquetas h1 deben mostrar su texto en color azul.


b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).
c) Todos los párrafos deben mostrar su texto en color brown (marrón).
INTRODUCCIÓN AL JAVASCRIPT

La relevancia de JavaScript

JavaScript es un lenguaje interpretado de proposito general pero considerado solo co-


mo complemento.

JavaScript recientemente, fue expandido en función a la portabilidad e integración a


los navegadores, a la vez se incorpora a los navegadores, interfaces de programación
para mejorar las funcionalidades del lenguaje HTML.

Incorporando JavaScript

Al igual que CSS, existen varias técnicas básicas para incorporar JavaScript en hiper-
textos.

En línea:

Consiste en incorporar JavaScript como un atributo de un elemento HTML.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title> JS1 </title>
</head>
<body>
<div id="principal">
<p onclick="alert('hizo click');"> Pulse Aqui </p>
<p> No puede hacer click aqui </p>
</div>
</body>
</html>

Ejercicio: Sustituya onclick por onMouseOver y observe la diferencia

onclick y onMouseOver son considerados como manejadores de eventos.

Ejemplo: Utilizando estilos, poner en negritas el texto que dice pulse aqui:

<!DOCTYPE html>
<html lang="es">
<head>
<title> JS1 </title>
<style>
p.negritas {font: italic bold 14px Georgia, Serif;}
</style>
</head>
<body>
<div id="principal">
<p class="negritas" onclick="alert('hizo click');"> Pulse Aqui </p>
<p> No puede hacer click aqui </p>
</div>
</body>
</html>

Embebido:

Para trabajar con códigos mas extensos y funciones personalizadas, debemos agrupar
códigos entre las etiquetas <script> que funcionan de manera similar a las etiquetas
<style> para CSS.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title> JS2 </title>
<style>
p.negritas {font: italic bold 14px Georgia, Serif;
color:red;
border-bottom:2px solid #999999;}
</style>
</head>
<body>
<div id="principal">
<p class="negritas", id="primero"> Pulse Aqui </p>
<p> No puede hacer click aqui </p>
</div>
<script type="text/javascript">
function showalert()
{
alert("Hizo click");
}
function doclick()
{
document.getElementById('primero').onclick=showalert;
}
window.onload=doclick();
</script>
</body>
</html>

Los códigos en JavaScript pueden llegar a crecer tanto que al tratarlos de guardar en
el documento, pudieran incrementar significativamente su tamaño. Para reducir los
tiempos de descarga, incrementar nuestra productividad y poder reusar nuestros códi-
gos en cada documento, se recomienda grabar todos los códigos JavaScript en uno o
mas archivos externos y llamarlos utilizando el atributo src.
Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title> JS3 </title>
<script src="codigo.js"> </script>
<style>
p.negritas {font: italic bold 14px Georgia, Serif;
color:red;
border-bottom:2px solid #999999;}
</style>
</head>
<body>
<div id="principal">
<p class="negritas", id="primero"> Pulse Aqui </p>
<p> No puede hacer click aqui </p>
</div>
<script type="text/javascript">
window.onload=doclick();
</script>
</body>
</html>

Observe, como se llama al archivo codigo.js y como se simplifica la sección


<script> que se encuentra en <body>.

Por su parte: el archivo codigo.js contiene lo siguiente:

function showalert()
{
alert("Hizo click");
}
function doclick()
{
document.getElementById('primero').onclick=showalert;
}

Selectores

El elemento getElementbyId nos permite seleccionar ciertos elementos por medio de


su identificador (Id), pero existen otros como getElementByTagName y getEle-
mentByClassName, sin embargo, pudieran no ser sufucientes para seleccionar los ele-
mentos de un documento HTML5.

Selector querySelector()

Este método toma el primer elemento que concuerda con el grupo de selectores espe-
cificados. utilizando una sintaxis similar al CSS.
Ejemplo:

Para el último documento HTML editado, modificarlo para que su título sea JS4, y
que llame al archivo codigo2.js.

Ahora código2.js debe contener lo siguiente:

function doclick()
{
document.querySelector("#principal p:first-child ").onclick=showalert;
}

function showalert()
{
alert("HIZO CLICK");
}

Lo que hace este selector es, buscar dentro de principal, el primer elemento <p> y
asignarle el disparador onclick=showalert;

Ejercicio: Enviar por la plataforma el archivo html modificado, código2.html y una


imagen de cómo se ve al ejecutar el código JavaScript.

selector querySelectorAll()

En lugar de uno, querySelectorAll retoma todos los elementos que concuerdan con el
grupo de selectores declarados entre paréntesis.

Ejemplo:

Modificar el ejercicio anterior:

Establecer como título JS5.


El código JavaScript se llama codigo3.js

El cóntenido del código3.js es el siguiente:

function doclick()
{
var lista=document.querySelectorAll("#principal p");
lista[0].onclick=showalert;
}

function showalert()
{
alert("HIZO CLIC");
}

Observe que en este caso, se selecciona el elemento [0] de la lista que es el primer pá-
rrafo <p> en principal.
Si se deseara que el segundo mienbro de la lista de parrafos <p> en <div id="princi-
pal"> sea quien muestre el mensaje. Deberia en este caso seleccionar el elemento lis-
ta[1] de la lista.

Si se deseara afectar a mas de 1 elemento, se puede utilizar un cliclo for:

function doclick()
{
var lista=document.querySelectorAll("#principal p");
for(var x=0; x<lista.length; x++)
lista[x].onclick=showalert;

function showalert()
{
alert("DO CLICK");
}

En el ejemplo anterior, cualquiera de los 2 párrafor muestra el mismo mensaje carac-


terístico.

Manejadores de eventos:

En JavaScript, las acciones de los usuarios se llaman eventos. Cuando un usuario rea-
liza una acción, como el click de un ratón o presionar una tecla, un evento específico
para cada acción y cada elemento es disparado.

Estos eventos son manejados por códigos o funciones .

El código que responde al evento es llamado manejador.

Existen 3 formas diferentes de registrar un evento:

Agregar un nuevo atributo al elemento.


Registrar un manejador de evento como una propiedad del elemento.
Usar el estandar addEventListener()

Manejadores de eventos en linea

Este, ya se utilizó en el ejemplo con título JS1, el cuál utiliza los atributos provistos
HTML para registrar un evento para un elemento en particular.

Esta técnica, ya se encuentra en des-uso.

Manejadores de eventos como propiedades.

A fin de evitar complicaciones técnicas en línea, se debe registrar un evento desde Ja-
vaScript. De esta forma se referencía los elementos HTML y se les asigna un maneja-
dor de eventos (función).
En el código titulado JS2, se utilizó el manejador de eventos onload y el manejador
de eventos onclick .

Los elementos HTML a los cuales seles asigna un manejador de eventos, se leccio-
nan con la línea:

document.getElementById()

Hasta antes de HTML 5, esra la única técnica para manejar eventos.

El método addEventListener():

El método AddEventListener() es la técnica considerada estándar por la especifica-


ción de HTML5.

Esteb método recibe 3 argumentos: El nombre del evento, la función a ser ejecutada y
un valor booleano (verdadero o falso ) que inidica cómo un elemento será disparado
en elementos superpuestos.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title> JS6 </title>
<style>
p.negritas {font: italic bold 14px Georgia, Serif;
color:red;
border-bottom:2px solid #999999;}
</style>
<script>
function showalert()
{
alert("Hizo click");
}
function doclick()
{
var elemento=document.getElementById("primero");
elemento.addEventListener('click',showalert,false);
}
</script>
</head>
<body onload='doclick'>
<div id="principal">
<p class="negritas", id="primero"> Pulse Aqui </p>
<p> No puede hacer click aqui </p>
</div>
<script>
window.onload=doclick;
</script>
</body>
</html>
La línea en color rojo, muestra la forma cómo se establece que al hacer clic sobre
"primero".

También podría gustarte