Lista de etiquetas y funciones usadas en clase (con explicación básica)

27783

¡Hola! Abajo les dejo la lista de etiquetas y funciones compilé de las clases de este curso. Espero les sea de utilidad.

Indice

Etiquetas HTML
Lenguaje CSS
Funciones JavaScript
Objeto document
Objeto window
Objeto console
Objeto Math
Eventos
Clases predefinidas

Etiquetas HTML

<DOCTYPE HTML>: Con esta se empieza el archivo y no se cierra.
<html>: Se usa para abrir y cerrar el código html del archivo.
<head>: cabecera (no aparece en el sitio web, pero contiene el titulo y el estilo del mismo)
<Title>: contiene el titulo del sitio web (este es el que revisa el buscador y es importantisimo para el SEO).
<Style type="text/css">: Activa un bloque de código donde escribir CSS para dar estilo y formato al sitio web y a las etiquetas que en él se utilicen.
<Body>: contiene el cuerpo del sitio web.
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>: Son las etiquetas para mostrar titulos en el cuerpo del sitio web. Cada una tiene un estilo predeterminado diferente de las otras.
<p>: Se utiliza para declarar un párrafo. Esto hace que el navegador deje un espacio de por medio entre el contenido de esta etiqueta y lo que siga luego.
<strong>: coloca su contenido en negrita.
<script type="text/javascript">: habilita un bloque de código donde introducir JavaScript
<script src="codigo.js">: ejecuta el archivo “codigo.js” dentro del código html.
<meta charset="utf-8" />: habilita el uso de caracteres especiales como tildes o “ñ” en el código.
<canvas width="300" height="300" id="dibujito">: invoca un lienzo donde dibujar de 300 pixeles de ancho y 300 de alto; que puede ser identificado con el nombre (id) “dibujito”.
<br /> :Realiza un salto de línea en un párrafo.
<hr />: Hace un doble salto de línea separandolo con una linea horizontal.
<input type="text" value="caja de texto" />: Introduce en el html una caja de texto que por defecto dice "caja de texto. Es una buena practica colocar los <input> en una etiqueta <p>.
<input type="number" />: Introduce en el html una caja de texto donde solo puedes ingresar un número.
<input type="button" value="botón" />: introduce un botón que dice “botón”.
<img src="Imagen.png" />: Introduce una imagen al html. Varios formatos funcionan. Ojo: es buena practica colocarla dentro de un contenedor (ej:<p>)

Lenguaje CSS
Para emplearlo se coloca el nombre de la etiqueta a la cual se aplicarán estilos.

Por ejemplo, para aplicar formato a <body>:

Body:
{

}

Luego puedes emplear las siguientes funciones:

background-color: se utiliza para establecer un color de fondo. Se utiliza seguida del color en ingles o un código hexagesimal del tipo “#XXXXXX”.
color: se utiliza para establecer el color del texto.
font-family: se utiliza para elegir el tipo de fuente que tomará el texto (ej: Arial, calibri, etc.)

Funciones JavaScript

var permite declarar variables.
alert() muestra su contenido como mensaje emergente.
prompt() solicita al usuario el ingreso de datos a través de un mensaje emergente.
parseInt() convierte su contenido en un numero entero.
“parseFloat()” convierte su contenido en un numero flotante (decimal).
= Asigna el valor de la derecha a la variable de la izquierda.
== Compara la variable de la izquierda con el valor de la derecha (se usa en los condicionales.
\n es un salto de línea. Se usa dentro de strings de texto. El “” en el teclado se escribe con alt+92.

Condicional de una condición:

 if (planeta ==1)
 {
 // código si la condición se cumple
 }

 else
 {
 // código si la condición no se cumple
 }

Condicional de múltiples condiciones:

if (planeta ==1)
{
// código si la condición se cumple
}

else if
{
// código si la segunda condición se cumple
}

else
{
// código si las condiciones no se cumplen
}

“!” destaca un “no” dentro de una condición.
Es decir, si una operación NO da el resultado que indicas, o si la variable que lo sigue es un Boolean “False”.
Ejemplo:
a. If (!divisible) se dispara si divisible = false.
b. If (numero % 3 ! = 0) se dispara si la operación numero % 3 NO ES IGUAL A 0. (tambien es valido decir en este caso que numero % 3 ES DIFERENTE DE 0).
Para escribir “y” entre tus condiciones (y asi generar multiples condiciones en un solo “if”) se escribe “&&”.
Ej:
if (residuo3 == 0 && residuo5 == 0) Se dispara si residuo3 = 0 y residuo5 = 0.
lienzo = d.getContext("2d"); separa el lienzo en 2 dimensiones de un canvas asignado a la variable “d”.
Para dibujar en un canvas:
a. Lienzo.beginPath(); para indicar que empezarás a dibujar.
b. lienzo.strokeStyle = "red"; para elegir un pincel rojo
c. Lienzo.moveTo(100, 100); para colocar la punta del lapiz en la coordenada x=100 y y=100.
d. lienzo.lineTo(200, 200); para deslizar el lapiz formando una linea recta desde la ubicación anterior hasta la posición x=200 y y=200.
e. Lienzo.stroke(); para ejecutar el trazado descrito.
f. lienzo.closePath(); para indicar que has terminado de dibujar.

Declarar una función (ejemplo en clase #14):

Function nombre-función(parametro1, parametro2)
{
//código que ejecuta la función con los parámetros entre paréntesis
}

return es una función que se usa dentro de una función, y hace que la función regrese un valor designado por ti al ser invocada.
Ej:
Introducir “return resultado;” en el código de una función hace que cuando esta se ejecute devuelva el valor actual de la variable “resultado” si llega a ejecutar ese return.
OJO: en el instante que una función llega al return, esta ya no se ejecuta más.

Ciclo while

While(condición)
{
// operaciones
// recuerda colocar una iteración para que no se trabe
}

Ciclo for

For(variable = valor inicial, condición, iteración)
{
//Operaciones
}

Ciclo Do… while

Do 
{
//operaciones
}
While (condición);

boton.addEventListener("evento", "función a ejecutar al ocurrir el evento sin escribir parentesis); permite agregar una función cuando ocurre el evento declarado en un objeto llamado “boton”.
texto.value: Extrae el valor (en forma de cadena de texto) que fue introducido por el usuario en una caja de texto (declarada con el nombre “texto” en este caso).
Puedes leer toda la información amarrada a un evento cuando disparas una función a ese evento y declaras una variable en esa función. Ejemplo:
```
Document.addEventListener("keyup", revisar)
Function revisar (teclaPulsada)
{
Console.log(teclaPulsada)
}
```
Existe algo llamado objeto literal. Son objetos que puedes crear, y que estan llenos de valores. Es similar a una variable compuesta o multidimensional.
Se escriben como un bloque de código. Ejemplo:
```
Var Teclas = {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};
```
OJO:
1. El bloque de código de estos objetos termina en ";"
2. No se usa “=” para definir las variables internas, sino ":"
3. Las variables se separan entre si por una ","
4. La ultima variable interna declarada no se separa de la llave con una “,”. Esto crearía un error de sintaxis.
5. El objeto literal es una sola linea de código. Puedes desplegarlo por comodidad, pero como es una sola linea de código esta debe terminar en “;”
switch evalúa una variable con múltiples otras y genera código para cada caso.
```
switch (teclaPulsada.keyCode)
{
    case teclas.DOWN:
        console.log("Tecla ABAJO");
        break;
    case teclas.LEFT:
        console.log("Tecla IZQUIERDA");
        break;
    case teclas.UP:
        console.log("Tecla ARRIBA");
        break;
    case teclas.RIGHT:
        console.log("tecla DERECHA");
        break;
    default:
        console.log("Otra tecla");
        break;
}
```
1. La variable a comparar se coloca entre paréntesis antes del bloque de código.
2. Para exponer un caso de comparación se coloca “case” seguido de la variable a comparar y luego “:”. Luego se escribe el código correspondiente.
3. Para indicar que el código para ese caso terminó se escribe “break;”
4. El “else” de el switch se escribe como “default:” seguido por el código correspondiente.
5. No hace falta un “break” antes de la ultima llave. Pero puedes ponerlo sin causar un error en el código.
Introducir imágenes en JavaScript / y asignarlas a variables:
1. Primero asignas la dirección del archivo a una variable.
  Var mapa = "tile.png";
2. Asignas una variable a la clase Image().
  Var imagen = new Image();
3. Finalmente asignarás al source de esta clase el url que designaste previamente.
  Imagen.src = mapa;
4. Ojo, este Image() basicamente convierte a este objeto en una etiqueta <img> dentro del código html, haciendo que el navegador lo lea como una imagen.
5. Ojo, no se puede agregar new Image() al interior de un objeto literal.
Para dibujar imágenes preexistentes sobre un Canvas puedes utilizar la función papel.drawImage(imagen, x, y);
Donde:
• “papel” es el contexto 2d de un canvas
• “Imagen” es el objeto Image() con la ruta de la imagen que quieres cargar
• “x” es la coordenada en x que coincidirá con la esquina superior izquierda del dibujo que vas a insertar.
• “y” es la coordenada en y que coincidirá con la esquina superior izquierda del dibujo que vas a insertar.
Ojo, Canvas siempre dibuja encima del ultimo objeto insertado.
Para hallar el residuo de una división puedes usar una operación que se llama “Mod” o “módulo”, y se escribe con “%”
8 / 5 = 1,66666
8 % 5 = 2
Crear una clase permite elaborar un modelo de objeto con los mismos atributos. Se crean de esta manera:
```
class Pakiman {
	constructor (nombre, vida, ataque) {
    	this.name = nombre;
    	this.HP = vida;
    	this.Atk = ataque;
	}

	Hablar () {
	alert("hola");
	}
}
```
Una clase puede incorporar métodos y variables. Todas las variables deben incorporarse dentro del método “consturctor” y con el prefijo “this.” De este modo cualquier variable de esta clase recibirá el atributo.
Diferentes métodos se pueden incorporar a la altura del constructor, y actuarán como funciones dentro del objeto.
Para indicar que una variable nueva pertenece a una clase:
```
var pokacho = new Pakiman ("Pokacho", 80, 50);
```
En este caso, para correr el método de arriba se escribe:
```
pokacho.hablar();
```
Y sus variables quedan contenidas en:
```
pokacho.name
pokacho.HP
pokacho.Atk
```
Ojo: Por buenas practicas, las clases se escriben empezando por mayúscula.
Ojo: Las variables no se declaran dentro del constructor, solo se les asigna el valor como ocurre en el ejemplo.
Los arrays son variables especiales que funcionan como una biblioteca de datos con un indice. Estas se declaran de esta manera:
```
Var Cajitas = [];
```
Luego se le puede asignar valores de esta manera:
```
Cajitas [0] = "hola";
Cajitas [1] = "¿Cómo";
Cajitas [2] = "estas?";
```
Tambien se puede empujar un valor al ultimo indice del array con el método:
```
Cajitas.push ("ULTIMO");
```
Ojo: Los indices de un array empiezan en “0” y, por ejemplo, Cajitas [0] se dice “cajitas sub 0”.
Ojo: Puedes tener indices en texto, pero algunas funciones (incluyendo la consola del navegador) no podrán acceder a estos tan facilmente.
Ojo: Puedes crear un ciclo que pase por todos los indices de un array. En el ejemplo de abajo, la variable “freddito” pasara una por una por cada numero del indice del array.
```
For (var freddito in colección) {
	Console.log(colección[freddito]);
}
```
Puedes insertar una imagen en el document sin necesidad del canvas con esta función:
document.body.appendChild(imagen);
Ojo: “Imagen” debe ser un objeto de la clase Image().
Ojo: usar document.write es una mala practica. Quizas es buena para aprender. Pero la forma correcta de escribir algo en el document es con el innerHtml.
Para hacerlo, primero debes crear una etiqueta vacía en el .html con un id. Si es para escribir, entonces suele ser la etiqueta
<p id="resultado">
Luego, necesitas una variable en el .js que sea igual a esa etiqueta
r = document.getElementById("resultado");
Entonces modificas el contenido de la etiqueta con esto:
r.innerHTML = "Agrega el texto aquí"
Esto agrega contenido dentro de la etiqueta <p id=“resultado”> y te permite escribir sin que se pierda el contenido anterior de la página.
Ojo, innerHTML no es una función, sino que es un atributo. Ella modifica el contenido interno de una etiqueta HTML, y no emplea paréntesis.
Ojo, en el innerHTML se agrega un string, por lo que puedes emplear una concatenar segmentos de texto como cuando vas a escribir.
Escribir “+=” es lo mismo que decir que una variable es igual a su valor anterior mas algo mas. Y “-=” es lo mismo que decir que una variable es igual a su valor anterior menos algo mas. Ejemplo:
res = res + 8;
Es lo mismo que:
res += 8;
Y:
res = res - 9;
Es lo mismo que:
res -= 9;
Ojo, esto es dificil de leer, asi que debes usarlo con cautela. Lo importante es que puedas entenderlo cuando alguien más lo usa.

Objeto document

document.write() introduce su contenido como texto en el document del sitio web.
document.getElementById("nombre_id") invoca un elemento del document llamado “nombre_id”.
Document.addEventListener("keyup", revisar) Presta atención a un evento ocurrido en el document y ejecuta una función cuando este ocurre. Ej: en este caso presta atención a cuando alguien suelta una tecla y ejecuta la función “revisar”.

Objeto window

window.location accede al objeto que contiene la ruta de ubicación del archivo. “location” tambien es un objeto.

Objeto console

Console.log() habilita la consola para mostrar el contenido de la función como un mensaje oculto. Tambien permite ver el contenido de los objetos que introduscas en la función. Es decir, sus métodos y atributos.

Objeto Math
Permite emplear funciones matemáticas dentro del código JavaScript.