viernes, 27 de marzo de 2020

Fundamentos de JavaScript

¿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. 
  1. /*
  2. Aprendiendo a declarar variables
  3. */
  4. const PI = 3.1416 //Constante numérica
  5. var num; // Variable declarada con VAR, puede o no tener una asignación
  6. let numero = 100; // variable numérica (es posible solo declararla y luego asignarle valor)
  7. let texto = "hola :v"; // variable String
  8. let logico = false; // variable lógica
  9. let objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
  10. let arreglo = ["Argos","Gardfield","Shyrley", "Pelusa"]; // variable tipo array

Ademá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: 

  1. /*Función de suma de dos elementos*/
  2. function suma(a, b) {
  3.     let r = a + b;
  4.     return `${a} + ${b} = ${r}`;
  5. }
  7. 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 
  1. <head>
  2.    <script src="doc.js" 
  3.       type="text/javascript">
  4.    </script>
  5. </head>
 
  1. <script type="text/javascript">
  3.    //Código JS
  5. </script>

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:


  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.  <title>Prueba</title>
  5.    </head>
  6.    <body>        
  7.  <!-- Elementos HTML -->
  8.  <label>Ingrese las notas</label><br/><br/>
  9.  #1: <input type="number" min='0' max='20' id='n1'/><br/>
  10.  #2: <input type="number" min='0' max='20' id='n2'/><br/>
  11.  #3: <input type="number" min='0' max='20' id='n3'/><br/>
  12.  #4: <input type="number" min='0' max='20' id='n4'/><br/>
  13.  <br/>
  14.  <!-- Código JavaScript dentro de un elemento HTML -->
  15.  <button type='button' onclick="
  16.   /* Código JavaScript dentro de onclick */
  17.   let n1 = parseInt(getElementById('n1').value);
  18.   let n2 = parseInt(getElementById('n2').value);
  19.   let n3 = parseInt(getElementById('n3').value);
  20.   let n4 = parseInt(getElementById('n4').value);  
  21.   let prom = (n1+n2+n3+n4)/4;
  22.   getElementById('prom').innerHTML=prom;
  23.   /* Fin del codigo JS */
  24.  ">Procesar</button>
  25.  <br/>
  26.  Promedio: <span id='prom'>&nbsp;</span> 
  27.    </body>
  28. </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
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)