La creación de aplicaciones web se basa en:

 HTML (.html): donde se define el contenido …lenguaje de marcas de hipertexto.

 CSS (.css): donde se define diseño y parte visual … Lenguaje de estilos en cascada.

 JAVASCRIPT (.js): crea dinamismo … diferente de Java.

Todo lenguaje de programación trabaja con determinados elementos.

 VARIABLE: Elemento que almacena valores.

 CONDICIONAL: circunstancia requerida para correr código.

 FUNCIÓN: Conjunto de instrucciones que crean nuevas variables.

 CLASE: Define las características del objeto.

 ARREGLO: Conjunto variado de datos con orden definido y agrupados en una variable (es
un objeto).

1. alert () > Sirve para disparar un mensaje en la pantalla del navegador.

2. prompt () > sirve para pedir datos al usuario (hacer un Input).

3. alert ("Mi nombre es" + nombre) > A esto se le llama una concatenación, sirve para unir
dos cadenas de texto en una.

4. var > sirve para abrir un espacio en memoria (en este caso, una variable) donde se pueden
guardar un tipo de dato, ya sean numérico o de texto.

 Numérico: Para abrir un espacio en memoria (una variable) de tipo numérico es necesario

añadirle un 0 o el valor numérico que quieras en la variable.

 Texto: Para abrir un espacio en memoria (una variable) de tipo texto es necesario abrir
dos comillas ("") para que el navegador (o la computadora) lo detecte como texto.

Recordatorio: Al final de cada cadena de código no te olvides de añadir el punto y coma (;) por qué
si no JavaScript pensará que está continuando la cadena de código y no va a entender que está
sucediendo, terminando por romper el código. 

¿Cuàl es la diferencia entre programaciòn y interactividad?

programacion es codigo que tu escribes para que nuestros telefonos o computadores hagan algo.

la interactividad es el resultado de la programaciòn.

html = no tiene interactividad

css =  no tiene interactividad

javascript = si tiene interactividad con la informacion de html

Html = es un lenguaje de marcado de hipertexto, donde colocamos la información (texto plano).

css = Es un lenguaje de estilo en cascada, el contenido lo muestra de una forma visual (elementos
de diseño).

javascrpit = hace que los botones funcionen.

¿con que extensiones se guarda? html = .html, css = .css, javascript = .js

¿Qué editores de código hay? sublime text , atom = editor del curso, visual studio.

¿Interpreta los archivos? es el que abre = navegador= Browser.

Diferencia entre Java y JavaScript:

java: Es un leguaje de programación compilado, eso quiere decir que necesita de un compilador

para poder ser ejecutado.
javascript: Es un lenguaje de programación interpretado, eso significa que no necesita de un
compilador, sino que puede ser ejecutado “interpretado” por cualquier browser (navegador).
Esta diferencia es la que hace que java sea útil en cosas que JavaScript no lo es, y viceversa.

Componentes:

- alert es una orden

- Las comillas son para delimitar un texto libre" o sea una cadena de texto (String)

- Funciones son colecciones de códigos que hacen algo y van dentro de paréntesis

- Los Parámetros son la información que una función necesita para lograr algo, y van dentro de los
paréntesis y con comillas

- Punto y coma; la gran mayoría de líneas de código terminan en punto y coma, y es para decirle al
navegador que hasta ahí termina la instrucción que le dimos

- Los Bloques de código son los que no terminan en punto y coma; sólo las líneas independientes

var x = 1;

- var es igual a variable (declara la existencia de una variable en memoria)

- Operador es el signo = asigna el valor de la variable

- x variable, = operador, 1 el valor de la variable

- Cuando sumamos un número a un texto ambos se vuelven textos y eso se llama concatenación

alert("El valor de z es " + z);

Ejemplos: peso en otro planeta:
Recordar:

 Cuando tienen un valor en comillas("") es un texto

 Puedes usar la función prompt para recibir datos del usuario.

 Concatenar es unir cadenas de texto a variables

El método "toFixed ()" se utiliza para mantener una cantidad especifica de decimales.

prompt(): Traer datos del Usuario.

=: asignación.

==: comparación.

(): parametro de una función. 

var: es un valor.

parseInt(): Función que convierte texto en un número.

/n: salto de linea en JS, el equivalente a br en html.

Concatenación: Llamar un valor mediante una variable asinganda con anterioridad.

if(): Sí.

else: Sí no.

else if(): Sí no, sí.

document.write(): mostrar algún contenido.

Objetos internos del navegador con JavaScript:

El navegador internamente tiene sus propios objetos a los cuáles podemos acceder o manipular
mediante JavaScript. Estos son:

 Navigator: Contiene las funciones especiales del navegador y puedes acceder también al

sistema operativo con este objeto.

 Window: Maneja las ventanas y tabs del navegador.

 Document: Contiene todos los elementos que se encuentran dentro de una página web.
Controla internamente cada componente visual con el que los usuarios interactúan.

DOM (Document Object Model): Es la forma en la que el navegador internamente organiza todo
nuestro HTML dentro de una estructura especial (tipo árbol), con la cual podremos manejar
fácilmente nuestra aplicación web mediante JavaScript

📝 Nota: Puedes organizar tu HTML en un diagrama o esquema tipo árbol, de esta manera verás
cómo tu JavaScript recorre o llega a los objetos de tu aplicación

Estructura: Repaso.

Hasta aquí es sólo código en html.

Ahora se escribe código en Java Script

Para colocar un script en Javascript de una manera sencilla se coloca justo antes de que se cierra el
body, porque las únicas etiquetas que deben ir dentro de html, al mismo nivel, son head y body.

Script va antes, porque es donde cargan todos los elementos visuales.

Dibujando en el DOM

 getContext: es un método del objeto Canvas que obtiene el área dónde se va a dibujar.

 beginPath: un método que inicia un trazo.

 strokeStyle: variable para guardar el color de la línea.

 moveTo: método para mover el lápiz desde dónde va a dibujar la línea en las coordenadas
especificadas.

 lineTo: traza una línea hasta las coordenadas especificadas.

 stroke: función que dibuja la línea con un estilo especificado.

 closePath: cierra el camino del trazo, es como levantar el lápiz.

OJO: SI EN ATOM SE ESCRIBE “html” y se presiona tab o enter, automáticamente sale la estructura
-.-

Funciones:

La funciones son una herramienta que nos permite escribir código que vamos a re-usar múltiples
veces,

 Puedes escribir una función en JavaScript así:

 function nombreFuncion(parametros) {

 //Código que ejecuta la función

 cómo crear una función con la que puedas crear las líneas que necesites.

Recuerda:
 

 Cuando escribes el mismo código muchas veces, es una buena idea mejor usar una función

 Los parámetros de una función, son variables dentro de la función y solo funcionan dentro
de ella.

Eventos y formularios en HTML Y JavaScript:

do = hacer.
while = mientras.

El do representa la acción que se va a realizar mientras se cumpla la condición que está dentro del
while. Esta acción es dibujarLinea y aumentar el valor de l.

El while representa la condición, ésta condición es que el valor de l sea menor al valor de linea.

Entonces, el flujo sería el siguiente:

 Entro en el do

o dibujarLinea().

o Subo el valor l.

 Reviso la condición, ¿l es menor que linea?.

Si la respuesta es positiva entonces la condición se cumple por ende vuelvo a entrar en el do, si la
respuesta es negativa quiere decir que la condición no se cumple y no vuelvo a entrar en el do.

1: ¿Cómo detectamos cuando el usuario presiona una flecha arriba,abajo etc.?

2:¿Que evento es  y cómo se llama? keydown o keyup

1)Detectar la tecla presionada con el evento keydown: 

CamelCase es un estilo de escritura que se aplica a frases o palabras compuestas. El nombre se

debe a que las mayúsculas a lo largo de una palabra en CamelCase se asemejan a las jorobas de un
camello. El nombre CamelCase se podría traducir como Mayúsculas/Minúsculas Camello. El
término case se traduce como "caja tipográfica", que a su vez implica si una letra es mayúscula o
minúscula y tiene su origen en la disposición de los tipos móviles en casilleros o cajas.

Existen dos tipos de CamelCase:

 UpperCamelCase, cuando la primera letra de cada una de las palabras es mayúscula.

Ejemplo: EjemploDeUpperCamelCase.
  lowerCamelCase, igual que la anterior con la excepción de que la primera letra es
minúscula. Ejemplo: ejemploDeLowerCamelCase.

Fuente: https://es.wikipedia.org/wiki/CamelCase

Atajo de teclado para abrir la consola en el navegador:

Recargar el navegador:

Código de teclas para las flechas:

Objeto para almacenar el valor numérico de las teclas: JSON (Javascript Objet Notation)
Son lo mismo que:

Estructura de control switch: (se utiliza en casos especiales porque no es muy legible el código)

Uso y carga de imágenes en Canvas

En canvas puedes insertar imágenes, hagámoslo con nuestra villa platzi.

Recuerda:

 Debemos agregar la imagen en el evento load del objeto.

 Debemos usar el método .drawImage del canvas para insertar la imagen.

 Canvas dibuja siempre encima del último objeto.

División, módulo y residuo en JavaScript

Cuando te presentas a un trabajo de programador tal vez debas resolver un problema llamado
fizzbuzz, este busca conocer tus conocimientos, veamos cómo resolverlos

Primero debes conocer cómo calcular el residuo de una división, ahora puedes llevar esto a código

Recuerda:

 Para calcular el módulo puedes usar %

 Los programas dividen los programas complejos en problemas pequeños

  La operación lógica and (y) se escribe en JavaScript con &&

OJO: “ ! “ SIRVE PARA NEGAR LA EXPRESIÓN

Clases y Arrays en JavaScript
**Resumen de la clase: ** En Javascript existe la programación orientada a objetos (OOP en sus
siglas en inglés), la cual se crea a partir de una clase, donde se define las características del objeto
o atributos y sus capacidades o métodos.

Así como otros lenguajes, este concepto conlleva lo siguiente:

 Objeto
Una instancia de una Clase.

 Propiedad
Una característica del Objeto, como el color.

 Método
Una capacidad del Objeto, como caminar.

 Constructor
Es un método llamado en el momento de la creación de instancias.

 Herencia
Una Clase puede heredar características de otra Clase.

 Encapsulamiento
Una Clase sólo define las características del Objeto, un Método sólo define cómo se
ejecuta el Método.

 Abstracción
La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz
de simular en un modelo de la realidad.

 Polimorfismo
Diferentes Clases podrían definir el mismo método o propiedad.
Diagrama de Flujo del Cajero Automático
OJO: Math.floor es para redondear hacia abajo

Of es para obtener una instancia dentro de los objetos