Javascript Framework : kenada.js

name:"Kenada", version:"3.00", create:"05/11/2008", update:"15/04/2010"

name:"Kenada", version:"3.2", create:"05/11/2008", update:"14/06/2019"

Comment installer notre script

Il n'est pas encore possible d'installer notre script sur votre site car il est en construction, mais il est très prochainement disponible, merci de votre compréhension.

En attendant, vous pouvez si vous le souhaitez nous faire parvenir une demande par courriel à contact@kenada.fr pour devenir beta testeur.

Les raccourcis

Les raccourcis sont des variables globales qu'il est possible d'utiliser partout dans vos scripts. La première catégorie de variables globales permet de compresser toutes les parties de votre code qui utilisent les propriétés DOM pour atteindre un nœud dans l'arborescence HTML et ses propriétés. La seconde catégorie regroupe un ensemble de méthodes compatible Microsoft et Gecko qui facilite le dévelopement de vos applications en JavaScript.

Parfois pour atteindre un nœud, vous devez faire par exemple ceci :

document.body.firstChild.nextSibling.childNodes[3].previousSibling

Maintenant, vous pouvez faire comme ci-dessous pour atteindre le même nœud et vous passerez de 66 à 23 caractères pour cette exemple :

d[b][fC][nS][cN][3][pS]

Comme vous pouvez le remarquer, il y a plusieurs niveau de variables globales secondaires. Le premier niveau contient les méthodes qui sont souvent indispensables. Le second niveau contient des méthodes que le premier niveau se partage, mais vous pouvez aussi vous en servir si vous en avez besoin. Et le dernier niveau se comporte un peu comme une mémoire et contient quelques variables magiques.

sans problème de compatibilité entre navigateurs | facilement et rapidement

INFO : [F] = Facultatif [O] = Obligatoire

$

Permet de cibler un ou plusieurs noeud(s)...

Exemple : $("#test");

• nodes (Array) : contient la liste des noeuds
• loopNodes : permet de faire une boucle pour tous les noeuds ciblés
• click : event click
• hover : event mouseover et mouseout
• event : event
• style : loopNodes ; style
• css : ne fonctionne pas !
• magic(context, event, fff, ffff)
• context (Object) = exemple : this
• event (String) = exemple : "click"
• fff (Function) = callback event function(e) { ... }, pour enchainer sur la requête XHR, il faut retourner un JSON.
• ffff (Function) = callback xhr function(json) { ... }

$$.ID

Permet de retourner un noeud DOM qui dispose d'un attribut id.

• $$.ID(id);
• [O] id (string) = identifiant du noeud
• Retourne l'élément dom du noeud en question

$$.DOM

• var node = $$.DOM(array, parentNode, option);
• Transformation d'un tableau selon le standards kenada vers un objet dom.
• [O] array = (voir standards...)
• [F] parentNode (dom) = noeud parent de référence pour le noeud en transformation
• [F] option (boolean) = si "true" supprime tous les enfants du noeud parent de référence
• [F] option (number) = insertBefore du childNodes du noeud parent de référence
• Retourne l'élément dom, il est possible de l'utiliser ailleur, ou de faire les modifications en live, mais il ne s'agira pas d'un clone, c'est vraiment l'élément qui est une entité unique... Par contre le array du standards lui disparaît complément à cause des array.shift !

$$.XHR

• $$.XHR(context, datas);
• Permet de réaliser une requête avec la technologie XHR facilement et rapidement sans problème de compatibilité entre navigateurs.
• [O] context (object) = permet de s'adapter simplement aux modules javascript zahra, il s'agit en faite de l'objet "this" dans les pseudos-classes de nos modules, ainsi comme la requête se fait de manière asynchrone, à la réponse de la requête nous sommes toujours dans le même contexte (todo meilleur formulation du texte) !
• [O] datas (json) = à respecter juste un petit standards, dans le sens où quelques mots-clés ne doivent pas être utilisé (todo à noter ses mots-clés).
• Retourne (rien)
• Asynchrone : context.xhr.call(context, json) json = (Object)
• Asynchrone : context.error.call(context, json.error) json.error = (Array)

$$.XML

• $$.XML(url, callback);
• Permet de charger un document XML sur le serveur (ATTENTION compatibilité entre navigateurs).
• [O] url (string) = Chemin du fichier XML
• [O] callback (function) = Fonction asynchrone callback(xml.documentElement);
• Retourne (rien)

$$.EVENT

• $$.EVENT(node, event, context, capture);
• Permet d'affecter à un ou plusieurs noeuds des événements facilement et rapidement sans problème de compatibilité entre navigateurs.
• [O] node (array/node) = il est possible en 1 seul appel de la fonction d'affecter un évenement ou des évenements pour un ou plusieurs éléments.
• [O] event (array/string) = idem element
• [F/O] context (object) = idem context pour s'adapter aux modules javascript zahra si celui-ci n'est pas définit, la réponse doit être dans une fonction qui porte le nom de "event" sinon il s'agit de context.event.call(context, token, e.target, e);, on peut aussi transmettre juste une fonction callback.
• [F] capture (boolean) = capture de l'évenement (jamais rien compris à ça).
• Retourne (rien)
• INFO : Pour supprimer un ou plusieurs events, il suffit juste de rappeler la méthode avec les 2 premiers mêmes arguments !

$$.FIRE

• $$.FIRE(node, e);
• Permet de déclancher un évenement au noeud en question facilement et rapidement sans problème de compatibilité entre navigateurs.
• [O] node (node) = noeud
• [O] e (string) = evenement exemple : click, change, ...
• Retourne (rien)

$$.FORM

• var form = $$.FORM(form, element);
• (Super+optimisée pour zahra !) Permet de gérer un formulaire et ses éléments en appartant des fonctionnalités supplémentaires déjà de base, ainsi que de personnaliser le formulaire avec des fonctions spécifiques...
• [O] form (string) = nom du formulaire
• [F] element (string) = nom de l'élément du formulaire
• Retourne (self) ; les méthodes de bases sont : hidden, visible, disabled (désactive tous les champs en array), enabled (active tous les champs en array)... + elements + form. Il s'agit aussi ici d'un standards qu'il faut par rapport aux mots-clés lorsqu'on crée un formulaire !
• Exemple 1 (initialiser un formulaire) : var form = $.FORM("nom_formulaire")({test:function() { alert(1); }});
• Exemple 2 (appeler une fonction depuis l'extérieur soit sans "this") : $.FORM("nom_formulaire").test();
• Exemple 3 (sélectionner un élement) : var node = $.FORM("nom_formulaire", "element_formulaire");

$$.TIMER

• var timer = $$.TIMER(context, refresh, delay);
• Permet de lancer à intervale régulier une fonction. ATTENTION : auto-exécution !
• ATTENTION "context" vient d'être rajouter il est possible que plusieurs fonction ne fonctionne plus !
• [O] context (object) = this
• [O] refresh (function) = fonction à exécuter : function(o) { ... };o.timer, o.start, o.stop, o.refresh !
• [O] delay (number) = temps en milliseondes, exemple : 1000 = 1 seconde
• Retourne {timer,start,stop,refresh}

Les méthodes principales

Tous les exemples qui suivent se référe au code HTML suivant :

En construction !

$.A

Cette méthode contient des sous-méthodes pratiques pour exploiter les "Array".

$.A::dom

La création d'éléments DOM demande généralement beaucoup de ligne de code et à la fin le code est presque illisible ! Voici un petit exemple de notre façon de faire :

$.O

Cette méthode contient des sous-méthodes pratiques pour exploiter les "Object".

$.O::attributes

Voici un manière simple d'attribuer un ou plusieurs attributs à un nœud :

$.ID

Cette méthode retourne un nœud à partir de son identifiant.

Si par exemple vous souhaitez modifier la couleur du texte dans le nœud qui porte l'identifiant kenada :

$.EVENT

Cette méthode permet de définir un évènement à un nœud.

Pour modifier la couleur du texte du nœud qui porte l'identifiant kenada lorsque la souris survole ce nœud, vous pouvez faire comme ci-dessus.

Autrement, vous pouvez vous servir du premier arguments de la fonction callback qui correspond au nœud qui déclenche l'évènement, et cette fois pour modifier la couleur du texte lorsque la souris quitte ce nœud.

Encore, il est possible de définir plusieurs nœuds et/ou évènements et de traiter le déclenchement avec le second arguments de la fonction callback, ci-dessus vous effectuez la même action que les 2 exemples précédent sur 2 nœuds différent.

Bientôt disponible : callback.remove(); pour supprimer l'évènement...

$.XHR

Cette méthode permet de faire une requête XHR.

L'exemple ci-dessous montre comment faire une requête XHR avec 2 arguments et une fonction qui permet de traiter la réponse reçu par le serveur.

$.SHA256

Cette méthode retourne un texte crypter avec l'algorithme SHA-256, on utilise généralement cette technologie pour le cryptage d'un mot de passe.

L'exemple suivant crypte le mot de passe du formulaire et l'affiche à l'écran quand l'utilisateur clique sur le bouton :

$$.allFields

Une méthode assez sympa qui permet de désactivé ou d'activé tous les champs de votre page internet.

$$.upload

Tous le monde sait comment il est difficile de mettre en place un système d'upload sans rafraîchissement de la page ! Cette méthode est toute simple, il suffit de laisser vos "input type file" comme s'il s'agissait d'un champ normal et de placer cette méthode à l'endroit souhaité dans le script et de lui renseigner :

1. Le fichier qui doit traiter la requête.
2. La fonction à appeler quand le serveur répond, cette fonction contient aussi le document XML de la réponse.

$$.clipping