JavaScript (lenguaje de programación): ¿Cuáles son algunas ideas para una biblioteca Javascript amigable para los niños?

Intente implementar métodos JavaScript simples que también enseñen a los desarrolladores principiantes cómo consultar un objeto JavaScript de almacenamiento local. Esto no solo es útil, sino que comenzarán a familiarizarse con la idea de cómo funciona una base de datos y las llamadas que puede hacer para manipular sus datos.

El otro día en el trabajo estaba mirando un archivo JS y aunque parecían consultas SQL, era simplemente JavaScript interactuando con un hashmap y recuperando pares clave-valor. El desarrollador principal había escrito funciones de JavaScript que interactuaban con el almacenamiento local HTML5 y actuaban como una llamada a la base de datos.

Por ejemplo, si almacenamos una matriz de usuarios en localstorage:

localStorage.getItem (‘usuarios’);

if (localStorage.getItem (‘usuarios’) === nulo) {

usuarios var = [];

localStorage.setItem (‘usuarios’, JSON.stringify (usuarios));

}

var addUser = function () {

usuario var = $ (‘# nombre de usuario’). val ();

var pw = $ (‘# contraseña’). val ();

usuarios var = JSON.parse (localStorage.getItem (‘usuarios’ || []));

users.push ({usuario: usuario, contraseña: pw});

localStorage.setItem (‘usuarios’, JSON.stringify (usuarios));

};

var listUsers = function () {

if (localStorage.getItem (‘usuarios’)! == nulo) {

usuarios var = JSON.parse (localStorage.getItem (‘usuarios’));

for (var i = 0; i

console.log (usuarios [i], usuarios [i] .user, usuarios [i] .password);

}

}

}

listUsers ();

Depende de lo que quieras que haga la biblioteca. Recientemente escribí algunos vanilla js en CodePen y creé una función `addHeader (” mi título “)` que hizo el trabajo pesado. Si crea suficientes de estas funciones simples, sus hijos podrían componer su propia página web utilizando estas funciones.

Cuando estaba enseñando a mis hijos algunos javascript básicos, lo primero que hicimos fue crear una función que cuente hasta un número. Entonces lo llamarían con `countTo (10)` por ejemplo … y simplemente haría un simple para el bucle que incrementa `i` y registraría el número.

Me enamoré de JavaScript después de descubrir la biblioteca jQuery. Sé que ya no es la biblioteca genial para usar, pero realmente me abrió los ojos al poder del lenguaje. También hace que sea más fácil escribir cosas que en realidad son realmente simples, como obtener un elemento DOM por su ID única.

Dicho esto, sería aún más fácil para los codificadores jóvenes si hubiera una serie de envoltorios adecuadamente nombrados alrededor de la omnipresente función $ que hiciera más obvio lo que estaba sucediendo:

función findById (id) {
return $ (“#” + id);
}

función findByClass (className) {
return $ (“.” + className);
}

var myElement = findById (“mi-id”);
var myClassInstances = findByClass (“mi-clase-nombre”);

Una vez que tenga un objeto jQuery, la API en ellos es bastante sencilla, pero es bastante fácil extender esa API con funciones que son fáciles de usar y recordar:

$ .fn.getValue = function () {
devuelve this.val ();
};

$ .fn.setValue = function (newValue) {
devuelve this.val (newValue);
};

Por supuesto, es probable que desee agregar un código adicional de verificación de errores a su biblioteca con consola o mensajes de alerta que sean útiles y amigables para los nuevos programadores. Escribir mensajes de error útiles probablemente llevará mucho más tiempo que implementar realmente su biblioteca.

Oh! Me gusta esta pregunta

¡Hazlo todo sobre la interfaz de usuario! Esconda HTML y CSS de ellos, y simplifique la construcción de cosas y agregue muchas animaciones complejas que sean fáciles de llamar. ¡No será flexible, pero no lo necesitan!

Use un sistema de diseño de cuadrícula para hacer las cosas realmente fáciles y aún relativamente personalizables. Me imagino que se vería así:

// función create (elementName, gridWidth, gridHeight) -> KidFriendlyElement {}
botón var = crear (‘botón’, 2, 2);
// tal vez use button.set (‘background’, ‘red’) en su lugar?
button.background = ‘rojo’;
// las funciones pueden ser difíciles de entender para los niños … ¿Tal vez usar una cadena y luego evaluarla?
button.onclick (() =>
// move crea un animado del botón que se mueve, sin embargo, se especifican muchos espacios de cuadrícula.
//KidFriendlyElement.prototype.move = function (xGrid, yGrid)
button.move (2,2)
)
//KidFriendlyElement.prototype.add = function (elemento)
page.add (botón);