API tools faq
paste
am_dot_com

sw20210409

am_dot_com
Apr 9th, 2021 (edited)
178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.54 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Operadores Aritméticos</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         //window.onload = boot(); //errado porque corresponde à execução neste exato instante (quando tantos elementos ainda NÃO foram carregados)
  10.         window.onload = boot; //correto, porque significa "invocar boot quando (e apenas quando)" tudo (HTML+JS) tiver sido loaded/carregado
  11.  
  12.         var oOperandoEsquerdo, oOperador, oOperandoDireito, oCalcular;
  13.         var oSectionResposta;
  14.  
  15.         function boot(){
  16.             //1 - casamentos / associações entre vars do JS e elementos HTML
  17.             oOperandoEsquerdo = window.document.getElementById("idOperandoEsquerdo"); //null se o id não existir
  18.             oOperador = window.document.getElementById("idOperador");
  19.             oOperandoDireito = window.document.getElementById("idOperandoDireito");
  20.             oCalcular = window.document.getElementById("idCalcular");
  21.             oSectionResposta = window.document.getElementById("idSectionResposta");
  22.  
  23.             //2 - conferir comportamentos aos objetos HTML relevantes
  24.             //nomeDeObjeto.nomeDeEventToHandle = eventHandler;
  25.             //oCalcular.onclick = function (){i1; i2; ... i3;}; //anonymous function
  26.  
  27.             //NÃO queremos invocar a function!
  28.             //queremos indicar o nome de uma function a invocar
  29.             oCalcular.onclick = functionQueVaiResponderAoMomentoDoClickEmCalcular; //named function
  30.         }//boot
  31.  
  32.         function functionQueVaiResponderAoMomentoDoClickEmCalcular(){
  33.             var oe = oOperandoEsquerdo.value.trim(); //string ; exemplo de trim " 222   " -> "222"
  34.             var od = oOperandoDireito.value.trim(); //trim é um método de objetos do tipo string
  35.             var op = oOperador.value.trim();
  36.             var r = maquinaDeCalcularAritmetica (oe, op, od);
  37.  
  38.             /*
  39.             TODO:
  40.             onde e como apresentar a resposta?
  41.             onde e como chamar boot?
  42.              */
  43.  
  44.             //window.alert("O resultado é "+r); //caixa de diálogo com o resultado
  45.  
  46.             //innerHTML representa o conteúdo de qualquer elemento não vazio
  47.             oSectionResposta.innerHTML = "O resultado é <mark>"+r+"</mark>";
  48.         }//functionQueVaiResponderAoMomentoDoClickEmCalcular
  49.  
  50.         function maquinaDeCalcularAritmetica(
  51.             pOperandoEsquerdo,
  52.             pOperador,
  53.             pOperandoDireito
  54.         ){
  55.             var strExpressaoParaSerCalculada =
  56.                 pOperandoEsquerdo + pOperador + pOperandoDireito;
  57.  
  58.             var resultado = eval (strExpressaoParaSerCalculada);
  59.             return resultado;
  60.         }//maquinaDeCalcularAritmetica
  61.     </script>
  62.     <!-- form é um elemento para colecionar inputs / entradas / respostas -->
  63.     <form>
  64.         <!-- operando esquerdo -->
  65.         <label for="idOperandoEsquerdo">operando esquerdo</label>
  66.         <input
  67.            id="idOperandoEsquerdo"
  68.            type="text"
  69.            value="2"
  70.            placeholder="operando esquerdo exº 2"
  71.        ><!-- elemento vazio para representar uma entrada / resposta -->
  72.         <!-- operador -->
  73.         <label for="idOperador">operador</label>
  74.         <select id="idOperador"><!-- conjunto fechado de possibilidades -->
  75.             <option>+</option>
  76.             <option>-</option>
  77.             <option>*</option>
  78.             <option>/</option>
  79.             <option>%</option>
  80.         </select>
  81.         <!-- operando direito -->
  82.         <label for="idOperandoDireito">operando direito</label>
  83.         <input
  84.            id="idOperandoDireito"
  85.            type="text"
  86.            value="1"
  87.            placeholder="operando direito exº 1"
  88.        >
  89.         <input
  90.            id="idCalcular"
  91.            type="button"
  92.            value="calcular"
  93.        >
  94.     </form>
  95.     <hr>
  96.     <section id="idSectionResposta">Aqui aparecerá a computação do resultado.</section>
  97. </body>
  98. </html>
  99.  
  100. *****************************
  101.  
  102. <!DOCTYPE html>
  103. <html lang="en">
  104. <head>
  105.     <meta charset="UTF-8">
  106.     <title>Operadores Aritméticos</title>
  107.     <!-- o JS foi externalizado e é incorporado agora, pelo elemento script -->
  108.     <script src="2.js"></script>
  109. </head>
  110. <body>
  111.     <!-- form é um elemento para colecionar inputs / entradas / respostas -->
  112.     <form>
  113.         <!-- operando esquerdo -->
  114.         <label for="idOperandoEsquerdo">operando esquerdo</label>
  115.         <input
  116.            id="idOperandoEsquerdo"
  117.            type="text"
  118.            value="2"
  119.            placeholder="operando esquerdo exº 2"
  120.        ><!-- elemento vazio para representar uma entrada / resposta -->
  121.         <!-- operador -->
  122.         <label for="idOperador">operador</label>
  123.         <select id="idOperador"><!-- conjunto fechado de possibilidades -->
  124.             <option>+</option>
  125.             <option>-</option>
  126.             <option>*</option>
  127.             <option>/</option>
  128.             <option>%</option>
  129.         </select>
  130.         <!-- operando direito -->
  131.         <label for="idOperandoDireito">operando direito</label>
  132.         <input
  133.            id="idOperandoDireito"
  134.            type="text"
  135.            value="1"
  136.            placeholder="operando direito exº 1"
  137.        >
  138.         <input
  139.            id="idCalcular"
  140.            type="button"
  141.            value="calcular"
  142.        >
  143.     </form>
  144.     <hr>
  145.     <section id="idSectionResposta">Aqui aparecerá a computação do resultado.</section>
  146. </body>
  147. </html>
  148.  
  149. ***************************
  150.  
  151. //window.onload = boot(); //errado porque corresponde à execução neste exato instante (quando tantos elementos ainda NÃO foram carregados)
  152. window.onload = boot; //correto, porque significa "invocar boot quando (e apenas quando)" tudo (HTML+JS) tiver sido loaded/carregado
  153.  
  154. var oOperandoEsquerdo, oOperador, oOperandoDireito, oCalcular;
  155. var oSectionResposta;
  156.  
  157. function boot(){
  158.     //1 - casamentos / associações entre vars do JS e elementos HTML
  159.     oOperandoEsquerdo = window.document.getElementById("idOperandoEsquerdo"); //null se o id não existir
  160.     oOperador = window.document.getElementById("idOperador");
  161.     oOperandoDireito = window.document.getElementById("idOperandoDireito");
  162.     oCalcular = window.document.getElementById("idCalcular");
  163.     oSectionResposta = window.document.getElementById("idSectionResposta");
  164.  
  165.     //2 - conferir comportamentos aos objetos HTML relevantes
  166.     //nomeDeObjeto.nomeDeEventToHandle = eventHandler;
  167.     //oCalcular.onclick = function (){i1; i2; ... i3;}; //anonymous function
  168.  
  169.     //NÃO queremos invocar a function!
  170.     //queremos indicar o nome de uma function a invocar
  171.     oCalcular.onclick = functionQueVaiResponderAoMomentoDoClickEmCalcular; //named function
  172. }//boot
  173.  
  174. function functionQueVaiResponderAoMomentoDoClickEmCalcular(){
  175.     var oe = oOperandoEsquerdo.value.trim(); //string ; exemplo de trim " 222   " -> "222"
  176.     var od = oOperandoDireito.value.trim(); //trim é um método de objetos do tipo string
  177.     var op = oOperador.value.trim();
  178.     var r = maquinaDeCalcularAritmetica (oe, op, od);
  179.  
  180.     /*
  181.     TODO:
  182.     onde e como apresentar a resposta?
  183.     onde e como chamar boot?
  184.      */
  185.  
  186.     //window.alert("O resultado é "+r); //caixa de diálogo com o resultado
  187.  
  188.     //innerHTML representa o conteúdo de qualquer elemento não vazio
  189.     oSectionResposta.innerHTML = "O resultado é <mark>"+r+"</mark>";
  190. }//functionQueVaiResponderAoMomentoDoClickEmCalcular
  191.  
  192. function maquinaDeCalcularAritmetica(
  193.     pOperandoEsquerdo,
  194.     pOperador,
  195.     pOperandoDireito
  196. ){
  197.     var strExpressaoParaSerCalculada =
  198.         pOperandoEsquerdo + pOperador + pOperandoDireito;
  199.  
  200.     var resultado = eval (strExpressaoParaSerCalculada);
  201.     return resultado;
  202. }//maquinaDeCalcularAritmetica
  203.  
  204. ****
  205.  
  206. <!DOCTYPE html>
  207. <html lang="en">
  208. <head>
  209.     <meta charset="UTF-8">
  210.     <title>My Google Searcher</title>
  211.     <script>
  212.         window.onload = boot;
  213.  
  214.         const
  215.             ID_TEXT_SEARCH_EXP = "idTextSearchExp", //better this way, for internal documentation
  216.             ID_BTN_SEARCH = "idBtnSearch"; //cascade declaration
  217.  
  218.         var oTextSearchExp, oBtnSearch;
  219.  
  220.         function boot(){
  221.             var x;
  222.             //1 - associations
  223.             oTextSearchExp = document.getElementById(ID_TEXT_SEARCH_EXP);
  224.             oBtnSearch = document.getElementById(ID_BTN_SEARCH);
  225.  
  226.             //2 - set behaviors
  227.             /*
  228.             oBtnSearch.onclick = function(){
  229.                 window.alert("Will search for "+oTextSearchExp.value);
  230.             }//anonymous function
  231.              */
  232.  
  233.             oBtnSearch.onclick = willBuildTheRightGoogleQueryAndPerformTheSearch;
  234.         }//boot
  235.  
  236.         function willBuildTheRightGoogleQueryAndPerformTheSearch(){
  237.             /*
  238.             A Google search is performed by calling a base URL
  239.             https://www.google.com/search?
  240.             and appending it the necessary params
  241.             At least, the search expression must be provided:
  242.  
  243.             q param - is the search expression when the terms' order is NOT relevant
  244.             as_epq param - is the search expression to use, when the terms' order IS relevant
  245.              */
  246.  
  247.             var strSearchExpression = oTextSearchExp.value.trim();
  248.             var strQuery = "q="+strSearchExpression; //q=a b
  249.             var strSearchUrl = "https://www.google.com/search?"+strQuery;
  250.             window.document.location.href=strSearchUrl;
  251.         }//willBuildTheRightGoogleQueryAndPerformTheSearch
  252.     </script>
  253. </head>
  254. <body>
  255.     <form>
  256.         <label for="idTextSearchExp">Search expression: </label>
  257.         <input
  258.            id="idTextSearchExp"
  259.            type="text"
  260.            value="blue mushrooms"
  261.            placeholder="your search expression"
  262.        >
  263.  
  264.         <input
  265.            id="idBtnSearch"
  266.            type="button"
  267.            value="search!"
  268.        >
  269.     </form>
  270. </body>
  271. </html>
  272.  
  273. ************
  274.  
  275.  
  276. <!DOCTYPE html>
  277. <html lang="en">
  278. <head>
  279.     <meta charset="UTF-8">
  280.     <title>My Google Searcher</title>
  281.     <script>
  282.         window.onload = boot;
  283.  
  284.         const GOOGLE_SEARCH_BASE = "https://www.google.com/search?";
  285.  
  286.         const
  287.             ID_TEXT_SEARCH_EXP = "idTextSearchExp", //better this way, for internal documentation
  288.             ID_BTN_SEARCH = "idBtnSearch",
  289.             ID_CHECK_ORDER_IS_RELEVANT = "idCheckOrderIsRelevant"
  290.             ;//cascade declaration
  291.  
  292.         var oTextSearchExp,
  293.             oBtnSearch,
  294.             oCheckOrderIsRelevant
  295.             ;
  296.  
  297.         function boot(){
  298.             //1 - associations
  299.             oTextSearchExp = document.getElementById(ID_TEXT_SEARCH_EXP);
  300.             oBtnSearch = document.getElementById(ID_BTN_SEARCH);
  301.             oCheckOrderIsRelevant = document.getElementById(ID_CHECK_ORDER_IS_RELEVANT);
  302.  
  303.             //TODO: quality-control
  304.  
  305.             //2 - set behaviors
  306.             /*
  307.             oBtnSearch.onclick = function(){
  308.                 window.alert("Will search for "+oTextSearchExp.value);
  309.             }//anonymous function
  310.              */
  311.  
  312.             oBtnSearch.onclick = willBuildTheRightGoogleQueryAndPerformTheSearch;
  313.         }//boot
  314.  
  315.         function willBuildTheRightGoogleQueryAndPerformTheSearch(){
  316.             /*
  317.             A Google search is performed by calling a base URL
  318.             https://www.google.com/search?
  319.             and appending it the necessary params
  320.             At least, the search expression must be provided:
  321.  
  322.             q param - is the search expression when the terms' order is NOT relevant
  323.             as_epq param - is the search expression to use, when the terms' order IS relevant
  324.              */
  325.  
  326.             var strSearchExpression = oTextSearchExp.value.trim();
  327.             var bIsOrderRelevant = oCheckOrderIsRelevant.checked; //true (if it is checked) or false (if NOT checked)
  328.  
  329.             if (bIsOrderRelevant){
  330.                 //let would NOT work in this code
  331.                 var strQuery = "as_epq="+strSearchExpression;
  332.             }
  333.             else{
  334.                 //let would NOT work in this code
  335.                 var strQuery = "q="+strSearchExpression;
  336.             }
  337.  
  338.             var strSearchUrl = GOOGLE_SEARCH_BASE+strQuery;
  339.  
  340.             window.document.location.href=strSearchUrl;
  341.         }//willBuildTheRightGoogleQueryAndPerformTheSearch
  342.     </script>
  343. </head>
  344. <body>
  345.     <form>
  346.         <label for="idTextSearchExp">Search expression: </label>
  347.         <input
  348.            id="idTextSearchExp"
  349.            type="text"
  350.            value="blue mushrooms"
  351.            placeholder="your search expression"
  352.        >
  353.  
  354.         <label>Terms' order is relevant</label>
  355.         <input
  356.            id="idCheckOrderIsRelevant"
  357.            type="checkbox"
  358.        >
  359.  
  360.         <input
  361.            id="idBtnSearch"
  362.            type="button"
  363.            value="search!"
  364.        >
  365.     </form>
  366. </body>
  367. </html>
  368.  
  369. *******************************
  370.  
  371. <!DOCTYPE html>
  372. <html lang="en">
  373. <head>
  374.     <meta charset="UTF-8">
  375.     <title>My Google Searcher</title>
  376.     <script>
  377.         window.onload = boot;
  378.  
  379.         const GOOGLE_SEARCH_BASE = "https://www.google.com/search?";
  380.  
  381.         const
  382.             ID_TEXT_SEARCH_EXP = "idTextSearchExp", //better this way, for internal documentation
  383.             ID_BTN_SEARCH = "idBtnSearch",
  384.             ID_CHECK_ORDER_IS_RELEVANT = "idCheckOrderIsRelevant",
  385.             ID_SELECT_SAFETY = "idSelectSafety"
  386.             ;//cascade declaration
  387.  
  388.         var oTextSearchExp,
  389.             oBtnSearch,
  390.             oCheckOrderIsRelevant,
  391.             oSelectSafety
  392.             ;
  393.  
  394.         function boot(){
  395.             //1 - associations
  396.             oTextSearchExp = document.getElementById(ID_TEXT_SEARCH_EXP);
  397.             oBtnSearch = document.getElementById(ID_BTN_SEARCH);
  398.             oCheckOrderIsRelevant = document.getElementById(ID_CHECK_ORDER_IS_RELEVANT);
  399.             oSelectSafety = document.getElementById(ID_SELECT_SAFETY);
  400.  
  401.             //TODO: quality-control
  402.  
  403.             //2 - set behaviors
  404.             /*
  405.             oBtnSearch.onclick = function(){
  406.                 window.alert("Will search for "+oTextSearchExp.value);
  407.             }//anonymous function
  408.              */
  409.  
  410.             oBtnSearch.onclick = willBuildTheRightGoogleQueryAndPerformTheSearch;
  411.         }//boot
  412.  
  413.         function willBuildTheRightGoogleQueryAndPerformTheSearch(){
  414.             /*
  415.             A Google search is performed by calling a base URL
  416.             https://www.google.com/search?
  417.             and appending it the necessary params
  418.             At least, the search expression must be provided:
  419.  
  420.             q param - is the search expression when the terms' order is NOT relevant
  421.             as_epq param - is the search expression to use, when the terms' order IS relevant
  422.  
  423.             Other params:
  424.             safety - controls the "safety" of the results (off for no safety)
  425.              */
  426.  
  427.             var strSearchExpression = oTextSearchExp.value.trim();
  428.             var bIsOrderRelevant = oCheckOrderIsRelevant.checked; //true (if it is checked) or false (if NOT checked)
  429.  
  430.             //TODO: there is something ugly related to the strSearchExpression
  431.             if (bIsOrderRelevant){
  432.                 //let would NOT work in this code
  433.                 var strQuery = "as_epq="+strSearchExpression;
  434.             }
  435.             else{
  436.                 //let would NOT work in this code
  437.                 var strQuery = "q="+strSearchExpression;
  438.             }
  439.  
  440.             strQuery+="&safety="+oSelectSafety.value;
  441.  
  442.             var strSearchUrl = GOOGLE_SEARCH_BASE+strQuery;
  443.  
  444.             window.document.location.href=strSearchUrl;
  445.         }//willBuildTheRightGoogleQueryAndPerformTheSearch
  446.     </script>
  447. </head>
  448. <body>
  449.     <form>
  450.         <label for="idTextSearchExp">Search expression: </label>
  451.         <input
  452.            id="idTextSearchExp"
  453.            type="text"
  454.            value="blue mushrooms"
  455.            placeholder="your search expression"
  456.        >
  457.  
  458.         <label>Terms' order is relevant</label>
  459.         <input
  460.            id="idCheckOrderIsRelevant"
  461.            type="checkbox"
  462.        >
  463.  
  464.         <label for="idSelectSafety">Results' safety</label>
  465.         <select id="idSelectSafety">
  466.             <!-- TODO value for option -->
  467.             <option>full safety</option>
  468.             <option>all images</option>
  469.             <option>partial images</option>
  470.             <option selected value="off">off</option>
  471.         </select>
  472.  
  473.         <input
  474.            id="idBtnSearch"
  475.            type="button"
  476.            value="search!"
  477.        >
  478.     </form>
  479. </body>
  480. </html>
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!