La sintaxis de JavaScript

JavaScript tiene una sintaxis casi como cualquier otro lenguaje de programación, en este lenguaje las variables pueden ser declaradas con un solo tipo de variable. Para explicarlo de una mejor manera veamos el siguiente ejemplo:

JavaScript es lo suficientemente inteligente para saber que tipo de variables son las siguientes, si variables de tipo int, float, string o demás. El valor se lo podemos asignar después o al momento de la declaración.

Valores asignados para una variable

Para asignarle valores a las variables podemos hacerlo de la sigueinte manera:

Como lo dije antes, JavaScript es un lenguaje de programación tan potente e inteligente que, al asignarle los valores a las variables directamente, JavaScript sabe que variables son de tipo entero, flotante, booleano, de tipo long o algún otro valor, basta con solo poner la palabra reservada var y asignarle un valor para que JavaScript pueda saber que tipo de variable es.

Funciones

Al igual que en las variables JavaScript puede saber qué tipo de valor´retorna una variable, puede ser un valor entero, booleano, flotante, etc. Para esto aquí va el siguiente ejemplo:

Como ocurre con las variables, solo tenemos que poner la palabra reservada function, poner el nombre de la funcion con su contenido y JavaScript se encargará de saber exactamente que tipo de dato retorna la función. Así de potente e inteligente es JavaScript.

Mensajes por consola

Los mensajes por consola nos pueden ayudar bastante a la hora de estar buscando errores en el código, la consola te avisa cuando hay un error dentro del código, es por eso que la script se rompe y no funciona, porque el código tiene un error. También la consola se utiliza para darle mensajes a otros programadores, es simple utilizar la consola, bastan con hacer lo siguiente:

Algunos comandos son escritos directamente en la consola, los programadores suelen mandar objetos, variables o algunas otras cosas con el fin de ver que es lo que contiene dicho elemento, por eso, la consola es una buena opción a la hora de estar progrmando, es posible que la llegues a necesitar, y si, lo harás.

Los objetos principales en JavaScript

Existen 3 objetos principales en la web, uno de ellos es el Navigator, el otro es el Document y el otro es Window, con estos objetos podemos interactuar directamente desde JavaScript, podemos utilizar los atributos y los métodos de dichos objetos. Ahora que conocemos que objetos se mueven dentro de la web, pasemos a conocer el DOM el cual no es más que el document.

El DOM

Hablamos de un objeto masivo y grande, el (document). Desde luego estamos hablando de un objeto tan masivo y grande en donde las posibilidades son practicamente infinitas, no hablamos de cualquier objeto. Podemos interactuar con los elementos dentro del DOM utilizando JavaScript, para esto debemos hacer lo siguiente:

Tal vez no comprendes que hemos hecho aquí, lo que hicimos fue darle a un boton un texto que dice añadir y un id el cual tiene un nombre asignado (IdBtn). Ensto nos servirá bastante ya que el botón ahora tiene un identificador único para que nosotros podamos interactuar con él directamente utilizando JavaScript.

Ahora mandamos a llamar al botón desde JavaScript:

Directamente con esta linea de código ya estamos interactuando con el document, estamos extrayendo el elemento input el cual tiene el id llamado IdBtn. Ahora vamos a darle un poco de más protagonísmo a nustro botón.

Mandando alertas por el objeto Window

Con el ejemplo anterior en donde extraímos el input del id llamado IdBtn, vamos a mandar una alerta por medio del objeto Window. Lo haremos de la siguiente forma:

Lo que estamos haciendo aquí es decirle al escuchador de eventos que al elemento btn, (recordemos que es el id de un elemento guardado en la variable btni), le agregamos al elemento un evento llamado "click", luego en la otra parte del parámetro le agregamos una función que queramos ejecutar, en este caso la función clickBtn, esa será la función que se ejecutará una vez que demos "click" en el botón.

Ahora debemos crear esa función, de lo contrario JavaScript nos dará error por medio de la consola dado que todavía no existe ninguna función dentro del código JavaScript, así que vamos a crear esa función:

De esta manera hemos mandado una alerta al precionar el botón añadir directamente utilizando el objeto window el cual mandará un mensaje en nuestra pantalla.

Mandar elementos por consola

Podemos mandar elementos por medio de la consola, un array de elementos se suele mandar cuando tenemos el id del elemento padre, así podemos ver una colección de elementos. En este ejemplo mandaremos el mismo elemento botón al cual le pusimos el id. De esta manera podemos enviar específicamente el elemento o algun atributo del mismo.

¿Que tal si mandamos el atributo value perteneciente al elemento? Agámoslo:

Así de simple mandamos a ver los atributos de cada uno de los elementos, pero bueno, pasemos al diguiente punto.

Modificar estilos de un elemento

Para modificar los estilos de un elemento debemos acceder al atributo style del elemento. Para esto debemos hacer lo siguiente:

De esta manera hemos modificado los estilos de un elemento sin haber tocado el código Css, desde luego con JavaScript se pueden hacer cosas más grandes, podemos modificar más estilos e incluso crear nuevos elementos Html e introducirlos en el document.