Hola a todos, espero que est茅n bien 馃 馃
En este nuevo post les explicar茅 como podemos agregar c贸digo javascript en nuestro archivo html y as铆 lograr darle funcionalidad a nuestra p谩gina web.
La forma de agregar javascript a nuestro c贸digo html es muy similar a como lo hacemos con CSS, b谩sicamente podemos hacerlo de 3 formas diferentes, como lo veremos a continuaci贸n.... 馃 馃
JavaScript en elementos HTML
La primer forma de hacerlo es agregando c贸digo javascript dentro de cada etiqueta html de la forma <button onclick="alert('Un mensaje de prueba')"></button> de esta forma vemos como un atributo html en este caso 'onclick' nos permite agregar un c贸digo javascript, este atributo sirve para ejecutar un evento de javascript, es decir que cuando se le haga click en el elemento que lleve el atributo se va a ejecutar el c贸digo javascript que hay dentro.
En el navegador vemos lo siguiente ....
Y si damos click en el boton, podemos ver el siguiente mensaje en la ventana popUp...
Esta forma no es muy recomendable ya que no se ve c贸digo muy limpio en el HTML y complica el mantenimiento de c贸digo javascript, normalmente solo se usa para ejecutar algunos eventos como lo vimos en este ejemplo pero no para c贸digos muy extensos. 馃憦 馃憦 馃憦
JavaScript en el archivo HTML
En esta segunda forma tenemos la opci贸n de incluirlo directamente en el archivo html es decir incluir todo el javascript que necesitemos, no solo eventos si no funciones, variables, bucles etc.... en este caso este c贸digo debe ir dentro de las etiquetas <script> /*C贸digo Javascript*/ </script>, esta opci贸n es muy 煤til pero no muy recomendada ya que lo mejor es separar nuestros c贸digos y poder optimizar lo mejor posible nuestra web.
La etiqueta la podemos incluir en cualquier parte de nuestro c贸digo html, solo que lo recomendable es incluirlo en las etiquetas <head></head>
El principal inconveniente es que si se quiere hacer una modificaci贸n en el bloque de c贸digo, es necesario modificar todas las p谩ginas que incluyen ese mismo bloque de c贸digo JavaScript.
JavaScript en un archivo externo
Esta es la 煤ltima forma y la m谩s recomendable ya que podemos separar nuestro c贸digo html del javascript y as铆 podremos entender mejor y ser muchos m谩s ordenados al momento de crear c贸digo y m谩s si tenemos muchas l铆neas.
Lo primero que debemos de saber es que el archivo javascript debe tener la siguiente sintaxis 'nombre.js' siempre debe llevar la extension 'js' ya que es la que nos indica que es c贸digo javascript lo que va ir dentro.
Una vez tengamos creado nuestro archivo nombre.js debemos agregarlo en el documento html de la siguiente forma....
Luego de vincular el archivo, ahora lo que hacemos es colocar todo el c贸digo javascript dentro de nuestro archivo 'nombre.js' as铆....
Es solo eso por este post, espero que nos haya quedado claro y podamos ponerlo en pr谩ctica para poder empezar a construir nuestra p谩gina web con todo lo que ya conocemos.
Saludos! 馃憢 馃憢 馃憢