tutosoftware

Para poder incluir javascript en html tenemos que incluir la tag <script> de la siguiente forma:

     
     <script>
     ...declaraciones javascript...
     </script>
     
     

Nota: Para html5 es lo correcto o opcional pero para html 4.x o xhtml se derclara de la siguiente forma:

     <script type="text/javascript">
      ... declaraciones javascipt ...
     </script>
      

Un Document Object Model (DOM) es una forma conceptual de la visualización de un documento y sus contenidos.

Cada vez que su navegador se le pide que cargar y mostrar una página, tiene que interpretar el código fuente contenida en el archivo HTML que comprende la página. Como parte de este proceso de análisis, el navegador crea un tipo de modelo interno conocida como una representación DOM basado en el contenido del documento cargado. Es esto modelo que el navegador a continuación se refiere a cuando se representa la página visible. Puedes usar Javascript para acceder y editar las diversas partes de la representación DOM, al mismo tiempo de cambiar la forma en que el usuario ve e interactúa con la página en la vista.

Aqui vamos a mostrar algunos ejemplos con javascript

• Hola mundo con alert
• Evento onclick
• Evento onMouseOver
• Conversión de Celsius a Fahrenheit

Para asociar el código JavaScript en la página HTML, existen dos métodos, ambos utilizan la etiqueta <script> </script> Un método consiste en incluir las sentencias de JavaScript directamente en el archivo HTML.

     
     <script>
     ...declaraciones javascript...
     </script>
     
     

Una segunda forma, y por lo general preferible incluir su código es salvar el JavaScript en un archivo separado, y utilizar el elemento <script> para incluir ese archivo por su nombre utilizando el atributo src(source):

     
     <script src='codigo.js'></script>
     
     

El ejemplo anterior incluye el archivo codigo.js que contiene nuestro código javascript.Si el archivo javascript no está en la misma carpeta que el script de llamada, también se puede agregar una ruta de acceso(relativa o absoluta).

ruta relativa

     
     <script src='/path/to/mycode.js'></script>
     
     

ruta absoluta

     
     <script src=''http://www.example.com/path/to/mycode.js'></script>
     
     

La colocación de su código JavaScript en un archivo separado ofrece algunas ventajas importantes:

• Cuando se actualiza el código JavaScript, las actualizaciones están disponibles inmediatamente para cualquier página usando ese mismo archivo JavaScript.
• El código de la página HTML se mantiene limpio, y por lo tanto más fácil de leer y mantener.
• El rendimiento se ha mejorado ligeramente debido a que su navegador almacena en caché el archivo incluido; por lo tanto, que tiene una copia local en la memoria siguiente vez que se necesite por este u otro página.

los programas JavaScript, son listas de instrucciones individuales que nos referimos como declaraciones. Para interpretar correctamente las declaraciones, el navegador espera encontrar cada una declaración escrita sobre una línea separada:

     esta es la declaracion 1
     esta es la declaracion 2
     

Para facilitar la legibilidad del código, y para ayudar a prevenir y difíciles de encontrar errores de sintaxis, que es buena práctica de combinar ambos métodos, dando a cada declaración de su propia línea y da por concluida la declaración con un punto y coma:

     esta es la declaracion 1;
     esta es la declaracion 2;
     

Algunas sentencias no están destinadas a ser ejecutadas por JavaScript del navegador intérprete, pero están ahí para el beneficio de cualquier persona que pueda estar leyendo el código. Esto se refieren a las líneas tales como comentarios, y hay normas específicas para la introducción de comentarios en tu código. Un comentario que ocupa una sola línea de código puede escribirse mediante la colocación de un doble barra diagonal antes de el contenido de la línea:

     //Esto es un comentario
     

Una forma más conveniente de entrar en los comentarios de varias líneas de su código es el prefijo de su comentario con / * y terminar con * /. Un comentario escrito con esta sintaxis puede abarcar varias líneas:

     /*
        Este comentario
        puede 
        abarcar
        multiples líneas */
     

Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor. .Los valores pueden adoptar muchas formas diferentes, un número entero o decimal, una cadena de caracteres, u otros diversos tipos de datos. Nuestros variables pueden ser llamados casi cualquier cosa que queramos, siempre y cuando nos utilice únicamente caracteres alfanuméricos, el signo del dólar $, o guiones en el nombre.

Para declarar un variable va precidida por la palabra reservada var

   var netPrice;
   netPrice = 8.99;
   

Para declarar una variable de cadena de caracteres va encerrada en comillas.

   var nombre = "martin";
   
   

JavaScript nos permite llevar a cabo operaciones aritméticas utilizando la norma de operadores de suma, resta, multiplicación y división.

• suma(+)
• resta(-)
• multiplicación(*)
• división(/)

Para calcular el resto de una división, podemos usar la división módulo de JavaScript. Esto se denota por el carácter (%).

JavaScript también tiene operadores convenientes de incremento (++) o decremento (--) en el valor de una variable:

contadorProducto++; //es igual a
contadorProducto=contadorProducto+1;

Si necesita aumentar o disminuir una variable por un valor distinto de uno, JavaScript también permite combinar otros operadores aritméticos como el operador =; por ejemplo, (+=) y (-=).

total = total + 5;
total += 5;//esto es equivalente

Cuando utiliza varios operadores en el mismo cálculo, JavaScript utiliza las reglas de precedencia para determinar en qué orden el cálculo debe hacerse. Por ejemplo, considere la declaración

 var promedio = a + b + c /3;

Si, como el nombre de la variable indica, que está tratando de calcular un promedio, esto no haría dar el resultado deseado; la operación de división se llevaría a cabo en c antes de añadir los valores de a y b para el resultado. Para calcular el promedio correctamente, tendríamos que añadir paréntesis, a nuestro estado, así:

 var promedio = (a + b + c) /3;

Los operadores aritméticos no tienen mucho sentido si las variables que operan en contienen cadenas en lugar de valores numéricos. La excepción es el operador +, que JavaScript interpreta como una instrucción para concatenar (unir secuencialmente) dos o más instrumentos de cadena:

  var nombre="jose martin";
  var apellido="lara";
  var nombreCompleto = nombre + " "+ apellido;
 /*La variable nombreCompleto contiene el 
    valor de jose martin lara */

Si intenta utilizar el operador + en dos variables, una de las cuales es una cadena y el otro numérica, JavaScript convierte el valor numérico en una cadena y concatena los dos.

El controlador de eventos onClick se puede aplicar a casi todos los elementos HTML visible en una página. Una manera de ponerla en práctica es agregar un atributo más para el elemento HTML:

<button  onclick="funcion()"></button>

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Evento onclick</title>
</head>
<body>
<h2>Evento onclick</h2>

<input type="button"   onclick="alert('Evento onclick')" 
   value="Pulsa aquí">

</body>
</html>

El código HTML agrega un botón para el elemento <body> de la página, y los suministros de el botón con un atributo onclick. El valor dado al atributo onclick es la El código JavaScript que queremos que se ejecute cuando el elemento HTML (en este caso un botón) es se hace clic. Cuando el usuario hace clic en el botón, el evento onclick se activa (se dice normalmente que el evento ha sido "despedido") y el estado (s) de JavaScript que figuran en el valor del atributo se ejecutan.

Ver ejemplo

Cuando simplemente queremos detectar cuando el puntero del ratón se encuentra en la pantalla con referencia a un elemento de página en particular, onMouseOver y onMouseOut nos pueden ayudar a hacer eso. El evento onMouseOver se dispara cuando el cursor del ratón del usuario entra en la región de la pantalla ocupada por el elemento en cuestión. El evento onMouseOut, como estoy seguro ya has adivinado, se activa cuando el cursor abandona esa misma región.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Evento onmouseover</title>
</head>
<body>
<h3>Evento onMouseOver</h3>

<img alt="imagen" src="imagen.jpg" 
    onmouseover="alert('sobre la imagen')">

</body>
</html>