NorfiPC » Diseño Web » Javascript fácil
 


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


Sencilla página dedicada a demostrar las bondades y opciones que ofrece Javascript para añadir dinamismo e interacción a las páginas web. Elementos y nociones practicas necesarias para insertar código Javascript en las páginas y blogs de internet. Códigos y ejemplos prácticos.
  Javascript fácil en páginas web, tutorial y 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, añade a estas una serie de funcionalidades que las hacen más dinámicas, útiles y atractivas. Comprobarás varios efectos útiles más abajo.
Javascript no es más que texto que puede ser escrito con cualquier editor como el sencillo Bloc de notas, este código es insertado dentro del html de la página, encerrado por tags 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 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 ponerlo en el area del head o encabezado, en el body o cuerpo y en un archivo externo. Cual 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, después que termina renderiza es decir convierte todo el código insertado en el 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 un tag que así se lo indique.
Donde poner 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

Lógicamente para optimizar el rendimiento de tu página, en el área del head se debe poner solo el código javascript que sean imprescindibles para ejecutar funciones cuando se cargue el body. Muchas funciones contenidas en el head retarda considerablemente el inicio, por lo que el código excesivo debes de ponerlo en el body, por supuesto este el navegador lo renderiza linealmente así que en una página muy cargada de contenido javascript debes de ponerlo en el final aunque lo ideal es una archivo externo.
Este método también se utiliza cuando se comparte el mismo código entre varias páginas web, se hace escribiendo el código en un pequeño archivo de texto con la extensión .js que lo podemos hacer con el bloc de notas y nos aseguramos que la página web lo cargue insertando en el área del head lo siguiente:
<script type="text/javascript"src="archivo.js"></script>

Herramientas para facilitar el aprendizaje, la prueba y la edición de Javascript.


Varias herramientas que puedes usar para facilitarte 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 de código Javascript



Editor para 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 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 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.

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í:

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>


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:

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:

Utiles

Para introducir comentarios dentro del código, hazlo así:

//Esta simple línea del código es un comentario


Mas ejemplos, ahora 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.

•• Como podemos cambiar el estilo de la página

Hacer el texto azul 
Hacerlo rojo 
Verde 
En negrita 
El fondo amarillo 
Invisible (Ojo desaparece el texto en la página)



•• Hacer operaciones matemáticas:
x

Ejemplos para descargar gratis del uso de los códigos Javascript en las páginas web.


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……..

Páginas relacionadas.


◄ Lista de variables y funciones de Javascript para usar en las páginas 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

Agrega esta página en tus favoritas en el siguiente link: Guardar en Favoritos Guardar
Compártela en Facebook: Compartir Compártela en Twitter: Compartir
 
Anterior |  Subir  | Siguiente