¿Qué es JavaScript?
Es un lenguaje de programación del tipo intérprete (vas traduciendo las sentencia una tras otra y no todas). Su principal fortaleza es en la programación web, pero se puede encontrar en distintos tipos de proyectos y aplicaciones.
Variables de JavaScript
Para declarar una variable en JS existen 4 formas que son anteponer "let", "const", "var" o no anteponer nada. No es necesario indicar el tipo de dato como en otros lenguajes de programación, nuestra variable se adapta al tipo de valor contenido
- Si bien, se puede declarar una variable sin anteponer nada, no es una buena práctica
- Se emplea const para constantes, valores que no van a alterarse
- Se puede emplear var o let para valores que irán cambiando, la diferencia entre ambos, es que var es una versión antigua y puede producir un conflicto conocido como "hoisting" o elevación que permite asignar un valor a una variable y luego declararla o que sea accedida fuera de su entorno o "scope". Se recomiendo emplear let en nuevos proyectos.
/*
Aprendiendo a declarar variables
*/
const PI = 3.1416 //Constante numérica
var num; // Variable declarada con VAR, puede o no tener una asignación
let numero = 100; // variable numérica (es posible solo declararla y luego asignarle valor)
let texto = "hola :v"; // variable String
let logico = false; // variable lógica
let objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
let arreglo = ["Argos","Gardfield","Shyrley", "Pelusa"]; // variable tipo arrayAdemás, podemos apreciar como se crean comentarios de línea con // y de bloque con /* y */
Ejecutar JavaScript en consola
En equivalencias con otros lenguajes de programación, en el caso de JavaScript, se emplea la combinación console.log(...) que puede contener múltiples elementos. Por ejemplo:
/*Función de suma de dos elementos*/
function suma(a, b) {
let r = a + b;
return `${a} + ${b} = ${r}`;
}
console.log(suma(5, 10));En la consola del navegador donde se ejecute el HTML que contiene al código JS se apreciará:
5 + 10 = 15
Se puede emplear la sentencia console.log("Hola mundo"); para el clásico mensaje de saludo.
JavaScript con HTML
JavaScript puede ser insertado dentro de un documento HTML mediante la etiqueta <script> o en documentos .js separados que pueden ser llamados en la etiqueta <script>, especialmente útil cuando se llama a la biblioteca JQuery por ejemplo.
| Insertado como archivo externo | Insertado dentro del archivo HTML |
|---|---|
|
|
Existe otras formas de ejecutar código JavaScript en HTML, una de ellas es colocar el código como valor del atributo "onclick" como el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<!-- Elementos HTML -->
<label>Ingrese las notas</label><br/><br/>
#1: <input type="number" min='0' max='20' id='n1'/><br/>
#2: <input type="number" min='0' max='20' id='n2'/><br/>
#3: <input type="number" min='0' max='20' id='n3'/><br/>
#4: <input type="number" min='0' max='20' id='n4'/><br/>
<br/>
<!-- Código JavaScript dentro de un elemento HTML -->
<button type='button' onclick="
/* Código JavaScript dentro de onclick */
let n1 = parseInt(getElementById('n1').value);
let n2 = parseInt(getElementById('n2').value);
let n3 = parseInt(getElementById('n3').value);
let n4 = parseInt(getElementById('n4').value);
let prom = (n1+n2+n3+n4)/4;
getElementById('prom').innerHTML=prom;
/* Fin del codigo JS */
">Procesar</button>
<br/>
Promedio: <span id='prom'> </span>
</body>
</html>Esto genera el siguiente resultado:
#1:
#2:
#3:
#4:
Promedio:
Podemos ver el uso de algunas funciones como parseInt, getElementById, innerHTML
y value.
A grandes rasgos se puede explicar su funcionamiento:
- parseInt: Convierte un String válido a entero, para poder hacer operaciones aritméticas.
- getElementById: captura un elemento HTML indicando su id
- innerHTML: inserta contenido dentro del elemento HTML
- value: captura el valor del atributo 'value' de un elemento HTML
No hay comentarios:
Publicar un comentario