A diferencia de los lenguajes como HTML o CSS, que podemos definir como lenguajes de marcas, JavaScript es un lenguaje de programación que usaremos para añadir interactividad a las páginas web. El código JavaScript puede estar dentro del propio archivo HTML utilizando las etiquetas script o mediante archivos externos con extensión .js
JavaScript es un lenguaje interpretado y no genera ningún tipo de código compilado, sino que éste se interpreta en el navegador una vez que se descarga la página que lo contiene. Podemos usar cualquier editor de texto como el bloc de notas de Windows. Aunque sí es altamente aconsejable usar editores de código para facilitarnos el trabajo. La mezcla de JavaScript con HTML se suele conocer con el nombre de HTML Dinámico o DHTML.
En la actualidad JavaScript ya no es opcional en una página web, dado que se exige que tengan dinamismos y una alta usabilidad. En HTML5 se considera que este lenguaje ya forma parte de la norma.
Además, este lenguaje se está volviendo más popular entre el desarrollo web, y aunque su finalidad inicial es interactuar con la parte de cliente, dota de dinamismo al documento HTML. Existen ya, muchos Frameworks que utilizan la sintaxis JavaScript para trabajar del lado del servidor, como node.js, VUE, TypeScript y muchos más.
La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web.
Como se puede apreciar en el código con la etiqueta <script> indicamos la zona que va a contener la codificación JavaScript. Aunque lo más aconsejable es que este bloque de código JS se realice dentro del head de la página no siempre es imprescindible, pues en algunos casos nos veremos obligados a ponerlas dentro del body.
Otra forma de incluir código JS en nuestras páginas, es en un documento externo con la extensión .js.
En estos archivos se suelen poner las funciones, dado que al tratarse de un archivo externo, podemos reutilizarlo enlazándolo desde otros documentos.
Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.
*IMPORTANTE: Debemos tener en cuenta que no podremos usar el mismo bloque de script para llamar a un archivo e incluir código al mismo tiempo.
Este último método es el menos utilizado hoy en día y no es bueno abusar de su uso dado que resulta más complicado efectuar correcciones y/o cambios.
La tendencia actual en la creación de páginas HTML, es dejar lo más limpio este código, separando tanto elementos CSS como JS fuera del bloque principal.
Mediante atributos HTML, como los manejadores de eventos (onclick, onblur...), podemos insertar directamente código JS.
Aunque podemos casi afirmar que cualquiera de nuestras páginas será interpretada con cualquier navegador, dado que está muy extendido, existe una etiqueta que nos da la opción de lanzar un mensaje o acción si se diese el caso de que no lo soportara. La etiqueta noscript.
A diferencia de los lenguajes anteriores JavaScript es mucho más estricto en la forma de escribir el código, haciendo más fácil que cometamos errores de escritura. A continuación enumeramos las reglas más importantes.
CamelCase es un estilo de escritura que se aplica a frases o palabras compuestas. El nombre se debe a que las mayúsculas a lo largo de una palabra en CamelCase se asemejan a las jorobas de un camello. El nombre CamelCase se podría traducir como Mayúsculas/Minúsculas Camello. El término case se traduce como “caja tipográfica”, que a su vez implica si una letra es mayúscula o minúscula y tiene su origen en la disposición de los tipos móviles, en casilleros o cajas.
Existen dos tipos de CamelCase:
UpperCamelCase, cuando la primera letra de cada una de las palabras es mayúscula.
Ejemplo: EjemploDeUpperCamelCase.
lowerCamelCase, igual que la anterior con la excepción de que la primera letra es minúscula. Ejemplo: ejemploDeLowerCamelCase.
Para practicar lo aprendido en esta lección, vamos a hacer uso de una función de JavaScript, llamada alert.
Dicha función, nos permite lanzar una ventana emergente del navegador con un mensaje de tipo texto que insertaremos como parámetro.
Crea un archivo HTML y dentro del bloque de las etiquetas head, inserta el código del ejemplo del alert, mostrado.
Inserta el siguiente código en un archivo con extensión .js y pega el siguiente código. Abre el documento y mira qué pasa.