Calculs avec javascript
nathan2020
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour à tous,
Je travail sur un projet perso en code javascript.
Il s'agit d'un compteur de mots.
Je suis parti sur un code "opensource" et je n'arrive pas à apporter quelques modifications.
J'ai avoir la possibilité de choisir un multiplicateur au nombre de mots trouvés.
Par exemple : 156 (mots) et choisir avec une combobox X2, ou X3. Le résultat serait alors affiché dans une nouvelle zone : résultat ► xxxxx .
Et ensuite avec deux cases à cocher (l'une ajoute +1 et l'autre ajout +2)
ça parait simple à d'écrire, mais je galère grave... :-(
Merci pour votre aide,
Fichiers source : https://we.tl/t-1CZnWsi8wU

Je travail sur un projet perso en code javascript.
Il s'agit d'un compteur de mots.
Je suis parti sur un code "opensource" et je n'arrive pas à apporter quelques modifications.
J'ai avoir la possibilité de choisir un multiplicateur au nombre de mots trouvés.
Par exemple : 156 (mots) et choisir avec une combobox X2, ou X3. Le résultat serait alors affiché dans une nouvelle zone : résultat ► xxxxx .
Et ensuite avec deux cases à cocher (l'une ajoute +1 et l'autre ajout +2)
ça parait simple à d'écrire, mais je galère grave... :-(
Merci pour votre aide,
Fichiers source : https://we.tl/t-1CZnWsi8wU
/* ** ** User stories: ** - Shows number of characters, words, sentences, paragraphs - Done ** - Show reading time - Done ** - Show keyword count - Done ** - Show reading level (Optional - how?) - Done ** - Above data should change/appear on every keypress - Done ** */ // Readability (Mashape) API Key for testing: PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE "use strict"; var input = document.querySelectorAll('textarea')[0], characterCount = document.querySelector('#characterCount'), wordCount = document.querySelector('#wordCount'), sentenceCount = document.querySelector('#sentenceCount'), paragraphCount = document.querySelector('#paragraphCount'), readingTime = document.querySelector('#readingTime'), readability = document.querySelector('#readability'), keywordsDiv = document.querySelectorAll('.keywords')[0], topKeywords = document.querySelector('#topKeywords'); // updating the displayed stats after every keypress input.addEventListener('keyup', function() { //keeping the console clean to make only the latest data visible console.clear(); // character count // just displaying the input length as everything is a character characterCount.innerHTML = input.value.length; // word count using \w metacharacter - replacing this with .* to match anything between word boundaries since it was not taking 'a' as a word. // this is a masterstroke - to count words with any number of hyphens as one word // [-?(\w+)?]+ looks for hyphen and a word (we make both optional with ?). + at the end makes it a repeated pattern // \b is word boundary metacharacter var words = input.value.match(/\b[-?(\w+)?]+\b/gi); // console.log(words); if (words) { wordCount.innerHTML = words.length; } else { wordCount.innerHTML = 0; } // sentence count using ./!/? as sentense separators if (words) { var sentences = input.value.split(/[.|!|?]+/g); console.log(sentences); sentenceCount.innerHTML = sentences.length - 1; } else { sentenceCount.innerHTML = 0; } // paragraph count from http://stackoverflow.com/a/3336537 if (words) { // \n$ takes care of empty lines: lines with no characters, and only \n are not paragraphs // and need to be replaced with empty string var paragraphs = input.value.replace(/\n$/gm, '').split(/\n/); paragraphCount.innerHTML = paragraphs.length; } else { paragraphCount.innerHTML = 0; } // console.log(paragraphs); // reading time based on 150 words/minute if (words) { var seconds = Math.floor(words.length * 60 / 150); // need to convert seconds to minutes and hours if (seconds > 59) { var minutes = Math.floor(seconds / 60); seconds = seconds - minutes*60; readingTime.innerHTML = minutes + "m "+ seconds + "s"; } else { readingTime.innerHTML = seconds + "s"; } } else { readingTime.innerHTML = "0s"; } // finding out top keywords and their count // step-1: remove all the stop words // step-2: form an object with keywords and their count // step-3: sort the object by first converting it to a 2D array // step-4: display top 4 keywords and their count if (words) { // step-1: removing all the stop words var nonStopWords = []; var stopWords = ["à","allô","aucuns","auriez","auxdits","aviez","ayons","bof","çà","certaines","chez","comment","da","desquels","deviez","devras","doit","dues","dût","es","êtes","eurêka","excepté","fouchtra","fûmes","ho","hurrah","laquelle","leur","mazette","mâtin","ne","nulle","or","outre","pas","plein","pourraient","pourvu","pouviez","puis","pussent","que","quoi","saperlipopette","serait","sien","sommes","ta","telles","touchant","une","veuillez","voilà","voudrez","voulante","voulue","vôtre afin","alors","auquel","aurions","auxquelles","avions","aïe","boum","car","certains","chic","concernant","dans","devaient","devions","devrez","doive","duquel","eh","et","étiez","eus","eûmes","furent","fût","holà","hé","le","leurs","me","miséricorde","ni","nulles","ôté","palsambleu","patatras","plouf","pourrais","pouvaient","pouvions","puisque","put","quel","quoique","sapristi","seras","sienne","son","tandis","tels","tous","unième","veuillons","vos","voudriez","voulantes","voulues","vôtres ah","apr.","aura","aurons","auxquels","avoir","bah","bravissimo","ce","ces","chiche","contre","de","devais","devoir","devriez","doivent","durant","elle","étaient","étions","eusse","eût","fus","fûtes","hop","il","ledit","lorsque","merci","moi","nonobstant","nuls","ou","pan","pechère","plus","pourrait","pouvais","pouvoir","puisse","pécaïre","quelle","rataplan","sauf","serez","siennes","sont","tant","tes","tout","unièmes","veulent","votre","voudrions","voulants","voulurent","zut ai","as","aurai","auront","avaient","avons","basta","bravo","ceci","cet","chouette","corbleu","debout","devait","devons","devrions","doives","durent","elles","étais","être","eussent","eûtes","fusse","grâce","hormis","ils","lequel","lui","merde","moins","nos","ô","où","par","pendant","plusieurs","pourras","pouvait","pouvons","puissent","pût","quelles","revoici","se","seriez","siens","sous","taratata","tien","toute","v'lan","veut","voudra","voudrons","voulez","voulus","aie","attendu","auraient","autant","avais","ayant","beaucoup","ç'a","cela","cette","chut","coucou","depuis","devant","devra","devrons","donc","dus","en","était","eu","eusses","évohé","fussent","ha","hors","jarnicoton","les","là","mes","mon","notre","oh","ouais","parbleu","peu","pouah","pourrez","pouvant","psitt","puisses","qq.","quelqu'un","revoilà","selon","serions","sinon","soyez","tayaut","tienne","toutes","va","veux","voudrai","voudront","vouliez","voulussent","aient","au","aurais","autre","avait","ayante","bernique","ç'aura","celle","ceux","ciao","couic","des","devante","devrai","devront","dont","dussent","encontre","étant","eue","eussiez","évoé","fusses","hein","hou","je","lesdites","ma","mien","morbleu","nôtre","ohé","ouf","parce","peuchère","pour","pourriez","pouvante","pst","puissiez","qqch.","quelqu'une","rien","sera","serons","soi","soyons","taïaut","tiennes","tu","vers","via","voudraient","voulaient","voulions","voulut","aies","aucun","aurait","autres","avant","ayantes","bien","ç'aurait","celles","chacun","clic","crac","desdites","devantes","devraient","dia","du","dut","endéans","étante","eues","eussions","fi","fussiez","hem","hourra","jusque","lesdits","made","mienne","motus","nôtres","olé","ouille","pardi","peut","pourquoi","pourrions","pouvantes","pu","puissions","qqn","quels","sa","serai","seront","soient","stop","te","tiens","tudieu","veuille","vivement","voudrais","voulais","vouloir","voulût","ait","aucune","auras","aux","avec","ayants","bigre","ç'avait","celui","chacune","clac","cric","desdits","devants","devrais","diantre","dudit","dès","entre","étantes","euh","eut","fichtre","fussions","hep","hue","la","lesquelles","mais","miennes","moyennant","nous","on","oust","pardieu","peuvent","pourra","pourrons","pouvants","pue","purent","quand","qui","sacristi","seraient","ses","sois","suis","tel","toi","turlututu","veuillent","vlan","voudrait","voulait","voulons","vous","al.","aucunes","aurez","auxdites","avez","ayez","bis","ça","cependant","chaque","comme","crénom","desquelles","devez","devrait","dois","due","dû","envers","étants","eurent","eux","fors","fut","heu","hum","ladite","lesquels","malgré","miens","na","nul","ont","ouste","parmi","peux","pourrai","pourront","pouvez","pues","pus","quant","quiconque","sans","serais","si","soit","sur","telle","ton","un","veuilles","voici","voudras","voulant","voulu","vu"]; for (var i = 0; i < words.length; i++) { // filtering out stop words and numbers if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) { nonStopWords.push(words[i].toLowerCase()); } } // console.log(nonStopWords); // step-2: forming an object with keywords and their count var keywords = {}; for (var i = 0; i < nonStopWords.length; i++) { // checking if the word(property) already exists // if it does increment the count otherwise set it to one if(nonStopWords[i] in keywords) { keywords[nonStopWords[i]] += 1; } else { keywords[nonStopWords[i]] = 1; } } // step-3: sorting the object by first converting it to a 2D array var sortedKeywords = []; for (var keyword in keywords){ sortedKeywords.push([keyword, keywords[keyword]]) } sortedKeywords.sort(function(a, b) {return b[1] - a[1]}); // console.log(sortedKeywords); // step-4: displaying top 4 keywords and their count topKeywords.innerHTML = ""; for (var i = 0; i < sortedKeywords.length && i < 4; i++) { var li = document.createElement('li'); li.innerHTML = "<b>" + sortedKeywords[i][0] + "</b>: " + sortedKeywords[i][1]; topKeywords.appendChild(li); } } // displaying top keywords only if there is a word in the text area if (words) { keywordsDiv.style.display = "block"; } else { keywordsDiv.style.display = "none"; } }); // readability level using readability-metrics API from Mashape readability.addEventListener('click', function() { // placeholder until the API returns the score readability.innerHTML = "Fetching score..."; var requestUrl = "https://ipeirotis-readability-metrics.p.mashape.com/getReadabilityMetrics?text="; var data = input.value; var request = new XMLHttpRequest(); request.open('POST', encodeURI(requestUrl + data), true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.setRequestHeader("X-Mashape-Authorization", "PQ4FOFuaR6mshI6qpnQKQvkDZQXjp1o6Zcqjsnug7GvNggTzUE"); request.send(); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! readability.innerHTML = readingEase(JSON.parse(this.response).FLESCH_READING); } else { // We reached our target server, but it returned an error readability.innerHTML = "Not available."; } }; request.onerror = function() { // There was a connection error of some sort readability.innerHTML = "Not available."; }; }); // function to convert FLESCH READING SCORE into meaningful string. function readingEase(num) { switch(true) { case (num <= 30): return "Readability: College graduate."; break; case (num > 30 && num <= 50): return "Readability: College level."; break; case (num > 50 && num <= 60): return "Readability: Lycée."; break; case (num > 60 && num <= 70): return "Readability: 8th - 9th grade."; break; case (num > 70 && num <= 80): return "Readability: 7th grade."; break; case (num > 80 && num <= 90): return "Readability: 6th grade."; break; case (num > 90 && num <= 100): return "Readability: 5th grade."; break; default: return "Not available."; break; } }
A voir également:
- Calculs avec javascript
- Telecharger javascript - Télécharger - Langages
- Barbara veut calculer automatiquement son budget dans un tableau. citez un des logiciels lui permettant de faire des calculs sur des tableaux de nombres (tableur). - Forum Excel
- Citez un des logiciels lui permettant de faire des calculs sur des tableaux de nombres (tableur). ✓ - Forum Logiciels
- Calculer une moyenne sur excel avec coefficient - Guide
- Santa barbara - Forum Musique / Radio / Clip
3 réponses
Bonjour,
Sans nous montrer le code concerné (ce que tu as déjà commencé à faire....)
cela va être compliqué de te répondre.
NB: Pour poster ton code, merci d'utiliser les balises de code
Explication ( à lire en entier !! ) disponible ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Sans nous montrer le code concerné (ce que tu as déjà commencé à faire....)
cela va être compliqué de te répondre.
NB: Pour poster ton code, merci d'utiliser les balises de code
Explication ( à lire en entier !! ) disponible ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
<!DOCTYPE html> <html> <head> <title>JS</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="description" content="A word counter built in HTML/CSS/JS. Shows number of characters, words, reading time and readability score. Also generates a list of top keywords."> </head> <body> <div class="container"> <h1>JS</h1> <textarea placeholder="Collez ici..."></textarea> <div class="right"> <a href="javascript:window.location.reload()">Réinitialiser JS</a> </div> <div class="output row"> <div>DURÉE ► <span id="readingTime">0</span></div> <div>NOMBRE DE MOTS ► <span id="wordCount">0</span></div> </div> <div class="output row"> <div>PHRASES ► <span id="sentenceCount">0</span></div> <div>PARAGRAPHES ► <span id="paragraphCount">0</span></div> </div> <div class="output row"> <div>CHARACTÈRES ► <span id="characterCount">0</span></div> <div id="readability">Show readability score.</div> </div> <div class="keywords"> Mots les plus utilisés : <ul id="topKeywords"> </ul> </div> </div> <script type="text/javascript" src="js/word-counter.js"></script> </body> </html>
Oui j'ai travaillé sur le html. le voici propre.
Je n'arrive pas mettre en place les calculs.
En fait j'aimerai pouvoir calculer un prix sur 156 (mots) avec des options.
Par exemple : choisir dans une combo " texte poésie " ou "article de blog"
Si "poésie" est sélectionné :
0.80 centimes le mot si < 100 mots,
0.75cts si > 100 mots < 200 mots
et 0.50cts si > 200 mots.
un article de blog le prix mots serait différent
0.70 centimes le mots si < 100 mots,
0,65cts si > 100 mots < 200 mots
et 0.60cts si > 200 mots.
Et afficher le prix dans une nouvelle zone : Prix ► xxxxx €.
Et avoir deux cases à cocher qui modifieraient le résultat trouvé (une case qui ajoute +10€ et l'autre ajoute +20€)
Je ne sais pas du tout comment on fait ça. J'ai essayé des bouts de codes depuis hier soir trouvé sur internet, depuis je m'arrache les cheveux...
Hier soir j'ai abandonné et me suis couché pour reprendre ce matin.
SI j'avais le code, je pourrais rajouter autant d'options que je veux en reprenant et comprenant la structure du code.
Hier soir j'ai abandonné et me suis couché pour reprendre ce matin.
SI j'avais le code, je pourrais rajouter autant d'options que je veux en reprenant et comprenant la structure du code.
Tu peux au moins faire le html...
La liste déroulante (ta "combo")
https://developer.mozilla.org/fr/docs/Web/HTML/Element/select
Les cases à cocher :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/checkbox
Sans oublier de mettre un ID à chaque élément qu'il faudra ensuite manipuler via le javascript.
Pour ce qui est du code ensuite,
Il ne faut pas prendre des bouts de code au hasard et espérer que ça marche du premier coup...... il faut plutôt faire en sorte de les comprendre.
Pour ça, il existe de nombreuses documentations sur le net et des tutos pour apprendre le javascript.
Cibler un élément via son id :
https://developer.mozilla.org/fr/docs/Web/api/Document/getElementById
Faire un test
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else
etc...
La liste déroulante (ta "combo")
https://developer.mozilla.org/fr/docs/Web/HTML/Element/select
Les cases à cocher :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/checkbox
Sans oublier de mettre un ID à chaque élément qu'il faudra ensuite manipuler via le javascript.
Pour ce qui est du code ensuite,
j'ai essayé des bouts de codes depuis hier soir trouvé sur internet
Il ne faut pas prendre des bouts de code au hasard et espérer que ça marche du premier coup...... il faut plutôt faire en sorte de les comprendre.
Pour ça, il existe de nombreuses documentations sur le net et des tutos pour apprendre le javascript.
Cibler un élément via son id :
https://developer.mozilla.org/fr/docs/Web/api/Document/getElementById
Faire un test
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else
etc...
C'est fait :-)
<!DOCTYPE html> <html> <head> <title>JS</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="description" content="A word counter built in HTML/CSS/JS. Shows number of characters, words, reading time and readability score. Also generates a list of top keywords."> </head> <body> <div class="container"> <h1>JS</h1> <textarea placeholder="Collez ici..."></textarea> <div class="right"> <a href="javascript:window.location.reload()">Réinitialiser JS</a> </div> <div class="output row"> <div>DURÉE ► <span id="readingTime">0</span></div> <div>NOMBRE DE MOTS ► <span id="wordCount">0</span></div> </div> <div class="output row"> <div>PHRASES ► <span id="sentenceCount">0</span></div> <div>PARAGRAPHES ► <span id="paragraphCount">0</span></div> </div> <div class="output row"> <div>CHARACTÈRES ► <span id="characterCount">0</span></div> <div id="readability">Show readability score.</div> </div> <label for="pet-select">Type de texte:</label> <select name="type" id="type-select"> <option value="">--Choisir une option--</option> <option value="poesie">Poésie</option> <option value="blog">Blog</option> </select> <div> <input type="checkbox" id="option10" name="option10" checked> <label for="option10">+10€</label> </div> <div> <input type="checkbox" id="option20" name="option20"> <label for="option20">+20€</label> </div> <div class="keywords"> Mots les plus utilisés : <ul id="topKeywords"> </ul> </div> </div> <script type="text/javascript" src="js/word-counter.js"></script> </body> </html>
Un exemple de ce qui est possible de faire
le reste.. ce ne sont que des conditions et des multiplications...
je te laisse chercher.
<!DOCTYPE html> <html> <head> <title>JS</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="description" content="A word counter built in HTML/CSS/JS. Shows number of characters, words, reading time and readability score. Also generates a list of top keywords."> </head> <body> <div class="container"> <h1>JS</h1> <textarea placeholder="Collez ici..."></textarea> <div class="right"> <a href="javascript:window.location.reload()">Réinitialiser JS</a> </div> <div class="output row"> <div>DURÉE ► <span id="readingTime">0</span></div> <div>NOMBRE DE MOTS ► <span id="wordCount">0</span></div> </div> <div class="output row"> <div>PHRASES ► <span id="sentenceCount">0</span></div> <div>PARAGRAPHES ► <span id="paragraphCount">0</span></div> </div> <div class="output row"> <div>CHARACTÈRES ► <span id="characterCount">0</span></div> <div id="readability">Show readability score.</div> </div> <label for="pet-select">Type de texte:</label> <select name="type" id="type-select"> <option value="">--Choisir une option--</option> <option value="poesie">Poésie</option> <option value="blog">Blog</option> </select> <div> <input type="checkbox" id="option10" name="option10" checked> <label for="option10">+10€</label> </div> <div> <input type="checkbox" id="option20" name="option20"> <label for="option20">+20€</label> </div> <div class="keywords"> Mots les plus utilisés : <ul id="topKeywords"> </ul> </div> <div class=""> <span> PRIX :</span><span id="sp_prix"></span> </div> </div> <script type="text/javascript" src="js/word-counter.js"></script> <script type="text/javascript"> input.addEventListener('keyup', function() { calculPrix(); }); function calculPrix(){ var typeSelect = document.getElementById('type-select'); valTS = typeSelect.value; if(valTS == "poesie" ){ alert('Vous avez choisi poesie'); }else if(valTS == "blog"){ alert('Vous avez choisi Blog'); }else{ console.log('Aucune option choisie...'); } //affichage dans la zone prix document.getElementById('sp_prix').innerHTML = '100'; } </script> </body> </html>
le reste.. ce ne sont que des conditions et des multiplications...
je te laisse chercher.
Et pour la partie Html ?
Qu'as tu commencé à faire exactement ?
Sur quoi bloques tu précisément ?
Ici on ne fait pas le travail à votre place... mais on veut bien aider à corriger en cas de difficultés.