Jump to content
renan mafra

Trocar imagem pelo nome da imagem: carro.png por carro-B.png ...

Recommended Posts

Olá pesssoal,

Sou novato em JS.
Eu tenho 6 links, que são imagens que quero substituir, uma pela outra.
Eu sei que poderia fazer isso facilmente via CSS, mas para treinar quero fazer da seguinte forma:

Minha ideia seria pegar o src das imagens e alterar mudando o nome da imagem, tipo assim:
Tenho imagens que são os links nomeados assim:    carro.png / carro-B.png (uma imagem(link) é branca e a outra é amarela).

Como faço para alterar a imagem trocando uma pela outra nesse esquema ?

<a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>

e trocar para

<a href="#"><img src="links/carro-B.png" name="menu0" width="90" height="13" border="0"/></a>

 

Como são 6 imagens eu estou pegando via getElementsByTagName e depois fazer uma função que automatize para todas as outras.....
Tirando o CSS HOVER via Javascript, essa seria a melhor maneira de automatizar essa troca ?

vai lá o código:

 

<html>
<head>
<style>
	body{background-color: #000000;}
</style>

<script>
  window.onload = function(){
	  
	  var menu0 = document.getElementsByName("menu0");
    
	  var imagem = menu0[0].src;  
	  //////////////////////////////////////////////
	  //bloco que vai varrer cada item: ////////////
	  //for(var i=0; i<menu0.length; i++){
      //  alert(menu0[i].src);
	  //}
	  //////////////////////////////////////////////
  }
</script>
</head>

<body>
<a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/livro.png" name="menu0" width="86" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/aviao.png" name="menu0" width="109" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/motos.png" name="menu0" width="108" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/bicicleta.png" name="menu0" width="114" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/onibus.png" name="menu0" width="114" height="13" border="0"/></a>
</body>
</html>

a imagem carro.png tem o seu respectivo carro-B.png

                  aviao.png                                        aviao-B.png

 

E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ?
 

Share this post


Link to post
Share on other sites
56 minutos atrás, renan mafra disse:

E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ?

Depende cara....

Qual a condição para que a imagem seja trocada... O que tens de acontecer para o src ser alterado?

No caso do src para imagens no javascript precisamos usar a classe nativa dos browsers Image.

É muito simples de usar, veja uma situação:

<img src="carro.png" alt="" id="exemplo" />

<script>
    setTimeout(function () {
        var img = new Image();
        var id = document.getElementById('exemplo');
        img.src = 'carro-B.png?rand=' + Math.random();
        id.src = img.src;
    }, 3000);
</script>

Nesse exemplo uma imagem aparece, após 3 segundos a mesma é substituída por oura.

Share this post


Link to post
Share on other sites

eu quero aproveitar somente uma chamada via document.getElementsByName("menu0");

e usar uma função para que ao pairar o mouse em cima de cada imagem/link (mouseover) a imagem troque pela outra

eu estou me enrolando com a array criada pelo DOM:

 

Um link Já funcionou, eu quero que funcione para todos entendeu ? Segue onde estou.... depois prentendo
colocar um duas addEventListener.

segue:

 

<script>
  window.onload = function(){
	  
	  var menu0 = document.getElementsByName("menu0");

	  var imagem = menu0[0].src;                  
	  var oc     = imagem.indexOf('.png')         
      
	  var oc2     = imagem.indexOf('links/')        
	  var extracao2 = imagem.slice(oc2, oc);
	  var novastring = (extracao2 + "-B.png");
	  var string_anterior = (extracao2 + ".png");
	  
	  menu0[0].onmouseover = function troca(){
	    menu0[0].src = novastring;                    

	  }
	  menu0[0].onmouseout = function troca2(){
	    menu0[0].src = string_anterior;                    

	  }
	  //////////////////////////////////////////
	  
	  //////////////////////////////////////////////OK
	  //bloco que vai varrer cada item: ////////////
	  //for(var i=0; i<menu0.length; i++){
      //  alert(menu0[i].src);
	  //}
	  //////////////////////////////////////////////
  }
</script>
</head>

<body>
<a href="#"><img src="links/carro.png"  name="menu0" width="90" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/aviao.png" name="menu0" width="86" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/moto.png" name="menu0" width="109" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/jet.png" name="menu0" width="108" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/skate.png" name="menu0" width="114" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp;
<a href="#"><img src="links/scooter.png" name="menu0" width="114" height="13" border="0"/></a>
</body>
</html>

Tipo automatizar a parada, o menu[0] vai ser menu dentro do loop for

como está no bloco em //comentário

Até já funcionou para pescar os itens, eu to me enrolando na hora de colocar um evento para disparar em 

cada um dos links/imagens....

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Good
      Boa noite,
      gostaria de saber como vocês fariam um sistema de delivery.
       
      Pensei em 3 soluções:
      1. Cadastrar as faixas de CEP que haverá sistema de entregas;
      2. Criar uma área delimitadora no google e exportar em KML para fazer a validação se o endereço do cliente está dentro do raio;
      3. Criar um raio de entregacom ponto fixo do estabelecimento, por exemplo, o estabelecimento só vai poder atender em um raio de até 10km.
       
      Qual método o ifood e outros gigantes trabalham? Existe algum código pronto para que eu possa dar uma olhada?
       
      Aguardo um contato, obrigado!
    • By ZeroEnd
      Boa tarde.

      Nao tenho muito conhecimento em javascript mas estou aprendendo aos poucos.

      Minha dúvida é sobre Xpath, bom na verdade eu entendi de forma básica como fazer uma busca usando Xpath, tanto é que para isso eu estava usando o programa Xpath Visualizer para entender.
      Mas eu não achei como empregar isso em uma página html, usando as mesmas variáveis que uso no programa para ter o mesmo resultado.
      Gostaria de saber se em algum lugar a informações de forma simples ou algo para tomar uma direção.
    • By Danelelel
      Código php
       
      <?php
      error_reporting(0);
      session_start();
      include "gdrive/curl_gd.php";
      require('profile.php');
      require('../conexao/conexao.php');
      $tokenC   = $_SESSION['token'];
      $explod = explode('idMC', $tokenC);
      $idCont = explode('id', $explod[0]);
      $idConta = $idCont[1];
      $idMembro = $explod[1];
      $idM  = $idMembro;
      $id   = mysqli_real_escape_string($conn, $_GET['id']);
      $retry   = mysqli_real_escape_string($conn, $_GET['retry']);
      $epid      = mysqli_real_escape_string($conn, $_GET['epid']);
      $quality = mysqli_real_escape_string($conn, $_GET['quality']);
      $vide = mysql_query("SELECT * FROM `vid_flix` WHERE id='$id'");
      $vid  = mysql_fetch_assoc($vide);
      if($vid['tipo'] == 2){
          if($quality == NULL or $quality == "medium"){
              $link = $vid['link'];
          }elseif($quality == "high"){
              $tokenC   = $_SESSION['token'];
              $explod = explode('idMC', $tokenC);
              $idCont = explode('id', $explod[0]);
              $idConta = $idCont[1];
              $idMembro = $explod[1];
              $cons = mysql_query("SELECT * FROM `login_flix` WHERE id='$idConta'");
              $consult = mysql_fetch_assoc($cons);
                  $vip = $consult['vip'];
                  if($quality == "high" && $vip == "1"){
                      $link = $vid['link'];
                  }else{
                      $link = "No Permit";
                  }
          }
          $titulo = $vid['titulo'];
          $bg     = $vid['bg'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $bg);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $bg);
          $id = $vid['id'];
          $type=$vid['tipo'];
          $gdrive = $vid['gdrive'];
      }
      if($vid['tipo'] == 1){
          
          $video = mysql_query("SELECT * FROM `ep_flix` WHERE epId='$epid'") or die(mysql_error());
          $ep    = mysql_fetch_array($video) or die(mysql_error());
          
          $titulo      = $vid['titulo'].' : '.$ep['titulo'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $ep['img']);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $ep['img']);
          $bg       = $bg;
          $dub       = $vid['leg_dub'];
          $service  = $vid['service'];
          
              $link     = $ep['link'];
         
          $gdrive = $ep['gdrive'];

          $id = $vid['id'];
          $type=$vid['tipo'];
          $epid = $epid;

          //PROXIMO EP//
           $epAt  = $ep['ep'];
           $tempAt = $ep['temp'];
           $nextEp = $epAt + 1;
          
          $p = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempAt' && ep='$nextEp'");
          $c1 = mysql_num_rows($p);
        
          if($c1 > 0){
              $epATT = mysql_fetch_assoc($p);
              $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
          }elseif($c == 0){
              $tempNext = $tempAt + 1;
              $pp = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempNext' && ep='1'");
              $cc = mysql_num_rows($pp);
              if($cc > 0){
                  $epATT = mysql_fetch_assoc($pp);
                      $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
                  
              }
          }
          //PROXIMO EP//
          $linkTest = $ep['link'];
          
      }
         
      $user = mysql_query("SELECT * FROM `perfil_flix` WHERE idMC ='$idMembro'");
      $u = mysql_fetch_array($user);
      $nome = $u['nome'];
      $color = $u['color'];
      $icon = $u['icon'];
      if($gdrive == '1'){
              $url = $link;
              $gid = get_drive_id($url);
              
              $iframeid = my_simple_crypt($gid);
              $linkdown = Drive($url);
              $fileG = $iframeid;
              $link = $linkdown;
      }
      ?>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="css/video-play.css">
      <div class="chat hid">
          <div class="view">
          

          </div>
          <div class="text-chat">
              <input type="text" id="chat-value" class="chat-value" name="chat-value" placeholder="...">
              <button class="mic" id='mic'><i class="fas fa-microphone"></i></button>
          </div>
      </div>
      <div class="media"></div>
      <?php
      if($gdrive != 2){
      if($link != "No Permit"){
      ?>
      <script type="text/javascript">
          var vidLink     = "<?=$link?>";
          var titlevid     = "<?=$titulo?>";    
          var poster         = "<?=$bg?>";
          var nextEpp     = "<?=$proxEp?>";
      </script>
      <script src="flipclock/flipclock.js"></script>
      <script src="js/play.js"></script>
      <script type="text/javascript">
          
          var retryLoad =     setInterval(function(){
              var statusvid = vid.readyState;
               if(statusvid == '4'){
                  var dura = vid.duration;
                  var time = '<?=$retry?>'/100*dura;
                  vid.currentTime = time;
                  clearInterval(retryLoad);
              }
          },50);
          
                  setInterval(function(){
              $.ajax({
                type: "POST",
                url: "../player/function/savep.php",
                data: {
                    'idf' : "<?=$_GET['id']?>",
                    'temp': progress,
                    'idm' : '<?=$idM?>'
                  },
                dataType: 'json',
                success: function (data) {
                          
                      }
              });
                  },10000);
      </script>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html("<center style='color:white;'>Para ter acesso ao Recurso HD é necessario ser membro vip.</center>");
          </script>
          <?
      } ?>
      <script type="text/javascript">
          function nextEp(){
              $('.nextEp').click(function(){
                  location.href="<?=$proxEp?>";
              });
              }
          setInterval(function(){
              $('.chat .view').load("chat-view.php?id=<?=$id?>");
          },500);
          $('.chat-value').on('keyup',function(e){
              var code = (e.keyCode ? e.keyCode : e.which);
                  if (code==13) {
                      var msg = $(this).val();
                      var user= "<?=$nome?>";
                      var cor = "<?=$color?>";
                      var icon= "<?=$icon?>";
                      var id_vid= "<?=$id?>";    
                      $.ajax({
                            type: "POST",
                            url: "cadXat.php",
                            data: {
                                'id_vid':id_vid,
                                'msg' : msg,
                                'user': user,
                                'cor' : cor,
                                'icon':icon
                              },
                            
                      });
                      $(this).val("");
                  }
          });
          $('.smstext').click(function(){
              var hidC = $('.chat').hasClass("hid");
              if(hidC == true){
                  $('.chat').removeClass("hid");
              }else if(hidC == false){
                  $('.chat').addClass("hid");
              }
          });
          function toggleMute(element) {
          element.muted = false;
          element.play()
      }
      window.addEventListener('load', function () {
          setTimeout(function () {
              toggleMute(document.querySelector('video'));
          }, 1000);
      });
      </script>
      <style type="text/css">
          .chat{
              height: calc(98vh - 12%);
          }
          @media screen and (max-width: 800px){
              .chat{
              height: calc(98vh - 22%);
          }
          }
          @media screen and (max-width:  500px){
              .chat{
                  width: 60%;
              }
          }
          @media screen and (max-width:  350px){
              .chat{
                  width: 70%;
              }
          }
      </style>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html('<iframe src="<?=$link?>"></iframe>');
          </script>
          <style type="text/css">
              .media iframe{
                  width: 100%;
                  float: left;
                  height: 100vh;
                  border:transparent;
              }
          </style>
          <?
      } ?>
       
      Codigo arquivo js
       
          $('.media').append('<div class="play-video"></div>');
          $('.play-video').append('<div class="loading"></div>');
          $('.play-video').append('<div class="header"></div>');
          $('.header').append('<div class="info"><div>');
          $('.info').append('<div class="line-time"><div>');
          $('.line-time').append('<input type="range" class="line-control" min="0" max="100" value="0" onmousedown="line()" onclick="line()" onchange="line()">');
          $('.line-time').append('<div class="line-curren"></div>');
          $('.line-time').append('<div class="line"></div>');
          $('.line-time').append('<div class="line-time-slide"></div>');
          $('.info').append('<div class="time">0:00:00</div>');
          $('.info').append('<div class="controls-vid"></div>');
          $('.controls-vid').append('<button class="play_pause"><i class="material-icons">play_arrow</i></button>');
          $('.controls-vid').append('<button class="vol-slide"><i class="material-icons">volume_up</i></button>');
          $('.controls-vid').append('<button class="expand"><i class="material-icons">fullscreen</i></button>');
          
          $('.controls-vid').append('<span class="title-vid">'+titlevid+'</span>');
          $('.info').append('<div class="volup hid"><vid>');
          $('.volup').append('<input type="range" onkeyup="vol()" onmousedown="vol()" onclick="vol()" onchange="vol()" min="0" max="100" value="70" class="volups">');
          $('.volup').append('<div class="seta-baixo"></div>');
          $('.play-video').append('<div class="encript"></div>');
          $('.play-video').append('<div class="video-play"></div>');
          $('.header').append('<button class="playing-vid"><i class="material-icons">play_arrow</i></button>');    
          $('.video-play').append('<video id="vid-nf" poster="'+poster+'"></video>');
          $('#vid-nf').append('<source src="'+vidLink+'" type="video/mp4">');
          
          var vid = document.getElementById("vid-nf"); 
          function line(){
              var val =     $('.line-control').val();
              var durational = vid.duration;
              var por = val / 100 * durational;
              vid.currentTime=por;
          }
          $('.play_pause').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          $('.playing-vid').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          setInterval(function(){
              var statusvid = vid.readyState;
              if(statusvid == '0'){
                  $('.loading').css('display','block');
              }else if(statusvid == '1'){
                  $('.loading').css('display','none');
              }else if(statusvid == '2'){
                  $('.loading').css('display','block');
              }else if(statusvid == '3'){
                  $('.loading').css('display','none');
              }else if(statusvid == '4'){
                  $('.loading').css('display','none');
              }
          },50);
          $('.expand').click(function(){
              var expand = $('.expand i').html();
              if(expand == 'fullscreen'){
                  $('.expand i').html('fullscreen_exit');
                  var el = document.documentElement
                      , rfs = // for newer Webkit and Firefox
                             el.requestFullScreen
                          || el.webkitRequestFullScreen
                          || el.mozRequestFullScreen
                          || el.msRequestFullScreen
                      ;
                      if(typeof rfs!="undefined" && rfs){
                        rfs.call(el);
                      } else if(typeof window.ActiveXObject!="undefined"){
                        // for Internet Explorer
                        var wscript = new ActiveXObject("WScript.Shell");
                        if (wscript!=null) {
                           wscript.SendKeys("{F11}");
                        }
                      }
              }else{
                  $('.expand i').html('fullscreen');
                  if (document.cancelFullScreen) {  
                    document.cancelFullScreen();  
                  } else if (document.mozCancelFullScreen) {  
                    document.mozCancelFullScreen();  
                  } else if (document.webkitCancelFullScreen) {  
                    document.webkitCancelFullScreen();  
                  }
              }
          });
          $( document ).ready(function() {
               var regiao = document;
              var timeout = setTimeout(showTela, 4000);
              $(regiao).mousemove(onEvent);
              $(regiao).mousedown(onEvent);
              $(regiao).keydown(onEvent);

              function onEvent() {
                clearTimeout(timeout);
               
                  $('body').css('cursor','auto');
                $('.header').css('opacity','1');
                timeout = setTimeout(showTela, 4000);
              }
              function showTela() {
                $('body').css('cursor','none');
                $('.header').css('opacity','0');
              }
            
             });
              $('.vol-slide').click(function(){
                  var hid = $('.volup').hasClass('hid');
                  if(hid == true){
                      $('.volup').removeClass('hid');
                      $('.line-time').addClass('hid');
                      $('.time').addClass('hid');
                  }else if(hid == false){
                      $('.volup').addClass('hid');
                      $('.line-time').removeClass('hid');
                      $('.time').removeClass('hid');
                  }
              });
              function vol(){
                  var volu = $('.volups').val();
                  var vol = volu / 100;
                  if(volu < 50){
                      $('.vol-slide i').html('volume_down');
                  }
                  else if(volu > 50){
                      $('.vol-slide i').html('volume_up');
                  }
                  if(volu == 0){
                      $('.vol-slide i').html('volume_off');
                  }
                  vid.volume = vol;
              };
              var progress = '';
              var per = '';
              var clo = '60';
              var clou = '';
              setInterval(function(){
                  var current = vid.currentTime;
                  var duration= vid.duration;
                   per =  duration - current ;
                  var percorid = current * 100;
                   progress = percorid / duration;
                  $('.line').css('margin-left', 'calc('+progress+'% - 8.5px)');
                  $('.line-curren').css('width',progress+'%');
                  
                  var dur = String(duration);
                  var perc = String(per);
                  if(dur != 'NaN'){
                      var date = new Date(null);
                      date.setSeconds(perc); // specify value for SECONDS here
                      var result = date.toISOString().substr(12, 7);
                  $('.time').html(result);
                  if(per < '30' && nextEpp != ''){
                      if(clou == ''){
                          clou = '1';
                          $('.header').append('<button class="nextEp"><i class="material-icons">play_arrow</i><p>Próximo Episódio em</p><span class="restTime"></span></button>');
                          $('.info').addClass('hid');
                          $('.playing-vid').addClass('hid');
                          nextEp();
                      }
                  }
                  }
              },50);
                  var mytimer = setInterval(function(){
                      if(per < '30' && nextEpp != ''){
                          $('.restTime').html(clo);
                          if(clo > 0){
                              clo --;
                          }else if(clo == 0){
                              location.href=nextEpp;
                              clearInterval(mytimer);
                          }
                      }
                      },1000);
              
              $('.settings').click(function(){
                  var check = $('.settings').hasClass('active-s');
                  if(check == true){
                      $('.settings').removeClass('active-s');
                      $('.line-time').fadeIn('slow').css('display','block');
                      $('.time').fadeIn('slow').css('display','block');
                      $('.quality').fadeOut('slow').css('display','none');
                  }else if(check == false){
                      $('.settings').addClass('active-s');
                      $('.line-time').fadeOut('slow').css('display','none');
                      $('.time').fadeOut('slow').css('display','none');
                      $('.quality').fadeIn('slow').css('display','block');
                  }
              });
              
    • By WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
    • By Motta
      As 7 linguagens de programação que você deve aprender em 2020
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.