Bienvenidos sean a este post, antes de comenzar con el lenguaje vamos a ver su entorno de trabajo.
Antes de comenzar a hablar sobre esta libreria para Javascript vamos a hablar sobre el entorno donde trabaja como es HTML y CSS, si bien muchos consideran que HTML es un lenguaje de programacion yo no lo considero como tal porque es simplemente un procesamiento de las etiquetas (tags) que contiene la pagina sin tener la posibilidad de poder trabajar con los datos y valores que puede contener cada tag, aqui entraria en accion el tag script que nos permite ejecutar un lenguaje, por lo general en el lado del navegador es javascript pero antes disponiamos de VBscript para el Internet Explorer y algunas versiones de Edge pero sin este tag no trabaja como un lenguaje o por lo menos no posee la capacidad, y CSS es la encargada de dar el «estilo» a nuestra pagina ya que se encarga de los tamaños de las fuentes, efectos sobre los elementos, etc, pero es bueno saber como son los elementos que contienen y trabajan con jQuery, pasemos a ver como es la estructura basica de un HTML:
<html>
<head>
<title>titulo</titulo>
<script>codigo</script>
</head>
<body>
elementos a mostrar en la pagina
</body>
</html>Esta deberia ser la forma a respetar para nuestras paginas, donde tendremos al html que envuelve todo, en el tag head podemos tener varios como son el titulo de la pagina y la parte encargada de los scripts mediante su tag, por otro lado en el tag body deberian estar todos los elementos que veremos en pantalla, se preguntaran porque siempre digo «deberian», esto es asi porque tanto los tags como la ubicacion de los tags no es de caracter obligatorio, es decir la pagina se cargara de todas formas a pesar de no respetar todo lo anteriormente citado, pero por convencion y buena practica se deberia hacer asi, por otro lado tenemos el tema del CSS, estos simplemente se encargan de establecer varios atributos de los elementos del html, por lo general el CSS se aplica a traves de un archivo externo al HTML pero tambien se puede utilizar dentro del mismo archivo, para entender estos conceptos vamos a realizar un ejemplo simple para ver como trabajan, para ello simplemente creen en su pc un archivo con el nombre de ejemplo.html y agreguen el siguiente codigo:
ejemplo.html
<html>
<head>
<title>Página de Prueba</title>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0">
</body>
</html>
Este es un codigo simple de HTML donde tenemos la estructura que comentamos anteriormente y en el body le ingresamos una imagen que cargamos desde internet para mostrarlo con un detalle le asignamos un id para identificarlo, ya veremos porque, como dijimos pueden hacerlo directamente en la pc y luego abrirlo con cualquier navegador, si lo hacen se deberia ver de la siguiente forma
Tomememos el archivo anterior y cambiemos el codigo de la siguiente forma:
<html>
<head>
<style>
<!--
#foto
{
width: 640;
height: 320;
}
//-->
</style>
<title>Página de Prueba</title>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0">
</body>
</html>
Basicamente es el mismo codigo pero agregamos la parte de CSS, en este caso mediante el tag style, como dijimos se debe hacer en un archivo externo (la buena practica) pero por un tema de practicidad lo hacemos de esta forma, dentro le informamos el id de la imagen y le asignamos un bloque donde estableceremos un ancho (width) y alto (height) para la imagen, el resto no sufrio ninguna modificacion, si lo abren con el navegador se vera de la siguiente forma
Para que observen la diferencia de implementar el CSS donde la ventana se mantiene del mismo tamaño pero ahora nuestra imagen es mucho mas chica, por ultimo vamos a cambiar el codigo de la sigueinte forma:
<html>
<head>
<script language="javascript">
<!--
function Achicar()
{
let img=document.getElementById("foto");
img.style.width=720;
img.style.height=480;
}
//-->
</script>
<title>Página de Prueba</title>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0">
<script>Achicar()</script>
</body>
</html>
En este caso eliminamos todo lo relacionado a CSS y lo reemplazamos por el tag script, en este definimos una funcion para redimensionar la imagen, para ello primero enlazaremos al elemento con una variable por medio de getElementById y luego por medio de style le establecemos el ancho y el alto respectivamente, la siguiente modificacion sera agregar en el body un tag script para llamar a la funcion antes definida, si abren esta pagina con un navegador se vera de la siguiente forma
Con esto vimos todo lo basico de html, asi como trabaja CSS y como lo podemos hacer por medio de Javacript, asi como podemos reutilizar codigo mediante los tags, en el ultimo ejemplo vimos el de script, esto es todo lo basico de como trabajar con HTML a partir de aqui le agregaremos a jQuery para mejorar todo esto.
Nota: Si quieren saber mas sobre Javascript les recomiendo este post.
En resumen, hoy hemos visto como es el entorno basico donde trabajaremos con jQuery, primero como es HTML, luego como aplica los cambios CSS, para finalmente hacer lo mismo mediante Javascript, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 