Buenas!, por gripe se demoró esta clase, pero ya está aquí.
Cada día vamos avanzando mas en nuestra web, y ahora es el momento de agregarle un poco de interacción, conoceremos que es javascript y como implementarlo en nuestro html.
¿Que es JavaScript ?
JavaScript es un lenguaje interpretado orientado a las páginas web, con una sintaxis semejante a la del lenguaje Java.
El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la que fabricó los primeros navegadores de Internet comerciales.
Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.
Se utiliza en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación cliente.
Los autores inicialmente lo llamaron Mocha y más tarde LiveScript pero fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.
¿Que es interacción con el cliente?:
todo proceso web tiene 2 interventores, el servidor que es quien proporciona el documento, y el cliente que es clien recibe ese documento.
En parte servidor podemos generar contenidos dinámicos según información que puede ir variando en una base de datos y así crear tiendas de compras, foros, blogs, o juegos online; pero todo esto sucede del lado del servidor. Para esto existen lenguajes como: php, asp, python, ruby, etc.
Del lado cliente se pueden ejecutar cosas que no requieran refrescar la página y permita una mejor experiencia con la web, como mensajes, efectos de texto, animaciones, verificaciones de formularios, ocultar o mostrar cosas, etc, se ejecutan en el navegador del cliente y por lo general estas cosas son realizadas con javascript.
Como se dijo antes, el javascript es un lenguaje de programación interpretado por los navegadores de internet, siempre es aconsejable probar las cosas con diferentes navegadores porque cada uno tiene un comportamiento diferente. Y este lenguaje puede ser acoplado con el html para generar webs dinámicas.
Pero vamos a un ejemplo para poder ver como funciona y como implementarlo en nuestros documentos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script type="text/javascript">
alert('hola mundo!');
</script>
</head>
<body>
<p>algun texto</p>
</body>
</html>
Como siempre, copiamos y pegamos este texto en un editor, y guardamos como: ejemplojavascript.html, y ejecutamos con el navegador preferido.
para ver ejemplo online.
nota: si lo ejecutas desde tu pc es probable que el navegador bloquee el contenido javascript por seguridad, deberán desbloquearlo pulsando en la barra de notificaciones para poder revisar lo que realiza.
Como verán incluimos nueva etiqueta: <script>, esto le indica a html que lo que sigue es un script a ejecutar. Esta etiqueta tiene el atributo "languaje" que le indica en que lenguaje está escrito el siguiente script. Y finalizamos con un </script>, aquí finaliza el script.
<script languaje="JavaScript">
Este código nos indica que a continuación viene un script escrito en el lenguaje javascript.
alert('hola mundo!');
En este Código utilizamos la función alert de javascript para dar un "hola mundo", mensaje típico que tendrás que realizar al aprender cualquier lenguaje.
La función alert recibe dentro de comillas un texto a mostrar en pantalla, y lanza una ventanita de notificación.
Si queremos poner un mensaje de bienvenida podemos realizarlo de la siguiente forma:
alert("bienvenido a mi web!.");
Tener en cuenta que en javascript toda sintaxis finaliza con un punto y coma al final.
ejercicio 1: modificar el primer documento para que de la bienvenida en ves del mensaje hola mundo.
También con javascript podemos darle mas funciones a los links, se pueden incluir funciones de esta forma:
<a href='javascript:alert("mi mensaje!");'>clickeame</a>
para ver ejemplo.
También podemos crear nosotros nuestras propias funciones personalizadas, de la siguiente forma, pegar en el head del documento el siguiente código:
<script languaje="JavaScript">
function mensaje() {
alert('hola mundo!');
}
</script>
y luego en el body la llamaremos de la siguiente forma:
<a href='javascript:mensaje();'>clickeame</a>
ejercicio 2: poner el anterior código en un documento y ejecutarlo.
Javascript tiene muchas funciones, y en internet se encuentra miles de códigos para usarlos. Pero como este lenguaje es tema para muchas clases, lo dejaremos para mas adelante.
Para finalizar dejaremos algunas funciones mas que nos puede ser de utilidad:
link para dar la opción de imprimir página:
<a href="javascript:print()">Imprimir</a>
Link para volver a la página anterior:
<a href="javascript:history.back();">volvemos a la página anterior</a>
¿Y si queremos que vuelva a la página anterior de la anterior?, ponemos el siguiente link:
<a href="javascript:history.go(-2);">volvemos a la 2 página anterior</a>
Buena semana, y hasta la próxima clase.
No hay comentarios:
Publicar un comentario