A linguagem de marcação HTML (HyperText Markup Language) é a espinha dorsal de qualquer site ou aplicativo da web. Ela fornece a estrutura básica, que é então aprimorada e modificada por CSS e JavaScript. Entender HTML é crucial para qualquer desenvolvedor front-end. Neste capítulo, vamos explorar a estrutura básica do HTML, suas tags e atributos, e também mergulhar nos operadores JavaScript.
Estrutura Básica do HTML
Um documento HTML é estruturado como uma árvore, com um elemento 'html' no topo. Este elemento contém dois elementos filho: 'head' e 'body'. O elemento 'head' contém metadados sobre o documento, incluindo o título que aparece na guia do navegador e links para arquivos CSS. O elemento 'body' contém o conteúdo principal do site, incluindo texto, imagens, vídeos e links.
<html>
<head>
<title>Título do Site</title>
</head>
<body>
Conteúdo do site vai aqui.
</body>
</html>
Tags e Atributos HTML
As tags HTML são usadas para definir elementos e o conteúdo de um site. Cada tag começa com um sinal de menor (<) e termina com um sinal de maior (>). As tags geralmente vêm em pares, com uma tag de abertura e uma tag de fechamento. A tag de fechamento é idêntica à tag de abertura, mas tem uma barra (/) antes do nome da tag.
Os atributos HTML são usados para fornecer informações adicionais sobre um elemento. Eles são sempre especificados na tag de abertura e geralmente vêm em pares nome-valor. Por exemplo, a tag 'img' usa o atributo 'src' para especificar a URL da imagem e o atributo 'alt' para fornecer um texto alternativo para a imagem.
<img src="url_da_imagem.jpg" alt="Descrição da imagem">
Operadores JavaScript
JavaScript é uma linguagem de programação que permite adicionar interatividade e funcionalidade complexa a um site. Os operadores são símbolos que especificam qual operação executar. Existem vários tipos de operadores em JavaScript, incluindo operadores aritméticos, de atribuição, de comparação, lógicos e de tipo.
Os operadores aritméticos são usados para realizar operações matemáticas. Por exemplo, '+' é usado para adição, '-' para subtração, '*' para multiplicação, '/' para divisão e '%' para obter o resto de uma divisão.
let x = 10; let y = 5; console.log(x + y); // 15 console.log(x - y); // 5 console.log(x * y); // 50 console.log(x / y); // 2 console.log(x % y); // 0
Os operadores de atribuição são usados para atribuir valores a variáveis. O operador '=' é o mais comum, mas existem muitos outros, incluindo '+=' e '-=', que adicionam ou subtraem um valor de uma variável e depois atribuem o resultado à variável.
let x = 10; x += 5; // x agora é 15 x -= 3; // x agora é 12
Os operadores de comparação são usados para comparar dois valores. Eles retornam um valor booleano: true se a comparação for verdadeira, false se for falsa. Alguns exemplos incluem '==' (igual a), '!=' (não igual a), '<' (menor que), '>' (maior que), '<=' (menor ou igual a) e '>=' (maior ou igual a).
let x = 10; let y = 5; console.log(x == y); // false console.log(x != y); // true console.log(x < y); // false console.log(x > y); // true console.log(x <= y); // false console.log(x >= y); // true
Os operadores lógicos são usados para testar várias condições. Eles incluem '&&' (e), '||' (ou) e '!' (não).
let x = 10; let y = 5; let z = 20; console.log(x > y && x < z); // true console.log(x > y || x > z); // true console.log(!(x > y)); // false
Os operadores de tipo são usados para determinar o tipo de um valor ou converter um valor de um tipo para outro. O operador 'typeof' retorna o tipo de um valor e o operador 'instanceof' verifica se um objeto é uma instância de um tipo específico.
let x = "Hello, world!";
let y = new String("Hello, world!");
console.log(typeof x); // "string"
console.log(typeof y); // "object"
console.log(y instanceof String); // true
Em resumo, HTML, CSS e JavaScript são as três tecnologias fundamentais para o desenvolvimento web. Dominar essas habilidades é essencial para se tornar um desenvolvedor front-end eficaz. Esperamos que este capítulo tenha fornecido uma introdução sólida ao HTML e aos operadores JavaScript.
