Embed Size (px)
Citation preview
JavaScript Glosario Variables
Los lenguajes de programación usan variables para almacenar valores. Las variables pueden tener un ámbito global o local a la función. Los nombres de las variables distinguen las mayúsculas y minúsculas, y deben comenzar con una letra, un guión bajo (_) o el signo de dólar ($).
Asignación de variables
Sintaxis var nombre = valor;
var Es la palabra reservada para definir una variable.
nombre Es el nombre de la variable.
valor Es cualquier valor JavaScript o una referencia a un valor (otra variable).
Ejemplo
var x = 1;
var miNombre = "Bob";
var suNombre = miNombre;
Números
*, /, -, + (Multiplicación, División, Suma, Resta)
Notas
Los anteriores funcionan como lo supones.
% (Módulo)
Sintaxis número1 % número2
número1,2 Son dos variables numéricas o dos números.
% Es el operador módulo. Retorna el residuo de la división
de número1 por número2.
Ejemplo 14 % 9 // retorna 5
++ (Incremento)
variable1++
++variable2
postincremento variable1 es incrementada (es decir, variable1 = variable1 + 1). Cuando se
evalúa, se toma el anterior valor de la variable1.
predincremento variable2 es incrementada (es decir, variable2 = variable2 + 1) y se retorna su
nuevo valor.
-- (Decremento)
variable1--
--variable2
postincremento variable1 es decrementada (es decir, variable1 = variable1 - 1). Cuando se
evalúa, se toma el anterior valor de la variable1.
predincremento variable2 es decrementada (es decir, variable2 = variable2 - 1) y se retorna su
nuevo valor.
Cadenas
Literales de strings
Sintaxis
"string de texto"
'string de texto'
Concatenación de strings
Sintaxis string1 + string2
string1,2 Dos variables o literales de string que serán concatenados.
+
El operador de concatenación une string1 con string2 y retorna un nuevo string, que
es la unión de ambos strings. Concatenar no es más que una palabra elegante, que
quiere decir combinar dos strings en una.
Ejemplo
"algún" + "texto"; // retorna "algúntexto"
var primera = "mi";
var segunda = "string";
var union = primera + segunda; // la variable union tiene el str
ing "mistring"
replace
Retorna un string con la primera subcadena del par reemplazada por una nueva subcadena.
Ejemplo
"string original".replace("original", "reemplazado"); // retorna
"string reemplazado"
toUpperCase, toLowerCase
Cambia todas las letras del string a mayúsculas o minúsculas.
Ejemplo
"mi nombre".toUpperCase(); // Retorna "MI NOMBRE"
"MI NOMBRE".toLowerCase(); // Retorna "mi nombre"
substring
Retorna la secuencia de caracteres entre dos índices dentro de un string.
Ejemplo "aventuras".substring(2,9); // Retorna "enturas"
Booleans
Literales booleanos
Sintaxis
true
false
true es usado para representar un valor
booleano igual a true.
false es usado para representar un valor
booleano igual a false.
Operadores lógicos booleanos
Sintaxis
expresión1 && expresión2
expresión3 || expresión4
!expresión5
&& Y lógico, retorna true si expresión1 y expresión2 son true. De lo contrario, retorna
false.
|| O lógico, retorna true si expresión3 o expresión4 son true, o ambos son true. De lo
contrario, retorna false.
! Negación lógica, retorna el booleano opuesto de expresión5.
Operadores comparativos
Operador Descripción Ejemplos que retornan
true
=== (Igual a) Retorna true si los operandos son iguales. 1 === 1;
!== (No es igual a) Retorna true si los operandos no son
iguales.
1 !== 2;
> (Mayor que) Retorna true si el primer operando es mayor
que el segundo operando.
2 > 1;
>= (Mayor o igual que) Retorna true si el primer operando es mayor 2 > 1;
que o igual al segundo operando. 1 >= 1;
< (Menor que) Retorna true si el primer operando es menor
que el segundo operando.
2 > 1;
1 >= 1;
<= (Menor o igual que) Retorna true si el primer operando es menor
que o igual al segundo operando.
1 < 2;
1 <= 1;
Comentarios
Por lo general, un comentario es usado dentro del código para explicar cómo funciona algo o para escribir información necesaria sobre una sección. Los comentarios son muy útiles para hacer que el código sea más legible.
Comentario de una sola línea
Sintaxis // Este es un comentario de una sola línea.
Todo lo que esté en la línea después de // será un comentario, mientras que todo lo que esté antes seguirá siendo código.
Comentario de varias líneas
Sintaxis
/*Comentario1
Comentario2
.
.
Comentario3 */
Comentario1-N Todo lo que esté entre /* y */ será comentario, y podrá abarcar varias líneas.
Funciones
Definición de funciones
Sintaxis
var nombre = function (parámetro1, parámetro2, ..., parámetroN)
{
sentencia1;
sentencia2;
.
.
.
sentenciaN;
};
nombre El nombre de la función.
parámetro Es el nombre de la variable que es pasada como argumento a la función.
sentencia Una sola sentencia de JavaScript. Por ejemplo, var x = 1; es una sentencia.
Ejemplo
var saludo = function (nombre) {
console.log("Hola " + nombre);
};
Llamada de una función
Sintaxis nombre(argumento1, argumento2, ..., argumentoN);
nombre El nombre de la función que será llamada.
argumento Un valor o una referencia a un valor que será pasado a la función.
Ejemplo saludo('Hola');
Si la declaración de
Single if
Syntax
if (condition) {
statement1;
statement2;
.
.
.
statementN;
}
condition A boolean condition
statement1...N The set of statements to execute if the condition evaluates to true.
Example
if (answer === 42) {
console.log('Told you so!');
}
if ... else
Syntax
if (condition) {
statement1;
} else {
statement2;
}
Notes
If the condition is true, statement1 will be executed. Otherwise, statement2 will be
executed.
Example
if (name.length > 0) {
console.log("Please enter your name.");
} else {
console.log("Hello " + name);
}
else if
Syntax
if (condition1) {
statement1;
} else if (condition2) {
statement2;
} else {
statement3;
}
Notes
If condition1 is true, then statement1 will be executed. If condition1 is false, and condition2 is true, then statement2 will be executed. If condition1 and condition2 are both false, then statement3 will be executed.
Example
if (someNumber > 10) {
console.log("Numbers larger than 10 are not allowed.");
} else if (someNumber < 0) {
console.log("Negative numbers are not allowed.");
} else {
console.log("Nice number!");
}
Cambie declaración
Sintaxis
switch (expresión) {
case etiqueta1:
sentencias1;
break;
case etiqueta2:
sentencias2;
break;
.
.
.
case etiquetaN:
sentenciasN;
break;
default:
sentenciasX;
break;
}
Sentencias Una o más sentencias de JavaScript.
expresión Una sentencia que genera un valor - por ejemplo, 1 + 1 o x, donde x es una
variable predefinida.
etiqueta Un valor o una expresión que coincida con el resultado de expresión
Notas
Las sentencias switch se usan para chequear diferentes valores de una variable (o una expresión) y en dependencia de ellos controlar el flujo del programa.
Ejemplo
switch (GPA){
case 90:
gradoLetra = "A+";
break;
case 80:
gradoLetra = "A";
break;
case 70:
gradoLetra = "C";
break;
case 60:
gradoLetra = "D";
break;
case 50:
gradoLetra = "E";
break;
default:
gradoLetra = "F";
break;
}
Pperador ternario
Syntax
condition ? expression1 : expression2;
condition A boolean expression.
expression A statement that yields a value.
Notes
The ternary operator is usually used as a shortcut for the if statement.
Example
// Using an if statement.
var msg = "You ";
if (grade > 50) {
msg = msg + "Passed!";
} else {
msg = msg + "Failed!";
}
console.log(msg);
// Using a ternary operator.
console.log("You " + (grade > 50 ? "Passed!" : "Failed!"));
Objetos
Un objeto es un elemento en forma de lista que tiene propiedades que corresponden a valores, variables u otros objetos de JavaScript.
Literales de objetos
Sintaxis
{
"propiedad1": valor1,
propiedad2: valor2,
número: valor3
}
propiedad1
Una propiedad del objeto en forma de string. Puede ser cualquier string válida de
JavaScript . Esto se usa cuando la propiedad contiene un espacio o un caracter no
adecuado para ser identificador.
propiedad2 Un propiedad en forma de identificador (cualquier nombre de variable de
JavaScript válido; consulta las Variables).
número Un número entero válido.
valor1,2,3 Puede ser cualquier valor de JavaScript válido (número, string, booleano, objeto,
función, etc.)
Ejemplo
var obj = {
nombre: "Bob",
casado: true,
"nombre de la madre": "Alice",
"año de nacimiento": 1987,
saberEdad: function () {
return 2012 - obj["año de nacimiento"];
},
1: 'uno'
};
Acceso a Propiedad
Sintaxis
nombre1[string]
nombre2.identificador
nombre1,2 El nombre de la variable de objeto.
string Cualquier string o variable válida que haga referencia a un valor de string.
identificador Un identificador (Cualquier nombre de variable de JavaScript válido; consulta
las Variables).
Ejemplo
obj['nombre']; // 'Bob'
obj.nombre; // 'Bob'
obj.saberEdad(); // 24
Para bucles
Sintaxis
for ([inicialización]; [condición]; [incremento]) {
sentencia1;
sentencia2;
.
.
.
sentenciaN;
}
inicialización Una expresión que se ejecuta antes de que comience el bucle. Se usa para
inicializar una variable de conteo, tal como i.
condición Expresión que es evaluada antes de cada iteración del bucle. Si el resultado es
verdadero el bucle continuará; de lo contrario se detendrá.
incremento Una expresión que se usa para modificar la variable de conteo al final de cada
bucle (a menudo es un postincremento).
sentencia1...N Sentencias de JavaScript que se ejecutarán mientras que la condición sea
verdadera.
Ejemplo
for (var tiempo = 10; tiempo > 10; tiempo--) {
console.log("Lanzamiento del cohete en T menos " + tiempo);
console.log("NO ENTRES EN PÁNICO");
}
Bucles mientras
Sintaxis
while (condición) {
sentencia1;
sentencia2;
.
.
.
sentenciaN;
}
condición Una expresión que se evalúa antes de cada iteración del bucle. Si el resultado es
true, el bucle continuará. De lo contrario, se detendrá.
sentencia1...N Sentencias de JavaScript que se ejecutarán en el cuerpo del bucle mientras la
condición sea verdadera.
Ejemplo
while (puertaAbierta()) {
console.log("Por favor cierra la puerta");
}
Do While loops
Un bucle Do-While es muy parecido a un bucle While normal. Un bucle Do-While garantiza que el bloque de código se ejecutará al menos una vez sin importar la condición.
Sintaxis
Sintaxis
do {
sentencia1;
sentencia2;
.
.
.
sentenciaN;
} while (condición);
sentencia1...N Sentencias de JavaScript que se ejecutarán mientras que la condición sea
verdadera.
condición
Expresión que se evalúa durante cada iteración del bucle. Si el resultado es
verdadero, el bucle continuará. De lo contrario, se detendrá. La condición es
solamente verificada después de la primera ejecución del bucle.
Ejemplo
do {
console.log("Se ejecuta al menos una vez");
} while (false)
Matrices
Un arreglo es un tipo especial de objeto y es una lista ordenada de valores JavaScript, tales como números, strings o incluso objetos.
Arreglo de Literales
Sintaxis [valor1, valor2, ..., valorN]
valor1...N Una lista de valores o variables JavaScript.
Ejemplo
var primos = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37];
Acceso a los elementos de un arreglo
Sintaxis nombre[índice]
nombre El nombre de la variable del arreglo.
índice
El índice en base 0 del elemento en el arreglo. Observa que la posición de un elemento
en un arreglo está determinada por la cantidad de elementos a su izquierda. Como
resultado, el primer elemento de un arreglo se encuentra en el índice 0.
Ejemplo
var primos = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37];
primos[0]; // 2
primos[3]; // 7
Arreglos multidimensionales
Sintaxis var 1D = [];
Visual:
[ | | | | | ]
var 2D = [ [], [], [],...];
Visual:
[ | | | | | ]
[ | | | | | ]
[ | | | | | ]
[ | | | | | ]
Matemáticas
Math es un objeto que contiene una biblioteca de funciones matemáticas.
random
Sintaxis Math.random()
Retorna un número aleatorio entre 0 y 1.
Ejemplo Math.random(); // Un número aleatorio entre 0 y 1.
floor
Sintaxis Math.floor(expresión)
Retorna el número entero mayor, que es menor o igual que el número.
expresión Una expresión que retorna un número.
Ejemplo
Math.floor(9.99); // 9
Math.floor(1 + 0.5); // 1
Math.floor(Math.random() * X + 1); // Retorna un número aleatori
o entre 1 y X
Errores
Mensaje de error Descripción Ejemplos que causan error
Syntax Error: Unexpected Token
Se encontró un
carácter/palabra
reservada de
JavaScript en una
parte de tu código
donde se esperaba
un
carácter/palabra
reservada
diferente.
var x - 1;
SyntaxError: Unexpected
token -
Syntax Error: Unexpected
identifier
Se encontró una
palabra no
reservada en una
parte de tu código
donde se esperaba
cierta palabra
reservada/carácter.
var x a 1
SyntaxError: Unexpected
identifier a
ReferenceError: Invalid left-
hand side in assignment
Esto ocurre
cuando tratamos
de asignar un
valor a una no
variable.
1 = x
ReferenceError: Invalid left
-hand side in assignment
ReferenceError: {palabra} is not
defined
Esto ocurre
cuando tratamos
de usar una
variable que no ha
sido definida.
a++;
ReferenceError: a is not def
ined
Cajas Emergentes
alert
Syntax alert(message);
messsage A string of text to be displayed in the alert dialog.
Example alert("Hello World");
prompt
Syntax prompt(message);
message A string of text to be displayed in the prompt dialog.
Example
var name = prompt("Enter your name:");
confirm
Syntax confirm(message);
message A string of text to be displayed in the confirm dialog.
if ( confirm("Are you sure you want to delete this post?") ) {
deletePost();
}
OOP
Classes
A class can be thought of as a template to create many objects with similar qualities. Classes are a fundamental component of object-oriented programming (OOP).
Class constructor
Syntax
var ClassName = function (parameter1, parameter2, ..., parameter
N) {
this.property1 = parameter1;
this.property2 = expression;
};
ClassName The name of the new class. By convention, class names are always uppercase.
parameter1..N Parameters passed in when the class is created. This is generally used to assign
a property value. Parameters are optional.
this Refers to the class instance object being created.
property1
A property or "attribute" of the class. This can be either an simple value or a
function. Can be initialized with default values or values passed in through a
parameter.
property2 An example of a property that has a default value (in this case its the result of
an expression) that is not the value of a parameter.
Example
var Vegetable = function (color) {
this.color = color;
this.delicious = true;
this.eat = function() {
console.log("nom");
};
};
Class Instances and Usage
Syntax
var objName = new ClassName(argument1, argument2, ..., argumentN
);
objName New instances of the ClassName class. These are objects.
ClassName The class we are creating an instance of.
argument1...N Arguments we are passing into the class.
Example
var broccoli = new Vegetable("green");
console.log("Broccoli is " + broccoli.color + "!"); // will prin
t "Broccoli is green!"
Notes
In the example above, we are accessing the color property on the object "broccoli" that is an instance of the class "Vegetable". See object property access.
Class methods
Syntax
ClassName.prototype.methodName = function (paramater1, paramater
2, ... paramaterN) {
statement1
.
.
statmentN
};
ClassName The class which the method is being added to.
methodName The name of the method we're adding.
paramater1...N The method parameters.
Example
var Person = function () {
this.job = "Unemployed";
};
Person.prototype.getJob = function() {
return this.job;
};
var Bob = new Person();
Bob.getJob(); // 'Unemployed'
Inheritance
Inheritance allows one class to gain properties from another class.
Syntax
SubClass.prototype = new SuperClass();
SubClass The class that receives the inheritance, the child.
SuperClass The class that gives the inheritance, the parent.
Example
var PoliceOfficer = function (age) {
this.job = "Police Officer";
this.age = age;
};
PoliceOfficer.prototype = new Person();
PoliceOfficer.prototype.retire = function () {
if (this.age > 66) {
this.retired = true;
} else {
this.retired = false;
}
return this.retired;
};
var Alice = new PoliceOfficer(43);
Alice.getJob(); // 'Police Officer'
Alice.retire(); // false
Example
var Lieutenant = function (age) {
this.rank = "Lieutenant";
this.age = age;
};
Lieutenant.prototype = new PoliceOfficer();
Lieutenant.prototype.getRank = function () {
return this.rank;
};
var John = new Lieutenant(67);
John.getJob(); // 'Police Officer'
John.getRank(); // 'Lieutenant'
John.retire(); // true
