Tutorial Javascript: Básico

En esta parte explicaré el uso de Javascript que le damos en el desarrollo web.

Formalmente definamos Javascript, este es un lenguaje interpretado, podemos tener orientación a objetos, es imperativo, débilmente tipado y dinámico.

1 - Hola Javascript

Con este ejemplo se puede ver el código mínimo para usar Javascript. Aquí podemos ver que la etiqueta script en donde se pueden definir variables y funciones, en la cual es muy importante que el orden de declaración, ya que si se quiere usar una función o variable tiene que ser previamente declarada.

Para este ejemplo tenemos que se declara la variable mensaje y al presionar el botón se muestra el contenido de la variable en la ventana de alerta. El ejemplo se ve en el explorador como en la siguiente imagen.

2 - Funciones

Con este ejemplo se trata de mostrar la extracción del valor en el campo de entrada y mostrar el mismo en la ventana de alerta al presionar el botón. Además de todo esto se ve la sintaxis que tiene una función y operador de concatenación.

La función para obtener el valor del checkbox es realmente poco amigable, pero más adelante en otros tutoriales usaremos una librería llamada Jquery que nos permitirá hacer esto de una manera mucho más fácil. En el explorador se ve la página como en la siguiente imagen.

Si interactuas varias veces marcando las opciones podrás ver que los mensaje de alerta cambiarán correspondientemente a las opciones marcadas.

3 - Importar archivos y condicionales

Un código con el HTML y el Javascript unidos en un solo archivo no son fáciles de dar soporte, es por eso que tenemos la opción de separarlos en archivos diferentes. Para que esto llegue a funcionar el HTML debe hacer referencia al archivo manejador-funciones.js y en este caso lo hace con la etiqueta script indicando la ruta en el atributo src. Por motivo de buenas prácticas y estilo es recomendable a su vez organizarse por carpetas y por eso es que la ruta dice en el principio js/.

Para esta parte lo que pretendo es mostrar como se hace en Javascript los condicionales y como se elabora un mensaje según las opciones marcadas.

4 - Manipulando contenido y ciclos

Para este ejemplo quiero mostrarles como se hace una variable tipo arreglo y tabla.

En la primera variable diccionario podemos acceder a un valor usuarios que a su vez contiene una lista de nombres y apellidos. Este tipo de variable es muy conveniente de entender ya que en un futuro se usaran mucho para comunicar y almacenar información.

La segunda variable declarada contiene una lista de valores que corresponden a los nombres de excelentes películas :)

Ya dentro de las funciones encontramos la sintaxis de los ciclos y accesos a valores de las variables anteriormente declaradas.

Al haber presionado click en los botones se darán los cambios y verá como se sustituye y agrega contenido en cada etiqueta, dando como resultado la siguiente imagen.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.