NorfiPC »
Diseño Web »
Javascript fácil
Javascript fácil en páginas web, tutorial y ejemplos
Tweet
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.
NorfiPC, Javascript fácil en páginas las web, ejemplos
Que 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 deben ejecutar.
Antes de seguir es necesario asegurarse que tu navegador es capaz de ejecutar el código Javascript, fíjate en el mensaje de la linea a continuación:
No estás convencido?, oprime el siguiente botón:
Donde y como 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.
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
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
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>
Herramientas para aprender Javascript
Varias herramientas que puedes usar para facilitarte el trabajo y la edición de las páginas web con 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 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.• 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.
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
Además si lo deseas puedes acceder a la página de inicio que utilizo, que tiene muchas otras herramientas útiles para la edición web.
Como 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.
• Poner el ratón sobre un área determinada.
• La página al iniciarse.
• Seleccionar una casilla, botón u otro tipo de forma.
Códigos de ejemplos de Javascript
1- En este ejemplo se inserta la funcion entre dos tags, 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í:
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>
<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" />
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>
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" />
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!" />
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í:
Cambiar el estilo de la página con Javascript
Hacer el texto azul
Hacerlo rojo
Verde
En negrita
El fondo amarillo
Invisible (Ojo desaparece el texto en la página)
Hacerlo rojo
Verde
En negrita
El fondo amarillo
Invisible (Ojo desaparece el texto en la página)
Hacer operaciones matemáticas con Javascript
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.
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 hechos usando 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.
No dejes de probar los juegos hechos con Javascript, en la barra lateral a la izquierda.
Páginas relacionadas
◄ Lista de variables y funciones de Javascript para usar en las páginas web
◄ Atributos de eventos de Javascript códigos y ejemplos prácticos
◄ Como crear Bookmarklets con Javascript para usar en el navegador web
◄ Como escribir con Javascript texto y otros elementos en las páginas web
◄ Como abrir links de una página web en una nueva ventana con Internet Explorer y otros navegadores.
◄ Como imprimir solo un área, parte o sección de una página web.
◄ Como mostrar la fecha y hora en las páginas web usando Javascript
◄ Atributos de eventos de Javascript códigos y ejemplos prácticos
◄ Como crear Bookmarklets con Javascript para usar en el navegador web
◄ Como escribir con Javascript texto y otros elementos en las páginas web
◄ Como abrir links de una página web en una nueva ventana con Internet Explorer y otros navegadores.
◄ Como imprimir solo un área, parte o sección de una página web.
◄ Como mostrar la fecha y hora en las páginas web usando Javascript
