Las estructuras condicionales permiten ejecutar bloques de sentencias de código para una determinada condición, si esta no se cumple se puede optar por no realizar nada o llevar a cabo otro bloque de sentencias, de manera que no pueden ejecutarse ambos bloques, solo uno de ellos.
Ejemplo práctico: al ingresar nuestra contraseña de una red social, si es incorrecta no podemos ingresar, pero si es correcta ingresamos a nuestra cuenta.
Condicional IF ELSE
Condicional SWITCH CASE
if (condicion1) {
//Sentencias si
//Condicion1 es verdad
}else if (condicion2) {
//Sentencias si
//Condicion2 es verdad
}else {
//Sentencias si condicion1 y
//condicion2 no son verdad
}
switch (expresión) {
case x :
//Sentencias si expresión es "x"
break;
case y :
//Sentencias si expresión es "y"
break;
default:
//Sentencias para otros casos
}
Operador ternario
Cuando tenemos una estructura condicional simple no anidada y sin "else if", lo más óptimo es utilizar un operador ternario, hay que tener en cuenta que no debe ser usado a diestra y siniestra, solo en casos donde exista un retorno de valor.
Condicional if-else
Condicional con operador ternario
/*Codicional clásico*/
if (condicion) {
//Sentencias si
//Condicion es verdad
}else {
//Sentencias si condicion
//no son verdad
}
/*Codicional clásico*/
[variable u otro] (condicion) ?
//Sentencias si
//Condicion es verdad
:
//Sentencias si condicion
//no son verdad
; // cerrar la sentencia al final
Ejemplo en consola
Supongamos que tenemos una función que debe validar la edad de una persona. Si es mayor o no de 20 años
function validar(edad){
let salida;
if(edad > 20){
salida = "Mayor de 20 años";
}else{
salida = "Menor de 20 años";
}
return salida;
}
console.log(validar(10));
console.log(validar(30));
La salida será:
Menor de 20 años
Mayor de 20 años
Podemos simplificar el código empleando el operador ternario, recordando que su uso es principalmente en asignaciones o similares y donde se ejecuta código para el caso verdadero y falso
function validar(edad) {
return (edad > 20) ? "Mayor de 20 años" : "Menor de 20 años";
}
console.log(validar(10));
console.log(validar(30));
Es un lenguaje de programación del tipo intérprete (vas traduciendo las
sentencia una tras otra y no todas). Su principal fortaleza es en la
programación web, pero se puede encontrar en distintos tipos de proyectos y
aplicaciones.
Variables de JavaScript
Para declarar una variable en JS existen 4 formas que son anteponer "let",
"const", "var" o no anteponer nada. No es necesario indicar el tipo de dato como
en otros lenguajes de programación, nuestra variable se adapta al tipo de valor
contenido
Si bien, se puede declarar una variable sin anteponer nada, no es una buena
práctica
Se emplea const para constantes, valores que no van a alterarse
Se puede emplear var o let para valores que irán cambiando, la diferencia
entre ambos, es que var es una versión antigua y puede producir un conflicto
conocido como "hoisting" o elevación que permite asignar un valor a una
variable y luego declararla o que sea accedida fuera de su entorno o
"scope". Se recomiendo emplear let en nuevos proyectos.
/*
Aprendiendo a declarar variables
*/
const PI = 3.1416 //Constante numérica
var num; // Variable declarada con VAR, puede o no tener una asignación
let numero = 100; // variable numérica (es posible solo declararla y luego asignarle valor)
let texto = "hola :v"; // variable String
let logico = false; // variable lógica
let objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
let arreglo = ["Argos","Gardfield","Shyrley", "Pelusa"]; // variable tipo array
Además, podemos apreciar como se crean comentarios de línea con // y de bloque
con /* y */
Ejecutar JavaScript en consola
En equivalencias con otros lenguajes de programación, en el caso de JavaScript, se
emplea la combinación console.log(...) que puede contener múltiples elementos. Por ejemplo:
/*Función de suma de dos elementos*/
function suma(a, b) {
let r = a + b;
return `${a} + ${b} = ${r}`;
}
console.log(suma(5, 10));
En la consola del navegador donde se ejecute el HTML que contiene al código JS se apreciará: 5 + 10 = 15
Se puede emplear la sentencia console.log("Hola mundo"); para el clásico mensaje de saludo.
JavaScript con HTML
JavaScript puede ser insertado dentro de un documento HTML mediante la etiqueta
<script> o en documentos .js separados que pueden ser llamados en la
etiqueta <script>, especialmente útil cuando se llama a la biblioteca
JQuery por ejemplo.
Existe otras formas de ejecutar código JavaScript en HTML, una de ellas es
colocar el código como valor del atributo "onclick" como el siguiente
ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<!-- Elementos HTML -->
<label>Ingrese las notas</label><br/><br/>
#1: <input type="number" min='0' max='20' id='n1'/><br/>
#2: <input type="number" min='0' max='20' id='n2'/><br/>
#3: <input type="number" min='0' max='20' id='n3'/><br/>
#4: <input type="number" min='0' max='20' id='n4'/><br/>
<br/>
<!-- Código JavaScript dentro de un elemento HTML -->
<button type='button' onclick="
/* Código JavaScript dentro de onclick */
let n1 = parseInt(getElementById('n1').value);
let n2 = parseInt(getElementById('n2').value);
let n3 = parseInt(getElementById('n3').value);
let n4 = parseInt(getElementById('n4').value);
let prom = (n1+n2+n3+n4)/4;
getElementById('prom').innerHTML=prom;
/* Fin del codigo JS */
">Procesar</button>
<br/>
Promedio: <span id='prom'> </span>
</body>
</html>
Esto genera el siguiente resultado:
#1:
#2:
#3:
#4:
Promedio:
Podemos ver el uso de algunas funciones como parseInt, getElementById, innerHTML
y value.
A grandes rasgos se puede explicar su funcionamiento:
parseInt: Convierte un String válido a entero, para poder hacer operaciones
aritméticas.
getElementById: captura un elemento HTML indicando su id
innerHTML: inserta contenido dentro del elemento HTML
value: captura el valor del atributo 'value' de un elemento HTML
Mediante CSS se permite aplicar una serie de propiedades a varios elementos que pueden cumplir diferentes condiciones, la más usual es la de ser un elemento "hijo" de otro, tenemos:
Combinación simple de selectores
Selector descendente
Selector de etiqueta de clase
Selector de hijos
Selectores adyacentes
Pseudoclases
Aplicación y ejemplo
Combinación simple de selectores
En este caso se aplica las mismas propiedades a diversos elementos, pueden ser cualquier tipo de selector. Se separan con comas ',' y luego se definen las propiedades y sus valores.
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<!-- Código CSS -->
<style>
p,a,span{
color: #139349;
font-family: 'Tahoma'
}
</style>
</head>
<body>
<!-- Elementos HTML -->
<a>Soy una oración</a><br/><br/>
<span>Palabra</span>
<p>Soy un parrafo</p>
</body>
</html>
Soy una oración
Palabra
Soy un parrafo
Combinación de selectores descendente
En este caso se aplica las propiedades al último elemento si cumple con la condición de estar anidado dentro del selector anterior. En el ejemplo, se tiene una etiqueta <div> que contiene una etiqueta <p> y dentro una <span>. Además, dos etiquetas <span>. El código CSS indica que solo se aplique la propiedad si hay un <span> dentro de un <div>.
Los elementos descendentes solo se separan mediante espacios.
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<!-- Código CSS -->
<style>
div span{
color: #F00041;
}
</style>
</head>
<body>
<!-- Elementos HTML -->
<div>
<p>Soy una <span>palabra</span> especial</p>
</div>
<span>Amigo</span><br/><br/>
<span>Enemigo</span>
</body>
</html>
Soy una palabra especial
Amigo
Enemigo
Combinación de etiqueta con clase
En este caso se aplica las mismas propiedades las etiquetas o elementos HTML que tienen como clase la especificada en el código CSS. En el ejemplo el color solo cambiará si la etiqueta es de tipo <p> y además el nombre de la clase es 'texto'
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<!-- Código CSS -->
<style>
p.texto{
color:#F000F0;
}
</style>
</head>
<body>
<!-- Elementos HTML -->
<span class='texto'>Span con clase</span>
<p>Párrafo sin clase</p>
<p class='texto'>Párrafo con clase</p>
</body>
</html>
Span con clase
Párrafo sin clase
Párrafo con clase
Combinación de selectores hijos
En este caso se aplica las propiedades al último elemento si cumple con la jerarquía establecida, para el ejemplo, se aplicará solo si <span> está contenido en <p>, que a la vez debe estar contenido en <div>. Solo en ese caso cambia de color el contenido de <span>
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<!-- Código CSS -->
<style>
div > p > span{
color:#0007D8;
}
</style>
</head>
<body>
<!-- Elementos HTML -->
<div>
<p>Div <span>que contiene</span> un párrafo y un span</p>
</div>
<p>Párrafo que <span>contiene</span> un span</p>
</body>
</html>
Div que contiene un párrafo y un span
Párrafo que contiene un span
Combinación de selectores adyacentes
En este caso se aplica las mismas propiedades al segundo elemento luego del signo + siempre y cuando este se encuentre luego del elemento señalado previamente. Para el ejemplo, se aplica el efecto de color y negrita al elemento <span> solo si está después de un elemento <label>
En este caso se aplica las propiedades al elemento al cambiar su estado según lo especificado. En este ejemplo se emplea 'hover' que significa que cuando pasemos el cursor encima del elemento, este debe cambiar de color.
Nota: Una clase se asigna en HTML mediante la propiedad "class"; un ID con "id", el atributo depende de las propiedades del elemento.
/*De tipo (un elemento HTML)*/
div {propiedad: valor;}
/*De clase (asignado a un elemento HTML con el atributo class)*/
.fondo {propiedad: valor;}
/*De ID (asignado a un elemento HTML con el atributo id)*/
#cuadro {propiedad: valor;}
/*Universales (se aplican a todas las etiquetas, * significa todos)*/
* {propiedad: valor;}
/*De atributo (se aplica si se cumple con determinado valor en un atributo)*/
input [type=submit] {propiedad: valor;}
Resultado: Solo las etiquetas <p> que tienen como clase 'texte' se ven afectado por el código CSS, si hubiéramos puesto ".text" en lugar de "p.texto" se modificaría el estilo de la etiqueta <span>
El código CSS es un lenguaje de diseño gráfico que permite definir las propiedades, comportamientos y demás atribuciones de diseño de los elementos de un documento escrito en lenguaje de marcado, especialmente HTML, estas propiedades pueden ser almacenadas en archivos .css y de esta forma reutilizar en diferentes documentos HTML. Actualmente se encuentra en la versión 3, llamada CSS3.
Formas de acoplamiento del CSS con HTML
Existen tres formas (niveles), y cada una de ellas tiene más preponderancia que la anterior:
Primera: En un archivo externo llamado hoja de estilo. Este se debe incluir en el documento HTML con la etiqueta <link> en la sección <head> del HTML. Ejemplo:
<link rel="stylesheet" href="file.css"/>
Donde "file.css" es el archivo externo u hoja de estilos.
Segunda: A nivel de página. Se da cuando se incluye código CSS en el documento HTML con la etiqueta <style> en la sección <head> del HTML. Ejemplo:
<style>/*Código CSS*/</style>
Este código servirá exclusivamente para el archivo HTML donde se escribe, si tuviera una archivo externo que asigna determinada propiedad y esta propiedad se repite dentro de la etiqueta "<style>", el valor asignado en "<style>" será el que se mantenga.
Tercera: A nivel de marca. Se produce cuando el código CSS se declara dentro de un elemento HTML con la propiedad "style". Ejemplo:
<div style="color: green;">Hola</div>
Sintaxis
Se coloca primero el nombre del elemento HTML (etiqueta), nombre de la clase (class) o identificador (id), luego entre llaves irán las propiedades, dos puntos y sus valores de la siguiente manera:
Como se escribe
Ejemplo práctico
[nombre del elemento] {
propiedad1: valor1;
propiedad2: valor2;
/* Comentario de linea*/
propiedad3: valor3;
/*
*Comentario de bloque
propiedad4: valor4;
propiedad5: valor5;
*/
}
La estructura básica de una página web con HTML5 es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<!-- METATAGS, archivos externos, etc. -->
</head>
<body>
Contenido de la página
</body>
</html>
Para implementar un diseño responsivo debemos agregar un archivo CSS, que llamaremos estructura.css, se ubicará dentro de una carpeta css y su código es:
La estructura básica de una página web con HTML5 es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<!-- METATAGS, archivos externos, etc. -->
</head>
<body>
Contenido de la página
</body>
</html>
Para implementar un diseño responsivo mediante reglas AT debemos agregar un archivo CSS, que llamaremos estructura.css, se ubicará dentro de una carpeta css y su código es:
