Vanilla Javascript - #42 Jquery, React e outras bibliotecas

20/08/2019

Na aula de hoje falaremos um pouco sobre as principais bibliotecas Javascript disponíveis, relacionando seu uso em comparação ao JS Vanilla.

Javascript Vanilla x Jquery

Vamos desenvolver primeiro nossa aplicação em JS Vanilla:

Vanilla

index.html

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Date</title>
</head>

<body>
    <div id="result"></div>

    <form name="form1" id="form1" method="post" action="controller.php">
        <input type="text" id="name" name="name"><br>
        <button id="btn">Click me</button>
    </form>

    <script src="javascript.js"></script>
</body>
</html>

javascript.js

(function readyJS(win,doc){
   'use strict';
   let result=doc.querySelector('#result');
   let form1=doc.querySelector('#form1');
   let name=doc.querySelector('#name');
   function sendForm(event)
   {
      event.preventDefault();
      let ajax=new XMLHttpRequest();
      let params='name='+name.value;
      ajax.open('POST','controller.php');
      ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      ajax.onreadystatechange=function()
      {
         if(ajax.status===200 && ajax.readyState===4){
            result.innerHTML=JSON.parse(ajax.responseText);
         }
      }
      ajax.send(params);
   }
   form1.addEventListener('submit',sendForm,false);
})(window,document);

controller.php

$name=filter_input(INPUT_POST,'name',FILTER_DEFAULT);
echo json_encode($name);

JQuery

O primeiro passo no Jquery é linká-lo no HTML e com isso já temos uma sobrecarga de no mínimo 31kb.

<script src="jquery-3.4.1.min.js"></script>
<script src="javascript.js"></script>

Com JQuery nosso javascript ficará assim:

$(document).ready(function(){
   $('#form1').on('submit',function (event) {
       event.preventDefault();
       let dados=$(this).serialize();

       $.ajax({
           url: 'controller.php',
           method: 'post',
           dataType: 'json',
           data: dados,
           success: function (response) {
               $('#result').html(response);
           }
       });
   });
});

Por hoje é só! Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #41 Compatibilizando com Babel e Webpack II

Na aula de hoje finalizaremos a parte de compatibilização do código com a inserção do Babel neste contexto.

Vanilla Javascript - #43 Função debounce

Na vídeo aula de hoje trataremos de uma função muito importante principalmente quando temos requisições sucessivas tais como as utilizadas no evento keyup.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.