Programación JavaScript

                                            Programación JavaScript

• (FUNDAMENTOS I)

DrawBox y Newline

DrawBox ()                                Es una función que le dice a la computadora que haga algo determinado. Las funciones pueden tomar argumentos para darle información adicional a la computadora. Por ejemplo: [pic 1][pic 2]

DrawBox (Red);      Tiene a red como un argumento, que indica a la computadora que dibuje un cuadro rojo.

NewLine ();                Esta función sirve para saltear de línea, como por ejemplo si estamos dibujando un cuadro azul nos salta al siguiente cuadro azul:[pic 3]

DrawBox (Blue);[pic 4]

NewLine ();

Drawbox (Blue);

Strings

En programación, las letras, palabras, frases y todo lo que se coloque entre comillas se llama STRINGS. Por ejemplo: ‘Hello Word’ es un string, pero Hello Word no es un string.

Ejemplo de código:[pic 5]

DrawBoxes (‘royg’);  En este ejemplo, las letras ‘royg’ se usan como un string y se coloca cada letra como un color.

Para saltar de línea en un string es necesario solamente separar las letras:  

DrawBoxes(‘rr gg bb’);

pickRandom (color);                  Funciona para que el código elija el color del cuadro de manera aleatoria.[pic 6]

Ejemplo: [pic 7]

DrawBox (pickRandom(color));

DrawBox (Blue);

DrawBox (pickRandom(color));

Drawbox (Orange);

Variables:

Las variables son muy comunes en programación. Le permiten consultar la misma información varias veces. En JavaScript, las variables se pueden definir usando var y luego asignando a la variable un nombre único. Por ejemplo:

var myVariable = ‘my example’;

Ejemplo de código:[pic 8]

var myExample;

myExample = ‘I created a variable’;

print (myExample);

myExample = ‘I changed the value’;

print (myExample);

Se declara la variable myExample, luego, en la siguiente línea se le da un calor y después con la función print se imprime en la pantalla. El valor de la variable se actualiza e imprime nuevamente con un mensaje diferente.

Var es una forma de almacenar un valor para su uso posterior, que también se conoce como “variable”. Un var debe tener un nombre (también conocido como identificador) y, de forma opcional, se le puede asignar un valor, que puede ser un número, un string o un dato más complejo.

Ejemplo de código:[pic 9]

var city0f0rigin= ‘Londres’;

var city0fDestination;

city0fDestination = ‘Manila’;

city0f0rigin es una variable que será igual a ‘Londres’. Luego se crea ora variable llamada city0fDestination y posteriormente se le asigna un nuevo valor de ‘Manila’.

Otro ejemplo seria: [pic 10]

var month = ‘August’;

print (month);

var day = ‘Friday’;

print (day);

En este ejemplo se imprimirá las dos variables month y day en la pantalla.

“Recordatorio: en una variable es muy importante respetar las Mayúsculas y tildes.”

Otro ejemplo:[pic 11]

var y = 5;

var x = y;

print (x);

En este hay una trampa y es que al poner que se imprima x y esta es igual a y se imprimirá el valor de y que es 5.

Arreglos:

En JavaScript, un arreglo es una lista de elementos. Los elementos pueden ser diferentes tipos de datos: números, strings e incluso, otros arreglos. Un arreglo dentro de otro arreglo sé cómo anidamiento de arreglo.

Ejemplo de código:[pic 12]

var exampleArray = [ ‘blue’, ‘orange’, 5, 10, [ 50, 10] ];

exampleArray tiene 5 elementos. Contiene strings, números y un arreglo; que en si tiene dos elementos que son números.

Los arreglos comienzas y terminan con corchetes [] y con comas entre cada elemento.

En la mayoría de los lenguajes de programación incluido JavaScript los arreglos se indexan a partir de 0. El primer elemento en un arreglo tiene índice de 0. Por ejemplo, myArray [0] accede al primer elemento. Mientras que myArray[3] accede al cuarto elemento.

Ejemplo de código:[pic 13]

var frutas = [

‘Banana’,

‘Manzana’,

‘Naranja’,

];

var comprar = frutas [1];

La variable comprar tiene el segundo elemento en el arreglo, que es ‘Manzana’.

La indexación de un arreglo comienza en 0. Por ejemplo, myArray [0] conecta con el primer arreglo llamado myArray. Mientras myArray [1] se conecta con el 2do elemento.

Ejemplo:[pic 14]

var colors = [ ‘black’,

‘white’];

drawBox (colors[0]);

drawBox (colors[1]);

drawBox (colors[0]);

newLine();

drawBox (colors[1]);

drawBox (colors[0]);

drawBox (colors[1]);

newLine();

drawBox (colors[0]);

drawBox (colors[1]);

drawBox (colors[0]);

IF Statements:

Las if statements le permiten ejecutar una sección específica de un código cuando una prueba es verdadera. El código dentro de los paréntesis () es la prueba. Si la prueba es verdadera, entonces se ejecuta el código dentro del bloque {}. Si la prueba no es verdadera, entonces no se ejecuta el código dentro del bloque.

Ejemplo de código:[pic 15]

var aNumber = 5;

if (aNumber === 5) {

drawBox (blue);

}

if (aNumber === 4) {

drawBox (red);

}

En este ejemplo, la variable aNumber se asigna el número 5. Hay dos IF statements. La primera es verificar si aNumber es igual a 5. La segunda si es igual a 4. Solo la primera prueba de if statements es verdadera, de modo que se dibujara un cuadro azul.

“El operador igual a === es para verificar si 2 valores son iguales entre sí.”

Otro ejemplo:[pic 16]

var answer = pickRandom ([

‘heads’,

‘tails’,

...