1

O que todo iniciante em JavaScript deveria saber (e que você deveria relembrar)

#JavaScript
Alessandro Araújo
Alessandro Araújo

1. A chave para iniciar


É importante que o programador (e todo ser humano) tenha em mente que tentar aprender coisas complexas antes de compreender o básico é um caminho arriscado e perigoso.


Nesse sentido, para aprender JavaScript, é importante tentar entender a utilidade de alguns dos elementos básicos que são considerados durante o dia a dia de uso da linguagem, dentre eles, é essencial o conhecimento sobre o DOM.


2. Árvore DOM


DOM (Document Object Model) consiste em um conjunto de padrões que nos ajudam a entender a representação dos elementos de determinados tipos de documentos (como HTML e XML) e facilitam a nossa interação com esses itens.


Considerando que o conteúdo exibido em um navegador seja mostrado através de uma janela ("window"), é possível perceber que estes elementos (como um menu do site em que você está vendo este artigo, por exemplo) possuem relações entre si.


Estas relações podem ser representadas por meio de uma estrutura em forma de árvore, a Árvore DOM!


O elemento mais superior dessa estrutura seria a window, ou seja, a janela na qual você utiliza o navegador.


Nele, estão contidos vários outros, dentre eles o document (que representa o documento exibido no browser) através do qual, na linguagem JavaScript, podemos obter acesso a muitos outros itens do conteúdo exibido nos navegadores.


3. Como "captar" um elemento?


Aqui entra o item "document" mencionado anteriormente, vamos utilizá-lo:


Hora do Código!


Suponha que buscamos captar um elemento pelo seu ID, definido durante a criação do documento HTML do site.


Para isso, podemos utilizar uma das funções inclusas no document, a "Pegar elemento por ID" (Get Element By ID).


A estrutura do código seria mais ou menos a seguinte:


document.getElementById('id')


Podemos, inclusive, inserir este elemento obtido dentro de uma variável qualquer e utilizá-lo posteriormente:


var elemento = document.getElementById('id')


Além de pegar os elementos pelo ID, também podemos captá-los através de suas marcas (definidas no documento HTML), de seus names, de suas classes ou até mesmo utilizando a sintaxe das folhas de estilo (CSS) através do querySelector.


4. Aprenda lendo!


Caso queira aprender mais, você também pode conferir a documentação disponibilizada pela Mozilla: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript.


Você também pode aprender através de cursos, como os disponibilizados pela Digital Innovation One, se registre e obtenha conhecimento gratuitamente: https://digitalinnovation.one/.


Conhece mais comandos e linguagens?


Se sim, coloque nos comentários os que mais domina e as linguagens de programação que mais gosta (ou tem interesse) :)

5
11210

Comentários (7)

1
J

Jonathas Araujo

26/03/2021 17:45

Ficou bom o artigo. Ganhou R$ 1.000 hein

1
J

Jonathas Araujo

26/03/2021 17:44

Top 3 mano, ganhou parabens


0
Alessandro Araújo

Alessandro Araújo

25/03/2021 19:54

@Dannilo Fernandes, obrigado pela pela dica sobre o 'designMode'

0
Alessandro Araújo

Alessandro Araújo

25/03/2021 19:51

Obrigado pela interação pessoal (^ - ^)

0
M

Maria Araújo

24/03/2021 10:45

Artigo muito interessante!

1
Dannilo Fernandes

Dannilo Fernandes

23/03/2021 08:08

Boa! Um exercício divertido é inspecionar elementos e fazer alterações em sites por meio da manipulação do DOM. Dá pra aprender um bocado.


A título de curiosidade, tem o 'designMode', um comando que é usado pra habilitar o design da página. Faça o teste, no console do navegador, digite:

  document.designMode="on"
1
Josuel Santos

Josuel Santos

22/03/2021 23:25

Muito top. Alessandro

Sou um jovem em busca de conhecimento.

Brasil