JS-Javascript
Añadir funcionalidad (inteligencia) a nuestras páginas, que sean capaces de hacer cosas. El código se ejecuta en el
navegador de forma interpretada, puede ser susceptible de ataques.
Cómo incluir javascript en HTML:
a. Fichero externo:
<script type="text/javascript" src="-------.js"></script>
b. Incrustado en el html:
<script type="text/javascript">---- </script>
c. Dentro de un atributo de evento:
< ------ <onevento>= "-----------------" ----------- > -------------- </------>
■ Declaración especial del evento de carga en nuestros Javascript:
<body onload=”main()” -----------> ------------
Sintaxis Básica Javascript:
/* Comentarios en JS
varias líneas */
// Comentario hasta final de línea
<instruccionesGlobales>;
function nombreFn()
{
<instrucciones>;
[return <valor>;]
}
Variables:
Una variable sirve para almacenar en memoria un valor con nombre, de forma que se pueda utilizar en múltiples sitios
llamándolo por el nombre asignado. Las variables siempre tienen que pasar por tres fases: declaración, inicialización y
uso:
❏ Declaración: Es el momento en que se reserva espacio en memoria para poder almacenar. Existe una
instrucción para declarar las variables. Dependiendo de dónde y cómo se declare una variable su
ámbito será local o global.
❏ Inicialización: Es el momento en que se guarda un valor en el espacio de memoria reservado. Esta
instrucción se llama asignación y opcionalmente puede realizarse junto a la declaración.
❏ Uso: Es cuando utilizamos el valor almacenado en la variable. Normalmente en expresiones, se
reemplaza la variable por su valor.
Instrucciones:
Existen tres tipos fundamentales de instrucciones que pueden combinarse dentro de nuestros script:
1. Secuenciales: se ejecutan siguiendo el orden en el que aparecen, terminan en punto y coma, cuando
termina de ejecutarse una instrucción se salta a la siguiente y así hasta terminar el script. Entre las
instrucciones secuenciales encontramos: la declaración, la asignación y la invocación de funciones.
2. Condicionales: rompen la secuencia anterior permitiendo que la ejecución de un conjunto de
instrucciones dependa de una condición. Entre las instrucciones condicionales encontramos: el SI.
3. Repetitivas (bucles): permiten repetir un conjunto de instrucciones en función de una condición. .
Entre las instrucciones repetitivas encontramos: el MIENTRAS.
A) Instrucción Declaración:
1. La sintaxis para declarar variables es (deberían declararse al inicio de cada bloque: función o javascript):
var <nombreVariable1> [,…,<nombreVariableN>];
[var <nombreVariableM> [,…,<nombreVariableZ>];]
Las variables pueden declararse e inicializarse simultáneamente añadiendo al nombre de la variable:
... <nombreVariable>= <valor> [,…];
Dependiendo de dónde y cómo se declare una variable su ámbito será local o global:
➔ local: solo existen dentro de la función donde se declaran.
➔ global: existen en todo el javascript.
B) Instrucción Asignación:
1. La sintaxis para asignar una variable es:
<var>=<expresión>;
2. Funcionamiento de la asignación: primero se evalúa la expresión de la derecha, se reemplaza la expresión por
el valor resultante y se almacena el valor obtenido en la variable indicada en la parte izquierda.
3. En Javascript una variable será del tipo del valor almacenado, el tipo establece el tipo de operaciones y valores
con los que podemos trabajar. Los tipos de variable básicos:
a. numérica -> números en formato americano. Ej) 3.1416
b. cadena -> texto literal encerrado entre “” o ‘’. Ej) “soy una cadena”
c. boolean -> solo dos valores: true o false (false se transforma en 0, true no 0)
d. elemento -> tipo especial que permitirá almacenar un objeto
(elemento HTML...)
El tipo de una variable puede cambiar si se almacena otro valor de otro tipo.
2. Las variables pueden tomar además los siguientes valores especiales:
a. NaN (Not At Number): valor especial cuando intentamos transformar una variable a número y no es
posible.
b. null (Nulo): valor que representa que una variable de tipo elemento no almacena en ese momento
ningún elemento.
3. Expresión: una expresión estará compuesta por una mezcla de variables, operaciones y funciones, cuya
evaluación dará como resultado un valor. Durante la evaluación de una expresión las variables y funciones se
reemplazan por su valor, mientras que las operaciones se irán aplicando por orden de prioridad. Además, una
expresión a su vez puede contener otras expresiones.
4. Operaciones:
Aritméticas Relacionales Lógicas
(números) (números y cadenas dan como resultado un (booleanos)
booleano)
- (resta y negativo) > (mayor que) ! (no)
+ (suma) < (menor que) && (y)
* (multiplicación) >= (mayor o igual que) || (o)
/ (división) <= (menor o igual que)
% (módulo) == (igual)
!= (distinto)
Concatenación + Prioridad () Punto .
(permite unir cadenas) (Permite agrupar operaciones y fijar la (permite acceder a
(concatenar cadenas con prioridad) las propiedades de
otras variables – una variable)
conversión automática de
las otras variables a cadena
y une)
<cadena1> + <cadena2> <exp> ( <exp> <operación> <exp> ) <var>.<propiedad>
5. Conversión de tipos, la mayoría de las conversiones se realizan de forma automática durante la evaluación de
las expresiones, si queremos realizar nosotros las conversiones disponemos de una serie de funciones:
a. isNaN(<variable>): Devuelve true si el contenido de una variable no es un número. Normalmente se
utiliza con la negación para preguntar si algo es un número: !isNaN(<variable>)
b. parseInt(<variable>): Devuelve la parte entera, intenta pasar a número el contenido de la variable
posición a posición hasta que encuentre algo distinto de un número o finalice la variable, momento en
que retorna el número obtenido hasta ese momento o NaN si no se obtuvo ningún número (primer
carácter distinto de número)
c. parseFloat(<variable>): Devuelve el número decimal, intenta pasar a decimal el contenido de la
variable posición a posición hasta que encuentre algo distinto de un número o el carácter punto o bien
finalice la variable, momento en que retorna el decimal obtenido hasta ese momento o si no NaN
d. .toString(): Devuelve el valor de cualquier variable en formato cadena. Se utiliza con el operador
punto: <var>.toString()sas
C) Invocación de funciones:
1. Sintaxis (el paréntesis no se puede separar del nombre de la función):
nombrefuncion([<dato1>[, ... , <datoN>]])
2. Permite ejecutar una función previamente implementada. Las funciones pueden ser creadas por nosotros o
predefinidas (parte del propio lenguaje de Javascript).
3. Para que una función se ejecute solo debemos escribir, en el punto donde queramos que se ejecute, el nombre
de la función junto a los datos que le facilitamos a la función entre paréntesis (argumentos).
4. Puede que una función no reciba datos, en cuyo caso se pondrán los paréntesis vacíos (ojo, siempre hay que
escribir los paréntesis): nombrefuncion()
5. La función una vez ejecutada se reemplazará por el valor devuelto. Es posible que una función no devuelva
ningún valor (en cuyo caso al finalizar la función se reemplaza la llamada por nada).
6. Funciones Predefinidas:
a. alert(<cadena>): Genera un menú emergente de alerta con el texto de la cadena.
b. prompt(<cadena>): Genera un menú emergente con el texto de la cadena, además el menú incluye
una caja de texto que puede completar el usuario. La función devuelve el texto escrito por el usuario
en formato cadena o null si pulsa cancelar o cierra la ventana.
c. confirm(<cadena>): Genera un menú emergente con el texto de la cadena junto a la opción aceptar o
cancelar. Devuelve un booleano: true si pulsa aceptar y false si pulsa cancelar o cierra la ventana.
d. <variable>.length: propiedad que permite obtener el número de elementos que contiene la variable
(normalmente longitud de una cadena: <cadena>.length).
e. [Link](): Genera y devuelve un número decimal entre cero (incluido) y uno (no incluido).
Fórmula para generar un número entero aleatorio en un rango:
aleatorio=parseInt([Link]()*Combinaciones)+Desplazamiento)
ej) número entre -50 y 50 => combinaciones=mayor-menor+1=50-(-50)+1=101
desplazamiento=menor=-50
aleatorio=parseInt([Link]()*101)+(-50))
f. setTimeout(nombreFn,milisegundos): Ejecutará la función automáticamente después del número de
milisegundos indicados. Devuelve el identificador del evento. El nombre de la función sin paréntesis..
g. setInterval(nombreFn,millisegundos): Ejecutará la función periódicamente después del número de
milisegundos indicados. Devuelve el identificador del evento. El nombre de la función sin paréntesis.
h. clearInterval(identificadorEvento): Cancela una ejecución previamente programada.
D) Instrucción Condicional:
1. Sintaxis de la instrucción SI:
if(<condición>){
//Bloque de instrucciones que se ejecutarán si es true
}
2. Condición: es una expresión que se evaluará y dará como resultado un booleano: true o false
3. Funcionamiento, se evaluará la condición y sólo si la condición es verdadera se ejecutarán las instrucciones
que hay dentro de las llaves. En el caso de que la condición sea falsa se saltará al final de la instrucción SI.
Cuando termine la ejecución de la instrucción SI continuará la ejecución normal del script con las instrucciones
que vengan a continuación.
4. Anidamiento: dentro de un bloque de instrucciones puede colocarse cualquier tipo de instrucción: secuenciales,
condicionales o repetitivas, eso sí, deben quedar completamente incluidas (como en html no puede abrirse una
instrucción dentro de otra y cerrarla fuera). De esta forma dentro de una instrucción SI pueden colocarse a su
vez otras instrucciones SI para la toma de decisiones.
5. Sintaxis de la instrucción SI con SINO:
if(<condición>){
//Bloque de instrucciones que se ejecutarán si es true
}
else{
//Bloque de instrucciones que se ejecutarán si es false
}
Funcionamiento, es similar, se evaluará la condición y sólo si la condición es verdadera se ejecutarán las
instrucciones que hay dentro del primer bloque. En el caso de que la condición sea falsa se ejecutarán las
instrucciones del segundo bloque. Es decir, o se ejecuta un bloque o se ejecuta el otro, NUNCA se ejecutarán
los dos. Cuando termine la ejecución de la instrucción SI, tanto si hemos ejecutado el primer bloque como si
hemos ejecutado el segundo, se continuará la ejecución normal del script con las instrucciones que vengan a
continuación de la instrucción SI.
E) Instrucción Repetitiva (bucle):
1. Sintaxis de la instrucción MIENTRAS:
while(<condición>){
//Bloque de instrucciones que se ejecutarán si es true
}
2. Condición: es una expresión que se evaluará y dará como resultado un booleano: true o false
3. Funcionamiento: Se evaluará la condición:
a. Si la condición es verdadera se ejecutará el bloque de instrucciones que hay dentro de las llaves, al
finalizar la ejecución del bloque se volverá al inicio para volver a evaluar la condición.
b. En el caso de que la condición sea falsa, se saltará al final de la instrucción WHILE y se terminará.
Cuando termine la ejecución de la instrucción WHILE continuará la ejecución normal del script con las
instrucciones que vengan a continuación.
4. Anidamiento: dentro de un bloque de instrucciones puede colocarse cualquier tipo de instrucción.
5. Garantizar bucles finitos: siempre dentro del bloque de instrucciones se debe garantizar que en algún momento
la condición sea falsa, para que finalice la ejecución de la instrucción y no se genere un bucle infinito.
Declaración funciones propias:
6. Sintaxis para la declaración de nuestras propias funciones (se pueden crear tantas como se necesiten):
function nombreFn([<par1>[,..., <parN>]]) {
// Bloque de instrucciones Fn
[return <expresion>;]
}
7. Sirven para crear nuestras propias funcionalidades. La función no se ejecutará hasta que no se la invoque en
alguna instrucción, la declaración simplemente crea la funcionalidad y es previa a la invocación.
8. Una función puede recibir datos, estos se almacenarán en los parámetros, los valores se guardarán en el mismo
orden que se coloquen en la invocación. Si una función no recibe datos, los paréntesis quedarán vacíos.
9. Las variables que declaremos dentro de la función y los parámetros, sólo existirán dentro de la función y
mientras esta se ejecuta, se le llama locales.
10. Si la función devuelve un valor, finalizará con la instrucción return y el valor a devolver (reemplazará a la fn).
Árbol DOM
Es una estructura RAM, es el reflejo de lo que vemos dentro de la pestaña o ventana del navegador, es decir, cambios en
la página supondrán cambios en la estructura y viceversa (lo que vemos es el árbol DOM). El árbol DOM se genera a
partir de la página web, no existirá hasta que se haya realizado una lectura completa de la página (se lea todo su código
fuente completo), cuando el navegador lea todo el código generará el árbol DOM y actualizará la página y el árbol para
que haya correspondencia entre ambos. Por tanto, si manipulamos el árbol DOM podremos interaccionar con nuestra
página sin necesidad de actualizar (leer, modificar, borrar...).
A) Recuperar elementos HTML del árbol DOM:
1. Para recuperar un elemento HTML debemos añadirle previamente identificador:
... <etiqueta id=”ident” ... > ... </etiqueta> ...
2. La función para recuperar elementos HTML es:
[Link]("ident")
Devuelve ese elemento HTML y su contenido: atributos, texto y otras etiquetas.
3. Los elementos HTML pueden almacenarse en variables de Javascript:
var=[Link]("ident");
B) Manipular elementos HTML del árbol DOM:
Un elemento HTML puede contener: texto y otros elementos HTML. Cuando queramos añadir nuevo contenido
HTML tendremos que crear por separado el texto y los elemento HTML:
1. Crear un elemento HTML:
[Link]("nombEtiq")
Los elementos HTML pueden almacenarse en variables de Javascript:
var=[Link]("nombEtiq")
2. Crear un elemento de texto:
[Link]("texto")
Los elementos de texto pueden almacenarse en variables de Javascript:
var=[Link]("texto")
3. Añadir un elemento a otro elemento ya existente:
[Link](elemento)
El elemento se añade con todo su contenido como hijo el elemento almacenado en la variable. Podemos añadir
tantos elementos como queramos y necesitemos, se irán añadiendo como hijos en el mismo orden que los
insertamos.
Importante: Si un elemento es añadido al árbol DOM que representa a nuestra página, este pasa a formar
parte de la página y por tanto se volverá visible si tiene representación visual. Por contra, un elemento que
creemos no aparecerá en la página hasta que no lo añadamos al árbol DOM.
4. Eliminar un elemento HTML (y todo su contenido):
[Link](var)
Importante: Cuando eliminamos un elemento del árbol DOM, eliminamos el elemento y todo su contenido, si
dentro hubiera otros elementos tb serán eliminados. Es decir, ese elemento y todo su contenido desaparecerá de
la página.
C) Manipular contenido en elementos HTML con .innerHTML
1. Permite acceder fácilmente al código HTML contenido en un elemento y modificarlo:
[Link]
2. innerHTML trabaja en modo texto, el valor devuelto será texto y el valor asignado debe ser texto. Por tanto, la
asignación será:
[Link]=”texto”
El texto asignado se convertirá de manera automática a su equivalente en HTML (parser).
D) Manipular atributos de elementos HTML del árbol DOM:
1. Para acceder a los atributos de una etiqueta HTML, es tan sencillo como usar el operador punto. Las
propiedades HTML podrán accederse usando su nombre, menos class que se accederá usando className:
[Link]
Si el atributo no existe o no esta inicializado se devolverá null o “”
2. Para escribir el valor de un atributo se usará la asignación y el operador punto:
[Link]=valor
Si el atributo no existe se crea y si existe se sobrescribe su valor.
3. Para borrar un atributo disponemos de una función:
[Link](“nombAtributo”)
En este caso, nombAtributo es el nombre del atributo para todos los atributos HTML (no className).
E) Manipular propiedades CSS de elementos HTML del árbol DOM:
1. Para acceder a los atributos CSS de una etiqueta HTML, es tan sencillo como usar el operador punto y el
atributo style. Las propiedades CSS podrán accederse usando su nombre sustituyendo los guiones de la
propiedad CSS por la siguiente letra en mayúscula:
[Link]
2. Para escribir el valor de un atributo CSS se usará la asignación, el operador punto y el atributo style:
[Link]=”valor”
El valor se escribirá en formato cadena.
3. Las propiedades CSS de un elemento que estén definidas en un fichero externo no pueden manipularse por este
método. Como alternativa:
a. Podemos sobreescribir las propiedades, ya que el atributo style tiene preferencia sobre propiedades
definidas en ficheros externos (primando las nuestras sobre las ya existentes).
b. Podemos tener estilos previamente creados en CSS y utilizar Javascript para modificar el selector a
cargar (por ejemplo, tener varias clases y cambiar la clase a la que pertenece un elemento).
F) Eventos del árbol DOM
Un evento es cualquier interacción del usuario con la página web que puede ser capturada y dar respuesta a la
misma.
1. Los principales eventos son:
● onchange Cuando un elemento cambia
● onclick El usuario hace click sobre un elemento
● ondblclick El usuario hace doble click sobre un elemento
● onmouseover El puntero del ratón pasa por encima de un elemento
● onmouseout El puntero del ratón sale de un elemento
● onkeydown Pulsar una tecla con el elemento seleccionado (bajada de tecla)
● onkeyup Soltar una tecla pulsada con el elemento seleccionado (subida de tecla)
● onfocus Cuando un elemento gana el foco. Está seleccionado y por tanto recibe los eventos
● onload Termina de cargar y generar el árbol DOM (elemento body)
2. Para dar respuesta a un evento primero hay que definir una función que se ejecute cuando ocurra el evento.
Para asociar la función con el evento, se utiliza el operador punto y el atributo del evento a asociar, al cual se le
asigna el nombre de la función SIN PARÉNTESIS, sólo el nombre (si no la ejecuta y asocia el resultado):
[Link]=nombrFnSinParentesis