CURSO PROGRAMACIÓN BÁSICA

Luego de terminar este curso puedes saber que el internet funciona con 3 herramientas
las cuales son: HTML, CSS, JavaScript, que son los tres lenguajes de programación para
crear aplicaciones web.

- HTML (Lenguaje de marcas de hipertexto), es el lenguaje donde se define la

información o el contenido del documento. El formato de los archivos es .html.

- CSS (Lenguaje de estilos en cascada), es el lenguaje donde se especifica el

diseño del documento, maneja todo lo relacionado con la parte visual. El formato
de los archivos es .css.

- JavaScript, es el lenguaje que hace que todo sea interactivo y que nos permite
crear sitios web El formato de los archivos es .js. Además, es el lenguaje de
programación que interpreta el navegador.

Nota: Nunca pero NUNCA se te olvide que ¡JAVASCRIPT o JS (para abreviar) no es

JAVA!

Java es un lenguaje para servidores, aplicaciones de escritorio y aplicaciones Android.

JavaScript es el lenguaje de la web, servidores, robots, etc.

- Una variable es un elemento que se emplea para almacenar y hacer referencia a

otro valor. Gracias a las variables es posible crear “programas genéricos”, es decir,
programas que funcionan siempre igual e independientemente de los valores
concreto sutilizados.

- Por otra parte, las condicionales de definen como: es el código que se ejecuta
siempre y cuando una circunstancia sea cierta.

- Los eventos por su paso son funciones que suceden cuando algo ocurre, sucesos
cómo un click, pulsar una tecla, colocar el mouse sobre un botón, etc.

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

- Los arreglos son un conjunto de datos ordenados por posiciones y todos

asociados en una sola variable. Los datos pueden ser de cualquier tipo, es decir,
es posible crear un arreglo que tenga una string en la primera posición, un número
en el segundo, un objeto en el tercero y así sucesivamente. Podremos acceder a
estos distintos datos de manera independiente o agrupándolos. Cabe resaltar que
un arreglo es un objeto.

- Los objetos son envolturas para código. El navegador tiene algunos objetos
nativos como:
Navigator: Es el objeto que contiene las funciones del navegador. También te permite
acceder al sistema operativo como el gps, guardar datos en el disco duro, etc.

window: Es el objeto que maneja cada una de las pestañas.

document: Es el objeto que contiene todo lo que podemos ver dentro de nuestra página.

En aplicaciones web tenemos un concepto llamado DOM (Document Object Model) es la

forma en que internamente el navegador organiza todo el HTML dentro de una estructura
de árbol.

Para complementar tus conocimientos puedes continuar con el curso de pensamiento

lógico el cual encontraras en platzi.com/cursos/pensamiento-logico/

----------------------------------------------------------------//------------------------------------------------------

- About:blank - (página en blanco en un navegador)

- alert ("Mi nombre es Juan Manuel Sanchez Tovar"); - (Disparar alerta)

- var nombre = "Juan Manuel"; - (Guardar en una variable mi nombre, al digitar la

palabra nombre, aparece el nombre Juan Manuel, ya que esta esta almacenada
en la variable “nombre”,

- alert ("Mi nombre es "+ nombre); - (Aparece el nombre que ya estaba almacenado
en la variable “nombre”). (+nombre: agregar el contenido de la variable var).

- nombre = “sanchez el hipopotamo”; (Almacenar el valor de “sanchez el

hipopotamo”, en la variable “nombre”).

- nombre = prompt ("cuál es tu nombre"); - Almacena un nuevo valor en la variable

“nombre”

- var x=1 var y=2 x+y= 3

--------------------------------------------------------//--------------------------------------------------------------

HTML, CSS y JavaScript son los tres lenguajes que están en el centro de crear
aplicaciones web, en este curso vamos a enseñarte principalmente JavaScript.

HTML (lenguaje de marcas de hipertexto), es el lenguaje donde se define la información o

el contenido del documento, el formato de los archivos es .html
- No es un lenguaje de programación
- Se define la información.
 - Contenido del archivo.
- Dentro de HTML, se escribe los otros dos lenguajes css y javascript.
- Estructurar la información.
CSS (cascading style sheets), el lenguaje donde se especifica el diseño del documento,
maneja todo lo relacionado con la parte visual, el formato de los archivos es .css
- Se encarga del diseño. (platzi.com/html)
JavaScript, el lenguaje que hace que todo sea interactivo, es realmente el lenguaje de
programación que nos permite crear sitios web, el formato de los archivos es .js

- Se encargar de la interacción, el cual es el resultado de la programación.

- Diseña la información
- Realizar la interacción de la información.
 El que realmente interpreta estos lenguajes es el Navegador.
 TIP: Se puede escribir CSS y JavaScript dentro de HTML, los profesionales normalmente
escriben esto por separado.

DEFINICIÓN DE LOS OBJETOS EN EL FORMULARIO DEL SITIO WEB

HTML: Es internamente todo el contenido que es información, la forma como se coloca el

título, el texto, la imagen y los elementos del formulario.

Es el archivo que es detectado por el navegador, para poder ejecutarse y mostrar el sitio
con e css y el javascript incluido por medio de vínculos.

CSS: Es lo que se encarga de mostrar el título en cierto color, fuente y tamaño, el ancho y
alto del texto a ingresar y donde puede estar ubicado el objeto donde se coloca la foto.

De igual manera la forma como se va a mostrar el botón “enviar”, en cuanto a su color,

tamaño, posición. Etc.
Color de fondo, tipografía y la forma visual de mostrar la página de manera más
agradable.

Mostar la información de manera visual especial.

JavaScript: El que se encarga de controlar el botón de “enviar”, el cual se encarga de

verificar si el correo o el password ingresados son correctos, para enviar la información o
alertar del error en caso de que no sea correcta la información para enviarla al servidor.

Detecta el click del botón, si la información requerida es correcta.

Nota: Existe un código html, texto plano que se encargar del contenido, css texto
plano que se encarga de los elementos del diseño, javascript texto plano que se
encarga de la interactividad y del código, todo esto se mete en un html y el
navegador lo interpreta, mostrando la web.

-----------------------------------------------------//-----------------------------------------------------------------

- JavaScript ¡=Java (JavaScript no es java)

--------------------------------------------------------//--------------------------------------------------------------

Primeros Pasos en el Navegador con Alert

- Alert: Instrucción o función, en JavaScript se utiliza como parámetro para mostrar

un mensaje en la ventana.

Alert (“mensaje a escribir”);

Para que se ejecute esta instrucción tiene que estar contenida dentro de 2 paréntesis uno
de apertura y otro de cierre.

Dentro de los paréntesis van los parámetros, son información que la función necesita para
ejecutar algo.

Las comillas son para delimitar un texto, se tiene que colocar un tipo de dato string
(cadena de texto)..
El punto y coma (;), sirve para delimitar la instrucción e informar cuando acaba la
instrucción.

alert ("El valor de la variable z es="+z);  Concatenación.

-------------------------------------------------------------------//---------------------------------------------------

HTML, CSS, JAVASCRIPT DE VERDAD

Los bloques de código no necesitan punto y coma.

- Hola <strong>mama</strong>, ya estoy haciendo algo.

<strong> Etiqueta que se utiliza para abrir y colocar negrilla a una palabra o un conjunto
de palabras.

</strong> Etiqueta que se utiliza para cerrar.

<p> </p>  Etiqueta para envolver un texto.

<html> </html> Que es un documento o archivo html.

<head> </head>  Cabecera

<title> </title>  Titulo que aparece en la pestaña del navegador

<body> </body>  Contenido donde esta la parte visual.

* Concatenar: Enlazar o vincular hechos o ideas que guardan entre sí una relación
lógica o de causa y efecto, pegar cadenas de texto.

** Identación: La indentación es un tipo de notación secundaria utilizado para

mejorar la legibilidad del código fuente por parte de los programadores.

Los estilos se colocan en archivos externos o en la etiqueta head, porque en esa

etiqueta se coloca, lo que no se ve o metadatos.

Código CSS: Tipo de código que se puede asignar a etiquetas especiales a id´s o clases,
permite colocarle diseños a ciertas etiquetas.

Los estilos se llaman atributos, los cuales son los que se le pueden cambiar y cuales no
los estilos.

- background-color: Permite cambiar el color de fondo de la página.

- color: cambiar color de la fuente.
- font-family: cambiar la fuente.

Colocar color de fondo al strong

Agregar JavaScript

La manera mas sencilla es agregarlo antes que se cierre el body, ya que javascript se
debe ejecutar despues de que todos los elementos visuales esten en pantalla.

La etiqueta de JavaScript es “script”.

- document.write: permite escribir en el html.

Agregar Variable al código

CUANTO PESAS EN LA TIERRA

Gravedad en la tierra = 9.8 m/s²

Gravedad en marte = 3.7 m/s²

Gravedad en Jupiter = 24.8 m/s²

( p∗g . marte )
Peso en marte =
g

- Encabezados: h1, h2, h3, h4, ………

La funcion parseInt (variable); devuelve un valor entero, pasanto las variables de tipo
flotante en tipo entero o cualquier tipo de dato.

La funcion parseFloat  convierte en numeros decimales en caso de que se requiera.

Tipo de dato flotante: Se utiliza para representar números decimales.

OBTENIENDO DATOS DE USUARIO

- Prompt: Obtener datos del usuario. (Se crea una variable llamada usuario).

Las etiquetas son cadenas de texto, por ende si se requiere colocar por ejemplo el
resultado en negrilla, toca escribirlo donde esta el texto normal.

FLUJOS Y CONDICIONALES

En que planeta desearia saber el peso del usuario.

- =  Se utiliza para asignar un valor a una variable.

- ==  Se utiliza para comparar dos valores.

Diagrama de Flujo

En este caso se tiene que hacer la pregunta

que “Elige tu planeta?”, para que el
usuario elija y se cumpla la condición.

Se puede colocar la función parseInt, en la

variable planeta, para que este
automaticamente convierta el dato
digitado en entero.

La etiqueta /n, dentro del texto significa salto de linea.

Condicional If

Se usa para tomar decisiones, este evalúa básicamente una operación lógica, es decir
una expresión que dé como resultado True o False, y ejecuta la pieza de código siguiente
siempre y cuando el resultado sea verdadero.

En este ejemplo se requiere colocar la condición de que si no elige 2, no escoja por

defecto valga la redundancia 2.
Else  Conecta conectores.
El DOM: Nuestro lugar de trabajo en la web

- navigator: El objeto que contiene las funciones del navegador, también te permite
acceder también al sistema operativo como el gps, guardar datos en el disco duro,
etc.

- window: El objeto que maneja cada una de las pestañas.

- document: El objeto que contiene todo lo que vemos dentro de nuestra página,
controla donde esta las imágenes, los textos, videos, títulos, elementos visuales,
donde el usuario interactúa.

Document Object Mode: Es la forma en la que internamente el navegador organiza todo

el HTML dentro de una estructura especial, a traves de la cual, se puede manejar la
aplicacion web mediante javascript. Tambien, crea un “arbol” de como los datos estan
estructurados internamente (en el codigo). El arbol se conoce como Document Object
Model.

El DOM: nuestro lugar de trabajo en la web

document.write  write es una función del objeto “document”.

Método  función que hace parte de un objeto.

Función  Una función no es más que un conjunto de líneas de código que hacen una
tarea en concreto, y esta función puede retornar un valor…

Atributo o propieda  Cuando una variable es parte de un objeto.

Colección de Caracteres, para tildes y demas simbolos, antes del titulo, osea en el
<head/>.

 Etiqueta meta que tiene como atributo charset cuyo

valor es “utf-8.
---------------------------------------------------------//-----------------------------------------------------------
Crear mensaje en la consola, en el momento de depuración.

Dibujar en el DOM
Etiqueta <canvas>= Etiqueta de dibujo.
- Se dibuja a travez de javascript.
- Trabaja como eje de coordenadas.

Se encarga de dibujar los puntos de acuerdo a la coordenadas, la primera imagen ubica

un punto en las coordenadas (100, 100) y la segunda dibuja una linea entre los puntos
(10. 5) y (100, 100).

Nota: El ejemplo es un canvas que tiene 200 pixeles de ancho y 200 de alto. (200,
200).
Ejemplo 1
La etiqueta <canvas>, tiene 250 pixeles de ancho y 250 pixeles de alto, se requiere crear
un punto en (100, 50), donde x=100 y y=50 y otro punto en (200, 250), donde x= 200 y
y=250, uniendolas por una linea.
-----------------------------------------------------//-----------------------------------------------------------------
Etiqueta canvas, con 300 pixeles de ancho y300 pixeles de alto.

La etiqueta id, es el identificador con el que java encuentra esa etiqueta, en este caso la
de “canvas” los “id”, tienen las mismas reglas de las variable, empiezan con letras o
underscore.
Obtener un elemento por id, según el ejemplo de “canvas”.
getElementById Metodo del documento, que trae un elemento atravez del “id”.

getContext Función del objeto canvas que permite obtener el area donde se va a
dibujar.
beginPath Iniciar un camino internamente es como se le conoce como iniciar un trazo.

strokeStyle Es una variable, atributo o propiedad, para el color de la linea.

moveTo Metodo o función del vancas para mover el lapiz donde va a empezar la linea.

lineTo Función de trazar una linea.

Stroke Función para dibujar la linea.

closePathFunción para cerrar el trazo.

Nota Se requiere asignar el valor del canvas a una variable, obteniendo el

elemento por medio del “id”, el cuál esta en el documento, en este caso el “html”.

En este caso se le asignara a la variable “d”, el valor del elemento del canvas,
mediante el Id, en este caso es “dibujito”.

Para obtener el area donde se va a realizar el dibujo, se crea una función llamada
“lienzo”, el cual se le asignara el elemento contenido en la variable “d”

Ciclo for y ciclo wgite en JavaScript

Las 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.
---------------------------------------------------------//-------------------------------------------------------------

En este ejemplo trataremos de realizar esta figura, para ello utilizaremos ciclos.
Ciclos  se requiere tener un limite, piezas de codigo que ocurren de una manera ciclica.
Ciclo While  Mientras que el bucle for se utiliza cuando sabes cuántas veces quieres
repetir un bloque de código, el bucle while te permite seguir ejecutando un bloque de
código mientras la condición a evaluar sea verdadera. Por lo tanto, aunque se puede
utilizar con un contador (como un for), se suele utilizar cuando no sabes cuántas veces
tienes que repetir el bucle.
Ciclo For  permiten ejecutar una o varias líneas de código de forma iterativa,
conociendo un valor especifico inicial y otro valor final, además nos permiten determinar el
tamaño del paso entre cada "giro" o iteración del ciclo.
 Eventos
Son funciones que ocurren cuando algo pasa, cuando abre tu sitio web, se puede ejecutar
un bloque de código, el evento mas común es dar click a un boton.
Las funciones cuando no se le coloca el (), quiere dar a entender que esta haciendo una
referencia a la función en este caso “dibujarPorClick” y no se desea ejecutar la función,
previamente creado.

De esta manera es como se toma el valor de una caja de texto, creando previamente la
variable texto.

O de esta manera

Ahora se desea colocar el mismo ejemplo, pero en este caso, no se coje por defecto las
lineas sino que uno mismo digita el ancho y las lineas, para calcular la ecuación, de la
siguiente manera.
Para el ejemplo anterior, se tiene que crear previamente la variable “ancho”, la cual se
requiere que se tome el valor indicado en el ancho del canvas, perteneciente al archivo
html.
Tenemos que crear la variable del ancho en el archivo “*.js”, en el cual vamos a obtener el
valor del ancho almacenado en la variable “d”, en la cual esta el elemento del id del
canvas.

El alert es para mostrar que se asigno correctamente la variable

ancho.

Detectar eventos del teclado con JavaScript

KeyCode de las teclas de movimiento.

Nota: para crear variables, con variables se tiene que abrir un bloque de código, la
cual en este caso, tiene una excepcion de colocar un punto y coma (;), al final del
bloque, situación que no ocurre generalmente en el momento de crear un bloque.

Realizar los movimientos por medio de las flechas y que se dibuje el recorrido en el lienzo,
en el cual se van hacer movimientos de 10, cuando va para arriba se va a restar y, abajo
sumar y, derechas sumar x e izquierda restar x.
SECRETO

Los eventos no necesitan parámetros porque son opcionales(evento), esta variable

se va a llenar de datos, se pasa internamente addEvenListener, a la función, donde
se muestra todos los detalles del evento, en este caso las teclas oprimidas.

Funciones matemáticas y números aleatorios en JavaScript

Math Colección de funciones especiales, que permite hacer ecuaciones matemáticas

complejas, contiene las opciones.

.ceil”Techo”, va a redondear hacia arriba.

.floor ”Piso”, va a redondear hacia abajo.

Math.randomfunción del objeto o clase estática –“math”, que devuelve un numero

entre 0 y 1, porque funciona como porcentajes.

Ecuación para detectar el número ramdon entre 10 – 20.

 - Crear una variable para guardar una imagen.

- Crear un objeto para asignar una imagen.

A las definiciones competas de un objeto, se le llaman clases.

-------------------------------------------//-------------------------------------------------------

Cuando se desea cargar la imagen del fondo, en este caso “cargaOk : false”, da a
entender que la imagen aún no se ha cargado.

En la siguiente imagen, se realizar el proceso de cargar la imagen, para proceder a

dibujar.

A continuación, luego de carga el fondo se procede a dibujar en el papel.

En este caso vamos a ver como colocar varios objetos en distintas posiciones a lo largo
del fondo.

En este ejemplo se realizar un ciclo “for”, para colocar varias vacas en el fondo, en este
caso menos de 10, se crean varias “x” y “y”, para realizar el posicionamiento de las
imágenes y el 420, resulta del límite para colocar la imagen de la vaca, ya que esta es de
80x80 pixeles y el fondo es de 500x500 pixeles, entonces 500-80 = 420.

----------------------------------------------------//------------------------------------------------------------------

En este caso, se crea una variable cantidad, la cual va a sacar una cantidad aleatoria de
elementos en este caso vacas, en el fondo.

Y se cambia el valor de 10, por la variable cantidad en el “for”.

 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 &&.

Operación Modulo  Sirve para saber cuándo sobra un número.

Modulo  Me da el resultado de lo que sobra.

División Da el resultado real.

Siempre que el valor dividido entre 2 es 0 es par y si el modulo entre dividido entre 2 es
diferente de 0 es impar.

---------------------------------------------------//------------------------------------------------------------------
Se desea realizar un ejercicio en el cual se muestren los numeros del 1 al 100 y los que
son divisibles por 3 se les coloca fizz, los que son divisibles por 5 se les coloca buzz y los
que son divisibles por 3 y 5, se les coloca fizzbuzz.

Nota: Código, para sacar los números de 1 al 100, pero en este caso los números
salen de manera horizontal.

Se le agrego la etiqueta “<br/>”, para hacer un salto

de línea y los números se muestren de manera vertical.

Se crea una función “esDivisible”, el cual retorna verdadero si el numero es divisible y

falso si no lo es.

Ahora se hace el proceso de verificar si los números son divisibles.

 Proyecto Juego

Clases  Definición de un objeto.

Constructor: Funciones que se dispoaran cuando se crea el objeto.

ThisIndicador de la instancia donde estoy.

La clase Pokemon, con sus atributos.

Console.log Multiple

Nota: dentro de la clases no se escribe la palabra function, porque se entiende que

todo bloque de código dentro de una clase es una función.

Arreglo o Array
Un array, es un tipo de dato estructurado que permite almacenar un conjunto de datos
homogéneo, es decir, todos ellos del mismo tipo y relacionados. Cada uno de los
elementos que componen un vector pueden ser de tipo simple como caracteres, entero o
real, o de tipo compuesto o estructurado como son vectores, estructuras, listas...

Array Asociativo Es cuando la pocisión de la caja no es un número sino un string o

cadena de texto.

Función de mostrar la imagen del pokemon.

Etiqueta <hr>  Etiqueta para trazar una linea que hace un salto de linea, con una raya.

Se puede dividir el “*.js”, en dos archivos, uno en el cual definimos la clase y otro en el
cual vamos a definir los atributos y las imágenes.

En el html, promero se hace la referencia al “js”, donde esta alojada la clase.