/*
Una función que devuelva true si la cadena que le pasamos empieza y acaba con
la misma letra, independientemente de mayúsculas y minúsculas.
Ejemplo iniciofin(“hola”)->false iniciofin(“alubia”)->true iniciofin(“Alava”)->true;
*/
function iniciofin(cadena){
cadena=cadena.toLowerCase();
return cadena.at(0)==cadena.at(-1);
}
console.log(iniciofin("hola"));
console.log(iniciofin("alubia"));
console.log(iniciofin("Alava"));
/*
Una función que nos quite los dos primeros caracteres de una cadena.
recortar(“En un lugar de la mancha”)->” un lugar de la mancha”
*/
function recortar(cadena){
return cadena.slice(2);
}
console.log(recortar("En un luar de la mancha"))
/*Escribir una función que invierta el orden de los caracteres de una cadena dada.
invertir("hola")–>"aloh"
*/
function invertir(cadena){
let res="";
for(let i=1;i<=cadena.length;i++){
res+=cadena.at(-i);
}
return res;
}
function invertir2(cadena){
let res="";
for(let i=0;i<cadena.length;i++){
res=cadena.at(i)+res;
}
return res;
}
function invertir3(cadena){
return cadena.split("").reverse().join("");
}
console.log(invertir("hola"));
console.log(invertir2("hola"));
console.log(invertir3("hola"));
/*Escribir una función que nos quite TODOS los espacios de una cadena.
sinEspacios("hola que tal")-_>"holaquetal"*/
function sinEspacios(cadena){
let res="";
for(let i=0;i<cadena.length;i++){
if (cadena.at(i)!=" "){
res+=cadena.at(i);
}
}
return res;
}
function sinEspacios2(cadena){
return cadena.split(" ").join("");
}
console.log(sinEspacios("hola que tal"));
console.log(sinEspacios2("hola que tal"));
/*Una función que nos devuelva el centro de una cadena.
El centro es, si la longitud de la cadena es impar, la letra que está en el medio.
Si la longitud de la cadena es par, las dos letras del medio. centro(“mar”)->”a”
centro(“casa”)->”as”;
*/
console.log("peras".slice("peras".length/2,"peras".length/2+1));
console.log("perico".slice("perico".length/2-1,"perico".length/2+1));
function centro(cadena){
let medio=cadena.length/2;
if (cadena.length%2==0){
return cadena.slice(medio-1,medio+1);
}else{
return cadena.slice(medio,medio+1);
}
}
function centro2(cadena){
let inicio=cadena.length/2;
let fin=inicio+1
if (cadena.length%2==0){
inicio--;
}
return cadena.slice(inicio,fin);
}
console.log(centro2("mar"))
console.log(centro2("casa"))
console.log(centro2("perico"))
console.log(centro2("periquito"))
Arrays, una introducción
// variable pongo un valor
let nombre="Ana";
console.log(nombre);
nombre="eva";
console.log(nombre)
// Un conjunto de variables numeradas
let alumnos=["Ana","Eva","Juan"]; // Un array de tres elementos
console.log(alumnos);
console.log(alumnos[0]); // ANA
console.log(alumnos[1]); // EVA
console.log(alumnos[2]); // JUAN
alumnos[1]="Eva Pérez"; // Accedo por el índice para modificar
console.log(alumnos);
let notas=[4,7,8,3,2,1];
console.log(notas[3]); // 3
console.log(notas.length);
// Recorrer el array
for(let i=0;i<notas.length;i++){
console.log(notas[i]);
}
// Con lo que se llama foreach (aunque en JS no lo sea)
// nota va recorriendo todos los valores de notas
for(let nota of notas){
console.log(nota);
}
for(let alumno of alumnos){
console.log(alumno);
}
// Cantidad de aprobados
let aprobados=0;
for(let nota of notas){
if (nota>=5){
aprobados++;
}
}
console.log(`Han aprobado ${aprobados} alumnos`)
// Los arrays pueden ser mixtos
let mixto=[1,2,"ana",false,5.6,"cacahuete", document.createElement('div')];
for(let valor of mixto){
console.log(valor);
}
// Cuidado con modificar a la ligera
notas[100]=9;
console.log(notas.length);
console.log(notas);
// Nosotros podemos modificar un array añadiendo o quitando elementos
let marcas=["seat","ford","tesla"];
marcas.push("hunday"); // Push añade un elemento al final
console.log(marcas)
let elemento=marcas.pop(); // Pop nos quita el elemento (lo recupera) y el array se queda sin el
console.log(elemento)
console.log(marcas)
marcas.pop();
console.log(marcas)
marcas[marcas.length]="Lambo";
console.log(marcas)
Ejercicio contar vocales
// Vamos a crear una función que nos cuente las vocales de una cadena
// numVocales("Hola que tal")->5 numVocales("Adios")->3
// ¿Se el numero de 'a' en una cadena?
// Voy letra por letra y miro si es una vocal
console.log(numVocales("camión"));
function numVocales(cadena){
cadena=cadena.toLowerCase();
let cont=0;
// Recorrer la cadena
for(let i=0;i<cadena.length;i++){
// Si ese caracter es una vocal o no
if (esVocal(cadena.at(i))){
cont++;
}
}
return cont;
}
function esVocalSinAcentos(letra){
if (letra=='a' || letra=='e' || letra=='o' || letra=='i' || letra=='u'){
return true;
} else{
return false;
}
}
function esVocal(letra){
let vocales="aeiouáéíóúàèìòùüöï";
return vocales.includes(letra);
}
console.log(toTitle("hola que tal"));
console.log(toTitle("HOLA QUE TAL"));
function toTitle(cadena){
let palabras=cadena.split(" ");
for(let i=0;i<palabras.length;i++){
palabras[i]=palabras[i].at(0).toUpperCase()+palabras[i].slice(1).toLowerCase();
}
return palabras.join(" ");
}
Ejemplos métodos de string
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
}
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;
}