A continuación dejo un resumen de las cosas vistas en la página de JavaScript de W3Schools:
- Las variables antes de usarse deben declararse con
var
,let
oconst
(la diferencia entrevar
ylet
es su funcionamiento en navegadores antigüos; por lo general se usa máslet
). - 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
Son exactamente iguales a los de Python, asi que sin rayarse.
También sirven las variantes de +=, -=, *=, /=
// 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.
// 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.
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:
objectName.propertyName
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;
}
};
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).
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. |
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) |
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
}
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.
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];
}