Las Clases en Linea de Programacion HTML, CSS, JAVASCRIPT

CLASE 1
ALERTAS CON GOOGLE
CLASE 2
QUE ES HTML,CSS,JS
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.
Vemos cada uno:
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 (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
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
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.
CLASE 3
JAVA NO ES JAVASCRIPT
Java es un lenguaje para servidores, aplicaciones de escritorio y aplicaciones

Android
JavaScript es el lenguaje de la web, servidores, robots, etc.
CLASE 4
Primeros pasos en el navegador con alert
Ya tienes un navegador y un editor de texto, eso es lo único que requieres.
Ve a la consola, desde ahí puedes escribir JavaScript sin tener que crear un
archivo.
Primero mostremos un mensaje, escribe:
alert(\'Hola mamá, estoy programando\');
Lo que has hecho es ejecutar una función, estas son colecciones de código que
hacen algo, en JS siempre que quieres ejecutar una debes escribir paréntesis de
apertura y de cierre, las comillas delimitan un texto (string) y punto y coma (????
se utiliza para terminar la instrucción.
También, podemos crear operaciones básicas,
var x = 1;
var y = 2;
var z = x + y;
Hemos declarado variables, las declaramos con la palabra reservada var, el
nombre, operador de asignación (=) y el valor que va a tener.
Recuerda: Todo en programación tiene que ver con seguir las reglas de un
lenguaje y luego crear las instrucciones que quieres para lograr los objetivos que
deseas.
TIP: En consola puedes hacer más grande el tamaño de la letra con Ctrl y +
CLASE 5
HTML, CSS, JavaScript de verdad
Los archivos HTML funciona con etiquetas, por ejemplo
Hola mamá ya casi aprendo
Todos los contenidos en HTML deberían estar dentro de una etiqueta, y todos los
archivos HTML tienen esta estructura, cómo
<title>Título de la página</title>
Contenido de la página
La etiqueta que te permite escribir CSS dentro de HTML es <style>, se coloca
dentro de head. La etiqueta para escribir JS dentro de HTML es <script>, se
coloca antes de terminar el body.
Recuerda:
Los nombres de las variables tienen algunas reglas, cómo, no pueden tener
espacio, debe empezar siempre con una letra, las minúsculas y las mayúsculas
importan.
Identación, tienes bloques de código, estos deben ir un poco a la derecha.
Los programadores pasan 80% de su tiempo leyendo código y 20% escribiendo
código, por esto es importante seguir buenas prácticas. Es importante ver las
extensiones de los archivos.
CLASE 6
VER EL PDF DESCARGADO
CLASE 7
Peso en otro planeta

¿Cuánto pesas en la tierra?, calculemos tu peso en otro planeta
Creemos nuestro primer algoritmo que nos permita saber nuestro peso en otro
planeta, luego escribamos esto en código usando JavaScript.
Recuerda:
 Los títulos se pueden agregar con la etiquetas h1,h2,h3,h4,h5,h6
EJEMPLO CON ALERTE

EJEMPLO SIN ALERTA SOLO TEXTO
EJEMPLO CON NUMERO ENTRO
CLASE 8
Obteniendo datos del usuario

¿Qué tal si obtenemos ahora datos del usuario?
Recuerda:
 La consola nos sirve para saber el estado de las variables
 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
CON ENTEROS Y NEGRITA
CON DESIMALES Y NEGRITA

CLASE 9
Flujo y condicionales
¿Qué tal si ahora podemos elegir el planeta?
Creemos primero un algoritmo para resolver nuestro problema, para esto debemos
aprender a usar condicionales.
Para escribir una condicional usas la palabra reservada if, puedes escribir una
como
if (planeta == 1)
{
// Código si la condición se cumple
}
else
{
// Código si la condición no se cumple
}
Si quisiéramos tener tener varias condiciones podemos escribir nuevas
condiciones con la palabra reservada else if
if (planeta == 1)
{
// Código si la condición se cumple
}
else if (planeta == 2)
{
// Código si la segunda condición se cumple
}
else
{
// Código si las condiciones no se cumple
}
Recuerda:
 El nombre de los archivos deberían seguir las mismas reglas que los
nombres de variables
 El código debería ser fácil de leer
ELIJE UN PLANETA
SI ELIJES MARTE CONDICION IF
SI ELIJES JUPITER CONDICION ELSE

PARA CONDICIONARLOS SOLO CON 1 Y 2
UN MENSAJE PARA EL QUE NO ESCRIBA 1 O 2
CLASE 10
El DOM: nuestro lugar de trabajo en la web

En programación existen objetos, estos son como envolturas para código, el
navegador tiene algunos nativos cómo:
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
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
Clase 12
Dibujar en html
Dibujando en el DOM
Vamos a dibujar en HTML, para esto usamos la etiqueta
Para dibujar usamos JS para darle las instrucciones y los canvas funcionan con
coordenadas
Solamente llegando al canvas no podemos dibujar, debemos crear un contexto,
ahora sí, mira cómo dibujar con HTML y JavaScript
Recuerda:
 ID es el identificador con el que podemos encontrar etiquetas con
JavaScript, los nombres siguen las mismas reglas que las variables
 Puedes obtener un elemento con su id buscándolo con
document.getElementById(\'nombre_id\');
CLASE 13
FUNCIONES
Funciones en JavaScript
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.
Clase 14
Ciclos while y for
Ciclos while y for en JavaScript

Otro concepto fundamental en programación son los ciclos,
Los ciclos son piezas de código que se repiten hasta que se cumple una condición
Recuerda:
 Ten cuidado de no crear ciclos infinitos que bloqueen el navegador.
https://appsco.platzi.com/clases/basica-appsco/concepto/segundo-proyecto-dibujando-con-
canvas/ciclos-while-y-for-en-javascript/material/
https://apps.co/cursos/appsco-curso-gratis-de-programacion-basica/
https://apps.co/

Las Clases en Linea de Programacion HTML, CSS, JAVASCRIPT

Cargado por

Copyright:

Formatos disponibles

Las Clases en Linea de Programacion HTML, CSS, JAVASCRIPT

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Las Clases en Linea de Programacion HTML, CSS, JAVASCRIPT

Cargado por

Copyright:

Formatos disponibles

CLASE 1

ALERTAS CON GOOGLE

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

VER EL PDF DESCARGADO

Peso en otro planeta

EJEMPLO CON ALERTE

EJEMPLO CON NUMERO ENTRO

Obteniendo datos del usuario

CON DESIMALES Y NEGRITA

SI ELIJES MARTE CONDICION IF

SI ELIJES JUPITER CONDICION ELSE

UN MENSAJE PARA EL QUE NO ESCRIBA 1 O 2

El DOM: nuestro lugar de trabajo en la web

Ciclos while y for

Ciclos while y for en JavaScript

También podría gustarte