API tools faq
paste
am_dot_com

SW 2022-04-01

am_dot_com
Apr 1st, 2022 (edited)
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!--
  5. DONE - externalizar o JS
  6. DONE - garantir que só depois de todo(s) o(s) doc(s) carregados é que solução poderá funcionar
  7. DONE - usar button (em vez de submit)
  8. -->
  9. <meta charset="UTF-8">
  10. <title>Numeração Romana</title>
  11. <!--
  12. O utilizador deverá indicar uma fronteira de inteiros;
  13. por exemplo, entre 1 e 33,
  14. e o sistema deverá mostrar-lhe a escrita desses
  15. inteiros, não na notação decimal do dia-a-dia,
  16. mas antes na notação "romana".
  17. -->
  18. <script src="4.js"></script>
  19. </head>
  20. <body>
  21. <!-- ol com type i, numera os seus list items
  22. com numeração romana (em letra pequena)
  23. -->
  24. <!--
  25. <ol type="i">
  26. <li>Max Verstappen</li>
  27. <li>Sergio Verstappen</li>
  28. </ol>
  29. -->
  30. <hr>
  31. <!--
  32. sem submit, a action será ignorada
  33. -->
  34. <form
  35. action="javascript:obterEscritaEmNotacaoRomana();"
  36. >
  37. <fieldset>
  38. <legend lang="pt">Fronteira de valores</legend>
  39. <!-- primeiro valor -->
  40. <label for="idNumInicial">Valor inicial:</label>
  41. <input
  42. type="number"
  43. min="1"
  44. max="9999"
  45. value="1"
  46. placeholder="1"
  47. id="idNumInicial"
  48. name="nameNumInicial"
  49. >
  50. <br>
  51. <!-- último valor -->
  52. <label for="idNumFinal">Valor final:</label>
  53. <input
  54. type="number"
  55. min="1"
  56. max="9999"
  57. value="33"
  58. placeholder="33"
  59. id="idNumFinal"
  60. name="nameNumFinal"
  61. >
  62. </fieldset>
  63.  
  64. <!-- elemento para desencadear o pedido, a computação -->
  65. <!--
  66. <input
  67. type="submit"
  68. value="ver este intervalo de números em notação romana"
  69. >
  70. -->
  71. <!-- TODO: operacionalizar o button -->
  72. <input
  73. id="idBtnSubmeter"
  74. type="button"
  75. value="ver este intervalo de números em notação romana"
  76. >
  77. </form>
  78. <hr><!-- quebra semântica -->
  79. <section id="idSectionFeedback">Aqui aparecerão os resultados.</section>
  80. </body>
  81. </html>
  82.  
  83. ****
  84.  
  85. //nomeDoObjeto.onNomeDoEvento=respostaAoEvento
  86. //nomeDoObjeto.onNomeDoEvento=nomeDeFunctionAExecutarParaResponder
  87. window.onload=boot;
  88.  
  89. //constantes com os ids dos elementos HTML para os quais queremos "ponte"
  90. const ID_NUM_INICIAL = "idNumInicial"
  91. const ID_NUM_FINAL = "idNumFinal"
  92. const ID_SECTION_FEEDBACK = "idSectionFeedback"
  93. const ID_BTN_SUBMETER = "idBtnSubmeter"
  94.  
  95. //variáveis de nível módulo, acessíveis a qq function
  96. //para corresponderem aos elementos HTML deste Sistema Web
  97. var oNumInicial,
  98. oNumFinal,
  99. oSectionFeedback,
  100. oBtnSubmeter;
  101.  
  102. /*
  103. boot será invocado AUTOMATICAMENTE pelo browser (window)
  104. quando o próprio detetar a ocorrência do evento "load"
  105. que acontece quando TODO o HTML e TODO o JS tiverem
  106. sido carregados em memória.
  107. A chamada a boot acontecerá exatamente 1 vez.
  108. */
  109. function boot(){
  110. //bridging html to javascript
  111. //1 - associações entre vars JS e elementos HTML
  112. oNumInicial = document.getElementById(ID_NUM_INICIAL)
  113. oNumFinal = document.getElementById(ID_NUM_FINAL)
  114. oSectionFeedback = document.getElementById(ID_SECTION_FEEDBACK)
  115. oBtnSubmeter = document.getElementById(ID_BTN_SUBMETER)
  116.  
  117. //coisa = document.getElementById("NAO_EXISTE") //Null
  118. //coisa.onclick = fazerAlgo; //ERROR!!!!!!!
  119. //var RELEVANTES = new Array();
  120. var coisaInexistente=document.getElementById("idXpto");
  121. var RELEVANTES = [
  122. oNumInicial, oNumFinal, oSectionFeedback, oBtnSubmeter
  123. //,coisaInexistente
  124. ]
  125.  
  126. bOK = qualityControl(RELEVANTES);
  127.  
  128. if (!bOK){ //if not ok
  129. window.alert("Critical Error. System unavailable.")
  130. return;
  131. }
  132.  
  133. //2 - conferir comportamentos
  134. //nomeDoObjeto.onevento=eventoHandler
  135. //notar q NÃO se está a fazer uma chamada
  136. //está a indicar-se o nome de uma function a chamar
  137. //quando (e se) o evento de "click" ocorrer.
  138. //Uma função q se atribua a um evento chama-se
  139. //um "event handler"
  140. oBtnSubmeter.onclick=obterEscritaEmNotacaoRomana;
  141. oNumInicial.onchange = oNumFinal.onchange = reagirMudancaDeIntervalo;
  142.  
  143. //cascade assignment
  144. //oBtnSubmeter.onclick = oNumInicial.onclick = oNumFinal.onclick = obterEscritaEmNotacaoRomana;
  145. }//boot
  146.  
  147. //event handler!
  148. function reagirMudancaDeIntervalo(){
  149. var iNumInicial = Number(oNumInicial.value);
  150. var iNumFinal = Number(oNumFinal.value);
  151. var bProblema = iNumInicial>iNumFinal;
  152. if (bProblema){
  153. var strResposta = "<mark>Pf, escreva um número final superior ao inicial.</mark>";
  154. oSectionFeedback.innerHTML = strResposta;
  155. }
  156. else{
  157. obterEscritaEmNotacaoRomana();
  158. }
  159. }//reagirMudancaDeIntervalo
  160.  
  161. //outro event handler
  162. function obterEscritaEmNotacaoRomana(){
  163. var iNumInicial, iNumFinal;
  164. iNumInicial = Number(oNumInicial.value); //type casting de string para Number
  165. iNumFinal = Number(oNumFinal.value); //type casting de string para Number
  166.  
  167. strHtmlResposta = "<ol type=\"i\" start=\""+iNumInicial+"\">";
  168. for
  169. (
  170. var iNumDoMomento=iNumInicial; //zona de init
  171. iNumDoMomento<=iNumFinal; //zona de continuidade check
  172. iNumDoMomento+=1 //zona de atualização
  173. ){
  174. //corpo
  175. var strNovaLinha="<li>";
  176. strNovaLinha+=(iNumDoMomento+""); //notar: a conversão explícita de Number para string
  177. strNovaLinha+="</li>"
  178. strHtmlResposta+=strNovaLinha
  179. }//for
  180. strHtmlResposta += "</ol>"; //+= concatenação cumulativa
  181.  
  182. oSectionFeedback.innerHTML=strHtmlResposta;
  183. }//obterEscritaEmNotacaoRomana
  184.  
  185. /*
  186. var aluno = {
  187. "nome":"Artur",
  188. "num":4321,
  189. "classificao":0
  190. }
  191. for (var propriedade in aluno){
  192. document.write(propriedade)
  193. }
  194.  
  195. */
  196.  
  197. function qualityControl(pColCriticalObjects){
  198. /*
  199. for (var criticalObject of pColCriticalObjects){
  200. var bOK = criticalObject!=null;
  201. if (!bOK){
  202. return false;
  203. }
  204. }//for
  205. */
  206. for (var idx=0; idx<pColCriticalObjects.length; idx+=1){
  207. var currentElement = pColCriticalObjects[idx]
  208. var bOK = currentElement!=null;
  209. if(!bOK){
  210. return false;
  211. }
  212. }//for
  213. return true;
  214. }//qualityControl
  215.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!