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

Tú y yo compartimos las mismas opiniones, pero el idioma es lo único que es diferente. Lo hago en PHP y tú en JS.

En PHP, hice algunas funciones simples para hacer que algunos nombres de variables difíciles de precompilar y difíciles de aprender sean fáciles.

/ * este archivo hace posible EasyPhp
Archivo realizado por Yash Kumar Verma * /

/ ************************************************* ************************************************** ********************************************* /
// echo para escribir (“”)
función escribir ($ i)
{
echo $ i;
}

función leaveline ()
{
echo “
“;
}

/ ************************************************* ************************************************** ********************************************* /
/ *********** | SUPERGLOBALES | *************** /
/ ************************************************* ************************************************** ********************************************* /

/ ******************************** /
// Devuelve el nombre del archivo del script que se está ejecutando actualmente
función currentfilename ()
{
return $ _SERVER [‘PHP_SELF’];
}

función currentcgiversion ()
{
return $ _SERVER [‘GATEWAY_INTERFACE’];
}

función serverip ()
{
return $ _SERVER [‘SERVER_ADDR’];
}

función servername ()
{
return $ _SERVER [‘SERVER_NAME’];
}

función serveroftware ()
{
return $ _SERVER [‘SERVER_SOFTWARE’];
}

función serverprotocol ()
{
return $ _SERVER [‘SERVER_PROTOCOL’];
}

función requestmethod ()
{
return $ _SERVER [‘SOLICITUD_MÉTODO’];
}

función requesttime ()
{
return $ _SERVER [‘REQUEST_TIME’];
}

función querystring ()
{
return $ _SERVER [‘QUERY_STRING’];
}

función acceptheader ()
{
return $ _SERVER [‘HTTP_ACCEPT’];
}

función hostheader ()
{
return $ _SERVER [‘HTTP_HOST’];
}

función currentpageurl ()
{
return $ _SERVER [‘HTTP_REFERER’];
}

// no se puede mostrar
función https ()
{
return $ _SERVER [‘HTTPS’];
}

función userip ()
{
return $ _SERVER [‘REMOTE_ADDR’];
}

función userport ()
{
return $ _SERVER [‘REMOTE_PORT’];
}

función currentfilenamea ()
{
return $ _SERVER [‘SCRIPT_FILENAME’];
}

función serveradmin ()
{
return $ _SERVER [‘SERVER_ADMIN’];
}

función serverport ()
{
return $ _SERVER [‘SERVER_PORT’];
}

función serverignature ()
{
return $ _SERVER [‘SERVER_SIGNATURE’];
}

// no se puede mostrar
función currentfilenameRd ()
{
return $ _SERVER [‘PATH_TRANSLATED’];
}

función currentfilenamer ()
{
return $ _SERVER [‘SCRIPT_NAME’];
}

podrías hacer todo eso en JS. Saludos!

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);