Curso HTML - CSS - JS

CURSO HTML, CSS, JAVASCRIPT y JQUERY
1

CURSO

HTML, CSS, JAVASCRIPT , JQUERY


2

INDICE
Contenido
HTLM - XHTML ............................................................................................................................... 4
Que es ....................................................................................................................................... 4
Principales etiquetas ................................................................................................................. 4
Atributos .................................................................................................................................... 7
Formularios ............................................................................................................................... 7
Elementos del formulario .......................................................................................................... 8
INPUT ..................................................................................................................................... 8
BUTTON ............................................................................................................................... 12
SELECT ................................................................................................................................. 14
TEXTAREA ............................................................................................................................ 17
CSS ............................................................................................................................................... 19
Que es ..................................................................................................................................... 19
Principales caractersticas ....................................................................................................... 19
Definicin de hojas de estilo ................................................................................................... 20
Local .................................................................................................................................... 20
Externo ................................................................................................................................ 20
Principales propiedades .......................................................................................................... 21
Javascript ..................................................................................................................................... 26
Que es ..................................................................................................................................... 26
Caractersticas ......................................................................................................................... 26
Sintaxis y variables .................................................................................................................. 27
Palabras reservadas............................................................................................................. 27
Operadores .......................................................................................................................... 29
Objetos principales .................................................................................................................. 30
Math ........................................................................................................................................ 30
Atributos .............................................................................................................................. 30
Mtodos .............................................................................................................................. 30
Date ......................................................................................................................................... 31
Mtodos .............................................................................................................................. 31
Matrices................................................................................................................................... 32
Mtodos .............................................................................................................................. 32

3

Number ................................................................................................................................... 33
Otros objetos y funciones ....................................................................................................... 33
Objeto screen ...................................................................................................................... 33
Objeto window .................................................................................................................... 33
Objeto navigator ................................................................................................................. 35
Objeto location .................................................................................................................... 37
Intervalos en javascript ....................................................................................................... 37
Prototipos (prototype) ........................................................................................................ 37
Funcin escape() ................................................................................................................. 37
Eventos .................................................................................................................................... 38
Cookies .................................................................................................................................... 39
Nodos (DOM) .......................................................................................................................... 40
Operaciones con cadenas ....................................................................................................... 41
JQUERY ........................................................................................................................................ 42
Que es jquery y por qu utilizarlo ........................................................................................... 42
Selectores ................................................................................................................................ 43
Funciones principales .............................................................................................................. 44
Plugins ..................................................................................................................................... 44
EJERCICIOS ................................................................................................................................... 45
Ejercicio HTML ......................................................................................................................... 45
Ejercicio HTML - CSS ................................................................................................................ 45


4

HTLM - XHTML
Que es
HTML, siglas de HyperText Markup Language (lenguaje de marcas de hipertexto), hace
referencia al lenguaje de marcado para la elaboracin de pginas web. Es un estndar que
sirve de referencia para la elaboracin de pginas web en sus diferentes versiones, define una
estructura bsica y un cdigo (denominado cdigo HTML) para la definicin de contenido de
una pgina web, como texto, imgenes, etc. Es un estndar a cargo de la W3C, organizacin
dedicada a la estandarizacin de casi todas las tecnologas ligadas a la web, sobre todo en lo
referente a su escritura e interpretacin. Es el lenguaje con el que se definen las pginas web.
(Wikipedia)
Observaciones
Los navegadores utilizados traducen el cdigo HTML con las misma apariencia y utilidad, pero
al existir distintos motores, puede haber ligeros cambios entre distintos navegadores
Tener en cuenta que, excepto en etiquetas textarea, los espacios no sirven para maquetar, dos
espacios en cdigo se interpretarn como uno, incluyendo el texto. El carcter espacio, o
carcter blanco sera codificado como
Principales etiquetas
Etiqueta Significado
<html> Define el inicio del documento HTML, le
indica al navegador que lo que viene a
continuacin debe ser interpretado como
cdigo HTML. Esto es as de facto, ya que en
teora lo que define el tipo de documento es
el DOCTYPE, que significa la palabra justo
tras DOCTYPE el tag de raz.
<script> Incrusta un script en una web, o llama a uno
mediante src="url del script". Se
recomienda incluir el tipo MIME en el
atributo type, en el caso de JavaScript
text/javascript.
<head> Define la cabecera del documento HTML;
esta cabecera suele contener informacin
sobre el documento que no se muestra
directamente al usuario como, por ejemplo,
el ttulo de la ventana del navegador
<title> Define el ttulo de la pgina. Por lo general,
el ttulo aparece en la barra de ttulo encima
de la ventana.
<link> Para vincular el sitio a hojas de estilo o
iconos. Por ejemplo:<link rel="stylesheet"
href="/style.css" type="text/css">.
<style> para colocar el estilo interno de la pgina; ya
sea usando CSS u otros lenguajes similares.
No es necesario colocarlo si se va a vincular a

5

un archivo externo usando la etiqueta <link>
<meta> para metadatos como la autora o la licencia,
incluso para indicar parmetros http
(mediante http-equiv="") cuando no se
pueden modificar por no estar disponible la
configuracin o por dificultades con server-
side scripting
<body> Define el contenido principal o cuerpo del
documento. Esta es la parte del documento
html que se muestra en el navegador; dentro
de esta etiqueta pueden definirse
propiedades comunes a toda la pgina, como
color de fondo y mrgenes
<h1> a <h6> encabezados o ttulos del documento con
diferente relevancia
<table> define una tabla.
<tr> fila de una tabla.
<td> celda de una tabla
<a> hipervnculo o enlace, dentro o fuera del
sitio web. Debe definirse el parmetro de
pasada por medio del atributo href
<div> divisin de la pgina. Se recomienda, junto
con css, en vez de <table> cuando se desea
alinear contenido (usabilidad)
<img> imagen. Requiere del atributo src, que indica
la ruta en la que se encuentra la imagen. Por
ejemplo: <img src="./imgenes/mifoto.jpg"
/>. Es conveniente, por accesibilidad, poner
un atributo alt="texto alternativo".
<ul> o <ol> Establece un listado (<ol> listado numerodo
u ordenado)

<li> Establece un elemento del listado
<dl> Establece un listado de definiciones
(diccionario)
<dt> Establecer el termino de la definicin

<dd> Establece la descripcin de la definicin o
definicin como tal
<b> o <strong> Texto en negrita
<i> o <em> Texto en cursiva
<s> o <del> Texto tachado
<u> Subrayado hasta html 5
<form> Define formularios para la introduccin,
seleccin y envo de datos
<span> Permite agrupar varios elementos en lnea
seguidos dentro de un mismo bloque para
dar un estilo correcto, o bien para ser
utilizados posteriormente en javascript.
<fieldset> Muestra un marco para la agrupacin de
campos, enlaces, o cualquier otro elemento
<legend> Establece el ttulo de un fieldset, ponindolo
alineado con el marco mostrado.

6

Existen ms etiquetas que las aqu descritas, aunque estas sean las principales, no obstante,
las etiquetas estndar y su definicin se pueden encontrar en:
http://www.w3schools.com/tags/default.asp

7

Atributos
Los atributos son las propiedades de las etiquetas o configuracin de las mismas que
modifican su comportamiento de una forma u otra (datos, estilos, tamaos, envos, ).
Los atributos, al igual que las etiquetas no distinguen entre maysculas y minsculas,
por lo que es lo mismo ID o id o iD, no obstante se debe poner atencin en no repetirlos y
menos con valores distintos, ya que coger el ltimo, pero podra suponer un problema
dependiendo del navegador (ms problemtico para javascript que para html, pero se debe
evitar)
Todas las etiquetas establecidas en el <body> (a excepcin de <script> ya que no tiene
sentido ni enviar ni modificar esta etiqueta puesto que inserta nicamente cdigo script)
tienen los atributos id, class y style
- id: en este atributo podemos establecer un identificador para la etiqueta que
requiramos (muy til al utilizar javascript)
- class: con esta etiqueta establecemos uno o ms etiquetas de estilo css
predefinidos en una hoja de estilos o bien en la propia pgina
- style: establecemos distintos estilos, se diferencia de class, en que en este atributo
se introduce directamente el modificador, no el estilo definido que contiene dichos
modificadores
Adems se pueden definir atributos propietarios, es decir, atributos que no definan o
no representen ninguna propiedad de la etiqueta para uso propio.
NOTA

Formularios
Los formularios se definen con la etiqueta <form> y contienen los datos que pueden
ser rellenados y enviados a un servidor, mail, etc..
Las etiquetas que definen los elementos que sern enviados dentro de un formulario
son: <input>, <label>, <textarea> y <select> (estas son las que contendrn los datos a ser
enviados, pero no est limitado el uso solo a estas etiquetas, puede utilizarse cualquier otra
etiqueta que contenga el body o la etiqueta script>
Principales atributos (especiales) de la etiqueta <form>:
Atributo Significado
action En este atributo se proporciona la URL de la
aplicacin que va a recibir y procesar los
datos del formulario (en nuestro caso
generalmente es la url del Controlador o
Ojo, la creacin de atributos propios es solo vlido para HTML o XHTML no es vlido para
JSTL (jspx), ya que en JSTL se valida que todo exista para una etiqueta definida.

8

servlet ya que no tenemos cgi ni otros)
enctype Codificacin de que va a realizar el navegador
de los datos del formulario sus valores
pueden ser multipart/form-data o
text/plain. Este atributo no se suele utilizar
salvo cuando se envan ficheros que entonces
es necesario establecer dicha codificacin
como multipar/form-data o para enviar el
formulario por mail que entonces se utiliza
text/plain
method Establece el mtodo por el cual el navegador
remite los datos de formulario al servidor
para su procesamiento. Existen dos mtodos:
GET - los datos se envan a travs de
la url, se utiliza para formularios con
pocos datos y cortos dependiendo
del navegador y el servidor (desde
2,083 caracteres de IE hasta 190.000
de Opera)
POST - los datos se envan cifrados y
se puede enviar cualquier tamao de
datos
target Sirve para redirigir los resultados de un
formulario a otra ventana o marco,
proporcionando el nombre de dicha vetnana
o marco en dicho atributo
name Atributo que establece un name al formulario
En este caso es meramente informativo o
para su uso en javascript

De estos atributos estamos excluyendo los eventos de javascript, ya que entran en el campo
de javascript que explicaremos ms adelante.
Elementos del formulario
INPUT
A continuacin mostramos una tabla con los distintos atributos
Atributo Descripcin Valor/es descripcin
type Este atributo nos indicar
el tipo de elemento que se
va a mostrar
text ( o por defecto) Campo de texto, este
es el valor por
defecto, en caso de
que no exista atributo
button Este campo crea un
botn de formulario
en la ventana al que
tendremos que darle
funcionalidad, ya que
por s solo no tienen
ninguna

9

checkbox Muestra un elemento
check en la ventana
que puede ser
seleccionado o
deseleccionado
file Elemento para la
creacin de un campo
para subir/seleccionar
ficheros
hidden Campo oculto para el
establecimiento de
datos ocultos o
temporales que no
van a ser mostrados
en la ventana (estos
campos son visibles
en cdigo, pero no
tienen representacin
grfica/visual en el
navegador)
image Muestra una imagen
referenciada por su
atributo src
password Campo de tipo texto
con la funcionalidad
de password, es decir,
al escribir sobre el no
veremos los
caracteres, sino un
smbolo (punto o
asterisco) en su lugar
radio Muestra un radio
button en la ventana,
agrupando varios
radios por name,
obtenemos un
conjunto de radios de
seleccin nica
reset Muestra un botn
que al pulsarlo limpia
todos los campos del
formulario
submit Muestra un botn
que al pulsarlo enva
todos los campos del
formulario
checked Atributo que nos indica si
un input de tipo (type)
radio o checkbox est
seleccionado o no
No tiene valores, es
decir, en html sera
simplemente el
atributo checked, no
obstante en XHTML

10

debera tener un valor
que suele ser true o
checked, no
obstante el mero
hecho de que se
escriba el atributo, lo
muestra como
seleccionado
disabled Deshabilita todos los
eventos de este campo y
en jstl, tambin anula el
envo de datos de dicho
elemento
decir, en html basta
con tener el atributo
disabled, no obstante
en XHTML debera
tener un valor que
suele ser true o
disabled, no
obstante el mero
hecho de que se
escriba el atributo,
deshabilita el campo
readonly Valido solo para los campos
de tipo (type) text,
checkbox, file y password.
Este atributo, establece
que dichos campos sern
de solo lectura, es decir, no
se podrn modificar. Se
diferencia de disabled en
que este no anula ningn
evento sobre el campo
decir, en html, basta
readonly, no obstante
en XHTML debera
tener un valor que
suele ser true o
readonly, no
obstante el mero
hecho de que se
name Valido para todos los
campos input, este atributo
define el nombre con el
que se enviar el campo al
formulario, su valor ser el
nombre con el que se
identificar el campo
campo1, campos25,
nombre,
Es vlido cualquier
valor,
preferentemente sin
espacios
tabindex Establece el orden en el
que se van a recorrer los
campos en una ventana a
travs del tabulado, cuanto
menor sea el numero
indicado en este atributo
antes se recorre (a
excepcin de si el nmero
es negativo, en este caso
no se recorre (tambin
atributo notab)
1, 2, 3, 4, Es vlido cualquier
entero
size Valido solo para los campos 8, 160, Cualquier valor

11

de tipo (type) file,
password y text. Establece
el tamao de dichos
campos. Dicho tamao se
suele establecer por css,
para un mayor control
entero es vlido,
indica el nmero de
caracteres que se
muestran/ven en el
campo
src Vlido nicamente para el
tipo (type) image. En l se
establece la url de la
imagen que se va a mostrar
img_mostrar.jpg La url de la imagen
que vamos a mostrar,
permitiendo urls
relativas
value Vlido para los campos de
tipo (type): button,
checkbox, file, hidden,
password, radio, reset,
submit y text
prueba datos, pass,
Button prueba,
Es vlido cualquier
valor, adems segn
el tipo (type) puede
bien ser el dato
introducido (text,
password) o bien el
dato que se
muestra(button)
maxlength Vlido solo para los campos
de tipo (type): file,
password y text. Establece
el nmero mximo de
caracteres de un campo
dado, no permitir escribir
ms caracteres que los
establecidos en este
campo.
8, 25, Es vlido cualquier
valor numrico

Ejemplo


12

BUTTON
Esta etiqueta muestra un botn en la ventana (similar a input type=button) con el
texto que pongamos entre las etiquetas de apertura y cierre (en el caso de un input, el texto
mostrado es el que se encuentra en el atributo value), los atributos que utiliza son:
Atributo Descripcin Valor/es Descripcin
eventos de este
campo y en jstl,
tambin anula el
envo de datos de
dicho elemento
decir, en html basta
disabled, no obstante
en XHTML debera
tener un valor que
suele ser true o
disabled, no
obstante el mero
hecho de que se
name E atributo define el
enviar el campo al
formulario, su valor
ser el nombre con el
que se identificar el
campo
campo1,
campos25,
nombre,
Es vlido cualquier
valor,
preferentemente sin
espacios
tabindex Establece el orden en
el que se van a
recorrer los campos
en una ventana a
travs del tabulado,
cuanto menor sea el
numero indicado en
este atributo antes se
recorre (a excepcin
de si el nmero es
negativo, en este
caso no se recorre
(tambin atributo
notab)
entero
value En este caso contiene
el valor que puede
ser enviado al enviar
el formulario
prueba datos,
pass, Button
prueba,
Es vlido cualquier
valor que queramos
que tenga el botn


13

Ejemplo


14

SELECT
Esta etiqueta muestra una lista desplegable (combo) sobre la que podemos realizar la
seleccin de uno o varios valores en funcin de lo queramos realizar. Los atributos que utiliza
son:
eventos de este
campo y en jstl,
tambin anula el
envo de datos de
dicho elemento
decir, en HTML es
suficiente con tener
el atributo disabled,
no obstante en
XHTML debera tener
un valor que suele
ser true o
disabled, no
obstante el mero
hecho de que se
enviar el campo al
campo
campo1,
campos25,
nombre,
Es vlido cualquier
valor,
preferentemente sin
espacios
el que se van a
recorrer los campos
en una ventana a
travs del tabulado,
cuanto menor sea el
numero indicado en
recorre (a excepcin
de si el nmero es
negativo, en este
caso no se recorre
(tambin atributo
notab)
entero
size Establece el tamao
del combo
200px, 50%,
1em,
Establece el ancho
del combo. Si no se
indica nada en el
entero, se supone
pixeles
multiple Si no existe este
atributo, solo se
puede seleccionar un
elemento de la lista,
cuando este existe se
pueden seleccionar
decir, en HTML es
el atributo multiple,
no obstante en
XHTML debera tener

15

varios elementos un valor que suele
ser true o
multiple, no
obstante el mero
hecho de que se
indica que el select
es multiple

Cada uno de los elementos de un select, se encuentra entre ambas etiquetas (apertura y
cierre) dentro de etiquetas option.
OPTION
Estas etiquetas representan cada uno de los valores de una lista select. Estas etiquetas
tienen los siguientes atributos:
value Es el value del
elemento, que ser el
valor que enve el
formulario al servidor
cualquier valor Cualquier valor que
se requiera
selected Este atributo indica
(si est presente) que
dicho elemento ha
sido seleccionado
decir, en HTML es
el atributo selected,
no obstante en
XHTML debera tener
un valor que suele
ser true o
selected, no
obstante el mero
hecho de que se
indica que el
elemento ha sido
seleccionado

El texto que se mostrar en la lista, se encuentra entre las etiquetas de
apertura y cierre de este elemento.


16

Ejemplo


17

TEXTAREA
Esta etiqueta muestra un rea de texto. Tiene los siguientes atributos
eventos de este
campo y en jstl,
tambin anula el
envo de datos de
dicho elemento
decir, en HTML es
el atributo disabled,
no obstante en
XHTML debera tener
un valor que suele
ser true o
disabled, no
obstante el mero
hecho de que se
enviar el campo al
campo
campo1,
campos25,
nombre,
Es vlido cualquier
valor,
preferentemente sin
espacios
el que se van a
recorrer los campos
en una ventana a
travs del tabulado,
cuanto menor sea el
numero indicado en
recorre (a excepcin
de si el nmero es
negativo, en este
caso no se recorre
(tambin atributo
notab)
entero
cols Establece el nmero
de columnas (ancho)
del area de texto
20, 30, Se trata del ancho del
textarea en
caracteres.
rows Establece el nmero
de filas (alto) del area
de texto
5, 10, Se trata del alto del
textarea en filas
wrap Establece si se envan
o no saltos de lnea
cuando se enva al
servidor
soft No se envan los
saltos de lnea
hard Si s envan nuevas
lneas
readonly Este atributo,
establece que el
campo ser de solo
decir, en html, basta

18

lectura, es decir, no
se podrn modificar.
Se diferencia de
disabled en que
este no anula ningn
evento sobre el
campo
readonly, no
obstante en XHTML
debera tener un
valor que suele ser
true o readonly,
no obstante el mero
hecho de que se
deshabilita la
escritura en el campo

Ejemplo

Observar que las etiquetas estn pegadas al texto mostrado, esto se debe a que en los
elementos textarea, los espacios se escriben tal cual, es decir, no se interpretan varios como
uno solo tal y como se realiza al separar tags entre s.

19

CSS

Que es
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje de hojas de estilo utilizado
para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto
incluye varios lenguajes basados en XML como son XHTML.
Son utilizados para la definicin de apariencia en HTML y XHTML, pudiendo separarse en uno o
ms ficheros de forma que podemos separar el estilo utilizado de la codificacin propia de la
ventana sin cargar de cdigo la misma.
Principales caractersticas
Los estilos pueden ser definidos tanto en la ventana entre las etiquetas style de
apertura y cierre de la cabecera, en cada elemento, a travs de su atributo style o bien
en una hoja de estilos a parte que se importa en ventana con la etiqueta link
Los estilos nicamente dan formato, no tienen funcionalidad por s mismos
Un estilo utilizado que no existe, no produce ningn error, simplemente no hace nada
En la utilizacin de estilos, estos se aplican en cascada, es decir, prevalece siempre el
estilo ms cercano al elemento del que cambiamos la apariencia, predominando
aquellos que definimos en el atributo style del elemento en s.
Es recomendable el uso de una hoja de estilos en un fichero separado, para una mayor
claridad de cdigo.
Se debe tener mucho cuidado a la hora de utilizar estilos, ya que no siempre son
interpretados del mismo modo por todos los navegadores.
El orden en el que se aplican las hojas de estilo es el siguiente:

o La hoja de estilos del navegador se utiliza para establecer el estilo inicial por
defecto a todos los elementos HTML: tamaos de letra, decoracin del texto,
mrgenes, etc. Esta hoja de estilos siempre se aplica a todas las pginas web,
por lo que cuando una pgina no incluye ninguna hoja de estilos propia, el
aspecto con el que se muestra en el navegador se debe a esta hoja de estilos
del navegador
o La hoja de estilos del usuario es la que puede aplicar el usuario mediante su
navegador. Aunque la inmensa mayora de usuarios no utiliza esta
caracterstica, en teora es posible que los usuarios establezcan el tipo de letra,
color y tamao de los textos y cualquier otra propiedad CSS de los elementos
de la pgina que muestra el navegador.
o Las reglas del diseador son las que indica la pagina y dentro de estas se
aplican en cascada (de ms internas a ms externes) siendo las ms prioritarias
las definidas en el atributo style

20

Definicin de hojas de estilo
Tal y como se ha indicado en puntos anteriores, las hojas de estilo se pueden definir,
bien el mismo fichero html (Local) o bien en un fichero a parte de extensin .css (externo).
Existen muchos selectores para la aplicacin de estilos, todos ellos se pueden encontrar en:
http://www.w3schools.com/cssref/css_selectors.asp
No obstante los ms utilizados son 3:
Selector Ejemplo Descripcin
.class .cambiaColor Aplica el estilo definido a todos aquellos que tengan su
atributo class = cambiaColor
#id #idCampo Aplica el estilo definido a aquel campo cuyo atributo id
=idCampo
* * Aplica el estilo a todos los elementos de latabla.
element p Aplica el estilo a todos los elementos con etiqueta <p>

Local
La definicin de estilos se realiza entre etiquetas style de apertura y cierre dentro del head. No
se recomienda, salvo para casos en los que no se pueda utilizar la hoja de estilos (no lo permite
el cliente).

Externo
La definicin de estilos se realiza en un fichero externo de extensin css y se referencia o carga
a travs de la etiqueta link perteneciente al head de una pagina html.

<link rel="stylesheet" href="estilo_externo.css" type="text/css" >

21

Principales propiedades
El estndar de todos los estilos disponibles, se encuentra en:
http://www.w3schools.com/cssref/default.asp, no obstante, mencionaremos los estilos ms
utilizados:

Propiedad Descripcin valores
color Establece el color del texto color, initial, inherit
opacity
Establece el nivel de opacidad de
un elemento (ojo firefox/IE)
number(0 - 1.0), initial,
inherit
background
Establece las propiedades para el
fondo de un elemento
color position size repeat
origin
clip attachment image,
initial, inherit
background-
attachment
Establece si una imagen de
fondo se mantiene fija o
se desplaza con el resto de la
pgina (al realizar scroll)
scroll, fixed, local, initial,
inherit
background-color
Establece el color que tendr el
fondo de un elemento
color, transparent, initial,
inherit
background-image
Establece la imagen que tendr
el fondo de un elemento url, none, initial, inherit
background-repeat
Establece como una imagen de
fondo se va a repetir o si se va a
repetir
repeat, repeat-x, repeat-y,
no-repeat
, initial, inherit
background-size
Especifica el tamao que tendr
la imagen del fondo
auto, length, cover, contain,
intial, inherit
border
Establece todas las propiedades
del borde en una declaracion
(tablas, imgenes, div, marcos,)
border-width border-style
border-color
, initial, inherit
border-[bottom, left,
right, top]
Establece todas las propiedades
del borde [inferior, izquierdo,
derecho o superior]
border-width border-style
border-color
, initial, inherit
right, top]-color
Establece el color del borde
[inferior, izquierdo, derecho o
superior]
color, transparent, initial,
inherit

22

right, top]-width
Establece el ancho del borde
superior]
medium, thin, thick, length,
initial, inherit
right, top]-style
Establece el estilo del borde
superior]
none, hidden, dotted,
dashed, solid, double,
groove, ridge, inset, outset,
initial, inherit
border-image-width
Establece el ancho de la imagen
del borde
number, %, auto, initial,
inherit
border-image-source
Establece la ruta de una imagen
que va a ser utilizada como
borde
none, image(url), initial,
inherit
border-image-repeat
Indica si la imagen se va a
repetir, redondear o estirar
stretch, repeat, round,
initial, inherit
border-style
Establece el estilo de los bordes
(top, right, bottom, left)
none, hidden, dotted,
dashed, solid, double,
groove, ridge, inset, outset,
initial, inherit
border-width
Establece los anchos de los
cuatro bordes (top, right,
bottom, left)
medium, thin, thick, length,
initial, inherit
bottom
Especifica la distancia con
respecto al inferior del mismo
elemento una vez posicionado auto, length, initial, inherit;
clear
Especifica que lados de un
elemento no permiten
elementos flotantes
none, left, right, both,
initial, inherit
display
Especifica cmo debe ser
mostrado un elemento HTML
inline, block, flex, inline-
block, inline-flex, inline-
table, list-item, run-in,
table, table-caption, table-
column-group, table-
header-group, table-footer-
group, table-row-group,
table-cell, table-column,
table-row, none, initial,
inherit
float
Especifica si una caja debe o no
flotar y hacia donde debe
realizarlo
none, left, right, initial,
inherit
height Establece el alto de un elemento auto, length, initial, inherit
left
respecto a la izquierda del
mismo elemento una vez
posicionado auto, length, initial, inherit
overflow
Establece lo que sucede si un
contenido supera los lmites de
un elemento de tipo caja
(generalmente div)
visible, hidden, scroll, auto,
initial, inherit
overflow-x
initial, inherit

23

(generalmente div) de derecha a
izquierda
overflow-y
(generalmente div) de arriba
abajo
initial, inherit
padding
Establece la propiedad de
relleno de un elemento (top,
right, bottom, left) length, initial, inherit
padding-[bottom, left,
right, top]
Establece la propiedad de
relleno [inferior, izquierdo,
derecho, superior] length, initial, inherit
position
Especifica el tipo de
posicionamiento que tendr un
elemento(static, relative,
absolute o fixed)
static, absolute, fixed,
relative, initial, inherit
right
respecto a la derecha del mismo
elemento una vez posicionado auto, length, initial, inherit
top
respecto a arriba del mismo
elemento una vez posicionado auto, length, initial, inherit
visibility
Especifica si un elemento es o no
visible
visible, hidden, collapse,
initial, inherit
width
Especifica el ancho de un
elemento auto, value, initial, inherit
vertical-align
Especifica a alineacin vertical de
un elemento
baseline, length, sub, super,
top, text-top,
middle, bottom, text-
bottom, initial, inherit
z-index
Especifica el orden de
profundidad de un elemento (a
mayor orden, ms cercano o por
encima de los de menor orden) auto, number, initial, inherit
margin
Establece las propiedades de
margen de un elemento (top,
right, bottom, left) length, auto, initial, inherit
margin-[bottom, left,
right, top]
Establece la propiedad del
margen [inferior, izquierdo,
derecho, superior] length, auto, initial, inherit
max-[height, width]
Establece la mxima [altura,
anchura] de un elemento none, length, initial, inherit
min-[height, width]
Establece la mnima [altura,
anchura] de un elemento none, length, initial, inherit
text-decoration
Especifica la decoracin aadida
al texto
none, underline, overline,
line-through,
initial, inherit
font
Establece las propiedades de
fuente del texto

24

font-family
Especifica la familia de la fuente
del texto (Arial, Verdana, ...) font, initial, inherit
font-size Especifica el tamao de la fuente
medium, xx-small, x-small,
small, large, x-large,
xx-large, smaller, larger,
length, initial, inherit
font-style Especifica el estylo de la fuente
normal, italic, oblique,
initial, inherit
font-weight
Especifica el grosor de la fuente
(negrita)
normal, bold, bolder,
lighter, number,
initial, inherit
direction
Especifica la direccin de
escritura del texto (defecto ltr) ltr, rtl, initial, inherit
border-spacing
Propiedad para indicar la
distancia entre el borde de
celdas adyacentes length, initial, inherit
list-style
Establece las propiedades para
un elemento de tipo lista
list-style-type list-style-
position list-style-image,
initial, inherit
list-style-image
Especifica una imagen para el
marcador de una lista none, url, initial, inherit
list-style-position
Especifica si el marcador aparece
dentro o fuera del contenido de
la lista (separado o pegado al
texto)
inside, outside, initial,
inherit
list-style-type
Especifica el tipo de marcador de
la lista
disc, armenian, circle, cjk-
ideographic, decimal,
decimal-leading-zero,
georgian, hebrew, hiragana,
hiragana-iroha, katakana,
katakana-iroha, lower-
alpha, lower-greek, lower-
latin, lower-roman, none,
square, upper-alpha, upper-
latin, upper-roman
cursor
Especifica el tipo de cursor
(ratn) que se mostrar para un
elemento
alias,all-
scroll,auto,cell,context-
menu,col-
resize,copy,crosshair,default
,e-resize,ew-
resize,help,move,n-
resize,ne-resize,nesw-
resize,ns-resize,nw-
resize,nwse-resize,no-
drop,none,not-
allowed,pointer,progress,ro
w-resize,s-resize,se-
resize,sw-
resize,text,URL,vertical-
text,w-resize,wait,zoom-
in,zoom-out

25

Todos aquellos marcados en cursiva en la columna valor se refieren a dato como tal
(number(1, 20, ), length(200px, 50%,1em, ), )
NOTA

CSS define la palabra reservada !important para controlar la prioridad de las declaraciones de
las diferentes hojas de estilos. Las reglas CSS que incluyen la palabra !important tienen prioridad
sobre el resto de las reglas CSS, independientemente del orden en el que se incluyan o definan las
reglas. Ejemplo:
.colortexto {
color:red !important;
font-size:10pt !important;
}
Si definieramos en este un atributo style sin el modificador !important, que modificase el color,
este no sera modificado

26

Javascript

Que es
JavaScript (abreviado comnmente "JS") es un lenguaje de programacin interpretado,
dialecto del estndar ECMAScript. Se define como orientado a objetos, basado en prototipos,
imperativo, dbilmente tipado y dinmico. (Wikipedia)
Se utiliza principalmente en el lado del cliente corriendo sobre el navegador, siendo esta una
de sus principales caractersticas, ya que sobre todo se utiliza para realizar un menor nmero
de llamadas al servidor.
Caractersticas
Tipado dinmico
Orientado a objetos
Evaluacin en tiempo de ejecucin (incluye la funcin eval(), que evala cadenas de
texto como cdigo)
Prototipos (se pueden aadir funcionalidades nuevas a clases existentes)
Funciones como constructores de objetos (los objetos se crean a travs de funciones)
Dependiente del motor de ejecucin en que se utilice (varias diferencias entre firefox y
explorer por ejemplo, sobre todo en la existencia o no de algunas funciones)
Funciones de parmetros variables (una funcin javascript con 3 parmetros se puede
llamar con 2, el ltimo simplemente ser falso)
Arrays y la definicin literal de objetos
Expresiones regulares
Javascript ejecuta por lnea, salvo que se ponga un ; aunque es mejor por este
carcter ; por claridad de cdigo.
Distingue entre maysculas y minsculas


27

Sintaxis y variables
Palabras reservadas
Palabra reservada Descripcin Ejemplo
break Sirve para romper una ejecucin, se utiliza
en bucles o instrucciones switch
switch(a){
case bb:
..
break;
.
.
}
for(.),break;-
default
function Palabra reservada para la definicin de
funciones javascript
function miFuncion(){

}
return Palabra reservada para devolver un valor
de una funcin creada
function miFuncion(){

return 1;
}
var Palabra reservada para la declaracin de
variables
var numero = 1;
var palabra = palabra;
case Caso de validacin en una estructura
switch-case
switch(a){
case bb:
..
break;
.
.
}
delete Elimina la propiedad de un objeto delete myobj.h
if Sentencia condicional if(a == b){}
switch Instruccin para el uso de una estructura
switch-case
switch(a){
case bb:
..
break;
.
.
}
void Palabra resevada que evala la expresin
dada y luego devuelve undefined.
void(0)
catch Palabra reservada para recoger una
excepcin en una instruccin try-catch
try{

} catch(e){
.
}
do Palabra reservada para bucles do-while do{
}while(a == b)
in Palabra reservada para la iteracin de listas
de propiedades
for (variable in object) {...
}
this Palabra reservada que se utilize para
representar al objeto actual que puede ser
function MiObjeto{
this.a;this.b;this.c;}

28

bien la ventana o un objeto creado, etc..
while Palabra reservada para bucles while como
bucles do-while
do{
}while(a == b)
while(a == b){}
const Palabra reservada para la declaracin de
constantes, no obstante, no funciona
siempre de forma correcta
const PI = 3.1416;
else Palabra reservada para la utilizacin de la
estructura if-else
if(a == b){}else{}
instanceof Palabra reservada para comprobar si un
objeto tiene un tipo determinado
a instanceof Boolean
throw Palabra reservada para la generacin de
excepciones
throw Error 2;
throw 42;
throw true;

with Palabra reservada que extiende la cadena
de mbito para una declaracin.

continue Palabra reservada que continua/salta a una
etiqueta establecida.
prueba:
a++;
alert(hola a);
continue prueba;

finally Palabra reservada para la ejecucin de
sentencias despus de una estructura try-
catch
try{

} catch(e){
.
} finally{
alert(a);
}
try Palabra reservada que ejecuta un cdigo
que puede provocar alguna excepcin o
sobre la que se establecer un bloque
finally
try{

} catch(e){
.
}
debugger Palabra reservada para invocar la
funcionalidad de debug
debugger;
for Palabra reservada para bucles for for (variable in object) {...
}
for(var i = 0; i < 3; i++){}
new Palabra reservada para la instanciacin de
objetos, bien intrnsecos de javascript o
bien creados
var a = new Array();
typeof Palabra reservada para el operador que
devuelve una cadena que indica a que
objeto pertenece una variable dada
typeof a;

Adems existen otras palabras que no deberan ser utilizadas ya que son funciones ya
existentes:
String Array Date Math Boolean

29

Number Function isNaN parseInt parseFloat
eval

Operadores
Operador Descripcin Ejemplo Tipo Operador
= Asignacin z = k Asignacin
+= Suma y asigna z+=k Asignacin
-= Resta y asigna z-=k Asignacin
*= Multiplica y asigna z*=k Asignacin
/= Divide y asigna z/=k Asignacin
%= Calcula mdulo y asigna z%=k Asignacin
<<= Desplaza a la izquierda y asigna z<<=k Asignacin
>>= Desplaza a la derecha y asigna z>>=k Asignacin
>>>= Desplaza a la derecha con ceros y asigna z>>>=k Asignacin
&= AND de bits y asigna z&=k Asignacin
^= OR de bits y asigna z^=k Asignacin
|= XOR de bits y asigna z|=k Asignacin
+ Suma dos operandos z + k Aritmtico
- Resta dos operandos z - k Aritmtico
- Niega un operando -z Aritmtico
* Multiplica dos operandos z*k Aritmtico
/ Divide dos operandos z/k Aritmtico
% Calcula el resto de la divisin de dos
operandos
z % k Aritmtico
++ Suma 1 y asigna ++z Aritmtico
-- Resta 1 y asigna --z Aritmtico
== Valor de z igual a valor de k? z==k Comparacin
!= Valor de z distinto de valor de k? z!=k Comparacin
> Valor de z mayor que valor de k? z>k Comparacin
>= Valor de z mayor o igual que valor de k? z>=k Comparacin
< Valor de z menor que valor de k? z<k Comparacin
<= Valor de z menor o igual que valor de k? z<=k Comparacin
&& Realiza la operacin AND exclusiva z && k Lgico
|| Realiza operacin OR exclusiva z || k Lgico
! Realiza operacin NOT !z Lgico
& Operacin AND a nivel de bits z & k De bits
| Operacin OR a nivel de bit z | k De bits
^ Operacin XOR a nivel de bit z ^ k De bits
- Operacin negacin de bits - z De bits
<< Desplaza bits de z a la izquierda n veces z << n De bits
>> Desplaza bits de z a la derecha n veces z >> n De bits
>>> Desplaza bits de z al a derecha n veces con
ceros
z >>> n De bits
? Si la expresin de la izquierda es cierta
(true) realiza lo indicado a continuacin del
operador sino lo que se indica tras el
carcter :
a==z?a:z Ternario


30

Objetos principales
Un objeto principal se construye como en java (var objeto = new Objeto()) con la
palabra reservada null.
Math
Atributos
Atributo Descripcin
Math.E Constante de Euler o nmero e (se utiliza como base de los logaritmos
neperianos y tiene un valro aproximado de 2,718)
Math.LN2 Logaritmo neperiano de 2 (aproximadamente 0,693)
Math.LN10 Logaritmo neperiano de 10 (aproximadamente 2, 302)
Math.LOG2E Logaritmo en base 2 de e (aproximadamente 1,442)
Math.LOG10E Logaritmo en base 10 de e (aproximadamente 0,434)
Math.PI Constante pi (aproximadamente 3,14159)
Math.SQRT1_2 Raz cuadrada de (aproximadamente 0,707)
Math.SQRT2 Raz cuadrada de 2 (aproximadamente 1,414)

Mtodos
Mtodo Descripcin
Math.abs(n) El nmero n sin signo (valor absoluto)
Math.acos(n) El arco coseno de n, que debe estar entre 1 y -1
Math.asin(n) El arco seno de n, que debe estar en 1 y -1
Math.atan(n) El arco tangente de n
Math.atan2(x, y) El carco tangente de un punto determinado por las
coordenadas cartesianas x e y
Math.ceil(n) El redondeo de n al inmediato entero superior
Math.cos(n) El coseno de n, donde n representa un ngulo
Math.exp(n) El nmero E elevado a potencia n
Math.floor(n) El redondeo de n al inmediato entero inferior
Math.log(n) El logaritmo natural de n
Math.max(n, m) El mayor de los dos valores que recibe como argumentos
Math.min(n, m) El menor de los dos valores que recibe como argumentos
Math.pow(n, m) El nmero n elevado a la potencia m
Math.random() Un nmero aleatorio comprendido entre 0 y 1
Math.round(n) El redondeo de n. Si la parte decimal es inferior a 0,, se
redondea al inmediato inferior. Si no, al inmediato superior
Math.sin(n) El seno del ngulo de n grados
Math.sqrt(n) La raz cuadrada de n.
Math.tan(n) La tangente de un ngulo de n grados


31

Date
Al construir por defecto esta clase, se establece la fecha local por defecto. Observar,
que para utilizar los mtodos de esta clase es necesario construir dicho objeto (distinto de
Math que digamos, son mtodos y atributos estticos)
Mtodos
Mtodo Descripcin
getFullYear() Devuelve el ao completo, con cuatro cifras
setFullYear(yyyy) Establece el ao completo, con cuatro cifras
getYear() Devuelve el ao en un formato dependiente del navegador
setYear(yyyy) Establece el ao en un formato dependiente del navegador
getMonth() Devuelve el mes del ao en nmero (de 0 a 11, no de 1 a 12)
setMonth(MM) Establece el mes del ao en nmero (de 0 a 11, no de 1 a 12)
getDate() Devuelve el da del mes, de 1 a 31
setDate(dd) Establece el da del mes, de 1 a 31
getDay() Devuelve el da de la semana en nmero (el 0 para el domingo, el 6 para
el sbado)
getHours() Devuelve la hora del da, de 0 a 23
setHours(hh) Establece la hora del da, de 0 a 23
getMinutes() Devuelve los minutos de la hora, de 0 a 59
setMinutes(mm) Establece los minutos de la hora, de 0 as 59
getSeconds() Devuelve los segundos de un minuto, de 0 a 59
setSeconds(ss) Establece los segundos de un minuto, de 0 a 59
getMilliseconds() Obtiene los milisegundos del segundo actual, de 0 a 999
setMilliseconds(lll) Establece los milisegundos del segundo actual, de 0 a 999
getTime() Devuelve los milisegundos transcurridos desde el inicio de la era Unix.
setTime(time) Establece los milisegundos transcurridos desde el inicio de la era Unix

NOTA

Existen ms mtodos para trabajar con la hora UTC (Universal Time Coordinated), pero esas se
pueden ver en el estndar en caso de ser necesario y no son muy habituales

32

Matrices
Las matrices se declaran a travs de la clase Array o inicializndolas con corchetes, no
obstante lo correcto es utilizar la clase Array (Ejemplo: var lista = new Array(1, 2, 3, 4, );). En
todos los casos se trata de arrays dinmicos.
Para el acceso a un array se realiza directamente por ndice sin inicializar cada ndice,
excepto si queremos crear una matriz, que implicar que por cada elemento del Array existir
un nuevo array (array bidimiensional o matriz)

La longitud de una matriz se obtiene con su atributo length (este atributo lo tienen la mayora
de los objetos y nos da la longitud, Array no es una excepcin, observar adems que no lleva
parntesis lo que es similar a dicho atributo para arrays estticos en java)
Mtodos
Para utilizar los mtodos de la clase Array, es necesario inicializar una variable con
dicho tipo
Mtodo Descripcin
concat(matriz) Une las dos matrices devolviendo una concatenacin de ambas
join() Une todos los elementos de una matriz en una cadena
alfanumrica
pop() Se utiliza para eliminar el ltimo elemento de una matriz. Dicho
elemento eliminado es devuelto por la funcin y puede ser
almacenado en una variable
push(elem,) Se emplea para aadir uno o ms elementos a una matriz
reverse() Invierte el orden en el que se encuentran almacenados los datos de
una matriz
shift() Realiza la misma funcionalidad que el mtodo pop, eliminando en
este caso el primer elemento del array
unshift(elem,) Permite aadir uno o ms elementos al inicio del array,
desplazando el resto de elementos tantos ndices como elementos
introducidos
slice(n, m) Permite obtener una submatriz de longitud m - n, que tendr como
primer elemento el que se encuentra en la posicin n y como
ltimo elemento el que se encuentra en la posicin m
splice(inicio,
nmCeldas, valor nuevo
1,, valor nuevo n)
Es una funcin que se segn como se utilice, permite eliminar
celdas de una matriz, reemplazar unos elementos por otros o
insertar elementos en cualquier parte de la matriz
sort() Es una funcin que ordena alfanumricamente un array

Observar que con la premisa del ndice podramos dar valor a un ndice, dejando ndices
por el medio vacos. Esto est permitido aunque no es muy correcto, ya que en esos
casos a la hora de recorrer elementos deben realizarse ms validaciones.
Tambin se permite utilizar un array como una especie de hashMap de Java (solo con
cadenas). En este caso el array se utiliza exactamente igual solo que el ndice es una
cadena. Este caso es vlido solo para vectores o arrays de una sola dimensin

33

Number
Es una clase para la representacin numrica, no obstante no tiene una especial
relevancia, salvo que se quiera sobrecargar (prototype) para realizar funciones especficas
String
Es la clase que instancia por defecto si no asignamos o inicializamos una variable, no
obstante, su tratamiento es muy similar a otros lenguajes de programacin como puede ser
java.
NOTA

Otros objetos y funciones
Objeto screen
Representa la pantalla del monitor y se emplea para determinar sus caractersticas
Propiedad Descripcin
screen.width Anchura del monitor
screen.height Altura del monitor
screen.availWidth Anchura del rea disponible
screen.availHeight Altura del rea disponible
screen.colorDepth Profundidad del color (Ejemplo: 32 bits)

Objeto window
Representa la ventana del navegador y cualquier otra ventana secuendaria (popup,
nueva ventana, ) que necesitemos abrir y gestionar.
Mtodos Descripcin
window.moveTo(x, y) Establece la posicin de la esquina superior izquierda de la
ventana del navegador con respecto a la esquina superior
izquierda de la pantalla
window.resizeTo(x, y) Reescala la ventana del navegador para que ocupe el espacio
indicado en pixeles
window.moveBy(x,y) Establece la posicin de la esquina superior izquierda de la
ventana del navegador con respecto a la esquina superior
izquierda de la ventana actualmente (mueve de forma
relativa)
window.resizeBy(x,y) Reescala la ventana del navegador para que ocupe el espacio
indicado en pixeles, con respecto al tamao ya existente
(rescala de forma relativa)

En javascript, una cadena de texto se puede establecer entre comillas dobles (cadena de
texto) o bien entre comillas simples (cadena de texto) y ambas sern la misma cadena.
Cuando utilizar cada una es responsabilidad del programador determinarlo. Observar
que dentro de una cadena establecida con comillas dobles pueden utilizarse comillas
simples sin escapar siendo tambin valida la inversa de esta observacin.

34

Existe un mtodo que merece un apartado y extensin a parte que es
window.open(fichero_html, nombreVentana, atributos):
Fichero_html: ruta al fichero html que se va a abrir en un popup
nombreVetnana: nombre de la ventana (no es el modo ms correcto, pero se
mantiene por compatibilidad)
atributos, cadena con los atributos de la nueva ventana a abrir separados por comas
(atributo1=a, atributo2 = b, )
o width, ancho de la nueva ventana
o height, alto de la nueva ventana
o top, distancia, en pxeles, entre el borde superior de la nueva ventana y el de
la pantalla (para firefox screenY)
o left, distancia, en pxeles, entre el borde izquierdo de la nueva ventana y el de
la pantalla (para firefox screenX)
o resizable, indica si la nueva ventana ser redimensionable por el usuario
(valores: yes, no)
o menubar, indica si la nueva ventana cuenta con barra de men del explorador
(valores: yes, no)
o toolbar, indica si la nueva ventana contar o no con barra de herramientas
(valores: yes, no)
o directories, indica si la nueva ventana tendr o no la barra de vnculos (valores:
yes, no)
o location, indica si en la nueva ventana aparecer o no la barra de direcciones
(valores: yes, no)
o scrollbar, indica si en la nueva ventana aparecer o no el scroll vertical
(valores: yes, no)
o satus, indica si en la nueva ventana aparecer o no la barra de estado (valores:
yes, no)
o fullscreen, indica si la ventana se abrir en pantalla completa (valores: yes, no)
Si asignamos la creacin del popup a una variable, podremos adems utilizar el mtodo
focus(), que establece el foco en la ventana indicada, close() que cierra la ventana hija
NOTA

Para escribir en la barra de estado, basta con establecer el texto en la propiedad
window.status

Para cerrar un popup se puede utilizar self.close(), para desenfocar, self.blur(), (devolver
el foco a la ventana padre sera self.opener.focus()) y para acceder a las funcionalidades
/campos del padre (ventana que crea el popup), desde un popup utilizar parent.[funcin,
elemento, + o bien self.opener.*funcin, elemento, +

35

Objeto navigator
Este objeto permite identificar diferentes datos acerca de la plataforma en la que se
ejecuta la pgina
Propiedades
navigator.appCodeName El nombre interno, en clave, del navegador (Mozilla, en la
mayora de los casos)
navigator.appMinorVersion Nmero del parche o correccin aplicada al navegador
navigator.appName Nombre oficial del navegador (MSIE, Opera, etc.)
navigator.appVersion Nmero de versin
navigator.cookieEnabled Contiene un valor lgico que indica si el navegador cliente
admite (true) o no admite (false) cookies
navigator.cpuClass Tipo de procesador empleado en la mquina del cliente.
Contiene x86 para procesadores Intel y compatible, o PPC para
un Mac Power PC.
navigator.language Una clave que identifica el idioma en que est configurado el
navegador
navigator.mimeTypes Una matriz que contiene los tipos MIME (tipos de codificacin de
texto) soportados por el navegador
navigator.navigator.online Trues si el navegador est conectado a Internet y false si no lo
est
navigator.oscpu Sistema operativo en el que se ejecuta el
navegador.(deprecated, utilizar userAgent)
navigator.platform Plataforma en que se ejecuta el navegador. (deprecated, utilizar
userAgent)
navigator.plugins Array con los plug-ins instalados en el navegador
navigator.product Nombre de producto del navegador
navigator.productSub Mas datos relacionados con el navegador. En Netscape, se
obtiene la fecha de fabricacin
navigator.securityPolicy Tipo de encriptacin de datos que soporta el navegador
navigator.systemLanguage Idioma del sistema operativo
navigator.userAgent Contiene el nombre y versin del navegador, el sistema
operativo empleado, etc.
navigator.userLaguage Idioma establecido por el usuario
navigator.userProfile Almacena algunos datos del usuario
navigator.vendor Nombre de la compaa que ha fabricado el navegador
navigator.vendorSub Informacin adicional acerca del fabricante.


36

Objeto location
Se utiliza principalmente para obtener los datos de la url actual o bien realizar
redirecciones. Si establecemos su propiedad href, redireccionaremos la pgina actual.
Propiedades
location.protocol Protocolo de comunicacin
location.hostname El nombre del host
location.port El puerto por el que escucha el host
location.pathname La ruta donde est el fichero buscado
location.hash El anclaje de un enlace interno
location.href La url completa
location.search SE emplea para bsquedas de archivos. Identifica lo que aparece
destras del sigon ? en una URL

Intervalos en javascript
En javascript se pueden realizar dos operaciones en funcin del tiempo
setTimeout(funcin, millis) (retrasa la llamada a una funcin funcion una serie de
milisegundos millis) o setInterval(funcin, millis) (llama a una funcin funcin cada milis
milisegundos). Para eliminar un setInterval establecido es necesario asignar esta llamada a una
variable, para posteriormente aplicar a dicha variable la funcin clearInerval(variable), lo que
har que el intervalo de llamadas finalice.

Prototipos (prototype)
Los prototipos se utilizan para establecer nuevas funcionalidades a objetos ya
existentes, al similar a aadir nuevos mtodos a un objeto en java.
Para ellos se utiliza la propiedad prototype con la siguiente sintaxis:
Objeto.prototype.nombreFuncion = funcin();
Posteriormente podremos llamar a un objeto instanciado con dicha clase como
variable.nombreFuncion();
Funcin escape()
Escapa un texto en html para evitar problemas de caracteres
Funcin eval(cadena)
Evalua o ejecuta la cadena como cdigo javascript, por ejemplo: eval(alert(mi mensaje));
Mostrar al ejecutarse una ventana de dialogo con la cadena mi mensaje.


37

Eventos
Existen multitud de eventos en javascript y no todos son habituales, mostramos a continuacin
una lista con dichos eventos y cuando se disparan
EVENTO Descripcin
onAbort Se cancela la carga de una imagen
onAfterPrint Inmediatamente despus de que el objeto asociado se imprima
onAfterUpdate Despus de una actualizacin
onBeforeCopy Antes de que el objeto seleccionado, asociado a este evento, sea
copiado al portapapeles
onBeforeCut Antes de que el objeto seleccionado, asociado a este evento, sea
cortado.
onBeforePaste Antes de que en el objeto asociado a este evento sea pegado del
contenido del portapapeles.
onBeforePrint Antes de que el objeto asociado se imprima.
onBeforeUnload Antes de que ese produzca la descarga de una pgina
OnBeforeUpdate Antes de producirse una actualizacin
onBlur El foco se posiciona sobre otro objeto que no sea el que tiene el
evento asociado
onBounce Este evento nicamente se asocia al objeto marquesina, por lo que
slo est disponible para Explorer. Cuando el comportamiento de
una marquesina es altrnate, este evento detecta cuando rebota
en los extremos
onChange Se cambia el contenido de un campo en un formulario
onClick Se hace clic con el botn primario (normalmente el izquierdo) el
ratn en un objeto.
onContextMenu Se hace clic con el botn secundario (normalmente el derecho) del
ratn
onCopy Cuando se realiza una operacin de copiado de la seleccin al
portapapeles
onCut Cuando se realiza una operacin de cortado de la seleccin
onDblClick Se hace doble click con el botn primario del ratn
onError Se produce un error durante la carga de un objeto
onFocus El foco se posiciona sobre el objeto que tiene asociado este evento
onKeyDown Se pulsa una tecla (cuando el foco est sobre el objeto al que se le ha
aadido el manejador de eventos)
onKeyPress Se pulsa y libera una tecla (cuando el foco est sobre el objeto al que
se le ha aadido el manejador de eventos)
onKeyUp Se libera una tecla pulsada (cuando el foco est sobre el objeto al
que se le ha aadido el manejador de eventos)
onLoad Se termina la carga de una pgina o de una imagen
onMouseDown Se pulsa uno de los botones del ratn
onMouseOut Se desplaza el puntero del ratn fuera del objeto que tiene asociado
el evento.
onMouseOver Se posiciona el puntero del ratn sobre el objeto que tiene asociado
el evento
onMouseUp Se libera un botn del ratn que estaba pulsado
onMove Se mueve la ventana
onPaste Cuando se pega el contenido del portapapeles
onReset Se hace click en el botn de Reset de un formulario

38

onResize Se cambia el tamao de la ventana
onSelect Se selecciona (resalta) un objeto de la pgina
onSubmit Se pulsa sobre el botn de Envo de un formulario
onUnload Se descarga la pgina actual, bien porque se solicita otra o porque se
cierra el navegador

Cookies
Las coockies se establecen a travs de la propiedad cookie del objeto document
Ejemplo:
document.cookie = escape(nombre=Pedro);


39

Nodos (DOM)
Todos los objetos se consideran, genricamente, como nodos de document, de los
cuales existen dos tipos:
Nodos de elemento (o elementos), son aquellos formados por un tag
Nodos de texto, son los textos que se incluyen en una pgina web
Adems los nodos, segn su jerarqua pueden ser de 3 tipos:
Nodo padre, aquel que tiene otros nodos colgando de l
Nodos hijos, son los que cuelgan de un nodo padre
Nodos hermanos, son los que estn al mismo nivel que otro nodo determinado, y que
cuelgan del mismo padre.
Los nodos forman matrices, llamadas childNodes, Por ejemplo para acceder en el html
a su head y a su title, podramos utilizar:
document.childNodes[0].childNodes[0].childNodes[0]
A continuacin mostramos las propiedades y mtodos de los nodos del W3C DOM
Propiedad o mtodo Descripcin - Uso
className Indica o establece el origen de clase css que afecta al nodo
referido
firstChild Se refiere al primer nodo hijo de aqul con el que estemos
trabajando
lastChild Se refiere al ltimo nodo hijo de aqul con el que estemos
trabajando
nextSibling Se refiere al nodo hermano siguiente a aqul con el que
estamos trabajando
nodeName Se refiere al nombre identificativo del nodo
nodeType Se refiere al tipo de nodo (tag, atributo o texto)
ownerDocument Se refiere al documento propietario de aqul con el que
estamos trabajando
parentNode Se refiere al nodo padre de aqul con el que estamos
trabajando
previousSibling Se refiere al nodo hermano anterior a aqul con el que
estamos trabajando
tagName El nombre del tag de un nodo
appendChild() Aade un nodo hijo a aqul con el que estamos trabajando
cloneNode(clonarHijos) Copia un nodo (si clonarHijos es true, estos se clonan
tambin, si es false los hijos no se clonan)
createElement(tag) Crea un nodo de elemento para aadirlo, como hijo, al
nodo con el que estamos trabajando
createTextNode(texto) Crea un nodo de texto para aadirlo, como hijo, al nodo
con el que estamos trabajando
getAttribute(atributo) Obtiene el valor de un atributo
getElementById(id) Se usa para referirse a un nodo mediante su atributo id
getElementsByTagName(name) Permite referirse a un nodo (o conjunto de nodos) por el
nombre del tag

40

hasChildNodes() Determina si un nodo tiene hijos
insertBefore(nodo) Inserta un nodo hijo en la matriz childNodes de aquel con
el que estamos trabajando
removeAttribute(atributo) Elimina un atributo de un nodo de elemento
removeChild(nodo) Elimina el hijo indicado en la matriz childNodes del nodo
con el que estamos trabajando
replaceChild(nodoRestaurar,
nodoCambiar)
Sustituye el hijo indicado de la matriz childNodes del nodo
con el que estamos trabajando por otro
setAttribute(atributo, valor) Establece un atributo del nodo elemento con el que
estamos trabajando y su valor

Operaciones con cadenas
En javascript existen varias funciones para las operaciones con cadenas, que se deber
resear:
split(sep): divide una cadena por en varios elementos que se encuentren separados
por sep
splice(init, end) o substring(init, end): crea una subcadena de la cadena a la que se
aplique desde el carcter int hasta un carcter ms del carcter end
substr(init, numCar): crea una subcadena de una cadena dada iniciando en el carcter
init y tomando un numero de Caracteres a partir de ese ndice (init) numCar.
indexOf(cadena): devuelve el ndice del primer carcter de la primera cadena
encontrada dentro de un elemento dado o -1 si no encuentra dicha cadena
search(/regexp/): devuelve la posicin inicial en la que se encuentra una cadena
coincidente con la expresin regular que se pasa como parmetro
match(/regexp/): devuelve un array con todas las subcadenas que coincidan con dicha
expresin regular
replace(/regexp/, sustituir): reemplaza el primer elemento coincidente con la
expresin regular por el indicado en sustituir. Si quisiramos realizar un replace all,
aadir a la expresin regular tras la ltima barra el carcter g (Ejemplo: /regexp/g)
toUpperCase(): pone todo el texto a maysculas de un elemento dado
toLowerCase(): pone todo el texto a minsculas de un elemento dado.


41

JQUERY

Que es jquery y por qu utilizarlo
JQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol
DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la tcnica AJAX a
pginas web. jQuery es la biblioteca de JavaScript ms utilizada.[Wikipedia]

Toda la documentacin de JQUERY (tanto el API, como las descargas) se encuentra en:
http://api.jquery.com/
Para utilizar jquery es necesario importar/incluir la librera jquery en nuestr pgina HTML,
antes de que este sea utilizado.


42

Selectores
Para utilizar jquery, es decir, para indicar que queremos utilizarlo, se utiliza el carcter
$ seguido de su selector, un . para utilizar alguna de sus funciones como trim(), o bien el
objeto jQuery con la misma sintaxis que para $.
En jquery se denomina selectores a todos aquellos que se utilizan para obtener
elementos que se encuentran en HTML bien por id, por name, estilo, etiqueta, Existen
multitud de selectores, y toda la informacin acerca de los mismos se encuentra en:
http://api.jquery.com/category/selectors/, no obstante aqu mencionaremos los ms
utilizados:
Selector Descripcin
$(#idComponente) Selecciona un/os componente/s a travs de su id
$(.estilo) Selecciona un/os componente/s a travs de uno de los
valores de su atributo class
$(tag) Selecciona un/os componente/s a travs de su etiqueta
o tag
$( *atributo=valor+) Selecciona un/os componente/s cuyo atributo
atributo tenga el valor valor
$( *atributo|=valor+) Selecciona un/os componente/s cuyo atributo
atributo tenga valor o bien comience por el valor y
est seguido por el carcter -
$( *atributo*=valor+) Selecciona un/os componente/s cuyo atributo
atributo tenga el valor o bien valor sea un substring
del valor de atributo (contenga)
$( *atributo~=valor+) Selecciona un/os componente/s cuyo atributo
atributo tenga el valor o bien valor est delimitado
por espacios
$( *atributo^=valor+) Selecciona un/os componente/s cuyo atributo
atributo comience por valor
$( *atributo$=valor+) Selecciona un/os componente/s cuyo atributo
atributo finalice por valor
$( *atributo!=valor+) Selecciona un/os componente/s cuyo atributo
atributo no tenga valor


43

Funciones principales
Existen multitud de funciones para operar con jquery que nos facilitan muchas
operaciones tras obtener un objeto, aqu reseamos algunas, no obstante este es un pequeo
subconjunto de las ms utilizadas y existen muchas ms:
Funcin Descripcin
.attr(atributo*,valor+)
.css(estilo*,valor+)
.html(*cadena| objeto+)
.val([valor]) Establece un valor al atributo value, si tiene
parmetro, en caso contrario devuelve el valor que
contiene.
.remove(cadena selector|objeto) Elimina un objeto que se encuentra dentro de otro
previo
.removeAttr(atributo) Elimina un atributo
.removeClass(estiloCss *estiloCss+) Elimina un estilo dado del atributo class
.after(cadena|objeto) Agrega un objeto o cadena que representa un nodo
despues de un nodo dado
.before(cadena | objeto) Agrega un objeto o cadena que representa un nodo
antes de un nodo dado
.append(cadena | objeto) Agrega un objeto o cadena que representa un nodo
como descendiente de un nodo dado
.addClass(estiloCss) Agrega un estilo class al atributo class de un objeto
seleccionado
$.trim(cadena) Elimina todos los espacios de la cadena dada
.find(selector) Busca dentro de los descendientes del elemento
.each(function(){}); Recorre una lista

Plugins
Existen varias libreras javascript que dependen de jquery para su funcionamiento y que ya
resuelven de un modo ms o menos adaptable la resolucin de algunos problemas:
jquery.ui.version.js (http://api.jqueryui.com/). Es una de las libreras ms utilizadas, ya que
engloba multiples funcionalidades, como autocompletado, manejo de fecha (datepicker), etc.
Conviene tenerla presente ya que en ella se resuelven muchos de los problemas ms
habituales de una forma sencilla.

En ese otro enlace encontramos plugins para jquery para multitud de efectos y soluciones,
aunque hay muchsimos ms, pero por resear la importancia y utilidad de los desarrollos
sobre jquery.
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/


44

EJERCICIOS

Ejercicio HTML
Realizar la siguiente calculadora sin el uso de estilos y maquetando con tablas. La caja superior,
ser un input de tipo texto, con un tamao de 26 caracteres (que ser la longitud mxima) y no
podr ser modificada. Los botones de nmeros, borrado y separador de decimales ,, sern
enlaces, as como el smbolo =, el resto de botones sern inputs de tipo botn y la
maquetacin tiene que ser la aqu indicada.

Ejercicio HTML - CSS

Cambiar todos los botones a enlaces y utilizar la imagen raz.png para que quede la calculadora
como la imagen que aqu se muestra. Adems, cuando paso el ratn por encima de un botn
se debe mostrar un reborde amarillo que simula el mismo comportamiento que un botn
(input-button)


45

EJERCICIO JAVASCRIPT
Con la calculadora antes realizada y maquetada realizar las siguientes funcionalidades:
1) Que al pulsar cualquier botn de nmero se escriba en la pantalla
2) Que al pulsar el botn de , si existe ya una coma no permita escribirla
3) Que permita realizar las operaciones +, -, x, /, % y raz cuadrada como una calculadora
normal, es decir, escribo un nmero pulso una operacin (+, -, x, /) y escribo otro
nmero y al pulsar = me dara el resultado o bien pulso otra operacin y se acumula
a la siguiente (sugerencia, utilizar almacenamientos temporales de cadena o
concatenaciones), el botn C, cancela la operacin en curso y borra el resultado de
la pantalla, es decir, iniciamos de nuevo sin acumular.
4) Las operaciones raz cuadrada y % se ejecutarn sobre una cantidad ya introducida, es
decir, tecleo un nmero, pulso la operacin y me devuelve el resultado.
5) Aadir una fila ms entre el display o campo de texto y el teclado, en la que se incluya
un botn con la siguiente operativa:
a. Inicialmente tendr el texto Habilitar pantalla
b. Si se pulsa, se desactiva el teclado menos el botn = y se habilita la pantalla
para escritura.
i. El botn con texto Habilitar pantalla cambiar a Deshabilitar
pantalla y el texto pasar de azul a rojo y de fondo gris a blanco que si
se pulsa en este caso:
1. Volver al estado inicial, es decir, deshabilita el display,
habilita todos los botones y cambia de nuevo el texto del
botn por el de Habilitar pantalla
ii. Esta pantalla solo admitir los siguientes smbolos: dgitos, carcter ,
(uno por cifra (los separadores entre cifras son +, -, * y /) no permite
escribir ni % ni raz cuadrada. Al pulsar intro o el botn = nos
devolver el resultado
iii. En el momento en el que pulsamos intro o = se validar que la
operacin sea correcta, en caso de no serlo, se mostrar un alert
indicando que La operacin a realizar no es correcta y se
establecer el foco en la caja de texto
6) Agregar funcionalidad de cambio de color a los botones (enlaces) de forma que
parezca que al pulsarlo tiene el mismo efecto que un botn. (El color cuando se hace
click es E2E1D9)


46

Creacin de popups y comunicacin entre ventanas

Para este ejercicio crearemos una ventana con una tabla con ttulo Histrico de operaciones
y con tres columnas:
La primera columna tendr como ttulo Fecha - hora y contendr la fecha y la hora
en formato dd/MM/yyyy - hh:mm:ss de la operacin realizada. Alineacin izquierda
La segunda columna tendr como ttulo Operacin y contendr las operaciones
realizadas (el desglose de la operacin, por ejemplo: 33 + 24 - 5) hasta pulsar un igual o
una operacin unitaria raz o porcentaje. Alineacin centrada
La tercera columna tendr como ttulo Resultado y contendr el resultado de dicha
operacin indicada en la columna anterior (por ejemplo en la operacin anterior 52).
Alineacin derecha
Esta tabla tendr todas sus filas con distinto fondo segn seas pares o impares
Adems contendr un botn Realizar clculo dicho botn abrir nuestra ltima ventana de
calculadora como un pop-up y nos permitir aadir operaciones tras pulsar una operacin
unitaria (raz o porcentaje) o el botn =, para ello ser necesario aadir a las funcionalidades
de estos botones la de acceder a la ventana padre y agregar un registro (Observar que lo ms
sencillo es crear una funcin en la ventana padre, bueno, en su javascript, que reciba la
operacin y el resultado y que sea este padre el que escriba dicho registro en la tabla)
NOTA

Observar que ser necesario crear un panel translucido que nos bloquee la ventana para no poder
abrir ms de un popup

47

JQUERY Y USO DE PLUGINS
Para este ltimo ejercicio en la ventana del histrico, agregamos un nuevo botn a la derecha
del botn Realizar clculo con el literal Enviar datos que mostrar en la parte inferior de la
pantalla y que se encontrar deshabilitado si no existe ningn registro en la tabla, un panel con
los siguientes campos:
Nombre del usuario (caja de texto de 30 caracteres)
Apellidos (caja de texto de 60 caracteres)
Correo electrnico (caja de texto de 40 caracteres)
Validar (Checkbox)
Fecha validar (datepicker)
Combo Perfil de clculo con los valores
o -- Seleccione --
o Personal
o Estudiante
o Profesional
Una caja que agrupe tres radio botn Tipo de clculo:
o Estimacin
o Calculo
o Revisin
Fecha de revisin (datepicker)
rea de texto con la Descripcin
Tres botones Enviar - Limpiar - Cancelar en la parte inferior derecha
Inicialmente este formulario o panel tendr todos los elementos deshabilitados y al pulsar el
botn Enviar datos, se habilitar todo a excepcin de Fecha validar, Tipo de clculo,
Fecha de revisin, Descripcin y el botn Enviar.
Si seleccionamos o checkeamos el botn Validar se habilitar el campo Fecha validar que al
pulsar sobre el nos muestra un calendario para seleccionar la fecha de validacin.
El combo Perfil de clculo si se selecciona Profesional habilitar la caja Tipo de clculo
del que habr que seleccionar uno y tambin habilitar el rea de texto Descripcin
Si de la caja Tipo de clculo seleccionamos Revisin, se habilitar la caja de texto Fecha
revisin que al pulsar sobre ella, nos muestra un calendario en el que seleccionaremos la
fecha en la que se debe realizar la revisin.
El botn Limpiar se habilitar en el momento en el que exista algn campo que tenga un valor
El botn Enviar, se habilitar en el momento en el que todos los campos deshabilitados tengan
valor, y realizar el envo de los datos introducidos al Correo electrnico, incluidos los datos
de la tabla con las operaciones.

Curso HTML - CSS - JS

Cargado por

Copyright:

Formatos disponibles

Curso HTML - CSS - JS

Cargado por

Información del documento

Descripción original:

Título 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

Curso HTML - CSS - JS

Cargado por

Copyright:

Formatos disponibles

CURSO HTML, CSS, JAVASCRIPT y JQUERY

También podría gustarte