Sintaxis del lenguaje JavaScript

ndice 1 | Sintaxis de lenguaje 3

1.1 | Variables 4
1.2 | Tipos de datos 6
Numricos 6
Cadenas de texto 6
Arrays 7
Booleanos 8
1.3 | Operadores 9
Asignacin 9
Incremento y decremento 9
Lgicos 10
Negacin 10
AND 11
OR 11
Matemticos 11
Relacionales 11
1.4 | Objetos del navegador 12
El Objeto window 13
El Objeto location 14
El Objeto screen 14
El Objeto document - La pgina en s 15
El Objeto history 17
El Objeto navigator 17
 Sintaxis del lenguaje JavaScript | TELEFNICA // 3

1. Sintaxis de lenguaje
La sintaxis de un lenguaje de programacin es el conjunto de reglas y
parmetros que deben seguirse al redactar el cdigo de los programas para
que pasen a ser considerados como correctos y aceptables para ese lenguaje.

No importan las nuevas lneas y los espacios en blanco al igual

que sucede en HTML ya que el propio intrprete del lenguaje los
ignora. //Ejemplo de comentario de una solo lnea:
Es case sensitive: Distingue entre las maysculas y minsculas // a continuacin se muestra un mensaje
alert(mensaje de prueba);
En contra de otros lenguajes de programacin no se definen el //Los comentarios de una sola lnea se definen
tipo de las variables (var). En JavaScript nunca sabemos el tipo aadiendo dos barras oblicuas(//) al principio de
de datos que va a contener una variable por lo que una misma la lnea.
variable puede almacenar diferentes tipos de datos. //Ejemplo de comentario de varias lneas:
Cada sentencia en JavaScript acaba con el carcter; (punto /* Los comentarios de varias lneas son muy tiles
y coma) Aunque no en necesario ya que el intrprete lee cuando se necesita incluir bastante informacin
cada sentencia aunque no exista este carcter. Por convenio en los comentarios*/
deberamos incluirlo. alert(mensaje de prueba);
//Los comentarios multilnea se definen encerrando
Existe la opcin de incluir comentarios para aadir informacin el texto del comentario entre los smbolos /* y
en el cdigo fuente del programa. Estos comentarios suelen */.
servir para dar informacin al propietario del cdigo u otro
desarrollador sobre el contenido del bloque de cdigo en
JavaScript. Los comentarios pueden ser de una sola lnea o de
varias lneas (en bloque)
 Sintaxis del lenguaje JavaScript | TELEFNICA // 4

1.1 | Variables
Las variables de los lenguajes de desarrollo siguen una lgica El cdigo anterior es intil ya que slo sirve para el caso en el que
similar a las variables utilizadas en otras ciencias como las fsicas el primer nmero de la suma sea igual a 4 y el segundo nmero sea
o las matemticas. Una variable es un contenedor que se usa para igual a 2. En otras opciones, el cdigo obtiene un res incorrecto.
almacenar y hacer referencia a otro valor.
Por otro lado, el cdigo se puede reescribir de la siguiente forma
De la misma manera que si en Fsica no existieran las variables no se usando variables para almacenar y referenciarse a cada nmero:
podran definir las frmulas, en los lenguajes de programacin no se
podran redactar cdigos tiles sin las variables. Los elementos num_1 y num_2 son variables que retienen los
valores que utiliza el cdigo. El res se halla siempre en funcin del
Sin las variables sera imposible escribir y crear programas valor retenido por las variables, por lo cual, este cdigo funciona de
genricos, es decir, cdigos que funcionan de la misma manera manera correcta para cualquier par de nmeros que indiquemos. Si
independientemente de los valores concretos usados. se vara el valor de las variables num_1 y num_2, el cdigo sigue
trabajando correctamente.
Si no se usaran variables, un cdigo que suma dos nmeros podra
redactarse como:
num_1 = 4
num_2 = 2
res = 4 + 2 res = num_1 + num_2
 Sintaxis del lenguaje JavaScript | TELEFNICA // 5

Las variables en JavaScript se utilizan mediante la palabra Podemos utilizar una variable no declarada en cualquier sentencia
reservada var. de cdigo. Esta es una de las habilidades ms sorprendentes de
JavaScript y que muchos otros lenguajes de programacin no
tienen. JavaScript crear una variable global para esta variable no
var num_1 = 4; declarada y la asigna el valor que le corresponda por el cdigo.
var num_2 = 2;
var res = num_1 + num_2;
num_1 = 4;
num_2 = 2;
La palabra var solamente se indica al definir por primera vez la
variable, y a eso lo llamamos declarar una variable. Cuando se res = num_1 + num_2;
declara una variable no hace falta declarar tambin el tipo de dato
que va a almacenar esa variable. De cualquier otra forma, es recomendable declarar todas las
variables que se vayan a usar.
Si en el momento de declarar una variable se le otorga tambin
un valor, se dice que la variable ha sido inicializada. En JavaScript El nombre de una variable tambin se le conoce como identificador
no es obligatorio inicializar las variables, por lo que pueden ser y debe cumplir la siguiente normativa:
inicializadas posteriormente.
El identificador nicamente puede estar formado por nmeros,
letras, y los smbolos $ y _ a lo sumo.
var num_1; El primer carcter del identificador no debe ser un nmero.
var num_2;
num_1 = 4;
num_2 = 2;
var res = num_1 + num_2;
 Sintaxis del lenguaje JavaScript | TELEFNICA // 6

1.2 | Tipos de datos

Ya sabemos que todas las variables en JavaScript se crean a travs de la palabra reservada var
pero dependiendo de los valores que almacenen pueden ser de un tipo u otro. En otras palabras, el
valor que almacena la variable otorga tipo a esa misma variable.

NUMRICOS
var sms = Welcome to our city!;
Se usan para contener valores numricos enteros (llamados integer) var nomProducto = Escoba;
o decimales (llamados float). var letter = e;
De esta manera, el valor que se asigna a la variable se realiza indicando
directamente el nmero entero o decimal. Los nmeros decimales
A veces el texto que contienen estas variables no es tan fcil. Si
utilizan el carcter . en vez de , para realizar la separacin entre la
el propio texto encerrado entre comillas dobles o simples tiene
parte entera y la parte decimal:
comillas dobles o simples que deben aparecer como parte del valor
se hara as:
var entero = 99; // variable tipo entero
var decimal = 9384.23; // variable tipo decimal
/* Comillas simples dentro de comillas dobles*/
var text1 = Una frase con comillas simples dentro;
CADENAS DE TEXTO /* Comillas dobles dentro de comillas simples*/
var text2 = Una frase con comillas dobles dentro;
Se usan para contener caracteres, palabras y/o frases de texto. Para
darle el valor a la variable, se encierran los valores entre comillas
dobles o simples, que delimitan el inicio y el final de la frase, caracteres
o palabras:
 Sintaxis del lenguaje JavaScript | TELEFNICA // 7

A veces, hacen falta caracteres especiales para definir un cambio de ARRAYS

lnea dentro del texto de nuestra variable, o incluso, quizs queramos
meter comillas simples y dobles a la vez dentro de nuestra sentencia. Tambin llamados vectores o matrices. Sin embargo, la denominacin
array es la ms utilizada y es un trmino comnmente aceptado en
el entorno de desarrollo.
Si se quiere incluir... Se debe incluir...
Una nueva lnea \n Un array es una coleccin de variables, sin importar los tipos de los
Un tabulador \t que sean cada una. Los arrays sirven para guardar colecciones de
Una comilla simple \ valores, de manera que servira para agrupar diferentes variables.
Por ejemplo tenemos esta sucesin de variables con los das de la
Una comilla doble \
semana:
Una barra inclinada \\

var dia1 = Lunes;

De esta manera, podemos rehacer el ejemplo anterior: var dia2 = Martes;
...
var text1 = Una frase con \comillas simples\ dentro; var dia7 = Domingo;
var text2 = Una frase con \comillas dobles\ dentro;
El cdigo anterior es correcto aparte de poco eficiente y que complica
el desarrollo de nuestra programacin.
Este mecanismo de JavaScript se denomina mecanismo de escape
o caracteres de escape.
Variando el ejemplo anterior podemos disponerlo de la siguiente
forma:

var diasSemana =
[Lunes, Martes, Mircoles, Jueves, Viernes,
Sbado, Domingo];
 Sintaxis del lenguaje JavaScript | TELEFNICA // 8

Hemos definido una nica variable (diasSemana) que agrupa un BOOLEANOS

conjunto de valores de variables (los propios das de la semana, que
son cadenas). Por tanto la manera de crear o escribir un array es con Las variables de tipo booleano tambin son llamadas o denominadas
el contenido entre corchetes ([ ]) y separando cada valor de nuestra con el nombre de variables de tipo lgico. Estas variables suelen
variable por una coma (no se pone una coma en el elemento final de servir para condiciones o para la programacin lgica.
nuestro array):
Una variable este tipo solo puede almacenar dos valores: true
(verdadero) o false (falso).
var nombre_array = [valor1, valor2, ..., valorN];

var register = false;

Ya que tenemos definido nuestro primer array, podemos sacar var mayorEdad = true;
algunos de sus valores de su interior de esta manera:

var diaSeleccionado = diasSemana [0];// diaSeleccionado

= Lunes
var otroDia = diasSemana [5]; // otroDia = Sbado

La posicin 0 del array sera el primer elemento del array (sea cual
fuere) y el elemento del array que estara en la sexta posicin sera
el elemento 5. Esto sucede porque los ndices o posiciones dentro
de un array empiezan con el elemento 0 y de ah en adelante.

Finalmente debemos advertir que los array tampoco estn tipados

(no se les asigna un tipo) por lo que podemos meter elementos de
cualquier tipo dentro del mismo array.
 Sintaxis del lenguaje JavaScript | TELEFNICA // 9

1.3 | Operadores
Los operadores manipulan los valores de las variables, realizan clculos matemticos y comparan
los valores de diferentes variables.

ASIGNACIN El primer operador (el de incremento) se indica mediante el prefijo ++

y aumenta en una unidad el valor de la variable. El segundo operador
Este operador es el principal y el ms sencillo. Sirve para asignar un (el de decremento) se indica mediante el prefijo - - y disminuye en una
valor a una variable. unidad el valor de una variable.

var num1 = 3; var num = 5;

--num;
alert(num); // num = 4
INCREMENTO Y DECREMENTO

Ambos operadores sirven para decrementar o incrementar el valor de Estos operadores tambin pueden ser indicados como sufijos en vez
una variable. de prefijos.

var num = 5; var num = 5;

++num; num++;
alert(num); // num = 6 alert(num); // num = 6
 Sintaxis del lenguaje JavaScript | TELEFNICA // 10

Aunque el resultado en uno y otro caso es el mismo, no es lo mismo NEGACIN

poner el operador como prefijo o sufijo:
El operador de negacin se utiliza para dar el valor contrario a una
variable. En el caso de una variable que tenga el valor de un booleano,
var num1 = 5; se le asignar el valor contrario tras usarse el operador de negacin.
var num2 = 2;
num3 = num1++ + num2;
// num3 = 7, num1 = 6 var vis = true;
alert(!vis); // Muestra false y no true
var num1 = 5;
var num2 = 2;
El operador de negacin tambin se puede usar cuando el valor de
num3 = ++num1 + num2; la variable es un texto o un nmero. Si es un nmero y su valor es 0
// num3 = 8, num1 = 6 se transforma en false y si es otro nmero diferente de 0 su valor es
true, por lo que al negarlo en los dos casos sera su valor contrario. En
el caso de las cadenas, si es cadena vaca () se transforma en false y
Cuando el operador ++ est como prefijo g Su valor se incrementa con cualquier otra cadena su valor sera true.
antes de la operacin.
var cant = 0;
Cuando el operador ++ est como sufijo g Su valor se incrementa
despus de la operacin. vac = !cant; // vac = true
cant = 2;
LGICOS vac = !cant; // vac = false
Los operadores lgicos son adecuados para realizar condiciones y
var mens = ;
lgica matemtica. mensVac = !mens; // mensVac = true
mens = Bienvenido;
El resultado de estas operaciones siempre da como resultado un valor mensVac = !mens; // mensVac = false
lgico o de booleano.
 Sintaxis del lenguaje JavaScript | TELEFNICA // 11

AND
var num1 = 10;
Este operador sirve para combinar los valores de dos variables, usando var num2 = 5;
lgica matemtica y solo dando true si ambos valores son true. En
otro caso el valor final es false. El operador se define mediante el res = num1 % num2; // res = 0
smbolo &&. num1 = 9;
num2 = 5;
OR
res = num1 % num2; // res = 4
Este operador sirve para combinar los valores de dos variables, usando
lgica matemtica y solo dando true si alguno de los valores es true. RELACIONALES
En otro caso el valor final es false. El operador se define mediante el
smbolo || Los relacionales: mayor que (>), menor que (<), mayor o igual (>=),
menor o igual (<=), igual que (==) y distinto de (!=).
MATEMTICOS
El resultado de ellos siempre es un valor de booleano.
Los operadores declarados son: suma (+), resta (-), multiplicacin (*) y
divisin (/). Estos operadores son todos matemticos.
var num1 = 3;
var num2 = 5;
var num1 = 10; res = num1 > num2; // res = false
var num2 = 5; res = num1 < num2; // res = true
res = num1 / num2; // res = 2
res = 3 + num1; // res = 13 num1 = 5;
res = num2 4; // res = 1 num2 = 5;
res = num1 * num2; // res = 50 res = num1 >= num2; // res = true
res = num1 <= num2; // res = true
res = num1 == num2; // res = true
Aparte de estos anteriormente comentados, existe el operador res = num1 != num2; // res = false
de mdulo que obtiene como valor el resto de una divisin. Este
operador se indica mediante el smbolo %.
 Sintaxis del lenguaje JavaScript | TELEFNICA // 12

1.4 | Objetos del navegador

Cuando se carga una pgina en un navegador se crean un nmero de El objeto window es el de ms alto nivel, contiene las propiedades
objetos caractersticos del navegador segn el contenido de la pgina. de la ventana y en el supuesto de trabajar con marcos (frames), se
genera un objeto window para cada uno. El objeto document contiene
La siguiente figura muestra la jerarqua de clases del Modelo de todas las propiedades del documento actual, como son: su color de
Objetos del Documento (Document Object Model). fondo, enlaces, imgenes, etc.

window object

Ventana del Navegador o del

Marco (frame) se representa
mediante el objeto window
location history document navigator screen
objetc object object object object
Pgina HTML se representa
mediante el objeto document

form images link

object object object
 Sintaxis del lenguaje JavaScript | TELEFNICA // 13

El objeto navigator contiene las propiedades del navegador. El objeto El siguiente ejemplo muestra cmo modificar el mensaje que aparece
location contiene las propiedades de la URL activa. El objeto history en la barra de estado del navegador.
contiene las propiedades que representan a las URL que el usuario ha
visitado anteriormente. Es como una cach. El objeto screen contiene
informacin referente a la resolucin de la pantalla que muestra la
URL.
<html>
EL OBJETO WINDOW
<head><title> Ejemplo del Objeto window</title> </
head>
Contiene las propiedades bsicas de la ventana y sus componentes.
<body>
Algunas de los datos ms elementales son:
<script language=JavaScript>
defaultStatus contiene el mensaje que aparece en la barra de window.defaultStatus = Hola ;-), este mensaje
estado) aparece en la barra de estado;
</script>
frames es una matriz que representa todos los frames de la
</body>
ventana
</html>
length contiene el nmero de frames de la ventana
name contiene el nombre de la ventana
self hace referencia a la ventana activa
 Sintaxis del lenguaje JavaScript | TELEFNICA // 14

El objeto window tambin posee una serie de mtodos que permiten

ejecutar funciones especficas con las ventanas, como por ejemplo,
crear ventanas y cuadros de dilogo.
<html>
<head>
Tambin es posible determinar el aspecto que tendr la nueva
<title>Ejemplo de creacin de ventana</title>
ventana del navegador mediante los campos de datos que permiten <script language=JavaScript>
configurar el men, la barra de herramientas, la barra de estado, etc. function AbrirVentana() {
El siguiente ejemplo muestra cmo abrir una nueva ventana desde la ventana=open(,nueva,toolbar=no,directories=no,
ventana actual. menubar=no, width=180,height=180);
ventana.document.write(<HEAD><TITLE>Nueva
EL OBJETO LOCATION Ventana </TITLE></HEAD><BODY>);
ventana.document.write(<FONT SIZE=4 COLOR=red>
El objeto location contiene toda la informacin sobre la URL que se Nueva Ventana</FONT><BR> <BR<BR>>);
ventana.document.write(<FORM><INPUT
est visualizando, as como todos los detalles de esa direccin (puerto,
TYPE=button VALUE=Cerrar onClick=self.
protocolo, etc.). close()></FORM>);
}
EL OBJETO SCREEN </script>
</head>
Permite obtener informacin sobre la resolucin de la pantalla. En el <body>
siguiente ejemplo, se estable el color de fondo de la pgina de acuerdo <form>
a la resolucin que soporte la pantalla del usuario. <input type=button value=Abrir una ventana
onClick=AbrirVentana();>
<br>
</form>
</body>
</html>
 Sintaxis del lenguaje JavaScript | TELEFNICA // 15

EL OBJETO DOCUMENT - LA PGINA EN S

<html> El objeto document hace referencia a determinadas caractersticas de

<head><title> Ejemplo del Objeto screen</title> </ la pgina, como son su color de fondo (bgColor), el color de su enlaces,
head> etc.
<body>
<script language=JavaScript> El cdigo que se muestra a continuacin carga una imagen
switch (window.screen.colorDepth) dependiendo de la eleccin que haga el usuario.
{
case 1: case 4:
document.bgColor = white;
break;
<html>
case 8: case 15: case 16:
<head><title> Ejemplo del Objeto document</title>
document.bgColor = blue; <!-- Se muestra un nmero diferente de imgenes
break; dependiendo
case 24: case 32: -- del valor que introduzca el usuario
document.bgColor = skyblue; -- dato: src
break; -->
default: </head>
document.bgColor = white; <body>
} <IMG NAME=img1 SRC= BORDER=0 WIDTH=200 HEIGHT=150>
<script language=JavaScript>
document.write(Su pantalla soporta color de +
var myImages = new Array(usa.gif,canada.
window.screen.colorDepth + bit);
gif,jamaica.gif,mexico.gif);
</script> var imgIndex = prompt(Enter a number from 0 to
</body> 3,);
</html> document.images[img1].src = myImages[imgIndex];
</script>
</body>
</html>
 Sintaxis del lenguaje JavaScript | TELEFNICA // 16

A continuacin vemos un ejemplo que permite conectar cdigo a los Ejemplo 2

eventos de la pgina web. El primero de ellos simplemente muestra
una ventana de alerta, mientras que el segundo va modificando de
forma aleatoria la imagen que se carga.
<html>
Ejemplo 1 <head><title> Ejemplo del Objeto document</title>
<!-- Se carga una imagen aleatoria
-->
<script language=JavaScript>
<html> var myImages = new Array(usa.gif,canada.
gif,jamaica.gif,mexico.gif);
<head><title> Ejemplo de Eventos</title>
function changeImg(imgNumber) {
</head>
var imgClicked = document.images[imgNumber];
<body>
var newImgNumber = Math.round(Math.random() * 3);
<script language=JavaScript>
while (imgClicked.src.indexOf(myImages[newImgNumber])
function linkSomePage_onclick() {
!= -1) {
alert(Este enlace no lleva a ninguna parte);
newImgNumber = Math.round(Math.random() * 3);
return false;
}
}
imgClicked.src = myImages[newImgNumber];
</script>
return false;
<A HREF=somepage.htm NAME=linkSomePage>
}
Pincha Aqu
</script>
</A>
</head>
<script language=JavaScript>
<body>
window.document.links[0].onclick = linkSomePage_
<A HREF= NAME=linkImg1 onclick=return
onclick;
changeImg(0)>
</script>
<IMG NAME=img1 SRC=usa.gif BORDER=0 >
</body>
</A>
</html>
<A HREF= NAME=linkImg2 onclick=return
changeImg(1)>
<IMG NAME=img1 SRC=mexico.gif BORDER=0 >
</A>
</body>
</html>
 Sintaxis del lenguaje JavaScript | TELEFNICA // 17

EL OBJETO HISTORY

El objeto history contiene informacin sobre los enlaces que el usuario

ha visitado. Se utiliza principalmente para generar botones de avance lsBrowser = UNKNOWN;
}
y retroceso.
return lsBrowser;
}
EL OBJETO NAVIGATOR function getOS() {
var userPlat = unknown;
El objeto navigator permite obtener informacin del navegador con el var navInfo = navigator.userAgent;
que se est visualizando el documento. El siguiente cdigo JavaScript if ((navInfo.indexOf(windows NT) != -1)
detecta el navegador que se est utilizando y abre la pgina especfica || (navInfo.indexOf(windows 95) != -1 )
del mismo. || (navInfo.indexOf(windows 98) != -1 )
|| (navInfo.indexOf(WinNT) != -1 )
|| (navInfo.indexOf(Win95) != -1 )
|| (navInfo.indexOf(Win98) != -1 )) {
userPlat = Win32;
<html> }
<head><title> Ejemplo del Objeto navigator</title> else if(navInfo.indexOf(Win16) != -1) {
<!-- Se detecta el navegador con el que se ha abierto la userPlat = Win16;
pgina }
--> else if(navInfo.indexOf(Macintosh) != -1) {
<script language=JavaScript> userPlat = PPC;
<!-- }
function getBrowserName() { else if(navInfo.indexOf(68K) != -1) {
var lsBrowser = navigator.appName; userPlat = 68K;
if (lsBrowser.indexOf(Microsoft) >= 0) { }
lsBrowser = MSIE; return userPlat;
} }
else if (lsBrowser.indexOf(Netscape) >= 0) { function getBrowserVersion() {
lsBrowser = NETSCAPE; var findIndex;
} var browserVersion = 0;
else { var browser = getBrowserName();
 Sintaxis del lenguaje JavaScript | TELEFNICA // 18

location.replace(MSIEPage.html);
if (browser == MSIE) {
}
browserVersion = navigator.userAgent;
-->
findIndex = browserVersion.indexOf(browser) + 5;
</script>
browserVersion = parseInt(browserVersion.
substring(findIndex,findIndex + 1)); <noscript>
} <H2>Esta pgina requiere un navegador que soporte
JavaScript</H2>
else {
</noscript>
browserVersion = parseInt(navigator.appVersion.
substring(0,1)); </body>
} </html>
return browserVersion;
}
-->
</script>
</head>
<body>
<script language=JavaScript>
<!--
var userOS = getOS();
var browserName = getBrowserName();
var browserVersion = getBrowserVersion();
if (browserVersion < 4 || browserName == UNKNOWN ||
userOS == Win16) {
document.write(<H2>Sorry this browser version is not
supported</H2>)
}
else if (browserName == NETSCAPE) {
location.replace(NetscapePage.html);
}
else {