Scribd
Cargar
10 vistas

JavaScript

Cargado por

johe67
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
10 vistas

JavaScript

Cargado por

johe67
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 28

JavaScript

JavaScript

INTRODUCCIÓN A JAVASCRIPT

JavaScript se emplea en una página web para dotarla de funcionalidades que el HTML no puede
proporcionarle.
La integración de JavaScript con HTML se logra mediante las etiquetas <script> y </script>.
La etiqueta de <script> anteriormente debía especificar el lenguaje al que hacia referencia, pero bajo
los nuevos estándares de HTML5 solo basta colocar la etiqueta <script>…el Código… </script>.

La sintaxis correcta para incluir código JS en nuestra página es:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8.
9. //-->
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Dentro del Script encontramos las líneas <!– y //–> que corresponden a los comentarios en HTML,
se emplean para indicar que si el navegador no soporta JavaScript, se ignoren las líneas de código.
Hoy día no existe prácticamente ningún navegador que no soporte JS.

Existe otro tag que podemos incorporar a nuestras páginas, se trata de: <noscript> y </noscript> que
permiten intercalar un código alternativo en caso de que el navegador no soporte JS.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8.
9. //-->
10. </script>
11. <noscript>
12. Mala pata, amigo. Su navegador no soporta scripts.
13. <br />
14. Consiga uno nuevo o retírese de este negocio.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
94
JavaScript

15. </noscript>
16. </head>
17. <body>
18. </body>
19. </html>
En el caso de estos ejemplos he colocado el script en la sección delimitada por las etiquetas <head>
y </head>, lo cual no tiene por que ser así, ya que los script pueden colocarse en head, o en body,
indistintamente.

Primer script

Veremos un script con la famosa frase hola mundo la cual guardaremos con el nombre de
“saludo.html”.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. alert("Hola desde Javascript");
9. //-->
10. </script>
11. </head>
12. <body>
13. Esto es el body de la página.
14. </body>
15. </html>

COLOCAR JS CORRECTAMENTE

El código JavaScript puede ser colocado en varios lugares del documento HTML: entre
<head></head> o entre las etiquetas <body></body>.
El lugar mas común para colocar el código JavaScript, es entre <head> y </head>, cerca de la parte
superior de la página.
Existen otras consideraciones a la hora de escribir, o colocar el código JavaScript dentro de nuestro
documento, por ejemplo. Cuando estamos trabajando en una versión extendida de HTML, por
ejemplo (XHTML), la manera correcta de escribir nuestro código es:

1. <script type="text/javascript">
2. <![CDATA[
3. //Nuestro código JavaScript
4. ]]>
5. </script>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
95
JavaScript

También existen variaciones en la interpretación del JavaScript, por la versión del navegador que
ocupe el usuario, como el hecho de que navegadores antiguos no reconocen el “CDATA”, por tal
motivo es común que se coloquen a modo de comentario:

1. <script type="text/javascript">
2. //<![CDATA[
3. //Nuestro código JavaScript
4. //]]>
5. </script>
Para incorporar código JavaScript entro de nuestro documento lo podemos hacer básicamente de
tres maneras:

Código en linea

De esta manera se coloca el JavaScript dentro de una etiqueta HTML:

1. <a href="#" onclick="javascript:expand()">

Código embebido

Es una de las formas usuales para pequeños fragmentos de código. Se hace colocando el código
dentro de las etiquetas <script> y </script> dentro del <head> o el <body>.

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var edad;
9. edad = prompt ("Introduzca su edad (en números)", "");
10. edad = parseInt (edad); //Recuerde que prompt() siempre genera una cadena literal.
11. if (edad > 17) // Se comprueba si es mayor de edad
12. {
13. alert ("Usted es adulto.");
14. } else {
15. alert ("Usted es menor de edad.");
16. }
17. //-->
18. </script>
19. </head>
20. <body>
21. </body>
22. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
96
JavaScript

Codigo externo

Colocar el código JavaScript en un enlace externo es una de las formas mas recomendadas. Se
realiza mediante un enlace que hace referencia a nuestro archivo externo, y desde luego nuestro
archivo externo con su correspondiente código JavaScript.

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script src="script/saludo.js" type="text/javascript"></script>
7. </head>
8. <body>
9. Esto es el cuerpo de la p&aacute;gina.
10. </body>
11. </html>
Esta manera de incluir código JavaScrit, nos permite:

 Un mismo archivo enlazarlo a varias páginas, de esta manera cunado desee hacer
modificaciones en su código JavaScript, con una sola módificación todas las páginas se
verán afectadas. De tener el código separado en cada página, tendría que modificar varias
veces el mismo código
 De lo anterior resulta una manera mas fácil de mantener su sitio web.
 Al tener el código JavaScript en un archivo separado, la permite al navegador almacenar
dicho archivo en la chace y por lo tanto la carga de la página se hace mas rápida.
 Hace que su sitio sea mas legible al mantener la estructura HTML y código JavaScript por
separado.

FUNCIÓN alert( )

Para empezar veremos que es una Función de JavaScript.


Una función se compone de una palabra reservada (el nombre de la función) y de unos paréntesis
argumentales.
Aquello que coloquemos entre los paracentesis argumentales, sera lo que la función ocupara para
su operativa.

Tenga presente que algunas funciones pueden tener los paracentesis vacíos, pero de todas formas
deberán ser colocados inmediatamente después del nombre de la función SIN DEJAR ESPACIO

Case Sensitive: A diferencia de HTML, JavaScript es de los lenguajes llamados Case Sensitive, lo
cual indica que detecta entre mayúsculas y minúsculas.
Por lo tanto no podemos alterar las funciones como “Alert o alert”, no las podemos alterar, de lo
contrario no serán interpretadas.

En la lección anterior del curso de JavaScript, empleamos la función alert(), la cual genera un cuadro
de aviso, deteniendo la carga de la página hasta que el usuario pulse el botón que se incluye en
dicho cuadro de aviso.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
97
JavaScript

Esta función se emplea cuando queremos mostrarle un mensaje al Usuario, el cuadro aparecerá
pese a las acciones del usuario, bueno a no ser que desactive las ventanas emergentes, pero en la
mayoría de los navegadores se mostrara el cuadro.
Entre los paracentesis se coloca aquello que nosotros queremos que el usuario vea, puede ser un
texto literal colocado entre comillas (luego hablaremos de esto), un numero o una variable (la cual
también la discutiremos posteriormente).

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. alert("Hola desde Javascript");
9. //-->
10. </script>
11. </head>
12. <body>
13. Esto es el body de la p&aacute;gina.
14. </body>
15. </html>
En el ejemplo anterior, recuerde que puede omitir el (language=”javascript”).
También observe el (;) a final de la función, la mayoría de las instrucciones de cualquier lenguaje se
emplean comillas salvo algunas excepcione que veremos después.
Otra cosa que debe tener presente, es que las instrucciones de deben ir en una sola línea sin pulsar
[ENTER].

Ejecute el código en su navegador y verá lo que pasa, además pruebe con otros argumentos como:

1. alert("Argumento entre comillas");


2. alert(Argumento sin comillas);
3. alert(345);
4. alert("345");
Las ultimas dos alertas son mostradas iguales, sin embargo son de tipo diferente.
 alert(345) – Es un dato de tipo “number” es decir, dato numérico
 alert(“345″) – Es un dato de tipo “string” es decir, dato literal

COMENTARIOS

Al igual que todos los lenguajes de programación nos permite colocar comentarios para documentar
el código.
Es importante que usted tenga el hábito de colocar comentarios para facilitar la comprensión de
nuestros códigos, imagine que tiene un código de 300 lineas que hace varias cosas y manipula
diferentes elementos HTML de nuestra página, tal vez no tenga problemas al manipular el código los
primeros días después de haberlo terminado, sin embargo si dentro de tres meses usted desea

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
98
JavaScript

realizar alguna modificación, frecuentemente resulta mas viable tirar todo el trabajo y hacerlo de
nuevo a estar descifrando que hace cada cosa.
La alternativa es que el código esté profusamente documentado, con la finalidad de que usted sepa
que hace cada cosa y tenga una referencia para trabajar con él.
Y además, en la actualidad el trabajo en equipo de los programadores es indispensable y si su código
no esta bien documentado el pobre compañero que le toque realizar algún procedimiento en el
código terminara sus días con una camisa de fuerza y condenso a ver elefantes voladores de por
vida
Un dato que usted debe tener en cuenta es que al incluir comentarios, el peso de nuestro archivo irá
aumentando y su página podría tardar mas en cargar, por ello es una buena idea que realice dos
versiones de su código, uno donde tenga toda la documentación que necesite para realizar el
mantenimiento apropiado y otro que suba a su servidor sin comentarios.

En JS existen dos maneras para introducir comentarios:

Comentario de una línea:

Se indica con // (doble barra)


Estas barras dobles le indican al navegador que todo lo que esté enfrente de estas sobre la misma
linea, es decir, sin dar [Enter], es un comentario.

Comentario de varias líneas:

Se indica con /* aquí va el comentario */


Con esta indicación, el navegador ignorará todo el contenido que se encuentre ente la barra asterisco
que abre y el asterisco barra que cierra
Puede colocar el comentario en varias líneas, es decir, aunque usted oprima [Enter]

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. /* Aquí empieza un comentario de varias líneas. Todas ellas
9. son ignoradas por el navegador.*/
10. alert ("Hola desde Javascript"); //Otro comentario.
11. //-->
12. </script>
13. </head>
14. <body>
15. Esto es el body de la p&aacute;gina.
16. </body>
17. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
99
JavaScript

DECLARACIÓN DE VARIABLES

En este capítulo hablaremos de los distintos tipos de Datos que se pueden manejar desde
JavaScript. Y cómo manejarlos.
Primero debemos definir un término sumamente empleado en lenguajes de programacion, me refiero
a las variables.

Variable: Es una zona de la memoria del ordenador donde se guarda un dato y que se identifica con
un nombre, por ello algunos autores las llaman pares nombre-valor.
El dato que se almacena bajo ese nombre puede cambiar durante la ejecución del código; por eso
se llaman variables.

Imagine que una variable es un contenedor, dicha caja se llama variable uno, Cuando nos referimos
a este contenedor, realmente estamos teniendo acceso al contenido de la misma (es decir, al valor
de la variable). Dentro de esa caja podemos tener una cadena literal, un valor numérico o algunas
otras cosas. Cuando una variable tiene un determinado contenido y se le asigna otro, el anterior se
pierde, es decir, una variable no puede tener dos contenidos o más simultáneamente.

Para lo anterior existen algunas excepciones de las que hablaremos mas tarde.

En un código JavaScript podemos usar tantas variables como sean necearías pero para poder usar
una variable primero debemos declararla.
Declarar una variable significa decirle al navegador que reserve espacio en memoria, para el uso de
esa variable.

Existen dos maneras para declarar una Variable.

Declaración explícita

Para declarar una variable de manera explícita utilizamos la instrucción var, seguida del nombre de
la variable, como en la siguiente línea de código.

1. var VariableUno;
Una vez que la variable ha sido declarada, se ha reservado en memoria espacio para ella, pero
todavía no tiene ningún valor. Para poder usarla es necesario darle un valor inicial, esto es lo que se
conoce como Inicialización de una variable.
Para ello empleamos el operador de asignación =.

1. var VariableUno = 10;

Veamos como funciona en un código las variables:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var v1; //Declaración.
9. v1=10; //Inicialización.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
100
JavaScript

10. alert (v1);


11. //-->
12. </script>
13. </head>
14. <body>
15. </body>
16. </html>
Para ahorrar código, al utilizar la declaración explicita de variables, podemos realizar la declaración
y la inicialización en una sol línea, tal como se muestra en el siguiente código.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var v1=10; //Declaración e inicialización.
9. alert (v1);
10. //-->
11. </script>
12. </head>
13. </html>
14. Además podemos declarar e inicializar varias variables y en la misma línea:
15. <html>
16. <head>
17. <title>
18. Página con Javascript.
19. </title>
20. <script language="javascript">
21. <!--
22. var v1=10, v2=20; //Declarar e inicializar más de una variable en la misma línea.
23. alert (v1);
24. alert (v2);
25. //-->
26. </script>
27. </head>
28. <body>
29. </body>
30. </html>

Declaración Implícita
JavaScript nos permite declarar una variable por el simple hecho de inicializarla, es decir, no es
necesario declarar la variable mediante el uso de la palabra reservada var.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
101
JavaScript

Al inicializar la variable, el navegador le reserva espacio en la memoria.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. v1=10; //Declaración implícita.
9. alert (v1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Es recomendable declarar e inicializar nuestras variables, con la finalidad de mantener una
organización más estricta de nuestro código que nos ayude a su mantenimiento y control del mismo.

Nota: JavaScript, no necesita que le especifiquemos el tipo de variable que le vamos a asignar, es
decir, no le tenemos que decir que el dato que almacenará será booleano, literal, entero, decimal
etc. con el simple hecho de la inicialización, el interprete sabe a que tipo de variable estamos
haciendo referencia, incluso cambiar e tipo si el programa lo requiere para su ejecución.

NOMBRES DE VARIABLES

Para escribir e nombre de las variables debemos tener en cuenta algunas consideraciones.

 Los nombres de las variables no deben empezar por un número, sino por una letra.
 Podrá contener números, letras y el guión bajo, pero ningún otro signo (ni siquiera el punto
o el guion normal).
 Los nombres de las variables solo deben contener letras del alfabeto ingles.
 No pueden contener espacios en blanco.
 No podemos usar como nombre de nuestra variable una palabra reservada de JavaScript,
si lo podemos hacer, pero no es aconsejable.
 Debemos recordar que JavaScript es sensible al uso de mayúsculas y minúsculas
 Cuando el nombre de nuestra variable está formada por más de dos palabras, es buena idea
poner la primera en minúscula y las demás con la primera letra en mayúsculas, sin separar.

En las siguientes publicaciones iremos viendo los tipos de variables, y el uso que les podemos dar.

VARIABLES LITERALES

También llamados pares nombre-valor, se emplean para almacenar un valor bajo un nombre y el
cual se puede emplear para realizar alguna operación o para devolverle al usuario un resultado.
En JavaScript, como en cualquier lenguaje de programación, se pueden manejar datos de diferentes
tipos.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
102
JavaScript

Por ejemplo, si declaramos una variable para que contenga el nombre de un usuario, por su
naturaleza, este dato será de tipo cadena o literal, ya que el nombre de una persona esta formado
por letras.
Si declaramos otra variable que contenga su edad, esta será de tipo numérico. En el caso de las
fechas, JavaScript designa un tipo de dato específico que posteriormente veremos.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var cadena="Esto es una cadena";
9. var numero=75;
10. alert (cadena);
11. alert (numero);
12. //-->
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
El contenido del literal es lo que está escrito en las comillas. Es importante que tenga claro esto, por
lo que le ruego que ejecute el código respetando la sintaxis marcada.
Como puede ver, las comillas no aparecen, es parte de la forma de escribir las cadenas, pero no
forman parte del mensaje.

Variables Literales
En JavaScrpt podemos realizar varias operaciones con las cadenas alfanuméricas o cadenas de
texto.
Comenzaremos a ver algunos fundamentos necesarios para emplear estas funciones, ya que a lo
largo de estos cursos, usted vera los diferentes usos que les podemos dar a estos datos.

Concatenaciones
Cuando se habla de cadenas alfanuméricas, se conoce como concatenación al proceso de unir dos
o mas cadenas en una sola mediante el uso del operador +.

Veamos el siguiente ejemplo.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var cadena1="Esto es una cadena.", cadena2=" Y esto es otra.", cadena3;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
103
JavaScript

9. cadena3=cadena1+cadena2;
10. alert (cadena3);
11. //-->
12. </script>
13. </head>
14. <body>
15. </body>
16. </html>
Como puede ver, las dos variables aparecen unidas gracias al operador de asignación.
También podemos concatenar cadenas literales con valores numéricos:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable1="Mi edad es: ", variable2=35, variable3;
9. variable3=variable1+variable2;
10. alert (variable3);
11. //-->
12. </script>
13. </head>
14. <body>
15. </body>
16. </html>
Sin embargo esto es sumamente desaconsejable por los errores inesperados que se puedan
presentar al mezclar valores, por eso, lo mejor será redactar el código anterior con ambas variables
en literal:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable1="Mi edad es: ", variable2="35", variable3;
9. variable3=variable1+variable2;
10. alert (variable3);
11. //-->
12. </script>
13. </head>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
104
JavaScript

14. <body>
15. </body>
16. </html>

Métodos y Propiedades de datos literales

Para hacer uso de los métodos y propiedades en JavaScript se hace uso del punto de concatenación,
mas la propiedad que se desea.
Estas propiedades realizan diferentes funciones y acciones en el manejo de variables.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var x = "Tamaño de la cadena.";
9. alert(x.length);
10. </script>
11. </body>
12. </html>
El script anterior, hace uso de la propiedad length, la cual especifica el número de caracteres por los
que está compuesta una cadena.
Algunos métodos de las cadenas de uso común, además de substring, incluyen slice, substr, concat,
toUpperCase, toLowerCase, y el patrón de los métodos de coincidencia, match, search, y replace. A
continuación explicaremos cada uno de ellos.
Los métodos que cambian las cadenas incluyen slice, substring, substr, y concat.

slice y substring
Los métodos de slice y substring devuelven valores de cadena a base de otra cadena. Ellos aceptan
dos argumentos: la posición inicial y una posición final opcional. He aquí algunos ejemplos:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var miCadena = "Esto es una cadena.";
9. alert(miCadena.substring(3)); //Regresa "o es una cadena"
10. alert(miCadena.substring(3,9)); //Regresa "o es u"
11. alert(miCadena.slice(3)); //Regresa "o es una cadena."
12. alert(miCadena.slice(3,9)); //Regresa "o es u"
13. </script>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
105
JavaScript

14. </body>
15. </html>
Una diferencia sutil entre slice y substring es cómo manejan argumentos con valores negativos. El
método substring convertirá los valores negativos en 0, mientras que slice tratará argumentos
negativos como el punto de partida desde el final de la cadena (contando hacia atrás).

substr
El método substr también acepta dos argumentos:
El primero es la posición de inicio para volver
El segundo argumento es el número de caracteres a mostrar, no la posición de parada.
Por lo tanto, los ejemplos de código para slice y substring trabajan un poco diferente con substr:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var miCadena = "Esto es una cadena.";
9. alert(miCadena.substr(3));
10. alert(miCadena.substr(3,9));
11. </script>
12. </body>
13. </html>

concat
El método de concatenación ya lo habíamos visto anteriormente.
Se trata de un método que permite unir dos o mas cadenas mediante el operador mas (+).

toUpperCase y toLowerCase
Este método permite convertir una cadena a Mayúsculas (toUpperCase) o a minúsculas
(toLoweCase).

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var myString = "Esto es una cadena";
9. alert(myString.toUpperCase()); // "ESTO ES UNA CDENA"
10. alert(myString.toLowerCase()); // "esto es una cadena"
11. </script>
12. </body>
13. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
106
JavaScript

Desde luego que existen muchos otros métodos para el manejo de cadenas, sin embargo, no todas
son tan comunes, si usted lo desea puede consultar mas métodos en el siguiente link,
(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf).

SECUENCIAS DE ESCAPE

Anteriormente hemos visto como una cadena literal se escribe entre comillas, pero estas no se
almacenan con la cadena.
Este es un comportamiento normal de las cadenas, sin embargo cuando deseemos que las comillas
aparezcan, debemos hacer uso de las secuencias de escape.
Las secuencias de escape están formadas por una barra invertida, seguida de un carácter o de una
letra según nos convenga.
Para lograr mostrar las comillas que rodean a la palabra “Hola” en el siguiente código lo debemos
escribir de la siguiente manera.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable_1="Este aviso dice "Hola".";
9. alert (variable_1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Existen diferentes secuencias de escape, con funciones distintas a solo mostrar signos restringidos,
como dar un enter, retorno al carro.

Observe la siguiente tabla, donde expongo algunas de las secuencias de escape más comunes.

CÓDIGO ASCII CARÁCTER BARRA SIGNIFICADO

8 b Retroceso (BS)

9 t Tabulador Horizontal (HT)

10 n Nueva Línea, Enter (LF)

12 f Nueva Página (FF)

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
107
JavaScript

13 r Retorno

34 ” Comillas Dobles

39 ‘ Comillas Simples

92 Barra Invertida

Por el momento es necesario que conozca estas secuencias, para que cuando aparezcan en
capítulos posteriores, sepa de qué se trata, ademas de que en su debido momento realizaremos la
explicación adecuada para que este cociente de todo el funcionamiento del script.

COMILLAS SIMPLES Y COMILLAS DOBLES

JavaScript permite delimitar una cadena alfanumérica con comillas simples o dobles indistintamente.
Por ejemplo:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable_1='Ésto es una cadena delimitada con comillas simples.';
9. alert(variable_1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>

El uso de comillas simples o dobles, es mera cuestión de criterio. Podria ser otra forma de escribir
comillas dentro de la cadena:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable_1="Ésto es una comilla simple: ' ";

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
108
JavaScript

9. alert(variable_1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>

Es importante que si establece comillas dobles para delimitar, se mantenga constante en su empleo,
para evitar errores futuros.

PUNTO Y COMA

El punto y coma se emplea como delimitador de las sentencias que se realizan a lo largo del código,
es una forma de indicarle al intérprete que la instrucción ha terminado en ese lugar.

Existen algunos lugares en los que podemos omitir el uso de punto y coma, y otros donde
definitivamente no se deben usar.

Incluso en algunos lugares, cuando usted omite el uso de punto y coma, el intérprete puede colocar
uno, lo cual puede o solucionar algún problema o causarlo, por ejemplo:

Suponga las siguientes líneas de código:

1. return
2. (varName);
Lo cual la manera correcta de hacerse es:

1. return(varName);
Este es uno de los casos cuando no puede dejarse espacios en blanco
Lo que el intérprete decodificará será:

1. return;
2. (varName);
Produciendo un error. Como regla general es aconsejable y una buena práctica siempre hacer uso
del punto y coma cada que termine una sentencia o declaración.
Pero, definitivamente nunca debe emplear punto y coma cuando se trate de bucles o sentencias if,
como en los siguientes ejemplos:

1. if (a == 4)
2. {
3. // code goes here
4. }
La razón es que todo el bloque de código pertenece a una misma declaración, y si se le coloca un
punto y coma, se rompería la secuencia del mismo.
Este sería un ejemplo de un código incorrecto.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
109
JavaScript

1. if (a == 4);
2. {
3. // code goes here
4. }
Como un tip, cuando abra un bucle o una función, omita el uso del punto y coma.

SENTENCIAS O EXPRESIONES

Anterior mente ya habíamos visto algunas sentencias, como el caso de la función alert ( ), pero no
habíamos hablado del concepto general de sentencia.
Pues en esta publicación vamos a explicar a que se refiere cuando decimos una sentencia de
JavaScript, o en ingles (Statements or Expresion).
Una sentencia, es un conjunto de instrucciones que son procesadas por el “interprete” de JavaScript
y realizan una acción en concreto. Es decir, es la manera en al que nosotros le hablamos a JavaScript
para que realice “x” o “y” cosa.

Como está conformada una sentencia


Una sentencia puede estar conformada por una colección de bloques que incluyen palabras claves,
literales, separadores, operadores, identificadores, variables, constantes, los cuales se estructuran
de tal manera que tengan sentido para el interprete de JavaScript, y este pueda realizar la acción
solicitada.

Estos son algunos ejemplos de sentencias.


1. var x = 4;
2. var y = x * 4;
3. alert("Hello");

Clasificación de las Sentencias

 Simples: Una sentencia simple, comprende aquellas instrucciones que


Las sentencias se pueden clasificar básicamente en dos tipos de acuerdo a su estructura

generalmente no abarcan mas de una linea, como es el caso de las declaraciones

 Compuestas: Una sentencia compuesta, es la que comprende diferentes niveles de


de variables

lógica. Este tipo de sentencias emplea operadores, condicionales y pueden llegar a


ser sumamente largas.

Ejemplo de sentencia simple


1. var x = 4;
Ejemplo de sentencia compuesta.

1. if (siEsto == 1) {
2. // algo de código aquí
3. } else {
4. // algo de código aquí también
5. }
Bien, este tema no es tan crucial para el aprendizaje de JavaScript, sin embargo es necesario que
conozca todos estos fundamentos, para crear un aprendizaje sólido, recuerde que para que el día

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
110
JavaScript

de mañana usted pueda crear sus propios script, es necesario conocer todos los fundamentos
teóricos para después dejar volar la imaginación y comenzar a crear.

ESPACIOS EN BLANCO E IDENTACIÓN

Para escribir su código JavaScript, no importa si deja espacios entre las sentencias, o tabula su
código. Usted puede implementar cualquier estándar de redacción que facilite la lectura de su código.
Salvo algunas excepciones, cuando se emplean palabras reservadas como return() pueden no ser
interpretadas si se escriben en la misma línea. (Después veremos un ejemplo de esto)
La ventaja de dejar espacios en blanco y tabular el código es que permiten hacer más legible su
código.

Suponga el siguiente código “sin espacio”.

1. function cubeme(incomingNum) {
2. if (incomingNum == 1) {
3. return "What are you doing?";
4. } else {
5. return Math.pow(incomingNum,3);
6. }
7. }
8. var theNum = 2;
9. var finalNum = cubeme(theNum);
10. if (isNaN(finalNum)) {
11. alert("You should know that 1 to any power is 1.");
12. } else {
13. alert("When cubed, " + theNum + " is " + finalNum);
14. }

Resulta mucho más complicado leerlo, tal vez no en la primera semana de haberlo realizado, pero
quizá dentro de unos años, y unos cientos de líneas más, se tornarán una tarea titánica la lectura
del código.

1. function cubeme(incomingNum) {
2. if (incomingNum == 1) {
3. return "What are you doing?";
4. } else {
5. return Math.pow(incomingNum,3);
6. }
7. }
8. var theNum = 2;
9. var finalNum = cubeme(theNum);
10. if (isNaN(finalNum)) {
11. alert("You should know that 1 to any power is 1.");
12. } else {
13. alert("When cubed, " + theNum + " is " + finalNum);

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
111
JavaScript

14. }
Ambos códigos funcionan exactamente igual, pero la lectura del segundo código es mucho más
sencilla y fácil de entender.

Retorno de Carro o Salto de Línea


Relaciona estrechamente con el espacio en blanco, e incluso al punto y coma, son los saltos de
línea, a veces llamados retornos de carro. Conocido en el funcionario ECMA-262 estándar como
“Los finales de línea”, estos elementos separan una línea de código de la siguiente.
Como era de esperar, el uso más común de los saltos de línea es la de separar las líneas individuales
de código para facilitar la lectura. También puede mejorar la legibilidad de largas líneas de código.
Sin embargo, al hacerlo, tenga en cuenta que la colocación errónea de estos saltos de línea pueden
producir errores.

PALABRAS RESERVADAS

Algunas palabras, son de uso exclusivo de JavaScript, es decir, usted no la puede emplear para
nombrar a sus variables, identificadores, constantes etc. ya que si lo hace podría ocasionar
resultados inesperados, y un gran dolor de cabeza para tratar de corregir estos errores.
De acuerdo a las especificaciones de ECMA-262 edición 5.1, las sigueintes palabras son de uso
reservado para JavaScript.

break delete case do

catch finaly continue for

debugger function default if

else in instanceof var

new void return while

switch with this class

throw const try enum

typeof export import extends

super implements let private

interface package protected public

static yield

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
112
JavaScript

No es necesario que las memorice por ahora, la práctica la hará eso por usted, pero si es importante
que sepa que estas palabras no deben ser empleadas como variables, identificadores, o constantes,
ya que esto podría ocasionar resultados inesperados.

INTRODUCCIÓN A LAS FUNCIONES

Ya hemos visto algunos ejemplos de funciones en JavaScript, tal como la función alert(), pero existen
otras tantas que veremos a continuación, y prácticamente a partir de ahora, todo el tiempo estaremos
viendo el empleo de funciones.
Una cosa que es importante destacar en el uso de las funciones de JavaScript, es que dependiendo
de la versión del lenguaje, algunas de las funciones más modernas, no van a ser visualizadas en
todos los navegadores, un recurso que les puede ayudar, a conocer todas estas cuestiones de
compatibilidad es la siguiente página web: http://www.quirksmode.org/compatibility.html
Pongamos algo en práctica
JavaScript, es uno de los lenguajes, que permite la definición de funciones por parte del usuario, así
que en este ejemplo haremos algo de esto:

Primero veamos el siguiente código:

1. <!doctype html>
2. <html>
3. <head>
4. <script>
5. function alcubo(numeroinIcial) {
6. if (numeroinIcial == 1) {
7. return "abcdef";
8. } else {
9. return Math.pow(numeroinIcial,3);
10. }
11. }
12. </script>
13. <title>Ejemplo de funciones</title>
14. </head>
15. <body>
16. <script>
17. var elNum = 2;
18. var finalNum = alcubo(elNum);
19. if (isNaN(finalNum)) {
20. alert("Usted debería saber que el 1, elevado a cualquier potencia es 1");
21. } else {
22. alert("Cuando elevamos al cubo, " + elNum + " el resultado es: " + finalNum);
23. }
24. </script>
25. </body>
26. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
113
JavaScript

En primer lugar observe que usted puede colocar scripts tanto en las etiquetas <head></head>,
como en el cuerpo (<body></body>).

Ahora analicemos el código:

Primera Parte

1. <script>
2. function alcubo(numeroinIcial) { //Declaramos una función
3. if (numeroinIcial == 1) {//Le decimos si el número inicial es 1
4. return "abcdef"; //Conviértelo en un valor string o cadena
5. } else { //Si no, eleva dicho numero al cubo
6. return Math.pow(numeroinIcial,3);
7. }
8. }
9. </script>
Este bloque sirve primordialmente para:

 Definir la función “alcubo“


 La cual consta de dos partes, por un lado:
 Cuando recibe un valor igual a 1 convierte dicho valor en la cadena “abcdef”.
 De lo contrario, eleva dicho número al cubo.

Segunda parte
1. <script>
2. var elNum = 2; //Declaramos el valor de la variable elNum
3. var finalNum = alcubo(elNum); //Declaramos el valor de la variable alcubo(), la cual
ya hemos definido
4. if (isNaN(finalNum)) { //Esto le dice, Si se trata de un valor no numérico
5. alert("Usted debería saber que el 1, elevado a cualquier potencia es 1"); //Indica esto
6. } else {//De lo contrario
7. alert("Cuando elevamos al cubo, " + elNum + " el resultado es: " +
finalNum);//Muestra esto
8. }
9. </script>
De esta manera:
 Cuando el numero sea igual a 1 sera entonces una cadena, por lo tanto se mostrará la alerta
de “Usted debería saber que el 1, elevado a cualquier potencia es 1“
 Y si no se trata de una cadena, es decir, se trata de un número, pasara por la función
alcubo(); y aparecerá la alerta de: ” Cuando elevamos al cubo, ” + elNum + ” el resultado es:
” + finalNum”, la cual emplea los operadores de concatenación (+), para incluir las variables.

Al correr este script en su navegador usted verá:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
114
JavaScript

STRICT MODE

En las especificaciones de ECMA-262, en su quinta edición, se ha introducido una variante para la


redacción del código de JavaScript, se trata del modo estricto “strict mode” el cual permite disminuir
la presencia de errores frecuentes, o interpretaciones erróneas del código.
Por ejemplo, si el usuario no coloca la palabra reservada “var”, antes de la declaración de una
variable se producirá un error.
Además de algunas otras modificaciones a la función eval ( ), permiten mejorar la sintaxis del código
escritas por el programador.
La sintaxis que se emplea en el modo estricto de JavaScript, es muy parecida a la que se emplea en
Perl.

El modo estricto es de ámbito local, esto significa que:

Puede ser habilitado el modo global, al implementar la línea “use strict”, al inicio del código.
1. "use strict";
Puede ser habilitada de manera local para una función en específico, al ser colocada la línea “use
strict” dentro del cuerpo de la función.

1. function haceAlgo() {
2. "use strict";
3. // aquí va el código.
4. }
Recuerde que al implementar el modo estricto, debe de usar una redacción completa, sin obviar
palabras como var, como en el siguiente ejemplo:
1. "use strict";
2. x = 4; // Produce un error de sintaxis
En este ejemplo, se producirá un error. Cuando usted implementa el modo estricto la sintaxis tiene
que ser la siguiente.
1. "use strict";
2. var x = 4; // Esto está bien
Alguna de las cuestiones más importantes que hacen del modo estricto algo importante, son las
consideraciones que se han implementado para la función eval( );
La cual evalúa rigurosamente un valor “cadena”, que puede representar una sentencia o expresión
de JavaScript.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
115
JavaScript

VARIABLES NUMERICAS

Cuando nos referimos a variables numéricas o valores numéricos nos referimos especialmente a
números, así de simple. No tiene nada de especial, si usted tiene experiencia con otros lenguajes de
programación, no sera un tema desconocido. Tanto los números enteros como los decimales.

Cualquiera de estos valores es válido en JavaScript:


 24
 50.34
 22
 348
 0.8654
 Oxd
El último ejemplo, es un valor hexadecimal.

En JavaScript se pueden emplear diferentes bases de numeración aparte de la decimal, tales como
la hexadecimal, binaria, Octal, por mencionar algunas de las más populares. Además se pueden
realizar operaciones aritméticas entre ellos, sin importar en que base se encuentren:

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title>Operaciones con distintas Bases</title>
5. <script type="text/javascript">
6. var h = 0xe;
7. var i = 0x2;
8. var j = h * i;
9. alert(j);
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Al correr el script anterior en su navegador, verá que JS realizo la operación de multiplicación sin
ningún problema, y el resultado es obtenido en base decimal, ya que es la que está establecida por
defecto.
 Lo primero que hace el script, es la declaración e inicialización de variabes.
 Variable h
 Variable i
 Variable j (la cual contiene la operación realizada).
 Finalmente hacemos uso de la función alert(), la cual lleva como argumento el contenido de
la variable j
 El resultado es una caja de texto que despliega el resultado de la operación anterior, en base
decimal.

Funciones numéricas
JavaScript tiene algunas funciones y objetos incorporados, para trabajar con valores numéricos.
Una función numérica comúnmente empleada es la función isNaN().
NaN es una abreviación de Not a Number, y representa un número inadmisible.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
116
JavaScript

Utilice la función isNaN() para determinar si un número es legal o válido de acuerdo con la
especificación ECMA-262.

Por ejemplo:

 Un número dividido por cero sería un número ilegal en JavaScript.


 El valor de cadena “Este no es un número” obviamente, tampoco es un número.
 Aunque las personas pueden tener una interpretación diferente de lo que es y no es un
número, la cadena “four” no es un número a la función isNaN(), mientras que la cadena “4”
si lo es.
 La función isNaN() requiere un poco de yoga mental, ya que se emplea para comprobar el
hecho negativo de si una variable contiene un número.

Aquí hay un par de ejemplos en los que usted puede tratar de comprobar si un número es ilegal.
Veamos el siguiente código:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>isNaN</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write("No es un número: " + isNaN("4"));
9. </script>
10. </body>
11. </html>
Como puede observar, nos devuelve un resultado false, esto es por que “4”, aunque sea una cadena,
SI es un número, por lo tanto al probar si NO era un número, nos dice “false”, ya que si es un número.

Veamos otro ejemplo:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>isNaN</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write("No es un número: " + isNaN("four"));
9. </script>
10. </body>
11. </html>
Como podrá observar, nos devuelve un resultado true, esto es por que “four”, aunque sea la manera
de escribir “4”, NO es un número, por lo tanto al probar si NO era un número, nos dice “true”, ya que
no es un número. Ahora nuestra variable, es totalmente una cadena.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
117
JavaScript

Constantes Numéricas
Dentro de los objetos de JavaScript existen algunas constantes que están habilitadas de manera
predeterminada en JavaScript.

Objeto
Constante Descripción
JavaScript

Valor que es mayor que el mayor número de punto

Infinity flotante. Infinito negativo (-Infinity) es menor que el menor Global

número de punto flotante.

MAX_VALUE El mayor número que se puede representar en JavaScript. Number

Número más cercano a cero que se puede representar en


MIN_VALUE Number
JavaScript.

Indica que una expresión aritmética ha devuelto un valor que


NaN Number
no es un número.

NEGATIVE_INFINITY Valor que es menor que el menor número de punto flotante. Number

POSITIVE_INFINITY Valor que es mayor que el mayor número de punto flotante. Number

Para ver como funcionan estos objetos, veamos algunos ejemplos.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Constantes numé</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write(Number.MAX_VALUE);
9. </script>
10. </body>
11. </html>

Objeto Math
El objeto Math es una variante especial que se utiliza para trabajar con números en JavaScript, y
tiene varias propiedades que son útiles para el programador, donde se encuentran incluidas todas
las propiedades que devuelven el valor de pi, la raíz cuadrada de un número, una pseudo-número
aleatorio, y un valor absoluto, por mencionar algunas.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
118
JavaScript

Algunas propiedades son propiedades de valor, lo que significa que devuelven un valor, mientras
que otros actúan como funciones y devuelven los valores basados en los argumentos enviados en
ellos.
Considere este ejemplo de la Math.PI el cual se trata de una propiedad de valor.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Objeto Math</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write(Math.PI);
9. </script>
10. </body>
11. </html>
En la siguiente tabla se muestran las propiedades valor del objeto Math.

Constante Descripción

Math.E Constante matemática e. Es el número de Euler, la base de los logaritmos naturales.

Math.LN2 Logaritmo natural de 2.

Math.LN10 Logaritmo natural de 10.

Math.LOG2E Logaritmo en base 2 de e.

Math.LOG10E Logaritmo en base 10 de e.

Math.PI Pi. Es la relación entre la circunferencia de un círculo y su diámetro.

Raíz cuadrada de 0,5 o, de forma equivalente, uno dividido entre la raíz cuadrada de
Math.SQRT1_2
2.

Math.SQRT2 Raíz cuadrada de 2.

En la tabla siguiente se muestran las funciones del objeto Math.

Función Descripción

Math.abs Devuelve el valor absoluto de un número.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
119
JavaScript

Math.acos Devuelve el arcocoseno de un número.

Math.asin Devuelve el arcoseno de un número.

Math.atan Devuelve el arco tangente de un número.

Devuelve el ángulo (en radianes) del eje X a un punto representado por las
Math.atan2
coordenadas y y x proporcionadas.

Devuelve el menor entero que es mayor o igual que la expresión numérica


Math.ceil
especificada.

Math.cos Devuelve el coseno de un número.

Math.exp Devuelve e (la base de los logaritmos naturales) elevado a una potencia.

Devuelve el mayor entero que es menor o igual que la expresión numérica


Math.floor
especificada.

Math.log Devuelve el logaritmo natural de un número.

Math.max Devuelve la mayor de dos expresiones numéricas especificadas.

Math.min Devuelve el menor de dos números especificados.

Math.pow Devuelve el valor de una expresión base elevada a una potencia que se especifique.

Math.random Devuelve un número seudoaleatorio entre 0 y 1.

Math.round Devuelve una expresión numérica especificada, redondeada al entero más cercano.

Math.sin Devuelve el seno de un número.

Math.sqrt Devuelve la raíz cuadrada de un número.

Math.tan Devuelve la tangente de un número.

recuerde que no es necesario aprender todo esto de memoria, es mas importante que sepa su
existencia para cuando tenga en mente dar una instrucción sepa donde consultar.

De todas formas, conforme pase el tiempo mas la practica todos estos elementos se harán más
familiares.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ


DESARROLLO DE APLICACIONES WEB
120

También podría gustarte