Skip to content

Latest commit

 

History

History
324 lines (274 loc) · 7.77 KB

javascript-resume.md

File metadata and controls

324 lines (274 loc) · 7.77 KB

JavaScript

A continuación dejo un resumen de las cosas vistas en la página de JavaScript de W3Schools:

Variables

  • Las variables antes de usarse deben declararse con var, let o const (la diferencia entre var y let es su funcionamiento en navegadores antigüos; por lo general se usa más let).
  • Las variables se pueden declarar en una misma linea, separando con la coma (,)
  • const se usa para declarar constantes.
var first_name = "Juanito"
let last_name = "Pérez"
const year = 1999

Operadores

Son exactamente iguales a los de Python, asi que sin rayarse.

JavaScript Operators

También sirven las variantes de +=, -=, *=, /=

Tipos de datos

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object: (son similares a los diccionarios de Python)
const person = {firstName:"John", lastName:"Doe"};

// Array object: 
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");
  • Las variables son de tipos dinámicos, por lo que puedes declararla al inicio con un valor numérico y luego cambiarlo a un String.

Funciones

// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
  return p1 * p2;
}

// Calling the function
let x = 10
let y = 2
let z = myFunction(x, y)
// Variable z == 20
  • Los "espacios de nombres" que vimos en Python también aplican aquí, por lo que una variable declarada dentro de una función no puede ser llamada afuera de ella.

"Objetos"

Se declaran y comportan de forma similar a los diccionarios de Python.

// Create an Object with properties
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Create an Object without properties 
const person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

El acceso a las propiedades de un objeto se puede hacer de dos formas:

  1. objectName.propertyName
  2. objectName["propertyName"]

También pueden almacenar funciones que retornen propiedades, de forma similar a como funciona una property dentro de una clase de Python.

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};  

Eventos

Los eventos en HTML son "sucesos" o acciones que pueden ser captados por JavaScript para ejecutar parte de su código, como clickear en cierta parte, colocar el mouse encima, redimensionar la ventana... El código HTML permite ejecutar JavaScript tras eventos en sus propias etiquetas, de forma similar a como se usa el atributo 'style' en una etiqueta para modificar el CSS, usando los nombres de eventos. Por ejemplo:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

En este ejemplo, tenemos un botón que dice "The time is?" que al presionar (evento onclick), cogerá de todo el documento HTML, el elemento con ID "demo" (getElementById('demo')) y modificará el interior del elemento (innerHTML) con un nuevo Date() (la fecha actual).

Eventos comunes

Evento Descripción
onchange Cuando el elemento HTML ha sido cambiado.
onclick Cuando el usuario clickea sobre el elemento.
onmouseover Cuando el usuario mueve el mouse sobre el elemento.
onmouseout Cuando el usuario mueve el mouse fuera del elemento.
onkeydown Cuando el usuario presiona una tecla.
onload Cuando el navegador termina de cargar la página web.

Objeto MATH

En JavaScript existe un objeto Math que es utilizado para distintas funciones relacionadas con las matemáticas gracias a sus métodos y constantes.

Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E
Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
acosh(x) Returns the hyperbolic arccosine of x
asin(x) Returns the arcsine of x, in radians
asinh(x) Returns the hyperbolic arcsine of x
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y, x) Returns the arctangent of the quotient of its arguments
atanh(x) Returns the hyperbolic arctangent of x
cbrt(x) Returns the cubic root of x
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
cosh(x) Returns the hyperbolic cosine of x
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x, y, z, ..., n) Returns the number with the highest value
min(x, y, z, ..., n) Returns the number with the lowest value
pow(x, y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sign(x) Returns if x is negative, null or positive (-1, 0, 1)
sin(x) Returns the sine of x (x is in radians)
sinh(x) Returns the hyperbolic sine of x
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
tanh(x) Returns the hyperbolic tangent of a number
trunc(x) Returns the integer part of a number (x)

Switch

El Switch de JavaScript es ligeramente distinto al de Python:

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Bucles

Bucle For

for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

for (let i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
}

// expression 1: se define la variable auxiliar a 0
// expression 2: se define la condición para correr el bucle (la variable auxiliar debe ser menor que 5)
// expression 3: incrementa el valor de la variable auxiliar con cada iteración.

Bucles For/In

Para recorrer las keys de un objeto:

for (key in object) {
  // code block to be executed
}

// Example
const person = {fname:"John", lname:"Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

Para recorrer los valores de una lista:

for (variable in array) {
  // code
}

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}