Comme j'aime pas être nulle dans un langage, encore plus quand c'est un langage qui est employé sur le net... Ben, j'ai envie d'apprendre à mieux l'utiliser.
J'ai aussi envie d'apprendre le jquery, et je pense que l'un n'empêche pas l'autre.
Alors je vais sans doute suivre ces deux tutos en parallèle. (en plus de terminer mon livre de CSS. )
http://www.siteduzero.com/tutoriel-3-309961-dynamisez-vos-sites-web-avec-javascript.html#part_309955
eh oui, le site du zéro... ^^
Aujourd'hui, je me tape l'intro, même que je connais, ça devrait pas être trop difficile.
A cette page : http://www.siteduzero.com/tutoriel-3-309954-ou-placer-le-code-dans-la-page.html
je trouve ceci d'important
Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code Javascript directement dans la page, pour la simple et bonne raison que le fichier externe est mis en cache par le navigateur, et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page.C'est pour l'instant la seule chose, sinon, je révise mais n'apprends pas grand-chose. Me faudrait avoir un projet avec js, ça serait mieux, quand même.
Quoi que shurban, l'appli, ça pourrait carrément être du js.
Oh, et sur cette page là : http://www.siteduzero.com/tutoriel-3-309944-quelques-aides.html
j'apprends qu'au lieu de placer le code js entre les balises head du html, il vaut mieux les placer avant la fin du body, surtout si le fichier auquel on fait appel est volumineux, sinon ça risque de ralentir l'affichage de la page.
La plupart des navigateurs le font d'office mais pas tous. Je l'ignorais ! Il me faut changer de pratique.
J'apprends aussi à tester le type des variables ici : http://www.siteduzero.com/tutoriel-3-309946-les-variables.html
var number = 2; alert(typeof number); // Affiche : « number » var text = 'Mon texte'; alert(typeof text); // Affiche : « string » var aBoolean = false; alert(typeof aBoolean); // Affiche : « boolean »ou encore ceci :alert(typeof nothing); // Affiche : « undefined »Voilà un type de variable très important ! Si l'instruction typeof vous renvoieundefined, c'est soit que votre variable est inexistante, soit qu'elle est déclarée mais ne contient rien.
!! Ce cours est ultra long, je le laisse sur une intervention mais je coupe :
Sur cette page encore http://www.siteduzero.com/tutoriel-3-309962-initiation-a-la-concatenation-et-a-la-conversion-des-types.html
on voit que lorsqu'on utilise prompt ( qui appelle une fenêtre utilisateur et rapporte une variable extérieure sous forme de chaîne de caractère ) les variables reviennent sous forme de chaîne. Mais si on souhaite récupérer des nombres, on doit typer les résultats, pour pouvoir additionner, etc.
Ceci s'opère de la façon suivante :
parseInt(variable);
Evidemment, si la variable n'est pas un nombre, je pense pas que ça marchera. Mais dans le cas où la variable peut être convertie en
nombre, ça fonctionne.
-> on écrit quelque chose du genre :
var text = 131, nombre;
nombre = parseInt(nombre);
alert (typeof nombre);
alert (nombre);
Ensuite, construction d'une petite calculatrice, même si j'ai déjà fait cet exercice...
var nombre1 = prompt('Entrez un nombre'), nombre2 = prompt('Et un second');
var result = parseInt(nombre1) + parseInt(nombre2);
alert(result);
Je change de chapitre et on entre dans le type de données je crois.
Voilà l'étude des booléens. ( true / false )
Je n'apprends pas grand chose, mis à part ceci qui est important : le signe ! signifie NON. Dans le cas suivant il nous sert à inverser la variable.
var result = false;
result = !result; // On stocke dans « result » l'inverse de « result », c'est parfaitement possible
alert(result); // Affiche « true » car on voulait l'inverse de « false »
result = !result;
alert(result); // Affiche « false » car on a inversé de nouveau « result », on est donc passé de « true » à « false »
Ça peut servir !
Je continue demain et j'en suis là : http://www.siteduzero.com/tutoriel-3-309953-la-condition-if-else.html
Je prends le cours, sur les "structures conditionnelles", et je ne pensais pas apprendre grand-chose mais décidément, ce tuto est très bien fait, car voici confirm(), la nouvelle fonction que j'apprends.
Cela offre une sorte de "prompt" ok ou annuler. C'est fort pratique, donc, puisque si on clique sur "ok", confirm() renvoie true, si annuler, renvoie false.
Ça permet donc de poser une condition.
Petit rappel :
if (condition) {
code indenté;
} else {
code indenté aussi;
}
Et puis si on a plusieurs conditions, on utilise "else if", autant de fois qu'on veut.
Switch (variable) {
case1:
instructions;
break;
[...]
comme en php quoi...
}
Petite piqûre de rappel également concernant les ternaires que j'ai pas vues depuis longtemps :
var startMessage = 'Votre catégorie : ', endMessage, adult = confirm('Êtes-vous majeur ?'); endMessage = adult ? '18+' : '-18'; ============ C'est là que c'est important. alert(startMessage + endMessage);
endMessage = adlute ? '18+' : '18-'; signifie
"Si adulte = true, endMessage = 18+; sinon endMessage = 18-;
Moralité : pareil qu'en php, décidément !
Petit rappel également sur l'opérateur "OU" ||
Il renvoie la première variable avec une valeur dans le cas de cette condition :
var premier, var deuxieme = 'ok';
alert(premier || deuxieme); // renvoie deuxieme, puisque premier est false (ou vide)
J'ai fini, 20/20 !
J'en suis désormais là :
http://www.siteduzero.com/tutoriel-3-309960-les-boucles.html
On se souviendra des instructions :
do (instructions) while (condition); (attention à fermer après le while)
où l'instruction est effectuée au moins une fois.
Break ferme la boucle, continue passe à l'itération suivante sans effectuer le reste de la boucle,
pratique à savoir.
Par ailleurs, rappel super important sur la boucle for.
for (initialisation; condition; incrémentation) // notons ici l'abs de ; à la fin de l'incr.
{ instruction; }
Choix des prénoms des frères et soeurs avec boucle.
en français, ça donne :
for (var prenoms = '', prenom; true;) -- ici, on instancie deux variables, condition = true, et pas d'incrémentation.
// du coup, on doit mettre ;
prenom = prompt('donnez un prénom :');
if ( prenom ) {prenoms += prenom + ' ';}
else { break; }
-----
Désormais, on s'attaque au chapitre sur les fonctions.
Fonctions natives en js, et fonctions utilisateur.
Rappel à propos des arguments passés dans les fonctions :
une variable déclarée hors fonction est valable dans celle-ci.
Mais une variable déclarée dans une fonction n'est pas valable en dehors de celle-ci, sauf
si on fait return, je crois.
Si on définit cependant une variable au sein d'une fonction, celle-ci est appelée Locale.
Si jamais on appelle une locale par le même nom qu'une globale durant une boucle,
c'est la locale qui est prioritaire. En sortant de la boucle, la globale reprend ses droits.
On a vu un peu les arguments. Rien de plus qu'en php ou python... Sauf que les arguments facultatifs,
on les déclare pas genre :
function truc(bidule=machin)
seulement, si cette variable est vide, on ajoute une condition dans la boucle pour lui
attribuer une valeur, par exemple "false",
ce qui permet de la différencier avec si elle vaut true.
Jolie phrase, Arabella Brayer, merci...
Maintenant, les fonctions anonymes.
On va les utiliser tout plein, c'est important.
Et là, je découvre quelque chose !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
je peux déclarer par exemple une variable en fonction :
var SayHello = function (){ alert('Hello !! '); }
SayHello();
Ceci s'appelle une référence !! Youpi, j'adore apprendre des trucs de ce genre :D
http://www.siteduzero.com/tutoriel-3-320995-les-fonctions-anonymes.html
je reprendrai après la sieste.
Quelque chose d'important à se souvenir :
Les boucles, etc. sont des "structures" là où le reste (assignation de variable etc.)
sont des "instructions".
On s'en fiche, direz-vous, sauf qu'en fait, à la fin d'une structure, on ne ferme pas
par ;, alors qu'à la fin d'une instruction, si.
Donc, dans le cas où l'on assigne une fonction à une variable, on ferme par ; .
Les fonctions anonymes servent à isoler une partie du code.
J'apprends l'existence de sandbox -> http://fr.wikipedia.org/wiki/Sandbox_%28s%C3%A9curit%C3%A9_informatique%29
Ici, j'apprends donc une syntaxe toute particulière, qui consiste à condenser l'appel à une fonction.
En temps normal, on déclare une fonction, puis on l'appelle :
function bidule {
instruction;
}
bidule(); -- appelle la fonction.
Mais là, on fait ça : (function test() { // Code. })();
ce qui appelle immédiatement la fonction.
Pratique, pour tester, ou, je sais pas trop pourquoi ?!
Je crois comprendre que l'utilité d'une telle pratique est de ne pas ajouter de nouvelles
variables, puisque les variables de fonctions sont locales, et pas globales.
Ici, il y a une chose importante également :
var sayHello = (function() {
return 'Yop !';
})();
alert(sayHello); // Affiche : « Yop ! »
Pour garder une variable globale en utilisant une fonction anonyme, il suffit d'utiliser return,
et d'assigner la fonction à une variable.
Exactement comme dans l'exemple au dessus.
!!
Impressionnant, je ne sais pas encore à quoi ça pourrait me servir,
mais je pense que c'est très utile pour raccourcir le temps d'exécution.
_____________________________________________________________
Vient une partie super importante : Les objets.
Javascript met à disposition des "objets" que l'on utilise, comme les nombres,
les chaînes de caractère, les booléens.
javascript n'est pas un langage typé, car il contient toujours un objet dans une variable.
Je crois que je comprends...
/!\ JS n'est pas un langage orienté objet. Il est orienté objet par prototype /!\
J'espère sérieusement comprendre ça parce que là, c'est un peu flou...
Un objet contient trois choses :
un constructeur , des propriétés , et des méthodes.
Le constructeur : C'est l'ensemble des actions et variables qui sont appelés et créés
lorsqu'on créé un objet.
Genre, je créée une chaîne, celle-ci a un certain nb de caractères.
var machaine = "ceci est une chaîne, mais c'est aussi un objet.";
Les propriétés, je pense que ce sont les valeurs enregistrées des objets.
Par exemple, lorsqu'on créé un objet à l'aide du constructeur, celui-ci créé des propriétés.
Les méthodes sont les façons de modifier les valeurs des objets.
Par exemple, en appelant uppercase, modifier l'objet chaîne de caractère machaine.
NDLR : ça fait plein de fois que j'apprends des choses de ce genre, et je pense que tant que
je n'aurais pas pratiqué, je continuerai à ne pas bien m'en rappeler,
et surtout, ne pas bien comprendre de quoi on parle.
Mise en application avec un objet natif :
var maphrase = "Voici mon objet test."; // on créé l'objet
alert(maphrase.length); // ici on fait appel à une propriété de l'objet créé
alert(mapharse.toUpperCase()); // on récupère l'objet modifié par une méthode.
NDLR : je pensais naïvement qu'on faisait comme en php : toUpperCase(maphrase); et là,
je tombe un peu des nues.
En fait, oui et non, car, j'ai déjà vu cette syntaxe mais j'avais pas percuté.
Donc, en JS, nous avons déjà rencontré plusieurs objets natifs :
String (ok,)
Number (gère les nombres quoi...)
Boolean (qui gère les booléens)
puis heu... on va maintenant voir les array, les tableaux quoi, qui sont
aussi des objets.
______________________________________________________________________
Les tableaux (array)
On créé un objet tableau.
Celui-ci est contitué de plusieurs items (les valeurs dedans), qui sont accessible via leur
"indice". (leur numéro quoi...)
Comme pour tous les langages à ma connaissance, le compte des indices comment à 0.
Ainsi, l'item 5 est accessible via l'indice 4.
Pour déclarer un tableau, c'est presque comme une variable, mais avec une syntaxe particulière :
var MonTableau = new Array['dudule', 'dodole', 'Arabella', 'Odile', 'Jonas'];
En effet, on instancie l'objet Array, donc "new", et en plus, il prend une majuscule.
On déclare quand même le tableau comme une variable !
En fait, on peut le faire avec des parenthèse mais c'est pas apprécié. Donc, avec crochets !
Par rapport à l'objet, dont on parlait plus haut,
on créé un nouvel objet :
new Array
et les paramètres sont passés entre crochet.
Pour récupérer la variable, c'est très simple, comme en php ou python :
MonTableau[1] donne le premier indice (donc le deuxième item).
Pour modifier la valeur, rien de plus simple, on l'assigne par son indice :
MonTableau[1] = 'nouvelle valeur';
Et le tour est joué.
-------------------------------------
Opérations sur les tableaux
C'est semblable aux autres langages : push ajoute un item à la fin.
MonTableau.push('valeur à ajouter'); - ajoute ça en dernière position.
Une alternative : si on veut ajouter un item mais au début du tableau : unshift
shift retire un item au début de la liste, pop retire le dernier.
split découpe une chaîne en tableau selon un séparateur passé en argument :
maChaine = "voilà la chaine à séparer";
monTableau = maChaine.split(' ');
alert(monTableau); // vérif ok
Le contraire de split, c'est join
------------------------------------
Parcourir un tableau
for in, la structure idéale pour le tableau.
var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];
Voici une astuce à laquelle je n'avais pas pensé :
for (var i = 0, c = myArray.length; i < c; i++) {
alert(myArray[i]);
}
ici, on instancie dans la structure for une variable différente de length, qui est fixe,
parce que sinon on va calculer à chaque passage de boucle la valeur length, alors
qu'elle est fixe.
Donc deux variables déclarées en début de boucle : un compteur de début, et un de fin.
Pour créer un indice qui soit un mot, par exemple... On peut créer un objet littéral.
Moui... Mais encore ? Ca donne ça :
var MonObjetLitteral = {
famille : 'brayer',
nb_enfants : 4,
adresse : 'pas besoin d\'indiquer ça'
};
Ca donne une sorte de tableau, mais on a un indice mot : un "identifiant".
DONC ! Pour créer un objet, c'est comme un tableau, sauf qu'on met des accolades.
Les identifiants sont en fait les "propriétés" des tableaux.
Donc pour accéder à leur contenu :
MonObjetLitteral.famille c'est brayer
On peut faire comme en php sinon :
MonObjetLitteral['adresse'];
http://www.siteduzero.com/tutoriel-3-320997-les-objets-litteraux.html
je m'arrête là car je dois partir, mais ce cours est passionnant !
On peut également faire appel aux propriétés des objets, comme par exemple length :
MonObjetLitteral.lenght donnera le nb de valeurs dans l'objet littéral.
Pour ajouter un item, on le déclare, simplement. (je crois comprendre qu'il n'y a pas d'ordre.)
MonTableauLitteral['pouet'] = 'trucmuche'; // moui bon.
ou encore
MonTableauLitteral.pouet = 'trucmuche'; // même chose, autre syntaxe.
for in est l'équivalent de foreach en php. Cette formule ne sert qu'à parcourir un objet.
for (var id in MonObjetLitteral) { // On stocke l'identifiant dans « id » pour parcourir l'objet « family »
alert(MonObjetLitteral[id]);
}
// ceci devrait parcourir l'objet en entier.
///////////////////////////////////////////////////////////////////////////////
// J'apprends un truc de ouf !!
// http://dev.opera.com/articles/view/efficient-javascript/?page=2#forin
// Déjà attention où on utilise for in
// Mais en plus, à cette formule :
// a += 'x' + 'y';
// il faudrait préférer ://a += 'x'; a += 'y';
// parce que dans la première ligne, le nav va créer une variable temporaire// pour l'évaluer avant la vraie.// !! truc de fou ! // Y a plein d'autres trucs à regarder. /////////////////////////////////////////////////////////////////////////////// function getCoords() {
/* Script incomplet, juste pour l'exemple */
return { x: 12, y: 21 };
}
var coords = getCoords();
alert(coords.x); // 12
alert(coords.y); // 21
Je fais le TP, qui me plaît énormément !http://www.siteduzero.com/tutoriel-3-332491-tp-convertir-un-nombre-en-toutes-lettres.html Je dois reconnaître que j'ai eu un peu de mal.D'abord, la fenêtre prompt, pour la faire tourner en boucle, c'est super simple :while (variable = prompt('phrase')) {// instructions effectuées tant qu'on écrit dans prompt.//Dans le cas contraire, on sort de la boucle. }
dans cette boucle, on fait appel à la fonction, qui va vérifier pour commencer que la variable récupérée soit bien un nombre compris entre 0 et 999.Dans le cas où elle vaut 0, on affiche "zéro" et on ferme la boucle.
S'en suivent tout un tas de conditions... Puisque le français est relou.
J'avais à l'origine décidé de voir les exceptions de 1 à 16 dans un tableau à part, mais dans la correction de l'exercice, ils font appel à un tableau unite qui va de '' à 19, et c'est pas bête.On cacule unite, dizaine et centaine à l'aide du modulo... Facile.Donc en gros, en français dans le texte :Si ( centaine ) {// si sup à 1 on va chercher dans le tableau + '-'.// etc. plein de conditions, quoi. }Bref, en fait, la correction en ligne est ici :http://www.siteduzero.com/tutoriel-3-332490-correction.htmlJ'ai pas fait ça à la maison...
Aucun commentaire:
Enregistrer un commentaire