Menú

Mostrar Mensajes

Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.

Mostrar Mensajes Menú

Mensajes - Abarhild

Páginas1
#1
Front-end / Curso de JavaScript | 14. Fuente de error: acceder a elementos que aún no existe
Septiembre 12, 2022, 02:46:45 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Fuente de error: JavaScript intenta acceder a elementos que aún no existen
En el último capítulo vimos que el siguiente programa de JavaScript se canceló con el mensaje de error "Uncaught TypeError: Connot read property ...".

Código: html4strict

<html>
<head>
	<title>Titulo de la pagina</title>
</head>
<script>
let parrafo1 = document.getElementById('area1');
document.write("<br>" + parrafo1.innerHTML);
console.log("<br>" + parrafo1);
</script>
<body>
    <h1>Encabezado 1</h1>
    <p id="area1">Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://foro.elhacker.net">Texto del link</a>
</script>
</body>
</html>


¿Por qué esto es así? Nuestro programa JavaScript intenta a través de document.getElementById('area1'); acceder a un área en HTML que aún no se "muestra" en ese momento. ¿Que se quiere decir con eso? Nuestro párrafo con la ID area1 recién se "ejecuta" más adelante en el programa y solo entonces estara disponible para JavaScript.


La prueba para una mejor comprensión
También podemos hacer que esto sea muy claramente visible al mostrar en la consola lo que actualmente está disponible para JavaScript.

Usando la instrucción console.log(document.children[0].innerHTML); vemos el "estado de carga".

Código: javascript

<html>
<head>
	<title>Titulo de la pagina</title>
<script>
console.log(document.children[0].innerHTML);
window.addEventListener("load", function() {
	let parrafo1 = document.getElementById('area1');
	// console.log(parrafo1.innerHTML);
	// console.log(parrafo1);
	console.log(document.children[0].innerHTML);
} );
</script>
</head>
<body>
	<h1>Encabezado 1</h1>
    <p id="area1">Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://foro.elhacker.net">Texto del link</a>
<script>
console.log(document.children[0].innerHTML);
</script>
</body>
</html>


La salida de la consola en la línea 6 muestra que solo está presente la sección head; por otro lado, obtenemos el código completo a través del mismo comando en la salida de la consola.


Independiente de la ubicación de nuestro código JavaScript
Y aquí es exactamente donde queremos independizarnos.

Queremos decirle a nuestro programa JavaScript que no se ejecute hasta que se hayan cargado todos los elementos HTML de la página.


EventListener - esperar a eventos definidos usando JavaScript
En JavaScript existen EventListeners que podemos usar para eventos como un clic del usuario, pulsaciones de teclas o incluso la carga completa de todos los elementos HTML en una página. Así que podemos consultar cualquier cantidad de Events (inglés para evento), es decir, esperar y "escuchar" (Listen en inglés) si estos llegan a ocurrir. La traducción al español de EventListener es realmente agradable: es el oidor de eventos.

Veamos la estructura en JavaScript:

La declaración de JavaScript comienza con window.addEventListener(). Después de iniciar nuestro programa JavaScript, a nuestra ventana se monitorea constantemente para ver si ocurre un evento específico. Y aquí el énfasis está en permanente. Compara esto con lenguajes de programación como PHP, donde se ejecuta un programa y cuando este programa ha llegado a la última línea de código, este se completa y termina. Si usamos EventListener en JavaScript, el código asociado se ejecutará en una función tan pronto como ocurra un evento (Event) específico. No te tropiezcas con la nueva palabra de función aquí: las funciones se introduciran más adelante.

Ahora, por supuesto, aún tenemos que decirle a addEventListener() qué evento (Event) debe escuchar:

Código: javascript

window.addEventListener("load" );


Por lo tanto, estamos esperando que nuestro archivo se cargue por completo; en otras palabras, todas las instrucciones HTML están disponibles y JavaScript puede consultarlas o usarlas. Nuestro evento "load" no significa nada más que nuestra página completa ha terminado de cargarse.

Ahora está claro cuándo nuestro EventListener debería de activarse - ahora falta la actividad. Primero echemos un vistazo a la estructura básica:

Código: javascript

window.addEventListener("load", function() {
} );


Y con acción, se debe de mostrarse que la página se cargó por completo:

Código: javascript

window.addEventListener("load", function() {
    console.log("Pagina completamente cargada");
} );


En lugar de nuestra salida de control, por supuesto, se puede colocar cualquier cantidad de declaraciones de JavaScript entre las llaves.

Pero ahora el gran final: por razones históricas (suena siempre bien, pero se refiere a evitar problemas con los navegadores antiguos), siempre se debe de ingresar false después de las llaves.

Código: javascript

window.addEventListener("load", function() {
}, false );


Y ahora podemos insertar el ejemplo inicialmente problemático a la nueva sección y todo está bien:

Código: javascript

<html>
<head>
	<title>Titulo de la pagina</title>
</head>
<script>
window.addEventListener("load", function() {
    let parrafo1 = document.getElementById('area1');
    console.log(parrafo1.innerHTML);
    console.log(parrafo1);
}, false );
</script>
<body>
    <h1>Encabezado 1</h1>
    <p id="area1">Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://foro.elhacker.net">Texto del link</a>
</body>
</html>


En los siguientes tutoriales siempre trabajaré con esta construcción para evitar estos problemas. Por lo tanto, utilícenlo siempre, incluso si addEventListener("load", ...) no se muestra en los ejemplos que vienen en aras de la claridad.
#2
Dudas y pedidos generales / Grabar encuentro de Zoom desde Android 8 (Audio)
Septiembre 12, 2022, 01:16:40 PM
Hola a todos,

¿cómo puedo grabar un encuentro de Zoom (Audio) desde Android 8 sin permisos del administrador y sin root?


Gracias y saludos
#3
Front-end / Curso de JavaScript | 13. Usar DOM a través de getElementById()
Agosto 22, 2022, 09:43:30 AM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Usar DOM a través de getElementById()
Echemos un vistazo a getElementById().

Queremos apuntar a un elemento específico en nuestra página HTML.

Código: html5

<html>
<head>
    <title>Titulo de la pagina</title>
</head>
<body>
    <h1>Encabezado 1</h1>
    <p>Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://underc0de.org/foro">Texto del link</a>
</body>
</html>


¿Cómo podemos usar JavaScript para obtener específicamente, por ejemplo, el primer párrafo? Para hacer esto, usamos la instrucción de JavaScript getElementById().

Nuestro elemento deseado ahora necesita un identificador único. Podemos agregar el atributo id y un nombre único a cualquier elemento HTML directamente en el código HTML. Aquí se aplican las siguientes reglas para un nombre único:


  • No deben de haber espacios.
  • No deben de haber guiones.
  • No deben de haber caracteres especiales (por lo que es mejor usar solo letras de la a a la z y números del 0 al 9).

En nuestro ejemplo, demos a nuestro primer párrafo el atributo HTML id y el nombre area1. Aquí el fragmento del código HTML extendido:

Código: html5

<p id="area1">Primer parrafo con texto</p>


Ahora podemos agregar el nombre a nuestro comando de JavaScript getElementById(). Además, a través de document., decimos que se use el documento HTML actual (es decir, nuestro árbol DOM):

Código: javascript

document.getElementById('area1');


Si ejecutamos nuestro programa JavaScript, todavía no sucede nada visible.

Ahora podemos acceder a un elemento específico.

Nuestro elemento contiene el comando HTML completo y el contenido "Primer parrafo con texto" encerrado por el comando, es decir, la completa rama seleccionada, incluidas todas las ramillas y hojas de nuestro árbol DOM.

Si solo queremos el texto y no la rama completa - en otras palabras, no queremos que se devuelvan atributos ni comandos HTML - JavaScript nos ofrece la extensión a través de innerHTML.

Código: javascript

document.getElementById('area1').innerHTML;


Por supuesto, estas notaciones de puntos hacen que las instrucciones en JavaScript sean cada vez más largas y, por lo tanto, más y más confusas. Y en la mayoría de las veces, en repetidas veces se necesita acceso al mismo elemento.

Por lo tanto, se construye a partir del siguiente código

Código: javascript

document.getElementById('area1').innerHTML;


la siguiente construcción usando una variable:

Código: javascript

let parrafo1 = document.getElementById('area1');
console.log(parrafo1.innerHTML);
console.log(parrafo1);
alert(parrafo1.innerHTML);


Expandi nuestro programa existente y ve si hay una salida en la consola. Hay un 50% de posibilidades de que funcione (salvo por errores tipográficos).

¡Primero probalo antes de seguir leyendo!

¡En serio!

¿Funcionó? ¿Obtuviste el resultado esperado? Entonces nuestro programa JavaScript se insertó después de las salidas HTML en el archivo:

Código: javascript

<html>
<head>
	<title>Titulo de la pagina</title>
</head>
<body>
    <h1>Encabezado 1</h1>
    <p id="area1">Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://underc0de.org/foro">Texto del link</a>
<script>
let parrafo1 = document.getElementById('area1');
document.write("<br>" + parrafo1.innerHTML);
document.write("<br>" + parrafo1);
alert(parrafo1.innerHTML);
</script>
</body>
</html>


Si no funcionó, nuestras instrucciones de JavaScript se insertaron antes de las salidas HTML de los párrafos. Entonces no viene ningún contenido, sino mensajes de error en forma de "Uncaught TypeError: Connot read property ...".

¡Probalo, porque en el próximo capítulo nos haremos independientes de la posición de nuestras declaraciones de JavaScript en nuestro archivo!
#4
Front-end / Curso de JavaScript | 12. DOM - el Document Object Model
Julio 21, 2022, 12:47:32 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Introducción al DOM - Document Object Model
La interfaz se crea con HTML y CSS, y el contenido de la salida HTML se puede ampliar o intercambiar con JavaScript. De la misma forma, se puede utilizar JavaScript para reaccionar ante el uso del ratón o del teclado.

El primer paso para manipular la salida HTML es observar el DOM. DOM significa "Document Object Model" o en español: "Modelo de objetos del documento". El DOM está disponible para nosotros en cualquier navegador que nos muestre una página HTML.

A través del Modelo de objetos del documento (DOM) podemos:


  • abordar a cada elemento HTML individualmente (leer o cambiar).
  • insertar elementos adicionales antes o después de ciertos elementos.
  • ¡DOM es independiente de un lenguaje de programación! Además de JavaScript, también se puede trabajar con el DOM utilizando Java y ECMAScript.

El navegador nos proporciona dos objetos importantes como parte del DOM:


  • document
  • window

Numerosos métodos y propiedades están disponibles para nosotros a través de estos dos objetos.



Mostrar la consola para la visualización de posibilidades de document/window
Si ahora ingresamos la instrucción console.log(window); o console.log(document); en la consola, vemos una gran cantidad de información a la que podemos acceder y luego manipular a través de esos métodos.

Por ejemplo, se puede imprimir el ancho de la ventana del navegador a través de:

Código: javascript
window.innerWidth



El Document Object Model como árbol
El DOM también se puede imaginar como un árbol. En la siguiente ilustración, el árbol está acostado de lado. La raíz sería el elemento "document".




Árbol HTML y acceso a él a través de DOM
Podemos acceder a cada elemento individual de nuestro árbol a través de los elementos secundarios. Para hacer esto, se debe de moverse a lo largo del árbol HTML. Pero esto no es realmente divertido y, por lo tanto, hay opciones mucho más cómodas, como por ejemplo:


  • document.getElementById("id")
  • document.getElementsByClassName("color1")
  • document.getElementsByTagName("h2")
#5
Front-end / Curso de JavaScript | 11. Array: almacenar datos de forma estructurada
Julio 21, 2022, 09:25:48 AM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

JavaScript y el Array: almacenamiento de datos de forma estructurada
Hasta ahora hemos llegado a conocer las variables; por supuesto, cuando se trata de matrices, surge rápidamente la pregunta de por qué se necesita una matriz si hay variables.

Primero a la pregunta más importante:


¿Que es un Array o matriz?
Una matriz es una colección de datos almacenados en algún tipo de "variable"; a diferencia de una variable, podemos almacenar muchos datos. Supongamos que queremos usar todos los nombres de los jugadores en una tabla de puntuación de un juego. Si tuviéramos que resolver esto con las variables, tendríamos que crear el número correspondiente de variables requeridas de antemano.

Código: javascript
let nombredeljugador1;
let nombredeljugador2;
let nombredeljugador3;
...


Pero, ¿qué hacemos si no sabemos de antemano cuánto contenido, es decir, cuántas variables, necesitaríamos? Aquí es donde salen a la luz los primeros beneficios del uso de matrices. Simplemente creamos nuestra matriz y luego podemos llenarla con cualquier cantidad de datos.

Código: javascript
let nombredejugadores = ["Encina", "Hector", "Mencia"];


O, más claro:

Código: javascript
let nombredejugadores = [
"Encina", 
"Hector", 
"Mencia"
];


Ahora podemos simplemente imprimir la matriz en la consola:

Código: javascript
console.log(nombredejugadores);



La forma "extraña" de numerar de la matriz
En la salida de la consola ya vimos que el primer elemento de la matriz no tiene el número 1, sino que comienza en 0. ¡Las matrices siempre se numeran desde 0! Es muy importante tener eso en cuenta.

Entonces, si queremos mostrar el primer elemento de una matriz, esto se hace usando el índice 0. Esto se especifica entre corchetes después del nombre de la matriz, como se muestra en el siguiente ejemplo.

Código: javascript
console.log(nombredejugadores[0]);



Más funciones de JavaScript para los Arrays
JavaScript ahora nos ofrece toda una gama de funciones. También podemos expandir una matriz existente con datos adicionales en cualquier momento:


  • push("Nombre del jugador");
  • unshift("Nuevo nombre de jugador");

Ahora, ¿por qué hay 2 formas de extender una matriz? Podemos agregar más datos al final (aquí con push) y al comienzo de la matriz (unshift).

Y la contrapartida de agregar es quitar:

Aquí tenemos de nuevo 2 posibilidades: al principio y al final.


  • ARRAY.pop()
  • ARRAY.shift()

Y con esto la última o la primera entrada se puede tomar el palo.

En la mayoría de las veces, se necesita el contenido eliminado para alguna acción; obtenemos esto como un valor de retorno en la acción de eliminar:

Código: javascript
let ultimaentrada = nombredejugadores.pop();
console.log(ultimaentrada);


O desde el comienzo de la matriz:

Código: javascript
let primerentrada = nombredejugadores.unshift();
console.log(primerentrada);



Otras funciones a menudo requeridas para los Arrays
Después de ya no saber cuántos datos se han almacenado en la matriz, simplemente podemos consultar el recuento. Para hacer esto, el nombre de la matriz se concatena con la función length:

Código: javascript
console.log(nombredejugadores.length);


Por supuesto, siempre podemos abordar a los elementos de las matrices a través del índice; la mayoría de las veces necesitamos todos los elementos, por ejemplo, para una salida. Esto requiere bucles, que conoceremos en un capítulo aparte.
#6
Front-end / Curso de JavaScript | 10. Números aleatorios con JavaScript
Julio 20, 2022, 05:16:57 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Números aleatorios con JavaScript: el primer pequeño juego de cálculo mental
Nuestro objetivo es programar juegos con JavaScript. Hasta ahora conocimos muy pocos comandos como para programar un juego con ellos. Pero con cada comando adicional y cada nueva posibilidad, surgen opciones adicionales.

Nuestro primer juego (muy simple) es el cálculo mental contra la computadora (o el celular), que por supuesto siempre tiene razón. Así que es mas bien un juego de control acerca de qué tan rápido uno es en el cálculo mental.

Lo que hemos aprendido hasta ahora es:


  • Podemos imprimir algo en la ventana del navegador.
  • Podemos realizar cálculos.
  • Podemos almacenar contenido en las variables (aquí necesitamos números para nuestro juego).

¿Qué nos falta todavía para nuestro juego?


  • Numeros al azar.
  • La posibilidad de no mostrar el resultado de forma inmediatamente y visible.

Conoceremos ambas cosas en los siguientes capítulos y así podremos implementar nuestro primer pequeño juego.


Generar números aleatorios
Ningún juego puede prescindir de un proceso aleatorio y, por lo tanto, de números aleatorios. Ahora vamos a familiarizarnos con un método llamado random() en el objeto Math. Por favor, no se asusten por los términos objeto y método. El concepto de los objetos y métodos se explicará en detalle más adelante; lo bueno es que podemos simplemente usarlo al principio y experimentar la función. Lo típico es conectar el objeto a través de un punto con el método deseado. La ortografía es importante: ¡Math debe de escribirse con mayúscula! Por favor pongan atención en ello.

Veamos qué obtenemos como resultado cuando simplemente ejecutamos Math.random();.

Código: javascript
let numero1;
numero1 = Math.random();
document.write(numero1);


Genial: cada vez que ejecutamos el programa, obtenemos un número aleatorio. Simplemente actualicen sus navegadores reiteradamente.



Lo llamativo aquí es que este número siempre es menor a 1.

Tal como lo define el comando random(), siempre se generan números entre 0 (incluido 0) y menos de 1.

No queremos usar números tan pequeños para nuestro juego, todavía no.

Si ahora queremos obtener números aleatorios entre 1 y 10, entonces tenemos que incluir esto en nuestro cálculo.

Veamos la sección superior. Queremos números hasta el 10 (incluido el 10). Para hacer esto, primero tenemos que multiplicar nuestro número por 10:

Código: javascript
let numero1;
numero1 = Math.random() * 10;
document.write(numero1);


Si lo ejecutamos varias veces, obtenemos, por ejemplo, los siguientes resultados:





Para obtener también el 10, necesitamos sumar 1 a nuestro resultado.

Código: javascript
let numero1;
numero1 = Math.random() * 10 + 1;
document.write(numero1);


Esto nos da nuestro rango de números entre 1 y 10, un 1 como también un máximo de 10. Si se quisiera un rango de números diferente que no necesariamente tenga que comenzar con 1, se aplica la siguiente fórmula (en aras de la exhaustividad):

Math.random() * (maximo - minimo + 1) + minimo;

Por supuesto, queremos mantener nuestro juego de cálculo mental de forma simple - no deben de haber lugares decimales en nuestros números. Aquí, nuestro objeto Math tiene el método floor. También este método podemos usar fácilmente sin tener mucha idea de los métodos y objetos. Lo único importante para nosotros es que como resultado de floor el siguiente entero más bajo (es decir, sin lugares decimales) vuelva (el método de floor redondea los números).

Ahora, por supuesto, podemos usar una notación más engorrosa para mantenerlo transparente para el comienzo, como por ejemplo:

Código: javascript
let numero1;
let numeroentero;
numero1 = Math.random() * 10 + 1;
numeroentero = Math.floor( numero1 );
document.write(numeroentero);


Sin embargo, nuestros 2 nuevos "comandos" también se pueden anidar. Entonces no necesitamos ninguna variable adicional que deba definirse por separado.

El código entonces se ve así:

Código: javascript
let numero1;
numero1 = Math.floor( Math.random() * 10 + 1 );
document.write(numero1);


El resultado devuelto por Math.random() que se pasa al método Math.floor() (siempre se lee desde atrás) y ese resultado se almacena en nuestra variable número1.

Para nuestro juego queremos 2 variables, que luego multiplicamos. Los números individuales y el resultado de la multiplicación deben mostrarse directamente en el navegador. ¡Pruébelo ustedes mismos antes de ver la siguiente solución!

Código: javascript
let numero1;
let numero2;
let resultado;
numero1 = Math.floor( Math.random() * 10 + 1 );
numero2 = Math.floor( Math.random() * 10 + 1 );
resultado = numero1 * numero2;
document.write(numero1 + ' * ' + numero2 + ' = ' + resultado );


Por supuesto, el juego no es realmente emocionante si el resultado se muestra inmediatamente. Podríamos desplazar el resultado hacia abajo en la pantalla del navegador para que el jugador primero tenga que desplazarse hacia abajo para encontrar la solución. Todavía no podemos hacer nada más con nuestro nivel actual de conocimiento.

Código: javascript
let numero1;
let numero2;
let resultado;
numero1 = Math.floor( Math.random() * 10 + 1 );
numero2 = Math.floor( Math.random() * 10 + 1 );
resultado = numero1 * numero2;
document.write(numero1 + ' * ' + numero2 + ' = ?');
document.write('



     mucho 
     
     ');
document.write(numero1 + ' * ' + numero2 + ' = ' + resultado );


Este resultado solo debe mostrarse después de una acción del jugador. Ahora también llegamos al punto en que queremos separar la salida HTML de nuestra salida del programa JavaScript. Hasta ahora la salida a través de document.write(); es un método poco práctico. Queremos poder agregar o reemplazar áreas en un archivo HTML existente. Para esto necesitamos el DOM (en inglés "Document Object Model"), que será introducido en los siguientes capítulos.
#7
Front-end / Curso de JavaScript | 9. Realizar cálculos
Julio 19, 2022, 07:42:34 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Cálculos con JavaScript
Los cálculos habituales son la suma (+), la resta (-), la multiplicación (*) y la división (/).

Como ejemplo se tiene que sumar aquí.

Código: javascript
var resultado = 3 + 6;
alert(resultado);


O división.

Código: javascript
var resultado = 3 / 6;
alert(resultado);


Muy a menudo se requiere sumar 1 a un número. Por ejemplo en bucles.

Código: javascript
var vuelta = 1;
vuelta = vuelta + 1;
alert(vuelta);


Hay una notación más corta para esto.

Código: javascript
var vuelta = 1;
vuelta += 1;
alert(vuelta);


Esta es una notación abreviada, por lo general no se verá esta notación larga; y menos es más, por lo que hay una notación aún más corta:

Código: javascript
var vuelta = 1;
vuelta++;
alert(vuelta);


Qué sucede: se suma 1 a la variable vuelta.

Podés hacer lo mismo con restar, es decir, restar 1. Aquí, también, las 3 notaciones son posibles (pero generalmente se prefiere la más corta).

Código: javascript
var vuelta = 1;
vuelta = vuelta  - 1;
vuelta -= 1;
vuelta--;
alert(vuelta);
#8
Front-end / Curso de JavaScript | 8. Strings y JavaScript
Julio 19, 2022, 07:10:26 PM
Strings y JavaScript
En JavaScript, los datos de texto se almacenan en un string. A diferencia de otros lenguajes de programación, no hay tipos de datos adicionales en JavaScript como para caracteres de 1 dígito.

UTF-16 es el formato interno de JavaScript para almacenar cadenas. Importante: no está vinculado a la codificación de la página (encoding). Por lo tanto, no importa si un sitio web especifica "ISO-8859-1" o "UTF-8" en el encabezado. JavaScript siempre usa UTF-16.


Estructura básica de las cadenas
Las cadenas se asignan a una variable. Esto se puede hacer usando el conocido var o usando let. Las comillas van después del signo igual:

Código: javascript
var x = "Curso de JavaScript";
var y = 'Curso de JavaScript';
var z = `Curso de JavaScript`;


Ahora usamos 3 comillas diferentes en el ejemplo anterior, y la buena noticia es que las 3 funcionan bien. Pero ¿cuál es la diferencia?

Las comillas simples y dobles tienen el mismo uso. No debe haber compaginaciones en la siguiente línea, de lo contrario, JavaScript arrojará mensajes de error.

Las comillas invertidas (en inglés "backticks") son la forma más moderna de comillas. Con los "backsticks" tenemos la ventaja de que también se puede producir una ruptura entre las comillas invertidas sin que JavaScript se queje con un error.

Código: javascript
var z = `Curso de JavaScript
para 
aprender JavaScript`;


Pero, ¿cómo podríamos incluir una ruptura en el tipo tradicional de comillas? Y la segunda pregunta: ¿cómo se puede empaquetar una comilla, que se imprima, en una cadena como contenido?

Es posible "enmascarar" caracteres especiales, como las distintas comillas. Así se llama esta técnica. Simplemente se escribe una barra invertida antes del "carácter problemático" y todo está bien. Entonces, si se desea guardar una comilla en una cadena como contenido, simplemente se escribe \":

Código: javascript
var x = "Hoy es un \"gran\" dia";


Y entonces tenemos como salida (si imprimimos la cadena):



Si se va a imprimir una barra invertida, entonces se inserta una barra invertida antes de la barra invertida:


CodigoResultadoDescripcion
\""Comilla doble
\''Comilla simple
\\\Barra invertida

Compaginar líneas largas
Los programadores son muy reacios a tener líneas de más de 80 caracteres en su código. Entonces, si una declaración de JavaScript no cabe en una línea y debe de ajustarse, hay varias opciones.

Compaginación después de un operador:

Código: javascript
document.getElementById("salida").innerHTML =
   "Hola mundo";


O simplemente concatenar la salida con "+".

Código: javascript
document.getElementById("salida").innerHTML = "Hola " +
   "mundo";



Los strings tienen propiedades y métodos
Los strings tienen propiedades y métodos. Una de las propiedades más conocidas es la longitud de caracteres. En el siguiente ejemplo se determina la longitud de caracteres de la cadena "x" y se almacena en una variable. ¿Por qué se almacena esto en una nueva cadena extra y no se imprime directamente? Por razones didácticas. Esta es la mejor manera de ver la estructura de la instrucción length:

Código: javascript
var x = "Hola mundo";
var longitud = x.length;
alert(longitud);


Importante: no hay paréntesis después de la propiedad length. ¿Por qué? ¡Es una propiedad y no un método o una función!

Más sobre esto en un capítulo siguiente.
#9
Front-end / Curso de JavaScript | 7. Tipos de datos en JavaScript
Julio 19, 2022, 01:23:43 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta


Tipos de datos en JavaScript
JavaScript no necesita una definición del tipo de la variable. JavaScript determina el tipo de variable en función del propio contenido. Tenemos 3 tipos diferentes de contenido:


  • String - es decir, texto.
  • Number - es decir, números.
  • Boolean = interruptor, encendido o apagado o, en la jerga informática, true o false.

¡Las cadenas siempre se ponen entre comillas!

Código: javascript
var variableTexto = "Aqui viene el texto";


¡Cualquier lugar decimal en los números se da con el punto americano! Así que no te tropeces con los lugares decimales - es efectivo un "lugar después del PUNTO".

Código: javascript
var variableNumero = 34.23;


En el tipo "Booleano" solo hay 2 estados: true o false; estos también se pueden especificar con "1" para true y "0" para false. Es más claro especificar las variables (también para diferenciarlas de los números) a través de true o false.

Código: javascript
var variableBoolean = true;


También existen peligros que acechan en la naturaleza de la tipificación automática de datos. El siguiente ejemplo debería aclarar esto.

Código: javascript
var numeroa = 3;
console.log(numeroa);


Obtenemos 3.

Si ahora sumamos este número a otro:

Código: javascript
var numeroa = 3;
numeroa = numeroa + 6;
console.log(numeroa);


Ahora se muestra la adición. Pero si accidentalmente ponemos el segundo número entre comillas, ¡obtendremos un resultado diferente!

Código: javascript
var numeroa = 3;
numeroa = numeroa + '6';
console.log(numeroa);


Ahora se usan los tipo de datos "number" y "string" y JavaScript convierte automáticamente todo en el tipo de datos "string" y obtenemos el texto "36" como resultado.
#10
Front-end / Curso de JavaScript | 6. Comentar JavaScript
Julio 18, 2022, 07:36:29 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Comentarios de JavaScript - Comentar áreas en JavaScript
Como en todos los lenguajes de programación, los comentarios en JavaScript ayudan a proporcionar una descripción general y comentar las áreas del programa en JavaScript ayuda a limitar los errores.

Los comentarios en JavaScript ayudan a orientarse rápidamente si se escribió el programa hace meses y luego se desea realizar cambios y extensiones en algún momento. Incluso si varias personas están trabajando en el código fuente. A veces te sentas años más tarde frente a un fragmento de código fuente y te sorprendes de que haya funcionado hasta ahora y apenas podés creer que lo hayas programado vos mismo. Es entonces cuando estás contento con los breves comentarios explicativos.

Especialmente cuando se está aprendiendo, se puede agregar comentarios delante de ciertas líneas o comandos; esto ayuda a obtener una mejor visión general de para qué sirve el comando y tal vez también para saber quién agregó el comando.

Comentar el código fuente o áreas del programa individuales en JavaScript se usa principalmente en proyectos complejos para identificar fuentes de error. Con el comando de comentario se puede desactivar líneas individuales.


Comentarios y comentar funcionan de la siguiente manera
2 barras comentan una línea, exactamente la que está detrás:

Código: javascript
//


Asimismo, no solo podés desactivar una sola línea, sino un área completa. Comenta una sección entera:

Código: javascript
/*
area comentada, que tambien puede ser varias
filas de largo
*/



Ejemplo 1: agregar un comentario en JavaScript

Código: javascript
<h1>Comentar ejemplos</h1>

<script> 
document.write(" Hola "); 
document.write(" mundo ");
// Saludo 
document.write(" redondo ");
</script>


Los "comandos" para los comentarios son los mismos que para comentar áreas en el código fuente, es decir, para hacerlos "invisibles" para el flujo del programa. En el siguiente ejemplo, la salida de la palabra "mundo" se desactiva durante la ejecución del programa; los programadores lo llaman "comentar".


Ejemplo 2: comentar una sola línea en el código fuente de JavaScript
Código: javascript
<h1>Comentar ejemplos</h1> 

<script> 
document.write(" Hola "); 
document.write(" mundo ");
// document.write(" redondo "); 
</script>


Y si se van a comentar áreas enteras, entonces todo entre /* y */, como en el siguiente ejemplo.


Ejemplo 3: Comentar un área

Código: javascript
<h1>Comentar varias lineas</h1>

<script> 
document.write(" Hola "); 
/*
document.write(" mundo ");
document.write(" redondo ");
*/
</script>
#11
Front-end / Curso de JavaScript | 5. Aprender mejor JavaScript con el modo estricto
Julio 18, 2022, 06:35:39 PM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Aprender JavaScript de una forma mejor a través del "modo estricto"
Originalmente, el lenguaje de programación JavaScript era muy tolerante a errores, también debido a su historia. Los "campamentos" de los desarrolladores de navegadores también abusaron originalmente de JavaScript como una herramienta poderosa, por lo que JavaScript tuvo que volverse más tolerante hacia las fallas en sus primeros días.

Esto condujo rápidamente a una programación descuidada y propensa a errores. Y aquí es donde el simple aprendizaje del idioma ayuda a adquirir el conocimiento sin procedimientos propensos a errores y a activar el modo más estricto ("stict mode"), que señala rápidamente errores y problemas.


Activar ,,strict mode"
Podemos activar el modo estricto para todo el programa o solo para ciertas partes del programa. Por supuesto, al aprender JavaScript, tiene sentido activar siempre el modo más estricto para que se señalen todos los errores y las posibles fuentes de errores y problemas.

Para este propósito, el "modo estricto" se activa justo al comienzo de nuestro programa JavaScript:

Código: javascript
'use strict';
let x = 42;


Las comillas en torno a nuestro use strict son importantes para los navegadores más antiguos que aún no conocen esta instrucción. Para estos, la línea es solo una cadena y se ignora. No importa si se utilizan comillas simples o dobles.


Efectos del "modo estricto"
A partir de ahora, ya no podemos usar las variables de manera descuidada, sino que debemos declararlas (es decir, introducirlas con let o var).

El siguiente código JavaScript simplemente se ejecutaría si no fuera por el use strict, incluso si se programara de manera descuidada debido a la declaración faltante. Tan pronto como se activa nuestro modo estricto, obtenemos una página de navegador vacía (el programa finaliza) y un mensaje de error en la consola.

Código: javascript
'use strict';
contenido = 'Hola mundo';


El mensaje de error puede diferir según el navegador, así que no te sorprendas si aparece un mensaje de error diferente en el curso (aquí se usa Google Chrome) que cuando usas un navegador diferente.

Entonces el código correcto sería:

Código: javascript
'use strict';
let contenido = 'Hola mundo';


Hay otros efectos del "modo estricto" - estos serán explicados en el transcurso del curso en la parte apropiada. Por lo tanto, utiliza siempre use strict en las siguientes partes del curso.
#12
Front-end / Curso de JavaScript | 4. Variables en JavaScript
Julio 18, 2022, 04:17:22 AM
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Variables en JavaScript
Las variables se pueden crear y usar en JavaScript (al igual que en cualquier otro lenguaje de programación). En los siguientes ejemplos, puede que no sea inmediatamente obvio por qué, por ejemplo, el nombre se empaqueta en una variable y luego se genera cuando el nombre también podría generarse de inmediato. Estos ejemplos sirven para mostrar el uso. Más tarde vamos a ver que cualquier contenido puede estar en estas variables, por ejemplo, horas alternas, en donde el programa JavaScript creado realiza luego diferentes acciones dependiendo del tiempo.

Para establecer una variable, se asigna un nombre de variable. Este puede ser (casi) cualquiera. Hay algunas excepciones, pero eso no es tan importante para empezar.

En el primer paso creamos una variable y en el segundo paso llenamos esta variable con contenido.

Para causar cierta confusión de inmediato, introduzco 2 comandos para esto:


  • Uno antiguo (que por supuesto aparece en muchos ejemplos y libros).
  • Y la nueva y mejor versión del comando.

Ambos comandos hacen lo mismo; mostraré las sutiles diferencias más adelante.


Crear/definir variables
Para definir una variable, se usa el comando de JavaScript var (que es la vieja variante) o el comando más nuevo let.

Código: javascript
<script>
var contenido;
</script>


O en la nueva forma:

Código: javascript
<script>
let contenido;
</script>


Así le hemos dicho a JavaScript que hay una variable llamada contenido.

A continuación solo continuaré con la nueva variante let - más adelante se seguirá con la comparación entre la variante antigua y la nueva.


Asignar un contenido a una variable
Ahora hemos definido una variable; sin embargo, la variable aún no tiene ningún contenido o valor. Después de definir la variable, podemos asignarle un valor a esa variable:

Código: javascript
<script>
let contenido;
contenido = 'Hola mundo';
</script>


Después del signo igual, asignamos el texto "Hola mundo" a la variable denominada contenido. Para este propósito, el texto se empaqueta entre comillas. ¡En un texto estático, no importa si son comillas simples o dobles! Las comillas dobles también podrían usarse en el ejemplo:

Código: javascript
contenido = "Hola mundo";


Y ahora podemos trabajar con esta variable, es decir, podemos mostrar el contenido de la variable en la pantalla.

Código: javascript
<script>
let contenido;
contenido = 'Hola mundo';
document.write(contenido);
</script>


La salida en la pantalla es "Hola mundo".

Por supuesto, también podemos trabajar con el contenido de la variable, es decir, por ejemplo, realizar cálculos y otras cosas. Estas posibilidades se mostrarán en los siguientes capítulos. En primer lugar, sigamos con el uso correcto de las variables.


Definir una variable y asignarle un valor en una línea
Se comienza con let y luego con el nombre de la variable y la asignación del contenido (entre ambos un signo igual).

En la salida, ahora se proporciona el nombre de la variable en lugar del texto (¡sin comillas!).

Código: javascript
<script>
let contenido = 'Hola mundo';
document.write(contenido);
</script>


También es posible omitir let, pero entonces creamos una variable global, que puede tener sus inconvenientes al usar funciones. Más sobre este tema con las funciones más adelante. ¡Así que tene cuidado aquí! Como resultado, el siguiente programa JavaScript es el mismo.

Código: javascript
<script>
contenido = 'Hola mundo';
document.write( contenido );
</script>


No es un buen estilo establecer variables globales a menos que realmente se necesiten globalmente.


Mayúsculas y minúsculas: nombres de variables en JavaScript
Otro peligro con las variables es la ortografía de los nombres de las variables. Estos son "Case-sensitivitys", es decir, la variable con el nombre variablepropia es diferente de variablePropia - ¡presta atención a las mayúsculas y minúsculas!

La salida ilustra esto en el ejemplo:

Código: javascript
let variablepropia = "Hola";
let variablePropia = "mundo";
alert (variablepropia);


Por lo tanto, tene mucho cuidado aquí: es bueno si el editor de texto sugiere variables que ya están en uso, que simplemente se puedan adoptar. Menos errores tipográficos - más diversión con JavaScript.


Diferencias entre let y var
El comando let de JavaScript es más nuevo y está definido mucho más. Esto debería facilitar la creación de programas estables y sin errores. Por ejemplo, se puede definir una variable solo una vez usando let. Si se tuviera que definir nuevamente la variable más adelante en el código usando let, se recibiría un mensaje de error.

¡El siguiente programa sale mal!

Código: javascript
let contenido = "Hola";
let contenido = "mundo";
alert (variablepropia);


Por otro lado, la vieja variante a través de var funciona sin un mensaje de error porque la verificación no es tan precisa allí. Si bien esto puede parecer una ventaja a primera vista, conlleva el riesgo de un código descuidado y de tener errores en el programa.

Código: javascript
var contenido = "Hola";
var contenido = "mundo";
alert (variablepropia);


Hay otras diferencias entre let y var. Sin embargo, estas solo se vuelven comprensibles cuando conozcamos las funciones y usamos variables allí. Volveré a las diferencias entre let y var en el capítulo correspondiente.
Páginas1