ASIGNATURA:

Herramientas del diseño web

ASIGNACION:
Tarea semana 5: JavaScript

ALUMNA:

Delsy Dariana Bardales Salgado

CATEDRATICO:

Fernando Cárcamo

FECHA:

21/ 11 / 2022
INTRODUCCION
En el presente documento se aborda el tema JavaScript y ciertos conceptos básicos
que debemos manejar para poder conocer más a profundidad el mismo,
comenzaremos definiendo JavaScript.
JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado
justo-a-tiempo (just-in-time) con funciones de primera clase. Si bien es más conocido
como un lenguaje de scripting (secuencias de comandos) para páginas web, y es
usado en muchos entornos fuera del navegador, tal como Node.js, es un lenguaje
basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para
programación orientada a objetos, imperativa y declarativa.
Otros conceptos básicos que debemos abordar sobre este tema son:
• Variables:
Una variable es un contenedor para un valor, como un número que podríamos usar
en una suma, o una cadena que podríamos usar como parte de una oración. Pero
una cosa especial acerca de las variables es que los valores que contienen pueden
cambiar.
• Operadores:
JavaScript tiene varios tipos de operadores. Estos operadores como su nombre lo
dicen abordan operaciones dentro del página web.
• Cadenas de texto:
así es como se llaman los fragmentos de texto en programación. En este artículo
veremos todas las cosas comunes que realmente deberías saber sobre cadenas de
caracteres al aprender JavaScript, como crear cadenas, comillas en cadenas y unir
cadenas.
• Estructuras:
• son instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple,
haz esto otro".
• DOM:
Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura
del documento HTML. Una página HTML está formada por múltiples etiquetas HTML,
anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí,
que se denomina árbol DOM (o simplemente DOM).
CONTENIDO:
• Variables:
▪ Números:
Los números son uno de los tipos de datos básicos (tipos primitivos), que, para
crearlos, simplemente basta con escribirlos literalmente. No obstante, como en
JavaScript todo se puede representar con objetos (como veremos más adelante)
también se pueden declarar mediante la palabra clave new.
Sin embargo, aunque existan estas dos formas de declararlas, no se suele utilizar la
notación new con números, ya que es bastante más tedioso y complicado, por lo que
lo preferible es utilizar la notación de literales:
EJEMPLO:

▪ Cadenas de texto:
En JavaScript y en el mundo del desarrollo web, una de las tareas que más solemos
hacer es manejar cadenas de texto y realizar tareas con ellas. Por lo tanto, tenemos
que familiarizarnos con el tipo de dato String.
En programación, cuando hablamos de una variable que posee información de texto,
decimos que su tipo de dato es string . En JavaScript, es muy sencillo crear una
variable de texto. A rasgos generales, hay dos formas principales de hacerlo:

Los son uno de los tipos de datos básicos (primitivos), y como tal, es más sencillo
utilizar los literales que la notación que utiliza la palabra clave new. Para englobar los
textos, se pueden utilizar tres tipos de comillas:

• Comillas simples: '

• Comillas dobles: "
• Backticks: `
Aunque es posible utilizar comillas simples y comillas dobles en los, se recomienda
decantarse por uno de los dos estilos y no mezclarlos. Las empresas y equipos de
desarrollo suelen tener guías para determinar cuál usar.
 Ejemplo:

▪ Booleanos
El Boolean objeto representa un valor de verdad: true o false.
Primitivos booleanos y objetos booleanos
No confunda los valores primitivos y con los valores y del objeto. Cualquier objeto,
incluido un Boolean objeto cuyo valor es false, se evalúa como true cuando se pasa
a una instrucción condicional. Por ejemplo, la condición en la siguiente ifdeclaración
se evalúa como true:
Ejemplo:

▪ Arreglos
A medida que trabajamos en nuestro código, se hace necesario agrupar valores en
una misma variable, para representar conjuntos de datos con cierta relación entre sí.
Para ello, tenemos la opción de crear objetos, o unas variables más sencillas llamadas
arrays.
Un arreglo es una colección o agrupación de elementos en una misma variable, cada
uno de ellos ubicado por la posición que ocupa en el array. En algunas ocasiones
también se les suelen llamar arreglos o vectores. En JavaScript, se pueden definir de
varias formas:

Ejemplo:
 ▪ Objetos
Uno de los aspectos más importantes del lenguaje JavaScript es el concepto de
objeto, puesto que prácticamente todo lo que utilizamos en JavaScript, son objetos.
Sin embargo, tiene ligeras diferencias con los objetos de otros lenguajes de
programación, así que vamos a comenzar con una explicación sencilla y más adelante
ampliaremos este tema en profundidad.
En JavaScript, existe un tipo de dato llamado objeto . Una primera forma de verlo, es
como una variable especial que puede contener más variables en su interior. De esta
forma, tenemos la posibilidad de organizar múltiples variables de la misma temática
en el interior de un objeto.
En muchos lenguajes de programación, para crear un objeto se utiliza la palabra clave
new. En JavaScript también se puede hacer, pero pospondremos su uso para cuando
entremos en el capítulo de Programación orientada a objetos.
Ejemplo:

• Operadores
▪ Operadores aritméticos
Un operador aritmético toma valores numéricos (ya sean literales o variables) como
sus operandos y devuelve un solo valor numérico. Los operadores aritméticos
estándar son suma (+), resta (-), multiplicación (*) y división (/). Estos operadores
funcionan como lo hacen en la mayoría de los otros lenguajes de programación
cuando se usan con números de punto flotante (en particular, ten en cuenta que la
división entre cero produce Infinity). Por ejemplo:

▪ Operadores de precedencia:
La precedencia de operadores determina el orden en el cual los operadores son
evaluados uno respecto del otro. Los operadores con mayor precedencia se
convierten en los operandos de los operadores con menor precedencia.

Ejemplo:
 ▪ Operadores de incremento y decremento

▪ Operadores de asignación:
Un operador de asignación asigna un valor a su operando izquierdo basándose en el
valor de su operando derecho. El operador de asignación simple es igual (=), que
asigna el valor de su operando derecho a su operando izquierdo. Es decir, x = y asigna
el valor de y a x.
Ejemplo:

▪ Operadores de comparación:
Un operador de comparación compara sus operandos y devuelve un valor lógico en
función de si la comparación es verdadera (true) o falsa (false). Los operandos
pueden ser valores numéricos, de cadena, lógicos u objetos. Las cadenas se
comparan según el orden lexicográfico estándar, utilizando valores Unicode. En la
mayoría de los casos, si los dos operandos no son del mismo tipo, JavaScript intenta
convertirlos a un tipo apropiado para la comparación. ¡Las únicas excepciones a la
conversión de tipos dentro de las comparaciones involucran a los operadores === y!
==, que realizan comparaciones estrictas de igualdad y desigualdad. ejemplo:

• Cadenas de texto
▪ Declaración de cadenas de texto, caracteres de escape y salto
de línea.
A veces, tu código incluirá cadenas que son muy largas. En lugar de tener líneas que
se prolongan interminablemente o que se ajustan según el capricho de tu editor, es
posible que desees dividir específicamente la cadena en varias líneas en el código
fuente sin afectar el contenido real de la cadena. hay dos maneras de conseguirlo.
Ejemplo:

Los caracteres especiales se pueden codificar mediante notación de escape:

▪ Concatenación de cadenas de texto:

Concatenar es una elegante palabra de la programación que significa: "unir". Para
unir cadenas en JavaScript el símbolo de más (+), el mismo operador que usamos
para sumar números, pero en este contexto hace algo diferente. Vamos a probar un
ejemplo en nuestra consola.
Ejemplo:

▪ Manejo de variables numéricas en cadenas de texto:

Unicode es el nombre por el que se conoce al sistema moderno de codificación de
caracteres que se usa en informática. A grandes rasgos, cada carácter como podría
ser la A, la B (o cualquier otro), tiene su representación Unicode, que se basa en un
código o code point.
Por ejemplo, tomemos como ejemplo el carácter A (mayúsculas). Este carácter
corresponde al código Unicode U+0041, el cual se forma por el indicativo U+ seguido
del número hexadecimal, que en este caso es 0x0041, o 65 si hablamos de números
decimales. Con esto, podemos representar esos caracteres en HTML o en texto, pero
para verlo más claro, observa la siguiente tabla con algunos ejemplos:
 • Estructuras
▪ decisión If/else:
Ejecuta una sentencia si una condición especificada es evaluada como verdadera. Si
la condición es evaluada como falsa, otra sentencia puede ser ejecutada.
Sintaxis: if (condición) sentencia1 [else sentencia2]
Condición: Una expresión que puede ser evaluada como verdadera o falsa.
Sentencia1: Sentencia que se ejecutará si condición es evaluada como verdadera.
Puede ser cualquier sentencia, incluyendo otras sentencias if anidadas. Para ejecutar
múltiples sentencias, use una sentencia block ({... }) para agruparlas.
Sentencia2: Sentencia que se ejecutará si condición se evalúa como falsa, y exista
una cláusula else. Puede ser cualquier sentencia, incluyendo sentencias block y otras
sentencias if anidadas.
Ejemplo:

Descripción

▪ Loops:
JavaScript posee un modelo de concurrencia basado en un "loop de eventos". Este
modelo es bastante diferente al modelo de otros lenguajes como C o Java. El loop de
eventos obtiene su nombre por la forma en que es usualmente implementado, la cual
generalmente se parece a:
Ejemplo
 ▪ Funciones, llamadas de funciones, parámetros de funciones y
retornos de funciones.
Las funciones son uno de los bloques de construcción fundamentales en JavaScript.
Una función en JavaScript es similar a un procedimiento — un conjunto de
instrucciones que realiza una tarea o calcula un valor, pero para que un procedimiento
califique como función, debe tomar alguna entrada y devolver una salida donde hay
alguna relación obvia entre la entrada y la salida. Para usar una función, debes
definirla en algún lugar del ámbito.
Las expresiones función son convenientes cuando se pasa una función como
argumento a otra función. El siguiente ejemplo muestra una función map que debería
recibir una función como primer argumento y un arreglo como segundo argumento.
desde el que deseas llamarla.
Return: es el código usado para retornar funciones.
Ejemplo:

• DOM
▪ Objeto Document:
En JavaScript, la forma de acceder al DOM es a través de un objeto llamado
document, que representa el árbol DOM de la página o pestaña del navegador donde
nos encontramos. En su interior pueden existir varios tipos de elementos, pero
principalmente serán Elemento o node :
• Element no es más que la representación genérica de una etiqueta:
HTMLElement.
• Node es una unidad más básica, la cuál puede ser element o un nodo de
texto.
Ejemplos:
 ▪ Métodos de búsqueda de elementos:
En algunas ocasiones en las que conocemos y controlamos perfectamente la
estructura del código HTML de la página, nos puede resultar más cómodo tener a
nuestra disposición una serie de propiedades para navegar por la jerarquía de
elementos HTML relacionados.
Las propiedades que veremos a continuación devuelven información de otros
elementos relacionados con el elemento en cuestión.

Ejemplo:

▪ Manejadores de eventos:
Hay situaciones en las que necesitamos realizar una determinada acción cuando
ocurra un determinado caso. En estas situaciones, no sabemos exactamente cuando
tenemos que activar nuestra funcionalidad. En estas situaciones es cuando entran en
juego los eventos.
evento, no es más que una notificación de que alguna característica interesante acaba
de ocurrir, generalmente relacionada con el usuario que navega por la página.
Dichas características pueden ser muy variadas:
• Clic de ratón del usuario sobre un elemento de la página
• Pulsación de una tecla específica del teclado
• Reproducción de un archivo de audio/video
• Scroll de ratón sobre un elemento de la página
• El usuario ha activado la opción «Imprimir página»
Ejemplo:
CONCLUSIONES:

1. Observamos que mediante JavaScript podemos inspeccionar e interferir con el

documento que el navegador muestra a través de una estructura de datos
llamada DOM.
2. Observamos que con JavaScript Podemos modificar por completo nuestra
página y su contenido, o bien determinados elementos que especifiquemos,
así como también podemos variar la forma en que se muestra este contenido
al manipular el estilo de un elemento directamente a través de la property style.
3. Finalizando, hemos aprendido que las variables son usadas para registrar y
reusar datos en nuestros programas informáticos. El alcance (Scope) se refiere
al lugar en nuestro código donde las variables están disponibles para su uso.
4. Concluyendo podemos mencionar que JavaScript es uno de los lenguajes de
programación más populares en la web hoy en día. Tiene todo tipo de usos,
desde crear sitios web, aplicaciones web o aplicaciones de servidor a juegos,
aplicaciones móviles, etc. Pero es importante conocer y estar familiarizado con
los tipos de datos y operadores aceptados. Del mismo modo que cualquier
cosa que se nos ocurra lo podemos hacer con JavaScript, cualquier error tonto
puede suceder.
5. Para concluir aprendimos aspectos básicos sobre cadenas de texto.
observando métodos de construcción de strings disponibles en JavaScript y
cómo podemos usarlos para manipular nuestras cadenas de la forma que
queremos.
BIBLIOGRAFIA:
1. ¿Qué es un Number? - JavaScript en español [Internet]. lenguajejs.com.
[cited 2022 Nov 21]. Available from:
https://lenguajejs.com/javascript/number/variables-numericas/
2. Qué es un String? - JavaScript en español. (n.d.). Lenguajejs.com. Retrieved
noviembre 21, 2022, from https://lenguajejs.com/javascript/string/variables-
texto/
3. ¿Qué son los objetos? - JavaScript en español [Internet]. lenguajejs.com.
[cited 2022 Nov 21]. Available from:
https://lenguajejs.com/javascript/objetos/que-son/
4. ¿Qué es un Array en JavaScript? - JavaScript en español [Internet].
lenguajejs.com. [cited 2022 Nov 21]. Available from:
https://lenguajejs.com/javascript/arrays/que-es/
5. Boolean - JavaScript | MDN [Internet]. developer.mozilla.org. Available from:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
6. Lenguaje JavaScript - JavaScript en español [Internet]. lenguajejs.com. [cited
2022 Nov 21]. Available from: https://lenguajejs.com/javascript/dom/
7. Contenido de texto Unicode - JavaScript en español. (n.d.). Lenguajejs.com.
Retrieved noviembre 21, 2022, from
https://lenguajejs.com/javascript/string/unicode/
8. if...else - JavaScript | MDN. (n.d.). Developer.mozilla.org. Retrieved
noviembre 21, 2022, from
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/if
...else
9. Modelo de concurrencia y loop de eventos - JavaScript | MDN. (n.d.).
Developer.mozilla.org. Retrieved noviembre 21, 2022, from
https://developer.mozilla.org/es/docs/Web/JavaScript/EventLoop
10. Funciones - JavaScript | MDN. (n.d.). Developer.mozilla.org.
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Functions
11. Expresiones y operadores - JavaScript | MDN. (n.d.). Developer.mozilla.org.
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and
_Operators