lipelopeslage/exercicio01.html

## exercicio01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Exercício 1</title>
</head>
<body>


<script>
/*
  ENUNCIADO:
  Um objeto cliente possui campos nome, idade e salario. Um exemplo de objeto é: {nome:"Pedro",idade:29,salario:2000}.
  Faça uma função que receba um vetor de clientes e imprima no documento, em foma de tabela (tag table), todas as informações
  deste cliente. A função deve informar também a idade média e soma total dos salários.
*/

// RESOLUÇÃO:
function mostraTabela(pessoas){
	// variáveis que utilizaremos para a resolução
	var totalSalarios = 0;
	var totalIdades = 0;
	var mediaIdades = 0;

	// sabemos que partes da tabela, como o título,
	// serão fixas, portanto iniciamos uma string
	// para conter esta estrutura, sendo incrementada
	// na estrutura de repetição com o vetor pessoas
	var tabela = '<table border="1"><thead><tr>';
	tabela += '<th>Nome</th><th>Idade</th><th>';
	tabela += 'Salário</th></tr></thead><tbody>';

	// para diferenciar, utilizamos um while, assim
	// precisamos definir o índice inicial fora do loop
	var i = 0;
	while(i < pessoas.length){
		// criamos uma variável que contenha
		// o elemento atual do loop
		var cliente = pessoas[i];
		// assim, fica mais fácil de somarmos às
		// variáveis criadas
		totalSalarios += cliente.salario;
		totalIdades += cliente.idade;
		// e também fica mais fácil de acessar os
		// atributos dos elementos na criação da tabela
		tabela += "<tr><td>"+cliente.nome+"</td>";
		tabela += "<td>"+cliente.idade+"</td>";
		tabela += "<td>"+cliente.salario+"</td></tr>";
		//NUNCA esqueca de incrementar o contador no final
		// de um loop do tipo while, senão ficará infinito
		i++;
	}

	// só é possível determinar a média após o loop,
	// pois no loop que somamos o total das idades
	mediaIdades = totalIdades/pessoas.length;


	// não se esqueça de fechar a tabela
	tabela += "</tbody></table>";
	// adicionamos os parágrafos junto a string da tabela,
	// pois normalmente quando atrelamos document.write à
	// uma função, a tela é reiniciada para escrever apenas o conteúdo
	tabela += "<p>Salários: "+totalSalarios+"</p>";
	tabela += "<p>Média: "+mediaIdades+"</p>";
	document.write(tabela);
}

// enviando um vetor como parâmetro na chamada da função
mostraTabela([
      	    {nome:"Pedro", idade:29, salario:2000},
    	    {nome:"Luiz", idade:32, salario:2300},
    	    {nome:"Blar", idade:39, salario:3000}
    	    ]);
</script>
</body>
</html>

## exercicio02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Exercício 2</title>
</head>
<body>


<p>Parágrafo 1</p>
<div>DIV 1</div>
<p>Parágrafo 2</p>
<div>DIV 2</div>
<p>Parágrafo 3</p>
<div>DIV 3</div>

<button id="b1" onclick="clicou()">CLICK</button>

<script>
function clicou(){
	//querySelector(x) retorna apenas o 1º
	//querySelectorAll(x) retorna lista

	// armazenar todos os parágrafos existentes para tratar seus fundos
	var ps = document.querySelectorAll("p");
	// armazenar tdas as divs existentes para tratar seus fundos
	var divs = document.querySelectorAll("div");

	// através da estrutura de repetição for, mudamos item por item
	for(var i = 0; i < ps.length; i++){
		ps[i].style.backgroundColor = "blue";
	}

	// através da estrutura de repetição for, mudamos item por item
	for(var i = 0; i < divs.length; i++){
		divs[i].style.backgroundColor = "red";
	}
}

/*
	TAMBÉM PODEMOS ATRIBUIR CLICK A UM ELEMENTO DA SEGUINTE FORMA:
	document.querySelector("#b1").onclick = clicou;
	- Nesse caso, retiramos < onclick="clicou()" >  de dentro da tag do button.
	- Note que passamos apenas a função, sem sua invocação (aqueles parênteses no final do nome).
	Dessa maneira, fazemos com que a chamada da função só ocorra no evento do click. Só funciona
	assim se usarmos dessa maneira.
*/

</script>

</body>
</html>

## exercicio03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Exercício 3</title>
</head>
<body>

sem passar o input como parâmetro: <input type="text" id="texto" onfocus="foca()"
		onblur="blura()">
<br>
passando o input como parâmetro: <input type="text" id="textoTurbo" onfocus="focaTurbo(this)"
		onblur="bluraTurbo(this)">


<script>
/*
  ENUNCIADO:
  Os eventos onfocus e onblur representam a ação foco (em uma caixa de texto, por exemplo) e a ação de desfocar.
  Um número deve ser digitado em uma caixa de texto. Ao focar na caixa, sua cor de fundo (background) deve ficar na cor
  amarela. Ao sair da caixa (desfocar), a for de fundo deve ficar verde se o número for par e azul se o número for ímpar.

*/

// função chamada pelo primeiro campo de texto
function foca(){
  // isolar o campo de texto (o primeiro, obviamente) em uma variável
	var texto = document.querySelector("#texto");
	// através da variável, mudar sua cor de fundo
	texto.style.backgroundColor = "yellow";
}

// função chamada pelo primeiro campo de texto
function blura(){
  // isolar o campo de texto (o primeiro, obviamente) em uma variável
	var texto = document.querySelector("#texto");
	// definir uma variável com o valor daquele campo já convertido em inteiro, para que
	// fique mais fácil de verificar seu valor
	var valor = parseInt(texto.value);

	// se o resto da divisão do valor do campo pelo número 2 for igual a zero, este número do campo é par
	if(valor % 2 == 0){
		texto.style.backgroundColor = "green";
	}else{
		texto.style.backgroundColor = "blue";
	}
}

// função chamada pelo segundo campo de texto, enviando a si mesmo como parâmetro
function focaTurbo(elemento){
  // note como fica mais fácil de modificar este elemento, pois o elemento que
  // chama a função é o mesmo que receberá o tratamento
	elemento.style.backgroundColor = "yellow";
}

// função chamada pelo segundo campo de texto, enviando a si mesmo como parâmetro
function bluraTurbo(elemento){
	var valor = parseInt(elemento.value);
	if(valor % 2 == 0){
		elemento.style.backgroundColor = "green";
	}else{
		elemento.style.backgroundColor = "blue";
	}
}

</script>

</body>
</html>

## exercicio04.html
function foo(vf){
	var val = 5;
	var aux = [];
	for(i in vf){
		aux.push(vf[i](5));
	}
	alert(aux);
}
var f1 = function(x){return 2*x+1;}
var f2 = function(x){return x;}
var f3 = function(x){return 6;}
var f4 = function(x){return 1+x;}
foo([f1,f2,f1,f3,f3,f4]);

ENUNCIADO: O que ocorre na linha 7?

RESOLUÇÃO:
Para compreendermos melhor o exercício, partiremos da chamada da função 'foo'.

Note que ela está passando uma lista (vetor,array) de funções pré-definidas.
Cada uma destas funções estão preparadas para receber um parâmetro 'x', e dependendo da função,
fazer alguma coisa com este parâmetro e retornar seu resultado. As funções f1,f2,f3 e f4 possuem a palavra
'return' no final, que retorna um valor para o chamador desta mesma função, assim podendo atribuir uma chamada
desta função a uma simples variável.

A função foo(vf) cria uma função auxiliar 'aux', como uma lista vazia, e logo abaixo executa uma estrutura de
repetição sobre todos os índices do vetor 'vf', passado pelo parâmetro da função. Cada repetição insere dentro
do vetor auxiliar 'aux', o resultado da chamada da função (return) com o parâmetro 5.

Se cada item de repetição é uma das funções que estão sendo passadas pela variável 'vf' que está como parâmetro
da função 'foo', e se o resultado destas chamadas estão sendo inseridos no vetor auxiliar 'aux', podemos entender que:

1- O vetor tem 6 elementos, sendo eles: f1,f2,f1,f3,f3,f4
2- Se seguirmos o código, e notarmos que estão sendo chamados com um parâmetro de valor '5', podemos constatar que
f1(5) = 11, pois 2*5+1 = 11
f2(5) = 5, pois a função retorna o próprio parâmetro
f1(5) = 11, pois 2*5+1 = 11
f3(5) = 6, pois a função ignora o parâmetro e retorna 6
f3(5) = 6, pois a função ignora o parâmetro e retorna 6
f4(5) = 6, pois 5+1 = 6
3- Por fim, sabemos que cada um destes retornos estão sendo adicionados ao vetor 'aux'. Sendo assim, é seguro afirmar
que a linha 7 mostra na tela uma lista exatamente como esta:
[11,5,11,6,6,6]
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="ISO-8859-1">
	<title>Exercício 1</title>
	</head>
	<body>


	<script>
	/*
	ENUNCIADO:
	Um objeto cliente possui campos nome, idade e salario. Um exemplo de objeto é: {nome:"Pedro",idade:29,salario:2000}.
	Faça uma função que receba um vetor de clientes e imprima no documento, em foma de tabela (tag table), todas as informações
	deste cliente. A função deve informar também a idade média e soma total dos salários.
	*/

	// RESOLUÇÃO:
	function mostraTabela(pessoas){
	// variáveis que utilizaremos para a resolução
	var totalSalarios = 0;
	var totalIdades = 0;
	var mediaIdades = 0;

	// sabemos que partes da tabela, como o título,
	// serão fixas, portanto iniciamos uma string
	// para conter esta estrutura, sendo incrementada
	// na estrutura de repetição com o vetor pessoas
	var tabela = '<table border="1"><thead><tr>';
	tabela += '<th>Nome</th><th>Idade</th><th>';
	tabela += 'Salário</th></tr></thead><tbody>';

	// para diferenciar, utilizamos um while, assim
	// precisamos definir o índice inicial fora do loop
	var i = 0;
	while(i < pessoas.length){
	// criamos uma variável que contenha
	// o elemento atual do loop
	var cliente = pessoas[i];
	// assim, fica mais fácil de somarmos às
	// variáveis criadas
	totalSalarios += cliente.salario;
	totalIdades += cliente.idade;
	// e também fica mais fácil de acessar os
	// atributos dos elementos na criação da tabela
	tabela += "<tr><td>"+cliente.nome+"</td>";
	tabela += "<td>"+cliente.idade+"</td>";
	tabela += "<td>"+cliente.salario+"</td></tr>";
	//NUNCA esqueca de incrementar o contador no final
	// de um loop do tipo while, senão ficará infinito
	i++;
	}

	// só é possível determinar a média após o loop,
	// pois no loop que somamos o total das idades
	mediaIdades = totalIdades/pessoas.length;


	// não se esqueça de fechar a tabela
	tabela += "</tbody></table>";
	// adicionamos os parágrafos junto a string da tabela,
	// pois normalmente quando atrelamos document.write à
	// uma função, a tela é reiniciada para escrever apenas o conteúdo
	tabela += "<p>Salários: "+totalSalarios+"</p>";
	tabela += "<p>Média: "+mediaIdades+"</p>";
	document.write(tabela);
	}

	// enviando um vetor como parâmetro na chamada da função
	mostraTabela([
	{nome:"Pedro", idade:29, salario:2000},
	{nome:"Luiz", idade:32, salario:2300},
	{nome:"Blar", idade:39, salario:3000}
	]);
	</script>
	</body>
	</html>
	function foo(vf){
	var val = 5;
	var aux = [];
	for(i in vf){
	aux.push(vf[i](5));
	}
	alert(aux);
	}
	var f1 = function(x){return 2*x+1;}
	var f2 = function(x){return x;}
	var f3 = function(x){return 6;}
	var f4 = function(x){return 1+x;}
	foo([f1,f2,f1,f3,f3,f4]);

	ENUNCIADO: O que ocorre na linha 7?

	RESOLUÇÃO:
	Para compreendermos melhor o exercício, partiremos da chamada da função 'foo'.

	Note que ela está passando uma lista (vetor,array) de funções pré-definidas.
	Cada uma destas funções estão preparadas para receber um parâmetro 'x', e dependendo da função,
	fazer alguma coisa com este parâmetro e retornar seu resultado. As funções f1,f2,f3 e f4 possuem a palavra
	'return' no final, que retorna um valor para o chamador desta mesma função, assim podendo atribuir uma chamada
	desta função a uma simples variável.

	A função foo(vf) cria uma função auxiliar 'aux', como uma lista vazia, e logo abaixo executa uma estrutura de
	repetição sobre todos os índices do vetor 'vf', passado pelo parâmetro da função. Cada repetição insere dentro
	do vetor auxiliar 'aux', o resultado da chamada da função (return) com o parâmetro 5.

	Se cada item de repetição é uma das funções que estão sendo passadas pela variável 'vf' que está como parâmetro
	da função 'foo', e se o resultado destas chamadas estão sendo inseridos no vetor auxiliar 'aux', podemos entender que:

	1- O vetor tem 6 elementos, sendo eles: f1,f2,f1,f3,f3,f4
	2- Se seguirmos o código, e notarmos que estão sendo chamados com um parâmetro de valor '5', podemos constatar que
	f1(5) = 11, pois 2*5+1 = 11
	f2(5) = 5, pois a função retorna o próprio parâmetro
	f1(5) = 11, pois 2*5+1 = 11
	f3(5) = 6, pois a função ignora o parâmetro e retorna 6
	f3(5) = 6, pois a função ignora o parâmetro e retorna 6
	f4(5) = 6, pois 5+1 = 6
	3- Por fim, sabemos que cada um destes retornos estão sendo adicionados ao vetor 'aux'. Sendo assim, é seguro afirmar
	que a linha 7 mostra na tela uma lista exatamente como esta:
	[11,5,11,6,6,6]