EXPLÍCAME
JAVA SCRIPT
Intentando comprender las cosas se comprenden
JAVASCRIPT PARA
APLICARLO EN
SITIOS WEB, Y
HACERLOS
MAS INTERACTIVOS
Laynewoods para darle mas interactividad a las imágenes
Slider deslizador de fotos automáticos
Tabs funcionales
Parallax
Efecto scroll
Menú movil
ESCRIBO EN UN PAPEL
QUE QUIERO
PUEDO HACER UN PSEUDOCÓDIGO
UNA PRUEBA DE ESCRITORIO, UN
ESQUEMA
SITIO WEVB
Tener listo el sitio responsivo, probar y ajustar
SITIO WEB
ELABORAR EL CÓDIGO
Maquetar el sitio, darle estilos y hacer la programació JS
ELABORAR EL ORGANIZAR LA ESTRUCTURA DEL SITIO
CÓDIGO Organizar las carpetas y los archivos ;
index, js, [Link], estilos .css, img, fuentes, media, otras
ORGANIZAR LA páginas, abrir el Prepros, y arrastar las estructura del sitio
ESTRUCTURA
HACER EL PS O LA PLANTILLA
HACER EL PS O LA PLANTILLA
Hacer el prototipo de la página
RECOGER ORGANIZAR INSUMOS
RECOGER ORGANIZAR INSUMOS
Tener llistos, editor del código, materiales y archivos
QUE SE QUIERE HACER QUE SE QUIERE HACER
Que tipo de sitio web ser requiere de acuerdo al brief
Editor de código Sublime text ST
[Link] sublime text de la página
DESCARGAR [Link] paquetas para aprovechar las herramientas
de edición
[Link] en google : Package control sublimeText3,
Y PREPARAR EL ingresar a Installation Package control, acá se podrá
instalar el control de paquetes para ST , seguir las
EDITOR DE CÓDIGO instrucciones de la página para instalar el control de
paquetes
4. Cuando se instale el control de paquetes en ST,
cerrarlo y volverlo a abrir
EN ST presionar Ctrl + Shift + P
Opción Install Package, escribir el
nombre del paquete a instalar
PAQUETES SUGERIDOS PARA INSTALAR:
AdvanceNewFile (Ctrl + Alt + N ) Crear nuevo archivo
Comment-Snippets
emmet-sublime-master (Atajos de teclado como PAQUETES
.clase , #id , etiqueta (todos con TAB)
JavaScript & NodeJS snippets
SUGERIDOS PARA
DESPUÉS DE INSTALAR LOS PAQUETES, CERRAR EL
EDITOR (ST) PARA QUE FUNCIONEN
ST
Alistar el sitio web
CARPETA INICIAL ARCHIVO INDEX CARPETAS CREAR ARCHIVOS
Crear una carpeta nueva Dentro de la carpeta BÁSICAS css = [Link], [Link]
con el nombre del sitio inicial crear el archivo
js= [Link],
web index con extensión html
Dentro de la carpeta [Link]
inicial crear carpetasa fonts=awesome, fuentes en
[Link]
usar: gral
css, img, js, fonts, html img = las dtes imágenes
html = páginas adicionales
USAR EL ST USAR EL html / head COMENZAR
PREPROSS crear la version html head Comenzar a escribir el
Abrir el ST en el index código
Abrir el prepross, y Con las meta
Arrastar los archivos al
arrastrar los Con los documentos y Se enlaza el js del código
ST
archivos de estrcutura del fuentes a vincular con el script en la parte
siitio web, para poder el css, las fuentes, los de abajo del body
usar el estilos, less con prefixfree
css
QUE ES JS FUNCIONA CON HTML
Desde el editor de código, puedo maquetar, crear estilos y
combinarlo con JS
Js (Javascript), es un lenguaje de programación
que sirve para darle instrucciones a lo que yo quiero
que haga el pc, desde la lógica, el conocimiento del
lenguaje, y el conocimiento de lo que quiero construir
Lenguaje de programación
Usar palabras para expresar
ideas, y que estas ideas tengan
propósito y lo logren
¿QUÉ ES
JAVASCRIPT? - Conjunto de pasos para cumplir una meta.
- La meta se cumple con una lógica.
- Se debe encontrar un camino para llegar aun fin con
diferentes herramientas de la mano de la lógica. no como con
html o css, que solo se tienen las etiquetas y se aplican de una
forma estandar)
DENTRO DE BODY
<body>
<script> </script>
</body>
el script se puede colocar al final del código de body, dentro
de body
EN HTML
Atajo del teclado
scritp:src + tab
<SCRIPT>
<script src="[Link]"> </script>
</SCRIPT>
Para enlazar un documento externo en el códgo html
y escribir el código en ese documento externo (GUIÓN)
Se puede escribir entre el script en el html, pero por
orden es mejor escribirlo en el documento externo
LENGUAJE DE
PROGRAMACIÓN
JAVASCRIPT
Palabras, frases, instrucciones, comandos, códigos, listas, recursos
FUNCIONA CON TODO ESTE TIPO DE CARACTERES
PARA ORGANIZAR LAS INSTRUCCIONES
Lenguaje
VARIABLES Espacio dentro de la CPU, para guardar información o datos, puede tener muchos valores
CONSTANTES vALORES ÚNICOS QUE NO CAMBIAN EN EL PROGRAMA
RESERVADAS Palabras reservadas para JS, que no pueden ser usadas para otro efecto diferente al que ya tiene el programa
RELACIONES Combinaciones de variables, constantes , reservadas para obtener diferentes resultados
INGRESOS
Tipos de valores a
almacenar en las variables,
Arreglos
usos y combinaciones
Numéricas Enteras
Html Objetos
Decimales
Cadenas de texto Funciones
Booleanas Métodos
USO DE
Se usa la palabra reservada var
VARIABLES DECLARAR
A var se le da un nombre, esto es DECLARAR la variable,
este espacio en la CPU recibe un nombre para usarlo.
DECLARAR var numero
INICIALIZAR
E INICIALIZAR Es darle un valor a la variable, guardar ese valor en el espacio
de la CPU para usarlo
numero = 3
HOSTING
INICIALIZAR DECLARAR
Para usar la variable Puedo declarar (DARLE
se debe inicializar antes del NOMBRE) la variable en
uso; darle valor cualquier momento del
código, el hosting siempre la
pondrá al principio
Sintáxis de los datos a almacenar
Numéricos Caracteres BOOLEANO ELEMENTOS
Enteros var textos HTML
tIPO DE VALOR LÓGICO
var nombre textos = `entre comillas`; usar en js los elementos
nombre = 2 (sin nada de HTML
PUEDE SER
especial). Se recomienda utilizar
VERDADERO O FALSO
Decimales comillas sencillas var nombre =
var decimal [Link](
var nombre = true/false
decimal= 2.3 (con punto) `#id`)
ARREGLOS OBJETOS Funciones
Una variable con más de un
Varios elementos , y cada Código que es reutilizable
MÉTODOS
valor
ENTRE [] elemento tiene un valor Se le asigna un espacio Es cuando un objeto tiene
Separados por coma que puede o ser una variables, adentro una función
dependiendo de la propiedad, o una función. se utiliza la palabra
variable lleva o no Se crean con llaves function al inicializarla,
comillas. {}, cada propiedad se tiene parámetros (), y
Los arreglos tienen separa por comas, los el proceso {},
posición valores se asignan con Al final se debe usar con
dos puntos el nombre()
INDICES
CADA ELEMENTO DE UN ARREGLO TIENE UN INDICE
CASA = [`SALA`, `ALCOBA`, `BAÑO`, `BALCON`]
INDICES O=SALA 1=ALCOBA 2=BAÑO, 3 BALCÓN
ARREGLOS
REFERIRME
A UNO DE SUS PARA ACCEDER A DETERMINADO
ELEMENTO DENTRO DE UN ARREGLO
ELEMENTOS ESCRIBO NOMBRE DEL ARREGLO Y ENTRE CORCHETES EL NÚMERO
DEL INDICE EN EL QUE ESTÁ EL ELEMENTO. cada elemento se separa
por una coma.
CASA[2] estoy accediendo al elemento baño
ARREGLOS SE LES PUEDEN
ASIGNAR LOS VALORES DESPUÉS
var nombre = [ ];
nombre [0]= `uno`;
nombre [1] = 2;
nombre [ 2 ] = `tres`;
nombre [ 3 ] = false;
nombre = [`uno`,2,`tres`,false]
AREGLOS
Al asignar valores después
puedo dejar lugares vacíos De esta manera
var frutas = [ ] se crea un
arreglo de 7 elementos
frutas [0] = `manzana`; con 4 cupos para
frutas [1] = `pera`; poder llenarlos
frutas[6] = `fresa`;
FUNCIONES palabra con
PIEZAS DE paréntesis
CÓDIGO
Primero DECLARAR LA FUNCIÓN
¿Cuál es la tarea que queremos que realice?
function nombre () {
dentro de la llaves se colocan las tareas
que quiere que se realicen en la función
};
PASOS PARA
HACER UNA
FUNCIÓN Segundo EJECUTAR LA FUNCIÓN
Colocar el nombre de la función
nombre();
Parámetros
FUNCIONES Después de declarar la función, se colocan entre paréntesis
CON los nombres de los valores a usar
Se colocan las variables dentro de los paréntesis
PARÁMETROS con el procedimiento a utilizar
Se usan las variables dentro de las tareas entre las llaves
Se le dan valores al ejecutar la función entre los paréntesis
Y SIN
PARÁMETRO
Sin parámetros
Despues de declarar la función se colocan los paréntesis
vacios Al ejecutar la función, se escribe el nombre de la función,
seguido de los paréntesis vacios
PARA QUE EL VALOR
NO SE INDEFINIDO
FUNCIONES Se coloca al final de las tareas dentro de las llaves
CON RETORNO la palabra return
ESTE RESULTADOS E MUESTRA SOBRE TODO CUANDO
UNO HACE LA OPERACIÓN EN LA CONSOLA
sin retorno
Con retorno
ya no muestra el
undifened
EJEMPLO
CASA = {
ALCOBA: `principal`,
BALCON: 2}
SINTÁXIS
Cada propiedad se le puede asignar un valor con dos puntos:
se separa cada propiedad por comas
la última propiedad no tiene coma. OBJETOS
LLAMARLAS VARIOS ELEMENTOS O VARIABLES
CADA ELEMENTO ES UNA PROPIEDAD
La puedo llamar con el nombre, A LOS QUE SE LES PUEDE ASIGNAR UN VALOR
o cada propiedad con el [Link]
Para ver o usar el valor que tiene esa propiedad PARA ACCEDER A UNA PROPIEDAD DENTRO DE UN OBJETO
COLOCO EL NOMBRE DEL [Link]
ejemplo:
[Link]ÑO
casa = { [Link]
baño: grande,
sala: mediana,
alcoba:pequeña
}
Llamar cada propiedad
[Link]ño
Muestra el valor = grande.
PROPIEDAD DE TEXTO
TAMAÑO DEL TEXTO
[Link]
MÉTODOS
Y MÉTODO ES UNA FUNCIÓN
DENTRO DE UN OBJETO
PROPIEDADES
A ESTA FUNCIÓN NO LE TENGO
QUE DAR NOMBRE PORQUE
ESTÁ DENTRO DE LA PROPIEDAD
Y YA NO SE LLAMA PROPIEDAD
PARA TEXTO
SE LLAMA AHORA MÉTODO
UN MÉTODO
ES UNA ACCEDER A UN MÉTODO
FUNCIÓN DE [Link]ÓN()
UN OBJETO
MÉTODOS EN TEXTO
Funciones dentro de objetos
[Link](), para poner todo el texto en Mayúscula
[Link](), para poner todo el texto en minúscula
[Link](0,0), para extraer parte de la cadena de texto,
desde un índice hasta otro
[Link](cadena1,cadena2), remplazar una cadena de texto
por otra cadena de texto- PUEDO PONER PALABRA POR PALABRA
Dar un carácter, e indica en que posición
está
[Link](`n`)
ES EL PRIMER CARÁCETER QUE
COINCIDA
[Link](
EL ÚLTIMO CARÁCTER QUE COINCIDA
MÉTODOS EN TEXTO
Funciones dentro de objetos
split(`separador`);
separador tiene que estar en la
cadena de caracteres...
Convierte la cadena de texto
en arreglo, cada caractér es un
elemento separado por el
separador escogido
CANTIDAD DE ELEMENTOS
MÉTODOS Y [Link]
PROPIEDADES
PARA CONCATENAR VARIOS ARREGLOS
ARREGLOS [Link](objeto2)
(NO ES
join (convertir arreglos a texto)
NECESARIO [Link](`separador entre palabras)
GUARDARLOS
EN VARIABLES)
pop (eliminar el último elemento del arreglo
[Link]() si voy a mirar el arreglo, ya no tiene el último elemento
push (Agregar un elmento al final del arreglo
MÉTODOS Y [Link](`n`)
PROPIEDADES
PARA shift (Eliminar el primer elemento del arreglo)
ARREGLOS [Link]()
(NO ES
NECESARIO unshift (Agregar un elemento al principio del
arreglo)
GUARDARLOS [Link](`n`)
EN VARIABLES)
reverse (ordena el arreglo al revés)
[Link]()
SE PUEDEN BUSCAR
EN INTERNET
MUCHO MÁS
MÉTODOS PARA
ARREGLOS Y
TEXTOS
ARITMÉTICOS COMPARACIÓN ASIGNACIÓN LÓGICOS
7 8 5 3
TEXTO
CONCATENAR
ARITMÉTICOS
ASIGNACIÓN
OPERADORES
5 CADENAS DE TEXTO
COMPARACIÓN
LÓGICOS
suma
var + var
resta
var - var
OPERADORES división
ARITMÉTICOS var / var
módulo
7 var % var
producto
var * var
incremento
++var
decremento
- -var
VALOR EXACTO
var nombre = valor
INCREMENTA VALORES
var nombre = valor
var nombre += valor que incrementa
OPERADORES DISMINUIR VALORES
ASIGNACIÓN var nombre = valor
var nombre -= valor que disminuye
MULTIPLICA VALORES
5 var nombre = valor
var nombre *= valor que incrementa en productos
DIVIDE VALORES
var nombre = valor
var nombre /= Valor que divide la cifra
MAYOR QUE MENOR QUE
> <
IGUAL QUE DIFERENTE A
!=
==
MAYOR O IGUAL
OPERADORES >=
COMPARACIÓN MENOR O IGUAL
8 <=
IGUAL EN VALOR Y EN TIPO
===
DIFERENTE EN VALOR Y EN TIPO
!==
a y b las dos deben ser ciertas o verdaderas
a && b
OPERADORES
LÓGICOS a o b Uno de los dos debe ser verdadero
3 (BOOLEANO) a II b
no a , da lo contrario al valor de a
!
Se unen dos o más variables de
texto con +, también se pueden
unir variables y espacios
OPERADORES
PARA TEXTOS
SI SE CUMPLEN UNAS
LEYES,ENTONCES
HACE ALGO, SI NO SE
CUMPLE,NO.
CONDICIONALES
Condicional con una opción y termina: NO COLOCAR
if(se cumple esta condicion){ ;
hace esto}
else{
DESPUÉS DE LA
si no se cumple la primera CONDICIÓN
hace esta]
1)Declaro e inicializo la variable
var numero = 4 ; si(pregunta)
2) Defino la condición relacionada con la variable
{pasa esto}
if ( numero ==4 );
3)Defino que pasa si la condición se cumple
{[Link](`el número es 4`)
Condicional con una opción u otra:
if(se cumple esta condicion){
hace esto}
else
1)Declaro e inicializo la variable { hace esta }
var numero = 4 ;
2) Defino la condición relacionada con la variable if(pregunta)
if ( numero < 3 );
{pasa esto}
3)Defino que pasa si la condición se cumple si(pregunta)
{[Link](`el número es menor que 3`)
{pasa esto}
sino{
else{
4)Doy otra opcion sino pasa esto}
pasa esto}
else{
[Link](`el núimero es mayor que 4`)}s
Condicional una
pregunta sino,si
1)Declaro e inicializo la variable
otra pregunta,
var numero = 3 ;
sino,si, otra pregunta
2) Hago la primera pregunta if
sino una última opción, y
if ( numero ==1 ){
se cumplen todas las opciones.
[Link](`él número es 1`)}
3)Si no se cumple la primera, hago otra pregunta sino si
else if(numero ==2){
if(se cumple esta condicion){
[Link](`el número es 2`)}
hace esto}
4)Doy la última opción sino{
else if (cumple esta condición
{[Link](`el número es 3`)
{ hace esta }
}
si(pregunta) else if(cumple esta condición)
{pasa esto} {hace esta
sino si(pregunta)
{pasa esto} else{
sino si(preguna) hace esta]
{pasa esto]
sino
{pasa esto]
SWITCH
CONDICIONALES
SWITCH
var nombre = valor;
switch(valor){
case:(cuando coincida ejecuta)
break(para);
case:(cuando coincida ejecuta)
break(para);
case:(cuando coincida para)
break(para);
}
INTERVAL0S
FUNCION EJECUTADA DE JS
EJECUTA LA FUNCIÓN DESPUES
DETERMINADO TIEMPO EN MS
Y DESPUÉS SE REPITE EN ESTOS MS
INTERVALOS
var segundero = 0, variable para incrementar el tiempo
setInterval(funcioncualquiera,ms)
function cualquiera(){
++segundero;
[Link](segundero)
}
Se va repitiendo este intervalo de tiempo
SE PUEDE HACER DEFINIENDO LA FUNCIÓN DENTRO DEL setInterval
Con la función dentro de
setInterval, no es necesario colocar nombre de
función
var segundero = 0, variable para incrementar el tiempo
setInterval(function(){
}
,ms)
Se va repitiendo este intervalo de tiempo
RETARDOS
FUNCION EJECUTADA DE JS
EJECUTA LA FUNCIÓN UNA VEZ
DESPUÉS DE UN TIEMPO EN MS
CREO LA VARIABLE PARA LA FUNCIÓN
var saludo =`hola`;
uso la palabra reservada y la vinculo con una función y con el
tiempo que debe esperar para que se ejecute.
setTimeout(nombrefuncion,ms)
function nombrefuncion(){
[Link](saludo)
}
Se puede hacer también dentro de la función setTimeout
ALEATORIOS RANDOM
GENERA NÚMEROS ALEATORIOS
ENTRE; (0,1), UN DIGITO *10. DOS
DIGITOS *100 (MÁXIMO 1,2,4,NDÍGITOS)
REDONDEAR AL MENOR
REDONDEAR AL MAYOR
REDONDEAR AL MÁS CERCANO
Lo declaro en variable
para poderlo usar
var nombre = [Link]();
[Link](nombre)
var aleatorio = [Link]()*10;
[Link](aleatorio); max Un digito
var aleatorio = [Link]()*100;
[Link](aleatorio); max Dos dígitos
etc.
//Redondear al número entero menor
var numerom = [Link]([Link]()*10);
[Link](numerom);
//Redondear al número entero mayor
var numeroM = [Link]([Link]()*10);
[Link](numeroM);
//Redonder al número entero mas cercano
var numeroC = [Link]([Link]()*10);
[Link](numeroC);
FOR FOR IN
WHILE DO WHILE
CICLOS BREAK
SENTENCIA CONTINUE
ES
UNA INSTRUCCIÓN PARA CUANDO SE TIENE QUE REPETIR
MUCHAS VECES UNA MISMA TAREA
FOR EMPEZAR
PENSAR EN LA TAREA QUE TENGO QUE REPETIR
SENTENCIA CON 3 PARTES
PUEDO COLOCAR (Variable Inicio, Número máxima de repeticiones,lo que va
incrememtando)
FOR +TAB (var i; i <= n; ++i)
SINTÁXIS
FOR(SENTENCIA DE 3 PARTES)
{ LO QUE SE REPITE }
var pares = [0,2,4,6,8];
var tamaño = [Link];
[Link](tamaño);
for (i=0;i<[Link];++i)
{
[Link](pares[i]);
}
ES
UNA INSTRUCCIÓN PARA CUANDO SE TIENE QUE REPETIR
MUCHAS VECES UNA MISMA TAREA, PERO ORIENTADA A
ARREGLOS
EMPEZAR
PENSAR EN LA TAREA QUE TENGO QUE REPETIR
FOR IN SENTENCIA for in
for (palabra relacionada in arreglo)
por cada elemento en el arreglo.
SINTÁXIS
FOR(in)
{ LO QUE SE REPITE }
var semana = [`lunes`,`martes`,`miércoles`,`jueves`,`viernes`,`sábado`,`domingo`]
for (i in semana)
{
[Link](i);
[Link](semana[i]);
}
ES
UNA INSTRUCCIÓN PARA CUANDO SE TIENE QUE REPETIR
MUCHAS VECES UNA MISMA TAREA, SE USA PARA LO MISMO
QUE FOR
EMPEZAR
PENSAR EN LA TAREA QUE TENGO QUE REPETIR
WHILE SINTÁXIS
Definición, incializar variable var i = 0;
Condición while (i < n)
{
suceda
++i
}
var i = 1;
while(i<11
{
[Link](i+`<br>`);
i++;
}
ES
EJECUTA LA TAREA AL MENOS UNA VEZ
ANTES DE MIRAR LA CONDICIÓN
EMPEZAR
PENSAR EN LA TAREA QUE TENGO QUE REPETIR
DO SINTÁXIS
WHILE
Definición, incializar variable
var i = 0;
Do {
suceda
++i
}
Condición while (i < n)
var i = 11;
do{
[Link](i);
++i;
}
while(i<14);
ES SENTENCIA
PARA DETENER LA EJECUCIÓN DE CICLOS
AVANZA CON FOR, PREGUNTA CON IF, DETIENE CON BREAK
HASTA DONDE SE DETIENE EL FOR
SENTENCIA EMPEZAR
PENSAR EN LA TAREA QUE TENGO QUE REPETIR , Y EN DONDE QUIERO
QUIE SE DETENGA, PARA SABER EN DONDE COLOCAR LA PREGUNTA IF
BREAK SINTÁXIS
Ciclo for
for (i=0;i<n;++i){
acción
pregunta if(i==n){
break}
}
LA PREGUNTA EN OTRO PUNTO
for (i=0;i<n;++i){
pregunta if(i==n){
break}
acción
}
var semana = [`lunes`,`martes`,`miércoles`,`jueves`,`viernes`,`sábado`,`domingo`]
for (i=0;i<=[Link];i++)
{
[Link](semana[i]);
Empieza a imprimir los días
hasta que se cumple la condición if
if(semana[i] == `miércoles`)
{
break;
}
}
Otra lugar para la pregunta
for(i=0;i<=[Link];i++)
{
if(semana[i] == `miércoles`)
{break;}
[Link](semana[i]);
}
en este último caso no escribe el
miércoles
or(i=0;i<5;i++)
{
[Link](i)
if(i==3){
break;
}
}
for (i=0;i<5;i++)
{
if(i==3){
break;
}
[Link](i)
}
en este último caso no incluye el 3
ES SENTENCIA
PARA SALTAR UNA PARTE DEL CÓDIGO, LA PARTE QUE SE QUIERA
salta y pasa a la siguiente ejecución del ciclo
DETENERSE ACÁ Y PASAR A LA SIGUIENTE EJECUCIÓN DEL CÓDIGO
EMPEZAR
PENSAR EN LA TAREA QUE TENGO QUE REPETIR , Y EN QUE PARTE
QUIERO QUE SE DETENGA
CONTINUE SINTÁXIS
el ciclo
for (var i = 0; i < n; i++)
{
if(condición para omitir la parte del código){
continue;}
{haga con lo demás esto}
//Este programa nuestra todos los días menos el jueves
var semana=[`lunes`,`martes`,`miércoles`,`jueves`,`viernes`,`sábado`,`domingo`];
for(var i=0;i<[Link];i++)
{
if(semana[i]==`jueves`){
continue;}
[Link](semana[i])
}
//Este programa muestra todos los números del 1 al 6
//menos el 4
for (var i = 0; i<6; i++)
{
if( i == 4){
continue;}
[Link](i);
}
FINAL PRIMERA PARTE