0% acharam este documento útil (0 voto)

32 visualizações13 páginas

Treinamento JavaScript: Fundamentos e Práticas

O documento é um guia sobre JavaScript, abordando conceitos como a natureza orientada a objetos da linguagem, o uso de ferramentas de desenvolvimento, e práticas recomendadas para escrita de código. Ele também discute a execução de scripts no navegador, a estrutura de objetos e arrays, e a manipulação do DOM. Além disso, o documento fornece exemplos práticos e esclarece a diferença entre funções e métodos, além de outros tópicos fundamentais para desenvolvedores JavaScript.

Traduzido por

ScribdTranslations

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

32 visualizações13 páginas

Treinamento JavaScript: Fundamentos e Práticas

Traduzido por

ScribdTranslations

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

LinkedIn Learning

Treinamento Essencial em JavaScript

1. O que significa quando dizemos que JavaScript é um "objeto-

língua 'orientada'?
JavaScript é modelado em torno de objetos com propriedades e
métodos que podem ser tratados de forma modular.
2. O que acontece com o site e o código quando você escreve código
no console do navegador?
O código no console do navegador impacta o navegador atual
instância somente. Ela existe no console enquanto a janela
está aberto.
3. Qual é um indicador de que alguém é um bom JavaScript
desenvolvedor?
Eles seguem padrões, investem em aprendizado, usam formatação e
ferramentas de linting para consistência e escrever código acessível.
4. Qual é o ambiente natural para JavaScript?
O navegador, ambientes de servidor e seu computador.
5. O que é ECMAScript?
A especificação que descreve como os navegadores devem implementar
e interpretar JavaScript.
6. Onde você deve desenvolver e testar seu código JavaScript?
Desenvolva em um editor de código, teste em quantos navegadores puder
colocar as mãos em.
7. Por que as ferramentas de linha de comando e automação se tornaram populares
no desenvolvimento em JavaScript?
Eles simplificam processos complexos e introduzem recursos para ajudar.
desenvolvedores escrevem códigos melhores.

8. Quando o navegador executa JavaScript?

Por padrão: Quando o script é encontrado. Se o script estiver configurado para
"async", quando o script estiver totalmente carregado. Se o script estiver definido para
"defer", quando toda a página HTML é renderizada.
9. Qual é a marcação correta para adicionar um arquivo JavaScript externo
para um documento HTML?
<script src="[Link]" async></script>
10. O que acontece quando você adianta o JavaScript?
O navegador carrega o JavaScript de forma assíncrona quando está
encontrado, então aguarda até que todo o HTML seja renderizado antes de
executando o script.
11. JavaScript modules are heavily used in frameworks like
React e Vue. Qual é a vantagem de usar módulos?
Módulos permitem a modularização do código onde individual
funções, componentes, objetos de dados e outras partes podem ser
separados em arquivos individuais.
12. Dado o código abaixo, como você acessa a propriedade
named in let propName? ``` let propName = "color"; const
myObject = { ID = 3, color = "pink", propLength = 4, use =
falso }; `
Usando a notação de colchetes: myObject[propName]
13. No seguinte objeto, qual é o código na segunda linha
chamado?
const myObject = { color: "pink" };
14. Por que é considerado uma boa prática colocar objetos dentro de constantes?
Portanto, o objeto não é acidentalmente alterado ou sobrescrito.

15. Which of the below object property names are not valid?
const meuObjeto = { nomePropriedade = "propriedade", // linha 1

prop-name = "hyphenated", // line 2

3rdProp = "numbered", // line 3

$prop = "dollar", // line 4

%prop = "percentage", // line 5

prop name = "space" // line 6 };

Lines 2, 3, 5, and 6

16. Como acessar um objeto em JavaScript?

Chame o objeto pelo nome de seu recipiente.
17. Um objeto criado a partir de uma classe pode ter o mesmo nome?
como a aula?
Não: Se a classe é constante, isso causará um erro. Se a classe
não é uma constante, o novo objeto irá sobrescrever a classe.
18. Como você define um objeto em JavaScript?
Crie uma variável, dê um nome a ela e atribua-lhe um objeto usando
chaves curvas: const meuObjeto = { // Propriedades e métodos vão
aqui. };
19. O que a palavra-chave this se refere em uma classe?
isto se refere ao objeto atual criado a partir da classe.
20. Onde você vai para encontrar documentação oficial e código
exemplos de objetos padrão embutidos (globais)?
A documentação do MDN para objetos embutidos padrão
21. Como você cria um novo objeto a partir de uma classe?
Usando a nova palavra-chave, nomeando a classe e passando o
propriedades como parâmetros.
22. Qual é uma vantagem de usar uma classe em vez de um objeto
método construtor?
Classes podem ser estendidas.
23. Qual é a convenção estabelecida para formatar objetos?
Todas as propriedades e métodos estão listados em suas próprias linhas separadas.
24. Qual é a diferença entre uma função e um método?
A function is a stand-alone function. A method is a function
dentro de um objeto.
25. Você pode usar funções de seta para criar métodos de objeto?
Não, os métodos de objeto devem ser declarados usando expressões de função.
ou a definição abreviada do método.
26. Ao criar uma classe, os métodos de protótipo são adicionados.
dentro do método construtor.
FALSO

27. Como declarar uma expressão JavaScript dentro de um

template literal?
Usando um símbolo de dólar seguido de chaves: const
myString = `Some text and an ${expression}.`;

28. O que o seguinte código exibe no console?

deixe o número = 5; deixe subtraído = 5-1; [Link]("O número antes"

+ número + "é" + subtraído + ".";

O número antes de 5 é 4.

29. Que método(s) você usaria para verificar se um elemento tem

um ID específico e, se sim, substituí-lo por um ID diferente?

os métodos [Link]() e [Link]().

30. Qual é a diferença no retorno do

propriedades [Link] e [Link]?
[Link] retorna uma string contendo todas as classes
anexado ao elemento. [Link] retorna um
DOMTokenList com cada classe anexada ao elemento.

31. Como é a marcação HTML deste elemento de imagem?

como após a execução do seguinte script?

const newImage = [Link]("img");

[Link]("feat-img");
[Link]("src", "[Link]");
[Link]("alt", "O logotipo da empresa");
[Link] = "display: block";
<img class="feat-img" src="[Link]" alt="O logo da empresa"
style="display: block;">

32. Qual é o valor de const target após este código?

executado?

const target = [Link]("a");

Uma lista de nós contendo cada objeto de elemento que corresponde à consulta.

33. What is the value of const target after this code has
executado (assumindo que há elementos no DOM com o
classe "nota")?

const target = [Link](".note");

Um objeto HTMLCollection vazio semelhante a um array.

34. Os métodos querySelector() e querySelectorAll() usam

que tipo de seletores como seu parâmetro?
Uma string de seletor CSS.

35. O que acontece se você executar este código:

const alvo = [Link](".primeira-parágrafo");

[Link]-family = "sans-serif";

Erro de Sintaxe: Lado esquerdo inválido na atribuição

36 O que faz o método [Link]()?

Adiciona a classe especificada se ela não estiver anexada ao elemento,
remove a classe especificada se ela estiver adicionada ao elemento.

37. Onde no documento HTML está o novo elemento

aparecer quando você usar o método [Link]()?

Em nenhum lugar: O elemento é criado, mas não foi adicionado ao

DOM.
38. O que é o "DOM"?
DOM é a abreviação de 'Modelo de Objeto de Documento', o documento
objeto que o navegador cria quando renderiza um documento HTML.

39. Como você adiciona um elemento criado usando createElement()

ao DOM?

Todas essas opções e mais.

40. O que um único símbolo de igual em JavaScript indica?

Um valor é atribuído à variável nomeada.

41. O que acontece se você usar uma variável nomeada sem primeiro
declarando-o usando as palavras-chave var, let ou const?

Uma variável global é criada com a atribuição de nome e valor.

42. Qual é o valor de defaultColor quando ele é registrado no

console?

var corPadrão = "roxo"; função definirCor() { se ( corPadrão

=== "roxo" ) { let defaultColor = "laranja"; } } setColor();
[Link](corPadrão);

roxo

43. How do you capture the result of a math equation like 42 *

38 em JavaScript?
Crie uma variável e defina-a como igual à equação matemática.

44. Em que cenário você deve usar var em vez de let para definir
uma variável?
Quando você precisa de uma variável atribuível com escopo global
available to all functions and statements.

45. Qual declaração é verdadeira?

As propriedades de um objeto dentro de uma constante podem ser alteradas.

46. O que é registrado no console após este código ser executado?

let soma = 23.95; let gorjeta = "3"; [Link]("O total é R$" + soma
+ dica + ".";

O total é R$ 23.953.

47. O que os operadores (símbolos de igual) fazem nestes

o que significam três linhas de código?

a = b a == b a === b

a = b atribui o valor de b a a. a == b testa a igualdade

entre a e b. a === b testa a igualdade idêntica entre a
e b.

48. Dada a matriz abaixo, como você acessaria o item

cujo valor é 7?

var numbers=[4, 7, 3, 5, 2];

numbers[1]

49. Como ficará o array de números quando o seguinte

o código termina de executar?

1, 2, 3, 4, 5

50. O que acontece quando você adiciona um novo item a um array?

slot previamente indefinido?
Um novo slot é adicionado correspondendo ao número do slot fornecido.

51. O primeiro item de um array tem a posição de índice 1.

FALSO
52. Arrays podem conter uma mistura de qualquer tipo de dado.
VERDADEIRO

53. O que será impresso no console como o seguinte script

está correndo?

var raiz = (function(x) { [Link](x*x); })(meu_numero)

my_number = 5;
Este código irá gerar um erro.

54. Em uma instrução switch, o que acontece quando vários dos

os casos switch resolvem para verdadeiro?

A instrução switch retorna o primeiro caso que resolve para verdadeiro,

então para.

55. Qual é o novo valor de myArray após este script

executa?

const meuArray = [1, 2, 3, 4] [Link]( (item, index) => {

myArray[index] = ++item; });

[2,3,4,5]

56. Qual é a diferença entre [Link]() e

métodos [Link]()?
[Link]() executa uma função de retorno de chamada fornecida uma vez para
cada item na matriz. [Link]() cria uma nova matriz com o
resultados da execução de uma função de retorno fornecida uma vez para cada
item na matriz original.

57. Funções anônimas são perigosas porque podem ser

acionado por acidente.

FALSO
58. Qual operador lógico significa negação (não)?

59. Como você captura um valor retornado de uma função?

O valor é retornado para onde a função foi chamada,

substituindo efetivamente a chamada da função.

60. Qual é o propósito da palavra-chave return nesta função?

const minhaFuncao = (dados, modificador) => { se (dados >= 3) { retornar;
} else { [Link](data + modifier); } }

A palavra-chave return interrompe a execução da função se a

a declaração condicional é verdadeira.

61. O que significa quando dizemos que uma função tem um callback?

Uma função de callback é uma função passada para outra função como
um argumento, que é então invocado dentro da função externa para
completar algum tipo de rotina ou ação

62. O que é registrado no console quando o seguinte script

executa:

const number = 10; if (number <= 9) { [Link]("<=9"); } else if

( número >= 10 ){ [Link](">=10"); }

>=10

63. Qual das opções a seguir é a sintaxe correta para um

função de seta?

const minhaFuncao = (dados) => { [Link](dados); };

64. Verdadeiro ou falso: Uma função de seta pode ser usada para definir um
método de objeto.

FALSO
65. O que é registrado no console quando este script é executado?

const myFunction = (data) => { return; let newData = data + 1; }

return newData; } [Link](myFunction(5));

Nada (indefinido)

66. O que acontece quando você atribui valores a parâmetros em um

declaração de função conforme exemplificado abaixo:

const minhaFunção = (dados = 5, cor = "vermelho") => {}

Valores padrão são criados para cada parâmetro. Se nenhum valor for
passados para a função, esses valores são usados.

67. Qual resposta é um exemplo válido de chamar a função

expressão definida abaixo?

const myFunction = function(a) {};

minhaFunção(1);

68. Qual é a diferença entre uma expressão de função e uma

declaração de função?

Uma declaração de função define uma função com o especificado

parâmetros começando com a palavra-chave função. Uma função
a expressão expressa uma função dentro de uma variável atribuindo
a função à variável.

69. O que o seguinte script imprimirá?

função myfunc(x,y) { return(x+y); }

[Link](myfunc(2,myfunc(5,-2)));

70. Um listener de evento pode ser anexado ao objeto window.

VERDADEIRO
71. O que vai no lugar de a e b neste evento padrão
ouvinte?

[Link]("__a__", "__b__");

a: the event name b: the function to call when the event fires

72. O que 'isto' se refere no seguinte listener de eventos

definição?

[Link](eventName, function(e) {
eventFunction(e,this); });

O elemento em myElement

73. Por que isso retorna o objeto window no seguinte

definição de ouvinte de evento?

[Link](nomeDoEvento, () => {
[Link](this); });
As funções de seta não têm seu próprio this, portanto, referem-se ao
mais próximo definiu isso que é o objeto janela.

74. Um valor pode ser passado através de um ouvinte de evento para o seu
função de callback?

Sim, capturando o valor em uma nova função dentro do callback

função.

75. Quando o evento de redimensionamento é acionado?

Quando a visualização do documento é redimensionada.

76. Como você captura o objeto de evento em um listener de evento?

O objeto de evento é automaticamente passado como um parâmetro para o

função de retorno. Simplesmente nomeie e use o parâmetro.

77. Se você criar vários ouvintes de eventos ouvindo o mesmo

evento, apenas o último no script funcionará.
FALSO
78. Qual é o primeiro passo de solução de problemas quando seu
O JavaScript não está funcionando como esperado?