Normas de escritura

Lineas y espacios

Al igual que sucede con el lenguaje HTML y CSS, en el código javascript
no se tienen en cuenta los espacios en blanco cuando hay mas de uno
seguido, ni tampoco las tabulaciones ni los saltos de linea; sin embargo
(salvo algunas excepciones) no se debe escribir una misma instrucción o
sentencia en dos lineas distintas, ya que el navegador las interpretará como
dos instrucciones diferentes.
Esta particularidad nos permite añadir tabulaciones y espacios para
poner el código de manera más clara. A efectos de tener el código claro y
entendible, es conveniente poner cada instrucción o sentencia en una línea,
y usando tabulaciones que indiquen qué códigos son más importantes que
otros o si unas instrucciones están anidadas dentro de otras.

Comentarios

Podemos añadir comentarios aclaratorios sobre lo que estamos
escribiendo. El único valor que tienen estos comentarios son aclaraciones
para el programador sobre las instrucciones que se está escribiendo, útiles
sobre todo en el caso de que haya que corregir el código o añadir o quitar
nuevas instrucciones al código ya escrito.
Hay dos formas de insertar un comentario. La primera es un comentario
de una sola línea. para añadirlo se escriben dos barras inclinadas ( // ) y
todo lo que haya escrito detrás de esas dos barras en la misma línea es un
comentario, y será ignorado al ejecutar el programa.
//Éste es un comentario de una sola línea.
La segunda manera de añadir comentarios es de la misma forma que
en el lenguaje CSS, es decir con los signos /* para empezar el comentario,
y los signos */ para acabarlo. En este caso el comentario puede tener más
de una línea.

Separar y agrupar sentencias

Cada orden o instrucción que se da al programa es una sentencia. Lo
normal es acabar cada sentencia con un punto y coma, ( ; ) aunque
Javascript permite poner una sentencia detrás de otra sin ningún tipo de
separación siempre que se escriban en líneas diferentes.
No podemos escribir una misma sentencia en dos líneas diferentes (con
un salto de línea de por medio), ya que sería interpretada como dos
sentencias diferentes.
Para seguir unas buenas costumbres de programación, y tener más
claro el código, nosotros en los ejemplos que hagamos, separaremos las
sentencias con punto y coma.
A veces varias sentencias o elementos deben ir agrupados por formar
parte de un bloque, el cual es tratado de una determinada manera. Tres
son las formas en que podemos encontrar sentencias o elementos
agrupados:
▪ Entre paréntesis: ( ... ... )
▪ Entre corchetes : [ ... ... ]
▪ Entre llaves : { ... ... }
Al estudiar cada tipo concreto se verá cuando hay que usar cada forma
de agrupación.

En el propio documento

Para incluir código Javascript en el propio documento lo haremos
mediante la etiqueta <script .. > </script>. la etiqueta debe escribirse de
la siguiente manera:
<script type="text/javascript">
... codigo javascript ...
</script>
Debemos poner siempre el atributo type="text/javascript" para indicar
que lo que vamos a escribir dentro de la etiqueta es código javascript.
Al código encerrado dentro de la etiqueta se le llama script. Un script
es un fragmento de código que está dentro de una etiqueta, o de un
archivo, y que se ejecuta todo seguido. No importa si tiene una sola
sentencia o miles de ellas siempre que forme un bloque que se ejecute todo
seguido.

En el siguiente enlace vemos como debe quedar la página del código
anterior:
Enlace a ejemplo 1: Javascript en la página.
En color siena hemos destadado el texto del script. La
instrucción alert("texto_a_mostrar"); abre una ventana de alerta que
muestra lo que hay dentro del paréntesis. Esta es una sentencia de las más
sencillas.
La etiqueta script la hemos escrito aquí en la cabacera del documento.
(dentro de la etiqueta head, esto suele ser lo habitual, pero también
podemos escribirla en cualquier otra parte de la página, es decir en la
etiqueta body. Por tanto las etiquetas script pueden colocarse en cualquier
parte de la página, aunque siempre que se pueda, es preferible colocarla
en la cabecera.

Si ponemos el script del ejemplo anterior en un archivo aparte, el
código de la página quedará así:
<!DOCTYPE HTML">
<html>
<head>
<title>Javascript en la página</title>
<script type="text/javascript" src="codigo1.js></script>
</head>
<body>
<p>El script ha abierto una ventana de alerta.</p>
</body>
</html>
Luego deberemos crear un archivo llamado codigo1.js ubicado en la
misma carpeta que el anterior, y cuyo contenido será el codigo javascript
que queremos aplicar: El archivo tendría el siguiente contenido:
alert("Este es mi primer script")
El resultado, es el mismo que en el ejemplo anterior, pero aquí tenemos
la ventaja de poder aplicar el mismo código a varias páginas, para ello
solamente hay que enlazar cada una de las páginas al archivo javascript.

Etiqueta noscript

Puede ser que el usuario no tenga activada la opción de usar Javascript.
Muchos navegadores poseen esta opción. En ese caso el código javascript
no se ejecutará en la página. Sin embargo podemos advertir al usuario de
que debe activar el código mediante el uso de la etiqueta noscript.
Esta es una etiqueta de HTML en la cual su texto sólo se hace visible si
no se tiene activado el código Javascript. con lo cual los usuarios que ya
tienen activado Javascript no la verán, y sí la verán los que no lo tienen.
En esta etiqueta podemos poner una advertencia de que se debe activar
javascript para poder ver bien la página. un ejemplo sería el siguiente.
<noscript>ATENCIÓN: Para poder ver bien esta página debes
permitir el uso de Javascript en la misma. Activa el uso de
javascript.</noscript>

Versiones de Javascript

La primera versión de Javascript fue desarrollada por Netscape en su
navegador 2.0. Pronto fue incorporado por Internet Explorer de forma que
a partir del Internet Explorer 4 todos los navegadores incorporan
Javascript, si bien en Internet Explorer hay algunas instrucciones que
cambian respecto al resto de navegadores.
Actualmente se usa la versión javascript 1.2 que es aceptada por todos
los navegadores, si bien hay unas pocas instrucciones que varían en
versiones antiguas de Internet Explorer.

Qué es una variable

En Javascript se pueden manejar varios tipos de datos: números,
textos, etc. Estos pueden ser escritos directamente, o almacenados en
variables.
Una variable es un elemento que se emplea para almacenar y hacer
referencia a otro valor o dato. Es decir, al igual que en las matemáticas, si
asignamos un valor a un elemento variable, ese elemento tomará ese valor.
por ejemplo:
dias = 7
La variable dias ha tomado el valor numérico 7 .
Si volvemos a definir la misma variable:
dias = 10
El valor de la variable habrá cambiado, ahora la variable dias ha
tomado el valor numérico 10.

Nombres de variables

Podemos usar cualquier palabra para dar nombre a una variable,
siempre que sigamos algunas sencillas normas;
▪ Hay una serie de palabras que son reservadas de javascript, (normalmente
en inglés) las cuales se usan para realizar diferentes acciones. Estas
palabras no pueden usarse como nombres de variables.
▪ Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _
(guión bajo).
▪ El primer carácter no puede ser un número.

Ámbito de las variables

Se llama ámbito de las variables al lugar donde tienen efecto. Las hay
de dos clases, globales y locales.
Las variables locales están disponibles sólamente en una parte de la
página, la cual suele estar delimitada entre llaves { ... } (por ejemplo una
función, un bucle, etc), son creadas dentro de su propio elemento que lo
delimita mediante la palabra reservada var Ejemplo:
function unaFuncion() {
var unaVariable = "texto"
}
Una variable local no tiene ningún valor fuera del elemento que lo
delimita, es decir en el resto de la página.
Las variables globales suelen ser la mayoría y están disponibles en
toda la página. Se pueden declarar en cualquier parte de la página, siempre
que no esté delimitada por llaves, incluso en las zonas delimitadas por
llaves podemos crear variables globales si no usamos la palabra
reservada var.

Veremos también la instrucción document.write() esta instrucción
permite escribir información en la página, pero para ello debemos colocar
el script en el lugar de la página donde queremos que se vea esa
información (dentro del body). Si quieres realizar tú también el script, copia
el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo 3.</title>
</head>
<body>
<h1>Presentación con javascript</h1>
<script language="javascript">
var presentacion = "Hola, bienvenido a mi página"
var pregunta = "¿Cómo te llamas?"
alert(presentacion)
var nombre = prompt(pregunta)
document.write("Hola " + nombre)
</script>
<p>Encantado de conocerte</p>
</body>
</html>

La instrucción prompt debe llevar siempre delante una variable en la que
almacenar el dato que nos pase el usuario. La instrucción prompt admite
un segundo elemento dentro del paréntesis, separado por una coma del
primero, el cual será lo que aparecerá dentro del cuadro de diálogo que
rellena el usuario. Veamos un ejemplo: el siguiente código javascript:
var a = prompt("como te llamas","escribe tu nombre")
lo veremos así: pulsa aquí para verlo
El lugar de la página donde hemos puesto el script no es aleatorio, ya
que si te fijas, la página se ha cargado hasta el punto donde hemos puesto
el script, el resto de la página se carga después de que el script se haya
ejecutado.

Mejorar el script

La instrucción document.write lo que hace en realidad no es añadir texto,
sino código HTML, por lo que podemos mejorar el aspecto de la página si
en lugar de sólo texto añadimos código HTML y además le aplicamos código
CSS. El código podría ser el siguiente (en verde el código CSS y en siena el
Javascript);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo 4.</title>
<style type="text/css">
h1 { font-family: verdana; text-align: center; color: purple; }
p { font: 1.2em arial; color: navy; padding:0.3em 3em }
</style>
</head>
<body>
<h1>Presentación con javascript</h1>
<script language="javascript">
var presentacion = "Hola, bienvenido a mi página"
var pregunta = "¿Cómo te llamas?"
alert(presentacion)
var a = prompt(pregunta)
document.write("<p>hola " + a + "</p>")
</script>
<p>Encantado de conocerte</p>
</body>
</html>

Comillas simples y dobles

Cuando escribimos el código muchas veces necesitamos poner un
elemento con comillas dentro de otro elemento con comillas (por ejemplo
definir un variable de texto con comillas en el texto), En ese caso no
podemos utilizar el mismo tipo de comillas en los dos elementos, ya que al
tener unas comillas abiertas, el segundo elemento interpretará que hay que
cerrar comillas, (y no que se abren otras), por lo tanto debemos poner
comillas simples para uno de ellos y dobles para el otro. un ejemplo típico
es cuando se inserta código javascript en una etiqueta de html:
<p onclick="alert('hola amigos')">Pulsa para ver el
mensaje</p>
En este caso el texto de la instrucción alert está entre comillas simples,
mientras que el valor del atributo onclick está entre comillas dobles.
Si escribes el código anterior en una página, éste se verá así:
Pulsa para ver el mensaje
Al escribir una cadena de texto en la que queramos poner comillas,
también podemos utilizar el mismo sistema, teniendo en cuenta que las
comillas de dentro del texto son las que se verán.

Caracteres de escape

Los caracteres de escape permiten escribir dentro de una cadena de
texto elementos que resultarían problemáticos por pertenecer a la sintaxis
de javascript. Todos ellos empiezan por una contrabarra ( \ barra inclinada
al revés de la normal, en el teclado se encuentra pulsando la tecla AltGr +
� -esquina superior izquierda- ).
Normalmente se escribe la contrabarra seguida del carácter a mostrar,
así para mostrar unas comillas dobles escribiremos \" y las comillas simples
serán \'
otro caracter bastante usado es \n el cual provoca un salto de línea.
La lista completa de los caracteres de escape es la siguiente:
▪ \n : Salto de línea.
▪ \" : Comillas dobles.
▪ \' : Comillas simples.
▪ \t : Tabulador.
▪ \r : Retorno del carro.
▪ \f : Avance de página.
▪ \b : Retroceder espacio.
▪ \\ : Contrabarra.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo 5.</title>
</head>
<body>
<h1>Texto con caracteres especiales: </h1>
<p>Al pulsar en los siguientes elementos de la lista aparecerán
mensajes con caracteres especiales:</p>
<ul>
<li onclick='alert("texto con \"comillas dobles\"")'>Comillas
dobles</li>
<li onclick="alert('texto con \'comillas simples\'')">Comillas
simples</li>
<li onclick="alert('texto \n con \n saltos \n de \n línea')">Saltos
de línea</li>
<li onclick="alert('texto con \t Tabulador')">Tabulador</li>
<li onclick="alert('texto con \r \r \r tres Retorno de
carro')">Retorno de carro</li>
<li onclick="alert('texto con \f tres Avance de página')">Avance de
página</li>
<li onclick="alert('texto con \b Retroceso de espacio')">Retroceder
espacio</li>
<li onclick="alert('Caracter especial \\ contrabarra
\\')">Contrabarra</li>
</ul>
</body>
</html>

Introducción
Los operadores son elementos que permiten hacer operaciones entre
los distintos datos almacenados con javascript. En las operaciones los datos
pueden ser escritos directamente o mediante variables. En esta página
veremos fundamentalmente las operaciones más comunes que suelen
hacerse entre los datos numéricos.

Operaciones clásicas
Podemos hacer las operaciones aritmeticas normales , suma, resta,
multiplicación y división, sin más que poner los signos de las operaciones
entre los números (o las variables que los contienen).
▪ Suma: var suma = 3 + 2;//suma vale 5
▪ Resta: var resta = 3 - 2;//resta vale 1
▪ Multiplicación: var multiplicacion = 3 * 2;//multiplicacion vale 6
▪ División: var division = 3 / 2;//division vale 1.5

Cambiar el tipo de dato

En ocasiones, el dato que tenemos es una cadena de texto con el
número en lugar del número. por ejemplo: a = "57"; a es una cadena de
texto con los caracteres 5 y 7, y no el número 57, para cambiar el tipo de
dato de cadena de texto a numérico usaremos la expresión Number(), de
la siguiente manera:
var a = "57";/El valor de - a - es una cadena de texto
a = Number(a); // ahora el valor de - a - es numérico.
Si el valor de la cadena que convertimos no es un número, la variable
tendrá el valor NaN, este es un valor especial de javascript que indica que
no es un número (Not a Number).
De forma análoga la expresion toString() convierte cualquier otro
elemento que no lo sea en una cadena de texto, así para convertir un
número en cadena de texto haremos lo siguiente:
var a = 43;/El valor es un número
a = toString(a); // ahora el valor es una cadena de texto -
"43" -.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Operadores de asignación compuesta</title>
<style type="text/css">
h1 { text-align: center; font: bold 1.5em arial; padding: 0.5em; margin:
0;}
h2 { text-align: center; font: bold 1.2em arial; padding: 0.2em;
margin: 0;}
p { text-align: left; font: 1em arial; padding: 0.1em; margin: 0;
}
div { border: 1px solid black; width: 45%; margin: 1%; padding: 1%;
float: left}
</style>
</head>
<body>
<h1>Operadores aritméticos con javascript </h1>
<p>En esta página vamos a ver los distintos operadores
aritméticos con javascript.</p>

Veamos cómo está construida la página:
En la cabecera, aparte del título, hemos puesto (destacado en verde)
el estilo CSS que vamos a dar a los principales tipos de texto.En el cuerpo del documento, después del título (etiqueta h1) y de la
presentación(Párrafos), hay un primer script, que mediante la
instrucción prompt, obliga al usuario a definir los dos números con los que
haremos después las operaciones, los cuales los guardamos en las
variables a y b.Los datos obtenidos mediante la instrucción prompt puede que no sean
numericos, (de hecho aunque insertemos números son interpretados como
cadena de texto), por lo que mediante la espresión Number() transformamos
los datos obtenidos en numéricos.En un segundo script, dentro de una etiqueta <div>, realizamos las
operaciones, y les asignamos un valor. (variables: suma, resta,
multiplicacion, division, modulo.