DESARROLLO DE

SOFTWARE 3
JavaScript
Implementando
JavaScript
Introducción

 JavaScript es un lenguaje de programación que se usa para procesar información y

manipular documentos.

 Al igual que cualquier otro lenguaje de programación, JavaScript provee instrucciones que
se ejecutan de forma secuencial para indicarle al sistema lo que queremos que haga
(realizar una operación aritmética, asignar un nuevo valor a un elemento, entre otros).

 Cuando el navegador encuentra este tipo de código en nuestro documento, ejecuta las
instrucciones al momento y cualquier cambio realizado en el documento se muestra en
pantalla.
Implementando JavaScript

 Siguiendo el mismo enfoque que CSS, el código JavaScript se puede incorporar al

documento mediante tres técnicas diferentes:

1. El código se puede insertar en un elemento por medio de atributos (En línea)

2. Incorporar al documento como contenido del elemento <script>

3. Cargar desde un archivo externo.

 Implementando JavaScript

 La técnica En línea aprovecha

atributos especiales que describen un
evento, como un clic del ratón. Para
lograr que un elemento responda a
un evento usando esta técnica, todo
lo que tenemos que hacer es agregar
el atributo correspondiente con el
código que queremos que se ejecute.
Implementando JavaScript
Implementando JavaScript

El atributo onclick es parte de varios atributos provistos por HTML para responder a
eventos. Por ejemplo, los siguientes son los atributos más usados asociados con el ratón.

 onclick—Este atributo responde al evento click. El evento se ejecuta cuando el usuario

hace clic con el botón izquierdo del ratón. HTML ofrece otros dos atributos similares
llamados ondblclick (el usuario hace doble clic con el botón izquierdo del ratón) y
oncontextmenu (el usuario hace clic con el botón derecho del ratón).

 onmousedown—Este atributo responde al evento mousedown. Este evento se

desencadena cuando el usuario pulsa el botón izquierdo o el botón derecho del ratón.
Implementando JavaScript

 onmouseup—Este atributo responde al evento mouseup. El evento se

desencadena cuando el usuario libera el botón izquierdo del ratón.

 onmouseenter—Este atributo responde al evento mouseenter. Este evento se

desencadena cuando el ratón se introduce en el área ocupada por el elemento.

 onmouseleave—Este atributo responde al evento mouseleave. Este evento se

desencadena cuando el ratón abandona el área ocupada por el elemento.

 onmouseover—Este atributo responde al evento mouseover. Este evento se

desencadena cuando el ratón se mueve sobre el elemento o cualquiera de sus
elementos hijos.
Implementando JavaScript

 onmouseout—Este atributo responde al evento mouseout. El evento se

desencadena cuando el ratón abandona el área ocupada por el elemento o
cualquiera de sus elementos hijos.

 onmousemove—Este atributo responde al evento mousemove. Este evento se

desencadena cada vez que el ratón se encuentra sobre el elemento y se mueve.

 onwheel—Este atributo responde al evento wheel. Este evento se desencadena

cada vez que se hace girar la rueda del ratón.
Implementando JavaScript

 Los siguientes son los atributos disponibles para responder a eventos generados
por el teclado. Estos tipos de atributos se aplican a elementos que aceptan una
entrada del usuario, como los elementos <input> y <textarea>.

 onkeypress—Este atributo responde al evento keypress. Este evento se

desencadena cuando se activa el elemento y se pulsa una tecla.

 onkeydown—Este atributo responde al evento keydown. Este evento se

desencadena cuando se activa el elemento y se pulsa una tecla.
Implementando JavaScript

 onkeyup—Este atributo responde al evento keyup. Este evento se desencadena

cuando se activa el elemento y se libera una tecla.

También contamos con otros dos atributos importantes asociados al documento:

 onload—Este atributo responde al evento load. El evento se desencadena

cuando un recurso termina de cargarse.

 onunload—Este atributo responde al evento unload. Este evento se

desencadena cuando un recurso termina de cargarse.
Implementando JavaScript

 Debido a que en un elemento pueden ocurrir varios eventos en algunos casos al

mismo tiempo, podemos declarar más de un atributo por cada elemento.

 Por ejemplo, el siguiente documento incluye un elemento <p> con dos atributos,
onclick y onmouseout, que incluyen sus propios códigos JavaScript.

 Si el usuario hace clic en el elemento, se muestra una ventana emergente con el

mensaje «Hizo clic!», pero si el usuario mueve el ratón fuera del área ocupada
por el elemento, se muestra una ventana emergente diferente con el mensaje
«No me abandone!».
Implementando JavaScript
 Implementando JavaScript

 Los eventos no solo los produce el

usuario, sino también el navegador. Un
evento útil desencadenado por el
navegador es load. Este evento se
desencadena cuando se ha terminado de
cargar un recurso y, por lo tanto, se utiliza
frecuentemente para ejecutar código
JavaScript después de que el navegador
ha cargado el documento y su contenido.
Implementando JavaScript

 Para trabajar con códigos extensos y

personalizar las funciones, tenemos
que agrupar el código con el elemento
<script>. El elemento <script> actúa
igual que el elemento <style> para
CSS, organizando el código en un solo
lugar y afectando al resto de los
elementos en el documento usando
referencias.
Implementando JavaScript

 Introducir JavaScript en el documento con el elemento <script> puede resultar

práctico cuando tenemos un grupo pequeño de instrucciones. Si usamos el mismo
código en más de un documento, tendremos que mantener diferentes versiones
del mismo programa.

 Una alternativa es introducir el código JavaScript en un archivo externo y luego

cargarlo desde los documentos que lo requieren. De esta manera, solo los
documentos que necesitan y el navegador tendrán que descargar el archivo una
sola vez.
Para este propósito, el elemento <script> incluye el atributo src. Con este atributo,
podemos declarar la ruta al archivo JavaScript y escribir todo nuestro código dentro de este
archivo.
Variables
Variables

 El lenguaje puede realizar numerosas tareas, desde calcular algoritmos

complejos hasta procesar el contenido de un documento. Cada una de estas
tareas involucra la manipulación de valores, y esta es la razón por la que la
característica más importante de JavaScript, al igual que cualquier otro lenguaje
de programación, es la capacidad de almacenar datos en memoria.

 Las variables son simplemente nombres asignados a una celda o un grupo de

celdas donde se van a almacenar los datos.
Variables

 Las variables en JavaScript se declaran con la palabra clave var seguida del nombre
que queremos asignarle. Si queremos almacenar un valor en el espacio de memoria
asignado por el sistema a la variable, tenemos que incluir el carácter = (igual)
seguido del valor, como en el siguiente ejemplo.

• Después de asignar el valor a la variable, cada vez que se referencia esta variable
(se usa el nombre minumero), el sistema lee la memoria y devuelve el número 2
Variables

 Las instrucciones en un programa JavaScript las ejecuta el navegador una por una en
secuencia.

 Las variables se denominan así porque sus valores no son constantes. Podemos cambiar sus
valores cada vez que lo necesitemos, y esa es, de hecho, su característica más importante.
Variables

 Asignación de valores a otras variables  Ejecutar una operación y asignar el

resultado de vuelta a la misma variable

 Para comentarios podemos usar las siguientes Expresiones

 // comentario de una sola línea
 /* comentario de múltiples líneas */
Variables

 Las operaciones aritméticas se ejecutan siguiendo un orden de prioridad

determinado por los operadores. La multiplicación y la división tienen prioridad
sobre la adición y la substracción. Esto significa que las multiplicaciones y
divisiones se calcularán antes que las sumas y restas.
Variables

 Realizar una operación en el valor actual de una variable y asignar el resultado de

vuelta a la misma variable es muy común en programación. JavaScript ofrece los
siguientes operadores para simplificar esta tarea.
 ++ es una abreviatura de la operación variable = variable + 1.
 -- es una abreviatura de la operación variable = variable - 1.
 += es una abreviatura de la operación variable = variable + number.
 -= es una abreviatura de la operación variable = variable - number.
 *= es una abreviatura de la operación variable = variable * number.
 /= es una abreviatura de la operación variable = variable / number.
 Variables

 El operador ++ suma el valor 1 al valor  El operador +=5 suma 5 al valor

actual de la variable cada vez que se actual de la variable
ejecuta la instrucción.

 Devuelve el residuo de la división

Cadenas de Texto
Cadenas de texto

 Para asignar texto a una variable, tenemos que declararlo entre comillas simples
o dobles.

 El texto se puede concatenar con el operador +..

 Si en lugar de texto intentamos concatenar una cadena de caracteres con un

número, el número se convierte en una cadena de caracteres y se agrega al valor
actual. El siguiente código produce la cadena de caracteres "El número es 3".
Cadenas de texto

 Las cadenas de caracteres pueden contener cualquier carácter que queramos, y

esto incluye comillas simples o dobles.

 JavaScript ofrece varios caracteres de escape con diferentes propósitos. Los que
se utilizan con más frecuencia son \n para generar una nueva línea y \r para
devolver el cursor al comienzo de la línea.
Booleanos
Cadenas de texto

 Otro tipo de valores que podemos almacenar en variables son los booleanos. Las
variables booleanas pueden contener solo dos valores: true (verdadero) o false
(falso).
Arrays
Arrays

 Las variables también pueden almacenar

varios valores al mismo tiempo en una
estructura llamada array. Los arrays se
pueden crear usando una sintaxis simple
que incluye los valores separados por
comas dentro de corchetes. Los valores
se identifican luego mediante un índice,
comenzando desde 0 (cero).
Arrays

 La función alert() puede

mostrar no solo valores
independientes, sino arrays
completos.

 Si queremos ver todos los

valores incluidos en el array,
solo tenemos que especificar
el nombre del array.
Arrays

 Los arrays, al igual que cualquier otra variable, pueden contener cualquier tipo de
valor que deseemos. Por ejemplo, podemos crear un array combinando números
y cadenas de caracteres.
Arrays

 Si intentamos leer un valor en un índice que aún no se ha definido, JavaScript

devuelve el valor undefined (indefinido) Este valor lo usa el sistema para informar
de que el valor que estamos intentando acceder no existe, pero también podemos
asignarlo a un array cuando aún no contamos con el valor para esa posición.
Arrays

 Otra manera mejor de indicarle al sistema que no existe un valor disponible en un

momento para un índice del array es usando otro valor especial llamado null
(nulo). La diferencia entre los valores undefined y null es que undefined indica que
la variable fue declarada pero ningún valor le fue asignado, mientras que null indica
que existe un valor, pero es nulo.
Arrays

 Por supuesto, también podemos realizar operaciones en los valores de un array y

almacenar los resultados, como hemos hecho antes con variables sencillas.
 Arrays

 Los arrays pueden incluir cualquier tipo de valores, por lo que es posible declarar
arrays de arrays. Estos tipos de arrays se denominan arrays multidimensionales.

• Para acceder a estos valores, tenemos que declarar los índices de cada nivel entre
corchetes, uno después del otro.
 Si queremos eliminar uno de los valores, podemos declararlo como undefined o
null, como hemos hecho anteriormente, o declararlo como un array vacío
asignando corchetes sin valores en su interior.
Condicionales y bucles
Condicionales y bucles

 JavaScript ofrece un total de cuatro instrucciones para procesar código de

acuerdo a condiciones determinadas por el programador: if, switch, for y while.
Condicionales y bucles

Los siguientes son los operadores de comparación disponibles en JavaScript.

 == comprueba si el valor de la izquierda es igual al de la derecha.
 != comprueba si el valor de la izquierda es diferente al de la derecha.
 > comprueba si el valor de la izquierda es mayor que el de la derecha.
 < comprueba si el valor de la izquierda es menor que el de la derecha.
 >= comprueba si el valor de la izquierda es mayor o igual que el de la derecha.
 <= comprueba si el valor de la izquierda es menor o igual que el de la derecha.
Condicionales y bucles

 Después de evaluar una condición, esta devuelve un valor lógico verdadero o falso.
Esto nos permite trabajar con condiciones como si fueran valores y combinarlas
para crear condiciones más complejas. JavaScript ofrece los siguientes operadores
lógicos con este propósito.

 ! (negación) permuta el estado de la condición. Si la condición es verdadera,

devuelve falso, y viceversa.

 && (y) comprueba dos condiciones y devuelve verdadero si ambas son verdaderas.
 || (o) comprueba dos condiciones y devuelve verdadero si una o ambas son
verdaderas.
Condicionales y bucles

 El operador lógico ! invierte el estado de la condición. Si la condición se evalúa

como verdadera, el estado final será falso, y las instrucciones entre llaves no se
ejecutarán.
Condicionales y bucles

 El siguiente código ejecuta la función alert() solo cuando la edad es menor de 21 y

el valor de la variable inteligente es igual a "SI"
Condicionales y bucles

 Si asumimos que nuestro ejemplo solo considera dos valores para la variable
inteligente, "SI" y "NO", podemos convertirla en una variable booleana. Debido a
que los valores booleanos son valores lógicos, no necesitamos compararlos con
nada. El siguiente código simplifica el ejemplo anterior usando una variable
booleana.
 Condicionales y bucles

 El lenguaje es capaz de determinar una condición basándose en los valores de

cualquier variable. Por ejemplo, una variable con un número entero devolverá falso
si el valor es 0 o verdadero si el valor es diferente de 0.

 El código de la instrucción if no se ejecuta porque el valor de la variable edad es 0 y,

por lo tanto, el estado de la condición se considera falso.
Condicionales y bucles

 Las variables con cadenas de caracteres vacías también devuelven falso. El

siguiente ejemplo comprueba si se ha asignado una cadena de caracteres a una
variable y muestra su valor solo si la cadena no está vacía.
Condicionales y bucles

 El código considera dos condiciones: cuando el número es menor que 10 y

cuando el número es igual o mayor que 10.
Condicionales y bucles

 La instrucción switch evalúa una

expresión (generalmente una
variable), compara el resultado con
múltiples valores y ejecuta las
instrucciones correspondientes al
valor que coincide con la expresión.
La sintaxis incluye la palabra clave
switch seguida de la expresión
entre paréntesis. Los posibles valores
se listan usando la palabra clave case.
Condicionales y bucles

 La instrucción for ejecuta el código entre llaves mientras la condición es

verdadera. Usa la sintaxis for(inicialización; condición; incremento). El primer
parámetro establece los valores iniciales del bucle, el segundo parámetro es la
condición que queremos comprobar y el último parámetro es una instrucción
que determina cómo van a evolucionar los valores iniciales en cada ciclo.
Condicionales y bucles

 Podemos usar el bucle for para sumar todos los valores de un array.
Condicionales y bucles

 La instrucción while solo requiere la declaración de la condición entre paréntesis y

el código a ser ejecutado entre llaves. El bucle se ejecuta constantemente hasta
que la condición es falsa
Condicionales y bucles

 La instrucción do while ejecuta las instrucciones entre llaves y luego comprueba la

condición, lo cual garantiza que las instrucciones se ejecutarán al menos una vez. La
sintaxis es similar, solo tenemos que preceder las llaves con la palabra clave do y
declarar la palabra clave while con la condición al final.
Instrucciones de
transferencia de control
Instrucciones de transferencia de control

 Los bucles a veces se deben interrumpir. JavaScript ofrece múltiples instrucciones

para detener la ejecución de bucles y condicionales. Las siguientes son las que
más se usan.

 continue—Esta instrucción interrumpe el ciclo actual y avanza hacia el siguiente.

El sistema ignora el resto de instrucciones del bucle después de que se ejecuta
esta instrucción.

 break—Esta instrucción interrumpe el bucle. Todas las instrucciones restantes y

los ciclos pendientes se ignoran después de que se ejecuta esta instrucción.
Instrucciones de transferencia de control

 La instrucción continue se aplica cuando

 La instrucción if dentro del bucle for del
no queremos ejecutar el resto de las
ejemplo compara el valor de numero con
instrucciones entre llaves, pero queremos
seguir ejecutando el bucle. el valor 6. Si el valor del array que
devuelve la primera instrucción del bucle
es 6, se ejecuta la instrucción continue, la
última instrucción del bucle se ignora, y el
bucle avanza hacia el siguiente valor en el
array lista. En consecuencia, todos los
valores del array se suman a la variable
total excepto el número 6.
Instrucciones de transferencia de control

 A diferencia de continue, la instrucción break interrumpe el bucle completamente,

delegando el control a la instrucción declarada después de bucle.
Ejercicios
JavaScript
Ejercicios

 Utilizando variables, imprimir en la pantalla: Su nombre completo, su edad, su

fecha de nacimiento, su altura, su peso en Kilos, su índice de masa corporal. Para
el efecto puede utilizar la función document.write();

 Ingrese por teclado su nombre, edad, cédula, dirección y estructure en pantalla

un resumen de dicha información. Para el ingreso de información, utilizaremos la
función prompt como en el siguiente ejemplo:

 nombre=prompt('Ingrese su nombre:','');
Ejercicios

 Ingresando el valor de un vehículo determine el valor del impuesto a pagar. Si el

auto cuesta de 40.000 en adelante deberá pagar el 10% de su valor. Si es superior
a 30.000 deberá pagar el 7%. Si es mayor o igual a 20.000 deberá pagar el 5%. Si
es mayor o igual a 12.000 el 3% . Si es menor a 12.000 el 2%.

 Ingresando el lado de un cuadrado calcular el perímetro y el área de la figura

geométrica.
Ejercicios

 Ingrese por teclado el número de cédula y valide si es correcto o no. (Investigue y

desarrolle primero el algoritmo en papel y luego plásmelo en código)
Funciones
Definición

 Las funciones son bloques de código identificados con un nombre. La diferencia

entre las funciones y los bloques de código es que las instrucciones dentro de
una función se ejecutan cada vez que se llama a la función.

 Las funciones se invocan escribiendo el nombre seguido de paréntesis. Esta

llamada se puede realizar desde cualquier parte del código y cada vez que sea
necesario, lo cual rompe completamente el procesamiento secuencial del
programa.
Declarando funciones

 Las funciones se declaran usando la palabra clave function, el nombre seguido

de paréntesis, y el código entre llaves. Para llamar a la función, tenemos que
declarar su nombre con un par de paréntesis al final, como mostramos a
continuación.

 Las funciones se deben primero declarar y luego ejecutar.

Declarando funciones

 Cuando llamamos a la función por su nombre, el intérprete comprueba la

referencia y lee la función en memoria. Esto nos permite llamar a la función
todas las veces que sea necesario, como los hacemos en el siguiente ejemplo.
Ámbito

 En JavaScript, las instrucciones que se encuentran fuera de una función se

considera que están en el ámbito global. Este es el espacio en el que escribimos las
instrucciones hasta que se define una función u otra clase de estructura de datos.

 Las variables definidas en el ámbito global tienen un alcance global y, por lo tanto,
se pueden usar desde cualquier parte del código, pero las declaradas dentro de las
funciones tienen un alcance local, lo que significa que solo se pueden usar dentro
de la función en la que se han declarado
 Ámbito

 Esta segregación ayuda a evitar generar

duplicados que pueden conducir a errores,
como sobrescribir el valor de una variable
cuando el valor anterior aún era requerido por
la aplicación.

 El ejemplo ilustra cómo se definen los

diferentes ámbitos y qué debemos esperar
cuando accedemos desde un ámbito a variables
que se han definido en un ámbito diferente.
Ámbito

 Debido a que las variables declaradas en diferentes ámbitos se consideran

diferentes variables, dos variables con el mismo nombre, una en el ámbito global
y otra en el ámbito local (dentro de una función), se considerarán dos variables
distintas (se les asigna un espacio de memoria diferente).
Ámbito

NOTA
 Las variables globales también se pueden crear desde las funciones. Omitir la
palabra clave var cuando declaramos una variable dentro de una función es
suficiente para configurar esa variable como global.

 Usar variables globales desde una función no es una buena idea. Una mejor
alternativa es enviar valores a las funciones cuando son llamadas.
Ámbito

 Para poder recibir un valor, la función debe incluir un nombre entre los
paréntesis con el que representar el valor. Estos nombres se denominan
parámetros. Cuando la función se ejecuta, estos parámetros se convierten en
variables que podemos leer desde dentro de la función y así acceder a los
valores recibidos.
Ámbito

 La ventaja de usar funciones es que podemos ejecutar sus instrucciones una y

otra vez, y como podemos enviar diferentes valores en cada llamada, el resultado
obtenido en cada una de ellas será diferente. El siguiente ejemplo llama a la
función mifuncion() dos veces, pero en cada oportunidad envía un valor
diferente para ser procesado.
Ámbito

 En este y los ejemplos anteriores, enviamos números enteros a la función, pero

también podemos enviar el valor actual de una variable.

 La variable contador en la llamada en lugar de un número. El intérprete lee esta

variable y envía su valor a la función. El resto del proceso es el mismo: la función
recibe el valor, lo asigna a la variable valor y lo muestra en pantalla.
Ámbito

 Las funciones también pueden recibir múltiples valores. Todo lo que tenemos
que hacer es declarar los valores y parámetros separados por comas.
Ámbito

 Para enviar valores desde la función al ámbito global, JavaScript incluye la

instrucción return. Esta instrucción determina el valor a devolver al código que
ha llamado a la función. Si queremos procesar el valor que devuelve la función,
tenemos que asignar dicha función a una variable.
Ámbito

 La instrucción return normalmente se declara al final de la función, pero esto no

es obligatorio. Podemos devolver un valor desde cualquier parte del código si
tenemos condiciones que satisfacer.
Funciones anónimas
 Funciones anónimas

 Otra manera de declarar una función es

usando funciones anónimas. Las funciones
anónimas son funciones sin un nombre o
identificador. Debido a esto, se pueden
pasar a otras funciones o asignar a variables.
Cuando una función anónima se asigna a
una variable, el nombre de la variable es el
que usamos para llamar a la función.
 Funciones anónimas

 Las funciones anónimas se pueden ejecutar al

instante agregando paréntesis al final de su
declaración. Esto es útil cuando queremos
asignar el resultado de una operación compleja a
una variable. La función procesa la operación y
devuelve el resultado. En este caso, no es la
función lo que se asigna a la variable, sino el
valor que devuelve la misma.
Funciones Estándar
Funciones Estándar

 Además de las funciones que podemos crear nosotros mismos, también tenemos
acceso a funciones predefinidas por JavaScript. Estas funciones realizan procesos
que simplifican tareas complejas. Las siguientes son las que más se usan.

 isNaN(valor)—Esta función devuelve true (verdadero) si el valor entre paréntesis

no es un número.

 parseInt(valor)—Esta función convierte una cadena de caracteres con un número

en un número entero que podemos procesar en operaciones aritméticas.
Funciones Estándar

 parseFloat(valor)—Esta función convierte una cadena de caracteres con un

número en un número decimal que podemos procesar en operaciones
aritméticas.

 encodeURIComponent(valor)—Esta función codifica una cadena de caracteres.

Se utiliza para codificar los caracteres de un texto que puede crear problemas
cuando se inserta en una URL.

 decodeURIComponent(valor)—Esta función decodifica una cadena de caracteres

Funciones Estándar

 Las funciones estándar son funciones globales que podemos llamar desde
cualquier parte del código; solo tenemos que llamarlas como lo hacemos con
cualquier otra función con los valores que queremos procesar entre paréntesis.

 La función isNaN() devuelve el valor false no solo cuando la variable contiene un

número, sino además cuando contiene una cadena de caracteres con un número
Funciones Estándar

 Para asegurarnos de que el valor se puede incluir en una operación, tenemos que
convertirlo en un valor numérico. Para este propósito, JavaScript ofrece dos
funciones: parseInt() para números enteros y parseFloat() para números
decimales
Funciones Estándar

 Otra función estándar útil es encodeURIComponent(). Con esta función podemos

preparar una cadena de caracteres para incluirla en una URL. El problema con las
URL es que le otorgan un significado especial a caracteres, como ? o &.

 Debido a que los usuarios no conocen estas restricciones, tenemos que codificar
las cadenas de caracteres antes de incluirlas en una URL cada vez que las introduce
el usuario o provienen de una fuente que no es fiable.
Funciones Básicas
Funciones útiles para cadenas de texto

 length, calcula la longitud de una cadena de texto (el número de caracteres que la
forman)

 +, se emplea para concatenar varias cadenas de texto

Funciones útiles para cadenas de texto

 Además del operador +, también se puede utilizar la función concat()

 Las cadenas de texto también se pueden unir con variables numéricas:

Funciones útiles para cadenas de texto

 Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de

separación entre las palabras:

 Los espacios en blanco se pueden añadir al final o al principio de las cadenas y

también se pueden indicar forma explícita:
Funciones útiles para cadenas de texto

 toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes

caracteres en mayúsculas:

 toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes

caracteres en minúsculas:
Funciones útiles para cadenas de texto

 charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:

 indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado

dentro de la cadena de texto. Si el carácter se incluye varias veces dentro de la
cadena de texto, se devuelve su primera posición empezando a buscar desde la
izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1:
Funciones útiles para cadenas de texto

 lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter

indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la
función devuelve el valor -1:

 substring(inicio, final), extrae una porción de una cadena de texto. El segundo

parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la
parte de la cadena original correspondiente desde esa posición hasta el final:
Funciones útiles para cadenas de texto

 Si se indica un inicio negativo, se devuelve la misma cadena original:

• Cuando se indica el inicio y el final, se devuelve la parte de la cadena original

comprendida entre la posición inicial y la inmediatamente anterior a la posición
final (es decir, la posición inicio está incluida y la posición final no)
Funciones útiles para cadenas de texto

 Si se indica un final más pequeño que el inicio, JavaScript los considera de forma
inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más
grande al final:

 split(separador), convierte una cadena de texto en un array de cadenas de texto.

La función parte la cadena de texto determinando sus trozos a partir del carácter
separador indicado:
Funciones útiles para cadenas de texto

 Con esta función se pueden extraer fácilmente las letras que forman una palabra:
Funciones útiles para arrays

 length, calcula el número de elementos de un array

 concat(), se emplea para concatenar los elementos de varios arrays

 join(separador), es la función contraria a split(). Une todos los elementos de un array para
formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado
Funciones útiles para arrays

 pop(), elimina el último elemento del array y lo devuelve. El array original se

modifica y su longitud disminuye en 1 elemento.

 push(), añade un elemento al final del array. El array original se modifica y

aumenta su longitud en 1 elemento. (También es posible añadir más de un
elemento a la vez)
Funciones útiles para arrays

 shift(), elimina el primer elemento del array y lo devuelve. El array original se ve

modificado y su longitud disminuida en 1 elemento.

 unshift(), añade un elemento al principio del array. El array original se modifica y

aumenta su longitud en 1 elemento. (También es posible añadir más de un
elemento a la vez)
Funciones útiles para arrays

 reverse(), modifica un array colocando sus elementos en el orden inverso a su

posición original:
Funciones útiles para números

 NaN, (del inglés, "Not a Number") JavaScript emplea el valor NaN para indicar un
valor numérico no definido (por ejemplo, la división 0/0).

 isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos

Funciones útiles para números

 Infinity, hace referencia a un valor numérico infinito y positivo (también existe el

valor –Infinity para los infinitos negativos)

 toFixed(digitos), devuelve el número original con tantos decimales como los

indicados por el parámetro digitos y realiza los redondeos necesarios. Se trata de
una función muy útil por ejemplo para mostrar precios.
Objetos
Objetos

 Los objetos son estructuras de información capaces de contener variables

(llamadas propiedades), así como funciones (llamadas métodos).

 Debido a que los objetos almacenan valores junto con funciones, son como
programas independientes que se comunican entre sí para realizar tareas
comunes.

 La idea detrás de los objetos en programación es la de simular el rol de los

objetos en la vida real. Un objeto real tiene propiedades y realiza acciones.
Declarando objetos

 Existen diferentes maneras de declarar objetos en JavaScript, pero la más sencilla

es usar notación literal. El objeto se declara como cualquier otra variable usando
la palabra clave var, y las propiedades y métodos que definen el objeto se
declaran entre llaves usando dos puntos después del nombre y una coma para
separar cada declaración.

declaramos el objeto miobjeto con dos propiedades:

nombre y edad. El valor de la propiedad nombre es
"Juan" y el valor de la propiedad edad es 30.
Declarando objetos

 A diferencia de las variables, no podemos acceder a los valores de las

propiedades de un objeto usando solo sus nombres; también tenemos que
especificar el nombre del objeto al que pertenecen usando notación de puntos o
corchetes.
Declarando objetos

 El uso de cualquiera de estas técnicas es irrelevante, excepto en algunas

circunstancias. Por ejemplo, cuando necesitamos acceder a la propiedad a través del
valor de una variable, tenemos que usar corchetes.

 No podríamos haber accedido a la propiedad usando notación de puntos

(miobjeto.nombrePropiedad) porque el intérprete habría intentado acceder a una
propiedad llamada nombrePropiedad que no existe. Usando corchetes, primero la
variable se resuelve y luego se accede al objeto con su valor ("nombre") en lugar de
su nombre.
Declarando objetos

 También es necesario acceder a una propiedad usando corchetes cuando su

nombre se considera no válido para una variable (incluye caracteres no válidos,
como un espacio, o comienza con un número). El código miobjeto.mi edad
produciría un error, por lo que tenemos que usar corchetes para acceder a esta
propiedad.
Declarando objetos

 Además de leer los valores de las propiedades, también podemos asignar nuevas
propiedades al objeto o modificarlas usando notación de puntos. En el siguiente
ejemplo, modificamos el valor de la propiedad nombre y agregamos una nueva
propiedad llamada trabajo.
Declarando objetos

 Los objetos también pueden contener otros objetos. En el siguiente ejemplo,

asignamos un objeto a la propiedad de otro objeto.
Métodos

 Los objetos también pueden incluir funciones. Las funciones dentro de los objetos
se llaman métodos. Los métodos tienen la misma sintaxis que las propiedades:
requieren dos puntos después del nombre y una coma para separar cada
declaración, pero en lugar de valores, debemos asignarles funciones anónimas.
Métodos

 Al igual que las funciones, los métodos también pueden devolver valores. En el
siguiente ejemplo, modificamos el método cambiarnombre() para devolver el
nombre anterior después de que se reemplaza por el nuevo.
La palabra clave this

 Para asegurarnos de que siempre referenciamos al objeto con el que estamos

trabajando, JavaScript incluye la palabra clave this. Esta palabra clave se usa en lugar
del nombre del objeto para referenciar el objeto al que la instrucción pertenece
 Constructores

 Usando notación literal podemos crear

objetos individuales, pero si queremos crear
copias de estos objetos con las mismas
propiedades y métodos, tenemos que usar
constructores. Un constructor es una
función anónima que define un nuevo
objeto y lo devuelve, creando copias del
objeto (también llamadas instancias), cada
una con sus propias propiedades, métodos y
valores.
 Constructores

 En el ejemplo se asigna una función

anónima a la variable constructor.

 Dentro de la función, se crea un objeto y se

devuelve mediante la instrucción return.

 Finalmente, el objeto que devuelve la

función se almacena en la variable
empleado y se ejecuta su método
mostrarnombre().
Constructores

 Usando constructores, podemos crear nuevos objetos de forma dinámica. Por

ejemplo, podemos configurar valores iniciales para las propiedades enviando los
valores a la función cuando se construye el objeto.
Constructores

 El propósito de un constructor es el de funcionar como una fábrica de objetos. El

siguiente ejemplo ilustra cómo crear múltiples objetos con el mismo constructor.
 Constructores

 Como hemos explicado anteriormente, se puede acceder a las variables creadas en el

ámbito global desde cualquier lugar del código, mientras que a las variables creadas
dentro de funciones solo se puede acceder desde las funciones en las que se han creado.

 Lo que no mencionamos es que las funciones y, por lo tanto, los métodos mantienen
un enlace que las conecta al ámbito en el que se han creado y quedan conectadas a las
variables declaradas en ese ámbito. Cuando devolvemos un objeto desde un
constructor, sus métodos aún pueden acceder a las variables de la función, incluso
cuando ya no se encuentran en el mismo ámbito, y por ello estas variables se vuelven
accesibles solo para el objeto.
 Constructores

 En lugar de declarar nombre y edad como

propiedades del objeto, las declaramos como
variables de la función que está devolviendo el
objeto. El objeto devuelto recordará estas
variables, pero el mismo será el único que tendrá
acceso a ellas.
 No existe forma de modificar los valores de esas
variables desde otras instrucciones en el código
que no sea por medio de los métodos que
devuelve la función (en este caso,
mostrarnombre() y cambiarnombre()).
El operador new

 Con la notación literal y los constructores tenemos todo lo que necesitamos para
crear objetos. JavaScript ofrece una tercera alternativa. Se trata de una clase
especial de constructor que trabaja con un operador llamado new (nuevo). El
objeto se define mediante una función y luego se llama con el operador new
para crear un objeto a partir de esa definición.
El operador new

 Estos tipos de constructores requieren que las propiedades y los métodos de los
objetos sean identificados mediante la palabra clave this, pero excepto por este
requisito, la definición de estos constructores y los que hemos estudiado
anteriormente son iguales. También podemos proveer valores iniciales, como en el
siguiente ejemplo.
Herencia

 Una característica importante de los objetos es que podemos crearlos desde otros
objetos.

 Cuando los objetos se crean a partir de otros objetos, pueden heredar sus
propiedades y métodos, y también agregar los suyos propios.

 La herencia en JavaScript (cómo los objetos obtienen las mismas propiedades y

métodos de otros objetos) se logra a través de prototipos.

 Un objeto no hereda las propiedades y los métodos de otro objeto directamente;

lo hace desde el prototipo del objeto.
Herencia
Herencia

 Este código crea dos objetos

independientes, miobjeto y empleado,
con sus propias propiedades, métodos y
valores, pero conectados a través de la
cadena de prototipos. El nuevo objeto
empleado no es solo una copia del
original, es un objeto que mantiene un
enlace con el prototipo de miobjeto
 Herencia

 La existencia de la cadena de prototipos se

demuestra agregando el método mostraredad()
a empleado2. Ahora, empleado2 y empleado3
(y también cualquier otro objeto creado
posteriormente a partir de estos dos objetos)
tienen acceso a este método, pero debido a
que la herencia funciona hacia abajo de la
cadena y no hacia arriba, el método no está
disponible para el objeto empleado1.