CURSO FUNDAMENTOS JAVASCRIPT CREHANA

VARIABLES Y TIPOS DE VARIABLES

var nombre = 'sergio';

// alert(nombre);

console.log(nombre);

// NUMERICA

var numero = 23;

var decimal = 23.5;

// CADENA DE TEXTO

var texto = 'Hola, soy un texto';

var hijo = 'Pedro';

// BOOLEANA

var boleano1 = true;

var boleano2 = false;

// ELEMENTOS HTML

var segundoParrafo = document.querySelector('#texto2');

// ARREGLOS

var familia = ['Alejandro', 'Maria', hijo, true];

// OBJETOS

var planta = {

    color: 'verde', 

    tamaño: 'grande', 

    cantidad: 3

}
// FUNCIONES

var miFuncion = function(){};

var numero; // Declaración de la variable

document.write(numero);

numero = 5; // Inicialización de la variable

OPERADORES ARITMÉTICOS

var primerNumero = 21;

var segundoNumero = 4;

// + Suma

// var resultado = primerNumero + segundoNumero;

// - Resta

// var resultado = primerNumero - segundoNumero;

// * Multiplicación

// var resultado = primerNumero * segundoNumero;

// / División

// var resultado = primerNumero / segundoNumero;

// % Modulo

// var resultado = primerNumero % segundoNumero;

// ++ Incrementar

// var resultado = ++primerNumero;
// -- Decrementar

// var resultado = --primerNumero;

OPERADORES DE ASIGNACIÓN

var numero;

// = Asignar un valor

numero = 5;

// += Asignar un valor sumándolo con su anterior

// numero += 3;

// -= Asignar un valor restándolo con su anterior

// numero -= 3;

// *= Asignar un valor multiplicándolo con su anterior

// numero *= 3;

// /= Asignar un valor dividiéndolo con su anterior

// numero /= 3;

OPERADORES DE CADENAS DE TEXTO
var texto1 = 'Hola';

var texto2 = ' ¿Cómo estás?';

var numero = 5;

// + Concatenar

var nuevoTexto = texto1 + texto2 + ' ' + numero;
OPERADORES DE COMPARACIÓN

var numero1 = 10;

var numero2 = 10;

// == Igual a

// var resultado = numero1 == numero2;

// === Igual valor y tipo

// var resultado = numero1 === numero2;

// != No es igual (Diferente)

// var resultado = numero1 != numero2;

// !== Diferente en valor o en tipo

// var resultado = numero1 !== numero2;

// > mayor que

// var resultado = numero1 > numero2;

// < menor que

// var resultado = numero1 < numero2;

// >= mayor o igual que

// var resultado = numero1 >= numero2;

// <= menor o igual que

// var resultado = numero1 <= numero2;
OPERADORES LÓGICOS

// &&    y

// ||    o

// !     no / negación

ARREGLOS

// var familia = ['Alejandro', 'Maria', 'Carlos'];

// console.log(familia[0]);

var familia = [];

familia[0] = 'Alejandro';

familia[1] = 'Ana';

console.log(familia);

FUNCIONES
FUNCIONES SIN PARAMETROS

// Declarar la función

function saludar (){

    alert('Hola mundo');

// Ejecutar la función

// saludar();
FUNCIONES CON PARAMETROS

function suma(numero1, numero2){

var resultado = numero1 + numero2;

console.log(resultado);

 }

suma(21, 4);

suma(10, 5);

suma(5, 9);

FUNCIONES CON RETORNO

function suma(numero1, numero2){

    var resultado = numero1 + numero2;

    return resultado;

METODOS Y PROPIEDADES PARA CADENAS DE TEXTO
METODO: ES UN OBJETO CON UNA FUNCIÓN

var texto = 'Hola, soy un texto';

length - El número de caracteres

var numeroCaracteres = texto.length;

toUpperCase() - Transformar todos los caracteres a mayúsculas

var mayus = texto.toUpperCase();

toLowerCase() - Transformar todos los caracteres a minúsculas

var minus = texto.toLowerCase();
substring(0,0) - Extraer desde un punto hasta otro de caracteres

var extraido = texto.substring(6, 9);

replace(valor1, valor2) - Reemplazar una cadena de caracteres por otra

var textoReemplzado = texto.replace('texto', 'niño');

indexOf('o') - Buscara el primer caracter que coincida e indicará la posición

var buscarO = texto.indexOf('o');

lastIndexOf('o') - Buscara el último caracter que coincida e indicará la posición

var buscarUltimaO = texto.lastIndexOf('o');

split(' ') - Se convierte la cadena de texto en un arreglo dividiendo los elementos según el sep
arador indicado

var arreglo = texto.split(' ');

METODOS Y PROPIEDADES PARA ARREGLOS
var familia = ['Alejandro', 'Maria', 'Pedro'];

var familiaDos = ['Tomas', 'Saul'];

length  //Devuelve la cantidad de elementos del arreglo

var cantidadElementosFamilia = familia.length;

concat   // Permite unir arreglos

var nuevaFamilia = familia.concat(familiaDos);

join    // Contrario a split - Mostrar todos los elementos del arreglo en una cadena de texto

var texto = familia.join('-');

pop  // Eliminar el último elemento del arreglo

var familiaIncompleta = familia.pop();

TAMBIEN SE PUEDE HACER DE LA SIGUIENTE FORMA

familia.pop();

LA DIFERENCIA ES QUE EL SEGUNDO SOLO LE SACA EL ÚLTIMO VALOR AL ARREGLO SIN MÁS Y
EL PRIMERO LE SACA EL ÚLTIMO VALOR PERO, AL LLAMAR A LA VARIABLE “familiaIncompleta”
LLAMÁS AL VALOR QUE LE FUE SACADO AL ARREGLO “familia”.

EJ: var familia = ['Alejandro', 'Maria', 'Pedro'];

var familiaIncompleta = familia.pop();

CONSOLE.LOG(FAMILIA); TE DA ['Alejandro', 'Maria']

CONSOLE.LOG(FAMILIAINCOMPLETA); TE DA [‘Pedro’]

ES DECIR, AGREGO DENTRO DE LA VARIABLE EL ÚLTIMO VALOR QUE FUE ELIMINADO. LO

MISMO SERÍA PARA SHIFT PERO SIENDO EL PRIMER VALOR DEL ARREGLO.

push // Agregar un elemento al final del arreglo

familia.push('Carlos');

shift    // Eliminar el primer elemento del arreglo

familia.shift();

unshift  // Agregar un elemento al principio del arreglo

familia.unshift('Tomás');

reverse  // Ordena el arreglo al revés

familia.reverse();

CONDICIONALES
Condicional if
if(condicion){

        Tarea a realizar

} else if(condicion2){

Si se cumple esta otra condición, tarea a realizar. Se pueden agregar cuantas queramos

else{
Tarea a realizar en caso que no se cumpla ninguna condición

EJEMPLO

var numero = 10;

if (numero > 2) {

console.log('Numero si es mayor que 2');

} else if( numero == 2 ){

console.log('Numero es igual que 2');

} else{

console.log('Numero no es mayor o igual que 2');

if (  !(numero > 2)   ) {

console.log('Se cumple la condicion');

Condicional switch
Var pirimbula

switch(variable a evaluar){

    case 'valor de variable': haceEsto;

    break; freno de ejecución del código

case 'valor de variable': haceEsto;

    break; ETC

default:  en caso que no se cumplan las anteriores

var colorFavorito = 'rojo';

switch(colorFavorito){

    case 'azul': console.log('El color favorito es azul');

    break;
    case 'rojo': console.log('El color favorito es rojo');

    break;

    case 'amarillo': console.log('El color favorito es amarillo');

    break;

    default: console.log('No conozco tu color favorito');

    break;

RESULTADO: 'El color favorito es rojo'

NOTA: En caso de no encontrar un break ejecuta todos los códigos posteriores. EJ: En este caso
si no hubiera break ejecutaría también 'El color favorito es amarillo' y
'No conozco tu color favorito'.

INTERVALOS
setInterval(funcion, tiempo en milisegundos);

var segundero = 0;

setInterval(function(){

 ++segundero;

 console.log(segundero);

}, 1000);

TAMBIEN SE PUEDE HACER AFUERA LA FUNCION:

var segundero = 0;

setInterval(contar, 1000);

function contar(){

++segundero;

 console.log(segundero);

}
RETARDOS
SIRVE PARA RETRASAR EL INICIO DE UNA FUNCIÓN

setTimeout(funcion, tiempo en milisegundos);

var texto = 'Hola mundo';

setTimeout(saludar, 5000);

function saludar(){

    console.log(texto);

ALEATORIOS
var numeroAleatorio = Math. random()  TE DA UN NUMERO ENTRE 0 Y 1 POR DEFECTO. SI
QUISIERAS UN NÚMERO MÁS GRANDE HABRÍA QUE MULTIPLICARLO (POR 10 POR EJEMPLO TE
DARÍA UN NÚMERO ENTRE 1 Y 10, ES DECIR MUEVE LA COMA UN ESPACIO HACIA LA
DERECHA).

var numeroAleatorio = Math.round(Math.random()*1000);

console.log(numeroAleatorio);

// Obtener números aleatorios

// Math.random();

// Redondear al número entero menor

// Math.floor(Math.random()*10)

// Redondear al número entero mayor

// Math.ceil(Math.random()*10)

// Redondear al número entero más cercano

// Math.round(Math.random()*1000)
CICLOS
CREA UN BUCLE, UNA ACCIÓN QUE SE REPITE UNA Y OTRA VEZ LAS VECES QUE QUERAMOS.

for(variable inicio; longitud o condicion; incremento){

    Código que queremos repetir

 }

for(var i = 1; i < 101; i++){

    console.log(i);

var semana = ['Domingo','Lunes','Martes','Miercoles','Jueves', 'Viernes', 'Sabado']

for(var i = 0; i < semana.length; i++){

     console.log(semana[i]);

FOR IN

var semana = ['Domingo','Lunes','Martes','Miercoles','Jueves', 'Viernes', 'Sabado'];

 for(elemento in semana){

    console.log(semana[elemento]);

SIGNIFICA QUE:

for(elemento in semana)  POR CADA VALOR EN LA VARIABLE SEMANA

console.log(semana[elemento])  FUNCIÓN A EJECUTAR DE LA VARIABLE SEMANA EN SU

POSICIÓN ELEMENTO/VALOR.

EL ELEMENTO PUEDE LLEVAR CUALQUIER NOMBRE.

CICLO WHILE
EL CICLO WHILE Y EL FOR SON DOS FORMAS DE HACER LO MISMO.
SINTAXIS

var i = X (VARIABLE DE INICIACIÓN DEL CICLO)

while(condicion){

LO QUE QUEREMOS QUE SUCEDA, LA FUNCION A EJECUTARSE

var i = 1;

while(i < 11){

document.write(i + '<br>');

i++;

Ciclo do while - Ejecuta el código al menos 1 vez ANTES DE MIRAR LA CONDICIÓN

var i = 12;

do{

    document.write(i + '<br>');

    i++;

}while(i < 11);

EN EL CASO ANTERIOR IMPRIMIRÍA EL VALOR 12, LUEGO INCREMENTARÍA LA VARIABLE A 13,

EVALUARÍA LA CONDICIÓN Y COMO ÉSTA ES QUE EL VALOR SEA MENOR A 11 Y 13 NO CUMPLE
CON LA CONDICIÓN, ENTONCES FRENARÍA EL CICLO.

EJEMPLO DE SENTENCIA BREAK PARA DETENER CICLOS

UN FOR CON UN IF ANIDADO

var semana = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];

for(var i = 0; i < semana.length; i++){

    console.log(semana[i]);

    if (semana[i] == 'Miercoles') {

        break;

    }

}
SENTENCIA BREAK PARA DETENER CICLOS
SIRVE PARA SALTARNOS UNA PARTE DEL CÓDIGO CUANDO LO DECIDAMOS.

CONTINUE - Permite saltar a la siguiente ejecución del ciclo

var semana = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];

for(var i = 0; i < semana.length; i++){

    if (semana[i] == 'Jueves') {

        continue;

    }

    console.log(semana[i]);

EN ESTE CASO SE SALTARÍA LA EJECUCIÓN DEL JUEVES DANDO POR RESULTADO

Lunes

Martes

Miércoles

Viernes

Sábado

Domingo

SCOPE

El scope es el alcance de una variable, que puede ser local o global.

Variable global - Se declara fuera de una función

var mensaje = 'Hola, soy una variable';

function saludar (){

    alert(mensaje);

saludar();
Variable local - Se declara dentro de una función

function despedirse(){

    var despedida = 'Adiós, hasta luego';

    alert(despedida);

despedirse();

SE PUEDE ACCEDER A UNA VARIABLE DESDE DENTRO HACIA AFUERA PERO NO DESDE EL
GLOBAL AL LOCAL. ESTO PERMITE PROTEGER NUESTRO CÓDIGO, PARA QUE DESDE AFUERA
NO LO MODIFIQUEN. DE ESTE MODO PROTEGEMOS NUESTRO CÓDIGO DE OTROS CÓDIGOS
EXTERNOS QUE PODRÍAN USAR EL MISMO NOMBRE DE LA VARIABLE QUE NOSOTROS
EJECUTAMOS.

EJEMPLO

function despedirse(){

    var despedida = 'Adiós, hasta luego';

    alert(despedida);

despedirse();

EN ESTE CASO SE EJECUTARÍA EL ALERT

function despedirse(){

    var despedida = 'Adiós, hasta luego';

    }

despedirse();

alert(despedida);

EN ESTE CASO EL ALERT NO ESTARÍA DEFINIDO, YA QUE SE ENCUENTRA EN EL ÁMBITO

GLOBAL Y NO PUEDE TOMAR ALGO QUE SE ENCUENTRE EN EL ÁMBITO LOCAL, DEFINIDO
ENTRE LLAVES O CORCHETES.

LA VARIABLE TIENE ALCANCE SOLO DENTRO DE LA FUNCIÓN.

FORMA DE PROTEGER NUESTRO CÓDIGO

(   function(){
 Todo el código Javascript

}()   )

ABRO PARÉNTESISFUNCIÓNABRO Y CIERRO PARÉNTESISABRO LLAVES ESCRIBO

CÓDIGOCIERRO LLAVESABRO Y CIERRO PARÉNTESISCIERRO PARÉNTESIS.

PROGRAMACION ORIENTADA A OBJETOS O POO

Es una serie de normas de realizar las cosas de manera que otras personas puedan utilizarlas y 
adelantar su trabajo, de manera que consigamos que el código se pueda reutilizar.

CLASES
Son funciones, llamadas funciones constructoras y se escriben iniciando con Mayúsculas

CLASES DE JAVASCRIPT

var texto = new String('Hola, soy un texto');

var numero = new Number(5);

var boleano = new Boolean(true);

CLASES DE JAVASCRIPT COMPUESTAS

var arreglos = new Array('Alejandro', 'Maria', 'Pedro');

var objeto = new Object({color: 'verde', tamaño: 'grande'});

CLASES PERSONALIZADAS

PODEMOS CREAR CLASES PERSONALIZADAS LLAMANDO A UNA FUNCIÓN Y PONIÉNDOLE UN

NOMBRE SIEMPRE QUE ÉSTE COMIENCE CON MAYÚSCULA.

DENTRO DE LA CLASE, LAS PROPIEDADES DEBEN LLEVAR LA PALABRA RESERVADA THIS

function Persona(){

this.nombre;
this.edad;

LA FUNCIÓN ARRIBA ESCRITA NOS PERMITE CREAR CUANTOS OBJETOS “PERSONA”

QUERAMOS, AGREGÁNDOLES LAS PROPIEDADES PARTICULARES DE CADA OBJETO QUE
QUERAMOS. ASÍ LE VAMOS ASIGNANDO VALOR A LAS PARTICULARIDADES DESDE UNA
FUNCIÓN GLOBAL.

var persona1 = new Persona();

persona1.nombre = 'Alejandro';

persona1.edad = 18;

var persona2 = new Persona();

persona2.nombre = 'Juan';

persona2.edad = 20;

SE PUEDE SIMPLIFICAR EL CÓDIGO ANTERIOR DE LA SIGUIENTE FORMA

function Persona(nombre, edad){

this.nombre = nombre;

this.edad = edad;

var persona1 = new Persona('Pedro', 16);

console.log(persona1);

OBJETOS

LOS OBJETOS TAMBIÉN PUEDEN CREARSE DESDE CERO.

Un objeto es una colección de propiedades y métodos.

var planta = {

    color: 'verde',

    tamaño: 'grande',

    escribeInformacion: function(precio){
        console.log('El color de la planta es ' + planta.color + ' y su tamaño es ' + planta.tamaño + ', 
y su precio es ' + precio);

    }

console.log(planta.color);

console.log(planta.tamaño);

planta.escribeInformacion('$1500'); DENTRO DE LOS MÉTODOS SE LES PUEDE AGREGAR

SELECTORES
SELECTORES INDIVIDUALES

getElementById(): Selecciona el elemento por su atrubuto ID

querySelector(): Selecciona el elemento de la misma forma que haríamos en CSS, devolviéndo

el primer elemento que coincida

SELECTORES MÚLTIPLES

getElementsByClassName(): Selecciona todos los elementos que tengan la clase especificada

getElementsByTagName(): Selecciona todos los elementos con la etiqueta especificada

querySelectorAll(): Selecciona todos los elementos de la misma forma que haríamos en CSS
especificado

EJEMPLOS

var boton = document.getElementById('boton');

var segundoParrafo = document.querySelector('#segundo');

var parrafos = document.getElementsByClassName('texto');

var parrafos = document.getElementsByTagName('p');

var parrafos = document.querySelectorAll('.texto');

CREAR NUEVO ELEMENTO O NODO DESDE JS(PODEMOS MANIPULAR EL

DOM)
PÁRRAFO FINAL SI FUERA HTML

<p class="texto">'Hola, soy un nuevo texto'</p>
Creamos un nuevo párrafo

var parrafoNuevo = document.createElement('p');

Creamos un nuevo texto para el párrafo

var textoNuevo = document.createTextNode('Hola, soy un nuevo texto');

Agregar el texto nuevo en el párrafo

parrafoNuevo.appendChild(textoNuevo);

Agregar un nuevo atributo de clase

parrafoNuevo.setAttribute('class', 'texto');

Seleccionar contenedor

var contenedor = document.getElementsByClassName('contenedor')[0];

Agregar el nuevo párrafo dentro del contenedor

contenedor.appendChild(parrafoNuevo);

SELECCIONAR EL ELEMENTO PADRE DE UN ELEMENTO

var primerParrafo = document.getElementsByClassName('texto')[0];

var padreParrafos = primerParrafo.parentNode;

padreParrafos.className = 'contenedor';

Ubicar el elemento antes del seleccionado

padreParrafos.insertBefore(nuevoParrafo, primerParrafo);
MODIFICAR ID O CLASES
DESDE JS TAMBIÉN SE PUEDEN MODIFICAR LOS ID O CLASES ESTABLECIDOS EN EL HTML

ENTRADA: <p class="texto" id="segundo"></p>

var segundoParrafo = document.getElementById('segundo');

Modificar clase de un elemento

segundoParrafo.className = 'texto fondo-rojo';

SALIDA: ENTRADA: <p class=" texto fondo-rojo" id="segundo"></p>

Agregar o modificar ID

ENTRADA: <p class="texto"></p>

var primerParrafo = document.getElementsByClassName('texto')[0];

primerParrafo.id = 'primero';

SALIDA: ENTRADA: <p class=" texto " id="primero"></p>

MODIFICAR O ELIMINAR ELEMENTOS

var nuevoParrafo = document.createElement('p');

var nuevoTexto = document.createTextNode('Hola, soy un nuevo texto');

nuevoParrafo.appendChild(nuevoTexto);

nuevoParrafo.setAttribute('class', 'texto');

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

var parrafos = document.getElementsByClassName('texto');

var padreParrafos = parrafos[0].parentNode;

Reemplazando un elemento

padreParrafos.replaceChild(nuevoParrafo, parrafos[2]);
Eliminando un elemento

padreParrafos.removeChild(parrafos[0]);

EVENTOS
ADDEVENTLISTENER(); - AÑADIR UN ESCUCHADOR

var boton = document.getElementById('boton');

var boton2 = document.getElementById('boton2');

function alerta(){

    alert('Hola mundo');

boton.addEventListener('click', alerta);

REMOVEEVENTLISTENER(); - ELIMINAR UN ESCUCHADOR

function removerAlerta(){

    boton.removeEventListener('click', alerta);

boton2.addEventListener('click', removerAlerta);

var boton = document.getElementById('boton');

boton.addEventListener('dblclick', function(){

    var nuevoParrafo = document.createElement('p');

    var textoNuevo = document.createTextNode('Hola, soy un texto nuevo');

    nuevoParrafo.appendChild(textoNuevo);

    nuevoParrafo.className = 'texto';
    var contenedor = document.getElementsByClassName('contenedor')[0];

    contenedor.appendChild(nuevoParrafo);

});

MOUSEOVER Y MOUSEOUT
var parrafo = document.getElementsByClassName('texto')[0];

EVENTO MOUSEOVER

parrafo.addEventListener('mouseover', function() {

var nuevoParrafo = document.createElement('p');

var textoNuevo = document.createTextNode('Hola, soy un texto nuevo');

nuevoParrafo.appendChild(textoNuevo);

nuevoParrafo.setAttribute('class','texto');

nuevoParrafo.id = 'parrafoAgregado';

var contenedor = document.getElementsByClassName('contenedor')[0];

contenedor.appendChild(nuevoParrafo);

});

EVENTO MOUSEOUT

parrafo.addEventListener('mouseout', function() {

    var parrafoAgregado = document.getElementById('parrafoAgregado');

    var contenedor = document.getElementsByClassName('contenedor')[0];

    contenedor.removeChild(parrafoAgregado);

});

FOCUS Y BLUR
FOCUS: ESTE EVENTO SE DA CUANDO HACEMOS CLICK O HACEMOS FOCO EN EL CAMPO DE
UN FORMULARIO.

BLUR: EL EVENTO BLUR POR EJEMPLO ES CUANDO DAMOS CLICK AFUERA DEL FORMULARIO
Evento focus

var campoNombre = document.getElementById('nombre');

campoNombre.addEventListener('focus', function() {

    campoNombre.setAttribute('value', 'Tengo el foco');

});

Evento blur

campoNombre.addEventListener('blur', function() {

    campoNombre.setAttribute('value', 'Ya no tengo el foco');

});

EVENTO CHANGE
EL EVENTO CHANGE APROVECHA EL CAMBIO EN ALGUNO DE LOS ELEMENTOS PARA APLICAR
UNA FUNCIÓN (EJEMPLO: CUANDO UN CHECKBOX ES CLICKEADO).

function elegirColor(){

    var estadoActivador = document.getElementById('colorFavorito').checked;

    if (estadoActivador == true) {

        document.getElementById('verde').disabled = false;

        document.getElementById('azul').disabled = false;

        document.getElementById('otro').disabled = false;

    } else{

        document.getElementById('verde').disabled = true;

        document.getElementById('azul').disabled = true;

        document.getElementById('otro').disabled = true;

    }

}
Evento Change

var inputColorFavorito = document.getElementById('colorFavorito');

inputColorFavorito.addEventListener('change', elegirColor);

EVENTO LOAD
ESTE EVENTO SIRVE PARA CARGAR EL CÓDIGO QUE QUERAMOS EJECUTAR UNA VEZ QUE LA
PÁGINA HAYA CARGADO. SIRVE CUANDO LLAMAMOS DESDE JS UN ELEMENTO DE HTML Y
QUEREMOS QUE EJECUTE UNA FUNCIÓN.

PALABRA RESERVADA THIS

var parrafos = document.getElementsByClassName('texto');

for(var i = 0; i < parrafos.length; i++){

    parrafos[i].addEventListener('click', function () {

        this.className = 'texto fondo-rojo';

    });

}
var planta = {

    color: 'verde',

    tamaño: 'grande',

    informacion: function(){

        console.log('El color de la planta es ' + this.color);

    }

MODIFICAR CSS DESDE JS

DESDE JS SE PUEDEN CAMBIAR LAS PROPIEDADES DE CSS. PARA ESTO HAY QUE LLAMAR AL
ELEMENTO QUE QUERAMOS CAMBIAR, SEPARADO DE UN PUNTO LLAMAMOS A LA
PROPIEDAD STYLE Y LUEGO TAMBIEN SEPARADO DE UN PUNTO LLAMAMOS AL ATRIBUTO EN
CUESTIÓN

EJEMPLO

var parrafos = document.getElementsByClassName('texto');

parrafos[0].style.width = '80%'; (EL DIV QUEDARÍA DE UN 80% DEL WIDTH DECLARADO EN CSS)

parrafos[0].style.height = '200px'; (LE CAMBIA EL ALTO EN PX DECLARADO EN CSS)

parrafos[0].style.padding = '0'; (LE QUITA EL PADDING DECLARADO EN CSS)

parrafos[0].style.border = '2px solid red'; (LE AGREGA UN BORDE AL CONTENEDOR)

TAMBIÉN PODEMOS MODIFICAR EL POSICIONAMIENTO, LAS PROPIEDADES DEL TEXTO Y TODO

LO QUE QUERAMOS DESDE JS.

var boton = document.getElementById('boton');

boton.addEventListener('click', function() {

    parrafos[0].style.width = '100%';

});

EN ESTE CASO AÑADIMOS UN EVENT LISTENER PARA QUE, AL TOCAR EL BOTON, EL

CONTENEDOR QUE ANTES ERA DEL 80% PASE A SER DEL 100%

var parrafos = document.getElementsByClassName('texto'),

    pequeño = document.getElementById('pequeño'),
pequeño.addEventListener('click', function(e) {

    for(var i = 0; i < parrafos.length; i++){

        parrafos[i].style.fontSize = '10px';

    }

});

EN ESTE CASO, AL APRETAR EL BOTON PEQUEÑO, LA FUNCIÓN ES QUE EL TEXTO PASE A SER
DE 10PX DE TAMAÑO.

EFECTO LIGHTBOX