Comunidad de diseño web y desarrollo en internet online

Confunsión con document.ready y un javascript externo

Citar            
MensajeEscrito el 16 Ago 2012 02:45 pm
:D Que tal chicos, como están, me ha ido bien aprendiendo diseño web y aplicando algunos efectos con javascript, ahora estoy usando jquery y de verdad me facilita mucho las cosas pero hay unas cosas que no entiendo, ojala puedan ayudarme para continuar. :(

Mi primer duda es sobre document.ready de jquery, he leido que verifica que la estructura de la web esté lista para así aplicar los javascript.
Mi pregunta es que código javascript se coloca dentro de document.ready, cual es el código que necesariamente va allí y que no puede ir en una javascript externo que se enlaza a mi documento html.
Por ejemplo este código no lleva document.ready y esta utilizando la biblioteca de jquery a la que le ha
cambiado de nombre por jquery180.js
<html>
<head>
<style>
p { color:red; margin:5px; cursor:pointer; }
p.hilite { background:yellow; }
</style>
<script src="jquery180.js" type="text/javascript"></script>
<script src="codigo.js" type="text/javascript"></script>
</head>
<body>
<p>Ademar</p>
<script>
$("p").click(function () {
$(this).slideUp();
});
</script>
</body>
</html>
Este código funciona bien, pero cuando quiero pasar lo que esta entre <script></script> a un documento
javascript externo de nombre código.js para reutilizarlo, así:
==Esto esta en un documento codigo.js==
$("p").click(function()
{
$(this).slideUp(1000);
});
No funciona y mas bien tengo que primero hacer en el documento html:
<p class="ademar" onclick="ocultarp()";>Ademar</p>
y luego crear una función ocultarp() en el documento codigo.js así:
function ocultarp()
{
$('.ademar').slideUp();
}
Y alli recien funciona, esto me ha llevado a muchas confusiones entre onclick que utilizo en html y click de javascript ojala puedan ayudarme, por que con las hojas de estilo aprendí a reutilizar código, y en la mayoría de ejemplo que veo siempre escribe en codigo javascript dentro de el mismo documento html.
Gracias, espero sus respuestas por que he buscado info sobre esto y no he encontrado y estoy medio fustra.

Por adecad

23 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 16 Ago 2012 05:51 pm
cuando creas un archivo externo ejemplo frontend.js
y dentro de ella puedes tener un "n" numero de funciones

function roll{
tus instrucciones
}
function pad{
tus instrucciones
}

y para que inicialize y lo reconozca sin ningun problema
$(document).ready(function() {

roll();
pad();

});

Es un ejemplo general asi que no debes de tener ningun problema

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

firefox
Citar            
MensajeEscrito el 16 Ago 2012 07:46 pm
Lo que sucede es que en el primer ejemplo estas poniendo el script al final del documento, esto es el equivalente a utilizar document.ready por que esta leyendo todo el DOM antes de ejecutar los scripts, en el segundo ejemplo posiblemente estés poniendo el link al archivo js externo al principio del documento, entonces en ese caso tendrías que utilizar el document.ready para que funcione correctamente.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 16 Ago 2012 09:11 pm
Todos conincidimos el script lo tienes en la pagina y se ejecuta bien por que lo carga...

cuando vayas a ponerlo en otra parte (es decir cambiarlo a un documento .js) la pagina no sabe que lo tiene que llamar, asi tengas 10000 funciones en el .JS y no las llamas nunca, jamás van a funcionar.

Código Javascript :

//Tu pagina HTML
var pagina = $(document);
pagina.on("ready", inicializar);


//Tu archivo JS
function inicializar(){
ocultar();
mostrar();
otrafuncion();
}

function ocultarp()
{
$('.ademar').slideUp();
} 

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 17 Ago 2012 06:08 am
A ver, veamos. A menos que sea inevitable (y el 90% de las veces no lo es), no deberías meter javascript en el archivo HTML. Ni siquiera para inicializar. Lo que elporfirio te muestra puede estar todo en el archivo .js sin problema ninguno:

Código Javascript :

//Esto es equivalente a $(document).on('ready', function(){});
$(function(){
   //Acá va el código que quieres que corra al inicio.
})


Si prefieres crear una funcion "inicialize" y llamarla cuando el DOM esté disponible, creas la función fuer del onready y la llamas dentro de él. No hace falta que pongas en el HTML más que la referencia a tu archivo externo

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 17 Ago 2012 10:34 pm

joshuavw escribió:

cuando creas un archivo externo ejemplo frontend.js
y dentro de ella puedes tener un "n" numero de funciones

function roll{
tus instrucciones
}
function pad{
tus instrucciones
}

y para que inicialize y lo reconozca sin ningun problema
$(document).ready(function() {

roll();
pad();

});



Es un ejemplo general asi que no debes de tener ningun problema




Hola,joshuavw, gracias por responder!... Mira he utilizado la forma como me enseñastes pero mira mi codigo, funciona igual si pongo o no el $(document).ready(function(){ });

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>I switched to HTML5 - switchtohtml5.com</title>
<link rel="stylesheet" href="prueba.css" />
<meta name="generator" content="http://switchtohtml5.com">
<script type="text/javascript" src="prueba.js"></script>

</head>
<body>
<a href="javascript:mostrar()";>MOSTRAR</a>
<br/>
<a href="javascript:ocultar()";>OCULTAR</a>

<div id="cuadro">
CUADRO
</div>

<!--<script type="text/javascript">
$(document).ready(function(){
mostrar();
});
</script>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
</html>

El javascript que enlazo es prueba.js através de la linea:
<script type="text/javascript" src="prueba.js"></script> y tiene el siguiente código:

/*prueba.js*/

function mostrar()
{
$('#cuadro').slideDown();
}

function ocultar()
{
$('#cuadro').slideUp();
}
Creo entender, que el document.ready, lo utilizo cuando quiero que se ejecuten acciones automáticas una vez verificado el DOM sin necesidad de click's y otras acciones de usuario. Estoy en lo correcto?
por que en este caso no uso el document.ready y el codigo corre bien en el navegador?

Una ultima cosa por favor: la linea:
<script type="text/javascript" src="prueba.js"></script> podría ir al final del html antes del body, debajo de la llamada del jquery.

Gracias

Por adecad

23 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 17 Ago 2012 10:36 pm

HtrMancera escribió:

Lo que sucede es que en el primer ejemplo estas poniendo el script al final del documento, esto es el equivalente a utilizar document.ready por que esta leyendo todo el DOM antes de ejecutar los scripts, en el segundo ejemplo posiblemente estés poniendo el link al archivo js externo al principio del documento, entonces en ese caso tendrías que utilizar el document.ready para que funcione correctamente.


¡Entendido! Gracias

Por adecad

23 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 17 Ago 2012 10:40 pm

The Fricky! escribió:

A ver, veamos. A menos que sea inevitable (y el 90% de las veces no lo es), no deberías meter javascript en el archivo HTML. Ni siquiera para inicializar. Lo que elporfirio te muestra puede estar todo en el archivo .js sin problema ninguno:

Código Javascript :

//Esto es equivalente a $(document).on('ready', function(){});
$(function(){
   //Acá va el código que quieres que corra al inicio.
})


Si prefieres crear una funcion "inicialize" y llamarla cuando el DOM esté disponible, creas la función fuer del onready y la llamas dentro de él. No hace falta que pongas en el HTML más que la referencia a tu archivo externo


Hola, The Fricky!,
yo tambien creo que el html debe conservarse siempre limpio y que los js y los css deben estar en archivos externos separados...pero no se como aplicar lo que me explicas en mi codigo...te lo dejo para que me heches una mano por ok? De antemano gracias.

Incluyo otras consultas que le hice a otro usuario

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>I switched to HTML5 - switchtohtml5.com</title>
<link rel="stylesheet" href="prueba.css" />
<meta name="generator" content="http://switchtohtml5.com">
<script type="text/javascript" src="prueba.js"></script>

</head>
<body>
<a href="javascript:mostrar()";>MOSTRAR</a>
<br/>
<a href="javascript:ocultar()";>OCULTAR</a>

<div id="cuadro">
CUADRO
</div>

<!--<script type="text/javascript">
$(document).ready(function(){
mostrar();
});
</script>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
</html>

El javascript que enlazo es prueba.js através de la linea:
<script type="text/javascript" src="prueba.js"></script> y tiene el siguiente código:

/*prueba.js*/

function mostrar()
{
$('#cuadro').slideDown();
}

function ocultar()
{
$('#cuadro').slideUp();
}

OJO El document ready lo tengo entre comentarios y el código me funcional igual, que ...pasa?
Creo entender, que el document.ready, lo utilizo cuando quiero que se ejecuten acciones automáticas una vez verificado el DOM sin necesidad de click's y otras acciones de usuario. Estoy en lo correcto?
por que en este caso no uso el document.ready y el codigo corre bien en el navegador?

Una ultima cosa por favor: la linea:
<script type="text/javascript" src="prueba.js"></script> podría ir al final del html antes del body, debajo de la llamada del jquery.

Gracias

Por adecad

23 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 17 Ago 2012 10:42 pm

elporfirio escribió:

Todos conincidimos el script lo tienes en la pagina y se ejecuta bien por que lo carga...

cuando vayas a ponerlo en otra parte (es decir cambiarlo a un documento .js) la pagina no sabe que lo tiene que llamar, asi tengas 10000 funciones en el .JS y no las llamas nunca, jamás van a funcionar.

Código Javascript :

//Tu pagina HTML
var pagina = $(document);
pagina.on("ready", inicializar);


//Tu archivo JS
function inicializar(){
ocultar();
mostrar();
otrafuncion();
}

function ocultarp()
{
$('.ademar').slideUp();
} 


Hola, gracias por responder, la manera de escribir tu codigo es diferente a la que he visto hasta ahora, podrias explicarmelo por fa?

Por adecad

23 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 20 Ago 2012 06:23 pm
Soy principiante en Jquery y JAvascript, la logica de programación la tengo con PHP, en fin en los temas del foro veras que JQuery esta en la version 1.8 y de como es el modo correcto de usar el codigo, aunque no necesariamente pertenece a la version 1.8 asi que ignora esto en fin...

Sin embargo lo anterior funciona igual, todo es cosa de que uses lo que tu quieras, lo que mejor te acomode:

Modo de la vieja escuela

Código Javascript :

$(document).ready(function nueva(){
//codigo loco
});


Como yo quisiera usarlo

Código Javascript :

$(document).on("ready", function nueva(){
//otro codigo loco
});


Esto es para lo que ya son muy pros, yo por ejemplo trato de separar las funciones y aunque me salen muchas más lineas de codigo innecesarias para algunos, para mi me deja ver el codigo un poco las limpio.

Como realmente lo uso

Código Javascript :

$(document).on("ready", nueva);

 function nueva(){
//otro codigo loco
}


Toda la documentacion esta en www.jquery.com
Ahi en documentation vele picando a todas las funciones, abajo de cada explicación viene un ejemplo, es chido por que Jquery y PHP tienen documentacion similar, solo pones el nombre de la funcion y te dice como se usa.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.