API tools faq
paste
Advertisement
am_dot_com

SW20210423

am_dot_com
Apr 23rd, 2021 (edited)
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.04 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 Booleanos</title>
  6.     <!--
  7.    e, ou, negação
  8.    e-lógico, ou-lógico, negação-lógica
  9.    e-booleano, ou-booleano, negação-boolena
  10.  
  11.    logical-and, logical-or, logical-negation
  12.  
  13.    Sendo estes operadores booleanos, trabalham sobre
  14.    operandos booleanos = {true, false}
  15.  
  16.    e-lógico : uma expressão lógica só é verdadeira se
  17.    TODOS os operandos foram true
  18.    Basta haver um operando false para que o resultado
  19.    seja false. Ou seja, o false é o elemento absorvente
  20.    do e-lógico. O true é o seu elemento neutro.
  21.  
  22.    ou-lógico : uma expressão lógica só é false se
  23.    TODOS os operadores forem false
  24.    Basta haver um operando true, para que o resultado
  25.    da operação seja true
  26.    O true é o elemento absorvente do ou.
  27.    O false é o elemento neutro do ou.
  28.  
  29.    operando-esquerdo operando-direito resultado da operação
  30.    E-lógico
  31.    t t = true
  32.    t f = false
  33.    f t = false
  34.    f f = false
  35.  
  36.    Ou-lógico
  37.    operando-esquerdo operando-direito resultado da operação
  38.    t t = true
  39.    t f = true
  40.    f t = true
  41.    f f = false
  42.  
  43.    !true = false
  44.    !false = true
  45.  
  46.    interpretação de inteiros para booleanos
  47.    0 significa false
  48.    !=0 significa true
  49.  
  50.    "" significa false
  51.    !="" significa true
  52.    -->
  53.     <script>
  54.         function $(pId){return document.getElementById(pId);}
  55.  
  56.         window.onload = boot;
  57.  
  58.         const
  59.             ID_SELECT_OPERANDO_ESQUERDO = "idSelectOperandoEsquerdo",
  60.             ID_SELECT_OPERANDO_DIREITO = "idSelectOperandoDireito",
  61.             ID_SELECT_OPERADOR = "idSelectOperador",
  62.             ID_BTN_CALCULAR = "idBtnCalcular",
  63.             ID_SECTION_FEEDBACK = "idSectionFeedback";
  64.  
  65.         var oSelectOpe,
  66.             oSelectOpd,
  67.             oSelectOp,
  68.             oBtnCalcular,
  69.             oSectionFeedback;
  70.  
  71.         function boot(){
  72.             //var password = document.nameForm.namePassword.value;
  73.             oSelectOpe = $(ID_SELECT_OPERANDO_ESQUERDO);
  74.             oSelectOpd = $(ID_SELECT_OPERANDO_DIREITO);
  75.             oSelectOp = $(ID_SELECT_OPERADOR);
  76.             oBtnCalcular = $(ID_BTN_CALCULAR);
  77.             oSectionFeedback = $(ID_SECTION_FEEDBACK);
  78.  
  79.             oBtnCalcular.onclick = calcular;
  80.         }
  81.  
  82.         function calcular(){
  83.             var strExp = oSelectOpe.value + oSelectOp.value + oSelectOpd.value;
  84.             var resultado = eval(strExp);
  85.             var strFraseDeResposta =
  86.                 strExp + " = <mark>" + resultado + "</mark>";
  87.  
  88.             //window.alert(resultado);
  89.             oSectionFeedback.innerHTML = strFraseDeResposta + "<br>" +
  90.                 oSectionFeedback.innerHTML;
  91.  
  92.             avcVsCc();
  93.         }//calcular
  94.  
  95.         //código para se perceber o que é, e qual diferença
  96.         //entre "avaliação completa" e "avaliação por curto circuito"
  97.         function avcVsCc (){
  98.             var bDiaCinzento = true;
  99.             var bTRex = false;
  100.             var b3; //undefined
  101.             var e1cc = bDiaCinzento || bTRex; //true
  102.             var e2cc = bDiaCinzento && bTRex; //false
  103.             var e1avc = bDiaCinzento | bTRex; //1
  104.             var e2avc = bDiaCinzento & bTRex; //0
  105.             oSectionFeedback.innerHTML+="<br>e1cc="+e1cc+
  106.                 "<br>e2cc="+e2cc;
  107.             oSectionFeedback.innerHTML+="<br>e1avc="+e1avc+
  108.                 "<br>e2avc="+e2avc;
  109.  
  110.             var e3 = e1cc || (b3=e2cc); //b3 undefined
  111.             var e3 = e1cc | (b3=e2cc); //b3 false
  112.  
  113.             //PORQUÊ?
  114.             //nas avaliações completas ( | ou &)
  115.            //a computação não pode saltar circuitos
  116.            //não pode saltar parciais
  117.            //Todas as sub-expressões terão que ser
  118.            //calculadas
  119.            alert (b3);
  120.  
  121.             var resultado = (r1=alg1()) & (r2=alg2()) | (r3=alg3());
  122.         }//avcVsCc
  123.  
  124.         function fimDaConversaSobreOperadoresBooleanos(){
  125.             var r = !true; //false
  126.             r = !r; //true
  127.             r = !!r; //true
  128.             r = ! (r || false); //false
  129.             r = !r || false; //true
  130.         }//fimDaConversaSobreOperadoresBooleanos
  131.     </script>
  132. </head>
  133.     <!--
  134.    regras CGI
  135.    #1) só são comunicados inputs que tenham name
  136.    #2) consoante o enctype, os dados são codificados de alguma maneira
  137.    no default enctype, são codificados assim:
  138.    nome1=v1&nome2=v2&nome=v3
  139.  
  140.       <input
  141.            type="password"
  142.            id="idPassword"
  143.            name="namePassword"
  144.            value="1234"
  145.        >
  146.        <br>
  147.        <input type="file" name="nameFile">
  148.  
  149.        enctype="multipart/form-data"
  150.  
  151.    -->
  152.     <form
  153.        name="nameForm"
  154.        method="get"
  155.        enctype="application/x-www-form-urlencoded"
  156.    >
  157.         <!-- operando booleano esquerdo -->
  158.         <select
  159.            id="idSelectOperandoEsquerdo"
  160.            name="nameOperandoEsquerdo"
  161.        >
  162.             <option value="true">true</option>
  163.             <option value="false">false</option>
  164.         </select>
  165.  
  166.         <!-- operador booleano -->
  167.         <!--
  168.        & ampersand "e-comercial"
  169.        | pipe "barra vertical"
  170.        -->
  171.         <select
  172.            id="idSelectOperador"
  173.            name="nameSelectOperador"
  174.        >
  175.             <option value="&&">e-lógico curto-circuito</option>
  176.             <option value="&">e-lógico completo</option>
  177.             <option selected value="||">ou-lógico curto-circuito</option>
  178.             <option value="|">ou-lógico completo</option>
  179.         </select>
  180.  
  181.         <!-- operando booleano direito -->
  182.         <select
  183.            id="idSelectOperandoDireito"
  184.            name="nameSelectOperandoDireito"
  185.        >
  186.             <option value="true">true</option>
  187.             <option value="false">false</option>
  188.         </select>
  189.  
  190.         <input type="button" id="idBtnCalcular" value="calcular">
  191.         <!--
  192.        <input type="submit" value="calcular">
  193.        -->
  194.     </form>
  195.     <hr>
  196.     <section id="idSectionFeedback">
  197.  
  198.     </section>
  199. <body>
  200.  
  201. </body>
  202. </html>
  203.  
  204. ******
  205.  
  206. <!DOCTYPE html>
  207. <html lang="en">
  208. <head>
  209.     <meta charset="UTF-8">
  210.     <title>Operadores Relacionais</title>
  211. </head>
  212. <body>
  213.     <!--
  214.    > maior
  215.    >= maior ou-lógico idêntico
  216.    < menor
  217.    <= menor ou-lógico idêntico
  218.    == idêntico
  219.    != diferente
  220.    === estritamente idêntico
  221.    !== estritamente diferente
  222.    -->
  223.  
  224. </body>
  225. </html>
  226.  
  227. **
  228.  
  229. <!DOCTYPE html>
  230. <html lang="en">
  231. <head>
  232.     <meta charset="UTF-8">
  233.     <title>Operadores Relacionais</title>
  234. </head>
  235. <body>
  236.     <!--
  237.    Todos os operadores relacionais computam
  238.    sempre e apenas um booleano (true ou false)
  239.    Todos operam entre operandos não necessariamente
  240.    numéricos
  241.    > maior
  242.    >= maior ou-lógico idêntico
  243.    < menor
  244.    <= menor ou-lógico idêntico
  245.    == idêntico
  246.    != diferente
  247.    === estritamente idêntico
  248.    !== estritamente diferente
  249.    -->
  250.     <script>
  251.         function ex1() {
  252.         var n1 = 10, n2 = 10;
  253.         var bMaior = n1 > n2; //10>10 false
  254.         var bMaiorOuIdentico = n1 >= n2; //10>=10 <=> "(10>10) || (10==10)" <=> true
  255.         var bMenor = n1 < n2; //10<10 false
  256.        var bMenorOuIdentico = n1 <= n2; //10<=10 true
  257.        var bIdentico = n1 == n2; //10==10 true
  258.        var bDiferente = n1 != n2; //10!=10 false
  259.        var bEstritamenteIdentico = n1===n2; //true
  260.        var bEstritamenteDiferente = n1!==n2; //false
  261.        }
  262.  
  263.        function ex2() {
  264.            var n1 = 10, n2 = "10";
  265.            var bMaior = n1 > n2; //10>"10" false
  266.             var bMaiorOuIdentico = n1 >= n2; //10>="10" true
  267.             var bMenor = n1 < n2; //10<"10" false
  268.            var bMenorOuIdentico = n1 <= n2; //10<="10" true
  269.            var bIdentico = n1 == n2; //10=="10" true
  270.            var bDiferente = n1 != n2; //10!="10" false
  271.            var bEstritamenteIdentico = n1===n2; //false, pq não têm o mesmo typeof
  272.            var bEstritamenteDiferente = n1!==n2; //true
  273.        }
  274.  
  275.        ex2();
  276.    </script>
  277.  
  278. </body>
  279. </html>
  280.  
  281. ****
  282.  
  283. ~<!DOCTYPE html>
  284. <html lang="en">
  285. <head>
  286.     <meta charset="UTF-8">
  287.     <title>Radio Buttons in Action</title>
  288.     <script>
  289.         window.onload = boot;
  290.         const ID_TEXT_NAME = "idTextName",
  291.             ID_BTN_RESPONDER ="idBtnResponder";
  292.         var oTextName, oBtnResponder;
  293.  
  294.         function rbValue(
  295.             pNomeDaEquipaDeRbs
  296.         ){
  297.             // [0=> morango, 1=> melancia, 2=>ameixa, 3=>kiwi]
  298.             var equipaRbs =
  299.                 document.getElementsByName(pNomeDaEquipaDeRbs);
  300.             var iQuantosElementosHaNaEquipa =
  301.                 equipaRbs.length;
  302.  
  303.             for (var idx=0; idx<iQuantosElementosHaNaEquipa; idx++){
  304.                var elementoDoMomento = equipaRbs[idx];
  305.                var bChecked = elementoDoMomento.checked;
  306.                if (bChecked){
  307.                    return elementoDoMomento.value;
  308.                }
  309.            }
  310.            return false;
  311.        }//rbValue
  312.  
  313.        function boot(){
  314.            oTextName = document.getElementById(ID_TEXT_NAME);
  315.            oBtnResponder = document.getElementById
  316.            (ID_BTN_RESPONDER);
  317.  
  318.            oBtnResponder.onclick=function(){
  319.                window.alert(
  320.                    oTextName.value + " respondeu"
  321.                );
  322.            }
  323.        }
  324.    </script>
  325. </head>
  326. <body>
  327.     <!--
  328.    Radio Buttons são mecanismos de interface tipicamente
  329.    utilizados para colher resposta "mutuamente exclusivas"
  330.    quer dizer: escolher uma, implica automaticamente
  331.    deseleccionar as outras
  332.    MAS para que este comportamento efetivamente aconteça
  333.    todos os radio buttons que queiramos que se comportem
  334.    como uma equipa terão que ter o MESMO NAME
  335.    (não o mesmo id)
  336.    O MESMO NAME
  337.    -->
  338.   <form>
  339.       <input type="text" id="idTextName" value="Joaquim">
  340.       <br>
  341.     <fieldset>
  342.         <legend>Qual a tua fruta favorita?</legend>
  343.         <input type="radio" id="idMorango" name="radioFrutas" value="morango">
  344.         <label for="idMorango">Morango</label><br>
  345.  
  346.         <!-- TODO - melhorar semanticamente -->
  347.         <input type="radio" id="idMelancia" name="radioFrutas" value="melancia">Melancia<br>
  348.         <input type="radio" id="idAmeixa" name="radioFrutas" value="ameixa">Ameixa<br>
  349.         <input checked type="radio" id="idKiwi" name="radioFrutas" value="kiwi">Kiwi<br>
  350.     </fieldset>
  351.  
  352.     <input type="button" value="responder" id="idBtnResponder">
  353.   </form>
  354. </body>
  355. </html>
  356.  
  357. **
  358.  
  359. <!DOCTYPE html>
  360. <html lang="en">
  361. <head>
  362.     <meta charset="UTF-8">
  363.     <title>Radio Buttons in Action</title>
  364.     <script>
  365.         window.onload = boot;
  366.         const ID_TEXT_NAME = "idTextName",
  367.             ID_BTN_RESPONDER ="idBtnResponder";
  368.         var oTextName, oBtnResponder;
  369.  
  370.         function rbValue(
  371.             pNomeDaEquipaDeRbs
  372.         ){
  373.             // [0=> morango, 1=> melancia, 2=>ameixa, 3=>kiwi]
  374.             var equipaRbs =
  375.                 document.getElementsByName(pNomeDaEquipaDeRbs);
  376.             var iQuantosElementosHaNaEquipa =
  377.                 equipaRbs.length;
  378.  
  379.             for (var idx=0; idx<iQuantosElementosHaNaEquipa; idx++){
  380.                var elementoDoMomento = equipaRbs[idx];
  381.                var bChecked = elementoDoMomento.checked;
  382.                if (bChecked){
  383.                    return elementoDoMomento.value;
  384.                }
  385.            }
  386.            return false;
  387.        }//rbValue
  388.  
  389.        function boot(){
  390.            oTextName = document.getElementById(ID_TEXT_NAME);
  391.            oBtnResponder = document.getElementById
  392.            (ID_BTN_RESPONDER);
  393.  
  394.            oBtnResponder.onclick=function(){
  395.                var resposta = rbValue("radioFrutas");
  396.  
  397.                window.alert(
  398.                    oTextName.value + " respondeu "+resposta
  399.                );
  400.            }
  401.        }
  402.    </script>
  403. </head>
  404. <body>
  405.     <!--
  406.    Radio Buttons são mecanismos de interface tipicamente
  407.    utilizados para colher resposta "mutuamente exclusivas"
  408.    quer dizer: escolher uma, implica automaticamente
  409.    deseleccionar as outras
  410.    MAS para que este comportamento efetivamente aconteça
  411.    todos os radio buttons que queiramos que se comportem
  412.    como uma equipa terão que ter o MESMO NAME
  413.    (não o mesmo id)
  414.    O MESMO NAME
  415.    -->
  416.   <form>
  417.       <input type="text" id="idTextName" value="Joaquim">
  418.       <br>
  419.     <fieldset>
  420.         <legend>Qual a tua fruta favorita?</legend>
  421.         <input type="radio" id="idMorango" name="radioFrutas" value="morango">
  422.         <label for="idMorango">Morango</label><br>
  423.  
  424.         <!-- TODO - melhorar semanticamente -->
  425.         <input type="radio" id="idMelancia" name="radioFrutas" value="melancia">Melancia<br>
  426.         <input type="radio" id="idAmeixa" name="radioFrutas" value="ameixa">Ameixa<br>
  427.         <input checked type="radio" id="idKiwi" name="radioFrutas" value="kiwi">Kiwi<br>
  428.     </fieldset>
  429.  
  430.     <input type="button" value="responder" id="idBtnResponder">
  431.   </form>
  432. </body>
  433. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!