¿Qué es JavaScript?
JavaScript es un lenguaje de script simple inventado específicamente para usar en navegadores web para hacer que los sitios web sean más dinámicos . Por sí solo, HTML es capaz de generar más o menos páginas estáticas. Una vez que los cargue, su vista no cambiará mucho hasta que haga clic en un enlace para ir a una nueva página. Agregar JavaScript a su código le permite cambiar la apariencia del documento, desde cambiar el texto hasta cambiar los colores, hasta cambiar las opciones disponibles en una lista desplegable (¡y mucho, mucho más!).
JavaScript es un lenguaje del lado del cliente , lo que significa que toda la acción se produce en el lado de las cosas (del lector) del cliente. Esto significa que no se requieren viajes al servidor para que los JavaScripts entren en funcionamiento, lo que ralentizaría enormemente el proceso. Las operaciones de JavaScript se realizan generalmente de forma instantánea. De hecho, JavaScript se usa a menudo para realizar operaciones que de otro modo podrían entorpecer el servidor, como la validación de entrada de formulario . Esta distribución de trabajo al servicio relativamente rápido del lado del cliente acelera el proceso.
Los JavaScripts están integrados en el entorno de navegación, lo que significa que pueden obtener información sobre el navegador y la página HTML, y modificar esta información, cambiando así la forma en que se presentan las cosas en su pantalla. Este acceso a la información le da a JavaScript un gran poder para modificar la experiencia de navegación. También pueden reaccionar a eventos , como cuando el usuario hace clic con el mouse o apunta a un elemento de página determinado. Esta es también una habilidad muy poderosa.
Lo más importante es que JavaScript no es demasiado difícil de aprender y usar. Es un poco técnico, sí; pero después de unos pocos tutoriales, tendrá algunos scripts útiles en sus páginas y tendrá los conocimientos necesarios para modificar y utilizar los innumerables scripts gratuitos disponibles en toda la web.
Nota de compatibilidad del navegador:
JavaScript es compatible con Netscape 2+, Internet Explorer 3+, Opera 3+ y la mayoría de los otros navegadores web modernos. Cada nueva versión de los navegadores principales ha admitido nuevas generaciones de comandos de JavaScript, cada uno más complejo que el anterior. La compatibilidad de secuencias de comandos aún puede ser un problema, ya que el idioma no está tan estandarizado como HTML ; pero esto se está trabajando en
La conexión de Java
Comprensiblemente, la conexión de JavaScript con Java se malinterpreta regularmente. No són la misma cosa.
- »Java , creado por » Sun Microsystems , es un lenguaje de programación de computadora completo como C ++, adecuado para escribir programas completos a gran escala.
- JavaScript, por otro lado, fue creado por »Netscape . Hasta cierto punto, se basaba en Java (la sintaxis del código es muy similar), pero rara vez se utiliza para nada fuera de un navegador. En realidad, originalmente se llamaría 'Live Script', pero la creciente popularidad de Java en ese momento hizo que Netscape cambiara su nombre por razones de mercadeo.
Un lenguaje de scripting puede considerarse como un lenguaje de programación ligero; uno que puede ser interpretado por un navegador sin necesidad de ser compilado primero. El script es en realidad solo algunos comandos que el navegador tiene que hacer.
Los dos comparten muchas similitudes. El más prominente de estos es que son formas de programación orientada a objetos u OOP. Esto significa que trabajas con objetos pequeños que se combinan para formar objetos más grandes. Vamos a entrar en eso más en un minuto.
Es posible que haya oído hablar de Java que se utiliza junto con HTML a través de elementos llamados applets . Estas aplicaciones a pequeña escala se pueden incrustar en páginas para efectos muy avanzados, pero no son del todo prácticas, debido al gran tamaño de los archivos y la utilidad adicional limitada. JavaScript por otro lado, puede ser muy útil.
Versiones
Al igual que todas las herramientas que usamos para crear nuestros sitios, JavaScript ha estado llegando a las versiones, desde la versión 1.0 que apareció en Netscape Navigator 2. En las versiones posteriores, JavaScript se graduó a través de las versiones 1.1, 1.2 y 1.3. Microsoft hizo un intento de compatibilidad con JS 1.0 en Internet Explorer 3, pero fue muy poco confiable y poco confiable. Microsoft apodó su versión "JScript". La última generación de navegadores tiene un soporte decente para JavaScript 1.3.
La consternación de los codificadores ante las incompatibilidades provocadas por los diferentes niveles de soporte de los dos navegadores finalmente llevó a una versión estandarizada de JavaScript, a veces llamada ECMAScript , después de sus estandarizadores, el »ECMA . Los navegadores modernos como IE8, Firefox y Safari tienen un buen soporte para este estándar, y recientemente se ha trabajado mucho para garantizar que todos los navegadores operen en el mismo DOM ...
El dom
El DOM, o Modelo de objetos de documento , es el marco de trabajo de JavaScript. ¿Recuerdas cómo dije que JavaScript es una forma de programación orientada a objetos? Este concepto significa que podemos pensar en todos los elementos que forman una página como objetos . El documento en sí es un objeto, compuesto de otros objetos como formularios, imágenes y tablas. Los objetos de formulario también se componen de más objetos como cuadros de texto y botones de envío.
Todos estos objetos tienen propiedades , con valores que definen su color, su longitud, etc. JavaScript puede leer estas propiedades y modificarlas, o reaccionar ante eventos que ocurren en los objetos, cambiando instantáneamente el objeto en la ventana del navegador. Un script puede responder a la interacción del usuario con la página o puede ejecutarse solo.
Las acciones que realiza su script en o con objetos se denominan métodos . Estas son funciones incorporadas en objetos. El manejo deeventos controlados por el usuario, como los clics y el movimiento del mouse, se logra a través de comandos llamados manejadores de eventos . Juntos, estos conceptos forman la base de toda la programación de JavaScript.
El DOM le permite acceder a estos objetos de página. Como se mencionó anteriormente, durante años ha habido una mala situación en la que los dos navegadores principales admitían diferentes versiones de DOM. El DOM de Netscape no era compatible con Microsoft, por lo que las páginas DHTML(HTML dinámico) escritas para funcionar en un navegador no funcionaban en otro. Recientemente, el W3C ha estandarizado el modelo, creando el »DOM nivel 1 . Descansa tranquilo sin embargo; a menos que esté planeando crear vastos sitios con JavaScript, esto probablemente no se convierta en un problema para usted. No todavía, de todos modos. Discutiremos el DOM en mayor profundidad en Objetos y Propiedades .
Implementación
Entonces, ¿cómo vamos a tener nuestro JavaScript en nuestras páginas? JavaScript está escrito de la misma manera que HTML: en un editor de texto. La implementación de JS es bastante similar a CSS ; puede vincular a archivos externos (con la extensión de archivo .js), o escribir bloques de código directamente en sus documentos HTML con la <script>etiqueta. Se aplican los criterios de selección habituales: si está utilizando el mismo script en muchas páginas, enlace a un archivo externo; de lo contrario incrustar.
Haremos nuestro primer ejemplo con un script incrustado . Esto simplemente imprimirá una línea de texto a la página.
<tipo de script = "texto / javascript">
<! -
document.write ("<i> Hello World! </i>");
// ->
</script>
Cuando coloques eso en tu código, el texto Hello World aparecerá en tu pantalla donde sea que lo pongas. Al igual que:
Hola Mundo!
Vamos a desglosar esto un poco. La scriptetiqueta incluye cualquier código de script que desee utilizar. El typeatributo que tenemos allí alerta al navegador del tipo de script que está a punto de tratar (hay otros, como VBScript ), y por eso lo ayuda a interpretar el código.
Los comentarios sobre el código del script están allí para que los navegadores antiguos que no entienden la scriptetiqueta no muestren el código como texto en la página. Cualquier navegador que pueda hacer JavaScript ignorará los comentarios. También tenga en cuenta que para el beneficio de Netscape, el final del comentario se comenta utilizando un comentario de JavaScript (dos barras diagonales hacia adelante para comentar el resto de la línea). Esto evita que se produzcan errores en las versiones anteriores de Netscape.
Scripts externos
Para importar scripts desde archivos JS externos, guarde el código en un archivo de texto con la .jsextensión ; Sin las scriptetiquetas y comentarios. En este caso, el código solo sería la document.write("Hello World!");parte (aunque esto no hará mucho por sí solo). Luego enlazamos a este documento, en la página <head>, con
<tipo de script = "texto / javascript"
src = "simplemethods.js"> </script>
Ahora todos los métodos y variables que están en ese archivo están disponibles para usar en la página. Aprenderemos más sobre eso en el siguiente tutorial.
Tenga en cuenta que JavaScript Incluye , como esto, no son compatibles con Netscape 2 y Explorer 3. También recuerde la etiqueta final. Se obtienen los beneficios de abstracción habituales: puede actualizar ese archivo de script y hacer que cambien todas sus páginas; y el archivo de script se almacena en caché, lo que significa que no es necesario descargarlo de nuevo para cada página que lo use.
Siempre deberíamos colocar los recursos en el navegadorhead para que el navegador esté listo para ejecutar scripts cuando el usuario los solicite . Si un usuario hiciera clic en un botón que pedía una secuencia de comandos que el navegador aún no conocía, obtendría un error. Teniéndolos en el headmedio, siempre están listos antes de ser necesitados.
Un simple script
Entonces, ¿qué logró realmente nuestro código anterior? Échale otro vistazo.
<tipo de script = "texto / javascript">
<! -
document.write ("<i> Hello World! </i>");
// ->
</script>
Comenzamos tomando el control del documentobjeto y usamos su write()método para generar texto en el documento. El texto dentro de las comillas dobles se llama Cadena, y esta cadena se agregará a la página. Simple, ¿verdad? Para usar los métodos o propiedades de un objeto, escribimos el nombre del objeto, un punto y luego el nombre del método / propiedad. Cada línea de guión termina con un punto y coma . JavaScript no es muy indulgente; Si comete algún error al escribir esto, obtendrá un error de secuencia de comandos, así que codifique con cuidado.
Haremos un ejemplo más antes de terminar este tutorial. Este script creará algo de HTML y texto.
<tipo de script = "texto / javascript">
<! -
document.write ("<h1> Título principal </h1>");
document.write ("<p align = 'right'> Body </p>");
// ->
</script>
Tenga en cuenta que al citar valores de atributos, tiene que usar comillas simples , como si usara comillas dobles, el writemétodo pensaría que la cadena se había terminado prematuramente, y obtendría un error.
<noscript>
La <noscript>etiqueta es una forma en que puede dar contenido alternativo a los navegadores que no admiten JavaScript o a los usuarios modernos que han desactivado JavaScript en sus navegadores. La forma en que funciona es simple: los navegadores antiguos no entenderán la etiqueta y, por lo tanto, la ignorarán y mostrarán lo que contenga. Los navegadores modernos lo entenderán y omitirán sus contenidos. Úsalo así:
<noscript>
<p>Sorry, your browser does not support JavaScript.</p>
</noscript>
También puede intentar dar algo comparable a lo que el script se utiliza para producir. En algunos casos, no se puede escribir un equivalente significativo para un efecto de JavaScript, por lo que cualquier <noscript>contenido será redundante. Sin embargo, siempre debe intentar usar esta etiqueta cuando sea apropiado, ya que ayuda a mantener el contenido accesible .
