CURSO HTML, CSS, JAVASCRIPT y

JQUERY

CURSO

HTML, CSS, JAVASCRIPT , JQUERY

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

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 características.......................................................................................................19
Definición de hojas de estilo...................................................................................................20
Local....................................................................................................................................20
Externo................................................................................................................................20
Principales propiedades..........................................................................................................21
Javascript.....................................................................................................................................26
Que es.....................................................................................................................................26
Características.........................................................................................................................26
Sintaxis y variables..................................................................................................................27
Palabras reservadas.............................................................................................................27
Operadores..........................................................................................................................29
Objetos principales.................................................................................................................30
Math........................................................................................................................................30
Atributos..............................................................................................................................30
Métodos..............................................................................................................................30
Date.........................................................................................................................................31
Métodos..............................................................................................................................31
Matrices..................................................................................................................................32
Métodos..............................................................................................................................32

Number...................................................................................................................................33
Otros objetos y funciones........................................................................................................33
2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
Objeto screen......................................................................................................................33
Objeto window....................................................................................................................33
Objeto navigator..................................................................................................................35

Objeto location...................................................................................................................37
Intervalos en javascript.......................................................................................................37
Prototipos (prototype)........................................................................................................37
Función 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

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

HTLM - XHTML

Que es
HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace
referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que
sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define
una estructura básica y un código (denominado código HTML) para la definición de contenido
de
una página web, como texto, imágenes, etc. Es un estándar a cargo de la W3C, organización
dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo
referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.
(Wikipedia)

Observaciones

Los navegadores utilizados traducen el código 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 código se interpretarán como uno, incluyendo el texto. El carácter espacio, o
carácter blanco sería codificado como  

Principales etiquetas
Etiqueta Significado
<html> Define el inicio del documento HTML, le
indica al navegador que lo que viene a
continuación debe ser interpretado como
código HTML. Esto es así de facto, ya que en
teoría lo que define el tipo de documento
es el DOCTYPE, que significa la palabra justo
tras DOCTYPE el tag de raíz.
<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 información
sobre el documento que no se muestra
directamente al usuario como, por ejemplo,
el título de la ventana del navegador
<title> Define el título de la página. Por lo general,
el título aparece en la barra de título
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 página;
ya sea usando CSS u otros lenguajes

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY similares. No es necesario colocarlo si se va
a vincular a

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

un archivo externo usando la etiqueta <link>

<meta> para metadatos como la autoría o la licencia,
incluso para indicar parámetros http
(mediante http-equiv="") cuando no se
pueden modificar por no estar disponible la
configuración 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 página, como
color de fondo y márgenes
<h1> a <h6> encabezados o títulos del documento con
diferente relevancia
<table> define una tabla.
<tr> fila de una tabla.
<td> celda de una tabla
<a> hipervínculo o enlace, dentro o fuera del
sitio web. Debe definirse el parámetro de
pasada por medio del atributo href
<div> división de la página. 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="./imágenes/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 definición

<dd> Establece la como

o definición descripción
tal de la definición
<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 introducción,
selección y envío de datos
<span> Permite agrupar varios elementos en línea
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 agrupación de
campos, enlaces, o cualquier otro elemento
<legend> Establece el título de un fieldset, poniéndolo
alineado con el marco mostrado.

6
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Existen más etiquetas que las aquí descritas, aunque estas sean las principales, no obstante, las etiquetas estánd

7
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Atributos
Los atributos son las propiedades de las etiquetas o configuración de las mismas que
modifican su comportamiento de una forma u otra (datos, estilos, tamaños, envíos, …).

Los atributos, al igual que las etiquetas no distinguen entre mayúsculas y minúsculas,
por lo que es lo mismo ID o id o iD, no obstante se debe poner atención en no repetirlos y
menos con valores distintos, ya que cogerá el último, pero podría suponer un problema

dependiendo del navegador (más problemático para javascript que para html, pero se debe
evitar)

Todas las etiquetas establecidas en el <body> (a excepción de <script> ya que no

tiene sentido ni enviar ni modificar esta etiqueta puesto que inserta únicamente código
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 más “etiquetas” de estilo
css predefinidos en una hoja de estilos o bien en la propia página
- 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
Además se pueden definir atributos propietarios, es decir, atributos que no definan o
no representen ninguna propiedad de la etiqueta para uso propio.

NOTA

Ojo, la creación de atributos propios es solo válido para HTML o XHTML no es válido para JSTL (jspx), ya que en JST

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 serán enviados dentro de un formulario
son: <input>, <label>, <textarea> y <select> (estas son las que contendrán 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 aplicación que va a re

dgeantoesradleml efonrtme euslalraiou(rel dnenluCeosntrtorocla

8
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

servlet ya que no tenemos cgi ni otros)

enctype Codificación 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 envían ficheros que
entonces es necesario establecer dicha
codificación como “multipar/form-data” o
para enviar el
formulario por mail que entonces se utiliza
“text/plain”
method Establece el método por el cual el navegador
remite los datos de formulario al servidor
para su procesamiento. Existen dos
métodos:
• GET - los datos se envían a través
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 envían cifrados y
se puede enviar cualquier tamaño
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 más adelante.

Elementos del formulario

INPUT
A continuación mostramos una tabla con los distintos atributos

Atributo Descripción Valor/es descripción

type Este atributo nos indicará text ( o por defecto) Campo de texto, este
el tipo de elemento que es el valor por
se va a mostrar defecto, en caso de
que no exista
atributo
button Este campo crea un
botón de formulario
en la ventana al que
tendremos que darle
funcionalidad, ya que

9
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
p
or
sí
so
lo
n
o
ti
e
n
e
n
ni
n
g
u
n
a

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

checkbox Muestra un
elemento check en la
ventana que puede
ser seleccionado o
deseleccionado
file Elemento para la
creación 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 código, pero no
tienen representación
gráfica/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 símbolo (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 selección única
reset Muestra un botón
que al pulsarlo
limpia todos los
campos del
formulario
submit Muestra un botón
que al pulsarlo envía
checked Atributo que nos indica si todos los campos
un input de tipo (type) del formulario
radio o checkbox está No tiene valores,
es decir, en html
seleccionado o no sería simplemente
el

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY aotbrsibta
untoteceh

necXkHeTd
M, nLo

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

debería 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 No tiene valores, es
eventos de este campo y decir, en html basta
en jstl, también anula con tener el atributo
el envío de datos de disabled, no obstante
dicho elemento en XHTML debería
tener un valor que
suele ser “true” o
“disabled”, no
obstante el mero
hecho de que se
escriba el atributo,
deshabilita el
readonly Valido solo para los campo No tiene
campos valores, es decir, en
de tipo (type) text, html, basta
checkbox, file y password. con tener el atributo
Este atributo, establece readonly, no obstante
que dichos campos serán en XHTML debería
de solo lectura, es decir, tener un valor que
no se podrán modificar. Se suele ser “true” o
diferencia de “disabled” en “readonly”, no
que este no anula ningún obstante el mero
evento sobre el campo hecho de que se
escriba el atributo,
“campo1”, “campos25”, deshabilita el campo
name Valido para todos los “nombre”, … Es válido cualquier
campos input, este valor,
atributo define el nombre preferentemente sin
con el que se enviará el espacios
campo al formulario, su
valor será el nombre con el
que se identificará el
campo
tabindex Establece el orden en el “1”, “2”, “3”, “4”, … Es válido cualquier
que se van a recorrer los entero
campos en una ventana a
través del tabulado,
cuanto menor sea el
numero indicado en este
atributo antes se recorre
(a excepción de si el
número es negativo, en
este caso no se recorre
(también

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
size
VaVtarlibduotosonlo tpabr)a los campos “8”, “160”, … Cualquier valor

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

de tipo (type) file, entero es válido,

password y text. indica el número de
Establece el tamaño de caracteres que se
dichos campos. Dicho muestran/ven en el
tamaño se suele campo
establecer por css, para
un mayor control “img_mostrar.jpg” La url de la imagen
src Válido únicamente para que vamos a
el tipo (type) image. En él mostrar,
se permitiendo url’s
establece la url de la relativas
imagen que se va a
mostrar
value Válido para los campos “prueba datos”, “pass”, Es válido cualquier
de tipo (type): button, “Button prueba”, … valor, además
checkbox, file, hidden, según el tipo (type)
password, radio, reset, puede bien ser el
submit y text dato introducido
(text, password) o
bien el dato que se
muestra(button)
maxlength Válido solo para los “8”, “25”, … Es válido
campos cualquier valor
de tipo (type): file, numérico
password y text. Establece
el número máximo de
caracteres de un campo
dado, no permitirá escribir
más caracteres que los
establecidos en este
campo.

Ejemplo

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

BUTTON
Esta etiqueta muestra un botón 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 Descripción Valor/es Descripción

disabled Deshabilita todos No tiene valores, es
los eventos de este decir, en html basta
campo y en jstl, con tener el atributo
también anula el disabled, no obstante
envío de datos de en XHTML debería
dicho elemento tener un valor que
suele ser “true” o
“disabled”, no
obstante el mero
hecho de que se
escriba el atributo,
deshabilita el campo
name E atributo define el “campo1”, Es válido cualquier
nombre con el que “campos25”, valor,
se enviará el campo “nombre”, … preferentemente sin
al formulario, su espacios
valor será el nombre
con el que se
identificará el campo
tabindex Establece el orden “1”, “2”, “3”, “4”, … Es válido cualquier
en el que se van a entero
recorrer los campos
en una ventana a
través del tabulado,
cuanto menor sea el
numero indicado en
este atributo antes
se

rdecsoirerel
n(aúmexecreopecsión
negativo, en este
caso no se recorre
(también atributo
notab)
value En este caso “prueba datos”, Es válido cualquier
contiene el valor que “pass”, “Button valor que queramos
puede ser enviado al prueba”, … que tenga el botón
enviar el formulario

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Ejemplo

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

SELECT
Esta etiqueta muestra una lista desplegable (combo) sobre la que podemos realizar
la selección de uno o varios valores en función de lo queramos realizar. Los atributos que
utiliza son:

Atributo Descripción Valor/es Descripción

disabled Deshabilita todos No tiene valores, es
los eventos de este decir, en HTML es
campo y en jstl, suficiente con tener
también anula el el atributo disabled,
envío de datos de no obstante en
dicho elemento XHTML debería
tener un valor que
suele ser “true” o
“disabled”, no
obstante el mero
hecho de que se
escriba el atributo,
deshabilita el campo
name E atributo define el “campo1”, Es válido cualquier
nombre con el que “campos25”, valor,
se
“nombre”, … pesrepfaecrieons temente sin
efonrvmiaurláareiloc
,asmu pvaoloarl será
el nombre con el que
se identificará el
campo
tabindex Establece el orden “1”, “2”, “3”, “4”, … Es válido cualquier
en el que se van a entero
recorrer los campos
en una ventana a
través del tabulado,
cuanto menor sea el
numero indicado en
este atributo antes
se recorre (a
excepción
d s i e l
neg a t iv
nú m e r o s
o , e n e s te
caso no se
recorre (también
atributo notab)
size Establece el puede selecci
onar
tamaño del combo seleccionar un
elemento de la
lista,
cuando
multiple Si no existe este este
existe
atributo, solo se se
pueden

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
“200px”, “50%”, Establ
“1em”, … ece el
ancho
del
comb
o. Si
no se
indica
nada
en el
enter
o, se
supon
e
pixele
s
No
tien
e
valo
res,
es
deci
r, en
HT
ML
es
sufic
ient
e
con
tene
r el
atrib
uto
mul
tiple
,
no
obsta
nte
en
XHTM
L
deber
ía
tener

1
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

varios elementos un valor que suele

ser “true” o “multiple”, no obstante el me
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:

Atributo Descripción Valor/es Descripción

value Es el value del “cualquier valor” Cualquier valor que
elemento, que será se requiera
el valor que envíe el
formulario al
servidor No tiene valores, es
selected Este atributo indica decir, en HTML es
(si está presente) suficiente con tener
que dicho elemento el atributo selected,
ha sido seleccionado no obstante en
XHTML debería
tener un valor que
suele
ser “true” o
“selected”, no
obstante el mero
hecho de que se
escriba el
atributo, indica
que el

eselelemcecinotnoahdao sido

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

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Ejemplo

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

TEXTAREA
Esta etiqueta muestra un área de texto. Tiene los siguientes atributos

Atributo Descripción Valor/es Descripción

disabled Deshabilita todos los No tiene valores, es
eventos de este decir, en HTML es
campo y en jstl, suficiente con tener
también anula el el atributo disabled,
envío de datos de no obstante en
dicho elemento XHTML debería
tener
un valor que suele
ser “true” o
“disabled”, no
obstante el mero
hecho de que se
escriba el atributo,
deshabilita el campo
name E atributo define el “campo1”, Es válido cualquier
nombre con el que se “campos25”, valor,
enviará el campo al “nombre”, … preferentemente sin
formulario, su valor espacios
será el nombre con el
que se identificará el
campo
tabindex Establece el orden en “1”, “2”, “3”, “4”, … Es válido cualquier
el que se van a entero
recorrer los campos
en una ventana a
través del tabulado,
cuanto menor sea el
numero indicado en
este atributo antes se
recorre (a excepción
de si el número es
negativo, en este
caso no se recorre
(también atributo
notab)
cols Establece el número “20”, “30”, … Se trata del ancho del
de columnas (ancho) textarea en
del area de texto caracteres.
rows Establece el número “5”, “10”, … Se trata del alto del
de filas (alto) del area textarea en filas
de texto
wrap Establece si se envían soft No se envían los
o no saltos de línea saltos de línea
cuando se envía al hard Si sé envían nuevas
servidor líneas
readonly Este atributo, No tiene valores, es
campo será de solo con tener el atributo
establece que el decir, en html, basta

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

lectura, es decir, no readonly, no

se podrán modificar. Se diferencia de “disabled” obstante
en que este
en XHTML
no anuladebería
ningúntener
evento
un sob
va
campo deshabilita la escritura en el campo

Ejemplo

Observar que las etiquetas están pegadas al texto mostrado, esto se debe a que en los elementos textarea, los es

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

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 definición de apariencia en HTML y XHTML, pudiendo separarse en uno o
más ficheros de forma que podemos separar el estilo utilizado de la codificación propia de la
ventana sin cargar de código la misma.

Principales características
• Los estilos pueden ser definidos tanto en la ventana entre las etiquetas style de
apertura y cierre de la cabecera, en cada elemento, a través 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 ningún error, simplemente no hace nada
• En la utilización de estilos, estos se aplican en cascada, es decir, prevalece siempre el

e st il o m á s c r c a n o al e le m e n t o d e l q u e ca m b ia m o s
a q u e ll os q u e d e f in im o s e n e l a tr ib u t o s ty le d e l e le m
l a a p a r ie n c ia, predominando
e n t o en s í .
• Es recomendable el uso de una hoja de estilos en un fichero separado, para una
mayor claridad de código.
• 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: tamaños de letra, decoración del
texto,
márgenes, etc. Esta hoja de estilos siempre se aplica a todas las páginas web,
por lo que cuando una página 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 mayoría de usuarios no utiliza esta
característica, en teoría es posible que los usuarios establezcan el tipo de
letra, color y tamaño de los textos y cualquier otra propiedad CSS de los
elementos de la página que muestra el navegador.
o
Las reglas del diseñador son las que indica la pagina y dentro de estas se
aplican en cascada (de más internas a más externes) siendo las más prioritarias

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
las definidas en el atributo style

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Definició n 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 extensión .css (externo).

Existen muchos selectores para la aplicación de estilos, todos ellos se pueden encontrar en:

http://www.w3schools.com/cssref/css_selectors.asp

No obstante los más utilizados son 3:

Selector Ejemplo Descripción
.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 definición 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 definición de estilos se realiza en un fichero externo de extensión css y se referencia o
carga a través de la etiqueta link perteneciente al head de una pagina html.

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

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Principales propiedades
El estándar de todos los estilos disponibles, se encuentra en:
http://www.w3schools.com/cssref/default.asp, no obstante, mencionaremos los estilos más
utilizados:

Propiedad Descripción valores

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

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Establece el ancho del borde

border-[bottom, left, [inferior, izquierdo, derecho medium, thin, thick, length,
right, top]-width o superior] initial, inherit
none, hidden, dotted,
Establece el estilo del borde dashed, solid, double,
border-[bottom, left, [inferior, izquierdo, derecho groove, ridge, inset,
right, top]-style o superior] outset, initial, inherit
Establece el ancho de la number, %, auto, initial,
border-image-width imagen del borde inherit
Establece la ruta de una
imagen none, image(url), initial,
border-image-source que va a ser utilizada como inherit
borde stretch, repeat, round,
border-image-repeat Indica si la imagen se va a initial, inherit
repetir, redondear o none, hidden, dotted,
estirar dashed, solid, double,
groove, ridge, inset,
border-style outset, initial, inherit
Establece el estilo de los
bordes (top, right, bottom, left) medium, thin, thick, length,
border-width Establece los anchos de los initial, inherit
cuatro bordes (top, right,
bottom, left)
Especifica la distancia con
respecto al inferior del
mismo
bottom elemento una vez posicionado auto, length, initial, inherit;
Especifica que lados de un
elemento no none, left, right,
clear permiten elementos both, initial, inherit
flotantes 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,

E s p e c i fi c a tinahbeler-itrow, none, initial,

display m o s t ra d o
có m o de b e se r
u n el em e n to H TM
L Especifica si una caja debe o none, left, right, initial,
no flotar y hacia donde debe
float realizarlo inherit
height Establece el alto de un elemento auto, length, initial, inherit
Especifica la distancia con
respecto a la izquierda del
mismo elemento una vez
left posicionado auto, length, initial, inherit
Establece lo que sucede si un
contenido supera los límites de
overflow

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
un elemento de tipo caja visible, hidden, scroll,
overflow-x (generalmente div) auto, initial, inherit
Establece lo que sucede si un visible, hidden, scroll,
contenido supera los límites auto, initial, inherit
de

2
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

un elemento de tipo caja

(generalmente div) de derecha
a izquierda
Establece lo que sucede si un
contenido supera los límites de
un elemento de tipo caja
(generalmente div) de arriba visible, hidden, scroll,
overflow-y abajo auto, initial, inherit
Establece la propiedad de
relleno de un elemento (top,
padding right, bottom, left) length, initial, inherit
Establece la propiedad de
padding-[bottom, left, relleno [inferior, izquierdo,
right, top] derecho, superior] length, initial, inherit
Especifica el tipo de
posicionamiento que tendrá un
elemento(static, relative, static, absolute, fixed,
position absolute o fixed) relative, initial, inherit
Especifica la distancia con
respecto a la derecha del
mismo
right elemento una vez posicionado auto, length, initial, inherit
Especifica la distancia con
respecto a arriba del mismo
top elemento una vez posicionado auto, length, initial, inherit
Especifica si un elemento es o visible, hidden, collapse,
visibility no visible initial, inherit
Especifica el ancho de un
width elemento auto, value, initial, inherit
baseline, length, sub, super,
top, text-top,
Especifica a alineación vertical middle, bottom, text-
vertical-align de un elemento bottom, initial, inherit
Especifica el orden de
profundidad de un elemento (a
mayor orden, más cercano o por
z- index encima delas
lospropiedades
de menor orden) auto, number, initial, inherit
Establece de
margen de un elemento (top,
margin right, bottom, left) length, auto, initial, inherit
Establece la propiedad del
margin-[bottom, left, margen [inferior, izquierdo,
right, top] derecho, superior] length, auto, initial, inherit
Establece la máxima [altura,
max-[height, width] anchura] de un elemento none, length, initial, inherit
Establece la mínima [altura,
min-[height, width] anchura] de un elemento none, length, initial, inherit
none, underline, overline,
Especifica la decoración añadida line-through,
text-decoration al texto initial, inherit
Establece las propiedades
font de fuente del texto

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Especifica la familia de la fuente

font-family del texto (Arial, Verdana, ...) font, initial, inherit
medium, xx-small, x-small,
small, large, x-large,
xx-large, smaller, larger,
font-size Especifica el tamaño de la length, initial, inherit
fuente normal, italic, oblique,
initial, inherit
font-style Especifica el estylo de la fuente normal, bold, bolder,
lighter, number,
Especifica el grosor de la

fuente
font-weight (negrita) initial, inherit
Especifica la dirección de
direction escritura del texto (defecto ltr) ltr, rtl, initial,
inherit Propiedad para indicar la
distancia entre el borde de
border-spacing celdas adyacentes length, initial, inherit
list-style-type list-style-
Establece las propiedades position list-style-image,
list-style para un elemento de tipo lista initial, inherit
Especifica una imagen para el
list-style-image marcador de una lista none, url, initial, inherit
Especifica si el marcador aparece
dentro o fuera del contenido de
la lista (separado o pegado al texto)
list-style-position cursor

Especifica el tipo de marcador de la lista

list-style-type

Especifica el tipo de cursor

(ratón) que se mostrará para un
elemento

3
 CURSO HTML, CSS, JAVASCRIPT y
JQUERY
i o, georgian,
n hebrew, hiragana,
s hiragana-iroha,
i katakana,
d katakana-iroha,
e lower- alpha,
, lower-greek,
lower- latin, lower-
o roman, none,
u square, upper-
t alpha, upper- latin,
s upper-roman
i alias,all-
d scroll,auto,cell,
e context-
, menu,col-
resize,copy,crosshair
i ,default
n ,e-resize,ew-
i resize,help,move,n
t - resize,ne-
i resize,nesw-
a resize,ns-
l resize,nw-
, resize,nwse-
resize,no-
i drop,none,not-
n allowed,pointer,pro
h gress,ro w-resize,s-
e resize,se-
r resize,sw-
i resize,text,URL,ver
t tical-
disc text,w-
, resize,wait,zoom
arm - in,zoom-out
eni
an,
circl
e,
cjk-
ide
ogr
aph
ic,
deci
mal
,
deci
mal
-
lea
din
g-
zer

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

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
.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 sería mod

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Javascript

Que es
JavaScript (abreviado comúnmente "JS") es un lenguaje de programación interpretado,
dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos,
imperativo, débilmente tipado y dinámico. (Wikipedia)

Se utiliza principalmente en el lado del cliente corriendo sobre el navegador, siendo esta
una de sus principales características, ya que sobre todo se utiliza para realizar un menor
número de llamadas al servidor.

Características
• Tipado dinámico
• Orientado a objetos
• Evaluación en tiempo de ejecución (incluye la función eval(), que evalúa cadenas
de texto como código)
• Prototipos (se pueden añadir funcionalidades nuevas a clases existentes)
• Funciones como constructores de objetos (los objetos se crean a través de funciones)

Dependiente del motor de ejecución en que se utilice (varias diferencias entre firefox
y explorer por ejemplo, sobre todo en la existencia o no de algunas funciones)
•

• Funciones de parámetros variables (una función javascript con 3 parámetros se

puede llamar con 2, el último simplemente será falso)
• Arrays y la definición literal de objetos
• Expresiones regulares
• Javascript ejecuta por línea, salvo que se ponga un ‘;’ aunque es mejor por este
carácter ‘;’ por claridad de código.
• Distingue entre mayúsculas y minúsculas

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Sintaxis y variables

Palabras reservadas
Palabra reservada Descripción Ejemplo
break Sirve para romper una ejecución, se switch(a){
utiliza en bucles o instrucciones switch case ‘bb’:
…..
break;
.
.
}
for(…….)(break;-
default
function Palabra reservada para la definición function miFuncion(){
de funciones javascript …
}
return Palabra reservada para devolver un function miFuncion(){
valor de una función creada …
return 1;
}
var Palabra reservada para la declaración de var numero = 1;

case v r i ab l s v ar p a l a b ra =
C Ca s o d e validación en una s w it c h ( a ){
estructura switch-case ‘palabra’; case ‘bb’:
…..
break;
.
.
}
delete Elimina la propiedad de un objeto delete myobj.h
if Sentencia condicional if(a == b){}
switch Instrucción para el uso de una switch(a){
estructura switch-case case ‘bb’:
…..
break;
.
.
}
void Palabra resevada que evalúa la void(0)
expresión dada y luego devuelve
undefined. try{
catch Palabra reservada para recoger una …
excepción en una instrucción try- } catch(e){
catch ….
}
do Palabra reservada para bucles do-while do{
}while(a == b)
in Palabra reservada para la iteración de ser
listas de propiedades
this Palabra reservada que se utilize para
representar al objeto actual que puede

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
for (variable in object) {...
}
function MiObjeto{ this.a;this.b;this.c;}

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

bien la ventana o un objeto creado, etc..

while Palabra reservada para bucles while do{
como bucles do-while }while(a == b)
while(a == b){}
const Palabra reservada para la declaración const PI = 3.1416;
de constantes, no obstante, no
funciona siempre de forma correcta
else Palabra reservada para la utilización de if(a == b){}else{}
la estructura if-else
instanceof Palabra reservada para comprobar si un a instanceof Boolean
objeto tiene un tipo determinado
throw Palabra reservada para la generación throw “Error 2”;
de excepciones throw 42;
throw true;

with Palabra reservada que extiende la

cadena de ámbito para una declaración.
continue Palabra reservada que continua/salta a prueba:
una etiqueta establecida. a++;
alert(“hola a”);
continue prueba;

finally Palabra reservada para la ejecución de try{

sentencias después de una estructura …
try- catch } catch(e){
….
} finally{
alert(“a”);
}
try Palabra reservada que ejecuta un código try{
que puede provocar alguna excepción o …
sobre la que se establecerá un bloque } catch(e){
finally ….
}
debugger Palabra reservada para invocar la debugger;

for funcionalidad de debug

Palabra reservada para bucles for for (variable in object) {...
}
for(var i = 0; i < 3; i++){}
new Palabra reservada para la instanciación var a = new Array();
de objetos, bien intrínsecos de javascript
o bien creados
typeof Palabra reservada para el operador typeof a;
que devuelve una cadena que indica a
que objeto pertenece una variable
dada

Además existen otras palabras que no deberían ser utilizadas ya que son funciones ya

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
existentes:

String Array Date Math Boolean

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Number Function isNaN parseInt parseFloat

eval

Operadores
Operador Descripción Ejemplo Tipo Operador
= Asignación z=k Asignación
+= Suma y asigna z+=k Asignación
-= Resta y asigna z-=k Asignación
*= Multiplica y asigna z*=k Asignación
/= Divide y asigna z/=k Asignación
%= Calcula módulo y asigna z%=k Asignación
<<= Desplaza a la izquierda y asigna z<<=k Asignación
>>= Desplaza a la derecha y asigna z>>=k Asignación
>>>= Desplaza a la derecha con ceros y asigna z>>>=k Asignación
&= AND de bits y asigna z&=k Asignación
^= OR de bits y asigna z^=k Asignación
|= XOR de bits y asigna z|=k Asignación
+ Suma dos operandos z+k Aritmético
- Resta dos operandos z-k Aritmético
- Niega un operando -z Aritmético
* Multiplica dos operandos z*k Aritmético
/ Divide dos operandos z/k Aritmético
% Calcula el resto de la división de dos z%k Aritmético
operandos
++ Suma 1 y asigna ++z Aritmético
-- Resta 1 y asigna --z Aritmético
== ¿Valor de z igual a valor de k? z==k Comparación
!= ¿Valor de z distinto de valor de k? z!=k Comparación
> ¿Valor de z mayor que valor de k? z>k Comparación
>= ¿Valor de z mayor o igual que valor de k? z>=k Comparación
< ¿Valor de z menor que valor de k? z<k Comparación
<= ¿Valor de z menor o igual que valor de k? z<=k Comparación

&||& Realiza z &||&kk Lógico

loapoepraecriaócnióOnRAeNxDcleuxsicvlua
siva
! Realiza operación NOT !z Lógico
& Operación AND a nivel de bits z&k De bits
| Operación OR a nivel de bit z|k De bits
^ Operación XOR a nivel de bit z ^k De bits
- Operación negación 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 z >>> n De bits
ceros
? Si la expresión de la izquierda es cierta a==z?a:z Ternario
(true) realiza lo indicado a continuación del
operador sino lo que se indica tras el

3
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
carácter “:”

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Objetos principales
Un objeto principal se construye como en java (var objeto = new Objeto()) con la
palabra reservada null.

Math

Atributos

Atributo Descripción
Math.E Constante de Euler o número “e” (se utiliza como base de los logaritmos
neperianos y tiene un valro aproximado de 2,718) Logaritmo neperiano de 2 (aproximadamente
Math.LN2 Logaritmo neperiano de 10 (aproximadamente 2, 302) Logaritmo en base 2 de “e” (aproximadamen
Raíz cuadrada
Math.LN10 Math.LOG2E de ½ (aproximadamente 0,707)
Math.LOG10E
Math.PI
Math.SQRT1_2 Math.SQRT2

Raíz cuadrada de 2 (aproximadamente 1,414)

Métodos
Método Descripción
Math.abs(n) Math.acos(n) Math.asin(n)
El número
Math.atan(n)
n sin signoMath.atan2(x,
(valor absoluto)
y)
El arco coseno de n, que debe estar entre 1 y -1 El arco seno de n, que debe estar
Math.ceil(n) Math.cos(n) Math.exp(n) Math.floor(n)
El arco tangente deMath.log(n)
n Math.max(n, m)
Math.min(n, m) El carco tangente de un punto determinado por las coordenadas cartesianas x e y
El redondeo de n al inmediato entero superior El coseno de n, donde n represent
El redondeo de n al inmediato entero inferior El logaritmo natural de n
El mayor de los dos valores que recibe como argumentos
El menor de los dos valores que recibe como argumentos

Math.pow(n, m) El número n elevado a la potencia m

Math.random() Un número 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 in
La raíz cuadrada de n.
Math.sin(n) La tangente de un ángulo de n grados
Math.sqrt(n)
Math.tan(n)

4
 CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Date
Al construir por defecto esta clase, se establece la fecha local por defecto. Observar,
que para utilizar los métodos de esta “clase” es necesario construir dicho objeto (distinto de
Math que digamos, son métodos y atributos estáticos)

Métodos
MétodoDescripción

getFullYear()Devuelve el año completo, con cuatro cifras setFullYear(yyyy)Establece el año completo, con cuatro cif
getYear()Devuelve el año en un formato dependiente del navegador setYear(yyyy)Establece el año en un formato d
setDate(dd)Establece el día del mes, de 1 a 31
getDay()Devuelve el día de la semana en número (el 0 para el domingo, el 6 para el sábado)
getHours()Devuelve la hora del día, de 0 a 23 setHours(hh)Establece la hora del día, de 0 a 23 getMinutes()Devuelve
getMilliseconds()Obtiene los milisegundos del segundo actual, de 0 a 999 setMilliseconds(lll)Establece los milisegun
getTime()Devuelve los milisegundos transcurridos desde el inicio de la era Unix. setTime(time)Establece los milisegu

NOTA

Existen más métodos para trabajar con la hora UTC (Universal Time Coordinated), pero esas se pueden ver en el e

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Matrices
Las matrices se declaran a través de la clase Array o inicializándolas 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 dinámicos.

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)
Observar que con la premisa del índice podríamos dar valor a un índice, dejando índices por el medio vacíos. Esto
También se permite utilizar un array como una especie de hashMap de Java (solo con cadenas). En este caso el ar

La longitud de una matriz se obtiene con su atributo length (este atributo lo tienen la mayoría
de los objetos y nos da la longitud, Array no es una excepción, observar además que no lleva
paréntesis lo que es similar a dicho atributo para arrays estáticos en java)

Métodos
Para utilizar los métodos de la clase Array, es necesario inicializar una variable con
dicho tipo

Método Descripción
concat(matriz) join() Une las dos matrices devolviendo una concatenación de ambas Une todos los elemento
Se utiliza para eliminar el último elemento de una matriz. Dicho elemento eliminado es
pop()

push(elem,…) Se emplea para añadir uno se

o más elementos a una matriz
reverse() Invierte el orden en el que encuentran almacenados los datos de
una matriz
shift() Realiza la misma funcionalidad que el método pop, eliminando en este caso el primer e
Permite añadir uno o más elementos al inicio del array, desplazando el resto de elemen
unshift(elem,…) Permite obtener una submatriz de longitud m - n, que tendrá como primer elemento el
slice(n, m) splice(inicio, Es una función que se según como se utilice, permite eliminar celdas de una matriz, ree
númCeldas, valor nuevo Es una función que ordena alfanuméricamente un array
1,…, valor nuevo n)
sort()

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Number
Es una clase para la representación numérica, no obstante no tiene una especial
relevancia, salvo que se quiera sobrecargar (prototype) para realizar funciones específicas

String

Es la clase que instancia por defecto si no asignamos o inicializamos una variable, no

obstante,
java. su tratamiento es muy similar a otros lenguajes de programación como puede ser

NOTA

En javascript, una cadena de texto se puede establecer entre comillas dobles (“cadena de texto”) o bien entre comil

Otros objetos y funciones

Objeto screen
Representa la pantalla del monitor y se emplea para determinar sus características

Propiedad Descripción
screen.width screen.height screen.availWidth
Anchura del monitor
screen.availHeight
Altura del monitor
screen.colorDepth Anchura del área disponible Altura del área disponible
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.

Métodos Descripción
window.moveTo(x, y) Establece la posición de la esquina superior izquierda de la ventana del navegado
Reescala la ventana del navegador para que ocupe el espacio indicado en pixeles
Establece la posición de la esquina superior izquierda de la ventana del navegado
window.resizeTo(x, y) window.moveBy(x,y)
Reescala la ventana del navegador para que ocupe el espacio

window.resizeBy(x,y)

(inredsicéacdaolaednepfoixremleas,recolantirveas)pecto al tamaño ya existen

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Existe un método que merece un apartado y extensión 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 más 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 píxeles, entre el borde superior de la nueva ventana y el
de la pantalla (para firefox screenY)
o left, distancia, en píxeles, 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 vínculos (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 creación del popup a una variable, podremos además utilizar el método
focus(), que establece el foco en la ventana indicada, close() que cierra la ventana hija

NOTA

Para cerrar un popup se puede utilizar self.close(), para desenfocar, self.blur(), (devolver el foco a la ventana padr
/campos del padre (ventana que crea el popup), desde un popup utilizar parent.[función,
elemento, …+ o bien self.opener.*función, elemento, …+

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

window.status

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Objeto navigator
Este objeto permite identificar diferentes datos acerca de la plataforma en la que se
ejecuta la página

Propiedades

Propiedad Descripción
navigator.appCodeName El nombre interno, en clave, del navegador (Mozilla, en la
mayoría de los casos)
navigator.appMinorVersion Número del parche o corrección aplicada al
navegador navigator.appName Nombre oficial del navegador (MSIE, Opera,
etc.) navigator.appVersion Número de versión
navigator.cookieEnabled Contiene un valor lógico que indica si el navegador cliente
admite (true) o no admite (false) cookies
navigator.cpuClass Tipo de procesador empleado en la máquina 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 codificación
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 fabricación
navigator.securityPolicy Tipo de encriptación de datos que soporta el
navegador navigator.systemLanguage Idioma del sistema operativo
navigator.userAgent Contiene el nombre y versión 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 compañía que ha fabricado el
navegador navigator.vendorSub Información adicional acerca del fabricante.

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Objeto location
Se utiliza principalmente para obtener los datos de la url actual o bien realizar
redirecciones. Si establecemos su propiedad href, redireccionaremos la página actual.

Propiedades

Propiedad Descripción
location.protocol location.hostname
Protocolo de location.port
comunicaciónlocation.pathname
El nombre del hostlocation.hash location.href location.search
El puerto por el que escucha el host La ruta donde está el fichero buscado El anclaje de un
La url completa
SE emplea para búsquedas de archivos. Identifica lo que aparece
destras del sigon ‘?’ en una URL

Intervalos en javascript
En javascript se pueden realizar dos operaciones en función del tiempo
setTimeout(“función”, millis) (retrasa la llamada a una función “funcion” una serie de
milisegundos “millis”) o setInterval(“función”, millis) (llama a una función “función” cada milis
milisegundos). Para eliminar un setInterval establecido es necesario asignar esta llamada a
una variable, para posteriormente aplicar a dicha variable la función 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 añadir nuevos métodos a un objeto en java.

Para ellos se utiliza la propiedad prototype con la siguiente sintaxis:

Objeto.prototype.nombreFuncion = función();

Posteriormente podremos llamar a un objeto “instanciado” con dicha clase como

variable.nombreFuncion();

Función escape()
Escapa un texto en html para evitar problemas de caracteres

Función eval(“cadena”)
Evalua o ejecuta la cadena como código javascript, por ejemplo: eval(“alert(‘mi mensaje’)”);

Mostrará al ejecutarse una ventana de dialogo con la cadena mi mensaje.

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Eventos
Existen multitud de eventos en javascript y no todos son habituales, mostramos a continuación
una lista con dichos eventos y cuando se disparan

EVENTO Descripción
onAbort Se cancela la carga de una imagen
onAfterPrint Inmediatamente después de que el objeto asociado se imprima
onAfterUpdate Después de una actualización
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
página OnBeforeUpdate Antes de producirse una actualización
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 sólo está disponible para Explorer. Cuando el
comportamiento de una marquesina es altérnate, 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 botón primario (normalmente el izquierdo)
el ratón en un objeto.
onContextMenu Se hace clic con el botón secundario (normalmente el derecho)
del ratón
onCopy Cuando se realiza una operación de copiado de la selección
al portapapeles
onCut Cuando se realiza una operación de cortado de la
selección onDblClick Se hace doble click con el botón primario del ratón
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
aSeñapduidlsoa eulnma atenceljaad(couradnedoeveelnfotoocso) está sobre el
objeto al que se le ha
onKeyPress Se pulsa y libera una tecla (cuando el foco está sobre el objeto al
que se le ha añadido el manejador de eventos)
onKeyUp Se libera una tecla pulsada (cuando el foco está sobre el objeto
al que se le ha añadido el manejador de eventos)
onLoad Se termina la carga de una página o de una
imagen onMouseDown Se pulsa uno de los botones del ratón
onMouseOut Se desplaza el puntero del ratón fuera del objeto que tiene
asociado el evento.
onMouseOver Se posiciona el puntero del ratón sobre el objeto que tiene
asociado el evento
onMouseUp Se libera un botón del ratón que estaba
pulsado onMove Se mueve la ventana
onPaste Cuando se pega el contenido del portapapeles

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY
onReset Se hace click en el botón de Reset de un formulario

4
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

onResize Se cambia el tamaño de la ventana

onSelect Se selecciona (resalta) un objeto de la página
onSubmit onUnload Se pulsa sobre el botón de Envío de un formulario
Se descarga la página actual, bien porque se solicita otra o porque se cierra el navegado

Cookies
Las coockies se establecen a través de la propiedad cookie del objeto document

Ejemplo:

document.cookie = escape(“nombre=Pedro”);

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Nodos (DOM)
Todos los objetos se consideran, genéricamente, 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 página web

Además los nodos, según su jerarquía 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 están 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, podríamos utilizar:

document.childNodes[0].childNodes[0].childNodes[0]

A continuación mostramos las propiedades y métodos de los nodos del W3C DOM

Propiedad o método Descripción - Uso

className Indica o establece el origen de clase css que afecta al nodo
referido
firstChild Se refiere al primer nodo hijo de aquél con el que
estemos trabajando
lastChild Se refiere al último nodo hijo de aquél con el que
estemos trabajando
nextSibling Se refiere al nodo hermano siguiente a aquél 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 aquél con el
que estamos trabajando

parentNode tSreabreafjiaenrdeoal nodo padre de aquél con el que estamos

previousSibling Se refiere al nodo hermano anterior a aquél con el
que estamos trabajando
tagName El nombre del tag de un nodo
appendChild() Añade un nodo hijo a aquél con el que estamos
trabajando cloneNode(clonarHijos) Copia un nodo (si clonarHijos es true, estos se clonan
también, si es false los hijos no se clonan)
createElement(“tag”) Crea un nodo de elemento para añadirlo, como hijo,
al
nodo con el que estamos trabajando
createTextNode(“texto”) Crea un nodo de texto para añadirlo, 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

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

hasChildNodes() Determina si un nodo tiene hijos

insertBefore(nodo) Inserta un nodo hijo en la matriz childNodes de aquel con el que estamos tra
Elimina un atributo de un nodo de elemento
removeAttribute(“atributo”) Elimina el hijo indicado en la matriz childNodes del nodo con el que estamos
removeChild(nodo) Sustituye el hijo indicado de la matriz childNodes del nodo con el que estam
Establece un atributo del nodo elemento con el que estamos trabajando y su
replaceChild(nodoRestaurar, nodoCambiar)
setAttribute(“atributo”, valor)

Operaciones con cadenas

En javascript existen varias funciones para las operaciones con cadenas, que se deber
reseñar:

• 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 carácter int hasta un carácter más del carácter end
•

substr(init, numCar):
init y tomando crea una
un numero subcadenaade
de Caracteres una de
partir cadena dada iniciando
ese índice en el carácter
(init) numCar.
• indexOf(“cadena”): devuelve el índice del primer carácter de la primera “cadena“
encontrada dentro de un elemento dado o -1 si no encuentra dicha cadena
• search(/regexp/): devuelve la posición inicial en la que se encuentra una
cadena coincidente con la expresión regular que se pasa como parámetro
• match(/regexp/): devuelve un array con todas las subcadenas que coincidan con
dicha expresión regular
• replace(/regexp/, sustituir): reemplaza el primer elemento coincidente con la
expresión regular por el indicado en sustituir. Si quisiéramos realizar un replace
all, añadir a la expresión regular tras la última barra el carácter g (Ejemplo:
/regexp/g)
• toUpperCase(): pone todo el texto a mayúsculas de un elemento dado

• toLowerCase(): pone todo el texto a minúsculas de un elemento dado.

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

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 interacción con la técnica AJAX a
páginas web. jQuery es la biblioteca de JavaScript más utilizada.[Wikipedia]

Toda la documentación de JQUERY (tanto el API, como las descargas) se encuentra en:
http://api.jquery.com/

Para utilizar jquery es necesario importar/incluir la librería jquery en nuestrá página HTML,
antes de que este sea utilizado.

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Selectores
Para utilizar jquery, es decir, para indicar que queremos utilizarlo, se utiliza el carácter
$ 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 información acerca de los mismos se encuentra en:
http://api.jquery.com/category/selectors/, no obstante aquí mencionaremos los más
utilizados:

Selector Descripción
$(“#idComponente”) Selecciona un/os componente/s a través de su id
$(“.estilo”) Selecciona un/os componente/s a través de uno de
los valores de su atributo class
$(“tag”) Selecciona un/os componente/s a través 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
esté seguido por‘valor’ o bien‘ comience
el carácter por el valor y
-‘
$( “*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’

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Funciones principales
Existen multitud de funciones para operar con jquery que nos facilitan muchas
operaciones tras obtener un objeto, aquí reseñamos algunas, no obstante este es un
pequeño subconjunto de las más utilizadas y existen muchas más:

Función Descripción
.attr(‘atributo’*,valor+)
.css(‘estilo’*,valor+)
.html(*‘cadena’| objeto+)
.val([valor]) Establece un valor al atributo value, si tiene
parámetro, en caso contrario devuelve el valor que contiene.
Elimina un objeto que se encuentra dentro de otro previo
.remove(“cadena selector”|objeto) Elimina un atributo
Elimina un estilo dado del atributo class
.removeAttr(atributo) Agrega un objeto o cadena que representa un nodo despues de un nodo
.removeClass(“estiloCss *estiloCss+”) Agrega un objeto o cadena que representa un nodo antes de un nodo da
.after(“cadena”|objeto) Agrega un objeto o cadena que representa un nodo como descendiente d
Agrega un estilo class al atributo class de un objeto seleccionado
.before(“cadena” | objeto) Elimina todos los espacios de la cadena dada
Busca dentro de los descendientes del elemento Recorre una lista
.append(“cadena” | objeto)

.addClass(‘estiloCss’)

$.trim(‘cadena’)
.find(“selector”)
.each(function(){});

Plugins
Existen varias librerías javascript que dependen de jquery para su funcionamiento y que ya
resuelven de un modo más o menos adaptable la resolución de algunos problemas:

jquery.ui.version.js (http://api.jqueryui.com/). Es una de las librerías más 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 más
habituales de una forma sencilla.

En ese otro enlace encontramos plugins para jquery para multitud de efectos y soluciones,
aunque hay muchísimos más, pero por reseñar la importancia y utilidad de los desarrollos
sobre jquery.

http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

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 tamaño de 26 caracteres (que será la longitud máxima) y no
podrá ser modificada. Los botones de números, borrado y separador de decimales ‘,’, serán
enlaces, así como el símbolo ‘=’, el resto de botones serán inputs de tipo botón y la
maquetación tiene que ser la aquí indicada.

Ejercicio HTML - CSS

Cambiar todos los botones a enlaces y utilizar la imagen raíz.png para que quede la
calculadora como la imagen que aquí se muestra. Además, cuando paso el ratón por encima
de un botón se debe mostrar un reborde amarillo que simula el mismo comportamiento que
un botón (input-button)

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

EJERCICIO JAVASCRIPT
Con la calculadora antes realizada y maquetada realizar las siguientes funcionalidades:

1) Que al pulsar cualquier botón de número se escriba en la pantalla

2) Que al pulsar el botón de ‘,’ si existe ya una coma no permita escribirla
3) Que permita realizar las operaciones +, -, x, /, % y raíz cuadrada como una
calculadora normal, es decir, escribo un número pulso una operación (+, -, x, /) y
escribo otro
número y al pulsar “=” me daría el resultado o bien pulso otra operación y se
acumula a la siguiente (sugerencia, utilizar almacenamientos temporales de cadena o
concatenaciones), el botón “C”, cancela la operación en curso y borra el resultado de
la pantalla, es decir, iniciamos de nuevo sin acumular.
4) Las operaciones raíz cuadrada y % se ejecutarán sobre una cantidad ya introducida,
es decir, tecleo un número, pulso la operación y me devuelve el resultado.
5) Añadir una fila más entre el display o campo de texto y el teclado, en la que se
incluya un botón con la siguiente operativa:
a. Inicialmente tendrá el texto “Habilitar pantalla”
b. Si se pulsa, se desactiva el teclado menos el botón ‘=’ y se habilita la pantalla
para escritura.
i. El botón 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 botón por el de “Habilitar pantalla”
ii. Esta pantalla solo admitirá los siguientes símbolos: dígitos, carácter “,”
(uno por cifra (los separadores entre cifras son +, -, * y /) no permite
escribir ni % ni raíz cuadrada. Al pulsar intro o el botón ‘=’ nos
devolverá el resultado
iii. En el momento en el que pulsamos intro o ‘=’ se validará que la
operación sea correcta, en caso de no serlo, se mostrará un
alert indicando que “La operación 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 botón. (El color cuando se hace
click es “E2E1D9”)

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

Creació n de popups y comunicació n entre ventanas

Para este ejercicio crearemos una ventana con una tabla con título “Histórico de operaciones”
y con tres columnas:

• La primera columna tendrá como título “Fecha - hora” y contendrá la fecha y la hora

en formato “dd/MM/yyyy - hh:mm:ss” de la operación realizada. Alineación izquierda

• La segunda columna tendrá como título “Operación” y contendrá las operaciones
realizadas (el desglose de la operación, por ejemplo: 33 + 24 - 5) hasta pulsar un igual
o una operación unitaria raíz o porcentaje. Alineación centrada
• La tercera columna tendrá como título “Resultado” y contendrá el resultado de dicha
operación indicada en la columna anterior (por ejemplo en la operación anterior
52). Alineación derecha

Esta tabla tendrá todas sus filas con distinto fondo según seas pares o impares

Además contendrá un botón “Realizar cálculo” dicho botón abrirá nuestra última ventana de
calculadora como un pop-up y nos permitirá añadir operaciones tras pulsar una operación
unitaria (raíz o porcentaje) o el botón ‘=’, para ello será necesario añadir a las funcionalidades
de estos botones la de acceder a la ventana padre y agregar un registro (Observar que lo más
sencillo es crear una función en la ventana padre, bueno, en su javascript, que reciba la
operación 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 más de un

5
CURSO HTML, CSS, JAVASCRIPT y
JQUERY

JQUERY Y USO DE PLUGINS

Para este último ejercicio en la ventana del histórico, agregamos un nuevo botón a la derecha
del botón “Realizar cálculo” con el literal “Enviar datos” que mostrará en la parte inferior de la
pantalla y que se encontrará deshabilitado si no existe ningún 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 electrónico (caja de texto de 40 caracteres)
• Validar (Checkbox)
• Fecha validar (datepicker)
• Combo “Perfil de cálculo” con los valores
o -- Seleccione --
o Personal
o Estudiante
o Profesional
• Una caja que agrupe tres radio botón “Tipo de cálculo”:
o Estimación
o Calculo
o Revisión
• Fecha de revisión (datepicker)
• Área de texto con la Descripción
• Tres botones Enviar - Limpiar - Cancelar en la parte inferior derecha

Inicialmente este formulario o panel tendrá todos los elementos deshabilitados y al pulsar el
botón “Enviar datos”, se habilitará todo a excepción de “Fecha validar”, “Tipo de cálculo”,
“Fecha de revisión”, “Descripción” y el botón Enviar.

Si seleccionamos o checkeamos el botón “Validar” se habilitará el campo “Fecha validar” que al

pulsar sobre el nos muestra un calendario para seleccionar la fecha de validación.

El combo “Perfil de cálculo” si se selecciona “Profesional” habilitará la caja “Tipo de cálculo”

del que habrá que seleccionar uno y también habilitará el área de texto “Descripción”

Si de la caja “Tipo de cálculo” seleccionamos Revisión, se habilitará la caja de texto “Fecha

revisión” que al pulsar sobre ella, nos muestra un calendario en el que seleccionaremos la
fecha en la que se debe realizar la revisión.

El botón Limpiar se habilitará en el momento en el que exista algún campo que tenga un valor

El botón Enviar, se habilitará en el momento en el que todos los campos deshabilitados

tengan valor, y realizará el envío de los datos introducidos al “Correo electrónico”, incluidos
los datos de la tabla con las operaciones.