API tools faq
paste
am_dot_com

SW20210407

am_dot_com
Apr 7th, 2021 (edited)
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.59 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>Introdução ao JS</title>
  6. </head>
  7. <body>
  8. <!-- -->
  9.     <script>
  10.         //single line
  11.  
  12.         /*
  13.         JS = linguagem "fracamente tipificada" => as entidades têm SEMPRE um tipo, mas esse tipo pode mudar
  14.         Java = linguagem "fortemente tipificada" => as entidades têm SEMPRE um tipo, que nunca pode mudar
  15.  
  16.         3 formas de entidade diferentes = const , var , function
  17.  
  18.         procedimental
  19.         orientada a objetos = por prototipagem
  20.          */
  21.  
  22.         const PI = 3.1415; //fim de instrução (operação de atribuição) simples
  23.         var i= undefined; //declaração de um identificador de nome i
  24.         ;
  25.         ; //notação do camelo / camel-notation para identificadores
  26.         //hungarian postfix notation
  27.         ;
  28.         ; //instrução vazia "NOP" = No Operation
  29.         var tipoDoPI = typeof (PI);
  30.         var tipoDoI = typeof (i);
  31.         var tipo_do_i = typeof(i); //operando-esquerdo ; operador (binário = 2 operandos = aridade 2) ; operando-direito
  32.         var soma = 2+3; //a sintaxe / a notação + faz de operador aritmético de soma
  33.         //var soma = /* n-ária */ +(1 2 3 4 5 6); //em LISP
  34.  
  35.         var fraseParaPI = "O tipo do identificador PI é "+tipoDoPI+"<br>";
  36.         var fraseParaI="O tipo do identificador i é "+tipoDoI+"<br>"; // + operador concatenação
  37.         document.write (fraseParaPI);
  38.         document.write (fraseParaI);
  39.  
  40.         //undefined = {undefined}
  41.         // boolean = {true, false}
  42.         // number = {23.0, 1.2}
  43.         // int 16 bits 2^16 = 65536 = {2, 65537} = {-32768, 32767} LISP
  44.         document.write ("<h1>Tipos de dados nativos em JS</h1>");
  45.  
  46.         function maquina(
  47.             pEntrada1,
  48.             pEntrada2
  49.         ) //dois parâmetros
  50.         {
  51.             document.write("<mark>Olá "+pEntrada1+" "+pEntrada2+"</mark><br>");
  52.             pEntrada1 = "zlxkxjd alskjd alksdja lksdjalkjd lakj dlkajsd ";
  53.         }
  54.  
  55.         //argumentos associam-se a params através de "passagem por valor" vs. "passagem por referência" (não há em JS)
  56.         var v1="bla", v2="ble";
  57.         maquina(
  58.             //"bla",
  59.             //"ble"
  60.             v1,
  61.             v2
  62.         ); //dois argumentos
  63.  
  64.         document.write (v1+"<br>"); //bla
  65.  
  66.         function maquinaParaEscreverOValorEOTipoDeUmaCoisa (pCoisa){
  67.             var frase = pCoisa+" tipo: "+typeof(pCoisa)+"<br>";
  68.             document.write(frase);
  69.             //return frase; //se uma function não fizer return, não lhe é atribuido um valor, logo o seu valor é undefined
  70.             return undefined;
  71.         }//maquinaParaEscreverOValorEOTipoDeUmaCoisa
  72.  
  73.         var x;
  74.         maquinaParaEscreverOValorEOTipoDeUmaCoisa (x);
  75.  
  76.         x = 3;
  77.         maquinaParaEscreverOValorEOTipoDeUmaCoisa (x);
  78.  
  79.         x = 3.3;
  80.         maquinaParaEscreverOValorEOTipoDeUmaCoisa (x);
  81.  
  82.         x = 'Artur';
  83.         maquinaParaEscreverOValorEOTipoDeUmaCoisa (x);
  84.  
  85.         x = maquina;
  86.         maquinaParaEscreverOValorEOTipoDeUmaCoisa (x);
  87.  
  88.         /*
  89.         x=1234;
  90.         maquinaParaEscreverOValorEOTipoDeUmaCoisa(
  91.             maquinaParaEscreverOValorEOTipoDeUmaCoisa(x,x)
  92.         );
  93.  
  94.          */
  95.  
  96.         function minhaSoma(pV1, pV2)
  97.         {
  98.             var resultado = pV1 + pV2;
  99.             return resultado; //equivale a operador de atribuição para functions *e* termina a execução do algoritmo
  100.  
  101.             //as instruções seguintes nunca acontecerão
  102.             maquinaParaEscreverOValorEOTipoDeUmaCoisa (true);
  103.             maquinaParaEscreverOValorEOTipoDeUmaCoisa (false);
  104.         }
  105.  
  106.         var res = minhaSoma(2,2);
  107.         document.write(
  108.             res
  109.         );
  110.     </script>
  111. </body>
  112. </html>
  113.  
  114.  
  115. ********************
  116.  
  117.  
  118. <!DOCTYPE html>
  119. <html lang="en">
  120. <head>
  121.     <meta charset="UTF-8">
  122.     <title>Operadores Aritméticos</title>
  123. </head>
  124. <body>
  125.     <script>
  126.         /*
  127.         Os operadores aritméticos em JS são binários (2 operandos) e infixos (operador entre operandos); i.e.
  128.         operando-esquerdo operador operando-direito
  129.  
  130.         + soma // 2+2
  131.         - subtração // 2-2
  132.         * multiplicação // 2*2
  133.         / divisão // 2/2
  134.         % resto da divisão inteira // 2%2 "operador modulus"
  135.         casos de uso +comuns para % são determinação de multiplicidade: um nº x é múltiplo de y, quando o resto da sua
  136.         divisão inteira por y é zero
  137.         6%3 === 0
  138.         9%3 === 0
  139.         10%3 === 1
  140.          */
  141.  
  142.         function par (
  143.             pX //param
  144.         ){
  145.             return pX%2 === 0; // === operador relacional de estritamente idêntico ; compara-se o valor *e* o tipo
  146.         }
  147.  
  148.         function maquinaDeCalcularAritmetica(
  149.             pOperandoEsquerdo,
  150.             pOperador,
  151.             pOperandoDireito
  152.         ){
  153.             var strExpressaoParaSerCalculada =
  154.                 pOperandoEsquerdo + pOperador + pOperandoDireito;
  155.  
  156.             var resultado = eval (strExpressaoParaSerCalculada);
  157.             return resultado;
  158.         }//maquinaDeCalcularAritmetica
  159.  
  160.         document.write (maquinaDeCalcularAritmetica (5,"%", 2));
  161.         document.write("<br>");
  162.  
  163.         var x = 39;
  164.         document.write(
  165.             par(
  166.                 //39 //argumento é um inteiro literal
  167.                 x
  168.             )
  169.         );
  170.  
  171.     </script>
  172. </body>
  173. </html>
  174.  
  175.  
  176. ********************
  177.  
  178.  
  179. <!DOCTYPE html>
  180. <html lang="en">
  181. <head>
  182.     <meta charset="UTF-8">
  183.     <title>Operadores Aritméticos</title>
  184. </head>
  185. <body>
  186.     <!-- form é um elemento para colecionar inputs / entradas / respostas -->
  187.     <form>
  188.         <!-- operando esquerdo -->
  189.         <label for="idOperandoEsquerdo">operando esquerdo</label>
  190.         <input
  191.            id="idOperandoEsquerdo"
  192.            type="text"
  193.            value="2"
  194.        ><!-- elemento vazio para representar uma entrada / resposta -->
  195.         <!-- operador -->
  196.         <label for="idOperador">operador</label>
  197.         <input
  198.            id="idOperador"
  199.            type="text"
  200.            value="+"
  201.        >
  202.         <!-- operando direito -->
  203.         <label for="idOperandoDireito">operando direito</label>
  204.         <input
  205.            id="idOperandoDireito"
  206.            type="text"
  207.            value="1"
  208.        >
  209.         <input
  210.            type="button"
  211.            value="calcular"
  212.        >
  213.     </form>
  214. </body>
  215. </html>
  216.  
  217. *********************
  218.  
  219.  
  220. <!DOCTYPE html>
  221. <html lang="en">
  222. <head>
  223.     <meta charset="UTF-8">
  224.     <title>Operadores Aritméticos</title>
  225. </head>
  226. <body>
  227.     <!-- form é um elemento para colecionar inputs / entradas / respostas -->
  228.     <form>
  229.         <!-- operando esquerdo -->
  230.         <label for="idOperandoEsquerdo">operando esquerdo</label>
  231.         <input
  232.            id="idOperandoEsquerdo"
  233.            type="text"
  234.            value="2"
  235.            placeholder="operando esquerdo exº 2"
  236.        ><!-- elemento vazio para representar uma entrada / resposta -->
  237.         <!-- operador -->
  238.         <label for="idOperador">operador</label>
  239.         <select id="idOperador"><!-- conjunto fechado de possibilidades -->
  240.             <option>+</option>
  241.             <option>-</option>
  242.             <option>*</option>
  243.             <option>/</option>
  244.             <option>%</option>
  245.         </select>
  246.         <!-- operando direito -->
  247.         <label for="idOperandoDireito">operando direito</label>
  248.         <input
  249.            id="idOperandoDireito"
  250.            type="text"
  251.            value="1"
  252.            placeholder="operando direito exº 1"
  253.        >
  254.         <input
  255.            id="idCalcular"
  256.            type="button"
  257.            value="calcular"
  258.        >
  259.     </form>
  260. </body>
  261. </html>
  262.  
  263. ****
  264.  
  265.  
  266. <!DOCTYPE html>
  267. <html lang="en">
  268. <head>
  269.     <meta charset="UTF-8">
  270.     <title>Operadores Aritméticos</title>
  271. </head>
  272. <body>
  273.     <script>
  274.         var oOperandoEsquerdo, oOperador, oOperandoDireito, oCalcular;
  275.  
  276.         function boot(){
  277.             //associação entre vars do JS e elementos HTML
  278.             oOperandoEsquerdo = document.getElementById("idOperandoEsquerdo");
  279.             oOperador = document.getElementById("idOperador");
  280.             oOperandoDireito = document.getElementById("idOperandoDireito");
  281.             oCalcular = document.getElementById("idCalcular");
  282.  
  283.             //conferir comportamentos aos objetos HTML relevantes
  284.             //nomeDeObjeto.nomeDeEventToHandle = eventHandler;
  285.             //oCalcular.onclick = function (){i1; i2; ... i3;}; //anonymous function
  286.             oCalcular.onclick = functionQueVaiResponderAoMomentoDoClickEmCalcular; //named function
  287.         }//boot
  288.  
  289.         function functionQueVaiResponderAoMomentoDoClickEmCalcular(){
  290.             var oe = oOperandoEsquerdo.value;
  291.             var od = oOperandoDireito.value;
  292.             var op = oOperador.value;
  293.             var r = maquinaDeCalcularAritmetica (oe, op, od);
  294.  
  295.             /*
  296.             TODO: onde e como apresentar a resposta?
  297.             onde e como chamar boot?
  298.              */
  299.         }//functionQueVaiResponderAoMomentoDoClickEmCalcular
  300.  
  301.         function maquinaDeCalcularAritmetica(
  302.             pOperandoEsquerdo,
  303.             pOperador,
  304.             pOperandoDireito
  305.         ){
  306.             var strExpressaoParaSerCalculada =
  307.                 pOperandoEsquerdo + pOperador + pOperandoDireito;
  308.  
  309.             var resultado = eval (strExpressaoParaSerCalculada);
  310.             return resultado;
  311.         }//maquinaDeCalcularAritmetica
  312.  
  313.  
  314.     </script>
  315.     <!-- form é um elemento para colecionar inputs / entradas / respostas -->
  316.     <form>
  317.         <!-- operando esquerdo -->
  318.         <label for="idOperandoEsquerdo">operando esquerdo</label>
  319.         <input
  320.            id="idOperandoEsquerdo"
  321.            type="text"
  322.            value="2"
  323.            placeholder="operando esquerdo exº 2"
  324.        ><!-- elemento vazio para representar uma entrada / resposta -->
  325.         <!-- operador -->
  326.         <label for="idOperador">operador</label>
  327.         <select id="idOperador"><!-- conjunto fechado de possibilidades -->
  328.             <option>+</option>
  329.             <option>-</option>
  330.             <option>*</option>
  331.             <option>/</option>
  332.             <option>%</option>
  333.         </select>
  334.         <!-- operando direito -->
  335.         <label for="idOperandoDireito">operando direito</label>
  336.         <input
  337.            id="idOperandoDireito"
  338.            type="text"
  339.            value="1"
  340.            placeholder="operando direito exº 1"
  341.        >
  342.         <input
  343.            id="idCalcular"
  344.            type="button"
  345.            value="calcular"
  346.        >
  347.     </form>
  348. </body>
  349. </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!