oscaroliveira.github.io/index.html at master · LabFerAdm/oscaroliveira.github.io · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no" charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>JavaScript</title>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-sm">
        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
                 <h4>Obter o DOM completo</h4>
                <pre>
                    <p class="text-primary">
                        console.log(document);
                    </p>
                </pre>

                <br>
                <h4 class="alert-heading">Atribuir a uma variável o elemento pesquisado</h4>
                <pre>
                    <p class="text-primary">var valorx = document.querySelector("nome_do_elemento");</p>
                    <p class="text-primary">console.log(valorx.textContent);</P><span><small><b> - Imprime o conteúdo do elemento no log</b></small></span>
                    <p class="text-primary">valorx.textContent = "outrovalor";</p><span><small><b> - alterar o counteúdo do Elemento no DOM</b></small></span>
                </pre>

                <br>
                <h4 class="alert-danger">Boas Práticas</h4>

                <br>
                <h4 class="alert-heading">Array com todos os Elementos</h4>
                    <p class="text-primary">querSelectorAll<span><small><b> - Traz um array de todos os elementos</b></small></span><br>
                        <pre>
                            <p class="text-primary">
                            var teste = document.querySelectorAll(".elemento");
                            for (var i = 0; i < teste.length; i++){
                                console.log(teste[i]);
                            }
                            </p>
                        </pre>
        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">

          <br>
          <h4 class="alert-heading">Buscar Elementos</h4>
              <pre>
                  <p class="text-primary">
                      var valorx = document.querySelector('#titulo');<span><small><b> - # (hasgtag) realiza busca pelo ID do elemento</b></small></span>
                      var valorx = document.querySelector('.titulo');<span><small><b>  - . (ponto) realiza busca pela classe do elemento</b></small></span>
                   </p>
              </pre>

          <h4 class="alert-heading">Pegando valores de uma tabela e somando</h4>
              <pre>
                  <p class="text-primary">
                  var y = document.querySelector("#conteudo do elemento TR");
                  var z = y.querySelector(".conteudo elemento TD");
                  var val = z.textContent + y.textContent;<span><small><b> - somando os valores</b></small></span>
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Adicionar atributos aos Elementos</h4>
              <pre>
                  <p class="text-primary">
                  var valorx = document.querySelector(.titulo);<span><small><b> - busca pela classe</b></small></span>
                  valorx.classList.add("nome_de_uma_classe_qualquer_ou__de_um_css");
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Adicionar um escutador, Evento</h4>
              <pre>
                  <p class="text-primary">
                  var valorx = document.querySelector(.titulo);<span><small><b> - busca pela classe</b></small></span>
                  valorx.addEventListener("click", mostraMensagem);

                  <br>
                  function mostraMensagem(){<br>
                      alert("Mensagem");<br>
                  }
                  </p>
              </pre>

        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
          <br>
          <h4 class="alert-heading">Função anônima</h4>
              <pre>
                  <p class="text-primary">
                  valorx.addEventListener("click", function() {<br>
                      alert("Mensagem");<br>
                  });
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Se for um botao dentro de um for devo usar como abaixo, pois a função padrao de um botão e recarregar a pagina e enviar o form</h4>
              <pre>
                  <p class="text-primary">
                      var btn = document.querySelector(.botao);<span><small><b> - busca pela classe</b></small></span>
                      valorx.addEventListener("click", function(event) {
                      event.preventDefault();<span><small><b> - desabilita o comportamento padrao mas preciso receber o event</b></small></span>
                      var form = document.querySelector(".pegaroform");
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Obter valor diretamente de um input</h4>
              <pre>
                  <p class="text-primary">
                  console.log(form.idade);<span><small><b> - pega o input completo</b></small></span><br>
                  console.log(form.idade.value);<span><small><b> - para pegar o valor</b></small></span><br>
                  });
                  </p>
              </pre>

        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
          <br>
          <h4 class="alert-heading">criar elementos</h4>
              <pre>
                  <p class="text-primary">
                  var teste = document.createElement("tr");<br>
                  var teste1 = document.createElement("td");
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Atribuir valor ao elemento></h4>
              <pre>
                  <p class="text-primary">
                  teste1.textContent = "valorrrr";
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Adicionar como filho de um elemento</h4>
              <pre>
                  <p class="text-primary">
                  teste.appendChild(teste1);
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Adicionar em uma tabela</h4>
              <pre>
                  <p class="text-primary">
                  var tabela = document.querySelector("#minhatabela");<br>
                  tabela.appendChild(teste);
                  </p>
              </pre>
        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
          <br>
          <h4 class="alert-heading">Criar Objeto usando um método que recebe um form</h4>
              <pre>
                  <p class="text-primary">
                  Function recebePacienteForm(form) {
                      var paciente = {
                      nome : form.nome.value;
                      peso : form.peso.value;
                      altura : form.altura.value;
                      }
                      }
                  </p>
              </pre>
        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
          <br>
          <h4 class="alert-heading">Arrays</h4>
              <pre>
                  <p class="text-primary">
                  var msg = [];
                  Msg.push(“Texto 1”);   // add item ao array
                  Msg.push(“Texto 2”);
                  </p>
              </pre>

          <br>
          <h4 class="alert-heading">Arrays de Json</h4>
              <pre>
                  <p class="text-primary">
                  let dados = [
                      {
                          cpf: 9816516165,
                          nome: "fulano"
                      }
                  ];
                  </p>
              </pre>
        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
          <br>
          <h4 class="alert-heading">Template Literals</h4>

          <p class="text-primary">
          <span><small><b>Desta forma o navegador não sabe o que é</b></small></span>
          Desconsiderar os pontos dentro das tags, fiz isso apenas pra conseguir exibi-las no navegador
          <pre>
              <p class="text-primary">
              const conteudoLinha =
                  <.tr>
                  <.td>681561651<./td>
                  <.td>Fulano<./td>
                  <./tr>
              </p>
          </pre>

          <span><small><b>Usando crase o navegador consegue interpretar</b></small></span>
          <pre>
              <p class="text-primary">
              const conteudoLinha =
                  ` <.tr>
                      <.td>681561651<./td>
                      <.td>Fulano<./td>
                  <./tr> `
              </p>
          </pre>

        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">
          <br>
          <h4 class="alert-heading">Template Literals - acessando dados de um Objeto Array</h4>

          <span><small><b>Abaixo temos o array JS</b></small></span>
          <pre>
              <p class="text-primary">
              let dados = [
              {
                  cpf: 9816516165,
                  nome: "fulano"
              }
                          ];
              </p>
          </pre>

          <span><small><b>Para usar os dados dele da forma abaixo não funciona, pois ele interpreta tudo como string</b></small></span>
          <pre>
              <p class="text-primary">
              const conteudoLinha =
              ` <.tr>
                  <.td>dados[0].cpf<./td>
                  <.td>dados[0].nome<./td>
              <./tr> `
              </p>
          </pre>

          <span><small><b>Para informar que é javascript usar como abaixo</b></small></span>
          <pre>
              <p class="text-primary">
              const conteudoLinha =
              ` <.tr>
                  <.td>${dados[0].cpf}<./td>
                  <.td>${dados[0].nome}<./td>
              <./tr> `
              </p>
          </pre>
        </div>

        <!-- BLOCO -->
        <div class="alert alert-success" role="alert">

        </div>

       </div>
    </div>
  </div>

</body>
</html>