Para entender melhor o console e estudar os conteúdos, operadores e métodos de se codificar em JavaScript digite ctrl+shift+i ou F12 ou no Mac cmd+c
29 |
30 |
Com isso em sua tela vejo o sumário do HTML e faça bom fruto do código e anotações para seu estudo e navegação no index.js
31 |
32 |
33 |
34 |
35 |
86 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/public/index.js:
--------------------------------------------------------------------------------
1 | // --- §Introdução1 aula de introdução do curso ---
2 |
3 | // &)Variáveis
4 |
5 | const olaMundo1 = "Hello World One!";
6 |
7 | let olaMundo2 = "Hello World Two!";
8 |
9 | var olaMundo3 = "Hello World Three!";
10 |
11 | console.log(`${olaMundo1} / ${olaMundo2} / ${olaMundo3}`);
12 |
13 | //⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯
14 |
15 | // ^)Operadores
16 |
17 | // ^)Page1
18 |
19 | // Operador de atribuição(=)
20 |
21 | let a = 10;
22 | const b = "10";
23 |
24 | // Operadores de Comparação
25 |
26 | // Verificando o valor da variável
27 | console.log(a == b);
28 |
29 | // Verificando valor e tipo da variável
30 | console.log(a === b);
31 |
32 | /**
33 | * Sendo Assim Três Operadores com o Igual
34 | *
35 | * Um igual sendo o Operador de Atribuição(=)
36 | * Dois iguais sendo o Operador de Comparação de valor(==)
37 | * Três iguais sendo o Operador de Comparação de valor e tipo de dado(===)
38 | */
39 |
40 | // ^)Page2
41 |
42 | // Operadores de Diferença
43 |
44 | // Verificando se a diferença no valor de uma expressão para a outra
45 | console.log(a != b);
46 |
47 | // Verificando se a diferença no valor e o tipo de uma expressão para a outra
48 | console.log(a !== b);
49 |
50 | /**
51 | * O Operador parecido com o igual mas com a característica de ver a diferença entre duas expressões
52 | */
53 |
54 | // ^)Page3
55 |
56 | // Operadores Lógicos
57 |
58 | // Verificando se as duas condições são verdadeiras ao mesmo tempo, e como são, dão "true"
59 | console.log(a == b && typeof b == 'string');
60 |
61 | // Verificando se as duas condições são verdadeiras ao mesmo tempo, e como só uma é, toda a operação se torna "false"
62 | console.log(a == b && typeof a == 'string');
63 |
64 | // Os operadores lógicos funcionam para verficar se duas condições que são verdadeiras ao mesmo tempo, e se não são, ele torna toda a expressão como falsa no caso quando há 2 "e" comerciais(&&)
65 |
66 | // Verificando agora se a primeira expressão for verdadeira ou não mas se a segunda for ainda assim irá retornar o valor de de true. Tendo alguma expressão que seja verdadeira ele aceita como true, fazendo o uso de pipe(|). "Se uma expressão for verdadeira basta..."
67 |
68 | console.log(a == b && typeof a == 'string');
69 |
70 | //⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯
71 |
72 | // !)ControleDoCode(if,else)
73 |
74 | // !)Page1
75 |
76 | // if, else e else if
77 |
78 | // Estrutura básica do if e else
79 |
80 | let cor1 = "verde";
81 |
82 | if (cor1 === "verde") {
83 |
84 | console.log("Siga!")
85 |
86 | } else {
87 |
88 | console.log("Pare!")
89 |
90 | }
91 |
92 | // Criando blocos de código para verificar a variável e "se" uma várivel for verdadeira ela anula o outro bloco de código que é o else.
93 | // O else é para "caso" aquela condição na qual é colocada entre parênteses não for verdadeira irá ser executado o que estiver no bloco de código do else
94 |
95 | // Mais de um if com else if
96 |
97 | let cor2 = "azul";
98 |
99 | if (cor2 === "verde") {
100 |
101 | console.log("Siga!")
102 |
103 | } else if (cor2 === "amarelo") {
104 |
105 | console.log("Atenção!")
106 |
107 | } else {
108 |
109 | console.log("Pare!")
110 |
111 | }
112 |
113 | // Com mais de um if sendo a partir do primeiro if o próximo if opicional a ser acrescentado agora será o "else if" que irá criar mais uma condição e mesmo com mais de uma condição, "caso" nenhuma for verdadeira, o "else" irá responder
114 |
115 | //⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯
116 |
117 | // -)ControleDeFluxo(Switch)
118 |
119 | // -)Page1
120 |
121 | // Com o Switch podemos diminuir nosso bloco de código do if e else para um código com um controle melhor de fluxo
122 | // Com o Switch iremos passar uma expressão pra ele analisar e com a aquela expressão analisada terá possivéis casos ou "cases" que iram haver e as ações naqueles determinados casos avaliados sobre aquela expressão
123 |
124 | let cor3 = "azul";
125 |
126 | switch (cor3) {
127 |
128 | case "verde":
129 | console.log("Siga!");
130 | break;
131 |
132 | case "amarelo":
133 | console.log("Atenção!");
134 | break;
135 |
136 | }
137 |
138 | // Aqui temos a variável cor3 e dentro do Switch nos parâmetros ele avalia a expressão e cria casos, e se casos(case) for igual a tal expressão ou for verdadeira e ele vai executar tal ação
139 | // Agora vale lembrar que se caso você quer que seu case avalie uma expressão e pare ali, use o "break;" pois sem ele mesmo avaliando aquele caso o código continuará sendo executado normamlmente
140 |
141 | let cor4 = "azul";
142 |
143 | switch (cor4) {
144 |
145 | case "verde":
146 | console.log("Siga!");
147 | break;
148 |
149 | case "amarelo":
150 | console.log("Atenção!");
151 | break;
152 |
153 | default:
154 | console.log("Não consegui identificar...")
155 |
156 | }
157 |
158 | // Aqui nessa nova linha de casos teremos o melhor controle de fluxo pois caso nenhuma dos casos passados ali for verdade, o Switch irá executar algo padraõ, o "default".
159 | // Assim sendo que o "default" faz o mesmo trabalho do else assim sendo que se nada for executado, o default será executado
160 |
161 | //⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯
162 |
163 | // =) Laços de Repetição
164 |
165 | // =) Page 1
166 |
167 | // For
168 | // O "for" servirá para toda vez que você quiser repetir um trecho de código tanto se você souber quantas vezes você irá repetir esse trecho de código tanto de você não souber quantas vezes irá repetir, iremos usar o "for"
169 | // Se caso você já saiba quantas vezes irá se repetir esse trecho de código, você irá criar um for com 3 instruções: 1 - É de onde ele se inicia. 2 - Até quando ele vai executar esse código. E 3 - Qual será o incremento dessa varável
170 |
171 | // Array
172 | // Array é para percorrer um trecho de código e a cada index que se achar em um "array" ele irá executar algo e para cada index que iremos achar usaremos então o "forEach"
173 |
174 | // ForIn
175 | // Para percorrermos nomes de objetos iremos usar o "forIn". Ou seja, para cada chave ou cada atributo de um objeto que ele achar ele irá executar alguma coisa
176 |
177 | // Break
178 | // Para se caso queira interromper o "Laço de Repetição" que é o caso do "for, o array, o forEach e forIn" iremos usar o "break" muito parecido com o Switch mas agora em nossos laços iremos colocar condições if dentro de nosso for para que haja o break
179 |
180 | // Continue
181 | // Em nossos laços de Repetição estamos percorrendo trechos de código mas se caso queira pular determinado dado a partir de uma ação em seu código iremos usar o "continue"
182 |
183 | let n = 5;
184 |
185 | for(let i = 0; i <= 10; i++) {
186 |
187 | console.log(`${i} x ${n} = ${i*n}`);
188 | // Aqui temos como prática o laço de repetição mais comum do JavaScript, ou seja, o "Template String". No Template String podemos pular linhas ao fazer ou trazer códigos junto de strings
189 |
190 | console.log(i + "x" + n + "=" + (i * n));
191 | // Já no código abaixo temos o jeito mais antigo de se executar um código junto de uma string que seria por concatenações. Já aqui não podemos pular linhas ao trazer códigos junto de strings
192 |
193 | }
194 |
195 | //⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯
196 |
197 | // §Introdução2 Segunda aula de introdução ao curso
198 |
199 | // %) Funções
200 |
201 | // No JavaScript podemos criar blocos de códigos que podem ser usados, ou invocados diversas vezes durante o seu código; assim aproveitando muitos blocos ou trechos de códigos.
202 | // Pra isso é usada as "Funções" ou como é feita no JS "functions"
203 |
204 | // Junto das funções iremos ter os parâmetros que estarão entre parêteses. Mas nem sempre uma função irá precisar ter parâmetros, mas se caso haja parâmetros, teremos de respeitar esses parâmetros
205 |
206 | // Temos 3 tipos de funções:
207 |
208 | // A função comum que têm o nome reservado function
209 |
210 | // A função anônima na qual criamos para executar determinada ação com aquele bloco de código mas não podemos chamá-la por nome
211 |
212 | // E a "ArrowFunction", na qual teremos um meio mais fácil e com maiores recursos e alguns expecíficos para essa função
213 |
214 | function somar(x1, x2){
215 | // Acima declaramos que esse é um bloco de código para uma função e tendo os parâmetros
216 |
217 | return x1 + x2;
218 | // Com o "return" nós dizemos o que o JavaScript irá retornar a aplicação, sendo no exemplo acima, o valor de x1 + x2
219 |
220 | }
221 |
222 | let resultado1 = somar(1, 2);
223 | // Aqui armazenamos, ou dizemos o valor que queremos que a seja somado como foi criada a nossa função para ser feita este calculo
224 |
225 | console.log(resultado1);
226 |
227 | // Então por aqui temos um exemplo de soma usando a mais comum função
228 |
229 |
230 | // Função
231 |
232 | function calc1(x1, x2, operator){
233 | // Primeiramente já mudamos o nome da nossa function para "calc", uma vez que não iremos apenas somar, mas sim calcular um valor
234 | // Agora nos parâmetros temos o "operator" que será o operador para realizar a nossa conta
235 |
236 | return eval(`${x1} ${operator} ${x2}`);
237 | // Neste novo return mudamos o valor ou o que seria retornado para a aplicação, ou o que eu quero que ele valide, usando o eval para validar o conteúdo da nossa "TemplateString"
238 |
239 | }
240 |
241 | let resultado2 = calc1(1, 2, "-");
242 |
243 | console.log(resultado2);
244 |
245 | // Para tornarmos essa função um tanto mais completa, teremos agora uma verdadeira calculadora tendo agora um operador
246 |
247 |
248 | // Função Anônima
249 |
250 | (function(x1, x2, operator){
251 |
252 | return eval(`${x1} ${operator} ${x2}`);
253 |
254 | })(1, 2, "*");
255 |
256 | // Uma função diferente não?
257 | // Essa é a "função anônima"
258 | // Nela fazemos uma função, ou um bloco de código para ser executado no momento em que ela é criada. Assim, não damos nome a ela, pois ela está no anonimato, e colocamos um parênteses para indicar que ela é um valor. Logo após fechá-la com parênteses, abrimos o outro parênteses para executar aquela determinada função
259 |
260 |
261 | // ArrowFunction
262 |
263 | let calc2 = (x1, x2, operator) => {
264 |
265 | return eval(`${x1} ${operator} ${x2}`);
266 |
267 | }
268 |
269 | let resultado3 = calc2(1, 2, "/");
270 |
271 | console.log(resultado3);
272 |
273 | // Acima temos uma forma mais nova e recente de criar funções. A ArrowFunction
274 |
275 | // Continua...
--------------------------------------------------------------------------------
33 |
34 | 
15 |
16 |
17 | 
