Documentación sobre JavaScript
// Usando la función console.log() se imprimirá el texto
// en la consola y creará un salto de línea
console.log("Hola Mundo");
console.log("¿Cómo estás?");
// imprime:
// Hola Mundo.
// ¿Cómo estás?
// Concatena cadenas y variables utilizando el signo "+".
console.log("Saludos " + "Terrícola");
// imprime:
// Saludos Terrícola
let species = "Marciano";
console.log("Saludos " + species);
// imprime:
// Saludos Marciano
// Declarar una variable
let myVarName;
// Declarar e inicializar una variable
let myVarName = 5;
// Asignar valor a una variable existente
myVarName = 10;
// Imprimir una variable
console.log(myVarName);
console.log("El valor es: " + myVarName);
// Si una variable no va a cambiar de valor, es
// mejor utilizar la palabra clave 'const'.
// Las variables definidas con const:
// * no se pueden volver a declarar
// * no se pueden reasignar
// * se les debe asignar un valor cuando se declaran
// Ejemplo:
const PI = 3.141592653589793;
PI = 5; // Esto dará un error
// Leer una cadena
// Las cadenas son una serie de caracteres - ej) Hola Mundo
let choice = readLine("¿Qué te gustaría? ");
// Leer un número entero
// Los enteros son números sin punto decimal - ej) 3
let num = readInt("Introduce un número: ");
// Leer un flotante
// Los flotantes son números con punto decimal - ej) 3,14
let cost = readFloat("Introduce el coste: ");
// Leer un booleano
// Los booleanos son true/false
let workIsDone = readBoolean("¿Has terminado tu trabajo? ");
Entradas del usuario asíncronas
/* Además de los métodos de entrada bloqueantes que reciben la entrada mediante
popup, hay métodos de entrada asíncronos adicionales. readLineAsync,
readIntAsync, readFloatAsync y readBooleanAsync son funciones no bloqueantes
que se pueden utilizar en combinación con la palabra clave `await
recibir información de forma asíncrona.
*/
let name = await readLineAsync("¿Cómo te llamas? ");
console.log("Encantado de conocerte, " + name);
Para saber más sobre las entradas del usuario asíncronas, consulta
este tutorial.
// Operadores:
+ Suma
- Sustracción
* Multiplicación
/ División
** Exponenciación
% Módulo (Resto)
() Paréntesis (Para el orden de las operaciones)
// Ejemplos
let z = x + y;
let w = x * y;
// Incrementa (añade uno)
x++
// Disminuye (resta uno)
x--
// Atajos
x = x + y; x += y;
x = x - y; x -= y;
x = x * y; x *= y;
x = x / y; x /= y;
// Exponenciación
let squared = 5 ** 2
console.log(squared); // imprime 25
// Módulo
let z = 14 % 4; // 14 ÷ 4 = 3 con un resto de 2
console.log(z); // imprime 2
// Valor absoluto
let abs = Math.abs(x);
// Raíz cuadrada
let sqrt = Math.sqrt(x);
// Redondeo
// Math.round() puede utilizarse para redondear números
const PI = 3.14
let roundedPi = Math.round(PI);
console.log(roundedPi); // imprime: 3
const GOLDEN_RATIO = 1.618;
let roundedGoldenRatio = Math.round(GOLDEN_RATIO);
console.log(roundedGoldenRatio); // se imprime: 2
// División por el suelo
// Math.floor() se puede utilizar para realizar la división por el suelo
// piso. Con la división por el suelo, sólo se devuelve
// la parte entera del cociente.
// Por ejemplo, 5/2 es 2,5, pero con la división por el suelo,
// el resultado es 2 y se descarta el 0,5.
let result = Math.floor(5/2);
console.log(result); // imprime: 2
// Geometría
// Ten en cuenta que la entrada está en radianes, no en grados
Math.sin(radians); // Devuelve un valor entre -1 y 1
Math.cos(radians); // Devuelve un valor entre -1 y 1
Math.tan(radians); // Devuelve el valor
Números aleatorios
// Existen varios métodos aleatorios diferentes
Randomizer.nextInt(bajo, alto);
Randomizer.nextBoolean();
Randomizer.nextFloat(bajo, alto);
Randomizer.nextColor();
// Ejemplo lanzando un dado para obtener una tirada aleatoria
let roll = Randomizer.nextInt(1, 6);
// Las funciones pueden recibir valores, llamados parámetros.
// La siguiente función recibe un parámetro llamado
// 'nombre' y lo imprime en un saludo.
function printGreeting(name) {
console.log("Hola " + name);
}
// Las funciones también pueden devolver un valor.
// La siguiente función toma un valor,
// le suma dos y lo devuelve.
function addTwo(number) {
return number + 2;
}
// str.length devuelve la longitud de una cadena
// Ejemplo
let str = "hola
let len = str.length; // igual a 5
// str.indexOf(búsqueda) devuelve el primer índice de la búsqueda
// o -1 si no se encuentra. Distingue entre mayúsculas y minúsculas.
//Ejemplos
let str = "hola";
let pos1 = str.indexOf("l"); // devuelve 2
let pos2 = str.indexOf("H"); // devuelve -1
// str.substring(inicio) devuelve una subcadena que incluye el carácter
// carácter de inicio hasta el final de la cadena
//Ejemplos
let str = "hello";
let sub1 = str.substring(1); // igual a "ello"
let sub2 = str.substring(3); // igual a "lo"
// str.substring(start, end) devuelve una subsecuencia que incluye el carácter
// el carácter del principio, pero sin incluir el carácter del final
//Ejemplos
let str = "hello";
let sub1 = str.substring(0,2); // igual a "he"
let sub2 = str.substring(1,4); // igual a "ell"
Para saber más sobre los métodos de cadena, consulta
este tutorial.
Echa un vistazo a nuestro
¡documentación completa de la Biblioteca Gráfica CodeHS!
// devuelve la anchura del lienzo
getWidth();
// devuelve la altura del lienzo
getHeight();
// Ejemplo devuelve la coordenada y del
// centro del lienzo
const CENTER_Y = getHeight() / 2;
// El ejemplo devuelve la coordenada x del
// centro del lienzo
const CENTER_X = getWidth() / 2;
// Elimina todos los objetos del lienzo
removeAll();
// Para hacer un círculo
let circle = new Circle(radio);
// Para establecer la posición del centro del círculo
circle.setPosition(x, y);
// Ejemplo, círculo rojo de 50px de radio con centro en (100, 200)
let circle = new Circle(50);
circle.setPosition(100, 200);
circle.setColor("red");
// Obtener el radio
circle.getRadius(); // devuelve 50
let curRadius = circle.getRadius(); // guardar en variable
// Cambia el radio
circle.setRadius(100);
// Obtener la posición del centro del círculo
let x = circle.getX(); // x es 100
let y = circle.getY(); // y es 200
// Cambia la posición del círculo
let x = getWidth() / 2;
let y = getHeight() / 2;
circle.setPosition(x, y); // el centro del círculo está en el centro de la pantalla
// Añadir y quitar de la pantalla
add(circle); // Añadir a la pantalla
remove(circle); // Eliminar de la pantalla
// Mueve el círculo dx horizontalmente y dy verticalmente
circle.move(dx, dy);
// Para hacer un rectángulo
let rect = new Rectangle(anchura, altura);
// Para establecer la posición de la esquina superior izquierda del rectángulo
rect.setPosition(x, y);
// Ejemplo, rectángulo azul de 200x50 con la esquina superior izquierda en (100, 200)
let rect = new Rectangle(200, 50);
rect.setPosition(100, 200);
rect.setColor("blue");
// Obtén la posición de la esquina superior izquierda del rectángulo
let x = rect.getX(); // x es 100
let y = rect.getY(); // y es 200
// Cambia la posición del rectángulo
let x = getWidth() / 2;
let y = getHeight() / 2;
rect.setPosition(x, y) // la esquina superior izquierda está en el centro de la pantalla
// Añadir y quitar de la pantalla
add(rect); // Añadir rectángulo
remove(rect); // Eliminar rectángulo
// Mueve el rect dx horizontalmente y dy verticalmente
rect.move(dx, dy);
// Para hacer un arco
let myArc = new Arc(radio, inicio, fin, unidad);
// Más concretamente, los parámetros son:
// 1. radio del arco
// 2. ángulo inicial del arco
// 3. ángulo final del arco
// 4. unidad del ángulo (0 para grados, 1 para radianes)
// Para establecer la posición del centro del arco
myArc.setPosition(x, y);
// Ejemplo, un arco de 90 grados con
// radio de 50 y color rojo:
let myArc = new Arc(50, 0, 90, 0);
myArc.setPosition(100, 200);
myArc.setColor("rojo");
// Obtén la posición del centro del arco
let x = myArc.getX(); // x es 100
let y = myArc.getY(); // y es 200
// Cambia la posición del centro del arco
let x = getWidth() / 2;
let y = getHeight() / 2;
myArc.setPosition(x, y); // el centro del arco está en el centro de la pantalla
// Añadir y quitar de la pantalla
add(myArc); // Añadir arco
remove(myArc); // Eliminar arco
// Para dibujar una línea desde (x1, y1) hasta (x2, y2)
let line = new Line(x1, y1, x2, y2);
// Establece el color de la línea en verde
line.setColor("green");
// Establece la anchura de la línea en 10 píxeles
line.setLineWidth(10);
// Añadir y quitar de la pantalla
add(line);
remove(line);
// Mueve la línea dx horizontalmente y dy verticalmente
line.move(dx, dy);
// Cambia el punto inicial de la línea a (x1, y1)
line.setPosition(x1, y1);
// Cambia el punto final de la línea a (x2, y2)
line.setEndpoint(x2, y2);
//Obtén el punto inicial de la línea
let x = line.getX(); // x tiene el mismo valor que x1
let y = line.getY(); // y tiene el mismo valor que y1
// Para crear un Óvalo
let oval = new Oval(anchura, altura);
// Para establecer la posición del centro del óvalo
oval.setPosition(x, y);
// Ejemplo, óvalo azul de 200x50 con centro en (100, 200)
let oval = new Oval(200, 50);
oval.setPosition(100, 200);
oval.setColor("blue");
// Obtén la posición del centro del óvalo
let x = oval.getX(); // x es 100
let y = oval.getY(); // y es 200
// Cambia la posición del óvalo
let x = getWidth() / 2;
let y = getHeight() / 2;
oval.setPosition(x, y) // El centro del óvalo está en el centro de la pantalla
// Añadir y quitar de la pantalla
add(oval); // Añadir óvalo
remove(oval); // Eliminar óvalo
// Mueve el óvalo dx horizontalmente y dy verticalmente
oval.move(dx, dy);
// Para hacer un polígono
let polygon = new Polygon();
// Para añadir puntos al polígono
polygon.addPoint(x, y);
// Ejemplo, polígono verde de 4 lados
// NOTA: El orden en que añadas los puntos
// determina cómo se dibuja el polígono
let polygon = new Polygon();
polygon.addPoint(20, 20);
polygon.addPoint(10, 50);
polygon.addPoint(100, 80);
polygon.addPoint(60, 10);
polygon.setColor("green");
// Comprueba si el polígono contiene un punto
polygon.containsPoint(x, y); // devuelve un booleano
// Añadir y quitar de la pantalla
add(polygon); // Añadir polígono
remove(polygon); // Eliminar polígono
// Mueve el polígono dx horizontalmente y dy verticalmente
polygon.move(dx, dy);
// Para crear un objeto texto gráfico
let txt = new Text(etiqueta, fuente);
// Para establecer la posición de la esquina inferior izquierda del texto
txt.setPosition(x, y);
// Ejemplo
let txt = new Text("¡Hola, mundo!", "30pt Arial");
txt.setPosition(100, 200);
txt.setColor("blue");
// Cambia lo que dice el texto
txt.setText("¡Adiós!");
// Obtén la posición de la esquina inferior izquierda del texto
let x = txt.getX(); // x es 100
let y = txt.getY(); // y es 200
// Cambia la ubicación del texto
let x = getWidth() / 2;
let y = getHeight() / 2;
txt.setPosition(x, y) // la esquina inferior izquierda del texto está
// en el centro de la pantalla
// Obtén la anchura y la altura del objeto texto
let width = txt.getWidth();
let height = txt.getHeight();
// Añadir y quitar de la pantalla
add(txt); // Añadir texto
remove(txt); // Eliminar texto
// Mueve el texto dx horizontalmente y dy verticalmente
txt.move(dx, dy);
// Se puede añadir una imagen web al lienzo de gráficos
// como una WebImage. Las WebImages se crean, se dimensionan
// y se posicionan como otros objetos gráficos.
// Para crear una nueva WebImage, utiliza una URL que enlace
// directamente a la imagen en Internet.
// Utiliza la pestaña Subir del editor para subir y crear
// una URL válida para tu propia imagen.
let copter = new WebImage("https://static.codehs.com/img/library/objects/helicopter.png");
// establece las dimensiones de la imagen
copter.setSize(300, 150);
// establece la ubicación de la imagen
copter.setPosition(getWidth()/4, getHeight()/2);
// Añadir el copter a la pantalla
add(copter);
// Eliminar el helicóptero de la pantalla
remove(copter);
// Los comandos de obtención de imagen devuelven información sobre tu imagen
// Ten en cuenta que debes asegurarte de que la imagen está cargada
// antes de utilizar estos comandos. El método .loaded
// llamará a una función una vez cargada la imagen.
// Escribe una función getDimensions con los getters
copter.loaded(getDimensions);
// o
copter.loaded(function() {
// obtiene la coordenada x de la esquina superior izquierda de la imagen
console.log(copter.getX());
// obtiene la coordenada y de la esquina superior izquierda de la imagen
console.log(copter.getY());
// obtiene la anchura de la imagen
console.log(copter.getWidth());
// obtiene la altura de la imagen
console.log(copter.getHeight());
});
// Ten en cuenta que la URL de la imagen debe ser directamente
// al propio archivo de la imagen. Por lo general, debe terminar con
// algo como .png, .jpg u otro tipo de archivo de imagen.
// Para sustituir el contenido de la imagen de una WebImage, puedes llamar a
// .setImage(url):
let animal = new WebImage('https://static.codehs.com/img/library/characters/penguin.png');
add(animal);
animal.setImage('https://static.codehs.com/img/library/characters/monkey.jpg');
- https://static.codehs.com/img/library/characters/penguin.png
- https://static.codehs.com/img/library/characters/monkey.jpg
- https://static.codehs.com/img/library/characters/leopard.jpg
- https://static.codehs.com/img/library/characters/chameleon.jpg
- https://static.codehs.com/img/library/characters/lizard.jpg
- https://static.codehs.com/img/library/characters/butterfly.jpg
- https://static.codehs.com/img/library/objects/icicle.png
- https://static.codehs.com/img/library/objects/helicopter.png
- https://static.codehs.com/img/library/objects/asteroid.png
- https://static.codehs.com/img/library/objects/soccerBall.png
- https://static.codehs.com/img/library/landscapes/flowers.jpg
Puedes visitar la página
W3Schools CSS Colors para obtener una lista de colores.
// Puedes utilizar el método setColor() para dar un color a tus objetos
// así:
obj.setColor(color);
// Puedes pasar a setColor() cualquier nombre de color CSS como cadena.
// Consulta el enlace anterior para ver una lista de posibles nombres de colores
// Por ejemplo, así es como establecemos un círculo para que sea verde azulado:
let circle = new Circle(10);
circle.setColor("teal");
// También puedes elegir tu propio color dándole un componente rojo, verde
// y azul como
let color = new Color(r, g, b);
// Los valores están entre 0-255 para cada componente. Después de hacer
// un nuevo color, puedes utilizarlo para establecer el color de un objeto.
// Por ejemplo, para que un rectángulo existente llamado
// rect sea marrón:
let brown = new Color(139, 69, 19);
rect.setColor(brown);
// Otra forma de establecer el color de un objeto es utilizar una
// cadena con el valor hexadecimal del color con setColor.
// Por ejemplo, para establecer el color rosa de un objeto rect:
rect.setColor("#FF66CC");
// También hay muchas constantes de color. Puedes establecer el color de un objeto
// color de la siguiente manera:
obj.setColor(Color.RED);
// Lista de constantes de color disponibles:
Color.RED
Color.GREEN
Color.BLUE
Color.YELLOW
Color.CYAN
Color.ORANGE
Color.WHITE
Color.BLACK
Color.GRAY
Color.PURPLE
// Otras funciones divertidas
// Devuelve un color aleatorio dentro de un grupo
let color = Color.randomRed();
let color = Color.randomGreen();
let color = Color.randomBlue();
// Obtener un color aleatorio del aleatorizador
let color = Randomizer.nextColor();
/**
* Se pueden rotar los siguientes objetos gráficos:
* - Rectángulo
* - Arco
* - Línea
* - Óvalo
* - Texto
* - Imagen Web
*/
// Establece la rotación del rectángulo con estos parámetros:
// 1. ángulo a rotar
// 2. unidad del ángulo (0 para grados, 1 para radianes)
// Por defecto será grados.
// Establece la rotación del rectángulo en 45 grados
rect.setRotation(45, 0);
rect.setRotation(45); // Hace lo mismo.
// Establece la rotación del rectángulo en radianes Math.PI/2
rect.setRotation(Math.PI / 2, 1);
// Añade la rotación con estos parámetros:
// 1. ángulo a rotar
// 2. unidad del ángulo (0 para grados, 1 para radianes)
// Por defecto será grados.
// Rota el rectángulo 45 grados
rect.rotate(45, 0);
rect.rotate(45); // Hace lo mismo.
// Gira el rectángulo 2 radianes Math.PI
rect.rotate(Math.PI / 2, 1);
// Obtener el tipo del objeto:
let tipo = obj.getTipo();
// podría devolver: 'Circle', 'Rectangle', 'Text', 'Línea', o 'ImagenWeb'
/* Puedes cambiar el orden de tus gráficos
* utilizando la propiedad capa. Si estableces la capa
* a 0 envía el gráfico al fondo del lienzo.
* El gráfico con un número de capa más alto será
* dibujado encima de los objetos con un número de capa inferior.
* La capa por defecto de un gráfico es 1.
*/
obj.layer = 1; // adelanta el gráfico a 1 capa
obj2.layer = 5; // se dibujará encima de las capas 0 - 4
/*
* El método de depuración se puede utilizar para ver dónde
* se encuentra el punto de anclaje de un objeto
* Por defecto, el punto de anclaje de un círculo está
* en su centro y el punto de anclaje de un rectángulo
* de un rectángulo se encuentra en su esquina superior izquierda.
* El método de depuración evalúa un booleano y puede
* establecer el valor "true" para cualquier objeto.
*/
// Por defecto, el método de depuración está en "false
// Así es como puedes activarlo para un objeto círculo:
let circle = new Circle(50);
circle.debug = true;
/*
* También puedes cambiar el punto de anclaje de un objeto
* utilizando setAnchor()
* Un ancla de 0, 0 hará que la forma se
dibuje con su posición en la esquina superior izquierda
* Un ancla de 0,5, 0,5 hará que la forma
se dibuje con su posición en el centro
* Un ancla de 1, 1 hará que la forma se
dibujar con su posición en la esquina inferior derecha
*/
// Así es como puedes cambiar el punto de anclaje de
// un rectángulo para que esté en la esquina inferior derecha:
let rect = new Rectangle(50, 25);
rect.setAnchor({vertical: 1, horizontal: 1});
// Nota: es mejor cambiar el punto de anclaje mientras está activado el modo de depuración
// Un booleano es verdadero o falso
let myBoolean = true;
let anotherBoolean = false;
let result = readBoolean("¿Pregunta? ");
// Operador No
let x = !y; // x obtiene lo contrario de y
// Operador Y
let andExp = x && y;
// Operador or
let orExp = x || y;
// ¡Puedes combinar muchos booleanos!
let boolExp = x && (y || z);
if (BOOLEAN_EXPRESSION) {
// código a ejecutar si la expresión es true
}
if (BOOLEAN_EXPRESSION) {
// código a ejecutar si la expresión es true
} else {
// código a ejecutar si la expresión es false
}
if (x < 0) {
console.log("x es negativo");
}
if (color == "red" || color == "blue" || color == "yellow") {
console.log("Color primario.");
} else {
console.log("No es un color primario.");
}
// Puedes utilizar else si tienes varias
// condiciones, pero sólo debe ocurrir una.
if (condición_1) {
} else if (condición_2) {
} else if (condición_3) {
} else {
}
// Siempre puedes escribirlos usando anidados
// if/else. Por ejemplo
if (condición_1) {
// el código se ejecuta si la condición 1 es true
} else {
if (condición_2) {
// si la condición 2 es true
} else {
// y aquí si la condición 2 es false
}
}
// Los operadores lógicos devuelven booleanos (valores true/false)
x && y // Operador AND -- verdadero si AMBOS x e y son verdaderos
x || y // Operador O -- verdadero si x O y son verdaderos
! x // Operador NOT -- verdadero si x es falso (y falso si x es verdadero)
// Operadores lógicos en declaraciones if
if (x && y) {
console.log("x e y son ambos true");
}
if (x || y) {
console.log("x y/o y son true");
}
if (!x && y) {
console.log("x es false e y es true");
}
// Los operadores de comparación devuelven booleanos (valores true/false)
x == y // ¿es x igual a y?
x != y // x no es igual a y
x > y // ¿es x mayor que y?
x >= y // si x es mayor o igual que y
x < y // es x menor que y
x <= y // es x menor o igual que y
// Operadores de comparación en declaraciones if
if (x == y) {
console.log("x e y son iguales");
}
if (x > 5) {
console.log("x es mayor que 5");
}
// los for loops repiten el código un número determinado de veces
const COUNT = 5;
for (let i = 0; i < COUNT; i++) {
/* Repite el código entre los corchetes 5 veces,
* ya que la variable COUNT es 5. */
}
// Imprime los números del 0 al 9
for (let i = 0; i < 10; i++) {
console.log(i);
}
// los while loops se repiten hasta que una expresión booleana se convierte en false
while(expresión booleana){
/* Repite el código entre corchetes while
* 'expresión booleana' es true */
}
// Cuenta atrás de 15 a 10
let i = 15;
while (i > 9) {
console.log(i);
i--;
}
// Utiliza una instrucción break para salir de un bucle
while (true) {
// código a repetir
if (condición) {
break; // sale del while loop
}
}
setTimer(fn, delay); // Crear un temporizador
stopTimer(fn); // Detener un temporizador
// Ejemplo: llamar a moverBola cada 40 milisegundos
function main() {
setTimer(moveBall, 40);
}
function moveBall() {
ball.move(x, y);
}
main();
// Los eventos del ratón se utilizan para crear programas
// que responden a los clics, arrastres // y movimientos del ratón de los usuarios,
// y movimientos.
// Cuando se produce el evento del ratón, la función
// registrada con el evento será llamada. Ten en cuenta
// que omites los paréntesis () al
// al pasar el nombre de la función.
// Aquí tienes una lista de eventos de ratón que se pueden utilizar:
mouseMoveMethod(functionToCall); // al mover el ratón
mouseClickMethod(functionToCall); // al hacer clic con el ratón
mouseDragMethod(functionToCall); // al arrastrar el ratón
mouseDownMethod(functionToCall); // al pulsar el botón del ratón
mouseUpMethod(functionToCall); // al soltar el botón del ratón
// Programa de ejemplo que utiliza eventos del ratón
function main() {
// Configura las llamadas de retorno del ratón
mouseMoveMethod(onMouseMove);
mouseClickMethod(addBall);
mouseDragMethod(updateLine);
}
function onMouseMove(e) {
console.log("El ratón está en (" +
e.getX() + ", " +
e.getY() + ").");
}
function addBall(e) {
let ball = new Circle(20);
ball.setPosition(e.getX(), e.getY());
add(ball);
}
function updateLine(e) {
line.setEndpoint(e.getX(), e.getY());
}
main();
// La función getElementAt(x, y) se puede utilizar para coger
// un objeto, si existe, en las coordenadas
// (x, y). Si no hay ninguno, devuelve null
// Ejemplo
function main() {
mouseClickMethod(turnRed);
}
// Si haces clic en un objeto, ponlo rojo.
function turnRed(e) {
let elem = getElementAt(e.getX(), e.getY());
if (elem != null) {
elem.setColor("red");
}
}
main();
// De forma similar a los eventos del ratón, también puedes capturar
// eventos del teclado
function main() {
// Configura las llamadas de retorno del teclado
keyDownMethod(keyDown);
keyUpMethod(keyUp);
}
// El enfoque actual es utilizar e.key para obtener información sobre
// qué tecla se pulsa
function keyDown(e) {
if (e.key == "ArrowLeft") {
ball.move(-5, 0);
}
if(e.key == "k"){
console.log("Has pulsado k");
}
}
function keyUp(e) {
console.log("Has pulsado una tecla");
}
main();
// Para añadir un archivo de sonido a un programa, primero crea una variable
// para almacenar el sonido que desees. Asegúrate de utilizar un enlace
// directo al propio archivo de sonido (por ejemplo,
// si es un mp3, el enlace debe terminar en .mp3).
// El enlace debe ser una URL completa a un archivo de sonido que
// esté disponible en Internet.
let mySong = new Audio("enlace_a_archivo_de_sonido.mp3");
// Para reproducir el archivo, utiliza .play()
mySong.play();
// Para pausar un archivo, utiliza .pause()
mySong.pause();
// Para reproducir un archivo en bucle, primero reproduce el archivo,
// y luego pon .loop en true:
mySong.play()
mySong.loop = true;
/*
*¡Crea tus propias ondas sonoras!
*/
// Construye un nuevo Sonido con una nota y un tipo de onda sonora dados
let sound = new Sound("C4", "cuadrado");
let sound2 = new Sound("C1", "diente de sierra");
// Establece el tono en un valor de frecuencia o de nota
sound.setFrequency(440); // 440 Hz
sound.setFrequency("C4"); // Nota Do central
sound.setFrequency("A2"); // Nota La grave
sound.setFrequency("A#8"); // Nota La sostenido agudo
/*
* Establece el tipo de oscilador para la onda de sonido. Las opciones son:
*
* Ondas básicas: "cuadrada", "seno", "triangular" o "diente de sierra".
* Ondas gordas: "fatsquare", "fatsine", "fattriangle", or "fatsawtooth"
* Ondas AM: "amscuadrado", "amsino", "amtriángulo" o "diente de sierra".
* Ondas FM: "fmscuadrado", "fmseno", "fmtriángulo" o "fmsdiente".
* Ondas especiales: "pwm", o "pulso".
* Sonido de tambor: "tambor"
* Sonido de platillos: "metal"
*/
sound.setOscillatorType("sine");
sound.setOscillatorType("square");
// Establece el volumen (en decibelios)
sound.setVolume(2);
/*
* Obtener información sobre el sonido
*/
let currentVolume = sound.getVolume();
let currentNote = sound.getFrequency();
let currentOscillatorType = sound.getOscillatorType();
/*
* Añadir efectos al sonido
* Las opciones son: "distorsión", "reverberación",
* "trémolo", "vibrato" o "chebyshev".
*/
// Añade un efecto de distorsión al máximo
sound.setEffect("distortion", 1);
// Añade un efecto trémolo a media capacidad
sound.setEffect("tremolo", 0,5);
// Añade un efecto vibrato a capacidad 0
sound.setEffect("vibrato", 0);
// Iniciar y detener el sonido
// Reproduce el sonido continuamente
sound.play();
// Reproduce el sonido durante 3 segundos
sound.playFor(3);
// Deja de reproducir el sonido inmediatamente
sound.stop();
// Crear un array vacío
let arr = [];
// Crear un array con valores
let arr = [1, 2, 4];
// Un array puede tener cualquier tipo de datos (x es una variable)
let arr = [4, "hola", x];
// Acceder a un elemento en un array con arr[índice]
let firstElem = arr[0];
// Establecer un elemento en un array
arr[4] = 9;
// longitud de un array
let length = arr.length;
// Iterando sobre un array
for (let i = 0; i < arr.length; i++) {
let element = arr[i];
// Imprimir cada elemento y su índice
console.log("Índice " + i + ": " + element);
}
// También puede usar bucles for...of si no quiere los índices
for (let element of arr) {
console.log(element);
}
// Añadir a un array
arr.push(elem);
// Eliminar el último elemento del array
let last = arr.pop();
// Encontrar el índice de un elemento
let index = arr.indexOf(5);
// Eliminar un elemento en el índice i
arr.remove(i)
// Cuidado, los arrays se asignan por referencia
let arr1 = [1, 2, 3, 4];
let arr2 = arr1; // arr2 ahora apunta a los mismos datos que arr1
arr2.push(9); // modificar arr2 también modifica arr1
console.log(arr1); // imprime [1, 2, 3, 4, 9]
/* ======== Métodos adicionales de arrays ======== */
// Verifica si un elemento está incluido dentro de un array.
// Devuelve verdadero si está incluido, falso si no está incluido.
array.includes(item)
// Obtiene el índice de un elemento dentro de un array. Devuelve el índice
// del elemento si está en el array, de lo contrario devuelve -1.
array.indexOf(item)
// Llama a una función para cada elemento en un array (con el elemento y
// su índice como parámetros). Este método NO altera el
// array original ni devuelve nada por sí mismo.
array.forEach(nombreDeFuncion)
// Llama a una función para cada elemento en un array (con el elemento
// como parámetro). Este método devolverá un nuevo array con
// los nuevos elementos, sin cambiar el array original.
array.map(nombreDeFuncion)
// Llama a una función para cada elemento en un array (con el elemento
// como parámetro). La función debe devolver verdadero o falso según si el elemento
// satisface una condición definida. Usando este método, devolverá verdadero solo si todos
// los elementos cumplen la condición de la función (es decir, la función devuelve
// verdadero para cada elemento).
array.every(nombreDeFuncion)
// Llama a una función para cada elemento en un array (con el elemento
// como parámetro). La función debe devolver verdadero o falso según si el elemento
// satisface una condición definida. Usando este método, devolverá verdadero si al menos uno
// de los elementos cumple la condición de la función (es decir, la función
// devuelve verdadero para al menos un elemento).
array.some(nombreDeFuncion)
// Comienza en el índice especificado y elimina un número específico
// de elementos del array. Este método devuelve los elementos eliminados
// en un nuevo array.
array.splice(índice inicial, # elementos a eliminar)
// Comienza en el índice especificado y copia los elementos (hasta el
// índice final) en un nuevo array. Este método devuelve un nuevo
// array con los elementos copiados y NO afecta el array original.
array.slice(índice inicial, índice final)
// devuelve los elementos en el array como una cadena, separados por
// el separador (puede ser cualquier cadena). Esto NO afecta el
// array original.
array.join(separador)
// Objeto literal
let obj = {
name: "Jeremy",
color: "blue"
};
// Los objetos tienen pares clave-valor conocidos como "propiedades"
// Establecer una propiedad con notación de corchetes
obj["hobby"] = "dibujar";
// Establecer una propiedad con notación de punto
obj.faveFood = "papas fritas";
// Obtener el valor de una propiedad desde una clave
let food = obj["faveFood"]; // notación de corchetes
let food = obj.faveFood; // notación de punto
// Los objetos también pueden tener acciones clave-valor conocidas como "métodos". Tú
// los defines de la misma manera que las propiedades, pero el valor es
// una función en lugar de un valor único.
let obj = {
name: "Jeremy",
color: "blue",
greet: function() {
console.log("Hola, mi nombre es " + this.name);
}
};
// En el objeto anterior, usamos this.name para referirnos al nombre
// propiedad ya definida en ese objeto. "this" es una palabra clave especial
// de JS que se refiere al objeto en sí.
// Agregando otro método
obj.joke = function() {
console.log("¿Cómo llamas a un pez sin ojos?");
}
// Llamas a un método con notación de punto
obj.greet(); // imprime "Hola, mi nombre es Jeremy"
// Iterando sobre pares clave-valor en un objeto
for (let key in obj) {
let val = obj[key];
console.log(key + ": " + val);
// Nota que esto incluirá propiedades y métodos. Puede usar
// typeof(val) para ver si el valor es una función (es decir, método).
if (typeof(val) != "function") {
console.log(key + " es una propiedad");
}
}
// Cuidado, los objetos se asignan por referencia
let obj1 = {name: "Kate", age:16};
let obj2 = obj1; // obj2 ahora apunta a los mismos datos que obj1
obj2.name = "Sam"; // cambiar obj2 también cambia obj1
console.log(obj1); // imprime {"name":"Sam","age":16}
/* ===== Constructores de Objetos ====== */
// Si vas a crear múltiples copias de cierto objeto,
// como varios objetos de personas, es más eficaz usar un
// constructor de objetos.
function Person(name, color, hobby, food) {
this.name = name;
this.color = color;
this.hobby = hobby;
this.faveFood = food;
this.greet = function() {
console.log("Hola, mi nombre es " + this.name);
}
}
// Un constructor de objetos crea un plano para crear objetos. Para
// crear un nuevo objeto individual, lo llamas con la palabra clave "new".
let person1 = new Person("Ryan", "azul", "carpintería", "pan de masa madre");
person1.greet(); // imprime "Hola, mi nombre es Ryan"
console.log(person1.hobby); // imprime "carpintería"
// Crea un nuevo conjunto llamado "newSet".
let newSet = new Set();
// Añadir a un conjunto
newSet.add(5);
// ¿Contiene un valor un conjunto?
newSet.contains(5); // devuelve un booleano
// Número de elementos del conjunto
let count = newSet.size; // devuelve un entero
// Crea un nuevo conjunto llamado "conjuntoA
let setA = new Set();
// Añade 2 números al conjunto
setA.add(1);
setA.add(2);
// Crea un nuevo conjunto llamado "conjuntoB".
let setB = new Set();
// Añade 2 números al conjunto
setB.add(2);
setB.add(3);
// Llama a la función intersecar en "conjuntoA" y pásale "conjuntoB", guarda el conjunto resultante
// resultante en una nueva variable llamada "conjuntomutuo".
let conjuntomutuo = conjuntoA.intersecar(conjuntoB);
// Crea una cuadrícula llamada "nuevaCuadrícula
let newGrid = new Grid(filas, columnas);
// Obtener un valor en una rejilla
let elem = newGrid.get(fila, col);
// Establecer un valor en una cuadrícula
newGrid.set(fila, col, val);
// Obtener dimensiones
let rows = newGrid.numRows();
let cols = newGrid.numCols();
// Es un par de filas y columnas dentro de los límites
newGrid.inBounds(fila, col);
// Establece todos los valores de la cuadrícula al valor inicial
newGrid.init(0); // establece todos los valores de la cuadrícula en 0
// Inicializa una cuadrícula a partir de un array
newGrid.initFromArray([
[6, 3, 2], // fila 0
[2, 5, 1], // 1ª fila
[4, 3, 9], // 2ª fila
[1, 5, 1] // 3ª fila
]);
