Sintaxis del lenguaje JavaScript

Índice
| Sintaxis de lenguaje 3
1.1 | Variables 4
1.2 | Tipos de datos 6
1 Numéricos 6
Cadenas de texto 6
Arrays 7
Booleanos 8
1.3 | Operadores 9
Asignación 9
Incremento y decremento 9
Lógicos 10
Negación 10
AND 11
OR 11
Matemáticos 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 página en sí 15
El Objeto history 17
El Objeto navigator 17
 Sintaxis del lenguaje JavaScript | TELEFÓNICA
// 3

1. Sintaxis de lenguaje
La sintaxis de un lenguaje de programación es el conjunto de reglas y
parámetros que deben seguirse al redactar el código de los programas para
que pasen a ser considerados como correctos y aceptables para ese lenguaje.

• No importan las nuevas líneas y los espacios en blanco al igual

que sucede en HTML ya que el propio intérprete del lenguaje
los ignora. //Ejemplo de comentario de una solo línea:
// a continuación se muestra un mensaje alert(“mensaje de prueba”);
• Es case sensitive: Distingue entre las mayúsculas y minúsculas //Los comentarios de una sola línea se definen añadiendo dos barras o
• En contra de otros lenguajes de programación no se definen //Ejemplo de comentario de varias líneas:
el tipo de las variables (var). En JavaScript nunca sabemos el /* Los comentarios de varias líneas son muy útiles cuando se necesita
tipo de datos que va a contener una variable por lo que en los comentarios*/ alert(“mensaje de prueba”);
una misma variable puede almacenar diferentes tipos //Los comentarios multilínea se definen encerrando el texto del comen
*/.
de datos.
• Cada sentencia en JavaScript acaba con el carácter; (punto
y coma) Aunque no en necesario ya que el intérprete lee
cada sentencia aunque no exista este carácter. Por convenio
deberíamos incluirlo.
• Existe la opción de incluir comentarios para añadir información
en el código fuente del programa. Estos comentarios suelen
servir para dar información al propietario del código u
otro desarrollador sobre el contenido del bloque de
código en JavaScript. Los comentarios pueden ser de una
sola línea o de varias líneas (en bloque)
 Sintaxis del lenguaje JavaScript | TELEFÓNICA
// 4

1.1 | Variables
Las variables de los lenguajes de desarrollo siguen una
lógica similar a las variables utilizadas en otras ciencias como El código anterior es inútil ya que sólo sirve para el caso en
el que el primer número de la suma sea igual a 4 y el
las físicas o las matemáticas. Una variable es un contenedor
segundo número sea igual a 2. En otras opciones, el código
que se usa para almacenar y hacer referencia a otro valor.
obtiene un res incorrecto.
De la misma manera que si en Física no existieran las variables
no se podrían definir las fórmulas, en los lenguajes de Por otro lado, el código se puede reescribir de la siguiente
forma usando variables para almacenar y referenciarse a cada
programación no se podrían redactar códigos útiles sin las
número:
variables.
Los elementos num_1 y num_2 son variables que retienen los
Sin las variables sería imposible escribir y crear “programas
valores que utiliza el código. El res se halla siempre en función
genéricos”, es decir, códigos que funcionan de la misma
del valor retenido por las variables, por lo cual, este código
manera independientemente de los valores concretos
funciona de manera correcta para cualquier par de números que
usados.
indiquemos. Si se varía el valor de las variables num_1 y
num_2, el código sigue trabajando correctamente.
Si no se usaran variables, un código que suma dos números
podría redactarse como:

num_1 = 4
res = 4 + 2 num_2 = 2
res = num_1 + num_2
 Sintaxis del lenguaje JavaScript | TELEFÓNICA
// 5

Las variables en JavaScript se utilizan mediante la palabra

reservada ‘var’. Podemos utilizar una variable no declarada en cualquier
sentencia de código. Esta es una de las habilidades más
sorprendentes de JavaScript y que muchos otros lenguajes
La palabra ‘var’ solamente de programación no tienen. JavaScript creará una variable
varsenum_1
indica=al definir por primera vez
global para esta variable no declarada y la asigna el valor
la variable, y a eso lo llamamos ‘declarar’ una variable. Cuando
se declara una variable no 4; var
hace num_2
falta declarar también el tipo que le corresponda por el código.
de dato que va a almacenar esa = 2; variable.
Si en el momento de declarar una variable se le otorga De cualquier otra forma, es recomendable declarar todas las
también un valor, se dice que la variable ha sido inicializada. num_1 = 4;
variables que se vayan a usar.
En JavaScript no es obligatorio inicializar las variables, por lo El nombre de una variable num_2
también= se
2; le conoce como
que pueden ser inicializadas posteriormente. identificador y debe res
cumplir la siguiente
= num_1 + num_2;normativa:
• El identificador únicamente puede estar formado por
números, letras, y los símbolos ‘$’ y ‘_’ a lo sumo.
var • El primer carácter del identificador no debe ser un número.
num_1;
var
num_2;
num_1 =
 Sintaxis del lenguaje JavaScript | TELEFÓNICA
// 6

1.2 | Tipos de datos

Ya sabemos que todas las variables en JavaScript se crean a través 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.

NUMÉRICOS
var sms = “Welcome to our
Se usan para contener valores numéricos enteros (llamados integer)
o decimales (llamados float).
city!”; var nomProducto =
‘Escoba’;
De esta manera, el valor que se asigna a la variable se realiza indicando var letter = ‘e’;
directamente el número entero o decimal. Los números
decimales utilizan el carácter ‘.’ en vez de ‘,’ para realizar la A veces el texto que contienen estas variables no es tan
separación entre la parte entera y la parte decimal: fácil. Si el propio texto encerrado entre comillas dobles o
simples tiene comillas dobles o simples que deben aparecer
como parte del valor se haría 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’
CADENAS DE TEXTO
dentro”;
Se usan para contener caracteres, palabras y/o frases de texto. /* Comillas dobles dentro de comillas simples*/
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 | TELEFÓNICA
// 7

A veces, hacen falta caracteres especiales para definir un ARRAYS

cambio de línea dentro del texto de nuestra variable, o incluso,
quizás queramos meter comillas simples y dobles a la vez También llamados vectores o matrices. Sin embargo, la
dentro de nuestra sentencia. denominación ‘array’ es la más utilizada y es un término
comúnmente aceptado en el entorno de desarrollo.

Si se quiere incluir... Un array es una colección de variables, sin importar los tipos de
los que sean cada una. Los arrays sirven para guardar
Se debe incluir... colecciones de valores, de manera que serviría para agrupar
Una nueva línea \n diferentes variables. Por ejemplo tenemos esta sucesión de
Un tabulador \t variables con los días de la semana:
Una comilla simple \’
Una comilla doble \”
Una barra inclinada \\

var dia1 =
De esta manera, podemos rehacer el ejemplo anterior:
“Lunes”; var dia2
= “Martes”;
var text1 = ‘Una frase con \’comillas simples\’ ...
dentro’; var text2 = “Una frase con \”comillas
dobles\” dentro”; El código anterior es correcto aparte de poco eficiente y que
complica el desarrollo de nuestra programación.
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”, “Miércoles”, “Jueves”, “Viernes”,
“Sábado”, “Domingo”];
 Sintaxis del lenguaje JavaScript | TELEFÓNICA
// 8

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

conjunto de valores de variables (los propios días de la semana,
que son cadenas). Por tanto la manera de crear o escribir un Las variables de tipo booleano también son llamadas o
array es con el contenido entre corchetes ([ ]) y separando cada denominadas con el nombre de variables de tipo lógico. Estas
valor de nuestra variable por una coma (no se pone una coma en variables suelen servir para condiciones o para la
el elemento final de nuestro array): programación lógica.

Una variable este tipo solo puede almacenar dos valores:

var nombre_array = [valor1, valor2, ..., valorN]; true (verdadero) o false (falso).

var register =
Ya que tenemos definido nuestro primer array, podemos false; var
sacar algunos de sus valores de su interior de esta manera:
mayorEdad = true;
La posición 0 del array sería el primer elemento del array (sea
cual fuere) var diaSeleccionado
y el = diasSemana
elemento del array [0];//en la sexta
que estaría
posición sería el elemento 5. Esto sucede porque los índices o
diaSeleccionado
posiciones dentro de un array empiezan con el elemento 0 y
de ahí en adelante. = “Lunes”
var otroDia = diasSemana [5]; // otroDia = “Sábado”
Finalmente debemos advertir que los array tampoco están
tipados (no se les asigna un tipo) por lo que podemos meter
elementos de cualquier tipo dentro del mismo array.
 Sintaxis del lenguaje JavaScript | TELEFÓNICA
// 9

1.3 | Operadores
Los operadores manipulan los valores de las variables, realizan cálculos matemáticos y
comparan los valores de diferentes variables.

ASIGNACIÓN
El primer operador (el de incremento) se indica mediante el
prefijo ++ y aumenta en una unidad el valor de la variable. El
Este operador es el principal y el más sencillo. Sirve para segundo operador (el de decremento) se indica mediante el
asignar un valor a una variable.
prefijo - - y disminuye en una unidad el valor de una variable.

var num1 = 3;
Estos operadores también pueden
var numser
= 5;indicados como sufijos en
vez de prefijos.
--num;
INCREMENTO Y DECREMENTO alert(num); // num = 4
Ambos operadores sirven para decrementar o incrementar el valor
de una variable.

var num = 5;
++num;
alert(num); // num = 6

var num = 5;
num++;
alert(num); // num = 6
 Sintaxis del lenguaje JavaScript |

Aunque el resultado en uno y otro caso es el mismo, no es lo NEGACIÓN

mismo poner el operador como prefijo o sufijo:
El operador de negación se utiliza para dar el valor contrario a
una variable. En el caso de una variable que tenga el valor de un
booleano, se le asignará el valor contrario tras usarse el
Cuando el operador ++ estávar num1
como = g Su valor se
prefijo
incrementa antes de la operación. operador de negación.
5; var num2
= 2;
Cuando el operador ++ está como sufijo g Su valor se
num3
incrementa después = num1++
de la + num2;
operación. var vis = true;
El operador de negación también se puede usar cuando el valor
// num3 = 7, num1 = 6 alert(!vis);
de la variable // Muestra
es un texto “false” ySinoes“true”
o un número. un número y su
LÓGICOS
valor es 0 se transforma en false y si es otro número diferente
de 0 su valor es true, por lo que al negarlo en los dos casos sería
Los operadores lógicos sonvar num1 = para realizar condiciones
adecuados
y lógica matemática. su valor contrario. En el caso de las cadenas, si es cadena vacía
5; var num2 (“”) se transforma en false y con cualquier otra cadena su
valor sería true.
El resultado de estas operaciones= siempre
2; da como resultado un
valor lógico o de booleano.
var cant = 0;
vac = !cant; // vac =
true cant = 2;
vac = !cant; // vac =
false var mens = “”;
mensVac = !mens; // mensVac =
true mens = “Bienvenido”;
mensVac = !mens; // mensVac = false
 Sintaxis del lenguaje JavaScript |

AND

Este operador sirve para combinar los valores de dos variables, var num1 =
usando lógica matemática y solo dando true si ambos valores 10; var num2
son true. En otro caso el valor final es false. El operador se = 5;
define mediante el símbolo “&&”.
res = num1 % num2; // res = 0
OR num1 = 9;
num2 = 5;
Este operador sirve para combinar los valores de dos variables,
usando lógica matemática y solo dando true si alguno de los RELACIONALES
valores es true. En otro caso el valor final es false. El operador
se define mediante el símbolo “||” Los relacionales: mayor que (>), menor que (<), mayor o igual
(>=), menor o igual (<=), igual que (==) y distinto de (!=).
MATEMÁTICOS
El resultado de ellos siempre es un valor de booleano.
Los operadores declarados son: suma (+), resta (-), multiplicación
(*) y división (/). Estos operadores son todos matemáticos.
var num1 =
3; var num2
var num1
Aparte de estos anteriormente =
comentados, existe el operador = 5;
de “módulo” que obtiene 10; varel resto de una división.
como valor
Este operador se indica mediante res = num1 > num2; // res =
num2 = 5;el símbolo “%”.
false res = num1 < num2; // res
res = num1 / num2; // res =
= true
2 res = 3 + num1; // res = 13
res = num2 – 4; // res = 1
num1 = 5;
num2 = 5;
res = num1 >= num2; // res =
true res = num1 <= num2; // res
 Sintaxis del lenguaje JavaScript |

1.4 | Objetos del navegador

Cuando se carga una página en un navegador se crean un

número de objetos característicos del navegador según el contenido El objeto window es el de más alto nivel, contiene las
propiedades de la ventana y en el supuesto de trabajar con
de la página.
marcos (frames), se genera un objeto window para cada uno. El
objeto document contiene todas las propiedades del documento
La siguiente figura muestra la jerarquía de clases del Modelo
actual, como son: su color de fondo, enlaces, imágenes, etc.
de Objetos del Documento (Document Object Model).

Ventana del Navegador o

window del Marco (frame) se
representa mediante el
objeto window
location objetc history object document objectnavigator objectscreen object

Página HTML se representa

mediante el objeto
document

for images lin

m object k
 Sintaxis del lenguaje JavaScript |

El objeto navigator contiene las propiedades del navegador. El objeto

location contiene las propiedades de la URL activa. El objeto El siguiente ejemplo muestra cómo modificar el mensaje que aparece
en la barra de estado del navegador.
history contiene las propiedades que representan a las URL que
el usuario ha visitado anteriormente. Es como una caché. El objeto
screen contiene información referente a la resolución de la
pantalla que muestra la URL.

EL OBJETO WINDOW <html>

<head><title> Ejemplo del Objeto window</title> </ head>
Contiene las propiedades básicas de la ventana y sus <body>
componentes. Algunas de los datos más elementales son: <script language=JavaScript> window.defaultStatus = “Hola ;-), este m
</script>
• defaultStatus contiene el mensaje que aparece en la </body>
barra de estado) </html>

• frames es una matriz que representa todos los frames

de la ventana
• length contiene el número de frames de la ventana
• name contiene el nombre de la ventana
• self hace referencia a la ventana activa
 Sintaxis del lenguaje JavaScript |

El objeto window también posee una serie de métodos que

permiten ejecutar funciones específicas con las ventanas, como por
ejemplo, crear ventanas y cuadros de diálogo.
<html>
También es posible determinar el aspecto que tendrá la <head>
nueva ventana del navegador mediante los campos de datos que <title>Ejemplo de creación de ventana</title>
permiten configurar el menú, la barra de herramientas, la barra <script language=”JavaScript”>
de estado, etc. El siguiente ejemplo muestra cómo abrir una function AbrirVentana() {
nueva ventana desde la ventana actual. ventana=open(“”,”nueva”,”toolbar=no,directories=no,
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 información sobre la URL que Nueva Ventana</FONT><BR> <BR<BR>>”);
se está visualizando, así como todos los detalles de esa dirección ventana.document.write(“<FORM><INPUT
(puerto, protocolo, etc.). TYPE=’button’ VALUE=’Cerrar’ onClick=’self.
close()’></FORM>”);
}
EL OBJETO SCREEN
</script>
</head>
Permite obtener información sobre la resolución de la pantalla. <body>
En el siguiente ejemplo, se estable el color de fondo de la página de <form>
acuerdo a la resolución que soporte la pantalla del usuario. <input type=”button” value=”Abrir una ventana”
onClick=”AbrirVentana();”>
<br>
</form>
</body>
</html>
 Sintaxis del lenguaje JavaScript |

EL OBJETO DOCUMENT - LA PÁGINA EN SÍ

<html> El objeto document hace referencia a determinadas características

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

A continuación vemos un ejemplo que permite conectar código

Ejemplo 2
a los eventos de la página 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.

Ejemplo 1 <html>
<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); while (imgClicked.src.ind
<script language=JavaScript> function linkSomePage_onclick() { != -1) {
alert(‘Este enlace no lleva a ninguna parte’); return false; newImgNumber = Math.round(Math.random() * 3);
} }
</script> imgClicked.src = myImages[newImgNumber]; return false;
<A HREF=”somepage.htm” NAME=”linkSomePage”> Pincha Aquí }
</A> </script>
<script language=JavaScript> window.document.links[0].onclick = </head>
linkSomePage_
onclick; <body>
</script> <A HREF=”” NAME=”linkImg1” onclick=”return changeImg(0)”>
</body> <IMG NAME=img1 SRC=”usa.gif” BORDER=0 >
</html> </A>
<A HREF=”” NAME=”linkImg2” onclick=”return changeImg(1)”>
<IMG NAME=img1 SRC=”mexico.gif” BORDER=0 >
</A>
</body>
</html>
 Sintaxis del lenguaje JavaScript |

EL OBJETO HISTORY

El objeto history contiene información sobre los enlaces que el

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

if (browser == “MSIE”) {
browserVersion = navigator.userAgent;
findIndex = browserVersion.indexOf(browser) + 5; browserVersion = parseInt(browserVersion.
substring(findIndex,findIndex + 1));
}
else {
browserVersion = parseInt(navigator.appVersion. substring(0,1));
}
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 {
 Sintaxis del lenguaje JavaScript |

location.replace(“MSIEPage.html”);
}
-->
</script>
<noscript>
<H2>Esta página requiere un navegador que soporte JavaScript</H2>
</noscript>
</body>
</html>