Aplicaciones Web

JavaScript es el único lenguaje de programación que funciona en los navegadores de forma nativa (lenguaje interpretado sin necesidad de compilación). Por tanto se utiliza como complemento de HTML y CSS para crear páginas webs.

Los programas en este lenguaje se llaman scripts. Se pueden escribir directamente en el HTML de una página web y ejecutarse automáticamente a medida que se carga la página.

Los scripts se proporcionan y ejecutan como texto plano. No necesitan preparación especial o compilación para correr.

¿Por qué se llama JavaScript?

Cuando JavaScript fue creado, inicialmente tenía otro nombre: “LiveScript”. Pero Java era muy popular en ese momento, así que se decidió que el posicionamiento de un nuevo lenguaje como un “Hermano menor” de Java ayudaría.
Pero a medida que evolucionaba,JavaScriptse convirtió en un lenguaje completamente independiente con su propia especificación llamada ECMAScript, y ahora no tiene ninguna relación con Java.

Hoy, JavaScript puede ejecutarse no solo en los navegadores, sino también en servidores o incluso en cualquier dispositivo que cuente con un programa especial llamado El motor o intérprete de JavaScript.
El navegador tiene un motor embebido a veces llamado una “Máquina virtual de JavaScript”.

¿Qué puede hacer JavaScript en el navegador?

• Agregar nuevo HTML a la página, cambiar el contenido existente y modificar estilos.
• Reaccionar a las acciones del usuario, ejecutarse con los clics del ratón, movimientos del puntero y al oprimir teclas.
• Enviar solicitudes de red a servidores remotos, descargar y cargar archivos (Tecnologías llamadas ).
• Obtener y configurar cookies, hacer preguntas al visitante y mostrar mensajes.
• Recordar datos en el lado del cliente con el almacenamiento local (“local storage”).

Hola Mundo en JS

	Metodo 1
	<script>
		alert( '¡Hola, mundo!' );
	</script>
	

	Metodo 2
	<script>
		consoleg.log("Hola Mundo")
	</script>
	

Elementos de programación

Operadores básicos, matemáticas

Comparaciones

Operadores Lógicos

Condicional: if

Bucles: while y for

Tabla de multiplicar de 9

			
	<script>
		let tabla = 9;
		for(let n = 1; n<= 10 ;n++){
		  document.write(`${tabla} * ${n} = ${n*tabla} <br>`);
		}
	</script>
		

Imprima los números del 1 al 100 marcando los impares y calcule la suma de todos los números pares e impares

	<script>
		let sumImp = 0;
		let sumPar = 0;
		for(let i = 1; i<= 100; i++){
			if( i % 2 == 0){
				document.write(`${i} `);
				sumPar ++;
			}else{
				document.write(`<span class='text-danger'>${i}</span>`);
				sumImp ++;
			}
		}
		document.write(`<h3>La suma de todos los números Pares es: ${sumPar} </h3>`);
		document.write(`<h3>La suma de todos los números Impares es: ${sumImp} </h3>`);
	</script>
			

Practicas

Imprime todos los números entre 100 y 200 que sean divisibles por 3 o 7

Imprime todos los números entre 100 y 200 que sean divisibles por 3 y 7

¡Calcula el factorial de 10!

Imprima un número entero entre 20 y 80 que pueda ser divisible por 3 en la página, cada 5 líneas.

Estructura de un documento Java Script

Funciones Variables Globales y Locales

	// Importaciones

	// Elementos

	// Apis

	// Variables y constantes globales
	let nombre="Ar Sistema";
	// Cargador
	addEventListener("DOMContentLoaded",()=<{
		saludar(nombre)
	})

	// Funciones
	function saludar(nombre){
		let nombreLocal="Carlos"
		alert("Hola "+nombre+" y a " + nombreLocal);
		alert(`Hola ${nombre} y a  ${nombreLocal}`);
	}
		

La diferencia entre alert("Hola "+nombre+" y a " + nombreLocal); y alert(Hola ${nombre} y a ${nombreLocal}); es la forma en que se concatenan las variables en el mensaje de alerta.

alert("Hola "+nombre+" y a " + nombreLocal);
En esta línea de código, se utiliza el operador de concatenación (+) para unir las cadenas de texto y las variables nombre y nombreLocal.
Las variables se insertan en el mensaje de alerta utilizando el operador + para concatenar las cadenas de texto y las variables.

alert(Hola ${nombre} y a ${nombreLocal});
En esta línea de código, se utiliza la sintaxis de plantilla de cadena (template literals) para construir el mensaje de alerta.
Los template literals se delimitan por comillas invertidas (`) en lugar de comillas simples o dobles. Dentro de los template literals, se pueden incluir variables utilizando la sintaxis ${variable}.
En este caso, las variables nombre y nombreLocal se insertan directamente en el mensaje de alerta utilizando la sintaxis ${nombre} y ${nombreLocal}.

Ambas formas logran el mismo resultado, que es mostrar un mensaje de alerta que incluye las variables nombre y nombreLocal.
Sin embargo, la sintaxis de plantilla de cadena (`) proporciona una forma más legible y conveniente de concatenar variables en una cadena de texto, ya que evita la necesidad de utilizar el operador + repetidamente.
Además, los template literals también permiten realizar operaciones más complejas dentro de las llaves ${} si es necesario.

Estructura de una consulta de API en Java Script

			// Elementos
			const elementoEl  = document.querySelector("#elemento");
			
			// Apis
			APIProductos    ="https://dummyjson.com/products";
			
			// Cargador
			addEventListener("DOMContentLoaded",()=>{
				
				cargarApi();
				
			})
			
			// Funciones
			const cargarApi = async()=>{
				try{
					const resp = await fetch(APIProductos)
					if(resp.status===200){
						const datos = await resp.json();
						renderApi(datos);
					}else{
						console.log("error del api")
					}

				}catch(error){
					console.log(error);
				}
			}
		

Renderizar el API

	
			function renderApi(datos){
				let valor="";
				datos.forEach(element => {
					valor+=
					`
						Etiquetas HTML ${element} cierre de las equiquetas
					
					`
				});
				elemtoEl.innerHTML=valor;
			}