Je dois rendre un projet d'ici quelques mois, ça consiste à "développer" un script pour pouvoir calculer la masse molaire d'une espèce chimique. J'aimerais faire une case ou l'on rentre la formule brute et faire le calcul par la suite lors que le bouton "calculer" est actionné, cependant je ne sais pas quelle fonction utiliser, j'en ai trouvé plusieurs, mais je n'arrive pas à avancer, ce que j'aimerais faire c'est de vérifier les lettres puis de chercher s'ils sont dans un tableau, leur affecter la valeur de leur masse molaire multiplié par un ou le chiffre qui précède la formule.
var formule="";
var element = ["","H", "He", "Li"];
element[1] = new Array ("H",1);
element[2] = new Array ("He",4);
element[3] = new Array ("Li",7);
function start(){
formule=document.getElementById('formule').value;
}
<!DOCTYPE html>
<html lang="fr"
<head>
<meta charset="utf-8">
<title>EXO</title>
</head>
<body>
<div class="form-inline">
<input type="text" id="formule">
<input type="button" value="calculer" onclick="start();">
<div style='margin-top:10px;margin-left:5px;height:25px;width:250px;background-color:#fbef7b;'>
<label>Résultat</label>
<span id="resultat"></span>
</div>
</div>
<script type="text/javascript">
var element = { 'H':1
,'HE':4
,'Li':7
};
function start(){
var formule=document.getElementById('formule').value;
console.log('Formule : ' + formule);
//je fais un exemple avec une seule valeur...
//si tu entres plusieurs "valeurs" dans ton champ formule.. faudra boucler sur chaque valeur.. (je te laisserai chercher ce point !)
var result = getElementValue(formule);
console.log(result);
//affichage du réltat
document.getElementById('resultat').innerHTML = result;
}
function getElementValue(valToCheck){
if(typeof(valToCheck)!='undefined' && valToCheck!=null){
if(element.hasOwnProperty(valToCheck)){
return element[valToCheck];
}else{
return 0;
}
}
}
</script>
</body>
</html>
Salut, voici un lien de tout les "version" que j'ai essayer de faire, mais mon problème majeur c'est lorsque je veux vérifier le "i+1" ou le "i+2" dans la boucle.
Salut, désolé de te déranger je suis partie sur un truc comme ça :
var element = { 'H':1
,'He':4
,'Li':7
};
for (var i=0; i < element.length; i++);
var espace = element[i]
function start(){
var formule=document.getElementById('formule').value;
console.log('Formule : ' + formule);
var result = getElementValue(formule);
document.getElementById('resultat').innerHTML = result; //affichage du réltat
splitString(formule, espace); //divise la chaine de caractère
}
function getElementValue(valToCheck){
if(typeof(valToCheck)!='undefined' && valToCheck!=null){
if(element.hasOwnProperty(valToCheck)){
return element[valToCheck];
}else{
return 0;
}
}
}
function splitString(stringToSplit, separator) {
var arrayOfStrings = stringToSplit.split(separator);
console.log('La chaine d\'origine est : "' + stringToSplit + '"');
console.log('Le délimiteur est : "' + separator + '"');
console.log("Le tableau comporte " + arrayOfStrings.length + " elements : ");
for (var i=0; i < stringToSplit.length; i++);
console.log(arrayOfStrings[i] + " / ");
}
En gros j'aimerais divisé la chaine de caractère en un tableau grace à "split()" en fonction des atomes présent dans le tableau element, mais j'ai l'impression que ça ne fonctionne pas trop :c
var atoms = {
H: 1.00794,
He: 4.002602,
Li: 6.941,
Be: 9.012182,
B: 10.811,
C: 12.011,
O: 15.9994,
F: 18.9984032,
Ne: 20.1797,
Na: 22.989770,
Mg: 24.3050,
Al: 26.981539,
Si: 28.0855,
P: 30.973762,
S: 32.066,
Cl: 35.4527,
Ar: 39.948,
K: 39.0983,
Ca: 40.078,
Sc: 44.95591,
Ti: 47.88,
V: 50.9415,
Cr: 51.9961,
Mn: 54.93805,
Fe: 55.847,
Co: 58.9332,
Ni: 58.69,
Cu: 63.546,
Zn: 65.39,
Rb: 85.4678
};
document.getElementById('calculate').addEventListener('click', () => {
let formula = document.getElementById('formula').value;
document.getElementById('resultat').innerHTML = "";
if (formula)
{
formula = formula.split(' '); // La formule doit avoir des espaces entres chaque types
let totalMass = 0; // On commence par une masse de zéro
for (let atom in atoms)
for (let i = 0; i < formula.length; i++)
if (formula[i] == atom)
totalMass += atoms[atom]; // On additionne les masses atomiques de la formule
document.getElementById('resultat').innerHTML = totalMass;
}
else
console.error('La formule est vide!');
});
Si quelqu'un pouvait m'aider pour intégrer les nombre stœchiométrique ?
Mes cours de chimie remontent très loin.... Tu pourrais expliquer ce que c'est sensé faire non ??
Sachant qu'il suffira, à mon avis, de vérifier, dans la boucle, si il s'agit d'un texte ou d'un nombre...et faire le traitement adéquat en fonction....
Désolé de te déranger encore et encore, je me suis permis de modifier le code un tout petit peu, voici le bout que j'ai ajouté :
var formule = document.getElementById('formula').value;
var formula = ''
formule.split('').forEach(function(l) {
formula = formula + ' ' + l;
});
formula = formula.substr(1);
J'ai fait ça pour simplifier la saisie de l'utilisateur mais maintenant le script ne prend plus en compte les nombre à plusieurs chiffre :/ sais tu qu'elle partie du code qui est à modifier ?
fais donc un console.log de tes variables et regardent ce qu'elles valent.
par contre... je ne vois pas en quoi ça aide la saisie....
tu reconstruit exactement la même chose dans ton foreach....
A la limite tu pourrais essayer de faire le SPLIT sur les lettre majuscules.
Regarde donc ce que donnes ceci ..
var strToSplit = "H2OHe3";
var splitStr = strToSplit.split(/(?=[A-Z]|\d)/);
console.log(splitStr);
Et donc, dans le code que je t'ai donné, il te suffit de remplacer la ligne :
var splitformula = formula.split(' ');
par:
//on vire les éventuels espaces au cas où la personne aurait écrit : H 2 O He 3
formula= formula.replace(/ /g,'');
//on split sur les majuscules + les chiffres (ne fonctionne qu'avec des nombre <10 )
var splitformula = formula.split(/(?=[A-Z]|\d)/);
Bonjour je sais pas trop comment ouvrir un autre poste sur ce site alors je vais mettre ma question ici.
Bon voilà j'ai réussi avoir un script pour un jeux de tarot mais je suis pas capable de changer les image des cartes mais juste du début et je demande ou faire et changer la description des cartes sur ce code ou faut que je face un code un autre page en php ou css ce que je suis pas trop bon la dedans.
Voici le code :
<!doctype html>
<html lang="fr">
<head>
<title>Le tirage gratuit de don&voyance : trois cartes</title>
<meta name="description" content="Le tirage gratuit de don&voyance trois cartes, une interprétation personnalisée des 22 lames majeures, profitez des conseils divinatoires du tarot de marseille pour réaliser vos projets"/>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="cartes.php"></script>
<script>
var changePage;
var fold;
var unfold;
var animateRotate;
//for redian to degree conversion
var rad2deg = 57.2957795;
var cardLimit = 22;
var mid = (cardLimit-1)/2
//current selected card, and their position
var current = 0;
var pos = [ [-105, 110] , [0, 110] , [105, 110] , [0, 95, 120, 213]];
var choseCard = [];
//number of created card
fold = function() {
var i = 0;
var moving = false;
function chooseCard(card, last) {
//if we're at the last card, do nothing
if((current == pos.length-1 || moving) && !last)
return;
//just in case it's the last card automatically showed
carte = $(this);
if($(card).hasClass("carte"))
carte = $(card);
if(carte.attr("data-selected") == "true")
return;
//prevent two cards to be fold at the same time
moving = true;
//calculate positions and get widths for later
var cardWidth = 80;//carte.width();
var cardHeight = 142;//carte.height();
var pHeight = carte.parent().height();
var curPos = pos[current++];
var curLeft = curPos[0] - cardWidth/2;
var curTop = pHeight - curPos[1] - cardHeight;
var finPos = pos[pos.length-1];
var finLeft = finPos[0] - finPos[2]/2;
var finTop = pHeight - finPos[1] - 3*cardHeight/2;
//keeps the good ol' card
var oldImage = $("img", carte);
//prevents a card from appearing two or more times
var okay = false;
while(!okay) {
card = Math.floor(Math.random()*cardsImage.length);
okay = true;
for(var k = 0; k < choseCard.length; k++)
if(choseCard[k] == card)
okay = false;
}
choseCard.push(card);
//creates and adds the card to the DOM
var newCard = $("<img />").attr("src", "cartes/"+cardsImage[card]);
carte.prepend(newCard);
//custom rotation because jquery sucks
animateRotate("*[data-number="+carte.attr("data-number")+"]", 300, 0, carte.attr("data-angle"), 0);
//scales the card. We have to scale both image and div because Chrome doesn't support inherit correctly
$("img", carte).animate({
width: finPos[2],
height: finPos[3]
}, "slow");
carte.attr('data-selected', true).css({ zIndex: current }).animate({
left: [finLeft, "easeInCubic"],
bottom: finTop,
width: finPos[2],
height: finPos[3]
}, "slow", null, function() {
carte.addClass("cardSel"+current);
if(!last) {
//shows card and resize it after some time
oldImage.fadeOut('');
eval("setTimeout(function() { $('.cardSel"+current+" img').animate({ width: '80px', height: '142px' }, 'fast'); $('.cardSel"+current+"').animate({ left: "+curLeft+"+'px', bottom: "+curTop+"+'px', width: '80px', height: '142px' }, 'fast', null, function() { if(current < pos.length - 1) moving = false; }); }, 650);");
}
else {
//if it's the last, redesigns the interface...
moveInterface();
}
//if it's the last, chooses a random card
if(current >= pos.length - 1 && !last) {
setTimeout(function() {
moveInterface();
}, 850);
}
});
}
//adds a start again button
var button = $("<div />").addClass("button").html("Refaire un tirage").click(function() {
window.location.reload();
}).css({
left: "-63px"
});
$("#container").append(button);
var button2;
var button2_1;
var button3;
var button4;
function foldSub() {
//defines top and left position of the new card
var a = (i-mid)/rad2deg - Math.PI/2;
var left = Math.cos(a)*20000/cardLimit;
var bottom = Math.sin(i/(cardLimit-1)*Math.PI)*55 + Math.abs((i-mid));
//randomizes position a bit, to looks more natural
diffL = Math.random()*6-3;
diffT = Math.random()*6-3;
//checks if the card already exists
if(!$(".carte[data-number="+i+"]").length) {
//creates the card's div and gives it its class
var carte = $("<div></div>").attr("data-number", i).addClass("carte");
var img = $("<img />").attr("src", "carte.jpg");
carte.append(img);
//adds the card to the DOM
$("#container").append(carte);
//we want rotation from -10 to +10 before randomizing
var a = (i-mid)
//rotates the card (maybe not working on IE8-)
var angle = (i-mid)*Math.abs(i-mid)/3 + (Math.random()*10-5);
carte.css("-o-transform", "rotate("+angle+"deg)");
carte.css("-moz-transform", "rotate("+angle+"deg)");
carte.css("-webkit-transform", "rotate("+angle+"deg)");
carte.css("-ms-transform", "rotate("+angle+"deg)");
carte.attr("data-angle", angle);
//over effect ...
carte.mouseover(function() {
if($(this).attr("data-selected"))
return;
l = (parseInt($(this).attr("data-number"))-mid) * 2;
t = cardHeight/3 + parseInt($(this).attr("data-number"))-mid;
$(this).animate({
left: "+="+l,
bottom: "+="+t
}, "fast");
});
//...and the out !
carte.mouseout(function() {
if($(this).attr("data-selected"))
return;
l = (parseInt($(this).attr("data-number"))-mid) * 2;
t = cardHeight/3 + parseInt($(this).attr("data-number"))-mid;
$(this).animate({
left: "-="+l,
bottom: "-="+t
}, "fast");
});
//moves the card to the current position
carte.click(chooseCard);
}
else {
//just selects it
carte = $(".carte[data-number="+i+"]");
while(carte.attr("data-selected") == "true")
carte = $(".carte[data-number="+(++i)+"]");
}
//sets card's position, and animates it
var cardWidth = $(carte).width();
var cardHeight = $(carte).height();
carte.css({
bottom: "-200px"
}).animate({
left: (left + diffL - cardWidth/2)+"px",
bottom: (bottom + diffT)+"px"
}, "fast");
//creates a new card if needed
i++;
if(i < cardLimit)
setTimeout(function() { foldSub() }, 50);
}
foldSub();
}
unfold = function(callback) {
var i = 0;
function unfoldSub(callback) {
while($(".carte[data-number="+i+"]").attr("data-selected") == "true") {
i++;
}
<div class="page" data-page="2" data-current-page="false">
<p class="description">
Prenez le bon chemin et évitez les embuches en faisant, dès maintenant, le tirage du tarot de Marseille. Les 22 lames majeures vous révèleront vos obstacles, vos atouts pour réussir votre désir ainsi que votre état d'esprit du moment. <br/>Le tirage gratuit du tarot de Marseille trois cartes s'est adapté à vos besoins pour vous apporter une interprétation rapide, simple et personnalisée des 22 lames majeures, profitez des conseils divinatoires du tarot de marseille pour réaliser vos projets.
</p>
<a class="button" onclick="changePage('page', 3); fold();">Continuer</a>
</div>
<div class="page" data-page="3" data-current-page="false">
<div id="container">
<div id="confirmLast">Cliquez ici pour afficher la dernière carte</div>
<div class="page2" id="moreDatas"></div>
</div>
<a class="button refold" onclick="unfold(function() { setTimeout('fold()', 300) });">Remélanger</a>
</div>
56682 internautes nous ont dit merci ce mois-ci
https://drive.google.com/open?id=1ylFvvcJjjt71La1STMWGXBW730TnOHW2
var element = { 'H':1 ,'He':4 ,'Li':7 }; for (var i=0; i < element.length; i++); var espace = element[i] function start(){ var formule=document.getElementById('formule').value; console.log('Formule : ' + formule); var result = getElementValue(formule); document.getElementById('resultat').innerHTML = result; //affichage du réltat splitString(formule, espace); //divise la chaine de caractère } function getElementValue(valToCheck){ if(typeof(valToCheck)!='undefined' && valToCheck!=null){ if(element.hasOwnProperty(valToCheck)){ return element[valToCheck]; }else{ return 0; } } } function splitString(stringToSplit, separator) { var arrayOfStrings = stringToSplit.split(separator); console.log('La chaine d\'origine est : "' + stringToSplit + '"'); console.log('Le délimiteur est : "' + separator + '"'); console.log("Le tableau comporte " + arrayOfStrings.length + " elements : "); for (var i=0; i < stringToSplit.length; i++); console.log(arrayOfStrings[i] + " / "); }En gros j'aimerais divisé la chaine de caractère en un tableau grace à "split()" en fonction des atomes présent dans le tableau element, mais j'ai l'impression que ça ne fonctionne pas trop :c