TEMARIO JAVASCRIPT
¿QUÉ ES JAVASCRIPT?
JavaScript es un lenguaje de los denominados lenguajes de scripting. Los scripts (script se
traduce como guión, literalmente) son archivos de órdenes, programas por lo general
simples. Es por esto que no podemos definir JavaScript como un lenguaje de
programación en un sentido estricto, pero sin embargo sí nos permite crear páginas
dinámicas, con algunos efectos realmente interesantes y que mejoren considerablemente
su aspecto.
Tratándose de un lenguaje de script, los programas que realicemos, no necesitarán ser
compilado. Los lenguajes de scripting son lenguajes interpretados. Esto en la práctica
significa que cuando trabajemos con JavaScript escribiremos nuestro programa y
podremos ejecutarlo de forma directa, sin necesidad de hacer nada más.
trabajar con JavaSript es sencillo y rápido, los resultados pueden ser muy satisfactorios y
aunque el lenguaje tenga algunas limitaciones, permite al programador controlar lo que
ocurre en la página.
Si usted es usuario de Windows, ya dispone de todo lo que necesita para comenzar a
trabajar con JavaScript. Lo básico para comenzar es:
Un editor de textos. En un principio es válido el bloc de notas de Windows. Ahora bien,
existen editores más completos y que le facilitarán la tarea de escribir el código. Eso sí, no
olvide guardar el archivo con la extensión adecuada. (.htm o .js, según los casos).
Un navegador, que puede ser el que use habitualmente. (google Chrome, Firefox,
Microsoft edge, opera, maxton, brave, etc.)
Sería aconsejable que tuviera al menos algunas nociones básicas de HTML daremos por
hecho que es así y aunque es imprescindible incluir código HTML en los ejemplos, no nos
detendremos en explicarlo.
FORMAS DE INCLUIR JAVASCRIPT
Los scripts pueden integrarse de las siguientes maneras en nuestras páginas web:
Dentro del propio documento HTML:
Aunque podamos poner nuestro código JavaScript en cualquier parte del documento, es
recomendable que lo incluyamos al inicio, en la cabecera del documento y dentro de la
etiqueta <head>. En cualquiera de los casos deberá siempre comenzar por la etiqueta
<script> y acabar con </script> para identificarlo. Además deberá llevar el atributo type,
en el caso de JavaScript es siempre text/javascript.
En un archivo externo:
Escribiremos nuestro programa JavaScript en un archivo externo con la extensión .js y lo
enlazamos en el documento HTML por medio de la etiqueta <script>. En un mismo
documento HTML podemos enlazar todos los archivos que sean necesarios, especificando
cada uno de ellos dentro de su correspondiente etiqueta <script>. En este caso además
del atributo type deberá definirse el atributo scr indicando la URL correspondiente al
archivo externo de JavaScript a enlazar.
En los propios elementos de HTML:
Aunque sea posible, también es el más desaconsejado. Consiste en incluir instrucciones
JavaScript dentro del propio código HTML.
Versiones de JavaScript.
Versión Fecha de lanzamiento
1 1997-06-01
2 1998-06-01
3 1998-12-01
E4X 2004-06-01
5 2009-12-01Versión Fecha de lanzamiento
5.1 2011-06-01
6 2015-06-01
7 2016-06-14
8 2017-06-27
Indicar el lenguaje que estamos utilizando
La etiqueta <SCRIPT> </SCRIPT> tiene un atributo que sirve para indicar el
lenguaje que estamos utilizando.
Uso del atributo "type":
Cuando colocamos una etiqueta <SCRIPT> debemos usar el atributo "type" para
indicar que tipo de codificación de script estamos haciendo y el lenguaje utilizado.
<script type="text/javascript">
El atributo "type" es necesario para que valide correctamente tu documento en las
versiones más actuales del HTML.
¿QUÉ ES UN SCRIPT?
A estas alturas ya podemos quizás intuir muchas cosas sobre lo que son los
scripts. Hemos hablado de ellos e incluso escrito alguno. Se trata de programas
sencillos. Una de las peculiaridades que tienen es que se guardan en archivos de
tipo texto.
En el caso que nos ocupa de la programación web, podemos distinguir dos tipos:
aquellos que se interpretan del lado del servidor (como es el caso del PHP) y
aquellos que lo son del lado del cliente, como es JavaScript. Para identificar este
segundo tipo, los script se preceden de la etiqueta <script>. Sin embargo los
scripts no son exclusivos de los lenguajes para web, ni siquiera son
especialemente novedosos, ya en el entorno DOS existían los denominados
archivos por lotes o batch. Windows reconoce, además de JavaScript, otros
lenguajes de scripts.
LAS SENTENCIAS
Nos referimos con sentencias a cada una de las órdenes que un lenguaje es
capaz de entender y por supuesto, llevar a cabo. De los ejemplos anteriores ya
podemos ir apuntando algunas y a lo largo de esta publicación se irán estudiando
y detallando muchas más.
Cada sentencia tiene una sintaxis específica, esto es, la forma en que debemos
escribirla, si debe añadirse argumentos, etc.
Deducimos fácilmente que en realidad un script es una sucesión de sentencias,
colocadas en un orden lógico, de forma que al ser ejecutadas lleven a cabo la
acción especificada.
El cuadro de diálogo de alert ()
alert () es una declaración simple, llamada función, que muestra un cuadro de
diálogo que contiene un mensaje. Este mensaje se coloca entre comillas, entre los
paréntesis de la function alert ().
Sintaxis de Javascript
Instrucción
La sintaxis de Javascript no es complicada. Generalmente, las instrucciones
deben estar separadas por un punto y coma que se coloca al final de cada
instrucción:
Código: JavaScript
sentencia_1;
sentencia_2;
sentencia_3;
En realidad, el punto y coma no es necesario si la instrucción siguiente está en la
línea posterior como en nuestro ejemplo. Sin embargo, si escriben varias
instrucciones en una sola línea, como en el siguiente ejemplo, el punto y coma es
obligatorio. Si lo virtual punto
Código JavaScript
sentencia_1; sentencia_2
sentencia_3
ETIQUETA NOSCRIPT
Si nuestras páginas requieren JavaScript para su correcto funcionamiento, es aconsejable
incluir un mensaje que avise al usuario indicándole esta incidencia, por si llegara a
producirse. Es una forma de darle la opción de decidir si activa JavaScript para poder
disfrutar de todos los servicios de nuestra página al 100% . Igualmente le podemos
sugerir, caso de que tenga una versión anticuada del navegador, la posibilidad de
cambiarla por otra más moderna.
A tal fin disponemos en HTML de la etiqueta <noscript>, que nos permite hacer que
aparezca un aviso de lo que está ocurriendo.
<noscript>
<p>Bienvenido a Mi página, visitante </p>
<p>Requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado
intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
LAS PALABRAS RESERVADAS
Son palabras muy especiales en cualquier lenguaje. Su significado está previamente
establecido y la posición que ocupa dentro de una sentencia se determina por la sintaxis
de dicha sentencia.
Encontrará una lista de las palabras reservadas de JavaSript en la tabla siguiente:
Debemos tener en cuenta que no podemos usar una palabra reservada para nombrar a
una variable o una constante, ya que esto provocaría un error.
LA SINTAXIS DE JAVASCRIPT
Con sintaxis nos estamos refiriendo a cómo deberán ser escritas las distintas instrucciones
para que un lenguaje sea capaz de interpretarlas. Ésta está ya predefinida. En el caso de
las distintas sentencias, ya iremos viendo cada caso particular. Sin embargo, queremos
destacar lo siguiente:
La sintaxis de JavaScript es bastante similar a la de Java, ya que tienen orígenes comunes.
También se parece en algo a C.
A diferencia de otros lenguajes, JavaScript admite que al final de cada línea se omita el
punto y coma. En realidad sólo sería necesario en el caso de poner en la misma línea
varias sentencias. No es habitual, en otros lenguajes es imprescindible acabar cada
instrucción con punto y coma. Es recomendable habituarnos a poner el punto y coma al
final de la instrucción, a pesar de no ser necesario, ya que siempre será un buen hábito de
cara a aprender nuevos lenguajes.
Los bloques de instrucciones que van dentro de las estructuras de programación van
encerradas entre llaves, como veremos en su momento.
Debemos respetar las mayúsculas y minúsculas, ya que JavaScript distingue entre ambas.
Si a una variable le damos un nombre en minúsculas y nos equivocamos al utilizarlas
luego, tendremos un error.
LAS VARIABLES
En programación entendemos por variable un espacio que se reservará en memoria y que
será utilizado para guardar un dato. El valor de ese dato puede variar a lo largo de la
ejecución de nuestro programa, puede ser que necesitemos realizar con él distintas
operaciones, consultarlo, etc. Es similar al concepto matemático de variable, aunque si
bien algunas de las operaciones que podemos realizar con una variable de programación
serían matemáticamente inadmisibles. En contraposición, un valor que no cambia a lo
largo de la ejecución de nuestro programa, lo llamaremos constante. En JavaScript no hay
una manera especial de declararlas respecto a las variables, e igualmente se reserva
espacio para ellas.
Como decíamos, una variable es un espacio reservado para guardar un valor, y a ese
espacio le asignamos un nombre. Se trata de una cuestión práctica, pues siempre
resultará más fácil recordar el nombre precioVenta que la dirección de memoria 34D0 en
hexadecimal (y no digamos ya 0011010011010000 en binario). La cosa se complica
además si tenemos en cuenta que es frecuente que un mismo programa utilice cientos de
variables.
Nosotros mismos podemos elegir qué nombres dar a nuestras variables. Sin embargo, es
aconsejable que usemos nombres significativos, que nos hagan intuir con facilidad qué
datos guardamos en ella. Por ejemplo, será mucho más fácil
entender a primera vista qué contiene la variable iva8, que la variable llamada solamente
con la letra a. El nombre de una variable se puede llamar también identificador.
En cuanto a restricciones al nombre que elijamos debemos tener en cuenta que JavaScript
impone las siguientes:
Pueden contener tanto letras como números. Es decir caracteres alfanuméricos.
Pero siempre el primer carácter deberá ser una letra o un guión bajo.
No se admiten espacios en blanco ni otros símbolos como pueden ser: $ % + ( ) / -, etc. Sí,
como hemos dicho en el
punto anterior, se admite el guión bajo.
Se ha establecido el convencionalismo de utilizar minúsculas en los nombres de variables,
excepto en el caso de que se
componga de dos palabras, en cuyo caso la primera letra de la segunda palabra se suele
escribir en mayúsculas la primera
letra. Aunque esto no es estrictamente necesario cumplirlo.
No llevan tildes.
No podemos usar las palabras reservadas para nombrar una variable. (Ver tercer apartado
del tema 2)
Siguiendo estas normas, serían válidos los siguientes nombres de variables:
edad
_irpf
localidad34
codigoPostal
A continuación algunos nombres que no serían admitidos, pues no cumplen alguna o
varias de las normas expuestas arriba:
76 cliente
por%ciento
nombre edad
peso al cuadrado/altura
continue
LOS ARRAYS
Llamados con frecuencia también vectores, matrices o arreglos, los arrays son un tipo
especial de datos que podríamos describir como una colección de variables. Estas
variables pueden ser de cualquiera de los tipos vistos anteriormente e incluso
entremezclados entre sí.
Pero mejor será que lo veamos con un ejemplo. Supongamos que queremos guardar en
variables las asignaturas que se imparten en un centro. Podemos hacerlo según lo visto
hasta ahora, de la forma siguiente:
var asignatura1 = “Matemáticas”;
var asignatura2 = “Literatura”;
var asignatura3 = “Música”;
var asignatura4 = “Física”;
var asignatura5 = “Química”;
Pero sin duda nos resultará mucho más fácil e inteligible de la forma siguiente:
var asignaturas = [“Matemáticas”, “Literatura”, “Música”, “Física”, “Química”];
En este caso se trataría de un array. Como vemos los datos que guardamos en él son los
mismos, pero la forma es mucho más cómoda. Para hacer referencia a su contenido
utilizaremos un índice que indicará la posición del elemento al que queremos acceder,
teniendo en cuenta que el primer elemento tiene el número 0. Así por ejemplo,
asignaturas[0] será “Matemática”, asignaturas[1] será “Literatura”, etc.
Más adelante veremos que además este tipo de datos cuenta con varias sentencias y
operadores especiales. Igualmente veremos que tiene un objeto específico llamado, como
era de esperar, array.
INPUT Y PROMT
Hemos hablado de las variables, su tipo y cómo asignarles un valor. Vamos a hacer un
breve inciso para explicar otras dos maneras de hacer llegar a una variable su valor:
Input: Si usted conoce HTML sabrá que es la forma que tiene en los formularios de pedirle
al usuario que introduzca un valor al que se le puede asignar un nombre con NAME.
Cuando veamos el objeto formulario lo veremos en mayor detalle.
Prompt: Éste le utilizaremos en los siguientes ejercicios cuando necesitemos pedir un
valor al usuario, por eso consideramos imprescindible comentarlo ahora. Es muy sencillo
de usar y similar a alert, que ya conoce. La sintaxis es como sigue:
prompt(texto, valorpordefecto);
Donde texto es lo que usted quiera que aparezca en él, de forma literal. Valorpordefecto
es el valor que quiere que aparezca por defecto en el cuadro y que será en el caso de que
el usuario no lo modifique el que tome la variable. Además le aparecerán dos botones
para aceptar o cancelar.
Uso de prompt para pedir un valor al usuario de nuestro programa.
<html>
<head>
<title>Ejemplo prompt</title>
</head>
<body>
<script LANGUAGE=”JavaScript”>
prompt(“Un saludo”,”hola”);
</script>
</body>
</html>
Hará que le aparezca un cuadro más o menos como el siguiente:
Si además desea recoger lo que el usuario teclea y utilizarlo, deberá guardarlo en una
variable, como en el siguiente ejemplo:
<html>
<head>
<title>Ejemplo prompt</title>
</head>
<body>
<script LANGUAGE=”JavaScript”>
tuNombre=prompt(“Un saludo. ¿Cómo te llamas?”,””);//guardamos lo tecleado en tuNombre
alert(“hola “+tuNombre+”, encantado de conocerte”);
</script>
</body>
</html>
En este caso lo que el usuario teclee en la entrada quedará guardado en la variable
tuNombre. Más adelante podemos usar esa variable, por ejemplo para saludar. Si prueba
el código anterior y da un nombre (en nuestro caso hemos puesto “Luis”), el resultado
será como el que sigue:
OPERADORES: ASIGNACIÓN, INCREMENTO/DECREMENTO, LÓGICOS, ARITMÉTICOS, ETC
Una vez vistas las variables y los tipos de éstas, veremos las distintas operaciones que
podemos realizar con ellas. Normalmente cuando declaramos una variable lo hacemos
para más tarde acceder a su contenido y realizar algún tipo de cálculo con él. Los
operadores nos permiten unir identificadores y literales formando expresiones que son
evaluadas. JavaScript dispone de muchos operadores, vamos a hacer una clasificación de
los más importantes:
- Aritméticos:
Son muy sencillos y los habituales en los lenguajes de programación y en operaciones
normales. Quizás el menos habitual es el resto de la división entera, se trata de eso
literalmente. En el ejemplo puesto, si hacemos la división sin decimales, en el resto nos
aparecería 2, pues a ese 2 es al que se refiere el resultado.
Incremento o decremento:
Como vemos suma o resta una unidad al valor. Suele ser frecuente su uso en contadores
que deban incrementarse o
decrementarse en una unidad. Tienen una peculiaridad que vamos a explicar con un
ejemplo:
Comenzamos dando valor 1 a la variable a. La variable b toma el mismo valor de a, pero
incrementado en una unidad. Es decir, la variable b valdrá 2. La operación de incrementar
en uno se lleva a cabo antes que la operación de la asignación.
Veamos ahora otro ejemplo:
Al igual que antes la variable a vale 1. La variable b sin embargo, vale también 1. La razón
es que el incremento es posterior a la asignación. Es decir, a b se le asigna primero el valor
de a y posteriormente el valor de a se incrementa en una unidad.
De igual forma funciona el operador de decremento, según lo coloquemos antes o
después del valor.
- Asignación:
Además del que habitualmente tienen todos los lenguajes de asignación, es decir el igual
(a=7, por ejemplo), JavaScript permite combinarlo con otros operadores aritméticos de las
formas siguientes:
- Relacionales o de comparación:
Como vemos los operadores de igualdad y desigualdad estricta hacen una comparación de
tipos.
- Lógicos o Booleanos:
En el caso del operador Y vemos que se tienen que cumplir las dos condiciones que
unimos para que el resultado sea cierto. En el del operador O bastará que se cumpla una
de ellas (también pueden cumplirse las dos) para que sea cierto.
En los ejemplos puestos, el caso de (5 >2) && (5 <5) se evalúa la expresión, y sólo sería
cierto para los valores 3 y 4, como la comparación es con el número 5,obtenemos falso. En
el caso de (5 = 5) || (5 = 8) se obtiene cierto, porque al estar unidas con un O y cumplirse
la primera condición (5 = 5) es suficiente para resultar cierto.
- Otros operadores:
El menos unario: que vuelve negativo un valor. Por ejemplo -(4+5) dará como resultado –
9.
Concatenación de cadenas: se realiza con el símbolo de la suma. Por ejemplo “la casa” + “
verde” dará como resultado una cadena con la concatenación de ambas, es decir, “la casa
verde”.
Operador condicional: asigna un valor u otro en función de que se cumpla o no una
condición. Por ejemplo a =3 >2 ? 1 : [Link] asigna a la variable a el valor 1 dado que se
cumple la condición de que tres es mayor que dos.
Incluir ficheros externos de Javascript
Otra manera de incluir scripts en páginas web, implementada a partir de Javascript 1.1, es
incluir archivos externos donde se pueden colocar muchas funciones que se utilicen en la
página. Los ficheros suelen tener extensión .js y se incluyen de esta manera.
<SCRIPT type="text/javascript" src="archivo_externo.js">
//estoy incluyendo el fichero "archivo_externo.js"
</SCRIPT>
Dentro de las etiquetas <SCRIPT> se puede escribir cualquier texto y será ignorado por el
navegador, sin embargo, los navegadores que no entienden el atributo SRC tendrán a este
texto por instrucciones, por lo que es aconsejable poner un comentario Javascript antes
de cada línea con el objetivo de que no respondan con un error.
El archivo que incluimos (en este caso archivo_externo.js) debe contener tan solo
sentencias Javascript. No debemos incluir código HTML de ningún tipo, ni tan siquiera las
etiquetas </SCRIPT> y </SCRIPT>.
Vistos estos otros usos interesantes que existen en Javascript y que debemos conocer
para poder aprovechar las posibilidades de la tecnología, debemos haber aprendido todo
lo esencial para empezar a hacer cosas más importantes.
