Web.JS.¿Por donde empiezo?
Conocido también como JS. Es un lenguaje de Script interpretado, orientado a las páginas web que sirve para extender las capacidades de HTML. Este tipo de lenguaje no es un lenguaje de programación como puede ser Cobol, C, C++, necesita el propio navegador para poder se ejecutado.
¿Para que sirve?.
- HTML. Para la estructura básica de una página web.
- CSS. Para el diseño de la página web, es decir, para hacerlo bonito.
- JavaScript. Para el comportamiento de la página web.
¿Como funciona?
Como pasa con CSS, se puede escribir código JS de forma interna y externa:
- Interna. Se puede implementar dentro de las etiquetas <head></head> o <body></body> pero siempre dentro de las etiquetas <script></script>.
- Externa. Se escribe en un archivo aparte con extensión js.
Interno.
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write('Hola Mundo');
</script>
</body>
</html>Externo.
<html>
<head>
</head>
<body>
<script src="myScript.js"></script>
</body>
</html>/*Las extensiones de los archivos deben ser nombre.js
src. Se especifica el archivo externo que se va a utilizar. También se le puede indicar un camino para saber donde se encuentra el archivo.*/
- Cada instrucción que se escriba en JS debe terminar en punto y coma (;).
- En el caso de que se corte una instrucción para ponerla en la línea siguiente para una mayor legibilidad, el mejor sitio para hacerlo es después de un operador ( =, +, -,* y / ).
Comentarios.
Algo que no debe faltar en una codificación son los comentarios. Se suelen usar para orientar al lector para qué se hacen ciertos procedimientos o para qué se usa ciertas variables…etc.
Para poner comentarios sólo basta con poner el texto entre dos barras // para una sola línea o entre /* y */ para un bloque de texto.
<html>
<head>
</head>
<body>
// <script src="myScript.js"></script> Esto no lo ejecutará.
</body>
</html>Salida de datos.
Existen varias formas de mostrar los datos en JS:
- En un cuadro de alerta con windows.alert().
- En una salida HTML con document.write().
- En un elemento HTML con innerHTML.
- En la propia consola del navegador con console.log().
<!DOCTYPE html>
<html>
<body>
<h1>Mi página web</h1>
<p>Mi párrafo.</p>
<p id="demo"></p><script>
window.alert("hola mundo");
document.write("hola mundo");
document.getElementById("demo").innerHTML = "hola mundo";
console.log("hola mundo");
</script>
</body>
</html>
- window.alert; Se crea una ventana o un cuadro de diálogo en el navegador.
- document.write; Escribe directamente en el cuerpo del documento html, es decir la etiqueta <body></body>.
- console.log; Una herramienta muy útil del navegador para realizar pruebas y testing de java script . Normalmente esta en opciones de desarrollador. Yo soy usuario de firefox y se encuentra en menú/desarrollador web/consola web o directamente en la tecla F12
- ¿document.getElementById(“demo”)?¿Esto que es?. Es una de las formas que tiene Java Script de referirse a un selector en HTML. En este caso se refiere a una id, pero existen muchas otras formas que veremos posteriormente en Selectores de Java Script.
Las variable son nombres que se le da a trozos de memoria para almacenar los datos que interesan de un programa. Las reglas para los nombres son tan común como en cualquier lenguaje de programación.
El primer carácter puede ser una letra, un guión bajo (_) o el signo del dolar ($) y ya a partir de aquí, puede ser letras, subrayados, dígitos o el signo del dolar ($).
JS es sensible a las mayúsculas y minísculas, es decir, que no es lo mismo Variable1, variable1, variAble1…etc. Todas son distintos nombres.
Para definir una variable solo basta poner la palabra reservada var y la asignación o valor que tenga:
var a; // Se Define una variable a.
var x=5; // Se define y asigna valor a la variable x.
var y=8; // Se define y asigna valor a la variable y.
var z=x+5*a; // Se define y asigna valor a la variable z con valores de otras variables haciendo una operación aritmética.
a=22; //No hay porque asignar un valor mientras que se define, se puede hacer en cualquier parte del programa de esta forma.Se pueden hacer todas las combinaciones que quieran, teniendo en cuenta que las variables que se vayan a usar tengan un valor de asignación inicial.
Como ocurre en cualquier lenguaje, los valores deben ser escritos de la siguiente forma:
1405 //Valores enteros.
14.5 //Valores decimales."Juan Pedro" ó 'Juan Pedro' /*Los textos se escriben con comillas dobles o simples.*/var x=1, y=2, nombre="Ismael"; /* Se puede declarar multiples variables a la vez, separándolas adecuadamente con coma y con un punto y coma al finalizar la instrucción. */var nombre="Ismael"+ " "+"Pérez"; /* El signo más no solo sirve para sumar, se puede usar también para concatenar valores como se ve en el ejemplo.var x=1+2+"5" /* Si se pone un número entre comillas, JS lo trata como texto y convierte a texto los demás valores. En este ejemplo lo que hace es sumar 1+2=3 y lo concatena con el 5, y mostrará en la página "35" como un texto convertido y concatenado. Hay que tener cuidado con las comillas.
