Sintaxis y vocabulario de Javascript
Antes ya de empezar a practicar con código real, vamos a comentar brevemente cómo debemos escribir dicho código en Javascript y qué reglas debemos seguir.
- Como dijimos, los scripts (programas) se componen de una serie de instrucciones.
- Cada instrucción o paso lo denominamos sentencia (en inglés, statement).
- Cada sentencia la debemos acabar con un punto y coma ( ; ) que indica su final.
(el uso del punto y coma es más una recomendación, que algo obligatorio. Si hacemos salto de linea al acabar una sentencia el intérprete del navegador entenderá el código, pero puede haber otros casos, por ejemplo con varias sentencias en la misma linea, donde pueda dar lugar a un error. Mejor acostumbrarnos a utilizarlo siempre).
De esta forma, para que nuestro código sea claro, escribiremos cada instrucción en una nueva línea, de esta forma:
linea 1 de código Javascript;
linea 2 de código Javascript;
……
linea N de código Javascript;
</script>
Lo vemos con un ejemplo muy simple donde calculamos un incremento de temperatura y lo mostramos en una ventana emergente en grados centígrados:
1 2 3 4 5 6 |
<script> var grados1 = 23; var grados2 = 30; var incremento = grados2 - grados1; alert("La temperatura subió: " + incremento + " ºC"); </script> |
Recordamos que la numeración de las líneas (1,2,3,4…) no forman parte del código. Los incluyen muchos editores y visualizadores de código para facilitarnos la lectura y poder identificar sentencias (por ejemplo, un depurador puede dar el mensaje: «error en línea X…»).
No te preocupes si no entiendes aún el código. En próximos apartados explicaremos este tipo de sentencias y verás que comprendes todo. Por ahora, para hacerte una idea, puedes copiar el código al editor online que hemos insertado abajo y ver el resultado (en esta ocasión, ya te hemos incluido las etiquetas <script></script>)
Incluir comentarios en el código Javascript
Sea cual sea el lenguaje que utilicemos conviene incluir comentarios en nuestro código para hacerlo más claro. Tenemos dos opciones:
- Comentar (en) una linea mediante ‘ // ‘ (doble barra inclinada ó slash)
- Comentar varias líneas mediante ‘ /* ‘ y ‘ */ ‘
Ejemplo donde empleamos ambas formas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> var grados1 = 23; //declaramos la variable 'grados1' y le asignamos el valor '23' var grados2 = 30; //lo mismo para la variable grados2 /* comentario de varias líneas: ahora vamos a hacer una operación, restando ambas variables, y asignado el resultado a una tercera variable, que llamaremos 'incremento' */ var incremento = grados2 - grados1; //a continuación imprimimos el resultado en un popup alert("La temperatura subió: " + incremento + " ºC"); </script> |
Vamos a analizar estas sentencias para ver que contienen:
- Palabras clave (keywords) y operadores que forman parte del vocabulario de Javascript.
Los explicaremos en próximos apartados pero para que te hagas una primera idea, en este ejemplo, las palabras claves serían ‘var‘ y ‘alert‘ que sirven para declarar una variable y presentar un mensaje respectivamente.
Los operadores serían los signos ‘=‘, ‘–‘ , ‘+‘ que sirven para asignar un valor, realizar una resta y para concatenar (unir) cadenas de texto respectivamente. - Nombres y valores, que asignamos nosotros.
En ese ejemplo, serían los nombres de las variables ‘grado1‘, ‘grado2‘, ‘incremento‘ y los valores ‘23‘ y ‘30‘ (en todos los casos podríamos haber elegido otros diferentes) - Expresiones, que hacen algún tipo de operación con los operadores.
En este ejemplo serían: la asignación del valor a una variable, la operación matemática ‘grados2 – grados1‘ y la unión de textos dentro del paréntesis de ‘alert’
Algunas sentencias pueden contener a su vez un bloque de instrucciones. Estas instrucciones las incluimos entre dos llaves de apertura y cierre ‘ { ‘ y ‘ } ‘ que indican el inicio y final del bloque. Las llaves no llevarán el ‘punto y coma’ final de sentencia, pero sí las instrucciones que estén allí contenidas. Esto lo veremos al explicar las instrucciones condicionales «if» y de bucle «for» en unos próximos apartados
Saber más: podemos escribir todo el código de un script en una sola línea, incluso sin espacios en blanco (en el ejemplo que hemos visto habría que separar solo ‘var’ y ‘gradosX’, para distinguir ambas palabras), pero el código quedaría menos claro para leerlo y no se suele hacer así. Los ‘punto y coma’ marcarían la separación entre las sentencias:
var grados1=23;var grados2=30;var incremento=grados2-grados1;alert("La temperatura subió: " + incremento + " ºC");