Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como javascript

Node JS y ClojureScript

En una entrega pasada hablamos sobre ClojureScript , una librería que compila código Clojure a Javascript. Hoy veremos cómo instalar ClojureScript con la herramienta NPM. Requisitos: Tener instalado Node y Npm. Nociones de Clojure y Javascript. Abrimos una terminal e instalamos la librería: $ npm install -g clojurescript Verificamos la instalación: $ npm list -g Creamos un archivo llamado `` hola.cljs `` Dentro de este escribimos lo siguiente: ( ns hola ) ( defn main [ ] ( js/console.log "Hola, mundo con ClojureScript" ) ) ( main ) Ejecutamos con este comando: $ cljs hola.cljs Si queremos compilar código Clojure a Javascript la recomendación es usar shadow-cljs . Si todo va bien, veremos éste mensaje: Hola , mundo con ClojureScript Continuaremos en próximas entregas. Enlaces: https://www.npmjs.com/package/clojurescript https://clojurescript.org/guides/quick-start

ClojureScript

ClojureScript es un compilador para Clojure orientado a JavaScript. Emite código JavaScript compatible con el modo de compilación avanzado del compilador optimizado Google Closure . Descargando el JAR: https://github.com/clojure/clojurescript/releases/download/r1.12.42/cljs.jar Hola, mundo con ClojureScript Una vez descargado el JAR crearemos la siguiente estructura de carpetas y archivos: hola-mundo/ src/ hola_mundo/ core.cljs cljs.jar El programa `` core.cljs `` contendrá lo siguiente: 1 2 3 ( ns hola-mundo.core ) ( println "¡Hola, mundo en ClojureScript!" ) Ahora para ejecutar abrimos una terminal en la carpeta `` hola-mundo ``: $ java -cp " cljs.jar;src " cljs.main --compile hola-mundo.core --repl Automáticamente se abrirá el navegador en la dirección: http://localhost:9000/ En el REPL teclea lo siguiente: 1 ( js/alert "Hola CLJS!" ) Saldrá un mensaje de alerta: Ahora crearemos u...

Alpine JS

Hace tiempo hablamos sobre librerías y frameworks para desarrollo web en este enlace: https://alquimistadecodigo.blogspot.com/2024/08/frameworks-y-librerias-para-desarrollar.html En Javascript existen decenas de librerías y frameworks que ofrecen la panacea universal a los desarrolladores web. Alpine JS es uno de ellos. Alpine JS es un framework ligero que ofrece las características reactivas y declarativas de frameworks más robustos como Vue JS o React. De cierta manera es considerado un jQuery moderno. Según el sitio oficial posee una colección de: 15 atributos. 6 propiedades. 2 métodos. Comenzaremos con los atributos: Atributos   Atributo   Descripción  x-data  Declarar un nuevo componente Alpine y sus datos para un bloque de HTML.  x-bind  Establecer dinámicamente atributos HTML en un elemento.   x-on   Escuchar eventos del navegador en un elemento.  x-text   Establecer el contenido de te...

Aprendiendo HTML, CSS & JS by ManzDev

  Si quieres aprender HTML, CSS y JS ya no hay excusa para decir que no hay cómo obtener información. Gracias a  https://manz.dev/  quien creó tres sitios para ello: https://lenguajehtml.com/ https://lenguajecss.com/ https://lenguajejs.com/ Los sitios tienen enlaces a vídeos del canal de Youtube  https://www.youtube.com/@ManzDev  y no hay pierde en dar un vistazo a cada uno de ellos.

Crear un proyecto en Typescript

  En este post veremos como crear un proyecto usando Typescript . # Crear directorio mkdir biorritmos & cd biorritmos tsc --init Deberá crearse un archivo llamado tsconfig.json , el cual tendrá el siguiente contenido: { "compilerOptions" : { "target" : "es5" , "module" : "commonjs" , "strict" : true , "esModuleInterop" : true , "skipLibCheck" : true , "forceConsistentCasingInFileNames" : true } } Crearemos un archivo llamado index.ts que tendrá el siguiente contenido: let main = () => { console.log( ` Esto es un ejemplo usando Typescript ` ); } main(); Compilamos y ejecutamos: # Compilamos tsc --watch # Ejecutamos con node node index.js Editamos archivo tsconfig.json : { "compilerOptions" : { ...

Webassembly: Hola, mundo en C

WebAssembly (abreviado Wasm) es un formato de instrucción binaria para una máquina virtual basada en pila. Wasm está diseñado como un objetivo de compilación portátil para lenguajes de programación, lo que permite la implementación en la web para aplicaciones de cliente y servidor. Esto permite que podamos crear código en C, C++, Rust, etc. y ejecutarlo en nuestro navegador. Características: Eficiente y rápido Seguro Abierto y depurable Parte de la plataforma web abierta ¿Y qué con Emscripten? Emscripten es una cadena de herramientas de compilación completa para WebAssembly, que utiliza LLVM, con un enfoque especial en la velocidad, el tamaño y la plataforma web. Con Emscripten se puede: 1. Compilar código C y C++, o cualquier otro lenguaje que use LLVM, en WebAssembly y ejecutarlo en la web, Node.js u otros tiempos de ejecución de wasm. 2. Compilar los tiempos de ejecución de C/C++ de otros lenguajes en WebAssembly y luego ejecutar el código en e...

Haxe en ejemplos (3)

Para recordar... Haxe puede crear aplicaciones multiplataforma dirigidas a JavaScript, C++, C#, Java, JVM, Python, Lua, PHP, Flash y permite el acceso a las capacidades nativas de cada plataforma. Haxe tiene sus propias máquinas virtuales (HashLink y NekoVM), pero también puede ejecutarse en modo interpretado. En este post veremos algunos ejemplos en Haxe .  Para poder ejecutar una aplicación en este lenguaje tecleamos en una terminal: haxe --run Main.hx Ejemplo 1. Convertir un numero flotante (tipo Float) a entero: /** haxe --main Main --interp **/ class Main { static public function main (): Void { var intDivision = Std . int( 34 . 22 / 26 . 67 ); trace ( "Division entera = " ,intDivision); } } Usamos la función para convertir a Int: var intDivision = Std.int(34.22/26.67); Ejemplo 2. Convertir un String a tipo Float. class Main { static public function main (): Void { var floatDivison: Float = Std...

Haxe en ejemplos (2)

    En el post pasado sobre Haxe vimos un pequeño vistazo a este lenguaje. Continuando con la entrega en esta ocasión veremos algunos aspectos de este lenguaje. Mostrar la versión instalada: $haxe --version Ver la ayuda: $haxe --help Main.hx class Main { static public function main (): Void { trace ( "Hola, mundo en Haxe!!" ); } } Ejecutar programa: haxe --run Main.hx Convertir código Haxe a Javascript: $ haxe --main Main --js holamundo.js Con esto el código Haxe (Main.hx) se convertirá a código Javascipt (*.js). Lo podemos comprobar de la siguiente forma: $ cat holamundo.js Vemos el código resultado: // Generated by Haxe 4.0.5 ( function ( $global ) { "use strict" ; var Main = function () { }; Main . main = function () { console . log ( "Main.hx:7:" , "Hola, mundo en Haxe!!" ); }; Main . main (); })({}); Al ser código JS se puede ejecutar con ayuda de Node JS: $ node holamu...

Elm en un vistazo

En pocas palabras, Elm es un lenguaje de programación dedicado al Front-End . El lenguaje promete crear sitios web profesionales con cierta facilidad.  Elm es un lenguaje funcional que se compila en JavaScript. Te ayuda a crear sitios web y aplicaciones web. Tiene un fuerte énfasis en la simplicidad y la calidad de las herramientas. Estructura general de un programa Elm. -- Module El módulo del programa -- Imports Las importaciones (como Java, etc.) -- Main Función principal del programa -- Model El modelo -- View La vista que verá el usuario -- Update Las operaciones a realizar El Hola mundo en Elm: Main.elm -- Module: modulo del programa module Main exposing (..) -- Imports: las importaciones import Html -- Main: funcion principal main = Html . text "Hola, mundo en Elm!!" En el sitio oficial de Elm ( https://guide.elm-lang.org/ ) se puede ver las instrucciones necesarias para su instalación.  Instala...

React JS en un vistazo

  React JS es una librería desarrollada por Facebook para aplicaciones web reactivas. Existen dos formas para desarrollar con React JS:     1. Incluyendo un archivo *.js en tus páginas HTML o     2. Desde la terminal con la aplicación create-react-app (de manera a similar a Angular Cli y/o Vue JS Cli). Para eso requieres tener Node JS (y por ende, NPM). index.html <!DOCTYPE html> <html> <head> <title> Aprendiendo React JS </title> <script crossorigin src= "https://unpkg.com/react@17/umd/react.development.js" ></script> <script crossorigin src= "https://unpkg.com/react-dom@17/umd/react-dom.development.js" ></script> <script src= "https://unpkg.com/babel-standalone@6.15.0/babel.min.js" ></script> <script> function inicio(){ alert( "Iniciando con React JS" ); console.log( ...

Go: un lenguaje moderno

Golang es un lenguaje relativamente moderno que pretende ser una mejor alternativa a lenguajes como C/C++, Python, C# y Java (entre otros más como Erlang y/o Elixir). Ofrece al desarrollador la capacidad de crear "cosas complejas" de manera más fácil, por ejemplo crear aplicaciones web sin tener que descargar un IDE, un servidor web, configurar miles de archivos XML (ojo ahí Java). servidor.go package main import ( "io" "net/http" ) func main () { http . HandleFunc ( "/" , saludo ) http . ListenAndServe ( ":8000" , nil ) } func saludo ( w http . ResponseWriter , peticion * http . Request ) { io . WriteString ( w , "Hola, mundo desde Golang!!" ) } Ejecutando: $ go run servidor Abrimos el navegador en http://localhost:8000/ Si esto lo hubiesemos hecho en Java y/o C# nos hubiese llevado más tiempo, es la verdad. Golang deja a más de uno sorprendido. Links: https://github.com...

Instalando Dart

El lenguaje Dart es seguro para los tipos; utiliza la verificación de tipo estático para garantizar que el valor de una variable siempre coincida con el tipo estático de la variable. A veces, esto se conoce como escritura por sonido. Aunque los tipos son obligatorios, las anotaciones de tipos son opcionales debido a la inferencia de tipos. El sistema de mecanografía Dart también es flexible, lo que permite el uso de un tipo dinámico combinado con comprobaciones en tiempo de ejecución, lo que puede ser útil durante la experimentación o para el código que necesita ser especialmente dinámico. En este post instalaremos Dart. Comenzaremos descargado, escribiendo algunos ejemplos, compilarlos y crear los ejecutables. Descargando paquetes Dart: $ sudo apt-get update $ sudo apt-get install apt-transport-https $ sudo sh -c 'wget -qO- https: //dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' $ sudo sh -c 'wget -qO- https: //storage...

Angular en un vistazo

Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. En este post veremos como instalar Typescript y Angular, así como crear e iniciar una aplicación. Instalar Typescript $ npm install -g typescript $ npm list --global Listar versión de Typescript $ tsc --version Instalar Angular Cli $ npm install -g @angular/cli $ npm list --global Listar versión instalada $ ng version Levantar servidor $ ng serve -o Vamos a http://localhost:4200 Crear un proyecto y levantar servidor $ ng new proyecto $ cd proyecto $ ng serve -o Vamos a http://localhost:4200 Dependiendo de la versión instalada se mostrará una página de inicio. Nota: No olvidar que el lenguaje de programación que usa este Framework es Typescript, que una vez compilado creará el código Javascript que interpretará el navegador. Quien ha usado este lenguaje entende...