Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thiago_Honorato

Entendendo functions em arquivos js externo

Por , em Javascript

Recommended Posts

Thiago_Honorato    0

Thiago_Honorato
Postado

Olá pessoal, é a minha primeira vez aqui.

Tenho procurado muito a resposta para o meu problema, mas talvez por ser óbvio, não encontrei solução satisfatória.

Eu tenho o seguinte código usando "No wrap - In body":
JSFiddle

 

A ideia é que ao clicar num botão a respectiva lista de opções apareça logo abaixo, mas estou com problemas pois não entendo muito bem

os métodos:

onLoad
onDomReady

no wrap in head

no wrap in body

 

 

Gostaria de seguir a w3c e não colocar o script no <body>, e utilizar uma função que receba a classe como parâmetro, assim não vou precisar escrever a mesma função para todos os botões. No entanto, quando a modifico ela para de funcionar, agindo apenas no carregamento da página quando no modo "No wrap in body" e não mais no evento do botão, como no código a seguir:

JSFiddle

Descobri que um dos problemas é o modo de chamar a função no "addEventListener",que no meu cado deve ficar assim:

artes.addEventListener('click', function(){mudar('lista_de_artes');}, false);

Mas ainda fica a questão, vou sempre ter que usar essa linha para prepara o DOM quando usar "addEventListerner"?

document.addEventListener('DOMContentLoaded', load, false);

Alguém pode me explicar o que está acontecendo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

onLoad -> quando TUDO estiver carregado (DOM, recursos externos(css, js), imagens).

onDomReady -> quando o DOM estiver pronto. (Ocorre antes do onLoad, pois só espera o DOM, e não as outras coisas).

 

 

Coloque a tag script antes do fechamento da tag </body>, logo antes dela.

Assim vc "não precisa" do onLoad e nem do onDomReady.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 




<body>



... todo o teu site aqui



..



..



..



..


 



<script></script> <-- aqui a tag script



</body>




Refaz a pergunta, pq acho que não entendi então a dúvida.

			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Thiago_Honorato
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Thiago_Honorato
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Sou novo em JS, então me esforçarei pra expressar o problema. 

Entendi as questões do "onLoad", "onDOMready"...


O primeiro problema é o seguinte: 




mudar = function() {
  var artes = document.getElementById('artes'); 
  artes.addEventListener('click', mudar, false);
  var lista = document.getElementsByClassName('lista_de_artes')[0].style.display;

  if (lista == 'inline') {
     document.getElementsByClassName('lista_de_artes')[0].style.display = 'none';}
  else {
     document.getElementsByClassName('lista_de_artes')[0].style.display = 'inline';
  }
}

load = function() {
   var artes = document.getElementById('artes');
   artes.addEventListener('click', mudar, false);
}


document.addEventListener('DOMContentLoaded', load, false);


e gostaria que ele fosse chamado no <head> e não no <body>, daí acrescentei essa ultima linha que, acredito eu, espera o carregamento do DOM, e quando a tiro o código para de funcionar. A questão é que gostaria de deixar o código não obstrusivo, sem nenhuma chamada js direta no html, no entanto não compreendi como os eventos (addEventListener) estão relacionados com a posição em que o script é adicionado no escopo da página.





			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Certo, a última linha:






document.addEventListener('DOMContentLoaded', load, false);
você realmente precisa dela.
 



Agora vamos aos pontos:



1. Deixar os scripts dentro do head é um erro. Pois lá dentro você atrapalha o render da página, já que nenhum HTML será processado até o script ser todo parseado, por isso é mais indicado por questões de performance, deixar a tag script onde eu mostrei, antes do fechamento do </body>.



2. Você "precisa", dessa linha que aguarda o evento "dom carregado", porque só é possível manipular um elemento depois dele existir! ou seja, se você tentar colocar um evento num elemento que não existe na página, não vai dar, porque ele não existe. E o evento DOMContentLoaded, é exatamente isso: só execute quando o DOM estiver pronto.



3. Não deixe tags scripts no HEAD.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 

    Conteúdo Similar
    

    
	
      
	
		
    • 
			
      
				


	
		lucas01andre
	

			
      
			
      
				
      Funções em objetos
      
				Por 
lucas01andre
      
				
					
      
						Olá pessoa, estou aprendendo JavaScript e quero aprender também boas práticas. Ao olhar de vocês, ao declarar uma função em um objeto é melhor usar a forma tradicional ou a arrow? Por que usar e quando usar uma das duas? Desde já agradeço a ajuda!

      
					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		teteuvec
	

			
      
			
      
				
      Abrir página dentro de DIV porém onload
      
				Por 
teteuvec
      
				
					
      
						Prezados boa tarde,
      
Estou necessitando abrir uma página(2) dentro de uma DIV na página(1) assim que a página(1) é chamada. Porém não está funcionando.
      
Segue abaixo como estou fazendo o código
      
página(1)
      

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(document).ready(function(){
	$('#blog').load('wp/index.php');
});
</script>
<title>Tupã</title>
</head>
<body>

... (outras linhas de código)


          <td bgcolor="#F4F4FF">Em breve será disponibilizado o sistema para fornecedores do projeto da Usina Fotovoltaica TP1. Favor entrarem na área restrita utilizando login e senha fornecidos via e-mail para visualizar o escopo.</td>
        </tr>
      <div id="blog"></div>
      </table>
    <td width="20%" valign="top">

... (continuação da página)

A página(2) é o endereço 'wp/index.php' dentro do <script>
      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		le0souza
	

			
      
			
      
				
      Chamar css por @media queries
      
				Por 
le0souza
      
				
					
      
						Olá Boa tarde galera, estou tendo uma dificuldade em fazer alguns ajustes para área mobile do site que estou desenvolvendo,
      
tenho um css normal sem nenhum media queries porem se eu vou e aplico um, exemplo
      
@media (max-width: 991px)
      
ele esta atingindo todo o site mesmo depois de ter passado de 991px ele pega as atribuições que dei somente max 991

      isso colocando na mesma folha de estilo do site.
      
em outros sites fora do wordpress eu faria assim, chamaria cada folha separada no header
      

<!-- ===CSS=== -->
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen and (min-width: 961px)" />

    <!-- ===TABLE=== -->
    <link href="css/medium.css" type="text/css" rel="stylesheet" media="screen and (max-width: 960px) and (min-width: 481px)" />
    
    <!-- ===MOBILE=== -->
    <link href="css/small.css" type="text/css" rel="stylesheet" media="screen and (max-width: 480px)" />
    <link href="css/small.css" type="text/css" rel="stylesheet" media="only screen and  (max-device-width: 480px)" />

porem no wordpress, as folhas de estilo sao chamadas dessa forma abaixo e eu nao sei como aplica o media queries no php, existe alguma maneira de fazer isso? a folha é chamada dentro do functions.php 
      

/**************************************
 *  SCRIPTS / CSS
 **************************************/
function wp_responsivo_scripts() {
  // Carregando CSS header
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  
  // Carregando Scripts header
  wp_enqueue_script('bootstrap-js', get_template_directory_uri().'/assets/js/bootstrap.min.js', array('jquery') );

  //Carregando no footer
  //wp_enqueue_script('functions-js', get_template_directory_uri().'/assets/js/functions.js', array('jquery'), '', true );
}


					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		cassio2305
	

			
      
			
      
				
      Receber resultado de uma função, em uma pagina diferente
      
				Por 
cassio2305
      
				
					
      
						Bom dia.
      
To me complicando aqui, preciso desenvolver um portal de noticias. Só que vou ter que criar uma pagina para armazena todas as funções. Como costumo fazer as sql direto na pagina, não tenho prática com funções. Vamos lá:
      
Tenho o arquivo noticia.php e funcoes.php.
      
No noticia.php
      
<? include('funcoes.php'); 
      
...
      
$cod = $_GET['not'];
SQLnoticias($cod);
?>
      
 
      
E no funcoes.php
      
<? function SQLnoticias($cod){
  $query = "SELECT * FROM noticias WHERE codigo = $cod";
  $result = mysql_query($query) or die(mysql_error());
  $noticia = mysql_fetch_array($result);
  return $noticia; (<-acho que o erro ta aqui)
?>
 
Então no noticia eu chamo a função e envio o $cod.
A função recebe resolve a sql.
O problema ta aqui como que eu retorno esse array e depois mostro cada um dos dados do array deles no noticia.php (titulo, txt etc).
Obrigado

					
      
				
			
      
		
      • 
	
	
    

    • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito