Skip to content

EsJS
Lenguaje de programación en Español

EsJS

Sintaxis en Español

EsJS es ideal para personas hispanohablantes que quieren comenzar a programar, ya que las instrucciones están escritas en Español

Multiplataforma

EsJS puede ser utilizado tanto del lado del Servidor como del Cliente, gracias a su conversión a JavaScript

Basado en JavaScript

EsJS aprovecha todo el potencial de JavaScript, uno de los lenguajes de programación más utilizados en el mundo

JavaScript con sintaxis en Español

Escribe código en Español y ejecútalo en JavaScript

esjs
funcion serieFibonacci(n) {
  si (n === 1) {
    retornar [0]
  }

  mut serie = [0, 1]

  para (mut i = 2; i < n; i++) {
    serie[i] = serie[i - 1] + serie[i-2]
  }

  retornar serie
}

consola.escribir(
  'Los 10 primeros números de la Serie de Fibonacci son:', 
  ...serieFibonacci(10)
)
/fibonacci.esjs
Abrir ejemplo en EsJS Editor

Modo Terminal

Ejecuta código en una interfaz sencilla

esjs
importar { Terminal } desde '@es-js/terminal'
importar papeles desde "npm/canvas-confetti/+esm"

Terminal.escribir('¿Cuál es tu nombre?')

const nombre = esperar Terminal.leer()

Terminal.escribir(`¡Hola ${nombre}!`)

papeles()
/terminal.esjs
Abrir ejemplo en EsJS Editor

Aprovecha la potencia de JavaScript

EsJS está basado en JavaScript, por lo que puedes utilizar todas las librerías y frameworks que ya conoces

esjs
importar { html, reactive } desde "npm/@arrow-js/core/+esm"
importar { setup } desde "npm/twind/shim/+esm"

const datos = reactive({
  numero: "",
  calculos: [],
})

const operaciones = {
  "+": (acarreo, entrada) => acarreo + entrada,
  "-": (acarreo, entrada) => acarreo - entrada,
  "/": (acarreo, entrada) => acarreo / entrada,
  "*": (acarreo, entrada) => acarreo * entrada,
}

funcion calcular() {
  datos.calculos.agregar(interpretarDecimal(datos.numero) || 0)
  datos.numero = Cadena(
    datos.calculos.reducir(
      (acarreo, op, index, calculos) =>
        esNuN(op) ? operaciones[op](acarreo, calculos[index + 1]) : acarreo,
      datos.calculos.sacarPrimero()
    )
  )
  datos.calculos = []
}

funcion operar(op) {
  si (datos.numero) {
    datos.calculos.agregar(interpretarDecimal(datos.numero))
    datos.calculos.agregar(op)
    datos.numero = ""
  }
}

const operacion = (op) => {
  retornar html`<button class="p-2 bg-indigo-100 hover:bg-indigo-200 rounded"
    @click="${() => operar(op)}">
    ${op}
  </button>`
}

funcion limpiar() {
  datos.numero = ""
  datos.calculos = []
}

const digito = (numero) => {
  retornar html`<button class="p-2 bg-gray-100 hover:bg-gray-200 rounded"
    @click="${() => {
      datos.numero += numero
    }}"
  >
    ${numero}
  </button>`
}

const app = document.getElementById("app")

const plantilla = html`
<div class="w-full h-full grid place-items-center">
  <div class="w-60">
    <p class="p-2 text-center text-xs text-gray-900 dark:text-white">
      Calculadora simple creada con <br/>
      <a href="https://es.js.org/" target="_blank" class="text-indigo-800 dark:text-indigo-400">EsJS</a>
      + 
      <a href="https://www.arrow-js.com/" target="_blank" class="text-indigo-800 dark:text-indigo-400">ArrowJS</a>
      + 
      <a href="https://twind.dev/" target="_blank" class="text-indigo-800 dark:text-indigo-400">Twind</a>
    </p>

    <div class="w-60 bg-white border rounded">
      <div class="w-full h-10 grid items-center px-2 text-xl text-right border-b">${() => datos.numero}</div>
      <div class="w-full h-8 grid items-center px-2 bg-gray-100 text-sm text-right">
        ${() => datos.calculos.join(" ") + " " + datos.numero}
      </div>

      <div class="grid grid-cols-3 gap-1 px-3 py-2 mx-auto">
        ${() => [7, 8, 9, 4, 5, 6, 1, 2, 3, ".", 0].map((n) => digito(n))}
        ${() => Object.keys(operaciones).map((n) => operacion(n))}
        <button class="h-10 text-xs bg-red-100 hover:bg-red-200 rounded" @click="${limpiar}">Limpiar</button>
        <span></span>
        <button class="p-2 bg-green-100 hover:bg-green-200 rounded" @click="${calcular}">&equals;</button>
      </div>
    </div>
  </div>

</div>
`

plantilla(app)

setup({
  mode: "silent",
  darkMode: "class",
})
/calculadora.esjs
Abrir ejemplo en EsJS Editor

¿Tienes dudas?

Chatea con un asistente virtual en la siguiente aplicación creada con EsJS en modo Terminal

Prueba en línea

EsJS Editor es un editor de código en línea para EsJS

Abrir EsJS Editor

Tutorial Interactivo

Aprende EsJS desde cero con este tutorial interactivo

Comienza en minutos

Crea tu proyecto EsJS a partir de una plantilla

npm create esjs@latest

Publicado bajo licencia MIT.