Scribd
Cargar
54 vistas

Guía JavaScript

JavaScript es un lenguaje de programación que permite especificar el comportamiento de las páginas web. Permite encontrar y modificar elementos HTML a través de su ID, cambiar contenido, atributos, estilos y mostrar/ocultar elementos. También permite definir funciones y ejecutar código en respuesta a eventos como clics de botón. El código JavaScript se puede incluir directamente en etiquetas <script> o en archivos externos.

Cargado por

JOSE BLASCO
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
54 vistas

Guía JavaScript

JavaScript es un lenguaje de programación que permite especificar el comportamiento de las páginas web. Permite encontrar y modificar elementos HTML a través de su ID, cambiar contenido, atributos, estilos y mostrar/ocultar elementos. También permite definir funciones y ejecutar código en respuesta a eventos como clics de botón. El código JavaScript se puede incluir directamente en etiquetas <script> o en archivos externos.

Cargado por

JOSE BLASCO
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

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>
<h2>¿Que puede hacer JavaScript?</h2>
<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>
<h2>¿Que puede hacer JavaScript?</h2>
<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>
<h2>Salida JavaScript</h2>
<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>
<h2>Salida JavaScript</h2>
<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

Operador Descripción
&& and
|| or
! not

Operadores de tipo de JavaScript

Operador Descripción
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

El siguiente código cambia el contenido del elemento con id ="saludo" por "¡Buenos días!", si la
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>
<p id="saludo">¡Hola!</p>
<script>
if (new Date().getHours() < 12) {
document.getElementById("saludo").innerHTML = "¡Buenos días!";
}
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:
El siguiente código cambia el contenido del elemento con id ="saludo" por "¡Buenos días!", si la
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>
<p id="saludo">¡Hola!</p>
<script>
var hora = new Date().getHours()
if (hora < 12) {
document.getElementById("saludo").innerHTML = "¡Buenos días!";
}
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){
bloque de código a ser ejecutado
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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) {
bloque de código a ser ejecutado
}

Ejemplo

El siguiente código muestra los dígitos del sistema decimal


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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 {
bloque de código a ser ejecutado
} while (condición);
Ejemplo
El siguiente código muestra los dígitos del sistema decimal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="UTF-8">
<title>Eventos</title>
</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>
<meta charset="UTF-8">
<title>Eventos</title>
</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>
<meta charset="UTF-8">
<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>
<meta charset="UTF-8">
<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>
<meta charset="UTF-8">
<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>

También podría gustarte