geraldotech/hasAttribute_setAttribute.html

## hasAttribute_setAttribute.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        code {
            font-size: 2rem;
        }
        p{
            font-size: 1.2rem;
        }
        .header{
            color: blue;
        }

        .header2{
            color: rgb(0, 212, 177);
        }
        .myh4 {
            color:rgba(198, 3, 162, 0.956);
            font-size: 1.5rem;
        }
        .mytest {
    background-color: crimson;
}
.democlass{
    color: dodgerblue;
}

#h5 {
    color: rgba(198, 3, 162, 0.956);
}
.every2, .every {
  color: red;
  font-size: 20px;
  background: #f2f2f2;
}


    </style>
</head>
<body>

    <code>hasAttribute e setAttribute</code><br>
    <p>true or false Boolean, seta um attributo, não depende do has!</p>
    <h1>my h1</h1>
    <h2>my h2</h2>

    <br>
    <pp>GERALDO</pp>
  <p id="tenho" class="myclass">FILHO</p>
<hr>
    <h3 class="">my h3</h3>
    <h4>setAttribute h4</h4>
    <h4>setAttribute h4</h4>
<hr>


  <p>Set Attribute href target</p>
<a href="" id="goo">Google</a>

    <hr>
    <code>Attribute vs Attributes</code><br>
    <p>verifica a div apenas, enquando no plural verifica inside</p>
    <div id="mydiv" class="mytest" style="width: 250px;height: 100px">
        <h1>div_h1_atribute</h1>
        </div>
        <hr>
        <h1 id="nodeh1">Change Color</h1>
    <pp>Create and setAttributeNode</pp>
<button onclick="h1class()">Change Color</button>

<hr>


<code> setAttribute #ID with</code>
<p>select by ClassName and Loop set a ID</p>

<h5 class="thish5">OLA</h5>
<h5 class="thish5">OLA</h5>
<h5 class="thish5">OLA</h5>
<h5 class="thish5">OLA</h5>
<h5>OLA</h5>
<hr>
<button id="btn" onclick="showlengh()">Show numbers of Attributes on this button</button>
<hr>


</body>
<script>
//1 hasAttribute

//byTagName
h1 = document.getElementsByTagName("h1")[0].hasAttribute("class");
console.log(h1) //false

//querySelector return index
myh2 = document.querySelector("h2").hasAttribute("class");
console.log(myh2) //false

//exceto se fosse querySelecotAll que retorna um index
h3 = document.querySelectorAll("h3")[0].hasAttribute("class");
console.log(h3) //true

//setAttribue

myh1 = document.getElementsByTagName("h1");
myh1[0].setAttribute("class","header")

h2 = document.querySelector("h2");
h2.setAttribute("class","header2");

//set CSS Class to p
b = document.querySelector("pp");
b.setAttribute("class","every");


p = document.getElementById("tenho");
if(p.hasAttribute("class")){
 p.setAttribute("class","every2");
}


//Selecting all elementos
//thanks https://stackoverflow.com/questions/24608723/why-wont-queryselectorall-select-all-of-my-elements

h4 = document.querySelectorAll("h4");
//para selecionar todos os h4 make a sample loop
for(var i = 0; i < h4.length; i ++){
    h4[i].setAttribute("class","myh4");
}


//Attribute vs Attributes

//A div tem attribute h1 ? false
div = document.getElementById("mydiv").hasAttribute("h1");
console.log(div)

//dentro da div existe h1 ? true
div = document.getElementById("mydiv").hasAttributes("h1");
console.log(div)
nome = document.getElementById("mydiv").attributes[0].name;
console.log(nome) //get name of attribute


// Create and setAttributeNode
function h1class(){
    const att = document.createAttribute("class");
    att.value = "democlass";

    //ambos works ByTag[index] ir ID

    //uncomment to test
    //createh1 = document.getElementsByTagName("h1")[2];
    createh1 = document.getElementById("nodeh1");

    createh1.setAttributeNode(att);
}

//Select by ClassName and Loop id setAttribute #ID
h5 = document.getElementsByClassName("thish5");
console.log(h5);
for(z = 0; z < h5.length ; z++){
    h5[z].setAttribute("id","h5");
}


//set links for button
goo = document.getElementById("goo").setAttribute("href","http://google.com");
goo = document.getElementById("goo").setAttribute("target","_blank");


//button attributes length
function showlengh(){
    btn  = document.getElementById("btn").attributes.length;
    alert(btn); //output 2
} //The output is 2 because the two attributes are: id=”AttributeDemo” and onclick=”myFunction()”.

//getting names of Attributes by index
var btn_name = document.getElementById("btn").attributes[1].name;
console.log(btn_name); //output: onclick

var btn_name2 = document.getElementById("btn").attributes[0].name;
console.log(btn_name2); //output: id


//zoom
document.body.style.zoom="130%";
</script>
</html>

## reduce.html
    //e.g great
    //https://raullesteves.medium.com/javascript-entendendo-o-reduce-de-uma-vez-por-todas-c4cbaa16e380
    var numeros = [1, 1, 2, 3, 4, 5, 6];
var total = numeros.reduce((acumulador, numero, indice, original) => {
console.info(`${acumulador} total_acumulado até o momento`);
console.log(`${numero} valor atual`);
console.log(`${indice} indice atual`);
console.log(`${original} array original`);
return acumulador += numero;
}, 0) //0 para aparecer o total e value do primeiro elemento no console.log
console.warn('acaboooou');
console.log(total)


///
const n = [3,2,3,5];
var total = n.reduce((total, value, ind,arr)=>{
    console.log(`index: ${ind} total: ${total} value: ${value}`);
    return total+= value;
},0)

console.log("sum: "+total) //13


//inline
var total = n.reduce((total, value, ind,arr)=> total+= value ,0)
console.log("sum: "+total) //13


//sum arrays
const n = [1,2,3,4,5], m = [6,7,8,9,10];

var ab = n.reduce((total, value)=> total+= value, m.reduce((total,value)=> total+= value));
console.log(ab)

//media notas
const notas = [7.5,8,9,1.5];

var x = notas.reduce((total,value) => total+= value);
console.log(x /4)


//call by item id
const lista = [
    {id:1, nome:"Gol"},
    {id:2, nome:"Ferrari"},
    {id:3, nome:"camaro"}
]

const callback = (total,valor)=>{
    total[valor.id] = valor.nome
    return total
};
const valor_inicial = {};

const carrosIndex_id = lista.reduce(callback, valor_inicial);
console.log(carrosIndex_id)


//ENTENDENDO reduce


var n = [2,3,6].reduce((total,value,ind,arr)=>{
   return total += value;
})
console.log(n)

// > esquerda para direita
//1 Como reduzir de maneira classica com for

var total = 0;
var num = [2,4,6];
for(var i =0; i < num.length; i++){
    total+= num[i];
}
console.log(total) //12

//1 com Reduce function(expression)
n = [2,4,6];
x = n.reduce(function(a,b){
    return a+b;
})
console.log(x);

//2 somando valores com reduce (arrow) function
num2 = [1,2,3];
const somathis = num2.reduce((somathis, element)=> somathis + element);
console.log(somathis);


//3 function for of soma
function somarf(arr){
    let somaa = 0;
    for(val of arr){
        somaa += val;
    }
    return somaa;
}
console.log(somarf([5,6,6])); //17

//3 reduce with call a function
//call a function" instead of "invoke a function"
function lsum(arr){
    const reducer = (sum, val) => sum + val;
    const inicialvalue = 0;
    return arr.reduce(reducer, inicialvalue);
}

console.log(lsum([5,6,6])); //17


//get directi
const somar2r = [1,2,3,4,9].reduce(function(acumu,valueatual,index,arr){
    return acumu + valueatual;
})
console.log(somar2r)


//4sub
//esquerda para direita 15 -5 = 10 -2 = 8
lista = [15,5,2].reduce((a,b) => a-b);
console.log(lista); //8

//letras
letras = ['a','b','c','d'].reduce((x,y) => x+y);
console.log(letras); //abcd


//refs
//https://blog.betrybe.com/javascript/javascript-reduce/
//https://raullesteves.medium.com/javascript-entendendo-o-reduce-de-uma-vez-por-todas-c4cbaa16e380

//zoom
document.body.style.zoom="130%";
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	code {
	font-size: 2rem;
	}
	p{
	font-size: 1.2rem;
	}
	.header{
	color: blue;
	}

	.header2{
	color: rgb(0, 212, 177);
	}
	.myh4 {
	color:rgba(198, 3, 162, 0.956);
	font-size: 1.5rem;
	}
	.mytest {
	background-color: crimson;
	}
	.democlass{
	color: dodgerblue;
	}

	#h5 {
	color: rgba(198, 3, 162, 0.956);
	}
	.every2, .every {
	color: red;
	font-size: 20px;
	background: #f2f2f2;
	}


	</style>
	</head>
	<body>

	<code>hasAttribute e setAttribute</code><br>
	<p>true or false Boolean, seta um attributo, não depende do has!</p>
	<h1>my h1</h1>
	<h2>my h2</h2>

	<br>
	<pp>GERALDO</pp>
	<p id="tenho" class="myclass">FILHO</p>
	<hr>
	<h3 class="">my h3</h3>
	<h4>setAttribute h4</h4>
	<h4>setAttribute h4</h4>
	<hr>


	<p>Set Attribute href target</p>
	<a href="" id="goo">Google</a>

	<hr>
	<code>Attribute vs Attributes</code><br>
	<p>verifica a div apenas, enquando no plural verifica inside</p>
	<div id="mydiv" class="mytest" style="width: 250px;height: 100px">
	<h1>div_h1_atribute</h1>
	</div>
	<hr>
	<h1 id="nodeh1">Change Color</h1>
	<pp>Create and setAttributeNode</pp>
	<button onclick="h1class()">Change Color</button>

	<hr>



	<code> setAttribute #ID with</code>
	<p>select by ClassName and Loop set a ID</p>

	<h5 class="thish5">OLA</h5>
	<h5 class="thish5">OLA</h5>
	<h5 class="thish5">OLA</h5>
	<h5 class="thish5">OLA</h5>
	<h5>OLA</h5>
	<hr>
	<button id="btn" onclick="showlengh()">Show numbers of Attributes on this button</button>
	<hr>



	</body>
	<script>
	//1 hasAttribute

	//byTagName
	h1 = document.getElementsByTagName("h1")[0].hasAttribute("class");
	console.log(h1) //false

	//querySelector return index
	myh2 = document.querySelector("h2").hasAttribute("class");
	console.log(myh2) //false

	//exceto se fosse querySelecotAll que retorna um index
	h3 = document.querySelectorAll("h3")[0].hasAttribute("class");
	console.log(h3) //true

	//setAttribue

	myh1 = document.getElementsByTagName("h1");
	myh1[0].setAttribute("class","header")

	h2 = document.querySelector("h2");
	h2.setAttribute("class","header2");

	//set CSS Class to p
	b = document.querySelector("pp");
	b.setAttribute("class","every");


	p = document.getElementById("tenho");
	if(p.hasAttribute("class")){
	p.setAttribute("class","every2");
	}


	//Selecting all elementos
	//thanks https://stackoverflow.com/questions/24608723/why-wont-queryselectorall-select-all-of-my-elements

	h4 = document.querySelectorAll("h4");
	//para selecionar todos os h4 make a sample loop
	for(var i = 0; i < h4.length; i ++){
	h4[i].setAttribute("class","myh4");
	}


	//Attribute vs Attributes

	//A div tem attribute h1 ? false
	div = document.getElementById("mydiv").hasAttribute("h1");
	console.log(div)

	//dentro da div existe h1 ? true
	div = document.getElementById("mydiv").hasAttributes("h1");
	console.log(div)
	nome = document.getElementById("mydiv").attributes[0].name;
	console.log(nome) //get name of attribute


	// Create and setAttributeNode
	function h1class(){
	const att = document.createAttribute("class");
	att.value = "democlass";

	//ambos works ByTag[index] ir ID

	//uncomment to test
	//createh1 = document.getElementsByTagName("h1")[2];
	createh1 = document.getElementById("nodeh1");

	createh1.setAttributeNode(att);
	}

	//Select by ClassName and Loop id setAttribute #ID
	h5 = document.getElementsByClassName("thish5");
	console.log(h5);
	for(z = 0; z < h5.length ; z++){
	h5[z].setAttribute("id","h5");
	}


	//set links for button
	goo = document.getElementById("goo").setAttribute("href","http://google.com");
	goo = document.getElementById("goo").setAttribute("target","_blank");


	//button attributes length
	function showlengh(){
	btn = document.getElementById("btn").attributes.length;
	alert(btn); //output 2
	} //The output is 2 because the two attributes are: id=”AttributeDemo” and onclick=”myFunction()”.

	//getting names of Attributes by index
	var btn_name = document.getElementById("btn").attributes[1].name;
	console.log(btn_name); //output: onclick

	var btn_name2 = document.getElementById("btn").attributes[0].name;
	console.log(btn_name2); //output: id



	//zoom
	document.body.style.zoom="130%";
	</script>
	</html>
	//e.g great
	//https://raullesteves.medium.com/javascript-entendendo-o-reduce-de-uma-vez-por-todas-c4cbaa16e380
	var numeros = [1, 1, 2, 3, 4, 5, 6];
	var total = numeros.reduce((acumulador, numero, indice, original) => {
	console.info(`${acumulador} total_acumulado até o momento`);
	console.log(`${numero} valor atual`);
	console.log(`${indice} indice atual`);
	console.log(`${original} array original`);
	return acumulador += numero;
	}, 0) //0 para aparecer o total e value do primeiro elemento no console.log
	console.warn('acaboooou');
	console.log(total)


	///
	const n = [3,2,3,5];
	var total = n.reduce((total, value, ind,arr)=>{
	console.log(`index: ${ind} total: ${total} value: ${value}`);
	return total+= value;
	},0)

	console.log("sum: "+total) //13


	//inline
	var total = n.reduce((total, value, ind,arr)=> total+= value ,0)
	console.log("sum: "+total) //13


	//sum arrays
	const n = [1,2,3,4,5], m = [6,7,8,9,10];

	var ab = n.reduce((total, value)=> total+= value, m.reduce((total,value)=> total+= value));
	console.log(ab)

	//media notas
	const notas = [7.5,8,9,1.5];

	var x = notas.reduce((total,value) => total+= value);
	console.log(x /4)


	//call by item id
	const lista = [
	{id:1, nome:"Gol"},
	{id:2, nome:"Ferrari"},
	{id:3, nome:"camaro"}
	]

	const callback = (total,valor)=>{
	total[valor.id] = valor.nome
	return total
	};
	const valor_inicial = {};

	const carrosIndex_id = lista.reduce(callback, valor_inicial);
	console.log(carrosIndex_id)



	//ENTENDENDO reduce


	var n = [2,3,6].reduce((total,value,ind,arr)=>{
	return total += value;
	})
	console.log(n)

	// > esquerda para direita
	//1 Como reduzir de maneira classica com for

	var total = 0;
	var num = [2,4,6];
	for(var i =0; i < num.length; i++){
	total+= num[i];
	}
	console.log(total) //12

	//1 com Reduce function(expression)
	n = [2,4,6];
	x = n.reduce(function(a,b){
	return a+b;
	})
	console.log(x);

	//2 somando valores com reduce (arrow) function
	num2 = [1,2,3];
	const somathis = num2.reduce((somathis, element)=> somathis + element);
	console.log(somathis);


	//3 function for of soma
	function somarf(arr){
	let somaa = 0;
	for(val of arr){
	somaa += val;
	}
	return somaa;
	}
	console.log(somarf([5,6,6])); //17

	//3 reduce with call a function
	//call a function" instead of "invoke a function"
	function lsum(arr){
	const reducer = (sum, val) => sum + val;
	const inicialvalue = 0;
	return arr.reduce(reducer, inicialvalue);
	}

	console.log(lsum([5,6,6])); //17


	//get directi
	const somar2r = [1,2,3,4,9].reduce(function(acumu,valueatual,index,arr){
	return acumu + valueatual;
	})
	console.log(somar2r)


	//4sub
	//esquerda para direita 15 -5 = 10 -2 = 8
	lista = [15,5,2].reduce((a,b) => a-b);
	console.log(lista); //8

	//letras
	letras = ['a','b','c','d'].reduce((x,y) => x+y);
	console.log(letras); //abcd


	//refs
	//https://blog.betrybe.com/javascript/javascript-reduce/
	//https://raullesteves.medium.com/javascript-entendendo-o-reduce-de-uma-vez-por-todas-c4cbaa16e380

	//zoom
	document.body.style.zoom="130%";
	</script>
	</html>