Javascript - Introdução
O JavaScript é uma das linguagens de programação mais populares e amplamente utilizadas no mundo. É uma linguagem de programação de alto nível, interpretada, orientada a objetos e voltada para a web. JavaScript é executado em um navegador da web, tornando-o uma parte fundamental do desenvolvimento de aplicativos web modernos.
O JavaScript permite que os desenvolvedores criem aplicativos web interativos e dinâmicos. Ele pode ser usado para adicionar interatividade a elementos HTML, validar formulários, criar animações, manipular o DOM, criar efeitos visuais, interagir com APIs de terceiros, e muito mais.
Além disso, JavaScript também é usado em desenvolvimento de back-end com tecnologias como Node.js, que permite que os desenvolvedores usem JavaScript para criar aplicativos de servidor.
Uma das maiores vantagens do JavaScript é a sua flexibilidade. É uma linguagem de programação fácil de aprender, com uma sintaxe simples e intuitiva. E, embora existam muitas bibliotecas e frameworks JavaScript populares, é possível criar aplicativos web completos apenas com o conhecimento básico da linguagem.
Em resumo, o JavaScript é uma linguagem de programação poderosa e flexível que é amplamente usada em desenvolvimento de aplicativos web. É uma habilidade essencial para desenvolvedores que desejam criar aplicativos web modernos e interativos.
DOM
O Document Object Model, ou DOM, é uma estrutura de árvore hierárquica que representa todos os elementos HTML de uma página da web. O DOM é uma interface de programação que permite que os desenvolvedores acessem, manipulem e atualizem os elementos HTML, estilos e conteúdo de uma página da web usando JavaScript ou outras linguagens de programação.
O DOM é criado pelo navegador da web quando ele carrega uma página da web. A estrutura do DOM é criada a partir do código HTML da página e pode ser modificada dinamicamente com o uso de JavaScript. Cada elemento HTML é representado no DOM como um nó, e os nós são organizados em uma árvore hierárquica de pai-filho.
O DOM é muito importante para o desenvolvimento de aplicações web interativas e dinâmicas. Ele permite que os desenvolvedores manipulem elementos HTML, alterem o conteúdo e os estilos da página e adicionem comportamentos interativos aos elementos. Com a manipulação do DOM, é possível criar menus de navegação dinâmicos, atualizar conteúdo de uma página sem precisar recarregar a página inteira, criar animações e muito mais.
Em resumo, o DOM é uma representação programática de todos os elementos HTML de uma página da web e permite que os desenvolvedores acessem e manipulem esses elementos usando JavaScript ou outras linguagens de programação. É uma parte essencial do desenvolvimento de aplicações web modernas e dinâmicas.
Métodos
Seleção
Existem vários métodos de seleção de elementos disponíveis no DOM em JavaScript. Aqui estão alguns dos métodos mais comuns:
getElementById(): seleciona um elemento pelo valor do seu atributo id.
<div id="myDiv">Este é um elemento com ID.</div>
const divElement = document.getElementById("myDiv");getElementsByClassName(): seleciona elementos com o valor do seu atributo class.
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
const listItems = document.getElementsByClassName("item");getElementsByTagName(): seleciona elementos com base no nome da tag HTML.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
const listItems = document.getElementsByTagName("li");querySelector(): seleciona o primeiro elemento que corresponde a um seletor CSS.
<div class="container">
<p class="text">Este é um parágrafo.</p>
</div>
const paragraph = document.querySelector(".container .text");querySelectorAll(): seleciona todos os elementos que correspondem a um seletor CSS.
<div class="container">
<p class="text">Este é um parágrafo.</p>
<span class="text">Este é outro parágrafo.</span>
</div>
const paragraphs = document.querySelectorAll(".container .text");Inserir HTML
innerHTML: este método permite definir ou obter o conteúdo HTML dentro de um elemento. Ele é usado principalmente para inserir ou obter conteúdo HTML.
<div id="myDiv"></div>
const divElement = document.getElementById("myDiv");
divElement.innerHTML = "Este é um texto inserido com innerHTML.";textContent: este método permite definir ou obter o conteúdo de texto dentro de um elemento. Ele é usado principalmente para inserir ou obter conteúdo de texto.
<div id="myDiv"></div>
const divElement = document.getElementById("myDiv");
divElement.textContent = "Este é um texto inserido com textContent.";createElement() e appendChild(): estes métodos permitem criar um novo elemento e anexá-lo a um elemento existente. Eles são usados principalmente para criar novos elementos HTML e adicioná-los a um documento.
<div id="myDiv"></div>
const divElement = document.getElementById("myDiv");
const newElement = document.createElement("p");
const textNode = document.createTextNode("Este é um texto inserido com createElement e appendChild.");
newElement.appendChild(textNode);
divElement.appendChild(newElement);Manipulação de Estilos
É possível manipular várias propriedades CSS usando JavaScript e manipulação do DOM. Aqui estão alguns exemplos:
style.property: essa é uma maneira de definir uma propriedade CSS diretamente em um elemento HTML usando JavaScript. A propriedade CSS é definida como uma propriedade JavaScript, usando o nome da propriedade CSS em camelCase. Por exemplo, background-color se tornaria backgroundColor.
const divElement = document.getElementById("myDiv");
divElement.style.backgroundColor = "red";classList.add(), classList.remove() e classList.toggle(): esses métodos são usados para adicionar, remover ou alternar classes em um elemento HTML. Eles são úteis para alterar a aparência de um elemento em resposta a eventos, como o clique do usuário.
const divElement = document.getElementById("myDiv");
divElement.classList.add("active");
divElement.classList.remove("inactive");
divElement.classList.toggle("highlight");setAttribute(): este método permite definir ou alterar um atributo HTML em um elemento. Isso pode ser útil para definir estilos inline em um elemento HTML.
const divElement = document.getElementById("myDiv");
divElement.setAttribute("style", "background-color: red; color: white;");
Onde estudar?
https://devdocs.io/javascript/