Guía JavaScript

JavaScript
JavaScript es el lenguaje de programación de HTML y la Web. Permite especificar el

comportamiento de las páginas Web
Método getElementById ()
El método getElementById() Permite encontrar un elemento HTML a través del valor del
atributo id y cambiar su contenido (innerHTML), el valor de sus atributos, modificar estilos,
ocultar o mostrar el elemento.
Ejemplo 1
Cambiar el contenido de un elemento

<!DOCTYPE html>
<html>
<body>
<h2>¿Que puede hacer JavaScript?</h2>
<p id="demo1">JavaScript puede cambiar el contenido de un elemento HTML.</p>
<button type="button" onclick='document.getElementById("demo1").innerHTML = "Hola JavaScript!"'>Click aquí!</button>
</body>
</html>
Ejemplo 2
Cambiar el valor de un atributo de un elemento. En este ejemplo cambia el atributo src de

una imágen
<!DOCTYPE html>
<html>
<body>
<h2>¿Qué puede hacer JavaScript?</h2>
<p>JavaScript puede cambiar los valores de los atributos de un elemento HTML.</p>
<p>En este caso JavaScript cambia el valor del atributo src (source) de una imágen.</p>
<button onclick="document.getElementById('mi imágen').src='Imagenes/pic_bulbon.gif'">Encender</button>
<img id="mi imágen" src="Imagenes/pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('mi imágen').src = 'Imagenes/pic_bulboff.gif'">Apagar</button>
</body>
</html>
Ejemplo 3
Cambiar el estilo de un elemento HTML

<!DOCTYPE html>
<html>
<body>
<p id="demo2">JavaScript puede cambiar el estilo de un elemento HTML.</p>
<button type="button" onclick="document.getElementById('demo2').style.fontSize = '35px'">Click Aquí</button>
</body>
</html>
Ejemplo 4
Ocultar o mostrar un elemento

<!DOCTYPE html>
<html>
<body>
<p id="demo3">JavaScript puede ocultar/mostrar un elemento HTML.</p>
<button type="button" onclick="document.getElementById('demo3').style.display= 'none'">Ocultar</button>
<button type="button" onclick="document.getElementById('demo3').style.display ='block'">Mostrar</button>
</body>
</html>
Etiqueta <script>
El código JavaScript debe encerrarse entre las etiquetas <script></Script>. Se puede colocar
cualquier cantidad de secuencias de comandos en un documento HTML.
Los scripts se pueden colocar en la sección <body>, o en la <head> de una página HTML, o en
ambos.
Ejemplo
En el siguiente ejemplo el elemento <p> no tiene contenido y se asigna a través de código.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript en el Body</h2>
<p id="demo4"></p>
<script>
document.getElementById("demo4").innerHTML = "Mi primer JavaScript";
</script>
</body>
</html>
Funciones y eventos de JavaScript
Una función de JavaScript es un bloque de código JavaScript, que se puede ejecutar cuando se
"llama".
Por ejemplo, se puede invocar una función cuando ocurre un evento, como cuando el usuario
hace clic en un botón.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script>
function miFuncion() {
document.getElementById("demo5").innerHTML = "Párrafo cambiado.";
}
</script>
</head>
<body>
<h2>JavaScript en el Head</h2>
<p id="demo5">Un párrafo.</p>
<button type="button" onclick="miFuncion()">Cambiar párrafo</button>
</body>
</html>
JavaScript externo
Los scripts también pueden colocarse en archivos externos. Los archivos JavaScript tienen la
extensión de archivo .js.
Los scripts externos son prácticos cuando se usa el mismo código en muchas páginas web
diferentes.
Para usar un script externo, coloque el nombre del archivo de script (url) en el atributo src
(fuente) de una etiqueta <script>:
<script src="Scripts/Script.js"></script>
Ejemplo
Cree la carpeta Scripts y en ella cree el archivo SCRIPT.JS y transcriba el código

function miFuncion(){
document.getElementById("demo6").innerHTML = "Párrafo cambiado.";
}
Cree el archivo SCRIPT.HTML y transcriba el código

<!DOCTYPE html>
<html>
<head>
<script src="Scripts/Script.js"></script>
</head>
<body>
<h2>JavaScript Externo</h2>
<p id="demo6">Un párrafo.</p>
<button type="button" onclick="miFuncion()">Cambiar párrafo</button>
</body>
</html>
Las etiquetas <script> para hacer referencia a archivos externos se pueden colocar en el <head> o
en el <body>.
Se puede hacer referencia a más de un archivo externo.
El valor del atributo src (fuente) puede incluir referencias relativa a la página actual o absolutas.
Salida de JavaScript
JavaScript puede "mostrar" datos de diferentes maneras:
• Escribir en un elemento HTML, usando innerHTML.

• Escribir en el resultado HTML usando document.write ().
• Escribir en un cuadro de alerta, usando window.alert ().
• Escribiendo en la consola del navegador, usando console.log ().
Ejemplo usando innerHTML
<!DOCTYPE html>
<html>
<body>
<h2>Salida JavaScript </h2>
<p>Con innerHTML</p>
<p id="demo7"></p>
<script>
document.getElementById("demo7").innerHTML = 5 + 6;
</script>
</body>
</html>
Ejemplo usando document.write ()

<!DOCTYPE html>
<html>
<body>
<h2>Salida JavaScript</h2>
<p>Usando document.write()</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Una llamada a document.write() desde un botón cambia todo el contenido de la página, por el
resultado de la expresión pasada al método document.write()
<!DOCTYPE html>
<html>
<body>
<p>Usando document.write()</p>
<button type="button" onclick="document.write(5 + 6)">Cambiar contenido</button>
</body>
</html>
El método document.write() solo se debe utilizar para probar.
Ejemplo usando window.alert()

<!DOCTYPE html>
<html>
<body>
<p>Usando window.alert()</p>
<script>
window.alert(5 * 4);
</script>
</body>
</html>
El navegador antes de mostrar la página muestra una ventana mostrando el resultado de la

expresión pasada al método window.alert()
Ejemplo usando console.log ()
Para fines de depuración se puede utilizar el método console.log ().

<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Al ejecutar la página, se pulsa F12 para activar la depuración y aparece el resultado de la

expresión pasada a console.log
Programas de JavaScript
Un programa de computadora es una lista de "instrucciones" o "declaraciones" para ser

"ejecutado" por una computadora.
Un programa de JavaScript es una lista de enunciados de programación.
En HTML, los programas de JavaScript son ejecutados por el navegador web.
Declaraciones de JavaScript
Las declaraciones de JavaScript se componen de:
Valores, operadores, expresiones, palabras clave y comentarios.
Las instrucciones se separan con punto y coma. En una misma línea se pueden escribir varias
instrucciones:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Instrucciones JavaScript</h2>
<p>Las instruciones JavaScript se separan con punto y coma.</p>
<p id="suma"></p>
<script>
var a, b, c; // Declara 3 variables
a = 5; // Asigna el valor 5 a la variable a
b = 6; // Asigna el valor 6 a la variable b
c = a + b; // Asigna la suma de a y b a c
document.getElementById("suma").innerHTML = "La suma de "+ a + " + " + b +" = "+ c ;
</script>
</body>
</html>
Palabras clave JavaScript
Las declaraciones de JavaScript a menudo comienzan con una palabra clave para identificar la
acción de JavaScript que se realizará.
Las palabras clave de JavaScript son palabras reservadas. Las palabras reservadas no se pueden
usar como nombres para las variables.
A continuación se describen las palabras claves
Palabra clave Descripción

break Termina un switch o un ciclo
continue Repite el ciclo desde su inicio
Detiene la ejecución de JavaScript y llama (si está disponible) a la función de
debugger
depuración
Ejecuta y repite la ejecución de un bloque de instrucciones mientras que una
do ... while
condición es verdadera
for Marca un bloque de instrucciones que se ejecutarán, un número de veces
function Declara una función
Marca un bloque de instrucciones para ser ejecutado, dependiendo de una
if ... else
condición
return Sale de una función
Marca un bloque de instrucciones para ser ejecutado, dependiendo de los
switch
diferentes casos
try ... catch Implementa el manejo de errores en un bloque de instrucciones
var Declara una variable.
Sintaxis de JavaScript
La sintaxis de JavaScript es el conjunto de reglas, que establecen cómo se construyen los

programas de JavaScript:
var x, y; // Como declarar variables
x = 5; y = 6; // Como asignar valores a las variables
z = x + y; // Como hacer cálculos con variables
Valores de JavaScript
La sintaxis de JavaScript define dos tipos de valores: valores constantes (literales) y valores
variables (variables).
Literales de JavaScript
Las reglas más importantes para escribir valores constantes son:
Los números se escriben con o sin decimales:

10.50
1001
Las cadenas son texto, escritas entre comillas dobles o simples:
"Juan Pérez"
'Juan Pérez'
Variables de JavaScript
En un lenguaje de programación, las variables se usan para almacenar valores de datos.
JavaScript usa la palabra clave var para declarar variables.
Un signo igual se usa para asignar valores a las variables.
En el siguiente ejemplo, x se define como una variable. Entonces, a x se le asigna el valor 6:

var x;
x = 6;
JavaScript usa un operador de asignación (=) para asignar valores a las variables:
Expresiones de JavaScript
Una expresión es una combinación de constantes, variables y operadores, que calcula un valor.
El cálculo se llama evaluación.
Expresión Evaluación
5 * 10 50
var x = 3;
x * 10 30
"Juan" + " " + "Pérez" "Juan Pérez"
Comentarios de JavaScript
No todas las declaraciones de JavaScript se "ejecutan".
El código después de barras dobles // hasta el fin de línea se trata como un comentario
El código entre / * y * / se trata como un comentario. Se utiliza para comentarios de varias líneas.
Los comentarios se ignoran y no se ejecutarán:

var x = 5; // Se ejecutará
// var x = 6; No se ejecutará
Identificadores de JavaScript
Los identificadores son nombres.
En JavaScript, los identificadores se utilizan para nombrar variables, funciones y etiquetas.

Las reglas para los identificadores son muy similares en la mayoría de los lenguajes de
programación.
• En JavaScript, el primer carácter debe ser una letra, un guión bajo (_) o un signo de dólar ($).
• Los caracteres subsiguientes pueden ser letras, dígitos, guiones bajos o signos de dólar.
• Los números no están permitidos como el primer caracter. De esta forma, JavaScript puede
distinguir fácilmente los identificadores de los números.
JavaScript es Case Sensitive
Todos los identificadores de JavaScript distinguen mayúsculas de minúsculas.
JavaScript no interpreta VAR o Var como la palabra clave var.
La sentencia var apellido, Apellido; declara dos variables diferentes apellido y Apellido
Nomenclatura JavaScript
Es la manera de unir múltiples palabras en un nombre de variable, función, etc.
Los programadores de JavaScript tienden a usar Lower Camel Case, la primera palabra se
escribe con letra minúscula y la primera letra de las palabras restantes con mayúscula:
primerNombre, tarjetaMaestra, interUrbano
Conjunto de caracteres de JavaScript
JavaScript usa el conjunto de caracteres Unicode.
Operadores de JavaScript
Operadores aritméticos de JavaScript
Operador Descripción
+ Adición
- Substracción
* Multiplicación
/ División
% Modulo (Resto)
++ Incremento
-- Decremento
Operadores de Asignación de JavaScript
Los operadores de asignación asignan valores a las variables de JavaScript.

Operador Ejemplo Equivale a
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
Operadores de cadenas de JavaScript
El operador + también se puede usar para agregar (concatenar) cadenas.
Operador (concatenación) Ejemplo Resultado asignado a txt1

txt1 = "Juan";
+ txt2 = "Pérez"; Juan Pérez
txt1 = txt1 + " " + txt2;
txt1 = "Me gusta";
+= txt1 += " cantar"; Me gusta cantar
Operadores de comparación de JavaScript
Operator Description
== Igual a
=== Igual valor y tipo
!= No igual
!== No igual valor o no igual tipo
> Mayor que
< Menor que
>= Mayor o igual a
<= Menor o igual a
? Operador condicional
Operadores lógicos de JavaScript
&& and
|| or
! not
Operadores de tipo de JavaScript
typeof Retorna el tipo de una variable
Retorna verdad si un objeto es una instancia de
instanceof
un tipo de objeto
Operadores a nivel de bit de JavaScript
Operator Nombre Descripción

& AND Establece cada bit a 1 si ambos bits son 1
| OR Establece cada bit a 1 si uno de dos bits es 1
^ XOR Establece cada bit a 1 si solo uno de dos bits es 1
~ NOT Invierte todos los bits
Se desplaza hacia la izquierda colocando ceros
Zero fill left
<< desde la derecha y deja caer los bits más a la
shift
izquierda
Se desplaza hacia la derecha colocando las copias
Signed right
>> del bit del extremo izquierdo hacia adentro desde la
shift
izquierda, y deja caer los bits del extremo derecho
Zero fill right Se desplaza hacia la derecha colocando ceros desde
>>>
shift la izquierda y deja caer los bits de la derecha
Agregar cadenas y números
Al agregar dos números, se devolverá la suma, pero agregar un número y una cadena devolverá
una cadena:
Expresión Resultado asignado a la variable

x = 5 + 5; 10
y = "5" + 5; 55
z = "Hola" + 5; Hola5
x = 10 + 10 + "Hola" 20Hola
Tipos de datos de JavaScript
Datos primitivos
Un valor de dato primitivo es un único valor de dato simple sin propiedades y métodos
adicionales. El operador typeof puede devolver uno de estos tipos primitivos:
string
number
boolean
undefined
Datos complejos
El operador typeof puede devolver uno de dos tipos complejos:
function
object
Ejemplo
typeof { nombre:"Juan", edad:50} // Devuelve "object"
typeof [1,2,3,4] // Devuelve "object"
typeof null // Devuelve "object"
typeof function suma(){} // Devuelve "function"
Las variables de JavaScript pueden contener muchos tipos de datos: números (number), cadenas
(string), lógicos (boolean) y objetos (object)
Arrays (arreglos) de JavaScript
Las matrices de JavaScript están escritas con corchetes.
Los elementos de matriz están separados por comas.
El siguiente código declara (crea) una matriz llamada autos, que contiene tres elementos
(nombres de automóviles):
Ejemplo
var autos = ["Fiesta", "Aveo", "BMW"];
Los índices de matriz están basados en cero, lo que significa que el primer elemento es [0], el
segundo es [1], y así sucesivamente.
Objetos de JavaScript
Los objetos de JavaScript están escritos con llaves.
Las propiedades del objeto se escriben como pares nombre: valor, separados por comas.
Ejemplo
var persona = {nombre:"Juan", apellido:"Pérez", edad:25, colorOjos:"azul"};
El objeto (persona) en el ejemplo anterior tiene 4 propiedades: nombre, apellido, edad y

colorOjos.
Tipo undefined
Una variable a la que no se le ha asignado un valor, tiene un valor undefined y su tipo

también es undefined.
Cualquier variable puede vaciarse, estableciendo el valor como undefined. El tipo también
estará undefined.
Ejemplo:
var auto = undefined;
Tipo null
En JavaScript, null es "nada". Se supone que es algo que no existe.
En JavaScript, el tipo de dato de null es un objeto.
Puede vaciar un objeto estableciéndolo en null.
Ejemplo
var persona = {nombre:"Juan", apellido:"Pérez", edad:25, colorOjos:"azul"};
persona = null; // Ahora el valor es null, pero el tipo es object.
Sentencias de control de flujo
Sentencias selectivas
Sentencia if
La instrucción if se utiliza para especificar un bloque de código JavaScript que se ejecutará si una
condición es verdadera.
Sintaxis
if (condición) {
bloque de código que se ejecutará si la condición es verdadera
Ejemplo
El siguiente código cambia el contenido del elemento con id ="saludo" por "¡Buenos días!", si la
hora es menor que 12
<!DOCTYPE html>
<html>
<body>
<h1>Saludo</h1>
<p>Cambia "¡Hola!" por "¡Buenos días!" si la hora es menor que 12:00:</p>
<p id="saludo">¡Hola!</p>
<script>
if (new Date().getHours() < 12) {
document.getElementById("saludo").innerHTML = "¡Buenos días!";
}
</script>
</body>
</html>
Sentencia if … else
La instrucción else se utiliza para especificar un bloque de código que se ejecutará si la condición
es falsa.
Sintáxis
if (condición) {
bloque de código que se ejecutará si la condición es verdadera
} else {
bloque de código que se ejecutará si la condición es falsa
}
Ejemplo
hora es menor que 12, de lo contrario lo cambia por "¡Buenas tardes!"
<!DOCTYPE html>
<html>
<body>
<h1>Saludo</h1>
<p>Cambia "¡Hola!" por "¡Buenos días!" si la hora es menor que 12:00 sino cambia por "¡Buenas tardes!" </p>
<script>
if (new Date().getHours() < 12) {
}
else {
document.getElementById("saludo").innerHTML = "¡Buenas tardes!";
}
</script>
</body>
</html>
Sentencia if … else if … else if ….else

La sentencia else if se utiliza para evaluar una segunda condición si la primera resulta falsa. Es
apropiada cuando se dan más de dos casos.
Ejemplo:
hora es menor que 12, por "¡Buenas tardes!" si la hora es menor que 18 y sino por "¡Buenas
noches!"
<!DOCTYPE html>
<html>
<body>
<h1>Saludo</h1>
<p>Cambia "¡Hola!" por "¡Buenos días!" si la hora es menor que 12:00, <Br>
si es menor que 18 cambia "¡Hola!" por "¡Buenas tardes!" sino lo cambia por "¡Buenas noches!" </p>
<script>
var hora = new Date().getHours()
if (hora < 12) {
}
else if (hora < 18) {
document.getElementById("saludo").innerHTML = "¡Buenas tardes!";
}
else {
document.getElementById("saludo").innerHTML = "¡Buenas noches!";
}
</script>
</body>
</html>
Sentencia switch
La sentencia switch compara el valor resultado de evaluar una expresión con varios valores
constantes, si coincide con un valor ejecuta el código asociado hasta encontrar una sentencia
break la cual envía la ejecución después de la llave que cierra el switch. Si no coincide con
ningún valor ejecuta el código asociado a la sentencia default, si esta no existe no ejecuta nada.
En la Sentencia switch la comparación es (===) los valores deben coincidir en valor y tipo.
Sintaxis
switch(expresión) {
case n:
bloque de código
break;
case n:
bloque de código
break;
default:
bloque de código
}
Ejemplo
En el siguiente código la sentencia switch evalua la expresión new Date().getDay() que devuelve
el número del dia de la semana comprendido entre 0 y 6, entonces se asigna a la variable dia el
nombre del día de la semana, siendo que 0 es Domingo, 1 es Lunes, etc.
<!DOCTYPE html>
<html>
<body>
<p id="dia"></p>
<script>
var dia;
switch (new Date().getDay()) {
case 0:
dia = "Domingo";
break;
case 1:
dia = "Lunes";
break;
case 2:
dia = "Martes";
break;
case 3:
dia = "Miércoles";
break;
case 4:
dia = "Jueves";
break;
case 5:
dia = "Viernes";
break;
case 6:
dia = "Sábado";
}
document.getElementById("dia").innerHTML = "Hoy es " + dia;
</script>
</body>
</html>
Sentencias de repetición
Las sentencias de repetición permiten ejecutar un bloque de código varias veces.
Sentencia for
La sentencia for es controlada por una variable o contador que se inicia con un valor y cada vez
que se ejecuta el ciclo se incrementa (o decrementa) hasta llegar a un valor final
Sintaxis:
for (Inicialización; Condición; Variación) {
bloque de código a ser ejecutado
}
Inicialización se asigna a la variable contador un valor

Condición que debe cumplir la variable para que se ejecute el ciclo
Variación incremento o decremento de la variable
El ciclo for es útil para procesar arreglos
Ejemplo
El código siguiente visualiza los días de la semana

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Días de la semana</h2>
<p id="dias"></p>
<script>
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
var text = "";
var i;
/*La primera posición de un arreglo se indexa con 0
dias.length es la cantidad de valores que contiene el arreglo*/
for (i = 0; i < dias.length; i++) {
text += dias[i] + "<br>";
}
document.getElementById("dias").innerHTML = text;
</script>
</body>
</html>
Sentencia for / in
La sentencia for/ in permite recorrer las propiedades de un objeto

Sintaxis:
for( variable in objeto){
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Datos</h2>
<p>Nombre Apellido Edad</p>
<p id="datos"></p>
<script>
var texto = "";
var persona = { nombre: "Pedro", apellido: "Pérez", edad: 25 };
var x;
for (x in persona) {
texto += persona[x] + "---- ";
}
document.getElementById("datos").innerHTML = texto;
</script>
</body>
</html>
Sentencia while
El ciclo while repite un bloque de código siempre que una condición especificada sea verdadera.
Sintaxis
while (condición) {
}
Ejemplo
El siguiente código muestra los dígitos del sistema decimal

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dígitos decimales</h2>
<p id="digitos"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>" + i;
i++; //Si no se incrementa la variable el ciclo no termina
}
document.getElementById("digitos").innerHTML = text;
</script>
</body>
</html>
Sentencia do / while
Este ciclo ejecutará el bloque de código una vez, antes de verificar si la condición es verdadera,
luego repetirá el ciclo siempre que la condición sea verdadera.
Sintaxis
do {
} while (condición);
Ejemplo
El siguiente código muestra los dígitos del sistema decimal
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dígitos decimales</h2>
<p id="digitos"></p>
<script>
var text = "";
var i = 0;
do {
text += "<br>" + i;
i++;
}while (i < 10);
document.getElementById("digitos").innerHTML = text;
</script>
</body>
</html>
Captura del valor de un control input type text

<!DOCTYPE html>
<html>
<head>
<title>javascript - Obtener el valor de un input type=text de varias maneras</title>
<script>
function capturar() {
// obtenemos el valor por el numero de elemento
var porElementos = document.forms["form1"].elements[0].value;
// Obtenemos el valor por el id
var porId = document.getElementById("id").value;
// Obtenemos el valor por el Nombre
var porNombre = document.getElementsByName("nombre")[0].value;
// Obtenemos el valor por el tipo de tag
var porTagName = document.getElementsByTagName("input")[0].value;
// Obtenemos el valor por el nombre de la clase
var porClassName = document.getElementsByClassName("texto")[0].value;
document.getElementById("resultado").innerHTML = " \
Por elementos: "+ porElementos + " \
<br>Por ID: "+ porId + " \
<br>Por Nombre: "+ porNombre + " \
<br>Por TagName: "+ porTagName + " \
<br>Por ClassName: "+ porClassName;
}
</script>
</head>
<body>
<h3>Obtener el valor de un input type=text de varias maneras</h3>
<form id="form1" style="width:250px;height:180px;border:1px solid #ccc;padding:10px">
Nombre:<br><input type="text" name="nombre" value="" id="id" class="texto">
</form>
<input type="button" value="Obtener el nombre" onclick="capturar()">
<div id="resultado"></div>
</body>
</html>
Captura del valor de un grupo de controles input type radio
<!DOCTYPE html>
<html>
<head>
<title>javascript - Obtener el valor de un grupo de controles input type radio </title>
<script>
function valorSeleccionado(grupoRadio) {
var valorRadioSeleccionado;
var opciones = grupoRadio.length;
for (var i = 0; i < opciones; i++) {
if (grupoRadio[i].checked) {
valorRadioSeleccionado = grupoRadio[i].value;
break;
}
}
return valorRadioSeleccionado;
}
function mostrarColor() {
var co;
co = valorSeleccionado(document.getElementsByName("rbColorOjo"));
if (co == undefined) {
window.alert("Seleccione el color de los ojos");
} else {
document.getElementById("mostrar").value = co;
}
}
</script>
</head>
<body>
<form>
<label for="rbColorOjo"> Color de los ojos </label> <br>
<input type="radio" name="rbColorOjo" value="azul" />Azul</br>
<input type="radio" name="rbColorOjo" value="verde" />Verde</br>
<input type="radio" name="rbColorOjo" value="negro" />Negro</br>
<input type="radio" name="rbColorOjo" value="pardo" />Pardo</br>
<input type="radio" name="rbColorOjo" value="gris" />Gris</br>
<input type="radio" name="rbColorOjo" value="otro" />Otro</br></br>
<input type="text" id="mostrar"> </br></br>
<button type="button" onclick="mostrarColor()">Enviar </button>
<input type="reset" name="btnReset" value="Borrar" />
</form>
</body>
</html>
Crear controladores de eventos
El método addEventListener() permite definir la función a ejecutarse cuando se produzca un

evento sobre un objeto
Sintaxis 1:
objeto. addEventListener ("evento", function(){
//Código
});
Ejemplo 1:
En este ejemplo se crea una función que mostrará un mensaje una vez que la página (objeto
window) se ha cargado (evento load)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eventos</title>
</head>
<body>
<script>
window.addEventListener("load", function () {
alert('La página se ha cargado');
});
</script>
</body>
</html>
Ejemplo 2:
En este ejemplo se crea una función que se ejecutará al hacer click en el elemento button (id =
“btnCambiarColor”. La función cambiará el color del elemento p (id = “p1”)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p id="p1">Creando manejadores de eventos</p>
<button id="btnCambiarColor">Cambiar color</button>
<script>
var btnCambiarColor = document.getElementById("btnCambiarColor");
btnCambiarColor.addEventListener("click", function () {
document.getElementById("p1").style.color = "Blue";
});
</script>
</body>
</html>
Sintaxis 2:
objeto. addEventListener ("evento", nombreFuncion);
function nombreFuncion (){
//Código
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p id="p1">Creando manejadores de eventos</p>
<button id="btnCambiarColor">Cambiar color</button>
<script>
var btnCambiarColor = document.getElementById("btnCambiarColor");
btnCambiarColor.addEventListener("click", cambiarColor);
function cambiarColor() {
document.getElementById("p1").style.color = "Blue";
}
</script>
</body>
</html>
La sintaxis de la sentencia para desactivar un menejador de evento es:
objeto.removeEventListener("evento", nombreFuncion);
Obtener propiedades de un evento
Se puede pasar a una función el evento, y obtener las propiedades de dicho evento
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Proiedades de un evento</title>
</head>
<body>
<p id="p1">Propiedades de un evento</p>
<button id="btnProbar">Probar</button>
<script>
var btnProbar= document.getElementById("btnProbar");
btnProbar.addEventListener("click", probar);
function probar(evento) {
alert(evento.type); //Tipo de evento
alert(evento.screenX); //Posición con relación al borde izquierdo donde se hizo click
}
</script>
</body>
</html>
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Proiedades de un evento</title>
</head>
<body>
<p id="p1">Propiedades de un evento</p>
<script>
window.addEventListener("keydown", tecla_presionada);
function tecla_presionada(evento) {
alert(evento.type); //Tipo de evento
alert(evento.keyCode); //Código de la tecla presionada
}
</script>
</body>
</html>
Clases y Objetos
La sintaxis de la sentencia para crear un objeto en Javascript es

var nombreObjeto = new nombreClase();
nombreClase() es la función constructor de la clase.
En el constructor se definen los atributos o propiedades del objeto y los métodos o funciones que
puede ejecutar del objeto.
En Javascript no existe una sentencia para definir una clase, se define directamente la función
constructor
function nombreClase(){
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Objetos JavaScript</title>
</head>
<body>
<h1 id="texto"></h1>
<script>
function Numero(valor){ //El constructor, recibe un número con el parámetro valor
this.numero = valor; //El número recibido se asigna al atributo o propiedad numero
this.par = function(){
if (this.numero % 2 == 0){
this.tipo = " es par";
} else {
this.tipo = " es impar";
}
document.getElementById("texto").innerHTML = "Número: " + this.numero + this.tipo ;
}
}
var numero = new Numero(8); //Crea un objeto de la clase Numero le pasa el número 8
numero.par(); //El objeto numero ejecuta el método par()
</script>
</body>
</html>

Guía JavaScript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guía JavaScript

Cargado por

Copyright:

Formatos disponibles

JavaScript

JavaScript es el lenguaje de programación de HTML y la Web. Permite especificar el

Cambiar el contenido de un elemento

Cambiar el valor de un atributo de un elemento. En este ejemplo cambia el atributo src de

Cambiar el estilo de un elemento HTML

Ocultar o mostrar un elemento

En el siguiente ejemplo el elemento <p> no tiene contenido y se asigna a través de código.

Funciones y eventos de JavaScript

Cree la carpeta Scripts y en ella cree el archivo SCRIPT.JS y transcriba el código

Cree el archivo SCRIPT.HTML y transcriba el código

Se puede hacer referencia a más de un archivo externo.

JavaScript puede "mostrar" datos de diferentes maneras:

• Escribir en un elemento HTML, usando innerHTML.

Ejemplo usando document.write ()

El método document.write() solo se debe utilizar para probar.

Ejemplo usando window.alert()

El navegador antes de mostrar la página muestra una ventana mostrando el resultado de la

Para fines de depuración se puede utilizar el método console.log ().

Al ejecutar la página, se pulsa F12 para activar la depuración y aparece el resultado de la

Un programa de computadora es una lista de "instrucciones" o "declaraciones" para ser

Un programa de JavaScript es una lista de enunciados de programación.

En HTML, los programas de JavaScript son ejecutados por el navegador web.

Las declaraciones de JavaScript se componen de:

Valores, operadores, expresiones, palabras clave y comentarios.

A continuación se describen las palabras claves

Palabra clave Descripción

La sintaxis de JavaScript es el conjunto de reglas, que establecen cómo se construyen los

Las reglas más importantes para escribir valores constantes son:

Los números se escriben con o sin decimales:

En un lenguaje de programación, las variables se usan para almacenar valores de datos.

JavaScript usa la palabra clave var para declarar variables.

Un signo igual se usa para asignar valores a las variables.

En el siguiente ejemplo, x se define como una variable. Entonces, a x se le asigna el valor 6:

El cálculo se llama evaluación.

No todas las declaraciones de JavaScript se "ejecutan".

Los comentarios se ignoran y no se ejecutarán:

Los identificadores son nombres.

En JavaScript, los identificadores se utilizan para nombrar variables, funciones y etiquetas.

JavaScript es Case Sensitive

Todos los identificadores de JavaScript distinguen mayúsculas de minúsculas.

JavaScript no interpreta VAR o Var como la palabra clave var.

Es la manera de unir múltiples palabras en un nombre de variable, función, etc.

primerNombre, tarjetaMaestra, interUrbano

Conjunto de caracteres de JavaScript

JavaScript usa el conjunto de caracteres Unicode.

Operadores aritméticos de JavaScript

Operadores de Asignación de JavaScript

Los operadores de asignación asignan valores a las variables de JavaScript.

Operadores de cadenas de JavaScript

El operador + también se puede usar para agregar (concatenar) cadenas.

Operador (concatenación) Ejemplo Resultado asignado a txt1

Operadores de comparación de JavaScript

Operadores lógicos de JavaScript

Operadores de tipo de JavaScript

Operator Nombre Descripción

Agregar cadenas y números

Expresión Resultado asignado a la variable

Tipos de datos de JavaScript

El operador typeof puede devolver uno de dos tipos complejos:

Arrays (arreglos) de JavaScript

Las matrices de JavaScript están escritas con corchetes.

Los elementos de matriz están separados por comas.

Los objetos de JavaScript están escritos con llaves.

El objeto (persona) en el ejemplo anterior tiene 4 propiedades: nombre, apellido, edad y