Separando Archivos
Aún podemos hacer una cosilla para aligerar ese archivo Html de ejemplo. Se trata de retirar toda la parte de código jQuery, y colocarlo en un archivo aparte que podríamos llamar funciones.js por ejemplo. De ese modo al abrir el archivo Html con un editor (con el block de notas por ejemplo, o Notepad), lo veríamos todo más clarito. Lo hacemos?
Para separar el código jQuery en un archivo aparte, basta con añadir una línea similar a la que pusimos inicialmente para el archivo mágico aquél, solo que en esta ocasión colocariamos el nombre de este segundo archivo, funciones.js.
Aprovechando ya, hacemos lo mismo para la futura hoja de estilos css, oki? Esta hoja la vamos a llamar estilos.css y con esta última llamada el código Html anterior nos queda así:
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link type="text/css" href="estilos.css" media="all" rel="stylesheet" />
</head>
<body>
Casi ná
</body>
</html>
Y el contenido de funciones.js sería, por ahora, este:
{
});
Crea ya también el archivo estilos.css en esa misma carpeta, sin nada de contenido aún, es decir, vacio. Después edita con el mismo block de notas el archivo index.html para añadirle algunos elementos básicos, un par de enlaces, por ejemplo, en puro y duro html.
<head>
<title>Ejemplo jQuery</title>
<script type="text/javascript" src="mijquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
<link type="text/css" href="estilos.css" media="all" rel="stylesheet" />
</head>
<body>
<div id="contenido">
<h1>Titular de mi web</h1>
<p>Este es el primer párrafo de mi <a href="#">web</a>. Espero que me apliquen un montón de trucos estos webmasters del universo</p>
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
</ul>
<li>Cuarto</li>
</ul>
<p>Se acabó el contenido por el momento. <a href="#">Adios!</a></p>
</div>
</body>
</html>
Espero que ya te leyeras el curso de Html y el curso de CSS. Si no lo hiciste aún estás a tiempo, pues acá no voy a poder deternerme en detalle sobre esos códigos. Solo te llevará unas muy poquitas horas y verás estas lecciones mucho más claras. En cualquier caso, como ves (como deberías ver....) es una página web bien sencillita.
En la cabecera aparecen las tres líneas que llaman respectivamente al archivo mágico que contiene las definiciones que usaremos durante el curso, al archivo funciones.js donde insertaremos lo que queremos que hagan los elementos de la web y, la famosa hoja de estilos, con la que daremos un toque de color a todo esto.
Posteriormente, ya en el body del archivo, nos encontramos con una capa que lo engloba todo. Un titular h1, un párrafo inicial de introdución, una lista multiple (una lista con otra lista dentro, para hacer subniveles) y un último párrafo de despedida.
Tanto en el primero como en el último párrafo hemos colocado algún enlace. Nos servirán para los experimentos que vamos a realizar a continuación y con los que vamos a aprender y comprender mejor el uso del jQuery.
Introdución al jQuery:
