let cadena="Hola cadena guapa";
console.log(cadena.length);
console.log(cadena.charAt(5));
console.log(cadena[5]); // No es recomendable usarlo
// Contar las aes en una cadena
let cont=0;
for(let i=0;i<cadena.length;i++){
if (cadena.charAt(i)=="a"){
cont++;
}
}
console.log(`El número de aes en "${cadena}" es ${cont}`);
console.log(cadena.at(5));
// Permite números negativos
console.log(cadena.at(-1));
// Le doy la vuelta a la cadena
let c="";
for(let i=1;i<=cadena.length;i++){
c+=cadena.at(-i);
}
console.log(c);
// Obtener subcadenas de una cadena
console.log(cadena.substr(2,3)); // Desde el caracter 2 3 caracteres "la "
console.log(cadena.substr(2)); // Desde el caracter 2 al final "la cadena guapa"
console.log(cadena.substring(2,4)); // de la posición 2 a la 4 "la"
console.log(cadena.substring(2)); // de la posición 2 al final "la cadena guapa"
// Esta es la recomendada
console.log(cadena.slice(2,4)); // de la posición 2 a la 4 "la"
console.log(cadena.slice(2)); // de la posición 2 al final "la cadena guapa"
console.log(cadena.slice(2,-1)); // de la posición 2 a la última letra "la cadena guap"
console.log(cadena.slice(-4,-1)); // de la antepenultima a la última letra "uap"
for(let i=0;i<cadena.length;i++){
console.log(cadena.slice(i)," - ", cadena.slice(-i))
}
// Pasar a mayúsculas y minúsculas
console.log(cadena.toLowerCase());
console.log(cadena.toUpperCase());
console.log("pingüino".toLocaleUpperCase()); // Lo mismo pero más adecuado para cadenas con acentos y cosas así
// Eliminar espacios
let conespacios=" hola que tal ";
console.log(conespacios.trim()); // Elimina todos los espacios
console.log(conespacios.trimEnd()); // Los del final
console.log(conespacios.trimStart()); // Los del principio
console.log("hola".repeat(4)); // Repite cuatro veces hola
// Reemplazar una cadena por otra
console.log(cadena.replace("guapa","fea"));
console.log(cadena.replace("a","4")); // Solo lo hace una vez, la primera aparición
console.log(cadena.replaceAll("a","4")); // Reemplaza todas
// split y join. Sirve para convertir una cadena en un array y viceversa
console.log(cadena.split(" "));
console.log(cadena.split("a"));
console.log(cadena.split(""));
console.log(cadena.split("").sort().join(""));
// Crea un arbolito (de un lado)
for(let i=0;i<8;i++){
console.log("*".repeat(i));
}
// Crea un arbolito (del otro lado)
for(let i=0;i<8;i++){
console.log("*".repeat(i).padStart(8-1));
}
// Saber si una cadena tiene una subcadena
console.log(cadena.includes("gu")); // true
console.log(cadena.includes("fu")); // false
console.log(cadena.startsWith("Ho")); // true
console.log(cadena.startsWith("ho")); // false
console.log(cadena.startsWith("pepe")); // false
console.log(cadena.endsWith("pa")); // true
console.log(cadena.endsWith("PA")); // false
console.log(cadena.endsWith("pepe")); // false
// Buscar la posición de una cadena dentro de otra
console.log(cadena.indexOf("dena")); // 7 porque es la posición donde se encuentra
console.log(cadena.indexOf("pepe")); // -1 porque no está la cadena pepe
// Puedo decirle la posición desde donde buscar
console.log(cadena.indexOf("a")); // 3 porque es la posición donde se encuentra
console.log(cadena.indexOf("a",4)); // 6 porque es la posición donde se encuentra
// Me busca todas las posiciones de la letra 'a' dentro de la cadena
let pos=cadena.indexOf("a");
while(pos!=-1){
console.log(pos);
pos=cadena.indexOf("a",pos+1); // Buscamos a partir de la posición siguiente
}
Categoría: JavaScript
Solución cajas complejo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<p>
<label for="numero">Introduce el ancho de cajas</label>
<input type="number" id="ancho" value="0">
<label for="numero">Introduce el alto de cajas</label>
<input type="number" id="alto" value="0">
</p>
<div id="contenedor"></div>
<script src="js/script.js"></script>
</body>
</html>
window.onload = function () {
let ancho=document.getElementById("ancho");
let alto=document.getElementById("alto");
// Añado el evento input al input del número para que cuando cambie actue
ancho.addEventListener("input", function(event){
generarCajas();
})
alto.addEventListener("input", function(event){
generarCajas();
})
}
function generarCajas(){
let [ancho,alto]=obtenerValores();
borrarContenedor();
// Crear tantas cajas de ancho y de alto como me pidan
for(let i=1;i<=alto;i++){
let d=document.createElement("div");
for(let j=1;j<=ancho;j++){
let caja=crearCaja(`(${i},${j})`);
d.append(caja);
}
ponerCaja(d);
}
}
function borrarContenedor(){
let contenedor=document.getElementById("contenedor");
contenedor.innerHTML="";
}
function ponerCaja(caja){
let contenedor=document.getElementById("contenedor");
contenedor.append(caja);
}
// Obtengo los valores de mi html
function obtenerValores(){
let ancho=document.getElementById("ancho");
let alto=document.getElementById("alto");
return [Number(ancho.value),Number(alto.value)];
}
// Creo una función aparte para crear la caja
function crearCaja(numero){
let caja=document.createElement("div");
caja.className="caja"; //caja.classList.add("caja")
// Utilizo las cadenas con formato para poner el número
caja.innerHTML=`<p>${numero}</p>`;
return caja;
}
Solución ejercicio crear cajas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<p>
<label for="numero">Introduce el número de cajas</label>
<input type="number" id="numero" value="0">
</p>
<div id="contenedor"></div>
<script src="js/script.js"></script>
</body>
</html>
.caja{
width: 150px;
height: 150px;
background-color: green;
border: solid 2px #DDDDDD;
display: inline-block;
}
.caja p{
font-size: 3em;
color: white;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
window.onload = function () {
let numero=document.getElementById("numero");
// Añado el evento input al input del número para que cuando cambie actue
numero.addEventListener("input", function(event){
let valor=Number(this.value);
// let valor2=Number(event.target.value); esta es otra manera
// Tengo que crear n cajas y añadirlas al contenedor
let contenedor=document.getElementById("contenedor");
// Borro lo que tenga el contenedor
contenedor.innerHTML="";
// Creo tantas cajas como me haya puesto el usuario
for(let i=1;i<=valor;i++){
contenedor.append(crearCaja(i));
}
})
}
// Creo una función aparte para crear la caja
function crearCaja(numero){
let caja=document.createElement("div");
caja.className="caja"; //caja.classList.add("caja")
// Utilizo las cadenas con formato para poner el número
caja.innerHTML=`<p>${numero}</p>`;
return caja;
}
Manejar clases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#contenedor {
background-color: aqua;
}
input{
display: block;
}
.alumno{
background-color: yellow;
}
.destacado{
box-shadow: 5px 5px 10px;
}
</style>
</head>
<body>
<label for="alumnos">Dime el número de alumnos</label>
<input type="number" id="alumnos" value="0" />
<div id="contenedor">
</div>
<script src="js/script.js"></script>
</body>
</html>
window.onload = function () {
let alumnos = document.getElementById("alumnos");
alumnos.addEventListener("input", function () {
let numero = this.value;
let contenedor = document.getElementById("contenedor");
contenedor.innerHTML = "";
for (let i = 1; i <= numero; i++) {
let caja = createCaja("alumno" + i);
contenedor.append(caja);
}
/*
let cadena="";
for (let i = 1; i <= numero; i++) {
cadena+='<input type="text" size="30" id="alumno'+i+"/>";
}
contenedor.innerHTML(cadena);
*/
})
}
function createCaja(nombre) {
let cajaTexto = document.createElement('input');
cajaTexto.size = 30;
cajaTexto.type = "text";
cajaTexto.id = nombre;
cajaTexto.classList.add('alumno');
cajaTexto.classList.add('destacado');
cajaTexto.placeholder = "Introduce el nombre del " + nombre;
cajaTexto.addEventListener("focus",function(){
this.classList.toggle("destacado");
})
return cajaTexto;
}
Ejemplo creación dinámica inputs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#contenedor {
background-color: aqua;
}
input{
display: block;
}
</style>
</head>
<body>
<label for="alumnos">Dime el número de alumnos</label>
<input type="number" id="alumnos" value="0" />
<div id="contenedor">
</div>
<script src="js/script.js"></script>
</body>
</html>
window.onload=function(){
let alumnos=document.getElementById("alumnos");
alumnos.addEventListener("input", function(){
let numero=this.value;
let contenedor=document.getElementById("contenedor");
contenedor.innerHTML="";
for (let i=1;i<=numero;i++){
let caja=createCaja("alumno"+i);
contenedor.append(caja);
}
})
}
function createCaja(nombre){
let cajaTexto = document.createElement('input');
cajaTexto.size=30;
cajaTexto.type="text";
cajaTexto.id=nombre;
cajaTexto.placeholder="Introduce el nombre del "+nombre;
return cajaTexto;
}
document.getElementById("contenedor").append(cajaTexto);
Ejemplo crear y añadir nodos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#contenedor{
background-color: aqua;
}
</style>
</head>
<body>
<div id="contenedor">
<h1>Hola</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nobis quidem, pariatur aliquid, aliquam accusamus amet ullam provident impedit maxime nisi deserunt officiis alias odit aspernatur fugiat quia esse soluta.</p>
</div>
<script src="js/script.js"></script>
</body>
</html>
let titulo=document.createElement('h3');
titulo.innerHTML="Título extra before";
console.log(titulo)
let contenedor=document.getElementById("contenedor");
contenedor.before(titulo);
let titulo2=titulo.cloneNode();
titulo2.innerHTML="Título extra after";
contenedor.after(titulo2);
let titulo3=titulo.cloneNode();
titulo3.innerHTML="Título extra prepend";
contenedor.prepend(titulo3);
let titulo4=titulo.cloneNode();
titulo4.innerHTML="Título extra append";
contenedor.append(titulo4);
Calculadora version 4
// Asigno el mismo evento a todos los botones
for (elemento of document.getElementsByTagName("button")) {
elemento.addEventListener("click", operacion);
}
function operacion() {
let operacion=this.innerHTML;
let [numero1, numero2] = obtenerNumeros();
let resultado=0;
switch(operacion){
case "+": resultado=numero1 + numero2;break;
case "-": resultado=numero1 - numero2;break;
case "*": resultado=numero1 * numero2;break;
case "/": resultado=numero1 / numero2;break;
}
// Muestro el valor
ponerNumero(resultado);
}
// Interacción con el HTML
function obtenerNumeros() {
let numero1 = document.getElementById("numero1");
let numero2 = document.getElementById("numero2");
return [Number(numero1.value), Number(numero2.value)];
}
function ponerNumero(numero) {
let resultado = document.getElementById("resultado");
resultado.value = numero;
}
Calculadora refactorizada (versión 3)
// Asignación de los eventos
document.getElementById("suma").addEventListener("click", sumar);
document.getElementById("resta").addEventListener("click", restar);
document.getElementById("multiplicacion").addEventListener("click", multiplicar);
document.getElementById("division").addEventListener("click", dividir);
// Funciones que implementan la lógica
function sumar() {
// Obtengo los valores
let [numero1, numero2] = obtenerNumeros();
// Los sumo
let suma = numero1 + numero2;
// Muestro el valor
ponerNumero(suma);
}
function restar() {
// Obtengo los valores
let [numero1, numero2] = obtenerNumeros(); // Los sumo
let resta = numero1 - numero2;
// Muestro el valor
ponerNumero(resta);
}
function multiplicar() {
// Obtengo los valores
let [numero1, numero2] = obtenerNumeros(); // Los sumo
let multiplicacion = numero1 * numero2;
// Muestro el valor
ponerNumero(multiplicacion);
}
function dividir() {
// Obtengo los valores
let [numero1, numero2] = obtenerNumeros(); // Los sumo
let division = numero1 / numero2;
// Muestro el valor
ponerNumero(division);
}
function obtenerNumeros() {
let numero1 = document.getElementById("numero1");
let numero2 = document.getElementById("numero2");
return [Number(numero1.value), Number(numero2.value)];
}
function ponerNumero(numero) {
let resultado = document.getElementById("resultado");
resultado.value = numero;
}
Calculadora refactorizada (versión 2)
// Asignación de los eventos
document.getElementById("suma").addEventListener("click", sumar);
document.getElementById("resta").addEventListener("click", restar);
document.getElementById("multiplicacion").addEventListener("click", multiplicar);
document.getElementById("division").addEventListener("click", dividir);
// Funciones que implementan la lógica
function sumar() {
// Obtengo los valores
let numero1 = document.getElementById("numero1");
let numero2 = document.getElementById("numero2");
// Los sumo
let suma = Number(numero1.value) + Number(numero2.value);
// Muestro el valor
let resultado = document.getElementById("resultado");
resultado.value = suma;
}
function restar () {
// Obtengo los valores
let numero1 = document.getElementById("numero1");
let numero2 = document.getElementById("numero2");
// Los sumo
let suma = Number(numero1.value) - Number(numero2.value);
// Muestro el valor
let resultado = document.getElementById("resultado");
resultado.value = suma;
}
function multiplicar () {
// Obtengo los valores
let numero1 = document.getElementById("numero1");
let numero2 = document.getElementById("numero2");
// Los sumo
let suma = Number(numero1.value) * Number(numero2.value);
// Muestro el valor
let resultado = document.getElementById("resultado");
resultado.value = suma;
}
function dividir() {
// Obtengo los valores
let numero1 = document.getElementById("numero1");
let numero2 = document.getElementById("numero2");
// Los sumo
let suma = Number(numero1.value) / Number(numero2.value);
// Muestro el valor
let resultado = document.getElementById("resultado");
resultado.value = suma;
}
Calculadora solución 1
<h1>Calculadora</h1>
<input type="number" id="numero1">
<button id="suma">+</button>
<button id="resta">-</button>
<button id="multiplicacion">*</button>
<button id="division">/</button>
<input type="number" id="numero2">
=
<input type="number" id="resultado">
<script src="js/script.js"></script>
// Vamos a hacer la suma
// 1.- Establecer el algoritmo (la receta)
// 2.- Comprobar el programa
// 3.- Refactorizar (mejorar)
// Cuando pulsen la suma se suman los dos numeros y se muestran en el resultado
// a) Saber como hacer que cuando pulsen un botón mi programa haga algo
// Añadiendo un evento al botón
// b) Saber coger el valor de una caja de texto
// Obtener el elemento y con 'value'
// c) Saber sumar dos números
// con +
// d) Saber cambiar el valor de una caja de texto
// obtener el elemento y usar el value
// Al pulsar el botón obtener los dos valores, sumarlos y ponerlos en la caja de resultado
let suma=document.getElementById("suma");
suma.onclick=function(){
// Obtengo los valores
let numero1=document.getElementById("numero1");
let numero2=document.getElementById("numero2");
// Los sumo
let suma=Number(numero1.value)+Number(numero2.value);
// Muestro el valor
let resultado=document.getElementById("resultado");
resultado.value=suma;
}
let resta=document.getElementById("resta");
resta.onclick=function(){
// Obtengo los valores
let numero1=document.getElementById("numero1");
let numero2=document.getElementById("numero2");
// Los sumo
let suma=Number(numero1.value)-Number(numero2.value);
// Muestro el valor
let resultado=document.getElementById("resultado");
resultado.value=suma;
}
let multiplicacion=document.getElementById("multiplicacion");
multiplicacion.onclick=function(){
// Obtengo los valores
let numero1=document.getElementById("numero1");
let numero2=document.getElementById("numero2");
// Los sumo
let suma=Number(numero1.value)*Number(numero2.value);
// Muestro el valor
let resultado=document.getElementById("resultado");
resultado.value=suma;
}
let division=document.getElementById("division");
division.onclick=function(){
// Obtengo los valores
let numero1=document.getElementById("numero1");
let numero2=document.getElementById("numero2");
// Los sumo
let suma=Number(numero1.value)/Number(numero2.value);
// Muestro el valor
let resultado=document.getElementById("resultado");
resultado.value=suma;
}