From c2bd1ea17e51f84f2a49ca43c44b616d727e09b7 Mon Sep 17 00:00:00 2001 From: Critickal Games Date: Wed, 10 Apr 2024 18:49:18 -0300 Subject: [PATCH] =?UTF-8?q?S=C3=B3lo=20faltan=20los=20.MD=20y=20gozar=20B)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- critickalnihongo/CSS/estilos.css | 23 + .../botones_json/jp/btn_clases.json | 11 - .../{botones_json => clases}/btn_idioma.json | 2 +- critickalnihongo/clases/es/btn_cursos.json | 5 + critickalnihongo/clases/es/jp/btn_clases.json | 11 + critickalnihongo/documento.md | 218 ------ critickalnihongo/index.html | 691 ++++++++++-------- critickalnihongo/index_GUARDADO.html | 6 - critickalnihongo/js/main.js | 99 ++- critickalnihongo/js/markdownProcessor.js | 113 --- critickalnihongo/js/modulos/constantes.js | 21 + .../js/modulos/crearHTMLconJson.js | 219 ++++++ .../js/modulos/iniciar_botones.js | 36 + critickalnihongo/js/script.js | 7 +- 14 files changed, 779 insertions(+), 683 deletions(-) delete mode 100644 critickalnihongo/botones_json/jp/btn_clases.json rename critickalnihongo/{botones_json => clases}/btn_idioma.json (84%) create mode 100644 critickalnihongo/clases/es/btn_cursos.json create mode 100644 critickalnihongo/clases/es/jp/btn_clases.json delete mode 100644 critickalnihongo/documento.md delete mode 100644 critickalnihongo/js/markdownProcessor.js create mode 100644 critickalnihongo/js/modulos/constantes.js create mode 100644 critickalnihongo/js/modulos/crearHTMLconJson.js create mode 100644 critickalnihongo/js/modulos/iniciar_botones.js diff --git a/critickalnihongo/CSS/estilos.css b/critickalnihongo/CSS/estilos.css index e05c3b5..44f79d3 100644 --- a/critickalnihongo/CSS/estilos.css +++ b/critickalnihongo/CSS/estilos.css @@ -22,3 +22,26 @@ table{ margin-left: 20px; margin-right: 20px; } + +.idioma{ + width: 100px; + height: 50px; +} + +.custom-select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-color: #e9ecef; /* Color de fondo */ + border: 1px solid #6c757d; /* Borde */ + padding: 10px; /* Espaciado interno */ + width: 200px; /* Ancho del select */ + font-size: 16px; /* Tamaño de fuente */ + border-radius: 8px; /* Borde redondeado */ + outline: none; /* Eliminar el borde de enfoque */ +} + + /* Estilo para las opciones del select */ +.custom-select option { + padding: 10px; /* Espaciado interno */ +} \ No newline at end of file diff --git a/critickalnihongo/botones_json/jp/btn_clases.json b/critickalnihongo/botones_json/jp/btn_clases.json deleted file mode 100644 index 964a3bb..0000000 --- a/critickalnihongo/botones_json/jp/btn_clases.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "clases":[ - ["clase 1","Japones1"], - ["clase 2","Japones2"], - ["clase 3","Japones3"], - ["calse 4", "Japones4"], - ["calse 4.1", "Japones4-1"], - ["calse 4.2", "Japones4-2"], - ["calse 4.3", "Japones4-3"] - ] -} \ No newline at end of file diff --git a/critickalnihongo/botones_json/btn_idioma.json b/critickalnihongo/clases/btn_idioma.json similarity index 84% rename from critickalnihongo/botones_json/btn_idioma.json rename to critickalnihongo/clases/btn_idioma.json index dee7c8b..1f1aa43 100644 --- a/critickalnihongo/botones_json/btn_idioma.json +++ b/critickalnihongo/clases/btn_idioma.json @@ -1,6 +1,6 @@ { - "idiomas":[ + "filas":[ ["Español","es"], ["Ingles","in"], ["Frances", "fr"] diff --git a/critickalnihongo/clases/es/btn_cursos.json b/critickalnihongo/clases/es/btn_cursos.json new file mode 100644 index 0000000..b037c86 --- /dev/null +++ b/critickalnihongo/clases/es/btn_cursos.json @@ -0,0 +1,5 @@ +{ + "filas":[ + ["Japones","jp"] + ] +} \ No newline at end of file diff --git a/critickalnihongo/clases/es/jp/btn_clases.json b/critickalnihongo/clases/es/jp/btn_clases.json new file mode 100644 index 0000000..6ee2513 --- /dev/null +++ b/critickalnihongo/clases/es/jp/btn_clases.json @@ -0,0 +1,11 @@ +{ + "filas":[ + ["clase 1","es_jp1"], + ["clase 2","es_jp2"], + ["clase 3","es_jp3"], + ["calse 4", "es_jp4"], + ["calse 4.1", "es_jp4_1"], + ["calse 4.2", "es_jp4_2"], + ["calse 4.3", "es_jp4_3"] + ] +} \ No newline at end of file diff --git a/critickalnihongo/documento.md b/critickalnihongo/documento.md deleted file mode 100644 index 5ee30be..0000000 --- a/critickalnihongo/documento.md +++ /dev/null @@ -1,218 +0,0 @@ -# Temas a tocar -1. Nomenclatura básica -2. Variables -3. Estructuras de control -4. Funciones -5. Paradigmas - -# División por niveles -1. Fácil - 1. ¿Qué son las:...? - 1. Variables - 2. Estructuras de control - 3. Funciones - 2. ¿Cómo funcionan? - 3. Sintaxis básica de - 4. Paradigmas -2. Medio - 1. Nomenclatura general para hablar - 1. Software y Hardware. ¿Qué son? - 2. Comentarios - 3. Identificadores - 4. Palabras reservadas - 5. Declarar variables - 6. Instanciar variables - 7. Identación - 8. Funciones y métodos - 9. Scripts - 10. Módulos - 11. Lenguajes de programación - 1. Propiedades de los lenguajes de programación - 12. Compilación y descomplilación - 13. Binario, hexadecimal y decimal - 14. Api - 15. Workframes - 16. Arquitectura de software - 17. Diseño de software - 2. Paradigmas - 1. Nomenclatura básica de paradigmas comunes - 2. Ejemplos de paradigmas - 3. Sintaxis general - 1. Símbolos que un programador entiende por ser programador. - 2. Operadores - 1. Lógicos - 2. De comparación - 3. Aritméticos - 4. De asignación - 5. De pertenencia - 6. De identidad - 4. Primeros ejemplos de código con Algún lenguaje - 1. Comentarios - 1. Docstrings - 2. Mostrar en pantalla - 3. Aceptar entrada - 4. Guardar datos - 1. Variables - 2. Constantes - 3. Tipado - 4. Alcance - 5. Tipos de datos - 1. Primitivos - 2. Estructuras de datos - 1. Array - 2. Lista - 3. Matriz - 4. Objetos - 5. Otros - 6. Versión "por comprensión" - 3. Objetos - 5. Estructuras de control - 1. No repetitivas - 1. Formato ternario - 2. Repetitivas - 6. Funciones - 1. Partes de la función - 2. Argumentos de la función - 3. Como llamar una función - 4. Decoradores para una función - 7. Clases - 1. Herencia - 1. Herencia múltiple - 2. Tipos de "Clases" - 1. Interfaces - 3. Método Constructor - 4. Métodos - 1. De instancia - 2. Estáticos - 3. De Clase - 4. (OPCIONAL) Métodos mágicos - 5. Instanciar una clase - 8. Manejo de excepciones - 9. Importar módulos - 10. Otros paradigmas - 1. Funcional - 1. Funciones lambdas - 2. Funciones de orden superior - 3. Map, Filter, reduce - 2. Orientado a eventos - 1. Generadores - 2. Corutinas - 3. Async/await - 11. Otras habilidades - 1. Archivos - 1. Persistencia de archivos - 2. Manipulación de archivos - 3. Eliminación de archivos - 2. Uso de APIs externas -3. Avanzado - 1. Es aprender una tecnología de tipo FrameWork o tipo API que sea común o popular en el lenguaje que más te gusta, o que es necesaria para un trabajo especifico. - 2. Librerías gráficas. - 3. Librería de modding de juegos. - 4. Librerías de motores de desarrollo de vídeo juego. - 5. Librerías de algún programa de código abierto como Linux o Obsidian. - -# Guion: Aprende a programar como un senior en 30 minutos - -Si entraste aquí llegaste aquí sabiendo poco o nada sobre programación y deseas llegar a ser un Senior en sólo 30 minutos, entonces te equivocaste de vídeo. Principalmente porque es imposible llegar a ese título gracias a un vídeo o 1000. El título de Senior te lo debe otorgar la empresa en la que trabajas. Si tienes tu propia empresa, te decir que eres Senior. - -Pero, si sabes no sabes nada, sabes poco o no sabes como seguir avanzando en tu desarrollo como programador, éste vídeo te servirá de guía desde lo más básico hasta el punto. - -El vídeo está dividido en 3 partes -1. Fácil: Acá aprenderemos qué son, como se usan y como se escriben o identifican: - 1. Las Variables - 2. Las Estructuras de control - 3. Las Funciones - 4. Los Paradigmas - 1. Paradigma de Programación estructural - 2. Paradigma de Programación Orientada a Objetos(POO) -2. Medio: Donde veremos conceptos y nomenclaturas hasta ejemplos de código profundizando en todo lo ya visto - 1. Nomenclatura general para hablar - 2. Código limpio - 3. Paradigmas - 4. Sintaxis general - 5. Primeros ejemplos de código con Algún lenguaje -3. Avanzado: Yo considero que éste es ya el punto máximo al que vas a llegar, quieres llegar o necesitas llegar. Se compone de varias cosas, pero todas son más o menos lo mismo: aprender a leer la documentación de herramientas populares o necesarias para otro tipo de tareas - 1. Es aprender una tecnología de tipo FrameWork o tipo API que sea común o popular en el lenguaje que más te gusta, o que es necesaria para un trabajo especifico. - 2. Librerías gráficas. - 3. Librería de modding de juegos. - 4. Librerías de motores de desarrollo de vídeo juego - 5. Librerías de algún programa de código abierto como Linux o Obsidian. - 1. Con éste último punto aprenderás a como crear tus propias librerías extensas y a mantener nomenclatura -4. Hacker: La cúspide de la informática. Consta de conocimientos profundos de sociología y tecnología - 1. Diría algo sobre esto, pero hay muchos canales muy buenos que explican una ruta pautada para aprender a hackear y yo no me siento capacitado para hablar de esto, además de que lo mío es la programación, no la informática. Un hacker programa, sí, pero también encuentra vulnerabilidades en sistemas operativos, programas, en protocolos dentro de la empresa y demás cosas que no se limitan a crear AIMBOTS para jueguitos, o virus que minan cryptos. Es un mundo muy amplio y casi que un tema a parte que tiene su propia carrera conocida como Ciberseguridad. - - -El vídeo se separará en 3 partes, siendo esta la primera en la que hablo sólo de las cosas de nivel fácil, la siguiente parte será el nivel medio(aunque puede que lo separe en dos), y por último, el nivel avanzado en el que sólo me limitaré a enseñar como leer documentación y a recomendar tecnologías populares. Del hacking sólo haré recomendaciones de vídeos o canales para que aprendan por su cuenta, porque lo más importante en la programación y ciencias dedicadas a la computación, es que debes ser capas de aprender a hacer las cosas por tu cuneta y a aprenderlas por tu cuenta. - -# El nivel Fácil - -Si no sabes programar, o recién estás empezando, debes comprender 1 cosa: un programa es una forma de tratar la información, así que todas tus herramientas van a ir dirigidas a almacenar, tratar, gestionar y mostrar esa información. Un programa bien optimizado es aquél que con pocas instrucciones y el menor uso posible de RAM, logra lo mismo que otros programas. - -¿Qué implica todo esta palabrería? Que, a grandes rasgos y salvando mucho las distancias, todo se reduce a: Variables, que son identificadores que te sirven para guardar información en la memoria RAM del dispositivo; y Estructuras de control, que son el único modo que tiene un dispositivo informático de tomar decisiones. - -Mis afirmaciones pueden ser un poco polémicas quizás, pero son una simplificación de todo lo que es la programación. - -Comencemos a hablar de lo más esencial, y no, no son las variables ni estructuras de control, quiero hablar de la manera para hablar con un dispositivo informático. - -# Los lenguajes de programación - -Claro que cuando hablo de "hablar con los dispositivos" no me refiero a que le digas "Okey Google, hazme 2+2"; los ordenadores no entienden estas instrucciones de manera directa, porque sólo trabajan con voltajes. Solemos decir que sólo entienden un sistema binario de 0 o 1; No hay o sí hay corriente. - -Para solucionar éste bache, usamos lenguajes de programación que son clasificados según su cercanía a como hablan las maquinas. Mientras más lejos del 0 y 1 parezca estar, decimos que es de Alto nivel; cuando directamente hay que trabajar con posiciones en la memoria RAM decimos que es de bajo nivel. - -Un ejemplo de lenguaje de bajo nivel, es el lenguaje maquina -![[img/ejemplo de lenguaje maquina.png]] - -No tocaremos éste tipo de lenguaje porque no es lo que se suele pedir para trabajar y yo sólo lo he visto relegado a ser sólo aprendido por diversión. Yo por un tiempo estuve aprendiendo como se leían estos lenguajes y actualmente puedo entender un poco de lo que dice la imagen sin que nadie me lo explique. Si deseas aprender esto como yo alguna vez quise, busca en youtube, hay muchos vídeos en español que explican los suficientemente bien, y si no entiendes algo, lo buscas en internet o preguntas a chat gpt. - -Pero nosotros nos centraremos en los lenguajes de alto nivel. -![[img/lenguaje de alto nivel.jpeg]] - -Quizás te parezca un poco confuso de ver, pero seguro que te parece mucho más fácil que la imagen anterior. Bueno, a los programadores también nos resulta más fácil esto que el lenguaje maquina, por eso los usamos. - -De los lenguajes de programación debe saber: 2 -1. Hay un montón de ellos, pero si aprendiste uno, ya sabes programar en todos los otros. Así que cuando estés aprendiendo algoritmos o estructuras y paradigmas, nunca preguntes: "¿Y eso como se hace en tal lenguaje de programación?" porque los conceptos teóricos son comunes a todos los lenguajes de programación que sean compatibles con el paradigma. -2. Sólo se diferencias por 4 aspectos - 1. Sintaxis: la manera en la que se escriben las cosas. No cambia mucho, pero si lo suficiente como para que tengas que estar de 1 a 3 días para pasar de un lenguaje a otro nuevo - 2. Paradigma: hay tantos lenguajes porque cada uno está pensado para ser más fácil de usar en ciertos tipos de programas o con ciertas pautas de comportamiento. Eso se ve reflejado en los paradigmas del lenguaje; Los 3 más comunes son el Estructurado, la Programación Orientada a Objetos y el funcional. - 3. Tipado: La forma de declarar variables - 4. Compilación: la forma de pasar del lenguaje de programación al lenguaje maquina. Hay algunos que no se compilan(Porque se interpretan), otros que se compilan y algunos como TypeScript que se convierten en de un lenguaje de programación, a otro(en ese último caso se "transpilan"). - -Una última cosa sobre los lenguajes de programación: todos tus programas, independientemente del nivel de abstracción del lenguaje de programación, si se escribe a texto y no con nodos o elementos visuales, se puede programar en un bloc de notas común y corriente, o a papel y lápiz, pero lo común es usar algún IDE(entorno de programación). Aunque el concepto y la definición de qué es o no un IDE es muy obtusa(como casi todas las definiciones en la informática). Yo prefiero decir que para programar se pueden usar: libretas(entornos bonitos como Visual Studio Code que son un bloc de notas glorificado) o Cuadernos(Un entorno pensado para un lenguaje lenguaje o lenguajes y que tiene la capacidad de compilar código. NetBeans o Eclipse siendo ejemplos comunes de estos "Cuadernos") - -Ahora sí, lo realmente relacionado a la programación pura y dura - -# Variables -El termino variable se usa para referirse a un identificador elegido por el programador para representar un valor que a lo largo de un programa puede variar. - -O dicho de forma sencilla: las variables son pequeñas cajas con un nombre que guardan valores de dentro de la memoria RAM. - -Lo normal es decir que las variables son sólo los identificadores de almacenamiento que pueden variar de valor y que si el identificador no puede variar de valor se llama constante, porque así se llama a una variable que no varía: constante. Pero yo prefiero decir lo siguiente: - -Una variable es un espacio en memoria que almacena información. -Existen 4 tipos de variables bajo mi definición: -1. Variables tipo Variable - 1. Tienen la posibilidad de variar su valor a lo largo del proceso de ejecución del programa. -2. Variables tipo Constantes - 1. No tienen la posibilidad de variar su valor a lo largo del proceso de ejecución del programa. -3. Variables tipo Estructuras de dato primitivas - 1. Variables que tienen la posibilidad de guardar múltiples valores a la vez. Una Lista de la compra en programación, se considera una estructura de datos. - 2. Yo considero que las estructuras de datos son "primitivas" porque el siguiente tipo YO y sólo YO lo considero una estructura de datos, pero moderna. -4. Variables tipo Estructura de datos moderna: los objetos - 1. Variables que tienen la posibilidad de guardar múltiples valores a la vez. Los valores de que guardan tienen su propio identificador y se consideran propiedades del objeto. También posee la capacidad de guardar funciones de comportamiento del objeto conocidos como Métodos - 2. Un objeto en programación es un elemento que guarda una representación de algo: un perro, un gato, un auto, una puerta, un humano. Los objetos guardan las propiedades como la estatura, la edad, el color y otros elementos según el objeto; y a su vez guardan el comportamiento que puede seguir el objeto en "métodos". - 3. Yo considero que son estructuras de datos modernas porque son una forma dependiente de un paradigma(el de la programación orientada a objetos) y porque son una forma de estructurar la información. Pero esto es una definición personal para visualizar de una manera simple la programación. - -Ahora, volviendo a lo tradicional con respecto a las variables: Las variables tienen 3 atributos básicos y 3 palabras asociadas. - -1. Sus atributos - 1. Alcance: la programación se puede imaginar que está separada por bloques dentro de bloques. Si creas una variable dentro de un bloque de código, la variable no podrá ser leída por los bloques exteriores, pero si por los bloque interiores. Esta propiedad es muy importante porque muchos errores al principio van relacionados al alcance de las variables. - 2. Tipo: las variables y constantes pueden guardar información de un tipo a la vez. Estos tipos son: Int, para números enteros; Char, para caracteres; Boolean, para valores de verdadero o falso; String, para cadenas de caracteres; Double, para números con coma; Float, para números con coma con menos ceros después de la coma; Alguna estructura de datos como el Array o el List, porque como ya dije, las estructuras de datos son tipos de variables; Objetos, ya se verá más adelante, qué tipos de objetos hay, pero un tipo de objeto puede ser el de Clase Perro o Animal. Eso depende de lo que vayas a programar. - 3. Tipado: si para declarar una variables necesitas decir qué tipo de dato va a guardar o si se puede cambiar el tipo de datos guardado a lo largo del código. Aunque esto es más una propiedad del lenguaje de programación, es importante saber si tus variables son de tipado Dinámico(cambiante) o Estático. -2. Su vocabulario - 1. Identificador: el nombre de la variable - 1. Los identificadores de las variables por norma general comienzan con minúsculas - 2. Los identificadores de las constantes por norma general se escriben todo en mayúsculas o en minúsculas y con una barra baja al principio. Eso depende del lenguaje en cuestión. - 3. Los identificadores nunca empezarán con números o caracteres especiales. La única excepción es la barra baja, pero en algunos lenguaje como Pascal, la barra baja no es admisible en un identificador. - 2. Declarar variable: es decir que reservas un espacio de la RAM con el identificador de preferencia. Un ejemplo: "jugador: String" ahora no puedo crear una nueva variable "jugador" que guarde número de jugadores o un Objeto, porque declaré que guardaré cadenas de caracteres en la variable "jugador"; la variable fue declarada. - 3. Instanciar: siempre, después de declarar una variable, se debe instanciar tarde o temprano para asignarle un valor. Esto se puede hacer a la vez que se declara o tiempo después. \ No newline at end of file diff --git a/critickalnihongo/index.html b/critickalnihongo/index.html index 657022c..48aa897 100644 --- a/critickalnihongo/index.html +++ b/critickalnihongo/index.html @@ -2,40 +2,332 @@ - + - + - diff --git a/critickalnihongo/js/main.js b/critickalnihongo/js/main.js index 80cd7dc..2155140 100644 --- a/critickalnihongo/js/main.js +++ b/critickalnihongo/js/main.js @@ -1,9 +1,94 @@ -import MarkdownProcessor from './js/markdownProcessor.js'; +window.addEventListener("load", main); -window.onload = function() { - // Ruta del archivo Markdown - const markdownFile = 'documento.md'; +import cst from "./modulos/constantes.js"; +import MkP from './modulos/markdownProcessor.js'; +import * as etikedo from "./modulos/manipular_html.js"; + +import insertar_botones from "./modulos/iniciar_botones.js"; + +let idioma_elegido = ""; + + +async function main() { + try { + await insertar_idiomas() + eventos(); + } catch (error) { + console.error + } +} + +async function insertar_idiomas() { + await insertar_botones.insertar("./Clases", "btn_idioma", cst.html_id.collapse.idiomas, cst.html_id.dataset.idiomas, "col-1 mx-3 my-1 btn btn-secondary"); +} +async function insertar_cursos_disponibles(dir) { + const DIR = `./Clases/${dir}`; + await insertar_botones.insertar(DIR, "btn_cursos", cst.html_id.collapse.cursos, cst.html_id.dataset.cursos, "col-1 mx-3 my-1 btn btn-secondary"); + return DIR; +} +async function insertar_clases(dir, dir2) { + const DIR = `${dir}/${dir2}`; + await insertar_botones.insertar(DIR, "btn_clases", cst.html_id.collapse.clases, cst.html_id.dataset.clases, "col-1 mx-3 my-1 btn btn-secondary"); + return DIR; +} +function eventos() { + eventos_btn_idiomas(); +} +function eventos_btn_idiomas() { + const BTN_IDIOMAS = insertar_botones.cxioj_datumaroj(cst.html_id.dataset.idiomas); + BTN_IDIOMAS.forEach(btn => { + btn.addEventListener("click", on_Click_idioma) + }); +} +function eventos_btn_cursos() { + const BTN_CURSOS = insertar_botones.cxioj_datumaroj(cst.html_id.dataset.cursos); + BTN_CURSOS.forEach(btn => { + btn.addEventListener("click", on_Click_curso) + }); +} + +function eventos_btn_clases() { + const BTN_CURSOS = insertar_botones.cxioj_datumaroj(cst.html_id.dataset.clases); + BTN_CURSOS.forEach(btn => { + btn.addEventListener("click", on_Click_clases) + }); +} +async function on_Click_idioma(event) { + const textoBoton = event.target.dataset.idioma; + console.log(textoBoton); + aparecer_btn_cursos(); + idioma_elegido = await insertar_cursos_disponibles(textoBoton); + eventos_btn_cursos(); +} + +function aparecer_btn_cursos() { + let etiqueta = etikedo.troviIdn(cst.html_id.elegir_curso); + etikedo.aldoniAtributon(etiqueta, "style", ""); +} + +async function on_Click_curso(event) { + const textoBoton = event.target.dataset.curso; + aparecer_btn_clases(); + idioma_elegido = await insertar_clases(idioma_elegido, textoBoton); + eventos_btn_clases(); +} + +function aparecer_btn_clases() { + let etiqueta = etikedo.troviIdn(cst.html_id.elegir_clase); + etikedo.aldoniAtributon(etiqueta, "style", ""); +} + +function on_Click_clases(event) { + const textoBoton = event.target.dataset.clases; + procesador_markdown(textoBoton); +} + +function procesador_markdown(archivo) { + // Ruta del archivo Markdown + archivo = "documento.md"; + const markdownFile = `${idioma_elegido}/${archivo}`; + alert(markdownFile) // Obtener el contenido del archivo Markdown fetch(markdownFile) .then(response => { @@ -16,12 +101,12 @@ window.onload = function() { }) .then(data => { // Procesar el contenido del archivo Markdown utilizando el módulo MarkdownProcessor - const processedContent = MarkdownProcessor.process(data); + const processedContent = MkP.process(data); // Mostrar el contenido procesado del archivo Markdown en el div con id 'markdown-content' - document.getElementById('markdown-content').innerHTML = processedContent; + document.getElementById(cst.html_id._section).innerHTML = processedContent; }) .catch(error => { console.error('Error:', error); }); -}; +} \ No newline at end of file diff --git a/critickalnihongo/js/markdownProcessor.js b/critickalnihongo/js/markdownProcessor.js deleted file mode 100644 index d7ddeb9..0000000 --- a/critickalnihongo/js/markdownProcessor.js +++ /dev/null @@ -1,113 +0,0 @@ -// Módulo de procesamiento de Markdown -const MarkdownProcessor = { - // Lista para almacenar las listas ordenadas creadas - orderedLists: [], - - // Método para procesar el contenido Markdown y darle etiquetas y estilo - process: function(markdownContent) { - // Div para contener el contenido procesado - let processedContent = ''; - - // Separar las líneas del contenido Markdown - const lines = markdownContent.split('\n'); - - let cxu_lista = false, cerrar_lista = false; - // Iterar sobre cada línea del contenido Markdown - lines.forEach(line => { - // Procesar la línea - if (line.match(/^\s+\d+\.\s.+/) || line.match(/^\d+\.\s.+/)) { - cxu_lista = true; - cerrar_lista = false; - } else { - cxu_lista = false; - cerrar_lista = true; - } - if (cerrar_lista) { - processedContent += this.closeOrderedLists(); - } - switch (true) { - case cxu_lista: - // Elemento de lista ordenada - processedContent += this.processOrderedListItem(line); - break; - case line.startsWith('#'): - // Título - processedContent += this.processHeader(line); - break; - case line.startsWith('![['): - // Imagen - processedContent += this.processImage(line); - break; - default: - // Otros elementos (párrafos, enlaces, etc.) - processedContent += `${line}\n`; - break; - } - - }); - - // Devolver el contenido procesado - return processedContent; - }, - - // Método para procesar una línea que contiene un elemento de lista ordenada - processOrderedListItem: function(line) { - // Separar el número y el contenido del elemento de lista - const [, indent, number, content] = line.match(/^(\s*)(\d+)\.\s(.+)/); - - // Usar expresión regular para encontrar coincidencias de '\t' - const matches = line.match(/\t/g); - - // Calcular el nivel de la lista según la cantidad de espacios y tabulaciones - // Contar el número de coincidencias - const listLevel = matches ? matches.length : 0; - - // Si el nivel de la lista es 0, es una nueva lista ordenada - if (parseInt(number) === 1) { - const listId = this.orderedLists.length+0; - this.orderedLists.push(listLevel); - return `
  1. ${content}
    2. `; - } else { - // Verificar si el nivel de la lista es menor que el nivel de la lista anterior - const prevListLevel = this.orderedLists[this.orderedLists.length - 1]; - if (listLevel < prevListLevel) { - return this.closeOrderedLists(prevListLevel - listLevel, `
  2. ${content}
    3. `); - } else { - // Agregar el elemento a la lista ordenada actual - return `
  3. ${content}
    4. `; - } - } - }, - - // Método para cerrar todas las listas ordenadas abiertas hasta cierto nivel - closeOrderedLists: function(levelsToClose = 1, content = "") { - let closingTags = ''; - - for (let i = 0; i < levelsToClose; i++) { - closingTags += `
`; - this.orderedLists.pop(); - } - return closingTags + content; - }, - - // Método para procesar una línea que contiene un título - processHeader: function(line) { - // Contar la cantidad de caracteres "#" al inicio de la línea para determinar el nivel del título - const headerLevel = line.match(/^#+/)[0].length; - // Eliminar los caracteres "#" del inicio de la línea - const headerContent = line.replace(/^#+\s*/, ''); - // Devolver el título con el formato HTML correspondiente - return `${headerContent}`; - }, - - // Método para procesar una línea que contiene una imagen - processImage: function(line) { - // Extraer la URL de la imagen de la línea - const imageUrl = line.match(/\[\[(.*?)\]\]/)[1]; - // Devolver la etiqueta de imagen con la URL correspondiente - return `Imagen`; - } -}; - -// Exportar el módulo MarkdownProcessor para su uso en otros archivos -export default MarkdownProcessor; diff --git a/critickalnihongo/js/modulos/constantes.js b/critickalnihongo/js/modulos/constantes.js new file mode 100644 index 0000000..a55e4fa --- /dev/null +++ b/critickalnihongo/js/modulos/constantes.js @@ -0,0 +1,21 @@ +//Exporta etiquetas html + +const cst = { + html_id: { + collapse: { + idiomas: "_idiomas", + cursos: "_cursos", + clases: "_clases", + }, + dataset: { + idiomas:"data-idioma", + cursos:"data-curso", + clases:"data-clase" + }, + elegir_curso: "tu_curso", + elegir_clase: "tu_clase", + _section: "contenedor" + } +} + +export default cst; \ No newline at end of file diff --git a/critickalnihongo/js/modulos/crearHTMLconJson.js b/critickalnihongo/js/modulos/crearHTMLconJson.js new file mode 100644 index 0000000..1875832 --- /dev/null +++ b/critickalnihongo/js/modulos/crearHTMLconJson.js @@ -0,0 +1,219 @@ +import * as etikedo from "./manipularHTML.js"; + +export function crearPagina(ARCHIVO, PADRE) { + console.log(PADRE); + crearTema(ARCHIVO, PADRE); +} +function crearTema(ARCHIVO, PADRE) { + const TEMA_TITULO = ARCHIVO.titulo; + const OBJ_TEMA_TITULO = etikedo.krei(cst.E_H1); + etikedo.aldoniTekston(TEMA_TITULO, OBJ_TEMA_TITULO); + etikedo.aldoniFilon(OBJ_TEMA_TITULO, PADRE); + crearSubtemas(ARCHIVO.subtemas, PADRE); +} +function crearSubtemas(SUBTEMAS, PADRE) { + const ARR_TITULOS = obtenerTitulos(SUBTEMAS); + const OBJ_ARTICLE= etikedo.krei(cst.E_ART) + ARR_TITULOS.forEach(element => { + agregarTituloArticulo(element, OBJ_ARTICLE) + const OBJ_ETIQUETA=(crearParrafo(SUBTEMAS[element], OBJ_ARTICLE)); + }); + console.log(OBJ_ARTICLE); + etikedo.aldoniFilon(OBJ_ARTICLE, PADRE) +} +function obtenerTitulos(object) { + let array=Object.keys(object); + return array; +} +function agregarTituloArticulo(Titulo, Articulo) { + const E_TITULO= etikedo.krei(cst.E_H2); + const E_CENTER = etikedo.krei(cst.E_CENTER); + etikedo.aldoniTekston(Titulo, E_TITULO); + etikedo.aldoniFilon(E_TITULO, E_CENTER); + etikedo.aldoniFilon(E_CENTER, Articulo); +} +function crearParrafo(ARR_PARRAFO, PADRE) { + let obj_etiqueta; + ARR_PARRAFO.forEach(PARRAFO => { + const OBJ_CONTENEDOR= etikedo.krei(cst.E_DIV); + if (PARRAFO.titulo) { + agregarTitulo(PARRAFO, OBJ_CONTENEDOR); + } + if (PARRAFO.etiqueta) { + crearConEtiqueta(PARRAFO, OBJ_CONTENEDOR); + }else{ + crearSinEtiqueta(PARRAFO, obj_etiqueta, OBJ_CONTENEDOR); + } + etikedo.aldoniFilon(OBJ_CONTENEDOR, PADRE); + }); +} +function agregarTitulo(PARRAFO, OBJ_CONTENEDOR) { + const OBJ_H3 = etikedo.krei(cst.E_H3) + etikedo.aldoniTekston(PARRAFO.titulo, OBJ_H3); + etikedo.aldoniFilon(OBJ_H3, OBJ_CONTENEDOR); +} +function crearConEtiqueta(PARRAFO, PADRE) { + const OBJ_ETIQUETA= crearEtiqueta(PARRAFO.etiqueta); + for (const key in PARRAFO) { + mirarAtributo(PARRAFO, key, OBJ_ETIQUETA); + } + etikedo.aldoniFilon(OBJ_ETIQUETA, PADRE); +} +function crearSinEtiqueta(PARRAFO, obj_etiqueta, OBJ_CONTENEDOR) { + const OBJECT=PARRAFO.filas; + for (const key in OBJECT) { + const FILA = PARRAFO.filas[key]; + obj_etiqueta= etikedo.krei(cst.E_P); + + if (FILA.etiqueta) { + console.log(FILA); + crearConEtiqueta(FILA, OBJ_CONTENEDOR); + continue; + } + + for (const p in FILA) { + let parrafo = etikedo.krei(cst.E_P); + parrafo=etikedo.aldoniTekston(FILA[p], parrafo); + etikedo.aldoniFilon(parrafo, obj_etiqueta); + } + etikedo.aldoniFilon(obj_etiqueta, OBJ_CONTENEDOR); + } +} +function crearEtiqueta(etiqueta) { + switch (etiqueta) { + case "tabla": + return etikedo.krei(cst.E_TABLA); + break; + case "lista ordenada": + return etikedo.krei(cst.E_LISTA_ORDENADA); + break; + case "lista no ordenada": + return etikedo.krei(cst.E_LISTA_NO_ORDENADA); + break; + default: + return etikedo.krei(cst.E_DIV); + break; + } +} +function mirarAtributo(PARRAFO, key, PADRE) { + const MATRIZ= PARRAFO[key] + switch (key) { + case "filas": + seleccionarFilas(PARRAFO, MATRIZ, PADRE); + break; + case "contenido": + console.log(key); + break; + case "info": + console.log(key); + break; + case "atr": + console.log(key); + break; + default: + break; + } +} +function seleccionarFilas(PARRAFO, MATRIZ, PADRE) { + switch (PARRAFO.etiqueta) { + case "tabla": + for (const FILA in MATRIZ) { + const OBJ = etikedo.krei(cst.E_TR); + const COLUMNAS= MATRIZ[FILA]; + llenarFilas(OBJ, COLUMNAS); + etikedo.aldoniFilon(OBJ, PADRE); + } + break; + case "div": + for (const FILA in MATRIZ) { + const OBJ = etikedo.krei(cst.E_P); + const COLUMNAS= MATRIZ[FILA]; + llenarFilas(OBJ, COLUMNAS); + etikedo.aldoniFilon(OBJ, PADRE); + } + break; + default://LISTAS + for (const FILA in MATRIZ) { + const OBJ = etikedo.krei(cst.E_LI); + const COLUMNAS= MATRIZ[FILA]; + llenarFilas(OBJ, COLUMNAS); + etikedo.aldoniFilon(OBJ, PADRE); + } + break; + } +} +function llenarFilas(OBJ_FILA, COLUMNAS) { + //RECORRER LAS COLUMNAS + for (const COL in COLUMNAS) { + const COLUMNA = COLUMNAS[COL]; + if (COLUMNA.etiqueta) { + const CONTENEDOR= crearEtiqueta(COLUMNA.etiqueta); + for (const key in COLUMNA) { + mirarAtributo(COLUMNA, key, CONTENEDOR); + } + etikedo.aldoniFilon(CONTENEDOR, OBJ_FILA); + }else{ + if (typeof COLUMNA.info != 'string') { + let key = Object.keys(COLUMNA.info); + const CONTENEDOR= etikedo.krei(key); + etikedo.aldoniTekston(COLUMNA.info[key], CONTENEDOR); + etikedo.aldoniFilon(CONTENEDOR, OBJ_FILA); + console.log(CONTENEDOR); + }else{ + etikedo.aldoniTekston(COLUMNA.info, OBJ_FILA); + } + } + } + + /* + - + */ +} +/* +En el main tengo que: +hacer que sólo abra el json +enviar el json a crearhtmlConJson + Procesar el json con crearhtmlConJson +incertar el html en el index. +*/ + +/* +export function exportHtml- recibe el json y devuelve un html +function crearObjHtml- convierte el json en un objeto +function crearHtml- consigue los atributos del OBJ y elige qué tipo de etiqueta crear +function llenarX- crear un llenar por cada etiqueta. +function procesarATR- para procesar los atributos del objt + +necesito: +abrir el json +conseguir e insertar el titulo del json como h1 +guardar subtemas como un obj +recorrer los titulos de los subtemas como un MAP +cada titulo es un array de obj +cada parrafo de un titulo tiene 3 posibles atr: titulo, contenido, etiqueta, atr, filas +necesito una función para procesar cada ATR de un parrafo: +function titulo/etiqueta/atr/filas/contenido. +*/ + +/* +Todos los JSon son temas +Un tema es una clase + +Los temas tienen- titulo +Los temas tienen- subtemas + +Un subtema es un atricle + +Los subtemas tienen o no- titulo +Los subtemas tienen- contenedores + +Los contenedores son: +[P]-por defecto se crean contenedores P +[otros]-los contenedores "otros" se estructuran en [contenedor][fila][contenido] +Casos esperables de contenedoers: +[table]- {filas:tr}{contenido:td o th} +[div]-{filas:p}{contenido:texto del parrafo} +[listas ordenas o desordenadas]-{filas} + + +*/ \ No newline at end of file diff --git a/critickalnihongo/js/modulos/iniciar_botones.js b/critickalnihongo/js/modulos/iniciar_botones.js new file mode 100644 index 0000000..d0d4bf8 --- /dev/null +++ b/critickalnihongo/js/modulos/iniciar_botones.js @@ -0,0 +1,36 @@ +import * as Xson from "./json.js"; +import * as etikedo from "./manipular_html.js"; + +function abrirJson(carpeta, json) { + return Xson.abrirJson(carpeta, json) + .catch((error) => { + console.error(error); + throw error; // Rechaza la promesa con el error original + }); +} + + +const insertar_botones = { + async insertar(dir, archivo, id_del_destino, dataset, clases) { + try { + const OBJ_DESTINO = etikedo.troviIdn(id_del_destino); + const ARCH = await abrirJson(dir,archivo); + const BOTONES = ARCH.filas; + + for (let index = 0; index < BOTONES.length; index++) { + const OBJ_HIJO = etikedo.krei("button"); + etikedo.aldoniTekston(BOTONES[index][0], OBJ_HIJO); + etikedo.aldoniAtributon(OBJ_HIJO, dataset, BOTONES[index][1]); + etikedo.aldoniAtributon(OBJ_HIJO, "class", clases) + etikedo.aldoniFilon(OBJ_HIJO, OBJ_DESTINO); + } + } catch (error) { + consola(error); + } + }, + cxioj_datumaroj(dataset) { + return document.querySelectorAll(`[${dataset}]`) + } +} + +export default insertar_botones \ No newline at end of file diff --git a/critickalnihongo/js/script.js b/critickalnihongo/js/script.js index eba8950..949c434 100644 --- a/critickalnihongo/js/script.js +++ b/critickalnihongo/js/script.js @@ -1,4 +1,4 @@ -import MdP from './js/modulos/markdownProcessor.js'; +import MarkdownProcessor from './markdownProcessor.js'; window.onload = function() { // Ruta del archivo Markdown @@ -16,13 +16,12 @@ window.onload = function() { }) .then(data => { // Procesar el contenido del archivo Markdown utilizando el módulo MarkdownProcessor - const processedContent = MdP.process(data); + const processedContent = MarkdownProcessor.process(data); // Mostrar el contenido procesado del archivo Markdown en el div con id 'markdown-content' - document.getElementById('markdown-content').innerHTML = processedContent; + document.getElementById('contenedor').innerHTML = processedContent; }) .catch(error => { console.error('Error:', error); }); }; -