Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
<p>LINGUAGENS WEB</p><p>JavaScript</p><p>Também chamada de JS, é a linguagem de criação de scripts para a Web;</p><p>• É utilizado por bilhões de páginas para:</p><p>– Adicionar funcionalidades;</p><p>– Verificar formulários;</p><p>– Comunicar com servidores;</p><p>– E muitos mais.</p><p>Com o tempo, muitas funcionalidades foram criadas em forma de Script para os browser</p><p>(navegadores) e foram “incorporadas” ao JavaScript:</p><p>– JavaScript hoje é um conjunto de funcionalidades e, até mesmo, diferentes padrões.</p><p>JavaScript Externo</p><p>• Da mesma forma como nos arquivos CSS, podemos deixar funções e comandos JavaScript</p><p>em arquivos externos:</p><p>– Estes arquivos devem ter a extensão .JS</p><p>• Para importar:</p><p><script src="meuScript.js"></script></p><p>Hello World</p><p>• Crie uma nova página;</p><p>• Dentro da seção <body> insira o trecho:</p><p><script></p><p>document.write("Hello World!"); //mostra mensagem na tela</p><p></script></p><p>• Neste caso, o trecho “escrito” pelo JavaScript, será incorporado ao HTML apenas em sua</p><p>construção;</p><p>JavaScript pode alterar o conteúdo HTML</p><p>Um dos muitos métodos JavaScript HTML é getElementById()</p><p>Use document.getElementById("demo").innerHTML = "Hello JavaScript"; para interagir</p><p>com o HTML dinamicamente.</p><p>Criando variáveis:</p><p>var, let, const</p><p>Exemplo:</p><p>var num1;</p><p>let numero;</p><p>cont pi = 3.1415</p><p>Vamos ver na prática</p><p>JavaScript pode alterar o conteúdo HTML</p><p>Um dos muitos métodos JavaScript HTML é getElementById().</p><p>O exemplo abaixo "encontra" um elemento HTML (com id="teste") e altera o conteúdo do</p><p>elemento (innerHTML) para "Hello JavaScript":</p><p>Exemplo 1</p><p><p id="teste">JavaScript alterando um conteúdo HTML.</p></p><p><button type="button" onclick='document.getElementById("teste").innerHTML</p><p>= "Hello JavaScript!"'>Click aqui!</button></p><p>Obs.:JavaScript aceita aspas simples e duplas:</p><p>Exemplo 2</p><p>JavaScript pode alterar valores de atributos HTML</p><p>Exemplo 3</p><p>JavaScript pode alterar estilos HTML (CSS)</p><p>Alterar o estilo de um elemento HTML é uma variante de alterar um atributo HTML:</p><p><p id="estilo">JS pode alterar o estilo de um elemento HTML.</p></p><p><button type="button"</p><p>onclick="document.getElementById('estilo').style.fontSize='35px'">Click</p><p>aqui!</button></p><p>Exemplo 4</p><p>JavaScript pode ocultar elementos HTML</p><p>É possível ocultar/mostrar elementos HTML alterando o display:</p><p><p id="mostra">JavaScript pode ocultar e mostrar elementos HTML.</p></p><p><button type="button"</p><p>onclick="document.getElementById('mostra').style.display='none'">Sumir</button></p><p><button type="button"</p><p>onclick="document.getElementById('mostra').style.display='block'">Aparecer!</button></p><p>O elemento <script></p><p>• Para inserir códigos JavaScript, iremos fazê-lo em uma Tag HTML apropriada:</p><p><script></p><p></script></p><p>Exemplo 5</p><p><p id="demo"></p></p><p><script></p><p>document.getElementById("demo").innerHTML = "My First JavaScript";</p><p></script></p><p>Funções e eventos JavaScript</p><p>Um JavaScript function é um bloco de código JavaScript que pode ser executado quando</p><p>"chamado".</p><p>Por exemplo, uma função pode ser chamada quando um evento ocorre, como quando o</p><p>usuário clica em um botão.</p><p>Exemplo 6</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><script></p><p>function myFunction() {</p><p>document.getElementById("teste").innerHTML = "Parágrafo alterado.";</p><p>}</p><p></script></p><p></head></p><p><body></p><p><h2>Teste com JavaScript no Head</h2></p><p><p id="teste">Um simples</p></p><p><button type="button" onclick="myFunction()">Click aqui</button></p><p></body></p><p></html></p><p>Usando document.write()</p><p>Para fins de teste, é conveniente usar document.write():</p><p>Exemplo 7</p><p><body></p><p><script></p><p>document.write(5 + 6);</p><p></script></p><p></body></p><p>Usando window.alert()</p><p>Você pode usar uma caixa de alerta para exibir dados:</p><p>Exemplo 8</p><p><script></p><p>window.alert("ATENÇÃO! Aviso importante....!");</p><p></script></p><p>Usando console.log()</p><p>Para fins de depuração, você pode chamar o método console.log() no navegador para exibir</p><p>dados.</p><p>Exemplo 10</p><p><h2>Ativando o debug</h2></p><p><p>Pressione F12 para ativar o debug.</p></p><p><p>Selecione o item "Console" no seu menu.</p></p><p><p>Pressione F5 para atualizar a página.</p></p><p><script></p><p>console.log("Olhe aqui, esse é um texto de debug (depuração)");</p><p></script></p><p>JavaScript Imprimir</p><p>JavaScript não tem nenhum objeto de impressão ou métodos de impressão.</p><p>Você não pode acessar dispositivos de saída do JavaScript.</p><p>A única exceção é que você pode chamar o método window.print() no navegador para</p><p>imprimir o conteúdo da janela atual.</p><p>Exemplo 11</p><p><h2>O método window.print()</h2></p><p><p>Click no botão abaixo para imprimir a página atual.</p></p><p><button onclick="window.print()">Print this page</button></p><p>Outros exemplos:</p><p>Alterando estilos HTML</p><p><button type="button" onclick='document.getElementById("chania").style.color = "blue"'>Cor</p><p>do título</button></p><p><button type="button" onclick='document.getElementById("body").style.background =</p><p>"lightblue"'>Cor de fundo</button></p><p>Tratando valores em inputs</p><p><script></p><p>function soma() {</p><p>var a = Number(document.getElementById("num1").value);</p><p>var b = Number(document.getElementById("num2").value);</p><p>var soma = a+b</p><p>//alert(soma);</p><p>document.getElementById("res").readOnly = true;</p><p>document.getElementById("res").value = soma;</p><p>}</p><p></script></p><p><input type="number" name="num1" id="num1"></p><p><input type="number" name="num2" id="num2"></p><p><input type="text" name="res" id="res"></p><p><button onclick="soma()">Somar</button></p><p>Bloqueando campos</p><p>document.getElementById("res").readOnly = true;</p><p>document.getElementById("res").value = soma;</p><p>Interagindo com botões</p><p><button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the</p><p>light</button></p><p><img id="myImage" src="pic_bulboff.gif" style="width:100px"></p><p><button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the</p><p>light</button></p><p>Neste exemplo, o JavaScript altera o valor do atributo src (source) de uma <img>tag:</p><p><p>JavaScript can change HTML attribute values.</p></p><p><p>JS alterando o valor de um atributo src de uma imagem.</p></p><p><button</p><p>onclick="document.getElementById('myImage').src='img/pic_bulbon.gif'">Ligado</button></p><p><img id="myImage" src="img/pic_bulboff.gif"></p><p><button</p><p>onclick="document.getElementById('myImage').src='img/pic_bulboff.gif'">Desligado</butt</p><p>on></p><p>1 – CÓDIGO PARA NÃO PERMITIR QUE SE SELECIONE TEXTO NA PÁGINA;</p><p><script></p><p>function on() {</p><p>document.onselectstart = new Function("return false")</p><p>}</p><p>function off() {</p><p>document.onselectstart = new Function("return true")</p><p>}</p><p></script></p><p><body></p><p><form></p><p><INPUT TYPE=BUTTON VALUE="Desligar seleção" onClick="on()"></p><p></form></p><p><form></p><p><INPUT TYPE=BUTTON VALUE="Ligar seleção" onClick="off()"></p><p></form></p><p></body></p><p></html></p><p>2 - MOUSE DIREITO NÃO FUNCIONA</p><p><script></p><p>function click() {</p><p>if (event.button == 2 || event.button == 3) {</p><p>oncontextmenu = 'return false';</p><p>}</p><p>}</p><p>document.onmousedown = click</p><p>document.oncontextmenu = new Function("return false;")</p><p></script></p><p>3 – DATA E HORA</p><p><script></p><p>const data = new Date();</p><p>document.write(data.toLocaleString('pt-BR'));</p><p></script></p><p>4 - MÉTODOS DE WINDOW; BROWSERS SEM JAVASCRIPT; VARIÁVEIS</p><p><script language="JavaScript"></p><p>let first = window.prompt("Entre com o nome:", "");</p><p>document.write("Bem-vindo, " + first + ".<br>");</p><p></script></p><p>5 - GERENCIANDO FORMS</p><p><script > //validar campo senha</p><p>//valida senha</p><p>function validaSenha() {</p><p>let senha = document.getElementById("inputSenha").value;</p><p>let csenha = document.getElementById("inputCSenha").value;</p><p>//Check input Fields Should not be blanks.</p><p>if (senha != csenha) {</p><p>alert("Senhas não conferem");</p><p>return false;</p><p>} else {</p><p>alert("Senhas conferem");</p><p>return true;</p><p>}</p><p>}</p><p>//Valida nome</p><p>function validaNome()</p><p>{</p><p>let nome = document.getElementById("inputName").value;</p><p>alert(nome);</p><p>}</p><p><div class="form-group"></p><p><label>Confirmar senha</label></p><p><input type="password" name="senha2" class="form-control"</p><p>placeholder="Confirme sua senha"</p><p>autocomplete="off" required oninput="validaSenha(this)"></p><p><small>Precisa ser igual a senha digitada acima.</small></p><p></div></p><p><script></p><p>function validaSenha(input) {</p><p>if (input.value != document.getElementById('txtSenha').value)</p><p>{</p><p>input.setCustomValidity('Repita a senha corretamente');</p><p>} else {</p><p>input.setCustomValidity('');</p><p>}</p><p>}</p><p></script></p>Mais conteúdos dessa disciplina
COMO SURGIRAM AS REDES DE COMPUTADORES E INTERNET- Perguntas e Respostas CSS 2024
- Conhecendo a Linguagem Python
- Mapa Mental - Desenvolvimento Web
- GB 011
- Você foi contratado pela EduConnect, uma startup de tecnologia educacional que fornece sistemas para universidades e escolas O desafio é desenvolver um Sistema de Gestão Educacional (SGE) orientado a
- A universidade precisa gerenciar turmas que relacionam professores e alunos em cursos específicos
- Juniper Mist AI, Professional (JNCIP-MistAI) JN0-750 Dumps Questions
- Aula 4 (Desenvolvimento de Site - HTML)
- assinale a alternativa correta sobre sobre (IOF)IMPOSTO SOBRE OPRAÇÃO DEDE CREDITOCAMBIO SEGURO A TTITULO OU VALORES IMOBILIARIOS
- Nos últimos anos, alguns marcos são representativos do avanço no debate sobre a dimensão educativa nas práticas da nutrição social. Assinale a alterna
- passei direto Tópicos de Programação Estruturas indexadas, que necessitam de mais que um índice para identificar um de seus elementos, são chamadas de
- passei direto Estruturas indexadas, que necessitam de mais que um índice para identificar um de seus elementos, são chamadas de matrizes de dimensão n
- A derivada da função F′(x)=x+1x−2 é: Questão 13Escolha uma opção: a. F′(x)=(x+1)2(x−2)2 b. F′(x)=(x+1)2(x−2)2 c. F′(x)=1 d. F′(x)=−3(x−2)2
- (EASF-2013). No planejamento de uma obra, os cronogramas são elementos que permitem o acompanhamento do desenvolvimento físico e financeiro de um empr
- Qual foi a mudança introduzida pelo HTML5 em relação à declaração de tipo de documento (doctype), e qual benefício essa mudança proporcionada aos d...
- Questão 9 Visualizamos em nossa disciplina que 0 Terceiro Setor vem se consolidando no Estado brasileiro recebendo qualificações e titulações. Assi...
- s fontes sem serifas é: Questão 3Escolha uma opção: a. Arial b. Times New Roman c. Tahoma d. Verdana
- O que o HTML está para? Opção A High Text Moore Language Opção B Hyper Textualy Mesh Language Opção C High Text Markup Language Opção D Hiperli...
- Questão 6: Analise as alternativas e assinale aquela que apresenta apenas alimentos que não são kosher e, portanto, não podem ser consumidos pela r...
- Qual das seguintes avaliações instrumentais complementares é especialmente útil para avaliar a função da deglutição, identificar possíveis obstruçõ...
- Obtenha os cinco coeficientes da decomposição em frações parciais de p(x) 1 = q (x) (x + 1) (x² + 4) 2 Utilize: p(x) q(x) = x+x₁ A + (x²+x₂) Bx+C + (x
- Captura de Tela 2024-05-17 as 22 00 30
- Captura de Tela 2024-05-17 as 22 52 42