0% acharam este documento útil (0 voto)

2 visualizações

Linguagem JavaScript

Enviado por

James Brown

Direitos autorais

Formatos disponíveis

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

0% acharam este documento útil (0 voto)

2 visualizações

Linguagem JavaScript

Enviado por

James Brown

Direitos autorais

Formatos disponíveis

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

Você está na página 1/ 17

Linguagem JavaScript – usando a cabeça

A tag <script> é uma parte fundamental de HTML utilizada para incorporar scripts, como
JavaScript, em páginas da web. Quando um navegador encontra a tag <script>, ele para de
interpretar o HTML e começa a processar o script contido dentro dela. Aqui estão alguns pontos-
chave sobre a tag <script>:

O objeto `Document` é um dos principais objetos do Modelo de Objeto de Documento (DOM)

em JavaScript, representando a estrutura de uma página HTML. Ele fornece métodos e
propriedades para interagir com os elementos HTML em um documento.

Aqui estão alguns aspectos importantes sobre o objeto `Document`:

1. Acesso aos Elementos: O objeto `Document` permite acessar e manipular os elementos HTML
em uma página. Você pode acessar elementos por meio de métodos como `getElementById()`,
`getElementsByClassName()`, `getElementsByTagName()`, `querySelector()`, e
`querySelectorAll()`.

2. Manipulação do Conteúdo: O objeto `Document` permite modificar o conteúdo HTML de um

documento. Você pode alterar o texto, os atributos e a estrutura dos elementos HTML usando
métodos como `createElement()`, `appendChild()`, `removeChild()`, `setAttribute()`,
`innerHTML`, entre outros.

3. Eventos: O objeto `Document` também pode ser usado para lidar com eventos na página.
Você pode adicionar event listeners a elementos específicos ou ao próprio documento para
responder a interações do usuário ou outras ações, como carregamento da página.

1
4. Propriedades Úteis: O objeto `Document` possui várias propriedades úteis que fornecem
informações sobre o documento, como `title`, `URL`, `body`, `head`, entre outras. Essas
propriedades podem ser usadas para acessar ou modificar partes específicas do documento.

5. Navegação: Além de manipular elementos HTML, o objeto `Document` também fornece

métodos para navegar na estrutura do documento, como `parent`, `children`, `nextSibling`,
`previousSibling`, entre outros.

Exemplo de uso do objeto `Document` para acessar um elemento por ID e modificar seu
conteúdo:

<body>

<h1 id="titulo">Meu Título</h1>

// Acessando o elemento pelo ID e alterando seu conteúdo

var tituloElemento = document.getElementById("titulo");

tituloElemento.innerHTML = "Novo Título";

</script>

</body>

</html>

```

Neste exemplo, o JavaScript acessa o elemento `<h1>` com o ID "titulo" usando o método
`getElementById()` do objeto `Document` e então altera seu conteúdo utilizando a propriedade
`innerHTML`. Isso resulta na modificação do título exibido na página.

Você pode usar JavaScript para verificar se os campos de entrada (inputs) em um formulário
estão vazios. Aqui está um exemplo simples de como você pode fazer isso:

2
```html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Verificação de Inputs com JavaScript</title>

function verificarInputs() {

// Obtendo referências para os campos de entrada

var nomeInput = document.getElementById("nome");

var emailInput = document.getElementById("email");

// Verificando se os campos estão vazios

if (nomeInput.value === "") {

alert("Por favor, preencha o campo Nome.");

return false; // Impede o envio do formulário

if (emailInput.value === "") {

alert("Por favor, preencha o campo Email.");

return false; // Impede o envio do formulário

// Se todos os campos estiverem preenchidos, retorna true

return true;

3
}

</script>

</head>

<body>

<h1>Verificação de Inputs com JavaScript</h1>

<form onsubmit="return verificarInputs()">

<input type="text" id="nome" name="nome"><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br><br>

<input type="submit" value="Enviar">

</form>

</body>

</html>

```

Neste exemplo:

- Definimos uma função chamada `verificarInputs()` que é chamada quando o formulário é

submetido.

- Dentro dessa função, obtemos referências para os campos de entrada usando

`document.getElementById()`.

- Verificamos se os campos estão vazios comparando seus valores com uma string vazia `""`.

4
- Se um campo estiver vazio, exibimos um alerta informando ao usuário para preencher o campo
e retornamos `false`, o que impede o envio do formulário.

- Se todos os campos estiverem preenchidos, a função retorna `true`, permitindo que o formulário
seja submetido.

- Usamos a função `onsubmit` no formulário para chamar `verificarInputs()` quando o formulário

é submetido. Se a função retornar `false`, o formulário não será submetido.

Claro, aqui estão alguns eventos e métodos adicionais que você pode usar para manipular
interações de usuário em JavaScript, além do `onsubmit`:

1. onclick: Este evento é acionado quando um elemento é clicado. Você pode usá-lo para
executar uma função quando um botão ou outro elemento é clicado.

```html

<button onclick="minhaFuncao()">Clique aqui</button>

```

2. onchange: Este evento é acionado quando o valor de um elemento de formulário é alterado e o

foco sai desse elemento. Pode ser útil para validar entradas de formulário em tempo real ou
realizar ações quando um valor é alterado.

```html

<input type="text" onchange="validarCampo(this)">

```

3. onkeyup: Este evento é acionado quando uma tecla é liberada enquanto o usuário está
digitando em um campo de texto. É útil para realizar ações à medida que o usuário digita, como
sugestões de pesquisa ou validação de entrada.

5
```html

<input type="text" onkeyup="verificarTamanho(this)">

```

4. onmouseover/onmouseout: Esses eventos são acionados quando o cursor do mouse entra/sai

de um elemento, respectivamente. Eles podem ser usados para fornecer feedback visual ao
usuário ou executar ações quando o mouse passa por cima ou sai de um elemento.

```html

<img src="imagem.jpg" onmouseover="aumentarImagem(this)"

onmouseout="restaurarImagem(this)">

```

5. addEventListener: Além dos atributos HTML, você também pode usar o método
`addEventListener` para adicionar ouvintes de eventos a elementos HTML. Isso permite uma
separação mais limpa entre o JavaScript e o HTML.

```html

<button id="meuBotao">Clique aqui</button>

document.getElementById("meuBotao").addEventListener("click", function() {

// Lógica a ser executada quando o botão é clicado

});

</script>

```

6
Esses são alguns dos eventos e métodos que você pode usar para interações de usuário em
JavaScript. Cada um tem seu próprio propósito e pode ser útil em diferentes situações,
dependendo dos requisitos do seu projeto.

Para verificar se uma senha contém caracteres especiais em JavaScript, você pode usar
expressões regulares. Expressões regulares são padrões de busca utilizados para correspondência
de strings. Aqui está um exemplo de como você pode fazer isso:

```javascript

function verificarSenha(senha) {

// Expressão regular para verificar se a senha contém pelo menos um caractere especial

var regex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;

// Testa se a senha corresponde à expressão regular

if (regex.test(senha)) {

return true; // A senha contém caracteres especiais

} else {

return false; // A senha não contém caracteres especiais

// Exemplo de uso

var senha = "MinhaSenha@123";

if (verificarSenha(senha)) {

console.log("A senha contém caracteres especiais.");

7
} else {

console.log("A senha não contém caracteres especiais.");

```

Neste exemplo:

- A função `verificarSenha` recebe a senha como parâmetro.

- A expressão regular `/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/` é usada para encontrar caracteres

especiais em uma string. Esta expressão regular corresponde a qualquer um dos caracteres
especiais dentro dos colchetes.

- O método `test` da expressão regular é usado para verificar se a senha corresponde à expressão
regular. Ele retorna `true` se houver pelo menos um caractere especial na senha, e `false` caso
contrário.

- O exemplo final mostra como você pode usar a função `verificarSenha` para testar uma senha e
tomar ações com base no resultado.

Este é um exemplo simples de como você pode verificar a presença de caracteres especiais em
uma senha usando JavaScript. Você pode ajustar a expressão regular conforme necessário para
atender aos requisitos específicos de sua aplicação.

Em JavaScript, há uma variedade de tipos de eventos que você pode lidar para responder às
interações do usuário ou ações do navegador. Aqui estão alguns dos tipos de eventos mais
comuns:

1. Eventos de mouse:

- `click`: Acionado quando o usuário clica em um elemento.

- `mouseover`: Acionado quando o cursor do mouse entra em um elemento.

8
- `mouseout`: Acionado quando o cursor do mouse sai de um elemento.

- `mousedown`: Acionado quando um botão do mouse é pressionado sobre um elemento.

- `mouseup`: Acionado quando um botão do mouse é liberado após ter sido pressionado sobre
um elemento.

- `mousemove`: Acionado quando o cursor do mouse se move sobre um elemento.

2. Eventos de teclado:

- `keydown`: Acionado quando uma tecla é pressionada.

- `keyup`: Acionado quando uma tecla é liberada após ter sido pressionada.

- `keypress`: Acionado quando uma tecla é pressionada e liberada.

3. Eventos de formulário:

- `submit`: Acionado quando um formulário é enviado.

- `change`: Acionado quando o valor de um elemento de formulário é alterado e o foco sai

desse elemento.

- `focus`: Acionado quando um elemento de formulário recebe o foco.

- `blur`: Acionado quando um elemento de formulário perde o foco.

4. Eventos de janela:

- `load`: Acionado quando a página é completamente carregada.

- `resize`: Acionado quando a janela do navegador é redimensionada.

- `scroll`: Acionado quando o conteúdo de uma janela é rolado.

5. Eventos de mídia:

- `play`: Acionado quando um áudio ou vídeo começa a ser reproduzido.

- `pause`: Acionado quando a reprodução de um áudio ou vídeo é pausada.

9
- `ended`: Acionado quando a reprodução de um áudio ou vídeo chega ao fim.

6. Eventos de touch (toque):

- `touchstart`: Acionado quando um dedo é colocado na tela.

- `touchmove`: Acionado quando um dedo é movido na tela.

- `touchend`: Acionado quando um dedo é removido da tela.

Esses são apenas alguns exemplos de tipos de eventos em JavaScript. Você pode usar esses
eventos para criar interações dinâmicas em suas páginas da web, respondendo às ações dos
usuários e atualizando o conteúdo da página conforme necessário.

Vou fornecer exemplos simples de cada tipo de evento mencionado, demonstrando como você
pode usá-los em JavaScript.

1. Eventos de mouse:

```html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Eventos de Mouse</title>

function onClick() {

alert("Você clicou no botão!");

10
function onMouseOver() {

document.getElementById("hover-me").innerHTML = "Mouse sobre mim!";

function onMouseOut() {

document.getElementById("hover-me").innerHTML = "Passe o mouse sobre mim";

</script>

</head>

<body>

<button onclick="onClick()">Clique em mim</button>

<div id="hover-me" onmouseover="onMouseOver()" onmouseout="onMouseOut()">Passe o

mouse sobre mim</div>

</body>

</html>

```

2. Eventos de teclado:

```html

<!DOCTYPE html>

<head>

11
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Eventos de Teclado</title>

function onKeyDown() {

alert("Tecla pressionada!");

function onKeyUp() {

alert("Tecla liberada!");

</script>

</head>

<body>

<input type="text" onkeydown="onKeyDown()" onkeyup="onKeyUp()">

</body>

</html>

```

3. Eventos de formulário:

```html

<!DOCTYPE html>

<head>

12
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Eventos de Formulário</title>

function onSubmit() {

alert("Formulário enviado!");

function onChange() {

alert("Valor alterado!");

function onFocus() {

alert("Campo focado!");

function onBlur() {

alert("Campo desfocado!");

</script>

</head>

<body>

<input type="text" onchange="onChange()" onfocus="onFocus()" onblur="onBlur()">

<input type="submit" value="Enviar">

</form>

13
</body>

</html>

```

4. Eventos de janela:

```html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Eventos de Janela</title>

window.onload = function() {

alert("Página completamente carregada!");

window.onresize = function() {

alert("Janela redimensionada!");

window.onscroll = function() {

alert("Rolagem da página!");

14
</script>

</head>

<body>

<h1>Conteúdo da página</h1>

</body>

</html>

```

5. Eventos de mídia:

```html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Eventos de Mídia</title>

</head>

<body>

<audio controls onplay="alert('Áudio reproduzido!')" onpause="alert('Áudio pausado!')"

onended="alert('Áudio finalizado!')">

<source src="caminho/do/audio.mp3" type="audio/mpeg">

Seu navegador não suporta áudio HTML5.

</audio>

</body>

15
</html>

```

6. Eventos de touch (toque):

```html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Eventos de Touch</title>

<style>

#touchable {

width: 100px;

height: 100px;

background-color: red;

</style>

function onTouchStart() {

alert("Toque iniciado!");

function onTouchMove() {

16
alert("Toque movendo!");

function onTouchEnd() {

alert("Toque finalizado!");

</script>

</head>

<body>

<div id="touchable" ontouchstart="onTouchStart()" ontouchmove="onTouchMove()"

ontouchend="onTouchEnd()"></div>

</body>

</html>

```

Esses exemplos demonstram como lidar com diferentes tipos de eventos em JavaScript para criar
interações dinâmicas em suas páginas da web. Cada exemplo corresponde a um tipo específico
de evento e mostra como você pode usar esses eventos para responder às ações do usuário.