Una guía para principiantes para aprender JavaScript

Edinson carranza saldaña
Tiempo de lectura: 6 minutos

Hola bienvenidos al mejor post de como entender javascript con todas sus caracteristicas, javascript nos permite realizar distintos proyectos tanto en web, móviles, juegos entre otros.

Antes de empezar vamos a necesitar unas cosas básicas para completar nuestro aprendizaje.

  1. Disponibilidad de tiempo
  2. Motivación constante
  3. Un browser (Google chrome o Firefox)
  4. Practicar

PARTE 1

¿Cómo agregamos javascript en nuestro archivo HTML?

JavaScript se puede agregar a una página web de tres formas diferentes:

  1. Script en línea
  2. Guión interno
  3. Guión externo
  4. Múltiples scripts externos

Las siguientes secciones muestran diferentes formas de agregar código JavaScript a su página web.


Script en línea

Creamos un archivo en nuestro directorio de preferencia, el archivo como titulo y extension se debe llamar index (hace referencia a nuestra pagina principal) y .html (hace referencia a nuestro formato de documento), quedaria de esta manera: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Edinsoncs:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Hola bienvenidos a edinsoncs!')">Dame Click!!!</button>
  </body>
</html>

De esta manera realizamos la creación de nuestro archivo principal y con la ayuda de onclick visualizaremos un popup con el mensaje escrito.


Script interno

Se puede escribir en el encabezado o en el cuerpo , pero es preferible ponerlo en el cuerpo del documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>edinsoncs:Internal Script</title>
    <script>
      console.log('Welcome to edinsoncs')
    </script>
  </head>
  <body></body>
</html>

Así es como escribimos un script interno la mayor parte del tiempo. El código javascript se aplica en la misma página, las acciónes como onclick son eventos que a lo largo de nuestros desarrollos lo usamos. para comprobar funcionalidades o información siempre usaremos console.log() como se ve en el ejemplo a continuación

<!DOCTYPE html>
<html>
  <head>
    <title>30DaysOfScript:Internal Script</title>
  </head>
  <body>
    <button onclick="alert('Bienvenido edinsoncs alert!');">Click Me</button>
    <script>
      console.log('Bienvenido edinsoncs')
    </script>
  </body>
</html>

Abra la consola del navegador para ver el resultado de console.log ()


Script Externo

Al igual que en el script interno, el enlace del script externo puede estar en el encabezado o en el cuerpo, pero se prefiere ponerlo en el cuerpo. Primero, debemos crear un archivo JavaScript externo con extensión .js. Todos los archivos que terminan con la extensión .js. Todos los archivos que terminan con la extensión .js son archivos JavaScript. Cree un archivo llamado Introduction.js dentro del directorio de su proyecto, escriba el siguiente código y vincule este archivo .js en la parte inferior del cuerpo.

console.log('Bienvenido a edinsoncs desde la consola');
<! DOCTYPE html >
 < html > 
  <head>
    <title>Edinsoncs:External script</title>
    <script src="codigo.js"></script>
  </head>
  <body></body>
</html>

Guiones externos en el cuerpo :

<!DOCTYPE html>
<html>
  <head>
    <title>Edinsoncs:External script</title>
  </head>
  <body>
    //Tambien podemos agregar el script en la parte superior, pero se recomienda en la parte inferior por temas de optimización
    <script src="introduction.js"></script>
  </body>
</html>

Script Multiple Externos

Como se menciona en el titulo, tambien es posible incorporar multitples archivos externos en una o varias páginas, recuerden que los archivos deben tener un orden para que luego puedan llamar funcciones sin tener ningun problema.

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Externo Scripts</title>
  </head>
  <body>
    <script src="./helloworld.js"></script>
    <script src="./introduction.js"></script>
  </body>
</html>

De esta manera agregamos 2 archivos externos, tambien es posible agregar mutltiples pero se recomienda tener un archivo principal comprimido con todas nuestra lógica de la aplicación.


PARTE 2

Variables

Usamos var , let y const para declarar una variable. La var es funciones alcance, sin embargo dejó y const son ámbito de bloque. En este desafío usamos ES6 y características superiores de JavaScript. Evite el uso de var .

let  name  =  'edinson' 

name=  'richard' 

const  PI  =  3.14  //Cuando usemos una const, no se puede modificar su 
valor en ningun lado de nuestro código, es UNICO.

//PI = 3.14

Tipos de datos

En todo lenguaje de programación contamos con tipos de datos escenciales que todo programador debe conocer, estos tipos de datos son basicamente información que distingue uno de otro, ahora conoceremos esta información.

var number = 101 //Tipo de dato número

var name = 'edinson' //Tipo de dato string

var boolean = true //Boolean tiene dos estados TRUE o FALSE

var obj = {} //Objeto donde almacenamos información mediante keys y valores

var arr = [] //Objeto donde almacenamos los valores correspondientes

var tipoPrimitivo_1 = null //Tipo de dato primitivo la cual retorna nulo y 
representa a false

var tipoPrimitivo_2 = undefined //Tipo de dato primitivo representa a información no declarada

Números

Los números son números enteros y valores decimales que pueden realizar todas las operaciones aritméticas. Veamos algunos ejemplos de Números.

let age = 35; 

const gravity = 9.81; //usamos const para valores que no cambian

let mass = 72//masa en Kilogramo 

const PI = 3.14; //pi una constante geométrica

// Más ejemplos 
const boilingPoint = 100;

const bodyTemp = 37; //oC temperatura media del cuerpo humano

console.log(edad,gravedad,masa,PI,boilingPoint,bodyTemp);

Arrays

A diferencia de las variables, una matriz puede almacenar varios valores . Cada valor de una matriz tiene un índice y cada índice tiene una referencia en una dirección de memoria . Se puede acceder a cada valor utilizando sus índices . El índice de una matriz comienza desde cero y el índice del último elemento es menos en uno de la longitud de la matriz.

Una matriz es una colección de diferentes tipos de datos ordenados y modificables (modificables). Una matriz permite almacenar elementos duplicados y diferentes tipos de datos. Una matriz puede estar vacía o puede tener diferentes valores de tipo de datos.

En JavaScript, podemos crear una matriz de diferentes formas. Veamos diferentes formas de crear una matriz. Es muy común usar const en lugar de let para declarar una variable de matriz. Si está utilizando const, significa que no vuelve a utilizar ese nombre de variable.

//sintaxis
const arr = Array()
// o
// let arr = new Array()
console.log(arr) // []

Objeto matemático

En JavaScript, Math Object proporciona una gran cantidad de métodos para trabajar con números.

  • Math.PI (Ratio de la circunferencia de un circulo respecto a su diámetro, aproximadamente 3.14159.)
  • Math.SQRT2 (Raíz cuadrada de 2, aproximadamente 1.414.)
  • Math.round() Redondea los valores al número más cercano
  • Math.floor() Redondeo de valores hacia abajo
  • Math.ceil() devuelve el entero o igual más próximo a un número.
  • Math.min() Devuelve el valor mínimo
  • Math.max() Devuelve el valor máximo
  • Math.random() Crea un número aleatorio de 0 a 0.999999
const PI = Math.PI

console.log(PI) // 3.141592653589793

console.log(Math.round(PI)) //3 para redondear los valores al número más cercano

console.log(Math.round(9.81)) // 10

console.log(Math.floor(PI)) // 3 redondeando hacia abajo

console.log(Math.ceil(PI)) // 4 redondeando

console.log(Math.min(-5, 3, 20, 4, 5, 10)) // -5, devuelve el valor mínimo

console.log(Math.max(-5, 3, 20, 4, 5, 10)) // 20, devuelve el valor máximo

const randNum = Math.random() // crea un número aleatorio entre 0 to 0.999999



const num = Math.floor(Math.random () * 11) // crea un número aleatorio entre 0 y 10

//Absolute value
console.log(Math.abs(-10)) // 10

//Raíz cuadrada
console.log(Math.sqrt(100)) // 10

console.log(Math.sqrt(2)) // 1.4142135623730951

// Poder
console.log(Math.pow(3, 2)) // 9

console.log(Math.E) // 2.718

// Devuelve el logaritmo natural con base. E of x, Math.log(x)
console.log(Math.log(2)) // 0.6931471805599453

console.log(Math.log(10)) // 2.302585092994046

// Trigonometría
Math.sin(0)

Math.sin(60)

Math.cos(0)

Math.cos(60)

Arrays

Una matriz es una colección de diferentes tipos de datos ordenados y modificables (modificables). Una matriz permite almacenar elementos duplicados y diferentes tipos de datos. Una matriz puede estar vacía o puede tener diferentes valores de tipo de datos.

Cómo crear una matriz vacía

  • Usando el constructor Array
// sintaxis

const my_arr = Array()

// o

// let my_arr = new Array()

console.log(my_arr) // []
  • Usando los corchetes o brackets []
// sintaxis 

// Esta es la forma más usada y recomendada para crear un array vacio 

const arr =  []; 

console.log(arr)

Cómo crear una matriz con valores

Matriz con valores iniciales. Usamos la propiedad length para encontrar la longitud de una matriz.

const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // Array de números

const fruits = ['banana', 'orange', 'mango', 'lemon'] // Array string frutas

const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // Array string frutas

const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // Array string productos

const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // Array string tech

const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // Array string paises

A continuación vamos a imprimir por la consola del navegador la información correspondiente

console.log('Imprimir Números:', numbers)
console.log('Cantidad de numeros que existen:', numbers.length)

console.log('Frutas:', fruits)
console.log('Cantidad de frutas:', fruits.length)

console.log('Vegetables:', vegetables)
console.log('Cantidad de vegetales:', vegetables.length)

console.log('Productos de animales:', animalProducts)
console.log('Cantidad de productos:', animalProducts.length)

console.log('Web Tecnologías:', webTechs)
console.log('Cantidad de tecnologías web:', webTechs.length)

console.log('Paises:', countries)
console.log('Cantidad de paises:', countries.length)

De está manera mostraremos por consola la cantidad de items que contiene cada array, ademas de la longitud que existe en cada array, recuerden que para contar una cadena de string, numeros usaremos LENGTH de esta manera retornara el numero completo empezando desde 0.

  • La matriz puede tener elementos de diferentes tipos de datos
const arr = [
  'Edinson',
  250,
  true,
  { country: 'Russia', city: 'Moscow' },
  { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] },
] // arr que contiene diferentes tipos de datos
console.log(arr)
  • Creando una matriz usando split

Como hemos visto en la sección anterior, podemos dividir una cadena en diferentes posiciones y podemos cambiar a una matriz. Veamos los ejemplos a continuación.

let js = 'Edinson'

const charsInJavaScript = js.split('')

console.log(charsInJavaScript) // ["E", "d", "i", "n", "s", "o", "n"]

let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon'

const companies = companiesString.split(',') // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"]

let txt = 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'

const words = txt.split(' ')

// el texto tiene caracteres especiales piensa en cómo puedes obtener solo las palabras

// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"]

Accediendo a elementos de la matriz usando index

Accedemos a cada elemento en una matriz usando su índice. Un índice de matriz comienza desde 0. La siguiente imagen muestra claramente el índice de cada elemento en la matriz

const fruits = ['banana', 'orange', 'mango', 'lemon']
let firstFruit = fruits[0] //estamos accediendo al primer elemento usando su índice

console.log(firstFruit) // banana

secondFruit = fruits[1]
console.log(secondFruit) // orange

let lastFruit = fruits[3]
console.log(lastFruit) // lemon
// El último índice se puede calcular de la siguiente manera

let lastIndex = fruits.length - 1
lastFruit = fruits[lastIndex]

console.log(lastFruit) // lemon

PARTE 3

Felicidades por llegar a esta parte 3, ya revisamos varias cosas de javascript que todo programador deberia saber y entender, a continuación vamos a verificar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

preloader image