Este artigo irá apresentar a estrutura do documento com a qual ele está trabalhando JavaScript. Por ter um conhecimento prático do Modelo de Objeto de Documento Abstrato, você pode Escrever código JavaScript Funciona em qualquer página da web.
XNUMX. Introdução
Como funciona Páginas da web e javascript Juntos e como ela pode falar um com o outro? As respostas estão em entender como funciona Modelo de Objeto de Documento (DOM).
O objetivo do DOM
O DOM organiza o conteúdo da página da web e fornece um roteiro. O modelo consiste em nós. Os nós são organizados em uma hierarquia que deve ser considerada uma estrutura em árvore. Devemos ser capazes de pegar qualquer código de programação em HTML e representá-lo dessa maneira.
Por exemplo, o texto para este parágrafo é um nó dentro do Document Object Model. O parágrafo é outro nó e é o pai do nó de texto. O próprio documento é, em última análise, um nó original de ambos.
Podemos escrever JavaScript para funcionar na página da web, definindo os nós. Como cada parte do conteúdo é um nó, podemos escrever JavaScript relacionado a qualquer entidade que desejamos alterar. Você vai notar que isso é semelhante a como Trabalho CSS: Aplica estilo ou aparência visual ao conteúdo usando os atributos do identificador e elementos HTML de classe, assim como o comportamento do JavaScript.
É importante notar que Código de código Para CSS e JavaScript, ele não existe no DOM, mas fora dele. Ambos processam o conteúdo DOM, em vez de estar dentro dele.
Reutilização de código
Por que o código-fonte das páginas da web é gerenciado dessa forma? Há duas razões principais:
- Armazenar JavaScript em arquivos separados permite que o código seja reutilizado com mais facilidade. Quando o código JavaScript é escrito em linha, junto com o conteúdo ao qual se vincula, ele deve ser copiado para que a mesma funcionalidade ocorra em outro lugar.
- Separar o JavaScript em um arquivo externo torna o código-fonte mais legível, removendo a funcionalidade da página da web (JavaScript) do conteúdo (HTML).
Contrato DOM
Os nós criados e controlados são limitados ao que a especificação HTML e os navegadores suportam. Este é um dos motivos pelos quais entrei HTML5 Novos itens de nível superior são importantes.
Para nossos propósitos, os tipos mais importantes de nós são:
- Element
- Atributo
- Texto
Embora as especificações estejam listadas em Na verdade, doze no total.
Use um script para criar nós no DOM
Para fins de demonstração simples, usaremos JavaScript para criar um elemento específico.
Aqui, mostraremos como o JS pode ser poderoso, usando-o para criar um dos objetos básicos de página da web mais populares, que é Endereço.
Para seguir este exemplo, criar um servidor totalmente virtual não vale o incômodo, então é melhor usar a sandbox online. Você precisará de um widget para tentar como JSBinName. JSBin é ótimo porque tem várias partes e inclui uma maneira de ver e manipular tudo: HTML, JS, CSS e visualizar a página da web de uma só vez.
(Codepen Semelhante, e para este exemplo, funcionaria da mesma maneira.)
O JSBin também pode gerar dinamicamente URLs de instrução JS que podem ser compartilhados posteriormente. Para você O exemplo que criei para este tópico.
Recriei e anotei os seguintes trechos para produzir um novo título H1 no corpo:
Trecho de HTML
Snippet de JavaScript
//declare a new variable to hold a new h1 element
var newHeading = document.createElement("h1");
//add the text node to the document
var h1Text = document.createTextNode("Heading Level 1");
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading); O que cria um item H1 Novo e seu conteúdo diretamente relacionado à tag .
Observe que o código-fonte HTML no painel direito não muda. Este código é bastante fácil de ler neste exemplo. Nas instruções avançadas de Javascript, as coisas podem ficar muito mais complicadas.
Familiarize-se um pouco com a estrutura de vocabulário do JavaScript
O excerto acima contém algumas explicações.
Crio var Variável, que armazena um valor aleatório para seu código usar.
= É o agente de atribuição. Funciona aqui usando o termo var E o nome da nova variável (por exemplo, novo título) Para formar uma variante completa.
objeto.método É uma chamada que usa a sintaxe “pontoPara separar objetos, como um documento, dos métodos usados em relação a eles, como em getElementById.
Merece um conceito 'objetosHá muita discussão em programação que está além do escopo deste artigo. Basta dizer que eles são componentes importantes de seu aplicativo.
De Depósito O que você espera: uma ação específica ou ação planejada que pode ser aplicada a objetos.
Com certeza cobrimos muitos recursos excelentes Para aprender javascript. Verifique novamente em nossa seção de programação para mais informações.
Qual é o próximo
Uma das estruturas mais populares que usam JavaScript é JQuery. É uma base importante para a última iteração de aplicativos e páginas da web ricas e é onde você pode querer começar a seguir.
JQuery é uma biblioteca JavaScript que reduz muitos scripts repetitivos e tarefas conhecidas, a fim de facilitar o processo de programação. JQuery é um software de código aberto gratuito licenciado sob minha licença MIT وGBL.
