■ Estructura básica HTML, CSS y JS

■ Estructura básica HTML

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Mi sitio web</title>

        <!-- Enlaces a CSS y JS -->

    </head>

    <body>

        <!-- Cuerpo del Sitio Web -->

    </body>

</html>

La mayoría de los elementos de HTML, no todos, se manejan bajo la estructura etiqueta de apertura y etiqueta de cierre:

<etiqueta [propiedades]>

    cuerpo del elemento

</etiqueta>

■ Estructura básica CSS

elemento_HTML {

    // reglas

}

id {

    // reglas

}

class {

    // reglas

}

elemento_HTML elemento_hijo {

    // reglas

}

Para seleccionar dos ó más elementos deben separarse por comas:

elemento_1, elemento_2 {

    // reglas

}

■ Esctructura JS

A diferencia de otros lenguajes, JS no tiene una estructura tan estricta como tal, simplemente se escriben las instrucciones, ejemplo:

console.log("Bienvenido")

■ Integrando CSS y JS

Como se había mencionado antes, los archivos JS y CSS se integran al HTML en el apartado de <head>.

Si por ejemplo se tuvieran los siguientes archivos en la ruta especificada:

Ruta: proyecto / css

estilos.css

Ruta: proyecto / scripts

funciones.js

Estos se integrarían al HTML de la siguiente forma:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Mi sitio web</title>

        <!-- Enlaces CSS -->

              <link type="text/css" rel="stylesheet" href="proyecto/css/estilos.css">

        <!-- Enlaces JS -->

        <script src="proyecto/scripts/funciones.js"></script>

    </head>

    <body>

        <!-- Cuerpo del Sitio Web -->

        <!-- Enlaces JS* -->

        <script src="proyecto/scripts/funciones.js"></script>

    </body>

</html>

* En el caso de los scripts pueden integrarse fuera del head en el body de la página, ya que en algunos casos éstos deben integrarse al final del body para que los elementos que los usan los reconozcan.

■ HTML CSS & JS

Hoy en día los sitios web para funcionar de la forma en que lo hacen emplean en su construcción un conjunto diverso de herramientas que, dependiendo de la complejidad del sitio, puede ser muy amplio.

Pero de entre ese conjunto de herramientas hay algunas que son las básicas para que un sitio cumpla con los requerimientos actuales para ser funcional y estas herramientas son:

• HTML
• CSS
• JavaScript

Escribir el sitio solo utilizando HTML no es suficiente, ya que aunque si bien se le podría dar estilo desde el mismo HTML no sería una forma muy viable de hacer puesto que muchos estilos se usan repetidamente a lo largo del sitio y hacerlo de esta forma nos obligaría a estar reescribiendolos cada que los necesitáramos, cosa que no pasaría si nos apoyamos de CSS.

■ ¿Qué es CSS?

Mientras que HTML es el "lenguaje" que nos permite estructurar el sitio web, CSS es un lenguaje que se centra en el estilo de esa web, significa "Cascading Style Sheets" o en español "Hojas de Estilo en Cascada". Este lenguaje trabaja directamente con HTML, CSS nos permite dictar las reglas de cómo queremos que luzcan los elementos de HTML en pantalla, ya sea un div, un button, una table, etc.; y es completamente reutilizable.

Por ejemplo si en nuestra página web tenemos varios div, podemos definir el tamaño de ellos, la forma en que se acomodan, el color, cuántos serán visibles, entre muchas otras características mediante CSS, estas características solo se definen una vez y se pueden aplicar a todos o determinados div según nosotros le digamos.

■ ¿Qué es JavaScript?

JS es un lenguaje de programación orientado a sitios web, ahora construir un sitio con HTML y CSS no es suficiente ya que dichas herramientas solo nos permiten configurar la estructura del sitio y la apariencia del mismo, hasta cierto punto estática; JS por otro lado ayuda a que el sitio web se vuelva dinámico e interactivo como por ejemplo controlando el contenido que se muestra, incrustando animaciones, agregando acciones que el usuario puede realizar, conectarse con un servidor, una base de datos, etc., por lo que integrar JS a nuestras páginas web es casi necesario.

■ ¿Cómo se integran estas dos herramientas al sitio web?

Dentro de la estructura HTML del sitio web, hay una sección llamada "head", esta se encuentra en la parte superior, el head aunque no es una sección visible contiene información que es muy importante para la página web como lo son los metadatos (palabras clave, información del autor, idioma del sitio, conjunto de caracteres, entre otros) y todos los enlaces a hojas de estilo CSS y scripts que la página utilice para funcionar correctamente.

Dado que tanto el código de CSS como el de JS se debe manejar en archivos independientes al HTML, estos deben ser enlazados para que HTML sepa que existen y pueda utilizarlos, dentro del head esto se hace de la siguiente forma:

• Archivos CSS

<link type="text/css" rel="stylesheet" href="<ruta y nombre del archivo"/>

• Archivos JS

<script src="ruta y nombre del archivo"></script>

■ Recorrido

■ Recorrido del arreglo

Solo se necesita un for que pase por todas las posiciones del arreglo, por ejemplo:

var numeros = [1, 2, 3, 4, 5]

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

    console.log(numeros[i])

}

■ Recorrido de la matriz

Para recorrer una matriz se necesitan dos ciclos for, uno que recorra los elementos de la matriz, es decir, los arreglos almacenados en ella; y otro que por cada uno de ellos recorra sus elementos internos, esto es así:

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

    for (var j=0; j < matriz[i].length; j++) {

        console.log(matriz[i][j])

    }

}

Donde el primer for va recorrer los arreglos internos, y el segundo for recorrerá los elementos de cada arreglo.

La condición del primer for "i < matriz.length" le indica el tamaño de la matriz, es decir, el número de elementos que tiene, o sea, los arreglos internos.

La condición del segundo for "j < matriz[i].length", se refiere al tamaño del arreglo interno de la posición "i" de la matriz, por lo que aunque tengan diferentes tamaños con "length" siempre sabremos su longitud.

Y en el console.log las posiciones i y j se refieren a las filas (arreglos) y columnas (cada elemento del arreglo), algo así:

console.log(matriz[arreglo][elemento])

Sabiendo lo anterior y teniendo la siguiente matriz:

var matriz = [
    [1, 2, 3],
    ["amarillo", "azul", "rojo"],
    [true, false],
    [1, "azul", false, 3.14]

}

Si lo que quiero es solo imprimir los arreglos internos, lo haría así:

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

    for (var j=0; j < matriz[i].length; j++) {

        console.log(matriz[i]) // Solo le indico la posición del arreglo

    }

}

Esto imprimirá:

    [1, 2, 3]
    ["amarillo", "azul", "rojo"]
    [true, false]
    [1, "azul", false, 3.14]

Y si lo que quiero es imprimir cada elemento de cada arreglo, sería así:

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

    for (var j=0; j < matriz[i].length; j++) {

        console.log(matriz[i][j]) // Se indica posición del arreglo y elemento

    }

}

Esto imprimirá:

    1

    2

    3

    amarillo

    azul

    rojo
    true

    false
    1

    azul

    false

    3.14

■ Arreglos Bidimensionales

En JavaScript un arreglo bidimensional, también llamado "matriz", no es más que un arreglo de arreglos, pero a diferencia de algunos lenguajes de programación, donde una matriz es un contenedor que tiene un determinado número de filas por un determinado número de columnas, donde todas las filas o columnas son estáticas, es decir, del mismo tamaño, por ejemplo las siguientes matrices:

En el caso de las matrices en JS, dado que es un arreglo de arreglos, cada fila viene siendo un arreglo con su propio tamaño, por lo tanto cada fila puede tener un número distinto de elementos, esto se ve así:

var numeros = [

    [1, 2, 3],

    [4, 5, 6, 7],

    [8, 9, 10, 11],

    [12, 13, 14, 15, 16],

    [17, 18, 19]

 ]

Donde el primer elemento de la matriz numeros sería el primer arreglo:

[1, 2, 3]

Y el primer elemento del primer arreglo es el "1".

Si se imprimiera en pantalla esto:

console.log(numeros[0])

Se mostraría esto:

[1, 2, 3]

Para que se muestre el "1" se tendría que imprimir la primer posición del primer arreglo, así:

console.log(numeros[0][0])

■ Combinando tipos

Otra peculiaridad de las matrices en JS es que no están limitadas al mismo tipo de elemento, es decir, se pueden almacenar arreglos con diferentes tipos de elementos, ya sean enteros, cadenas de texto, boleanos, etc., por ejemplo:

var matriz = [
    [1, 2, 3],
    ["amarillo", "azul", "rojo"],
    [true, false],
    [1, "azul", false, 3.14]

}

En esta matriz el primer elemento es "[1, 2, 3]", el segundo elemento es "["amarillo", "azul", "rojo"]", el tercero es "[true, false]" y el último es "[1, "azul", false, 3.14]".

Como puede verse, al ser un "arreglo de arreglos" cada elemento de la matriz puede tener un número distinto de elementos, por lo que para recorrer estos elementos internos debe hacerse con un for, que inicia en 0 y avanza hasta el tamaño del arreglo en cuestión menos 1, así se irá adaptando al tamaño de cada uno.

■ Estructura declaración

var <identificador> = [] // sin especificar el tamaño

■ Ejemplo declaración

var matriz = []

■ Inicialización

Se especifica la posición y se asigna como elemento un arreglo de "n" elementos.

matriz[0] = [1]

matriz[1] = [2, 3]

matriz[2] = [4, 5, 6]

matriz[3] = ["amarillo", "azul"]

matriz[4] = [true, false]

■ Declaración e inicialización

var matriz = [

    [1],

    [2, 3],

    [4, 5, 6],

    ["amarillo", "azul"],

    [true, false]

]

■ Arreglos Unidimensionales

Sintaxis arreglo unidimensional en JavaScript

■ Estructura declaración

var <identificador> = new Array(<tamaño>)

■ Ejemplo declaración

var numeros = new Array(10)

■ Inicialización

El arreglo es de tamaño 10 por lo tanto se le pueden guardar 10 datos iniciando en la posición 0.

numeros[0] = -7

numeros[1] = -5

numeros[2] = -3

numeros[3] = -1

numeros[4] = 0

numeros[5] = 2

numeros[6] = 4

numeros[7] = 6

numeros[8] = 8

numeros[9] = 10

■ Declaración e Inicialización

También se pueden declarar e inicializar al mismo tiempo, esto sería así:

var numeros = [-7, -5, -3, -1, 0, 2, 4, 6, 8, 10]

Si fuera de texto

var frutas = ["naranja", "uva", "piña", "limón", "mango", "manzana"]

■ Estructuras anidadas

Una estructura anidada es cuando se mete una estructura, sea selectiva o repetitiva, dentro de otra, por ejemplo un if dentro de otro if o un for dentro de otro for, esta última es muy común.

■ if anidados

if ( condición ) {

    if ( condición ) {

        // acciones si se cumple

    } else {

        // acciones si no se cumple

    }

}

Se pueden anida tantos if como sea necesario.

■ for anidados

for (i=0; i < n; i++) {

    for (j=0; j < m; j++) {

        // acciones

    }

}

Este tipo de estructura es muy común ya que se emplea para recorrer arreglos bidimensionales donde un for recorre las filas y el otro las columnas.

Del mismo modo pueden anidarse los bucles while y do while.

while (i < n) {             do {

    while (j < m) {             do {

        j++                         j++

    }                           } (j < m)

    i++                         i++

}                           } (i < n)

■ Combinados

if ( condición ) {

    for (i=0; i < n; i++) {

        // acciones

    }

} else {

    for (i=n; i < m; i++) {

        // acciones

    }

}

for ( i=0; i < n; i++) {

    if ( condición ) {

        // acciones si se cumple

    } else {

        // acciones si no se cumple

    }

}

while (i < n) {

    if ( condición ) {

        // acciones si se cumple

    } else {

        // acciones si no se cumple

    }

    i++

}

■ Resumen

El uso y combinación de estas estructuras es enteramente a criterio del programador, ya que para resolver un problema hay muchas formas que dependen de la creatividad de cada quien y uno elije qué estructuras usa y cómo las emplea.

■ While y do while

Así como el for, los ciclos while y do-while son búcles repetitivos que se ejecutan hasta que se cumpla cierta condición, a diferencia del for, en estos dos tipos de ciclos nosotros debemos controlar el aumento del índice dentro del propio ciclo y esto es algo muy importante ya que si no lo hacemos nuestro búcle entrará en un ciclo infinito.

En el while la condición de control de evalúa al principio y en el do-while la condición se evalúa al final, por lo que el do-while al menos se ejecutaría una vez.

■ While

Esctructura

<índice>

while (<condición>) {

    // código

    <incremento índice>

}

Ejemplo:

let i = 0

while (i < 10) {

  console.log("i =", i)

  i++

}

Imprimirá:

i = 0

i = 1

i = 2

i = 3

i = 4

i = 5

i = 6

i = 7

i = 8

i = 9

■ Do-While

Estructura

<índice>

do {

    // código

    <incremento índice>

} while (<condición>)

Ejemplo:

let j = 0

do {

    console.log("j =", j)

    j++

} while (j < 10)

Imprimirá:

j = 0

j = 1

j = 2

j = 3

j = 4

j = 5

j = 6

j = 7

j = 8

j = 9

■ Mostrando la diferencia

let i=1;

while (i < 1) {

  console.log("i =", i)

  i++

}

No imprimirá nada ya que i vale 1 y la condición es que i sea menor que 1.

let j = 1

do {

  console.log("j =", j)

  j++

} while (j < 1)

Imprimirá

j = 1

Ya que inicialmente j vale 1 y la condición se evalúa al final, es decir primero ejecuta las instrucciones y luego evalúa la condición.

■ For y sus tipos

En JavaScript hay varios tipos de for, el for clásico que es simplemente un búcle controlado por un índice, el for in que recorre los elementos de un arreglo y muestra su índice y el for of que recorre los elementos de un arreglo y muestra su contenido.

■ For (clásico)

Estructura

for (<índice>; <condición>; <aumento>) {

    // código

}

Ejemplo

for (var i=0; i < 10; i++) {

     console.log(i)

}

Imprimirá:

0

1

2

3

4

5

6

7

8

9

■ For in

Estructura

for (<variable> in <arreglo>) {
    // código
}

Ejemplo

let dias = ["lunes", "martes", "miércoles", "jueves", "viernes"]

for (let dia in dias) {

    console.log(dia)

}

Imprimirá:

0

1

2

3

4

La variable "dia" va tomando el índice de cada elemento en el arreglo.

■­ For of

Estructura

for (<variable> of <arreglo>) {
    // código
}

Ejemplo

let dias = ["lunes", "martes", "miércoles", "jueves", "viernes"]

for (let dia of dias) {

    console.log(dia)

}

Imprimirá:

lunes

martes

miércoles

jueves

viernes

La variable "dia" va tomando el contenido en la posición del arreglo.

■ Práctica

Teniendo el arreglo:

let dias = ["lunes", "martes", "miércoles", "jueves", "viernes"]

Mostrar los días almacenados en él.

1) Con for

for (let i=0; i < dias.length; i++) {

    console.log(dias[i])

}

2) Con for in

for (let dia in dias) {

    console.log(dias[dia])

}

3) Con for of

for (let dia of dias) {

    console.log(dia)

}

Todos imprimirán:

lunes

martes

miércoles

jueves

viernes

■ Switch

 ■ Switch

switch(variable) {

    caso valor:

        // acciones

        break;

    caso valor:

        // acciones

        break;

    caso valor:

        // acciones

        break;

    default:

        // acciones si no se cumple ningún caso

        break;

}

Donde "valor" es el valor que tome la variable.

Ejemplo 1: Con variable int

var opcion = 2;

switch(opcion) {

    case 1:

        // acciones si opcion = 1

        break;

    case 2:

        // acciones si opcion = 2

        break;

    case 3:

        // acciones si opcion = 3

        break;

    default:

        // acciones si opcion no es ninguna de las anteriores

        break;

}

Ejemplo 2: Con variable string

var color = "amarillo";

switch(color) {

    case "amarillo":

        // acciones si color = 1

        break;

    case "rojo":

        // acciones si color = 2

        break;

    case "azul":

        // acciones si color = 3

        break;

    default:

        // acciones si color no es ninguna de las anteriores

        break;

}

Si la variable "color" no es ninguno de los contemplados en el switch se ejecuta el caso por defecto, que viene siendo "default".

■ if - else

 ■ if

if (condición) {

    // Se hace algo
}

Ejemplo

var aprobado = true;

if (aprobado == true) {

    console.log("Aprobaste")

}

O simplemente

if (aprobado) {

    console.log("Aprobaste")

}

■ if -  else

if (condición) {

    // Se hace algo

} else {

    // Se hace otra cosa

}

Ejemplo

if (a < b) {

    console.log("a es menor")

} else {

    console.log("b e menor")

}

Funcionamiento del if clic aquí

■ ■ ■ JavaScript

 Java Script

[Sintaxis]

► Estructura Básica de JS

► Variables ✓

► Estructuras Selectivas

    • If, If- Else ✓

    • Switch ✓

► Estructuras Repetitivas

    • For (for, for in, for of) ✓

    • While - Do-While ✓

► Estructuras Anidadas ✓

► Arreglos

    • Unidimensionales ✓

    • Bidimensionales ✓

    • Recorrido ✓

► Métodos

    • Que no devuelven valor

    • Que devuelven un valor

    • Funciones flecha

► Objetos

■ JS + HTML + CSS ✓

► Estructura básica e integración de CSS y JS ✓

     • Estructurando el sitio web con HTML y CSS ✓

    

■ Variables

Let y Var

En JavaScript hay dos tipos principales de variables, var y let, ambas pueden utilizarse de la misma forma para almacenar cualquier dato, estas adoptan el tipo del dato que se les asigne, es decir, si yo le asigno una cadena de texto la variable se comportará como string y si yo le asigno un entero la variable se comportará como int.

■ Var

La diferencia entre estos dos tipos de variables es el ámbito, si se usa "var", la variable estará disponible en toda la función comportándose como una variable global, incluso si se declarara otra "var" con el mismo nombre dentro de otro bloque, ésta sería considerada como la misma variable por lo que se modificaría su valor por el nuevo valor que se le asigne. En código esto sería así:

var x = 5;

if (true) {

    var x = 5 * 5;

    console.log(x);

}

console.log(x);

Esto imprimiría:

25

25

■ Let

Por otro lado la variable let tiene un alcance menor que var, ésta si se puede redefinir dentro de algún bloque y ambas variables serían distintas aunque se llamen igual, pero la variable definida dentro del bloque solo tendría un ámbito local, es decir, fuera del bloque el valor que se tomaría sería el de la variable definida fuera del bloque, esto podría provocar errores de lógica. En código se vería así:

let y = 5;

if (true) {

    let y = 5 * 5;

    console.log(y);

}

console.log(y);

Esto imprimiría:

25

5

■ Declaración

La declaración de estas variables es como en la mayoría de los lenguajes, se pone el tipo y luego el identificador:

var x;

let y;

Se pueden declarar varias variables a la vez, separadas por coma:

var a, b, c;

O declarar e inicializarlas:

var a = 1, b = 2, c = 3;