Les membres ayant 30 points peuvent parler sur les canaux annonces, projets et hs du chat.
La shoutbox n'est pas chargée par défaut pour des raisons de performances. Cliquez pour charger.

Forum Casio - Projets de programmation


Index du Forum » Projets de programmation » Récupération de valeur JavaScript
Tituya Hors ligne Administrateur Points: 2138 Défis: 26 Message

Récupération de valeur JavaScript

Posté le 03/06/2019 16:46

Bonjour bonjour !
Je ne m'y connais absolument pas en JS, mais j'avais envie d'essayer un petit truc, l'objectif est que lorsque nous lançons le programme (sur ordinateur, je ne parle en aucun cas de la calculatrice ici) nous devons renseigner le nom de la personne, puis ensuite il nous indique le nombre total de téléchargement qu'il a.
Ce qui parait simple comme ça !

Sauf qu'après des recherches dans le code HTML de mon profil, je ne trouve pas d'ID concernant ce nombre, je ne vois donc pas comment je pourrai récupérer les valeurs.

Je demande donc de l'aide ici (meme si ce n'est pas le forum adapté)
Donc si quelqu'un s'y connaissant pouvais bien m'aider, j'en serais reconnaissant
Merci

------------------------Test pour un TDM-------------------

TDM XX : L'utilisation de l'espace graphique en programmation

Le Tuto Du Mercredi [TDM] est une idée qui fut proposée par Ne0tux. Le principe est simple : nous écrivons et postons TOUS les Mercredis des tutoriels sur l'Utilisation de la calculatrice, le Transfert, les Graphismes, la Programmation, ou encore la Conception de jeu.

Aujourd'hui, nous attaquons sur l'espace graphique sur Calculatrice monochrome !

Niveau ★ ★ ☆ ☆ ☆
Tags : Basic Casio, Jeux, Graphique, Monochrome

L'utilisation graphique peut-être très utile pour diverses chose, et dans l'utilisation d'un programme, elle rajoute du charme ainsi que de la beauté !

Partie I : Les graphiques ?

Vous devez certainement connaitre le mode graphique de nos calculatrice. Celui qui permet de faire des belles courbes et ainsi vérifier divers calcul.
Ce même mode est parfois capricieux, et suite à l'utilisation de divers programmes, vous avez peut être déjà eu quelques problèmes.

Voila pourquoi il y a divers paramètres.
Pour y accéder, allez dans la calculatrice et recherchez le mode "GRAPH". Une fois dedans, vous pouvez voir les graphs que vous avez en mémoire.

Ici, nous avons une bête équation simple.

Cliquez sur cette équation, et vous devriez arriver sur le fameux écran graphique !
A partir de là, vous pouvez avoir différents souci :

1- Vous ne voyez pas la courbe.
Dans ce cas là, c'est un problème de "vue" (non non ce n'est pas un jeu de mot). Pour résoudre ce petit problème, appuyez sur +

Vous devez être dans un sous-menu qui ressemble à ceci :


Appuyez simplement sur pour remettre les paramètres par défaut !
Une fois réglé, validez simplement en appuyant sur EXE.

Vous pouvez aussi avoir un autre problème : Vous ne voyez plus les axes !
Ce problème arrive souvent lors de l'utilisation d'un programme qui utilise le mode graphique (je vous en parle plus tard). Votre courbe ressemble alors à quelque chose comme ça :

Rien de bien compliqué heureusement ! Pour régler ce petit problème, appuyez sur + puis descendez tout en bas vers :

et mettez le paramètre Axes à On () !

D'autres petit problèmes peuvent arriver, voilà donc pour vous une configuration basique sans problèmes !

Bon ! Assez parlé des paramètres ! Si vous voulez en savoir plus, rendez vous sûr ce magnifique tutoriel : Utilisation mode Graphique

Ici on est là pour parler des utilisations en programmation ! Voila donc notre partie 2 !

Partie II : Le mode graphique en programme

Dans un programme, la beauté et l'ergonomie sont des choses importantes pour l'utilisateur. Si vous ne répondez pas à ces critères, votre programme aura un peu de mal à sortir du lot, en utilisant le mode graphique, cela vous permet de vous démarquer tout en embellissant votre programme !

Après avoir vu les différents bugs possibles, maintenant parlons du pourquoi ils se sont produit !
Un peu d'explication : En programmation Casio, le mode graphique peut être utile pour diverses chose comme par exemple écrire plus de choses à l'écran ou bien faire des beaux dessins. Il peut être contrôlé par des instructions simples qui permettent d'allumer un/des pixel(s) sur l'écran grâce à ses coordonnées. Pour faciliter la chose, la fonction
ViewWindow 1,127,0,1,63,0
permet de placer le point en bas à droite au coordonnées (1;1). Permettant donc plus de facilitée au programmeur pour se repérer ! Voilà ce qui explique le premier "bug".
Pour le second, rien de plus simple : En laissant afficher les Axes, la barre X et Y occupe une petite place de l'écran, c'est donc plus moche et moins pratique !

Vous savez à présent les pourquoi du comment de ces micro-bugs ! Rentrons enfin dans le vif du sujet :
Comme expliqué plus tôt, le mode graphique permet de réaliser plein de chose !
Comme par exemple des interfaces riches et variées comme dans ce jeu tokitori

Bon le niveau est quand même très haut mais c'est un exemple !

Ou bien vous pouvez utiliser le mode graphique pour dessiner ! Vous pouvez donc réaliser des créations comme ceci :

Ou plein d'autre chose magnifique !

La minute question :
• À partir de quel moment est-ce vraiment rentable de passer au mode graphique ?
Et bien comme dit précédemment, vous pouvez dessiner sur le mode graphique ! Mais vous pouvez aussi afficher une plus grande quantité de texte ! Parfait pour tricher plus efficacement expliquer vos jeux plus rapidement ! Attention cependant ! Le mode graphique est lourd !

Vous voila gonflé à bloc pour réaliser vos plus beaux dessins ! Voyons donc à présent les bases pour réaliser votre projet !
Bon, comme vous avez normalement compris, j'utilise ici les paramètres :
ViewWindow 1,127,0,1,63,0
AxesOff
Cls

Pour les exemples qui vont suivre.

Cls ? C'est quoi ça ?
Ce fameux Cls est très pratique ! Abréviation du "ClearScreen", il efface toute construction à l'écran !

L'instruction PlotOn ( + + + + ) Vous permet d'allumer un pixel sur l'écran avec cette syntaxe :

PlotOn X,Y

Suivant cette logique :


PlotOn 10,6
//Affiche un point aux coordonnées x=10, y=6


Comme vous l'avez peut-être remarqué, il existe d'autre fonction "Plot"
Plot X,Y Affiche aux coordonnées le curseur de la calculatrice
PlotOff X,Y éteint un pixel
PlotChg X,Y change l'état d'un pixel

Bon, c'est bien beau d'afficher des points, mais c'est vraiment lent si on veux afficher une image !
Voila pourquoi l'instruction "F-Line" ( + + + + ) est là ! Elle vous permet de... tracer une ligne entre deux points ! Avec cette syntaxe :

F-Line X1,Y1,X2,Y2
//Trace une ligne entre le point 1 et le point 2


Cette instruction est très pratique, vous permettant d’alléger vos programmes, de plus elle est assez rapide !

Nous avons aussi l'instruction "Text" ( + + + + ) qui attention c'est très complexe affiche un texte !

Avec une syntaxe un peu spéciale :
Text Y,X,"TEXTE"

Avec Y=1 et X=1, il vous place votre texte en haut à gauche de l'écran ! Faite donc bien attention à cette instruction !

Il y a bien d'autres instructions, je vous laisse les découvrir et apprendre à vous en servir !

Seul point négatif, ce mode est assez lent si vous décidez d'afficher plein de choses... Pour compenser cela, optez pour un maximum de F-Line ou bien essayer de faire du DrawStat ou même du Super DrawStat !
Il s'agit d'une notion un peu complexe vous permettant de dessiner à partir de listes vos graphique. Étant considérablement plus rapide, il s'agit d'un atout considérable pour vos jeux !
Pour ce point, je vous renvoi vers deux tutoriels géniaux expliquant parfaitement le fonctionnement de ce mode graphique !
Voila un petit exemple des capacités du DrawStat en une petite vidéo !


-Tutoriel DrawStat
-Tutoriel Super DrawStat

La minute question :
• Comment savoir si le mode graphique que je prévois est trop ambitieux ?

Pour savoir cela, rien de plus simple ! Prévoyez un plan dans votre tête ou sur papier des différentes images que vous voulez montrer. Si il y en à beaucoup et qu'elles sont complexes dans les formes, reconsidérez votre but ! N'oubliez pas que l’expérience du joueur ne doit pas être interrompue par des chargements incessants ! Faites preuves d’ingénieries en prenant le temps d'optimiser au maximum vos créations ! Comme le fabuleux jeu SwordBurstZero de Redeyes possédant de nombreuses optimisations !

Ou bien il existe une autre méthode, instantanée, pesant 1024 octets, vous permettant facilement de faire des dessins beaux... Je parle ici des Pictures !
Une picture c'est quoi ?
Et bien c'est simplement une image que votre calculatrice garde en mémoire, que vous pouvez à tout moment afficher en un clin d’œil !
Un point positif, vous pouvez dessiner entièrement vos pictures sur votre ordinateur grâce au logiciel BIDE qui intègre une conversion image.png en picture Casio !
Donc réalisez vos plus belles images avec Gimp/paint.net pour ensuite les convertir et les mettre dans la calculatrice avec FA-124 !

Pour afficher une picture, rien de plus simple !
RclPict 1
//Montre la picture stockée en 1

Seulement... De base une picture pèse 2048 octets, mais vu que vous êtes des pros de l'optimisation, je vous conseille d'utiliser l'add-ins Picture 1024. Vous permettant facilement de réduire la taille des pictures !

Pour résumer :
Le mode graphique "normal" est vraiment lent mais suffisant pour faire des petites applications l'utilisant, en effet il est très complet et permet de réaliser un peu près tout. Seulement, si vous voulez faire un jeu fluide, contenant beaucoup d'images, optez vers du DrawStat/ Super DrawStat. Les pictures sont là pour être utile fréquemment, limitez au maximum leurs utilisation si vous n'en voyez pas trop l’intérêt !

Partie III : A vous de programmer !

Je vous propose ici un petit test pour voir si vous avez compris les bases !
Votre objectif est de réaliser... Un carré de coté X avec la lettre P au centre !

Indice 1
Cliquer pour enrouler
Choisissez bien votre ViewWindow !

Indice 2
Cliquer pour enrouler
Les F-Line et leur méthode d'affichage sont la clé de la réussite !

Indice 3
Cliquer pour enrouler
La fonction Text commence en 1;1 en haut à gauche ! Et la hauteur de l'écran est de 63 pixels !


Correction
Cliquer pour enrouler
ViewWindow 1,127,0,1,63,0
Cls
?→A
F-Line 1,1,A,1
F-Line A,1,A,A
F-Line A,A,1,A
F-Line 1,A,1,1
Text 63-A/2,A/2,"P"

Le code est simple mais vous permet bien d'assimiler les bases de la création en F-Line ainsi que développer vos aptitudes de visualisation dans l'espace !


Vous avez réussi j'espère ! Ce n'était pas bien compliqué, cela demande juste un peu de temps de réflexion ainsi qu'une certaine logique dans l'espace ! De toute manière, voilà sur quoi on fini ce tutoriel ! Vous avez à présent les bases pour rendre vos programmes beaucoup plus attractif et visuellement plus fini ! Essayez de programmer quelque chose d'utile que vous ne pouviez pas faire avant ! Comme par exemple : le cercle des couleurs ou encore un pendu plus réaliste ! Envoyez moi vos créations en MP !
On se revoit dans deux semaines pour un autre tutoriel ! N'hésitez pas à m'envoyer vos recommandations ! Portez vous bien !

Liens utiles
-BIDE
-Picture 1024
-Tutoriel DrawStat
-Tutoriel Super DrawStat
-Utilisation mode Graphique

Consulter le TDM précédent : TDM n°14 – Le python, base et utilisation (Partie 1)
Consulter l'ensemble des TDM


Hackcell Hors ligne Maître du Puzzle Points: 1524 Défis: 11 Message

Citer : Posté le 03/06/2019 16:49 | #


Bah tu vas sur la page de profil du moenbre, tu cherche la ligne
<span class="color">Total de téléchargements :</span>
et le total est sur la ligne suivante
Tituya Hors ligne Administrateur Points: 2138 Défis: 26 Message

Citer : Posté le 03/06/2019 16:51 | #


Oui ça j'ai vu, sauf que comment le faire en JavaScript ? Comment afficher la valeur juste en dessous de cette ligne là ?
Bretagne > Reste du globe
(Et de toute façon, vous pouvez pas dire le contraire)
Projet en cours : Adoranda

Mes programmes
Hésite pas à faire un test !


Hackcell Hors ligne Maître du Puzzle Points: 1524 Défis: 11 Message

Citer : Posté le 03/06/2019 16:51 | #


Tu code ton programme en JS ?? T'es suicidaire ou t'as pas le choix ?
Tituya Hors ligne Administrateur Points: 2138 Défis: 26 Message

Citer : Posté le 03/06/2019 16:54 | #


Je souhaiterai oui. Mais je précise, je ne connais vraiment rien en JS, j'aimerais juste utiliser les données du site pour afficher ce que je souhaite
Bretagne > Reste du globe
(Et de toute façon, vous pouvez pas dire le contraire)
Projet en cours : Adoranda

Mes programmes
Hésite pas à faire un test !


Breizh_craft Hors ligne Modérateur Points: 1157 Défis: 7 Message

Citer : Posté le 03/06/2019 16:55 | #


Ben alors pourquoi faire du JS si t'y connais rien ?
Breizh.pm – Un adminsys qui aime les galettes.
Tituya Hors ligne Administrateur Points: 2138 Défis: 26 Message

Citer : Posté le 03/06/2019 16:56 | #


Pour essayer et apprendre aussi bien évidemment
Bretagne > Reste du globe
(Et de toute façon, vous pouvez pas dire le contraire)
Projet en cours : Adoranda

Mes programmes
Hésite pas à faire un test !


Lephenixnoir En ligne Administrateur Points: 24146 Défis: 170 Message

Citer : Posté le 03/06/2019 17:33 | #


Il faut faire une recherche de texte, les regex sont tes amies je suppose.

Et dans le futur, l'API de Planète Casio aussi... xD
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)
Tituya Hors ligne Administrateur Points: 2138 Défis: 26 Message

Citer : Posté le 03/06/2019 17:35 | #


Tu penses que je pourrai utiliser quel autre langage ? Car c'est vrai que j'ai voulu partir vers du JS mais on peut faire plus simple surement.
Bretagne > Reste du globe
(Et de toute façon, vous pouvez pas dire le contraire)
Projet en cours : Adoranda

Mes programmes
Hésite pas à faire un test !


Lephenixnoir En ligne Administrateur Points: 24146 Défis: 170 Message

Citer : Posté le 03/06/2019 17:38 | #


C'est pas une question de langage ici, c'est de parser du HTML. Y'a des libs Python pour le faire, y'a probablement de quoi le faire en Javascript aussi. Mais le réseau est probablement plus facile en Javascript.
Mon graphe (24 Mars): (gint#27 ; (Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; ...) || (shoutbox v5 ; v5)

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 105 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd