En este tutorial, escribirá su primer programa JS++. El propósito del programa será obtener un documento HTML para mostrar «¡Hola mundo!» cuando se abre con un navegador web.
código de estudio visual
-
Si bien, en teoría, podría usar un editor de texto estándar como NotePad (en Windows) o TextEdit (en Mac OS), sería mejor usar una aplicación de edición de código especialmente diseñada para ayudar a los programadores con el desarrollo de software. Un buen editor de código compatible con JS++ es Visual Studio Code, que puede encontrar aquí: https://code.visualstudio.com
-
Para instalar Visual Studio Code, haga clic en el botón de descarga y siga la guía de instalación específica de la plataforma aquí: https://code.visualstudio.com/docs/setup/setup-overview
-
Después de la instalación, debe agregar el complemento JS++ Visual Studio Code, que puede encontrar aquí: https://github.com/onux/jspp/tree/master/Editor Integration/Visual Studio Code
Antes de que pueda comenzar a escribir código, deberá decidir qué aplicación usar para escribir.
Para el resto de estos tutoriales, supondremos que está escribiendo su código con Visual Studio Code.
escribiendo el código
Empecemos. Para agrupar sus archivos JS++ para este tutorial, cree una nueva carpeta y asígnele el nombre «HelloWorld». Luego cree un nuevo archivo y asígnele el nombre «HelloWorld.jspp» (sin las comillas). Escribe el siguiente código:
// My first JS++ program
// Adds the text "Hello World!" to the page
external $;
$("#content").text("Hello World!");
No se preocupe por lo que significa el código, lo abordaremos más adelante. Por ahora, concentrémonos en poner en marcha su programa. Guarde HelloWorld.jspp en su carpeta HelloWorld. Luego crea un segundo archivo llamado «HelloWorld.html» y escribe el siguiente código:
<!DOCTYPE html> <title>My first JS++ program</title> <body> <p id="content"></p> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="HelloWorld.jspp.js"></script> </body> </html>
Guarde este archivo en su carpeta HelloWorld.
Ejecutando el programa en Windows
Ahora debería ver dos archivos en su carpeta HelloWorld: HelloWorld.jspp y HelloWorld.html. Haga clic con el botón derecho en HelloWorld.jspp y seleccione «Compilar con JS++». Ahora abra HelloWorld.html con un navegador web. Si todo ha funcionado, el documento debería mostrar «¡Hola mundo!».
Ejecutando el programa en Mac OS / Linux
Abra la Terminal y navegue a su directorio HelloWorld. Escriba «js++ HelloWorld.jspp» sin las comillas. Ahora abra HelloWorld.html con un navegador web. Si todo ha funcionado, el documento debería mostrar «¡Hola mundo!».
¿Cómo funcionó?
Es posible que haya notado que cuando compiló HelloWorld.jspp siguiendo las instrucciones anteriores, se creó un nuevo archivo llamado «HelloWorld.jspp.js» en su carpeta HelloWorld. Este es un archivo JavaScript y el código que contiene es ejecutado por su navegador cuando el navegador abre HelloWorld.html. El efecto de ejecutar ese código es que HelloWorld.html muestra «¡Hola mundo!».
¿Cómo sabe su navegador que debe ejecutar el código en HelloWorld.jspp.js cuando se abre HelloWorld.html? La respuesta está en esta línea de HelloWorld.html:
<script src="HelloWorld.jspp.js"></script>
La <script>etiqueta en un documento HTML contiene código ejecutable o (como en este caso) apunta a otro archivo que contiene código ejecutable. El código en cuestión (normalmente JavaScript) lo ejecuta un navegador cuando se utiliza para abrir el documento HTML. En nuestro caso, el efecto de ejecutar el código en HelloWorld.jspp.js es hacer que el documento muestre «Hello World!». ¿Qué pasa con la otra <script>etiqueta en HelloWorld.html?
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
Esta línea hace referencia a una popular biblioteca de JavaScript llamada jQuery. jQuery es popular porque simplifica el proceso de secuencias de comandos del navegador: le permite hacer cosas con menos código del que tendría que escribir de otra manera.
<script>La etiqueta jQuery es necesaria en HelloWorld.html porque usó jQuery al escribir HelloWorld.jspp. Mira de nuevo su primera línea:
external $;
Esta declaración importa la biblioteca jQuery en HelloWorld.jspp, lo que le permite usar jQuery en el código que viene después. (El símbolo «$» aquí es solo una abreviatura de «jQuery»; veremos de manera más general las declaraciones de importación externa en el Capítulo 9).
Ahora veamos la siguiente línea, dividiéndola en dos partes. Primero, tenemos:
$("#content")
Aquí, usa jQuery para seleccionar el elemento HTML con el ID «contenido»:
<p id="content"></p>
Luego, en la segunda parte de la línea, tenemos:
.text("Hello World!");
Esto establece el texto del elemento seleccionado en «¡Hola mundo!».
Dado que usó jQuery al escribir HelloWorld.jspp, también se usa en el archivo HelloWorld.jspp.js que se creó cuando compiló HelloWorld.jspp. Es por eso que <script>se necesita la etiqueta jQuery en HelloWorld.html: sin ella, su navegador no podría comprender el código jQuery en HelloWorld.jspp.js.
Con suerte, esto debería brindarle una descripción general de la forma en que se usa JS ++ en combinación con JavaScript y jQuery, al menos en el contexto del proyecto HelloWorld. No se preocupe si siente que aún no tiene una comprensión completa de estos temas en esta etapa. A medida que avance en los tutoriales, obtendrá una comprensión más general de JS++ y su relación con JavaScript y jQuery.
Publicación traducida automáticamente
Artículo escrito por CharlesKozenyPelling y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA