Formas de usar JavaScript

Gracias por mirar mi nuevo blog, aquí esta algunas de las características de Html y Java Script.

Existen cuatro formas en las que se puede agregar código de JavaScript en los documentos HTML. Estas son:

1. Dentro de un elemento <script >...</script>.
2. Usando un archivo vinculado .js.
3. Haciendo uso de manejadores de eventos dentro de algunos elementos HTML.
4. Mediante la sintaxis de dirección pseudo-URL javascript: referida a un enlace.

1. Hacer uso del elementos script.
El método más común para incluir código JavaScript dentro de un documento HTML es utilizando el elemento SCRIPT. Los navegadores que reconocen scripts o guiones asumen que el texto comprendido entre etiquetas <script>...</script> corresponde a algún lenguaje de script, de forma predeterminada se utiliza JavaScript, aunque es posible indicar mediante el uso del atributo languaje, el lenguaje que se debe utilizar.
<script language="JavaScript">
   var msg = "Usando JavaScript";
   document.write("<p>Estamos " + msg + ".</p>");
</script>
De acuerdo a la sintaxis propuesta por el consorcio W3C, en lugar del atributo language, debería hacer uso del atributo type, indicando el tipo MIME del lenguaje de script a utilizar. El tipo MIME para el lenguaje JavaScript es text/javascript. Así, el ejemplo anterior quedaría:
<script type="text/javascript">
   var msg = "Usando JavaScript";
   document.write("<p>Estamos " + msg + ".</p>");
</script>

En algún momento, se solía utilizar ambos atributos, para lograr la mayor compatibilidad posible con todos los navegadores en ese momento, no obstante, hoy en día todos los navegadores han implementado la recomendación de la W3C, por lo que puede hacerse uso únicamente del atributotype para indicar el lenguaje que será utilizado en el script.
Un mismo documento HTML puede contener uno o varios elementos SCRIPT, como se muestra a continuación:

Al ejecutar el script se ejecutarán dos scripts. El primero le solicitará su nombre y el segundo le solicitará su edad. Al final se mostrará en la página web el nombre y edad de quién ejecute el script.

2. Archivo vinculado .js
Una de las formas, más recomendadas para incluir código de JavaScript a un documento web es hacer uso del atributo src en el elemento SCRIPT, de modo que no se inserte el guión directamente en el documento HTML.Ingrese el siguiente código usando el Notepad++:

Guarde el script en un archivo con extensión .js en alguna carpeta en el disco de su computadora. Llame al script comparacion.js.

Cree el documento HTML, siempre con el Notepad++ y guárdelo con el nombre comparacion.html.

Página web después de ingresar dos cantidades mediante diálogos prompt().

3. Manejadores de eventos en elementos HTML
Esta ha sido la forma de utilizar JavaScript para controlar la interacción del usuario con casi cualquier elemento de la página web; sin embargo, hoy en día, la más desaconsejada. Este método permite incluir, en forma de atributo de algunos elementos HTML, código de JavaScript que será ejecutado cuando se produzca el evento en dicho elemento producto de la interacción del usuario con la página. A estos atributos HTML, se le denomina manejadores de eventos.

Veamos un ejemplo:
<form>
<input type="button" value="Pulsar" onclick="alert('Has pulsado el botón')" />
</form>

El ejemplo anterior hará aparecer un diálogo alert en el navegador indicándole al usuario que hizo clic sobre el botón.

4. Direcciones pseudo-URL

Los navegadores actuales suelen reconocer las direcciones pseudo-URL. Estas permiten invocar una instrucción desde un enlace, por ejemplo. Si desea comprobar si con su navegador puede utilizar sintaxis de pseudo-URL, puede ingresar una instrucción como la siguiente en la barra de direcciones del mismo: javascript:alert('Esta es una dirección pseudo-URL'). Puede ser que por razones de seguridad, su navegador no realice ninguna acción. Sin embargo, la comprobación final, puede hacerse con un script sencillo como el siguiente:
<a href="javascript:prompt('Ingresa tu nombre','')" title="Tu nombre">
   Clic para ingresar tu nombre
</a>

El resultado es el siguiente:

funciones de Parámetros Javascript

Los parámetros se usan para mandar valores a las funciones. Una función trabajará con los parámetros para realizar las acciones. 

Por decirlo de otra manera, los parámetros son los valores de entrada que recibe una función.

Por poner un ejemplo sencillo de entender, una función que realizase una suma de dos números tendría como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado de la suma, pero eso lo veremos más tarde. 

Veamos un ejemplo anterior en el que creábamos una función para mostrar un mensaje de bienvenida en la página web, pero al que ahora le vamos a pasar un parámetro que contendrá el nombre de la persona a la que hay que saludar. 

function escribirBienvenida(nombre){ 
    document.write("<H1>Hola " + nombre + "</H1>") 
}

Funciones de javascript

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las mismas instrucciones. 

Un script para una tienda de comercio electrónico por ejemplo, tiene que calcular el precio total de los productos varias veces, para añadir los impuestos y los gastos de envío.

Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado el código fuente de la aplicación, ya que:

El código de la aplicación es mucho más largo porque muchas instrucciones están repetidas.

Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer tantas modificaciones como veces se haya escrito esa instrucción, lo que se convierte en un trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto de lenguajes de programación. Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.

En el siguiente ejemplo, las instrucciones que suman los dos números y muestran un mensaje con el resultado se repiten una y otra vez

DECLARACIÓN DE VARIABLES JAVASCRIPT.

Aunque no es obligatorio, se recomienda declarar siempre las variables antes de usarlas en JavaScript. Como sabemos esta declaración se hace escribiendo la palabra clave var seguida del nombre de variable. También se pueden declarar múltiples variables en una sola línea escribiendo var y a continuación los nombres de las variables separados por comas.

Por ejemplo podemos declarar:

var coches;

var motos;

var trenes;

O bien hacerlo en una sola línea de esta manera: var coches, motos, trenes;

También se permite la inicialización de variables en línea. Por ejemplo podríamos escribir:

var coches = 32, motos = 9, trenes = 12;

De este modo quedan las variables inicializadas en el mismo momento de declaración.

Java scrip

Javascript es uno de los tantos lenguajes de programación, una especie de dialecto artificial diseñado para usarse en computadoras y hacernos la vida más fácil. Otros lenguajes son VBScript, PHP, ASP, Perl, Python, etc. Javascript es el que más se utiliza en la práctica.

Javascript es sencillo en comparación con los otros, su uso principal es en las páginas web para hacerlas más dinámicas e interactivas, pero también puede utilizarse en aplicaciones tanto en la PC como en el móvil. Funciona del lado del usuario, esto quiere decir que cuando carguemos en nuestro navegador una página web, estamos cargando también el código de Javascript. Aunque nos desconectemos de la red, si no cerramos el navegador, podemos seguir usando las funciones y efectos que incluye dicha página. Incluso tenemos la opción de guardar la página en el equipo y luego offline abrirla y disponer de todas las funciones que incluye. Usando sencillas funciones de Javascript es posible crear una multitud de efectos enormes, dependiendo solo de la imaginación del programador. Repito, no es difícil de aprender su uso básico y está al alcance de cualquier persona, aun cuando no tenga conocimientos de programación.

Tipos de Botones

BOTONES DE ENVÍO (SUBMIT)

Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es decir, cuando se pulsa el botón el navegador nos lleva a la dirección web indicada en el campo action y al mismo tiempo envía a esa dirección los datos que contiene el formulario. Para insertar un botón usamos la etiqueta <input … />. Para indicar que se trata de un botón de envío dentro de esta etiqueta escribiremos type = "submit". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

<form method="get" action="http://aprenderaprogramar.com/accion.php">

<input type="submit" value="Enviar este formulario" />

</form>

</body>

</html>

BOTONES DE IMAGEN (IMAGE)

Estos tipos de botones funcionan de la misma forma que los botones de envío salvo que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen envían, además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y"). En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que bastará con recuperar la información útil y ya está.Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen (nota: como ruta de la imagen puedes poner la ruta que te apetezca).

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

<form method="get" action="http://aprenderaprogramar.com">

<input name="boton1" type="image"

src="/images/aprenderaprogramar/imagen.png">

</form>

</body>

</html>

BOTONES DE RESTABLECIMIENTO (RESET)

Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

<form method="get" action="http://aprenderaprogramar.com/accion.php">

<input type="text" name="texto1" value="Valor por defecto" /><br />

<input type="checkbox" name="condiciones" checked="checked" />

Acepto las condiciones<br />

<input type="reset"

value="Restablecer todos los campos a su valor predeterminado" />

</form>

</body>

</html>

BOTONES DE CONTENIDO (BUTTON)

Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlos de un aspecto atractivo, imágenes o colores de fondo, etc.

Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o "reset"  en su atributo "type". Un valor button supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo usando el lenguaje JavaScript, pero no vamos a explicar ahora cómo para centrarnos en el HTML). Un valor submit hará que el botón funcione como un botón de envío. Finalmente, un valor reset hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario.

<html>

<head>

<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>

</head>

<body>

<form method="get" action="http://aprenderaprogramar.com">

<button type="submit">

El <b>tag HTML type button</b><br />

permite contenido HTML en su interior.

</button>

</form>

</body>

</html>

Botones de radio

 Definimos un radio button usando "input" tag. Damos un atributo nombrado "TYPE=RADIO" en el tag que define el tipo como un radio button. El nombre del atributo debe ser definido y debe ser el mismo. El valor en este caso será usado solo durante el procesamiento del formulario.
Nota: Todos las entradas de este tipo deben contener el mismo nombre. Este nombre es el que los agrupa. Si tiene nombres diferentes para cada botón, entonces se comportan individualmente.

 

Ejemplo.

<form name=myform>

<input type="radio" name=myradio1 value="1">un

<input type="radio" name=myradio2 value="2">dos

<input type="radio" name=myradio3 value="3">tres

</form>

Listas y tipos de listas HTML

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas. A continuación, analizaremos cada uno de ellos.

Listas ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:

<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>


En el ejemplo notamos cómo es posible omitir la marca <BR> para el salto de línea, dado que está automáticamente incluido en <LI>. Si no se establece diversamente (como veremos a continuación), el tipo de lista ordenada que el navegador visualiza está numerada (es decir, la lista consta de una serie de números que parte del 1 y va aumentando progresivamente). Las últimas versiones de HTML prevén la posibilidad de listas ordenadas que contengan un sistema de ordenación diverso del numérico antes citado:

Ordenación con letras mayúsculas:

<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con letras minúsculas:

<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con números romanos en mayúscula:

<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Ordenación con números romanos en minúscula (romanitos):

<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Listas desordenadas

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

Las listas desordenadas constan de una sola marca de apertura y cierre<UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:

<UL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Si no se especifica diversamente, cada voz del elenco va precedida de un símbolo geométrico.
Al igual que para las listas ordenadas, también en este caso podemos indicar diversos tipos de símbolos:

Los círculos sólidos de la lista anterior se obtienen con disc:

<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

El atributo circle imposta circunferencias:

<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

El atributo square imposta listas definidas por cuadrados sólidos:

<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

Etiqueta input type HTML 5

Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una muy interesante son los nuevos valores para el atributo type del elemento input.

Estos nuevos tipos de campos hacen que los navegadores adopten distintos comportamientos que, sin dudas, nos van a hacer la vida más fácil a los desarrolladores de sitios web.

Así como actualmente tenemos el conocido password que oculta la contraseña con asteriscos o círculos (dependiendo del navegador); ahora contamos con el nuevo searchque presenta una pequeña cruz para poder borrar su contenido; o también el nuevo campo numérico number que muestra dos flechas (hacia arriba y hacia abajo) para aumentar o disminuir el valor del número.

Ejemplo.

<input type=“search” name=“busqueda”>

<input type=“tel” name=“telefono”>

<input type=“url” name=“url”>

<input type=“email” name=“correo”>

<input type=“datetime” name=“fechahora”>

Etiqueta input type

Etiqueta input type HTML 4

La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener el formulario.

Sus atributos y valores son:

TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuación:

Text que sirve para introducir una caja de texto simple, y admite los parámetros:

name=" nombre", que asigna de forma unívoca un nombre identificador a la variable que se introduzca en la caja de texto.

maxlenght=" n ", que fija el número máximo de caracteres que se pueden introducir en la caja de texto.

size=" n ", que establece el tamaño de la caja de texto en pantalla.

value=" texto ", que establece el valor por defecto del texto que aparecerá en inicialmente en la caja de texto.

disabled, que desactiva la caja de texto, por lo que el usuario no podra escribir nada en ella.

accept = " lista de content-type", Indica el tipo de contenido que aceptara el servidor.

Ejemplo.

<form action="corpan@miservidor.com" method="post" enctype="text/plain" name="miform">
  marca tu equipo favorito:
  <input type="Radio" name="equipo" value= "madrid"checked>Real Madrid
  <input type="Radio" name= "equipo"value="atletico">Atlético de Madrid
  <input type="Radio" name= "equipo"value="barcelona">Barcelona
</form>

Formulacion Html 5

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.

Ejemplo:

<div id="contact-form">  

   <h1>¡Contáctate con nosotros!</h1>

   <h2>Usa el formulario para acercarnos tu mensaje.</h2>  

   <p id="failure">Oops... Algo anduvo mal.</p>  

   <p id="success">Gracias, tu mensaje ha sido enviado correctamente.</p>  

   <form method="post" action="emailForm.php">  

      <label for="name">Name: <span class="required">*</span></label> 

      <input type="text" id="name" name="name" value=""placeholder="Your name" required="required" autofocus="autofocus" />  

         

      <label for="email">Email Address: <span class="required">*</span></label>  

      <input type="email" id="email" name="email" value=""placeholder="your@email.com" required="required" />  

         

      <label for="website">Website: </label>  

      <input type="web" id="webstie" name="website" value="" />  

         

      <label for="subject">Subject: </label>  

      <select id="subject" name="subject">  

         <option value="hello">I just want to say hello =]</option>

         <option value="quote">I'd like a quote</option>  

         <option value="general">General</option>  

      </select>  

         

      <label for="message">Message: <span class="required">*</span></label>  

      <textarea id="message" name="message" placeholder="Write your message here, please." required="required"></textarea>  

           

      <input type="submit" value="Send away!" id="submit" />

   </form>  

</div>

Formulacion Html 4

Un formulario HTML 4 es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menús, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)


Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radiobotones y botones para reinicializar el formulario o para enviarlo

<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">

    <P>

    <LABEL for="nombre">Nombre: </LABEL>

              <INPUT type="text" id="nombre"><BR>

    <LABEL for="apellido">Apellido: </LABEL>

              <INPUT type="text" id="apellido"><BR>

    <LABEL for="email">email: </LABEL>

              <INPUT type="text" id="email"><BR>

    <INPUT type="radio" name="sexo" value="Varón"> Varón<BR>

    <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>

    <INPUT type="submit" value="Enviar"> <INPUT type="reset">

    </P>

 </FORM>



Dirigido a Antonio Calincha