Javascript/TreinoJavaScriptDio.html at main · Ivan890564Andres/Javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<! DOCTYPE html>
	<html lang="pt-br">

		<head>
			<title>	Treino Javacript </title>
				<meta charset="utf-8">

        <script type="text/javascript" src="js/main06.js"> </script>

		</head>

		<body onload="carregarBody()">

			<script>
//				alert("Meu último aviso de alerta escrito dentro do body do Html")
// este aviso de alerta é executado em ultimo lugar
		</script>
			<h1> Treino de JavaScript do curso da DIO: Digital Innovation One </h1>
			<h2> Parte2: Manipulando elementos da página (18m34s) <h2>
			<p>	Bootcamp: HTML Web Developer
			<p>	Curso07: Programação para Internet com JavaScript
			<p>	Etapa02:	Desenvolva páginas Web com JavaScript
			<p>	Professor/Instrutor : Rafael Galleani
			<p> VídeoAula 02: Parte2: Manipulando elementos da página (18m34s)
			<p>

<button type="button" onclick="botao()"> Clique aqui </button>
<p>
<button type="button" onclick="pedeIdade()"> Qual sua idade ? </button>
<h3 id="suaIdade">  </h3>
<button type="button" onclick="novaPageOutraJanela()"> Muda de page em outra Janela </button>
<p id="pageDac">  </p>
<button type="button" onclick="novaPageMesmaJanela()"> Muda de page na mesma Janela</button>
<p>  </p>
<p id="mousemove" onmouseover="trocar(this)" onmouseout="voltar(this)">
	Passe o mouse por cima deste texto </p>
<p>
<button type="button" id="mousemove" onmouseover="trocar(this)" onmouseout="voltar(this)">
	Passe o mouse por cima deste botão </button>

<p id="mousemove" onmouseover="trocar(this)" onmouseout="voltar(this)">
		Passe o mouse por cima deste texto:
		ao passar o mouse sobre este texto, as funções trocar() e voltar() são executadas no texto
		de cima e não neste texto. Talvez isso ocorra porque o id=mousemove é o mesmo.
		Mas e se eu mudar o id e usar as mesmas funções qual será o resultado ? </p>
<p>

<p id="mousemove2" onmouseover="trocar(this)" onmouseout="voltar(this)"> Teste de função muda
	texto e retorna ao texto anterior. Resultado: continua alternando e retornando o texto do
	primeiro id=mousemove, como se as funções trocar e voltar fossem feitas para esse elementos.
Para reolver ete problema ua-e o thi dentro da função.   </p>

<p id="mousemove3" onmouseover="trocar(this)" onmouseout="voltar(this)"> Teste das funções usando
	o parâmetro "this" na função do html e usando o parâmetro "elemento" na função do CSS
</p>

<select onchange="funcaoChange(this)">
	<option value="1"> Valor 01 </option>
	<option value="2"> Valor 02 </option>
	<option value="3"> Valor 03 </option>
</select>

		</body>

	</html>