En esta unidad encontraremos los
conocimientos mínimos para empezar a dominar el JavaScript y
poder seguir profundizando y aprendiendo este lenguaje. La
esperanza es sembrar curiosidad y entusiasmo en seguir
aprendiendo e intercambiando experiencias y conocimientos, que
quizás en un futuro cercano
¿Qué es JavaScript?
Es un lenguaje de programación creado por
Netscape que se basa en la especificación ECMA-262
y, veremos cómo funciona del lado del cliente en un ambiente
Web.
No existe un compilador de
JavaScript, el código fuente está directamente en el documento y
disponible al cargarse la página en donde se encuentra el
código.
Vale decir que cualquier código
que escribamos en un procesador de texto, estará listo para ser
ejecutado.
JavaScript no es un lenguaje
estrictamente tipado. Una variable con un tipo puede ser
asignado con cualquier otro sin que se produzca algún tipo de
error o aviso de una conversión que no corresponde.
Esta característica y el hecho
de que JavaScript no tenga errores de compilación, obligan a una
forma de codeo más prolija y ordenada.
Lenguaje de JavaScript comprende una
amplia variedad de particularidades (guión: secuencia de
instrucciones) para la creación de páginas web dinámicas
Lenguaje interpretado (no se compila)
Basa su sintaxis en C
Múltiples frameworks
El navegador se encarga de interpretar y
ejecutar el código JavaScript
JavaScript NO es Java
Java y Javascript son dos productos distintos.
Ponemos de manifiesto la diferencia entre estos dos lenguajes con
un nombre similar.
Estamos contando diversos asuntos interesantes y curiosidades que
sirven de introducción para el Manual de Javascript y queremos
tratar una de las más típicas asociaciones que se se hacen al oir
hablar de Javascript. Nos referimos a relacionarlo con otro
lenguaje de programación, llamado Java, que no tiene mucho que
ver. Realmente Javascript se llamó así porque Netscape, que estaba
aliado a los creadores de Java en la época, quiso aprovechar el
conocimiento y la percepción que las personas tenían del popular
lenguaje. Con todo, se creó un producto que tenía ciertas
similitudes, como la sintaxis del lenguaje o el nombre. Se hizo
entender que era un hermano pequeño y orientado específicamente
para hacer cosas en las páginas web, pero también se hizo caer a
muchas personas en el error de pensar que son lo mismo.
Queremos que quede claro que Javascript no tiene nada que ver con
Java, salvo en sus orígenes, como se ha podido leer hace unas
líneas. Actualmente son productos totalmente distintos y no
guardan entre si más relación que la sintaxis idéntica y poco más.
Crear visualizaciones más atractivas y
mayor interactividad
Permite gestionar diferencias de
implementación entre los distintos navegadores
jQuery, Mootols, etc.
JSON (Javascript Object Notation) para transmisión de datos
Ajax (Asynchronous JavaScript and XML) se refiere a un grupo de
tecnologías que se utilizan para desarrollar aplicaciones web.
Integración con el objeto Canvas de HTML5 JavaScript en el
servidor (tendencia en auge):
En JavaScript, todo es un Object. La variable,
no importa su tipo, siempre desciende de un Object. Todos los
objetos en JavaScript son dinámicos. Es decir que se le pueden
agregar propiedades o métodos en tiempo de ejecución.
JavaScript ofrece la posibilidad de ser tan
bueno o tan malo, de acuerdo a que tan bien se programe.
¿Qué
es el DOM?
Las páginas Web se basan en una
estructura en árbol. Al cargarse la página, el navegador
representa la estructura del documento en una estructura de
objetos respetando exactamente la misma jerarquía.
Esta estructura de datos puede
ser modificada mediante una API (Application Programming
Interface, Interfaz de Programación de la Aplicación). Esta API
se denomina: DOM (Document Object Model, Modelo de Objeto del
Documento) y no está implementada para un lenguaje de
programación en particular.
Mediante el DOM, se puede
modificar, agregar o remover elementos de nuestro HTML. El
lenguaje de programación "emperador" es JavaScript, considerado
como el lenguje de la Web.
Mediante JavaScript, puede
modificarse el DOM en tiempo real, es decir, agregar, quitar y
modificar elementos y de esta manera cambiar el estilo y el
contenido de la página Web.
Nos enfocaremos en lo siguiente:
JavaScript es el lenguaje de programación
más popular del mundo.
JavaScript es el lenguaje de programación de
la Web.
JavaScript es fácil de aprender.
Sus usos más importantes son los siguientes:
Desarrollo de sitios web del lado del cliente (frontend, en el
navegador)
Desarrollo de todo tipo de aplicaciones gracias a la plataforma
NodeJS
Desarrollo de aplicaciones para dispositivos móviles, híbridas o
que compilan a nativo
Desarrollo de aplicaciones de escritorio para sistemas Windows,
Linux y Mac, pudiendo escribir un código compatible con todas las
plataformas.
El
procedimiento de solicitud/respuesta
En su nivel más básico, el proceso de
solicitud/respuesta consta de una red navegador u otro cliente
solicitando al servidor web que le envíe una página web y el
servidor devolviendo la página. El navegador se encarga entonces
de mostrar o renderizando la página.
Proceso de solicitud / respuesta en el servidor
Para páginas web dinámicas, el procedimiento es un poco más
complicado, porque puede incorporar PHP y MySQL a la mezcla. Por
ejemplo, puede hacer clic una foto de un impermeable. Luego PHP
elaborará una solicitud utilizando el
lenguaje de base de datos estándar, SQL, y envíe la
solicitud al servidor MySQL. El servidor devolverá información
sobre el impermeable que seleccionó y el código PHP.
El código lo envolverá todo en HTML, que el servidor enviará a
su navegador.
JavaScript fue creado para hacer que las páginas
web sean más dinámicas (por ejemplo, cambiar el contenido en un
página directamente desde el interior del navegador).
Originalmente se llamaba LiveScript pero debido a Debido a la
popularidad de Java, pasó a llamarse JavaScript.
Proceso en páginas dinámicas
Insertando
JavaScript en HTML <script>
El código JavaScript se inserta
en el HTML en la etiqueta <script>. Desde aquí, es posible
manejar la lógica y el contenido del documento. Cuando se carga
un documento HTML, el intérprete del navegador al encontrarse
con código JavaScript, lo ejecuta. Cuando este código termina de
ejecutarse, continúa la interpretación del documento HTML hasta
encontrar otra etiqueta <script> y repetir el proceso de
ejecutar el código JavaScript.
Hola Mundo con JavaScript Para
la salutación planetaria, utilizaremos un método de JavaScript
para mostrarlo en la consola de depuración. En cualquier
navegador con una página abierta, al presionar en la tecla
F12 se abre una ventana para depuración de código. Una vez
abierta la ventana, buscamos en ella el botón Consola y le damos
clic para abrir la consola propiamente dicha y ver allí los
mensajes. Para enviar los mensajes, utilizaremos el método:
console.log
Empleando este método, los mensajes solamente
serán visibles en la consola y el usuario no verá ningún tipo de
representación visual del mensaje.
Utilizamos este código (se llamara ejemploJS_1.html):
de la misma manera cuando iniciamos esta pagina
nos presenta lo siguiente:
Y así tenemos por resultado en Chrome
(presionado la tecla F12, y usando la sección de Console):
Colocar el código en el <head> nos asegura
que el mismo estará disponible para cuando se cargue el
<body>. En la imagen anterior puedes desactivar el mensaje
inferior usando la opción Console.
Ejecutando el codigo a partir de una URL.
Otra forma de insertar el código es desde una
URL esto es útil para separar el código de nuestra pagina, lo
usual es que el código este en un archivo separado, desde el
lado del servidor por ejemplo PHP, .Net. Java, En cualquier
caso, se trata de texto plano. Por convención, los archivos
que contienen código JavaScript se guardan con la extensión:
.js
Para mostrar un ejemplo, creamos estos archivos:
ejemploJS_2.js este
estará en el mismo lugar que nuestro código en HTML
console.log("Hola Mundo!");
y en el HTML
ejemploJS_2.html:
src= ya
habíamos conocido antes, hay que hacer notar que cuando se
usa src= esta instrucción debería estar dentro del
<script >
Algunas ventajas muy importantes de utilizar
código externo son:
• Reutilización de código: diferentes documentos
pueden utilizar el mismo código y, además, una vez cargado en el
caché producirá una carga más rápida para todo documento que lo
utilice.
• Fácil manutención: el tener el código en
módulos facilita enormemente la manutención del código y
trabajar de manera independiente diferentes áreas de nuestra
aplicación y tener separadas la presentación de la lógica.
Si se definiera la variable en un archivo .js
directamente dentro de la etiqueta <script>, esta variable
estaría disponible para cualquier otro archivo JS que se cargue
posteriormente. Veamos este ejemplo generando 3 archivos con el
siguiente código:
observemos que en la parte inferior indica que se tomo el
archivo ejemploJS_3_a.js al
ultimo.
Difiriendo la
ejecución de código
La ejecución de un código JavaScript hasta que
la pagina HTML se haya cargado y desplegado por completo, se
puede agregar el siguiente modificador: defer.
<script defer src="hola_mundo.js"
></script>
Para los navegadores que soportan HTML5, esta
opción esta disponible solamente para código que se carga
externamente.
Ahora realizamos lo siguiente, agregando las instrucciones en
<body></body>
en el archivo ejemploJS_4.js
document.write("Ejemplo de JavaScript No. 4 desde la etiqueta body
");
Daremos un pequeño grupo de elementos que se usan en JavaScript,
como cualquier lenguaje de programación es vasto y esta
evolucionando.
Variables
en JavaScript
var: La variable
más utilizada. Se puede reasignar pero solo se puede acceder a él
dentro de una función, es decir, alcance de la función. Las
variables definidas con var se estarán parte superior cuando se
ejecuta el código.
const: no se puede reasignar y no
se puede acceder a ellos antes de que se presenten en el código,
lo que significa alcance del bloque.
let: similar a const con alcance de
bloque, sin embargo, la variable let se puede reasignar pero no
volver a declarar.
Tipos de
datos
Numeros: var edad = 33
Variables: var a
Texto (strings): var a = "CECATI"
Operaciones: var b = 4 + 5 + 6
True o false : var a = true
Numeros Constantes: const PI = 3.14159
Objectos: var fullName = {firstName:"Miguel", lastName:
"Santos"}
Objetos
Este es un ejemplo simple de objetos en JavaScript. Este objeto
describe la variable automóvil e incluye claves o propiedades como
marca, modelo y año son los nombres de propiedad del objeto. Cada
propiedad tiene un valor, como Ford,
Explorer y 2022. Un objeto JavaScript es una colección de
propiedades con valores y funciona como un método.
var car = {
make:"Ford",
model:"Explorer",
year:2022,
};
Operadores
de Comparación
==: Es igual a
===: Es de igual valor y de igual tipo
!=: No es Igual
!==: No es igual valor o no es igual tipo
>: Es mayor que
<: Es menor que
>=: Es mayor o igual a
<=: Es menor o igual a
?: Operador ternario
Operadores
Logicos
&&: Logico AND (Y)
||: Logico OR (O)
!: Logico NOT (NO)
Salida de
datos
alert(): genera datos en un cuadro
de alerta en la ventana del navegador confirmar(): abre un cuadro
de diálogo de sí/no y devuelve verdadero/falso según el clic del
usuario.
console.log(): escribe información
en la consola del navegador. Bueno para depurar.
document.write(): escribe
directamente en el documento HTML.
prompt(): crea un cuadro de diálogo
para la entrada del usuario.
Arreglos
(ARRAY)
Array (Matriz): un objeto que puede contener múltiples valores a
la vez.
concat(): une varios arreglos en
uno.
indexOf(): Devuelve el valor
primitivo del objeto especificado.
join(): combina elementos de una
matriz en una sola cadena y devuelve la cadena.
lastIndexOf(): proporciona la
última posición en la que aparece un elemento determinado en una
matriz.
pop(): elimina el último elemento
de una matriz.
push(): agrega un nuevo elemento al
final.
reverse(): Ordena elementos en
orden descendente.
shift(): elimina el primer elemento
de una matriz.
slice(): extrae una copia de una
parte de una matriz a una nueva matriz
splice(): agrega posiciones y
elementos de una manera específica
toString(): convierte elementos en
cadenas
unshift(): agrega un nuevo elemento
al principio
valueOf(): Devuelve la primera
posición en la que aparece un elemento determinado en una matriz
Bucles
de JavaScript
Bucles: realiza tareas específicas
repetidamente bajo condiciones establecidas.
for (iniciod el ciclo; condicion para el
ciclo; ejecución después del ciclo) {
// lo que realizara durante el ciclo
}
for: crea un bucle condicional
while: establece condiciones bajo las
cuales un bucle se ejecuta al menos una vez, siempre que la
condición especificada se evalúe como verdadera.
do while: similar al ciclo while, se
ejecuta al menos una vez y realiza una verificación al final para
ver si se cumple la condición. Si es así, se ejecuta nuevamente.
break: detener y salir del ciclo en
determinadas condiciones.
continue: omitir partes del ciclo si
se cumplen ciertas condiciones.
Estructura
if-else
Una instrucción if ejecuta el código entre paréntesis siempre
que la condición entre paréntesis sea verdadera. De lo contrario,
se ejecuta una instrucción else opcional.
if (condicion) {
// hacer esto si al condicion es verdadera
} else {
// hacer esto si la condicion es falsa
}
Strings
charAt(): Devuelve un carácter en
una posición especificada dentro de una cadena.
charCodeAt(): Da el Unicode del
carácter en esa posición
concat(): Concatenar (unir) dos o más
cadenas en una
fromCharCode(): devuelve una cadena
creada a partir de la secuencia especificada de unidades de código
UTF-16
indexOf(): proporciona la posición de
la primera aparición de un texto específico dentro de una cadena
lastIndexOf(): Igual que indexOf()
pero con la última aparición, buscando hacia atrás
match(): recupera las coincidencias
de una cadena con un patrón de búsqueda
replace(): busca y reemplaza el texto
especificado en una cadena
search(): ejecuta una búsqueda de un
texto coincidente y devuelve su posición
slice(): extrae una sección de una
cadena y la devuelve como una nueva cadena
split(): divide un objeto de cadena
en una matriz de cadenas en una posición específica
substr(): extrae una subcadena que
depende de un número específico de caracteres, similar a slice()
substring(): no se pueden aceptar
índices negativos, también similar a slice()
toLowerCase(): convierte cadenas a
minúsculas
toUpperCase(): convierte cadenas a
mayúsculas
valueOf(): Devuelve el valor
primitivo (que no tiene propiedades ni métodos) de un objeto de
cadena.
Métodos
numéricos
toExponential(): Devuelve una cadena
con un número redondeado escrito en notación exponencial
toFixed(): Devuelve la cadena de un
número con un número específico de decimales
toPrecision(): Cadena de un número
escrito con una longitud especificada
toString(): Devuelve un número como
una cadena
valueOf(): Devuelve un número como un
número
Métodos
matemáticos
abs(a): devuelve el valor absoluto
(positivo) de a
acos(x): Arcocoseno de x, en radianes
asin(x): arcoseno de x, en radianes
atan(x): Arctangente de x como valor
numérico
atan2(y,x): Arctangente del cociente
de sus argumentos
ceil(a): Valor de a redondeado a su
entero más cercano
cos(a): coseno de a (x está en
radianes)
exp(a): Valor de Ex
floor(a): Valor de a redondeado hacia
abajo a su entero más cercano
log(a): Logaritmo natural (base E) de
a
max(a,b,c…,z): Devuelve el número con
el valor más alto
min(a,b,c…,z): Devuelve el número con
el valor más bajo
pow(a,b): a a la potencia de b
random(): Devuelve un número
aleatorio entre 0 y 1
round(a): Valor de a redondeado a su
entero más cercano
sin(a): Seno de a (a está en
radianes)
sqrt(a): raíz cuadrada de a
tan(a): Tangente de un ángulo
Fechas
date(): crea un nuevo objeto de fecha con la fecha y hora
actuales
date (2022, 6, 22, 4, 22, 11, 0): crea un objeto de fecha
personalizado. Los números representan año, mes, día, hora,
minutos, segundos, milisegundos. Puede omitir cualquier cosa
excepto el año y el mes.
date ("2022-07-29"): declaración de fecha como una cadena
Extraer
valores de fecha y hora
getDate(): Día del mes como número
(1-31)
getDay(): Día de la semana como un
número (0-6)
getFullYear(): Año como número de
cuatro dígitos (aaaa)
getHours(): Hora (0-23)
getMillisegundos(): milisegundos
(0-999)
getMinutes(): Minuto (0-59)
getMonth(): Mes como número (0-11)
getSeconds(): Segundo (0-59)
getTime(): milisegundos desde el 1
de enero de 1970
getUTCDate(): Día (fecha) del mes
en la fecha especificada según la hora universal (también
disponible para día, mes, año completo, horas, minutos, etc.)
parse: analiza una representación
de cadena de una fecha y devuelve el número de milisegundos desde
el 1 de enero de 1970
Establecer
parte de una fecha
setDate(): establece el día como un número (1-31)
setFullYear(): establece el año (opcionalmente mes y día)
setTime(): establece la hora (milisegundos desde el 1 de enero
de 1970)
setUTCDate(): establece el día del mes para una fecha específica
según la hora universal (también disponible para día, mes, año
completo, horas, minutos, etc.)
Modo Dom
Métodos de nodo
appendChild(): agrega un nuevo nodo
secundario a un elemento como último nodo secundario
cloneNode(): clonar un elemento
HTML
compareDocumentPosition(): compara
la posición del documento de dos elementos
getFeature(): devuelve un objeto
que implementa las API de una característica específica
hasAttributes(): devuelve verdadero
si un elemento tiene algún atributo; de lo contrario, falso
hasChildNodes(): devuelve verdadero
si un elemento tiene nodos secundarios; de lo contrario, falso
insertBefore(): inserta un nuevo
nodo secundario antes de un nodo secundario existente especificado
isDefaultNamespace(): devuelve
verdadero si un URI de espacio de nombres especificado es el
predeterminado; en caso contrario, falso
isEqualNode(): comprueba si dos
elementos son iguales
isSameNode(): comprueba si dos
elementos son el mismo nodo
isSupported(): devuelve verdadero
si una característica específica es compatible con el elemento
lookupNamespaceURI(): devuelve el
espacio de nombres URI asociado a un nodo determinado.
normalize(): une nodos de texto
adyacentes y elimina nodos de texto vacíos en un elemento
removeChild(): Elimina un nodo
secundario de un elemento
replaceChild(): reemplaza un nodo
secundario en un elemento
LAS
VARIABLES
JavaScript admite prácticamente cualquier tipo de nombre para
definir una variable, no obstante, hay una serie de
consideraciones que se deben tener presentes:
• El primer carácter debe ser siempre una letra o el guión de
subrayado (_), esto recurda las variables en C/C++. Los restantes
caracteres pueden ser letras, números o el guión de subrayado,
teniendo como precaución no dejar espacios entre ellos.
• El nombre no debe de coincidir con las palabras reservadas.
• JavaScript diferencia entre mayúsculas y minúsculas.
Para declarar variables se utiliza la palabra clave var seguida
del nombre de la variable. Así pues, según lo explicado
anteriormente, las siguientes variables serán reconocidas como
tales por JavaScript.
var nombre;
var Direccion;
var entrada_valor_concreto;
var variable_numero_12;
A continuación, se muestran otras variables que no serán
reconocidas por JavaScript al no cumplir algunas de las reglas de
definición
var 1Dato;
var entrada Datos;
var while;
var new;
Es muy importante este punto, ya que en scripts complejos pueden
producirse errores difíciles de localizar.
Aunque las siguientes variables parezcan iguales, JavaScript las
interpretará como diferentes:
var resultadosuma
var Resultadosuma
var resultadoSuma
var RESULTADOSUMA
var resultado suma
var resultadosumA
Como norma, las comillas simples serán utilizadas dentro
de fragmentos de código delimitados por comillas doble o
viceversa. Veamos unos ejemplos completamente válidos
document.write("Qué quiere decir la palabra 'nuncupatorio' ")
alert(‘Pulsa la tecla "amigo" ‘)
Variables
de cadena (string)
Las variables de cadena (string) de JavaScript deben estar
encerradas en caracteres simples o dobles.
comillas, como esta:
var saludo = "Hola"
var advertencia = 'Ten cuidado'
Puede incluir una comilla simple dentro de una cadena entre
comillas dobles o una comilla doble.
comillas dentro de una cadena entre comillas simples. Pero debes
escapar de una cita del mismo tipo usando el carácter de barra
invertida, así:
var saludo = "\"Hola\" es un saludo"
var advertencia = '\'Ten cuidado\' es una advertencia'
Para leer desde una variable de cadena, puedes asignarla a otra,
así:
newstring = oldstring o puedes usarlo en una función, como esta:
var status = "Todos los sistemas están funcionando"
document.write(status)
Pero, ¿qué pasaría si quisiera incluir en una cadena de texto el
carácter (") ? JavaScript lo interpretaría como final de la cadena
de texto ¿no?
Pues bien, hay una serie de caracteres que permiten representar
funciones especiales, como podría ser un salto de línea en un
texto o, por ejemplo, las comillas. Veamos a continuación una
lista:
\b carácter anterior
\f salto de página
\n salto de línea
\r retorno de carro
\t tabulador
\\ carácter \
\´ comilla simple
\" comilla doble
\XXX Caracteres con codificación latín-1 representados por 3
dígitos en octal.
\xXX Caracteres con codificación latín-1 representados por 2
dígitos en hexadecimal.
\uXXXX Caracteres Unicode especificados por 4 dígitos en
hexadecimal
</head>
<body>
<script>
var cadena1 ="Esto es una cadena de texto que no utiliza ningún
carácter especial";
var cadena2 ="\n\nEsto es una cadena \nde texto que sí utiliza
\ncaracteres especiales";
var cadena3 ="\n Miguel Santos Montoya \r CECATI 89";
alert (cadena1+cadena2+cadena3);
</script>
</body>
</html>
El método alert() muestra un cuadro de alerta con un mensaje y
un botón Aceptar.
El método alert() se utiliza cuando desea que la información
llegue al usuario.
El resultado de esto:
también es funcional si se establece sin el prefijo var, es
para compatibilidad de navegadores, pero se recomienda usar el
prefijo var.
<script>
cadena1 ="Esto es una cadena de texto que no utiliza ningún
carácter especial";
cadena2 ="\n\nEsto es una cadena \nde texto que sí utiliza
\ncaracteres especiales";
cadena3 ="\n Miguel Santos Montoya \r CECATI 89";
alert (cadena1+cadena2+cadena3);
</script>
Observacion importante: La
etiqueta <SCRIPT> tiene un atributo que sirve para indicar
el lenguaje que estamos utilizando, así como la versión de este.
Por ejemplo, podemos indicar que estamos programando en
Javascript 1.2 o Visual Basic Script, que es otro lenguaje para
programar scripts en el navegador cliente que sólo es compatible
con Internet Explorer <script language javascrip1.2>.
El atributo en cuestión es language y lo más habitual es
indicar simplemente el lenguaje con el que se han programado los
scripts. El lenguaje por defecto es Javascript, por lo que si no
utilizamos este atributo, el navegador entenderá que el lenguaje
con el que se está programando es Javascript.
Comentarios
en el código
Un comentario es una parte de código que no es interpretada por
el navegador y cuya utilidad radica en facilitar la lectura al
programador. El programador, a medida que desarrolla el script, va
dejando frases o palabras sueltas, lamadas comentarios, que
le ayudan a él o a cualquier otro a leer mas fácilmente el script
a la hora de modificarlo o depurarlo.
Uno de ellos, la doble barra, sirve para
comentar una línea de código. El otro comentario lo podemos
utilizar para comentar varias líneas y se indica con los signos /
para empezar el comentario y / para terminarlo. Veamos unos
ejemplos.
<SCRIPT>
//Este es un comentario de una línea
/*Este comentario se puede extender
por varias líneas.
Las que quieras*/
</SCRIPT>
VARIABLES
NUMÉRICAS
Las variables numéricas son aquellas que contienen números
enteros o de coma flotante.
Enteros
JavaScript puede utilizar tres bases distintas para números
enteros: la decimal (base 10), la hexadecimal (base 16) y la octal
(base 8). Por defecto el sistema es el decimal
La conversión se realiza de izquierda a derecha. Es decir, el
operando de la derecha será convertido al tipo del operando de la
izquierda.
Veamos un ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta
http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="Ejemplo"
de=" JavaScript">
<meta name="keywords"
content="CECATI","No.=89"," celaya, guanajuato">
<title>Conociendo JavaScript te saludo
desde JS</title>
</head>
<body>
<script>
var valor1 = "50"; //valor de cadena
var valor2 = 10; //valor de entero
var resultado_uno = valor1 + valor2;
var resultado_dos = valor1 - valor2;
alert("Conversión variable numérica a string. \nEl resultado es "
+ resultado_uno);
alert("Conversión variable string a numérica. \nEl resultado es "
+ resultado_dos);
</script>
</body>
</html>
En el script anterior resultado_uno tendrá un
valor de "5010", porque con el operador + JavaScript convierte los
valores numéricos en strings (cadenas) realizando la conversión de
izquierda a derecha. Es decir, el operando de la derecha ( valor2 ) será convertido al tipo de operando
de la izquierda (valor1).
Por el contrario, resultado_dos tendrá un valor
de 40, ya que con otros operadores (por ejemplo el de
sustracción), los valores numéricos no pueden convertirse en
strings.
Resultado
Constantes
Las constantes son las que no cambian, es decir, que siempre
tienen el mismo valor, y se definen por el prefijo const. Por
ejemplo:
Para indicar a JavaScript que se trata de una constante y no de
una variable, debe anteponerse la sentencia const al nombre de la
variable, en caso contrario, el sistema lo trata de una variable.
Una constante no cambia nunca de valor y no puede ser redefinida
en un mismo script.
Las constantes sólo pueden definirse de esta manera para
navegadores Netscape. Si quiere declarar una constante para
trabajar con Explorer, deberá asignar un valor como si de una
variable se tratara.
LOCALIZACIÓN DE LAS VARIABLES
Las variables pueden ser globales y locales según el lugar en
que se hayan definido. Las primeras pueden usarse en cualquier
parte del código, mientras que las segundas sólo pueden hacerlo
dentro de la función que las define. (esto recuerda a las
variables en C++, y otro lenguajes de programación)
Aunque no es obligado, se deben declarar las variables antes de
utilizarlas. Esto se hace utilizando la sentencia var.
Si se intenta utilizar una variable local en un ámbito global,
JavaScript dará un mensaje de error diciendo que la variable
no está definida.
<script>
// Definición de variable global
var variable1="Esta cadena de texto se ha
definido FUERA de una función. Es global llamada variable1";
//Definición de una variable local
function ejemplo()
{
var variable2="Esta cadena de texto se ha
definido DENTRO de una función. Es local llamada variable2";
document.write (variable2);
}
//Impresión en pantalla de la variable global
document.write (variable1+"<BR>");
//Impresión en pantalla de la variable local
ejemplo()
</script>
</body>
</html>
La instruccion : (variable1+"<BR>");
Indica que al presentarse la variable realizara un brinco de
renglón, o sea un reglón nuevo.
El resultado de este script:
Si se intenta utilizar una variable local en un ámbito global,
JavaScript dará un mensaje de error diciendo que la variable no
está definida.
Palabras
Reservadas
Al igual que sucede con todos los lenguajes, JavaScript tiene
una lista de términos reservados que no pueden ser empleados para
nombrar variables, funciones, objetos y métodos.
abstract
boolean
break
byte
case
catch
char
class
const
continue
default
do
double
else
extends
false
final
finally
float
for
function
goto
int
implements
input
in
instanceof
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
val
var
while
with
Palabras reservadas de JavaScript
Los
Operadores
Los operadores permiten combinar diferentes valores en una
expresión. En la seccióno anterior vimos cómo trabajaban las
variables con los datos, ahora veremos cómo manipular dichas
variables asignando si es necesario los resultados a nuevas
variables.
TIPOS DE OPERADORES
Los operadores de JavaScript pueden dividirse en varios grupos.
Su clasificación es meramente funcional y se basa en la operación
que realiza cada operador. Así pues, los grupos son:
Los operadores aritméticos son los encargados de realizar las
operaciones básicas como sumar, restar, multiplicar y dividir.
Veamos en la siguiente relación cuáles son:
Suma (+)
Resta (-)
Multiplicación (*)
División (/)
Módulo (%). Resto de la división.
Incremento, Preincremento, Posincremento (++)
Decremento, Predecremento, Posdecremento (—)
Negación -
<script>
var valor1, valor2, valor3;
var suma, sumaneg, resta, multiplicacion, division,
resto_division, varios;
valor1 = 50;
valor2 = 10;
valor3 = 20;
suma = valor1 + valor2;
sumaneg=-suma;
resta = valor1 - valor2;
multiplicacion = valor1 * valor2;
division = valor1 / valor2;
resto_division = valor1 % valor2;
varios = (valor1 + valor3) * valor2;
document.write ("El resultado de la suma es " + suma +
"<br>");
document.write ("Ahora negamos el valor de la suma " + sumaneg +
"<br>");
document.write ("El resultado de la resta es " + resta +
"<br>");
document.write ("El resultado de la multiplicación es " +
multiplicacion + "<br>");
document.write ("El resultado de la división es " + division +
"<br>");
document.write ("El resto de la división es " +resto_division +
"<br>");
document.write ("El resultado de la variable varios es " + varios
+ "<br>");
</script>
</body>
</html>
Resultado de esto:
Otro tipo de operadores aritméticos muy
utilizados son los increméntales o decrementales que se aplican
antes y después del operando. Su utilización es algo diferente a
la de los operadores clásicos. Veamos a continuación la filosofía
de estos operadores:
variable++ //Devuelve el valor de variable y después incrementa
su valor en uno.
++variable //Aumenta el valor de variable en uno y después
devuelve su valor.
variable-- //Devuelve el valor de variable y después disminuye
su valor en uno.
-variable //Disminuye el valor de variable en uno y
después devuelve su valor.
Veamos a continuación la eficacia de este tipo de operador(son la
misma forma de operar de los preincrementales y postincrementales
en C++
Pesos = Pesos + 1; // Aumenta el valor de
Pesos en 1
Pesos++
// Aumenta el valor de Pesos en 1
Como puede observar, para obtener un resultado idéntico en la
primera línea se ha tenido que escribir más.
Un último operador aritmético es la negación. Su utilización es
de lo más sencilla.
numero=100
numero=-numero
En el ejemplo anterior el valor inicial de la variable numero
que es 100 pasa a ser de -100.
Operadores
Lógicos
Los operadores lógicos o booleanos se emplean para que un programa
tome una decisión en función de un cálculo lógico. Los valores que
se obtienen son true o false, o lo que es lo mismo, verdadero o
falso.
Los operadores son los siguientes:
• Suma lógica (&&)(AND / Y ). Este operador
devuelve un valor true cuando las dos condiciones comparadas se
cumplen. En el supuesto de que una de ellas sea falsa, el
resultado será siempre false. • Producto lógico (II)(OR / O). Este
operador devuelve true siempre que una de las dos condiciones sea
verdadera. En caso contrario devuelve false. • Negación (!)(NOT /
NO). Este operador devuelve siempre el valor contrario, es decir,
si la condición o variable es true devuelve false y viceversa.
La verdadera utilidad de estos operadores se ve al trabajar con
estructuras condicionales, de momento tome como referencia el
siguiente resumen en el que se comparan dos variables con todos
los operadores lógicos.
Operadores
de Comparación
Los operadores de comparación son similares a los lógicos, con
la excepción de que éstos no tienen por qué ser booleanos. Son los
clásicos mayor que, menor que. Veamos a continuación los
operadores disponibles:
• Igualdad (==). Devuelve true si los dos operandos son iguales.
Si alguno de ellos es de diferente tipo, JavaScript lo convierte
para la comparación.
• No Igualdad (!=). Devuelve true si los dos operandos son
diferente. Si alguno de ellos es de diferente tipo, JavaScript lo
convierte para la comparación.
• Igualdad estricta (===). Devuelve true si los 2 operandos son
iguales y del mismo tipo.
•No igualdad estricta (!==). Devuelve true si los dos operandos
no son iguales o del mismo tipo.
•Mayor que (>). Devuelve true si el operando de la izquierda
es mayor que el de la derecha.
• Menor que (<). Devuelve true si el operando de la izquierda
es menor que el de la derecha.
•Mayor o igual que (>=). Devuelve true si el operando de la
izquierda es mayor o igual que el de la derecha.
•Menor o igual que (<=). Devuelve true si el operando de la
izquierda es menor o igual que el de la derecha.
Un operador condicional devuelve un valor determinado en
función del resultado obtenido al evaluar una condición.
(condición) ? valor1 : valor2
Si la condición es verdadera se devuelve valor1 (verdadero). En
caso contrario valor2 (falso). Veamos un ejemplo:
(nombre="Miguel") ? "Me llamo Miguel": "Tú no eres
Miguel";
Según el fragmento de script anterior, si la variable nombre es
Carlos, el resultado es "Me llamo Carlos". En caso contrario el
resultado es "Tú no eres Carlos".
Operadores
de BIT a BIT
El sistema trata de manera interna todos los datos como una
cadena binaria (ceros y unos). Así pues, los números se
representan en sistema binario convirtiendo los caracteres a
código ASCII que, evidentemente, son números que se almacenan en
binario.
•Not (~) Complementa una cadena binaria con virtiendo los 1 en
0 y los 0 en 1.
• Desplazamiento izquierda («) Desplaza los bits a la izquierda
los lugares que se le indique rellenando con ceros por la derecha.
• Desplazamiento derecha (») Desplaza los bits a la derecha los
lugares que se le indique rellenando con ceros por la izquierda.
• AND lógico binario (&) Realiza un AND lógico bit a bit
entre dos valores.
• OR lógico binario (I) Realiza un OR lógico bit a bit entre dos
valores.
• XOR lógico binario (A) Realiza un XOR lógico bit a bit entre
dos valores.
Operadores
de asignación
Se utiliza para asignar un valor a una variable.
• Igualdad (=) Coloca el resultado del operando de la derecha en
la variable de la izquierda del símbolo, valor 1 = valor 2
• Adición(+=) . valor 1 + = valor2
• Sustracción(-=). valor 1 -= valor2
• Multiplicación(*=). valor 1 *= valor2
• División(/=). valor 1 /= valor2
• Módulo(%=). valor 1 %= valor2
• Desplazamiento izquierda («=). x< = y
• Desplazamiento derecha (»=). x <= y
• Desplazamiento derecha sin signo (»>=). x»>= y
• Operador de bits AND (&=). x &= y
• Operador de bits Xor (A=). x A= y
• Operador de bits Or (l=). x I = y
var valor;
valor = 4;
valor «= 1;
La variable valor tiene un valor de 8 porque 4 (0100 en binario)
desplazado hacia la izquierda un bit, es igual a 1000, es decir, 8
en decimal.
Los bits se rellenan con ceros al desplazar.
var valor;
valor = 4;
valor »= 1;
La variable valor tiene un valor igual 1 porque 4 (0100 en
binario) desplazado hacia la derecha un bit, es igual a 0010 en
binario, es decir 2 en decimal.
Operadores
Especiales
En JavaScript son los siguientes:
• delete. Este operador borra un objeto, la propiedad de un
objeto o mi elemento determinado dentro de una matriz.
• in. Este operador devuelve true (verdadero) si la propiedad
especificada está en el objeto especificado.
• instanceof. Operador que devuelve true si el objeto especificado
es del tipo determinado.
• new. Operador que se utiliza para crear una instancia de un
objeto
• this. Palabra clave que se refiere al objeto actual.
• typeof. Operador usado para conocer el tipo de operando (cadena,
método, etc.).
• void. Operador que especifica una expresión que será evaluada
sin devolver ningún valor.
El operador instanceof devuelve true si el objeto especificado
es del tipo especificado.
Su sintaxis es la siguiente:
NombredelObjeto instanceof tipodeobjeto
veamos el siguinte ejemplo con instanceof, que no parece tan
común,
ejemploJS_9.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta
http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta charset="utf-8">
<meta name="description"
content="Ejemplo" de=" JavaScript">
<meta name="keywords"
content="CECATI","No.=89"," celaya, guanajuato">
<title>Conociendo JavaScript te
saludo desde JS</title>
</head>
<body>
<script>
var fecha,fecha2;
fecha=new Date("2023,12,31");
if (fecha instanceof Date)
{
alert("El objeto fecha es del tipo especificado, es
decir,true");
}
fecha2="lunes";
if (fecha2 instanceof Date)
{
alert("El objeto fecha2 es del tipo especificado.");
}
else
{
alert("El objeto fecha2 NO es del tipo especificado, es decir
false ");
}
</script>
</body>
</html>
Resultado:
nos hemos adelantado un poco incluimos la condicional if - else
pero lo retomaremoas mas adelante con mas detalle, y
adicionalmente te sugiero agregar esto a
<script language="JavaScript">
y observa lo que que sucede y enviame tus comentarios sobre
esto.
El
operador typeof
Devuelve una cadena que describe el tipo
de operando. Así pues, podremos saber si el operando es una
cadena, una variable, un método, etc.
ejemploJS_10.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description"
content="Ejemplo" de=" JavaScript">
<meta name="keywords"
content="CECATI","No.=89"," celaya, guanajuato">
<title>Conociendo JavaScript te
saludo desde JS</title>
<title>Conociendo JavaScript te saludo desde
JS</title>
</head>
<body>
<script language--"JavaScript">
var nombre="Pepe";
var valor=1;
var fecha = new Date();
alert("La variable de nombre es de tipo "+(typeof
nombre)+" \nla variable valor es de tipo "+(typeof valor)+" \n y la variable fecha
es "+(typeof fecha));
</script>
</body>
</html>
La utilidad de este operador es evidente, ya que podemos
seleccionar una determinada operación en función del tipo de dato
que se va a utilizar.
El operador
void
El operador void especifica una expresión que si
bien se va a evaluar, no va a devolver ningún valor.
Veamos a continuación un listado con dos ejemplos que emplean el
operador void.
El primero consiste en una suma que si se procesa, pero no genera
ningún resultado. El segundo, un enlace que no va ninguna parte,
pero es tratado como tal por el navegador.
ejemploJS_11.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description"
content="Ejemplo" de=" JavaScript">
<meta name="keywords"
content="CECATI","No.=89"," celaya, guanajuato">
<title>Conociendo JavaScript te
saludo desde JS</title>
</head>
<body>
<script language="JavaScript">
var n1,n2,suma;
var n1=10;
var n2=20;
suma=void(n1+n2);
alert("El resultado de la suma "+suma);
</script>
<font face="Verdana" color="Blue">
<a href="javascript:void(0)">HOLA,
SOY UN ENLACE. PULSA SOBRE MI Y VOY A ......
</a>
</font>
</body>
</html>
Resultado:
Estructuras
Condicionales
Al igual que sucede con la mayoría de lenguajes de programación,
en determinados momentos es necesario controlar el desarrollo del
programa para que éste tome decisiones por nosotros.
JavaScript dispone de los siguientes comandos:
•if
•for
•while
•do while
•switch
La sentencia if
El comando if se emplea cuando es necesario ejecutar un
fragmento de código en función de los valores de determinadas
variables.
La estructura if tiene la siguiente sintaxis:
if (condición)
{
código de programa en caso de que la condición sea verdadera
}
Nunca llame a document.write después de que el documento haya
terminado de cargarse. Sobrescribirá todo el documento.
</head>
<body>
<p>Ejemplo de la condicion if en paginas WEB</p>
<script language="JavaScript">
alert("Ejemplo de la condicion if" );
var valor1,valor2;
valor1 =20;
valor2 = 10;
if ( valor1 >= valor2 ) {
document.write ("El valor1 es más grande que el valor2");
}
else {
document.write("El valor2 es mayor que el valor1 ");
}
</script>
</body>
</html>
Resultado:
Así pues, podríamos diferenciar claramente dos bloques: el
bloque if que ejecuta un código si la condición es verdadera y el
bloque else que hace lo propio pero en caso de que la condición no
sea cierta.
Probemos esto algo diferente a lo que hemos hecho usando if ...
else usaremos un proceso llamado formulario que veremos
posteriormente a detalle pero aquí un ejemplo:
</head>
<body>
<script language="JavaScript">
function hola()
{
if ( document.formulario.nombre.value== "Carlos") {
alert("Buenos días Carlos. Hace rato que te esperaba.");
}
else
{
alert("No te conozco, pero de todos modos, buenos
días.");
}
}
</script>
<form action="" name="formulario">
<font face="Verdana" color="Olive">SELECCIONE UN NOMBRE
;
</font>
el método select se vera con mas detalle
posteriormente, solo mencionare que este método permite crear
una lista desplegable
Resultado:
Como se aprecia la forma de crear formularios con ventanas
desplegables es muy sencillo mas aun que la mayoría de los
lenguajes de programación inclusos que el mismo Java.
Evidencia: cambie el nombre de la función,
los nombres de la opciones y su cantidad
Estructuras
if anidadas
Los bucles if pueden estar formados por muchas
estructuras if, es decir, estructuras if que están colocadas
dentro de otras.
Según los ejemplos anteriores, una sentencia if sólo dispone de
dos opciones, la verdadera y la falsa. No obstante, podemos hacer
que en caso de que la condición sea falsa, el programa pueda
presentar dos opciones mas y así hasta infinitas opciones.
Partiendo de este ejemplo, podemos ir encadenando tantas
sentencias if como sean necesarias,
</head>
<body>
<button onclick="miFuncion()">Prueba
esto con una función </button>
<script language="JavaScript">
function miFuncion() {
let nombre = prompt("Hola, ¿Quién eres, Carlos o Lydia?", "");
if ( nombre == "Carlos") {
alert("Buenos días Carlos. Hace rato
que te esperaba.");
}
else
{
if (nombre == "Lydia") {
alert("Buenos días Lydia. Que tal tus
vacaciones.")
}
else {
alert("No te conozco, pero de todos modos,
buenos días.");
}
}
}
</script>
</body>
</html>
Resultado:
Prueben con el nombre carlos, y con Carlos
Revisando el codigo anterior veremos unas lineas en color verde
que son nuevas instrucciones que serán útiles que explicaremos a
mas detalle, poosteriormente.
<button
onclick="miFuncion()">Prueba esto con una función
</button>
esto crea un botón que
se observa al inicio de la pagina con este metodo es muy secillo
crear botones, y este esta asociado a la funcion miFuncion(),
onclick, es el evento de acción, es decir cuando hagamos click
en ese botón lleva al evento de miFuncion dentro de <script language="JavaScript">
recodemos que tambien es posible poner <script>
y en la siguinte seccion dentro <script>, lo que esta
dentro la declaración de function se realiza cuando el evento
onclick es solicitado.
function miFuncion() {
.......
.......
.......
}
Evidencia: modifique el nombre de la
función y cambie los nombres a comparar
LOS BUCLES for
Y LOS BUCLES for...in
Las estructuras if permiten que un programa tome decisiones,
ahora veamos cómo podemos hacer que una determinada tarea se
repita hasta que se cumpla una condición.
Los bucles for los utilizaremos como contadores. Gracias a ellos
podremos hacer que un proceso se repita un número de veces
determinado.
Para configurar un bucle for se tienen que establecer cuatro
valores:
Valor inicial, Determina el contador inicial del contador
Condición. Comprueba si la condición es verdadera o falsa.
La ejecución. Se ejecutan las instrucciones deseadas.
Actualización. Se actualiza el valor del contador para volver a
ejecutar el paso número 2.
Un bucle for:
for (valor_inicial; condicion;
actualizacion)
{
instrucciones a ejecutar;
}
Para ver de manera clara su funcionamiento, vamos a diseñar un
programa que muestra en pantalla los números del 0 al 10, de uno
en uno.
</head>
<body>
<h3> Ciclo for contado numeros </h3>
<script language="JavaScript">
var contador = 0;
for ( contador; contador<11; contador++
)
{
document.write("Este es el número " + contador +
"<br>");
}
</script>
</body>
</html>
Resultado:
Evidencia: cambie el contador y la
condición
Bucles for...in
Los bucles for...in repiten una variable sobre
todas las propiedades de un objeto. Así, para cada valor de objeto
que se le pasa, se ejecutarán las sentencias del bucle.
Para configurar un bucle for...in se tienen que establecer cuatro
valores:
• Valor inicial. Determina el valor de la
primera propiedad del objeto.
• La ejecución. Se ejecutan las instrucciones deseadas.
• Actualización. Se asigna a una variable el valor de la siguiente
propiedad del objeto. Si no hay más propiedades, se termina el
bucle
estructura básica de un bucle for...in:
for (variable in objeto)
{
sentencias
}
El método open() abre una nueva ventana del
navegador o una nueva pestaña, según la configuración del
navegador y los valores de los parámetros.
window.open(URL, name, specs, replace)
URL Opcional , El URL de la pagina a abrir. Si
no se especifica el URL, una nueva ventana se abrira.
name: Opcional. El atributo de destino o el nombre de la
ventana. Se admiten los siguientes valores:
Valor
Opción
_blank
La URL se carga en una nueva ventana o
pestaña. Este es el valor predeterminado.
_parent
La URL se carga en el marco principal.
_self
La URL reemplaza la página actual.
_top
La URL reemplaza cualquier conjunto de marcos
que se pueda cargar.
name
El nombre de la ventana (no especifica el
título de la ventana)
specs
Opcional.
Una lista de elementos separados por comas, sin espacios en
blanco.
Se admiten los siguientes valores:
fullscreen=yes|no|1|0
Si se muestra o no el navegador en modo de
pantalla completa. El valor predeterminado es no. Una
ventana en modo de pantalla completa también debe estar en
modo cine. Sólo IE
height=pixels
La altura de la ventana. Mín. el valor es 100
left=pixels
La posición izquierda de la ventana. Valores
negativos no permitidos
location=yes|no|1|0
Si mostrar o no el campo de dirección. Sólo
Opera
menubar=yes|no|1|0
Si mostrar o no la barra de menú
resizable=yes|no|1|0
Si se puede cambiar el tamaño de la ventana o
no. Solo IE
scrollbars=yes|no|1|0
Si se muestran o no las barras de
desplazamiento. Sólo IE, Firefox y Opera
status=yes|no|1|0
Si agregar o no una barra de estado
titlebar=yes|no|1|0
Si mostrar o no la barra de título. Se ignora
a menos que la aplicación que llama sea una aplicación HTML
o un cuadro de diálogo confiable
toolbar=yes|no|1|0
Si se muestra o no la barra de herramientas
del navegador. Sólo IE y Firefox
top=pixels
La posición superior de la ventana. Valores
negativos no permitidos
<script languaje="JavaScript">
function recorrer(obj,nombre_objeto) {
var propiedad;
propiedad=window.open("","Ventanapropiedad","scrollbars=yes,width=600,height=600");
propiedad.document.write("<head><title>Mostrando
las propiedades desde una ventana adicional del navegador vea el
titulo de la ventana</title></head>");
propiedad.document.write("<head><title>PROPIEDADES</title></head>");
propiedad.document.write("<font size=-1
color=blue><b>Propiedades Input
Radio</b><br><br>");
El ejemplo anterior recorre todas las
propiedades del objeto radio hasta que se llega a la última. Sólo
entonces se termina la ejecución del bucle.
Resultado de esto:
LOS BUCLES
while
Los bucles do while son muy conocidos en muchos lenguajes de
programación. La misión de un bucle de este tipo es la de colocar
una expresión
condicional después de las instrucciones que deben ejecutarse, de
esta manera, seguro que las instrucciones del bucle son ejecutadas
por lo menos una vez.
en este ejemplo usaremos el ciclo while para autentificación de
una contraseña, solicita la contraseña ejemploJS_17.html:
<script language="JavaScript">
var password;
do {
password = prompt ("Por favor, introduzca la clave de acceso"
,"");
}
while (password != "12345678");
alert("Código de acceso correcto\n fin del bucle? ");
</script>
</body>
</html>
cuando la contraseña es incorrecta
solicita de nueva cuenta la contraseña,
cuando se introduce correctamente la contraseña
La
instrucción break
Permite interrumpir la
ejecución de un bucle for o while aunque éste no haya sido
ejecutado totalmente. Así pues, podemos cancelar la ejecución de
un bucle cuando se cumpla una determinada condición. Modifiquemos
el código anterior, de esta forma, ejemplolJS_18.html
<script language="JavaScript">
var password;
break;
do {
password = prompt ("Por favor, introduzca la clave de acceso"
,"");
}
while (password != "12345678");
alert("Código de acceso correcto\n fin del bucle? ");
</script>
</body>
</html>
el resultado:
La
sentencia switch
Permite a un script evaluar una expresión y
compararla con cada una de las etiquetas asociadas. Cuando se
encuentra una igualdad, el programa evalúa la expresión asociada
con esa etiqueta.
Su sintaxis es la siguiente:
switch (expresión)!
case etiqueta:
sentencia;
break;
case etiqueta2:
sentencia;
break;
default: sentencia;
}
Veamos este ejemplo ejemploJS_19.html
usamos string para la comparación:
var actriz = prompt("Cuál de estas
actrices es la mejor? [Pamela Anderson, Jennifer López,
Catherine Zeta Jones, Demi Moore o Cameron Díaz]");
switch (actriz) {
case "Pamela Anderson":
alert("Tu actriz favorita es Pamela");
break;
case "Jennifer López":
alert("Tu actriz favorita es Jennifer López ");
break;
case "Catherine Zeta Jones":
alert("Tu actriz favorita es Catherine Zeta Jones ");
break;
case "Demi Moore":
alert("Tu actriz favorita es Demi Moore ");
break;
case "Cameron Díaz":
alert("Tu actriz favorita o Cameron Díaz ");
break;
default:
alert("No coincide ningún valor con las \netiquetas case
programadas.\nPruébelo otra vez.");
}
</script>
</body>
</html>
en el caso de asignar numeros desde prompt ejemploJS_19a.html
let actriz = prompt("Cuál de estas actrices es la mejor? [ 1
Pamela Anderson, 2 Jennifer López, 3 Catherine Zeta Jones, 4
Demi Moore 5 Cameron Díaz]");
switch (actriz) {
case "1":
alert("Tu actriz favorita es Pamela");
break;
case "2":
alert("Tu actriz favorita es Jennifer López ");
break;
case "3":
alert("Tu actriz favorita es Catherine Zeta Jones ");
break;
case "4":
alert("Tu actriz favorita es Demi Moore ");
break;
case "5":
alert("Tu actriz favorita o Cameron Díaz ");
break;
default:
alert("No coincide ningún valor con los \nnúmeros case
programadas.\nPruébelo otra vez.");
}
</script>
</body>
</html>
Usaremos algunas funciones especieles de JavaScript
new Date() ... por default, JavaScript usara el navegador para
mostrar la fecha, tomando fecha actual.
getDay() ... es eun metodo que regresa el dia de
la semana (0 to 6). ejemploJS_19b.html
<script>
let dia;
switch (new Date().getDay()) {
case 0:
dia = "Domingo";
break;
case 1:
dia = "Lunes";
break;
case 2:
dia = "Martes";
break;
case 3:
dia = "Miercoles";
break;
case 4:
dia = "Jueves";
break;
case 5:
dia = "Viernes";
break;
case 6:
dia = "Sabado";
}
document.write("Este es dia " + dia + "<br>");
</script>
</body>
</html>
VENTANAS
DE CONFIRMACIÓN
En el siguiente script se define una función con una estructura
condicional if/else junto con la función confirm.
<script>
function confirma_alerta()
{
if (confirm("Mensaje de
confirmación.\r¿Estas de acuerdo?"))
{
alert ("Muy bien, has pulsado
ACEPTAR");
}
else
{
alert ("OK. Has pulsado CANCELAR");
}
}
</script>
<form>
<p>Ventana de alerta con confirmación.<br>
<input type="button" value="Pulsa aquí"
onClick="confirma_alerta()">
</form>
</body>
</html>
Cuando selecciones Aceptar
para el caso de cancelar
Hasta ahora, las ventanas de alerta que hemos
visto se limitaban a mostrar una ventana de diálogo con un texto y
un botón Aceptar.
Si en una estructura condicional if/else se
especifica la instrucción confirm y se añaden las correspondientes
opciones al condicional, podemos hacer que a través de dicha
ventana de diálogo el usuario pueda tomar decisiones de
manera directa.
Objetos
Funciones y Métodos
Los objetos, las funciones y los métodos van a permitir
realizar tareas mucho más sorprendentes de las que realmente se
han visto hasta ahora.
Veremos los fundamentos de la programación orientada a objetos,
que consiste en agrupar conceptos relacionados entre sí. Así pues,
vamos a ver qué fácil es trabajar con los objetos, funciones y
métodos en JavaScript.
LOS OBJETOS
Un objeto es una agrupación de variables
denominadas propiedades que realizan operaciones con las variables
propias del mismo, es decir, un conjunto de datos definidos por el
usuario junto con las operaciones que actúan sobre ellos.
Busquemos como ejemplo un símil del mundo real para entender mejor
el concepto: un ordenador. Sus propiedades serían su procesador,
disco duro, memoria, etc., y además, con él podemos jugar,
estudiar o dibujar, por ejemplo.
Así pues, podemos definir un grupo de datos
determinado sobre los que actuarán unas determinadas funciones u
operaciones.
En JavaScript podemos crear nuestros propios
objetos o utilizar los implementados por el lenguaje.
Propiedades de un objeto
Un objeto en JavaScript tiene una serie de propiedades asociadas a
él. Para acceder a dichas propiedades utilizaremos la notación del
punto
objeto.propiedad
Veamos un ejemplo para entender el funcionamiento de los
objetos.
Imaginemos un objeto llamado mipc,
con las propiedades marca, cpu y memoria'.
mipc.marca = "HP";
mipc.cpu = "Pentium-lll";
mipc.memoria = "256Mb";
Según el ejemplo, para acceder a las distintas
propiedades del objeto deberemos indicar el nombre de dicho objeto
y el nombre de la propiedad, ambos separados por un punto.
LAS FUNCIONES
Las funciones son uno de los pilares en los que se basa
JavaScript.
Podríamos definir una función como un conjunto de sentencias
JavaScript que realizan alguna tarea específica. Las partes que
definen una función
son:
• El nombre de la función.
• La lista de argumentos de la función, encerrados entre
paréntesis y separados por comas (",")
• Las sentencias en JavaScript que definen la función, encerradas
entre llaves ("{ }")
Para que una función devuelva el resultado de una serie de
operaciones procedentes de la misma función, utilizaremos la
instrucción return.
<body>
<script language="JavaScript">
function Mensaje(Respuesta)
{
if (Respuesta == 0)
alert ("Vaya disparate. Repasa el Capítulo 2");
if (Respuesta == 1)
alert
("La respuesta es correcta");
if (Respuesta == 2)
alert ("casi, casi....");
if (Respuesta >= 3)
alert("Buff... ¿Que tal si lo dejamos por hoy?");
}
</script>
<!--se define y declara la funcion -->
<font face="Verdana" size="6" color="Olive">¿JavaScript es
una versión simplificada de Java?<br></br>
<font color="Teal">
<input type="radio" name="radio" onclick="Mensaje(0);">
Si, por eso tiene la raiz "script"<br>
<input type="radio" name="radio" onclick="Mensaje(1);">
No, es un lenguaje de programación creado por Netscape <br>
<input type="radio" name="radio" onclick="Mensaje(2);">
No, es al revés. <br>
<input type="radio" name="radio" onclick="Mensaje(3);">
No, Javascript es el nombre de un navegador de internet<br>
</body>
</html>
Resultado:
por cada botón activado en orden es:
La etiqueta <input> especifica un campo de entrada donde
el usuario puede ingresar datos, es el metodo mas importante de
HTML - Java-Script y mas complejo.
El elemento <input> es el elemento de formulario más
importante.
El elemento <input> se puede mostrar de varias formas, según
el atributo de tipo.
Los diferentes tipos de entrada son los siguientes:
La palabra reservada this se utiliza para hacer referencia al
objeto actual. La usaremos generalmente cuando pasamos objetos
como parámetros a funciones y dentro de éstas para acceder a las
propiedades de los objetos. (esto recuerda al lenguaje C++)
Un ejemplo. Definamos una función llamada (pc)
con tres propiedades: marca, cpu y memoria.
A continuación, crearemos un objeto para ese tipo, al que
llamaremos mipc, y le asignaremos valores específicos a sus
propiedades.
mipc = new pc ("HPB,"Pentium-lll",
"256Mb")
Recuerde que pueden crearse tantas instancias de un tipo como
sean necesarias.
mipc = new pc ("HP","Pentium-lll", "256Mb")
mipc2 = new pc ("Philips","AMD-K7", "198Mb")
mipc3 = new pc ("Acer","Pentium133", "16Mb")
Ahora podríamos mostrar en pantalla las propiedades de los
objetos definidos ("instanciados como se conoce en C++")
<body>
<script language="JavaScript">
function pc(marca,cpu,memoria)
{
this.marca = marca;
this.cpu = cpu;
this.memoria = memoria;
}
mipc1 = new pc ("HP","Pentium-III", "256Mb")
mipc2 = new pc ("Philips","AMD-K7","198Mb")
mipc3 = new pc ("Acer","Pentium133", "16Mb")
var mensaje;
</script>
<font face="Verdana" size="5" color="Olive"> Seleccione un
objeto, haga clic en botón del lado izquierdo:
<br></br>
<font color="Teal">
<input type="radio" name="1"
onclick='alert("mipc1 marca: " + mipc1.marca + "\n" + "cpu: " +
mipc1.cpu + "\n" + "memoria: " + mipc1.memoria + "\n");'>
Propiedades de mipc1 <br>
Permite aplicar a un método en
el contexto de un objeto diferente. Podemos asignar un objeto
this diferente cuando llamemos a una función existente (this se
refiere al objeto actual). Así pues, con apply() podemos
escribir un método una sola vez y heredarlo en otro objeto sin
necesidad de tener que reescribir el método como un objeto
nuevo.
apply(this, argumentomatriz)
apply() es similar al método call() salvo en el
tipo de argumentos que soporta. Podemos utilizar los argumentos de
una matriz en vez de nombrar uno a uno los parámetros de la misma.
De este modo podemos obtener todos los valores de un objeto con
sólo llamarlo.
el resultado de esto en la pagina y en la consola usando F12 :
El método
call()
La sintaxis es la siguiente:
call(this, arg1, arg2,...)
call permite ejecutar un método en el contexto
de otro diferente.
Imaginemos el proceso de ensamblaje de un
ordenador para demostrar el funcionamiento del método call().
Disponemos de dos líneas de montaje, la interior y la exterior.
Cada línea de montaje tiene asignado el ensamblaje de determinados
elementos del ordenador. Así pues, a la línea interior le vamos a
asignar el procesador (string), la velocidad del mismo (number) y
la tarjeta de módem (boolean).
Así pues, la aplicación de las dos funciones vistas hasta ahora
sería la siguiente:
//definicion de la funcion interior
function interior(procesador, velocidad,
modem)
{
this.procesador = procesador;
this.velocidad = velocidad;
this.modem= opciomodem;
}
//definicion de la funcion exterior
function exterior(caja, complementos, llave)
{
this.caja = caja;
this. complementos = complementos;
this.llave=llave;
}
pcinterior = new interior(“AMD-K6”, 400, true);
pcexterior = new exterior(“semitorre”, 2, false);
podemos combinar los dos objetos (pcinterior y
pcexterior) en uno solo llamado pc
con las mismas propiedades. Con el método call() podemos realizar
una llamada a la función exterior() desde la función interior().
Evidentemente, habrá que añadir a los valores de la función
interior() los de la función exterior().
function interior(procesador,
velocidad, modem, caja,
complementos, llave)
{
this.procesador = procesador;
this.velocidad = velocidad;
this.modem= modem;
exterior.call(this.caja, complementos, llave);
}
pc = new interior(“AMD-K6”, 400, true,
“semitorre”, 2, false);
Este método puede emplearse con dos objetos distintos.
En el objeto document, el método permite cerrar
la corriente de un documento mostrando en pantalla toda la
información del documento que se tiene. Es similar a la pulsación
del botón detener en el navegador.
documente.close();
En el objeto window, el método cierra la ventana actual o la
ventana que efectúa la llamada.
window.close();
focus() y
blur()
El método focus()
Este método permite seleccionar el objeto que lo llama, dando
control al cursor.
Hace referencia a un objeto de tipo password, select, text o
textarea.
Vamos a hablar ahora de cómo dotar de estilos a
los links en CSS. Para ello es necesario referirnos a algunas
pseudoclases que son las que permiten hacer esto.
A la hora de aplicar estas pseudoclases es
importante el orden en que se aplican, ya que si no se hace
correctamente se pueden anular estilos definidos. CSS define otra
serie de selectores denominados pseudoelementos que van precedidos
de : y cuya función es análoga a la de las pseudoclases.
Pseudoclase
Aplicable a
Significado
:link
Los links
Se usa para definir estilos para links
que no han sido pinchados por el usuario, aunque si no
está en el orden adecuado puede sobreescribir otros
estilos de links
:visited
Sólo links que ya han sido pinchados por
el usuario
Se usa para definir estilos para links
que han sido pinchados por el usuario y así distinguirlos
de los no pinchados
:focus
Cualquier elemento que tiene el foco por
estar seleccionado con el ratón o por uso del tabulador
Se usa para definir estilos para
elementos que tienen el foco. Un link puede tener el foco.
:hover
Cualquier elemento que tiene el puntero
del ratón encima de él
Se usa para definir estilos específicos
para elementos por los que el usuario pasa el ratón por
encima, aún sin pinchar en ellos
:active
Cualquier elemento en el momento de ser
activado
Se usar para definir estilos específicos
para links <a> o botones <button> en el justo
momento en que son pulsados.
Podríamos pensar que los links sobre los que se situara el ratón
se mostrarían naranjas, pero no va a ser así. Se mostrarán azules
porque a:link sobreescribe lo definido en a:hover porque :link
afecta a todos los links (incluso los que tienen el ratón encima
de ellos) mientras que :hover sólo afecta a determinados links.
Por ello si situamos :link después de :hover estaremos anulando lo
definido en :hover.
Para evitar esto se usa una regla mnemotécnica: LVHA
(link-visited, hover, active) es conveniente recordar y aplicar
este orden para evitar sobreescribir indebidamente. Podemos usar
una frase como “Llegamos vivos hasta amanecer” o “Luego vuelvo
hasta allí para acordarnos de este orden.
La pseudoclase :focus se suele colocar justo antes de :hover.
El método getElementById()
de la interfaz document devuelve un
objeto Element que representa el elemento cuya propiedad id
coincide con la cadena especificada. Dado que los ID de elementos
deben ser únicos si se especifican, son una forma útil de obtener
acceso rápido a un elemento específico.
Si necesita acceder a un elemento que no tiene un ID, puede usar
querySelector() para encontrar el elemento usando cualquier
selector.
document.getElementById("mi_enlace").focus();
El método blur()
Quita el focus (cursor) del objeto que lo llama. Hace referencia
a un objeto de tipo password, select, text o textarea.
El método
select()
Permite selecionar al elemento que lo llama. Este método lo
aplicamos en el ejemploJS_13.html
Puede ser un objeto password, select, text o textarea.
El usuario selecciona un campo del elemento de un formulario.
El evento select se genera cuando el usuario selecciona algún
texto o hace una selección en el cuadro de selección.
Casi todos los elementos de un formulario tienen
uno o más gestores de eventos. Los botones pueden generar eventos
click, el texto y la selección de elementos pueden generar los
eventos focus, blur, select y change.
Hay dos excepciones a la regla que todos los
elementos de un formulario pueden tener gestores de eventos. La
primera excepción se aplica a los items ocultos, <INPUT TYPE=
"hidden">. No se ven, no se pueden cambiar y no pueden generar
eventos. La segunda se aplica a los elementos individuales OPTION
dentro de una lista de selección (que se crean con la opción
SELECT). La TAG SELECT puede tener atributos declarando gestores
de eventos (focus, blur y change), pero las OPTION no pueden
generar eventos.
NaN
En JavaScript, NaN es la abreviatura de "Not-a-Number".
En JavaScript, NaN es un número que no es un número legal.
La propiedad Global NaN es la misma que la propiedad Number.Nan.
Un valor representando un Not-A-Number (No es Un Número).
Descripción
El acrónimo NaN es un valor especial de Javascript que significa
literalmente Not A Number (No es un número). Sin embargo, no hay
que dejarse llevar por su significado literal, ya que nos podría
dar lugar a malentendidos. El valor NaN, a pesar de su
significado, se usa para representar valores numéricos (y ahora es
donde viene el matiz) que son indeterminados o imposibles de
representar como número.
Dentro de esa categoría hay varios:
Indeterminación matemática: Por ejemplo, 0 / 0.
Valores imposibles: Por ejemplo, 4 - 'a', ya que es imposible
restar una letra a un número.
Operaciones con NaN: Por ejemplo, NaN + 4, ya que el primer
operando es NaN.
Uno de los más frecuentes es el segundo, ya que
Javascript es un lenguaje flexible que no requiere tipos. Eso,
unido a que la mayoría de datos que extraemos de una página web se
obtienen, da como resultado operaciones de ese tipo, o
concatenaciones inesperadas.
Por aquí puedes encontrar las propiedades y métodos relacionados
con NaN que existen:
Propiedad o Método
Descripción
Number.NaN
Es equivalente a NaN. Valor que no puede
representarse como número.
Number.isNaN(number)
Comprueba si number no es un número.
Observa que aunque NaN es un valor global,
también existe un Number.NaN como propiedad de Number, para
tenerlo modularizado y encapsulado como propiedad estática en el
objeto Number.
Todos los NaN son diferentes
Como hemos dicho, el valor NaN se utiliza para intentar
representar un valor que no se puede representar. Sin embargo, no
podemos compararlo literalmente con NaN, sino que tenemos que usar
la función Number.isNaN():
JS
NaN == NaN; //
false (El valor no es el mismo)
NaN === NaN; // false
(Ni el valor, ni el tipo de dato es el mismo)
Number.isNaN(NaN); // true (Forma correcta de comprobarlo)
Number.isNaN(5); // false (5 es un número, no
es un NaN)
Number.isNaN("A"); // false ("A" es un string, no es un
NaN)
Recuerda que aunque desafortunadamente, NaN significa Not A Number
(no es un número), pero NaN sí que es un valor numérico, lo que
ocurre es que ese valor no es representable de forma numérica:
JS
const number = NaN;
typeof
number;
// "number"
number.constructor.name; // "Number"
Conversiones de valores NaN
Si intentamos convertir un valor NaN a otro tipo de dato
primitivo utilizando un typecast (forzar conversión explícita),
nos encontraremos lo siguiente:
JS
Boolean(NaN); // false (convertimos a booleano)
String(NaN); // "NaN" (convertimos a texto)
Number(NaN); // NaN (Ya estaba en contexto
numérico)
(1) https://developer.mozilla.org/es/docs/Web/HTML
(2)El gran libro de HTML5, CSS3 y Javascript Juan Diego Gauchat
(3) https://dinahosting.com/blog/que-es-utf-8/
(4) https://openwebinars.net/blog/que-es-css3/
(5)
https://www.freecodecamp.org/espanol/news/hojas-de-estilo-css-externas-como-vincular-css-a-html-e-importar-a-head/
https://www.w3schools.com/html/default.asp
Libro: HTML5 & CSS3 for real world Alexis Goldstein
https://lenguajehtml.com/html/
https://lenguajejs.com/javascript/number/que-es-nan/
observemos que en la parte inferior indica que se tomo el
archivo ejemploJS_3_a.js al
ultimo.
