NorfiPC
NorfiPC » Diseño Web » Javascript fácil

Javascript fácil en las páginas web, tutorial demostrativo y ejemplos

Como insertar Javascript en el código HTML de las páginas web para agregarles efectos y funciones, hacerlas más dinámicas e interactivas. Tutorial y herramientas útiles para aprender. Códigos y ejemplos prácticos para probar y para descargar gratis al equipo.
Javascript fácil en las páginas web, tutorial demostrativo y ejemplos

¿Qué es el famoso lenguaje Javascript?


Javascript es un sencillo lenguaje de programación, creado y diseñado para utilizarse en las páginas web.
Permite añadirles muchas funcionalidades, que las hacen más dinámicas, interactivas, útiles y atractivas.
Podrás comprobar muchos efectos útiles más abajo en esta misma página, incluso crearlos tu mismo, copiando los códigos.
Javascript no es más que líneas de texto, que pueden ser escritas con cualquier editor, como el sencillo Bloc de notas de Windows.
Este código es insertado dentro del código HTML o código fuente de las paginas web, encerrado entre etiquetas que le indican al navegador que son instrucciones que debe ejecutar.
En el siguiente cuadro se escribe una frase usando Javascript, empleando un efecto similar al de la Matrix.

 NorfiPC, Javascript fácil en las páginas web 

Antes de seguir es necesario asegurarse que tu navegador es capaz de ejecutar el código Javascript, sino no verás los efectos en esta página.
Fíjate en el mensaje de la linea a continuación:
¿No estás convencido?, presiona el botón para comprobarlo:



¿Dónde y cómo insertar el código Javascript en las páginas web?


Hay varias formas de insertar los códigos Javascript en las páginas web.
Puedes insertarlo en el área del HEAD de la página o encabezado, en el área del BODY o cuerpo y en un archivo externo.
¿Cuál es la diferencia?
Las pagina web se dividen en dos zonas o áreas, el HEAD y el BODY, el navegador al abrir una página lee primero todas las instrucciones escritas en el área del HEAD, nada escrito aquí se visualiza, ya que sea área solo contiene información para el navegador, como es el título, descripción, etc.
Después convierte todo el código insertado en el área del BODY en texto, además muestra la imágenes, videos u otra multimedia y ejecuta las funciones escritas en Javascript que estén contenidas dentro de una etiqueta o tag que así se lo indique.
Donde insertar el código Javascript en las páginas web
Tres ejemplos del resultado del mismo código insertado en distintos lugares:

Descargar el ejemplo anterior aquí
Esto mostrará en una página el siguiente resultado, como ves no hay diferencia:

Esto ha sido escrito por JavaScript desde el head
Esto ha sido escrito por JavaScript desde el body
Esto ha sido escrito por JavaScript en html



Impedir que Javascript haga más lentas las páginas


Lógicamente para optimizar el rendimiento de una página, en el área del HEAD solo se debe poner el código Javascript que sea imprescindible para ejecutar funciones antes de cargar el cuerpo de la página, lo que se conoce como BODY.
Muchas funciones contenidas en el área del HEAD retardan considerablemente el inicio, por lo que el código excesivo se debe de ponerlo en área del BODY, preferentemente en el final, aunque lo ideal si es extenso es usarlo en un archivo externo.
Este método también se utiliza cuando se comparte el mismo código entre varias páginas web, se logra escribiendo el código en un pequeño archivo de texto con la extensión .JS, que lo podemos crear con el Bloc de notas y nos aseguramos que la página web lo cargue, insertando en el área del head la siguiente línea:
<script type="text/javascript" src="archivo.js"></script>

Nociones de HTML


Una página web es cualquier archivo de texto que se guarde con la extensión HTML. También se le puede dar HTA, en ese caso sería una aplicación web, pero funciona de forma similar y ejecuta cualquier código Javascript que se le inserte.
Para crear un vínculo o link, que al dar un clic ejecute una función usa el siguiente código:

Para crear un botón, que al dar un clic ejecute una función usa el siguiente código:




Herramientas para aprender Javascript

A continuación te sugiero algunas herramientas que puedes usar para facilitar el trabajo y la edición de las páginas web, con Javascript.

Plantilla para probar tu código Javascript

Plantilla para probar el código Javascript


Para probar los código que se muestran a continuación y modificarlos a tu gusto te será más fácil tener una pequeña plantilla donde iras pegando el código, editando, guardando los cambios y visualizando el efecto en tu navegador.
Para poder crear pequeñas plantillas con el clic derecho, descarga la siguiente clave del registro, ejecútala, que agregará la función en el menú contextual "Nuevo archivo html".
Descargar claveDescargar clave del registro para agregar en el menu contextual Nuevo archivo html.

Hazlo de la siguiente forma:
• Crea un Nuevo archivo html en el escritorio, abre el Bloc de notas y arrástralo a su interior.
• Copia de esta página el código a probar y pégalo en el área indicada de tu plantilla.
• Sin cerrar el Bloc de notas guarda los cambios (Menú -> Archivo -> Guardar o Control + G).
• Dos clic en el archivo html y veras el resultado.
Haz los cambios en el código que necesites y cuando estés satisfecho, cierra el Bloc de notas y dale al archivo html el nombre final.



Editor de código Javascript


Sencillo editor que puedes abrir en el link más abajo, abre una pequeña ventana donde puedes introducir o pegar las funciones y probar el resultado, un ejemplo copia y pega a continuacion de javascript: alert('Esta es una alerta!'), y selecciona Probar.
Ni esta ni ninguna otra herramienta de las que te ofrezco, en las cuales sea necesario abrir una nueva ventana, funciona en Internet Explorer hasta ahora.

Editor de código Javascript



Editor para el código Javascript y HTML


Una herramienta muy útil para probar y editar el código Javascript. Abre una pequeña ventana en la esquina superior izquierda por lo que no te roba mucho espacio, pega en ella el código que sea y al seleccionar Ver, abre otra ventana mostrando el resultado. Puedes dejar el editor abierto y seguir leyendo esta u otra página, también sirve para probar código HTML.

Editor para código Javascript y HTML

Plantilla básica con formato HTML


También puede serte útil esta pequeña plantilla que tiene el código mínimo, ideal para pruebas, se abre en una nueva ventana en la que puedes introducir el código y luego guardar el resultado con el formato html.

Plantilla básica con formato HTML



Insertar el código Javascript en las páginas web


Hay varias formas de insertar Javascript en las páginas web, impregnándolo en el código html, de modo que se muestre el resultado o cargándolo mediante los eventos que son las herramientas utilizadas para poder hacer funcionar y accionar el código, pueden ser:
• Un clic del ratón.
• Poner el ratón sobre un área determinada.
• La página al iniciarse.
• Seleccionar una casilla, botón u otro tipo de forma.
A continuación algunos ejemplos sencillos y básicos para insertar en tu plantilla, que te permitirá familiarizarte con la utilización de los eventos.





Códigos de ejemplos de Javascript


1- En este ejemplo se inserta la funcion entre dos tags (<script></script>), el código se muestra en negritas.
El texto a renderizar tiene que estar encerrado en comillas, puede ser cualquier otro texto.
Copia la siguiente línea y pégala entre los dos tags que hay en tu plantilla, guarda los cambios y ejecuta el archivo HTML.
document.write("Hola esto se ha escrito con Javascript!");

2- Ahora empleando formas como eventos para llamar funciones, en este caso botónes y una casilla, copialas y pégalas en el área del BODY de tu plantilla:
<input type="button" value="Alerta" onclick="alert('Esta es una alerta!');" />
<input type="button" value="Escribir" onclick="document.write('<p>Una alerta por escrito</p>');" />
<input type="checkbox" value="Click" onclick="javascript:alert('Esta es una alerta!');" />
<input type="text" value="Escribe algo" onfocus="alert('Hey que quieres escribir aqui');" />

El resultado en tu página se vería así:



Selecciona


3- También podemos usar vínculos, similares al usado en HTML.

<a href="javascript:alert('Esta es una alerta!');">Vinculo a una alerta</a>
<a href="javascript:window.print();">Imprimir esta página</a>
<a href="javascript:window.location.reload();">Refrescar la página</a>

El resultado en tu página se vería así:
Vinculo a una alerta
Imprimir esta página
Refrescar la página

4- Para lograr que una determinada función se inicie al cargar el navegador la página, se utiliza el evento Onload, para eso es necesario insertarlo dentro del tag del body de la siguiente forma:
<body onload="hola();">

<script type="text/javascript">
function hola() {
alert('
Hola bienvenido a mi página!');}
</script>





Funciones más utilizadas en Javascript


A continuación un breve resumen de las principales funciones utilizadas más a menudo en Javascript.

Alertas

Las alertas son cuadros de diálogos que se adueñan del foco de la pantalla y fuerzan a leer el mensaje indicado el cual es necesario confirmar, ejemplos se han visto más arriba.

Confirm

La función confirm es similar a las alertas, un pequeño cuadro de dialogo que aparecen, toman el control del foco pero el cuadro de confirmación es diferente, ofrecen dos opciones al usuario, presionar OK o Aceptar para confirmar el mensaje y Cancelar si no se está de acuerdo con la petición expresada en este. Copia y pega el siguiente código en tu pagina.

<script type="text/javascript">
function confirmacion() {
var pregunta = confirm("Salir de esta página?")
if (pregunta){
alert("Adios!")
window.location = "http://www.google.com/";
}
else{
alert("Gracias por permanecer en la página!")
}
}
</script>
<input type="button" onclick=" confirmacion()" value="Salir de la página" />
Se mostrará de la siguiente forma:


Variables

El propósito de una variable es guardar información que pueda ser utilizada más tarde. Es un nombre simbólico que representa el dato que el usuario introduce y guarda. Ejemplo de su uso.
<script type="text/javascript">
var age = 18;
var ella = 'El señor';
var el = 'La señora';
document.write(ella + " tiene " + age + " años\n");
document.write(el + " tiene " + age + " años");
</script>

Se mostrará de la siguiente forma:
 

¿Qué son las funciones?


Una función es un pedazo de código que permanece inactivo hasta que es llamada por un evento determinado por su nombre.
<script type="text/javascript">
function popup() {
alert("Hola gente")
}
</script>
<input type="button" onclick="popup()" value="Popup" />
Se mostrará de la siguiente forma:

Los condicionales If y else

If es una manera de tomar decisiones basados en una variable o en algún tipo de dato, es como un interruptor, evalúa una expresión y si el resultado es true realiza las acciones que tenga programadas, y si es false realiza otras acciones alternativas. Else es una extensión de if que se utiliza si es necesario una tercera acción o mensaje.

Prompt

Prompt es usado para introducir información por parte del usuario, la que podrá ser usada por otras funciones.
<script type="text/javascript">
function prompter() {
var reply = prompt("Buenas, cual es tu nombre?", "")
alert ( "Es un gusto tenerte aquí " + reply + "!")
}
</script>
<input type="button" onclick="prompter()" value="Di tu nombre!" />
Se mostrará de la siguiente forma:

Los comentarios en Javascript

Para introducir comentarios dentro del código, hazlo así:
//Esta simple línea del código es un comentario



Ejemplos prácticos del uso de Javascript


Abrir una nueva ventana


Abrir una nueva ventana con un tamaño especificado, escribir a ella y luego cerrarla.(No funciona en Internet Explorer)
<a href= "javascript:aa = window.open('','new', 'width=400,height=400,left=50,top=50');open=aa;void 0">Abrir una ventana en blanco</a>
<a href= "javascript:aa.document.write('<h1>Esto es escrito por la ventana principal</h1>');">Escribir texto en la ventana</a>
<a href="javascript:aa.close()">Cerrar Ventana</a>
Prúebalo aquí:
Nueva ventana en blanco
Escribir en la ventana
Nuevo link
Cerrar Ventana

Cambiar el estilo de las páginas web con Javascript

El estilo de las páginas web se puede modificar de forma interactiva (sin tener que refrescar la página desde el servidor) usando el objeto Estilo.
Esto puede resultar muy práctico, un ejemplo son los Bookmarklets usados para mejorar la accesibilidad de las paginas (tamaño del texto, color, eliminar publicidad, etc.)
A continuación tienes varios ejemplos, en otra página se explica el uso del objeto Estilo y puedes encontrar muchos códigos de ejemplo: Como cambiar y modificar el estilo CSS de las páginas web con Javascript

Hacer operaciones matemáticas con Javascript

X


Ejemplos de códigos de Javascript para descargar gratis


Los siguientes ejemplos son sencillas páginas web que tienen insertados distintos códigos Javascript, descárgalas en los vínculos y descomprímelas para poder utilizarlas.
Ninguno de los códigos es peligroso en lo absoluto para el equipo.
Puedes abrirlas con el Bloc de notas u otro editor y modificarlas a tu gusto.

Falso virus. Alerta que simula la infección de un virus y asusta a algunos.

Capitaliza el texto. Formulario para capitalizar el texto, es decir poner la primera letra de cada palabra de una oración o párrafo en mayúsculas.

Convertir en mayúsculas. Formulario que permite convertir todo un párrafo en mayúsculas.

Convertir en minúsculas. Similar al anterior pero lo inverso.

Decimales a Romanos. Formulario para convertir números decimales a romanos.

Contador. Simple contador que al acceder a el muestra un mensaje de cuantas veces has visitado la página, obtiene la información de las cookies del visitante.

Menú flotante. Pequeño menú flotante para ponerlo en tu página web flotando en cualquier lugar.

Bienvenida. Al cargar la página pide tu nombre, edad, en caso que sea menor que 12 muestra un regaño y cierra la página, en caso que seas mayor que esa edad te da la bienvenida y te redirecciona a la página que especifiques en el código.

Abrir nuevas ventanas. Vínculos para abrir nuevas ventanas y cerrarlas, puedes configurar el tamaño y otras propiedades de las ventanas.

Redireccionar. Como redireccionar una página a otro sitio web con contador.

Texto Arcoiris. Hermoso efecto de texto en forma de arcoiris.

Botón huidizo. Broma en la que el botón de un formulario se mueve por la página y es imposible de cliquear con el mouse.

Burbujas. Bonito efecto de burbujas que se mueven con el ratón.

Cerrar ventana. Ejemplo de cómo cerrar una ventana con javascript con dialogo de confirmación.

Coordenadas del ratón. Muestra las coordenadas exactas de la posición del ratón en la página.

Texto aleatorio. Formulario que crea el estilo de una oración o párrafo con varios colores.

Fecha. Varias formas de insertar la fecha en una página web.

Visitante aleatorio. Lo que usan muchas web que dan un número falso aleatorio al visitante.

Sombra texto. Permite crear el CSS para texto con sombra.

Contador. Como poner un contador.

Marcar URL. Permite acceder a un sitio web marcando con un teléfono hecho con Javascript.

Se seguirá añadiendo páginas con códigos para descargar……..

Si te interesó el artículo, este sitio está lleno de páginas que contienen efectos que usan código Javascript, también hay muchas que tratan el tema y contienen bastante código para crear funciones copiando y pegando.
Más abajo están los vínculos a algunas de ellas, pero es imposible ponerlas todas, búscalas usando el buscador que está en el encabezado de cada página.
Cualquier efecto en esta página que te interese, mira el código fuente.
No dejes de probar los juegos hechos con Javascript, en la barra lateral a la izquierda.

Ejemplos de juegos hechos con Javascript


Enlace al juego Tic Tac
Enlace al juego del Ahorcado

Páginas relacionadas