PW I - Aula 07 - JavaScript

JavaScript é uma linguagem de programação essencial para a criação de páginas web interativas, permitindo a implementação de elementos dinâmicos. Criado por Brendan Eich na Netscape, o JavaScript é frequentemente confundido com Java, mas serve a propósitos diferentes. O documento também inclui exemplos práticos de código e exercícios para praticar a aplicação de JavaScript em formulários e interações com o usuário.

Enviado por

Jeremias O Touro

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

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

0% acharam este documento útil (0 voto)

13 visualizações23 páginas

PW I - Aula 07 - JavaScript

Enviado por

Jeremias O Touro

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

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

Você está na página 1/ 23

Introdução a Programação WEB

JavaScript

JavaScript é uma linguagem de programação que permite a você implementar itens

complexos em páginas web — toda vez que uma página da web faz mais do que

simplesmente mostrar a você informação estática — mostrando conteúdo que se atualiza

em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você

pode apostar que o JavaScript provavelmente está envolvido. É a terceira camada do bolo

das tecnologias padrões da web.

Origem

O JavaScript não foi criado pelo W3C, como muitos pensam. Na verdade ele foi criado por um cara

chamado Brendan Eich na Netscape (um dos precursores dos navegadores web). Ele se chamava

LiveScript, mas logo seu nome foi mudado para JavaScript.

A linguagem JavaScript é uma tecnologia para desenvolvimento para página WEB interpretadas

somente pelos navegadores. Enquanto a linguagem Java é utilizada para o desenvolvimento de

programas, aplicativos e também aplicações web. Mas ao contrário da linguagem JS, seu código

precisa ser compilado em software específico para depois ser executado.

Javascript jscript01.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> JavaScript </title>
<meta charset="UTF-8">
<script>
document.write("Este texto é escrito pelo <br> JavaScript");
</script>
</head>
<body>
</body>
</html>
Javascript – tag html jscript02.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> JavaScript e html </title>
<meta charset="UTF-8">
<script>
document.write("<h1>Este texto foi escrito pelo <br>
JavaScript</h1>");
</script>
</head>
</html>
Funções jscript03.html

<html lang="pt-br">
<head>
<title> JS Funções </title>
<script>
function message()
{
alert("Esta caixa de alerta foi executado pelo evento onload()");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Variáveis jscript04.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> Variáveis </title>
<meta charset="UTF-8">
<script>
var nome="João";
document.write("Nome: " + nome+ "<br>");
</script>
</head>
</html>
Evento onclick jscript05.html

<html lang="pt-br">
<head>
<title> Evento onclick </title>
<script>
function alerta()
{
alert("Olá");
}
</script>
</head>
<body>
<input type="button" onclick="alerta()" value="Alerta">
</body>
</html>
Prompt de Entrada jscript06.html

<html lang="pt-br">
<head>
<title> Prompt Entrada</title>
<script>
var nome=prompt("Digite o seu nome","");
document.write(nome+", seja bem vindo!");
</script>
</head>
<body>
<h1> Prompt de Entrada </h1>
</body>
</html>
Form Calcular Média jscript07.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> JavaScript </title>
<meta charset="UTF-8">
<script>
function media()
{
var nota1=0,nota2=0,media=0;
nota1=parseFloat(form1.nota1.value);
1
Form Calcular Média jscript07.html

nota2=parseFloat(form1.nota2.value);
media=(nota1+nota2)/2;
form1.total.value=media.toFixed(2);
}
</script>
</head>
<body>
<h1> Formulário de Notas </h1>
<br>
<form name="form1" method="POST">
<label> Nota1: </label> 2
Form Calcular Média jscript07.html

<input type="number" name="nota1" onchange="media()">

<br><br>
<label> Nota2: </label>
<input type="number" name="nota2" onchange="media()">
<br><br>
<label> Média: </label>
<input type="number" name="total" size=04 readonly=true>
</form>
</body>
</html>
3
Form Validar Campo jscript08.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> JavaScript </title>
<meta charset="UTF-8">
<script>
function verificar() {
var nome=frm_cadastro.txt_nome.value;
if (nome=="")
{
alert("Campo nome vazio, favor preencher"); 1
Form Validar Campo jscript08.html

return false;
}
if (nome.length<3) {
alert("Favor completar o campo nome ");
return false;
}
return true;
}
</script>
</head>
<body> 2
Form Validar Campo jscript08.html

<h1> Formulário de Cadastro </h1>

3
Var Data Sistema jscript09.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title> JavaScript </title>
<meta charset="UTF-8">
<script>
function DataHora(){
var data = new Date();
horas = data.getHours();
mins = data.getMinutes()
1
Var Data Sistema jscript09.html

document.write(horas +" hs e "+mins +" mins");

}
</script>
</head>
<body onload="DataHora()">
</body>
</html>

2
Exercício 01
1) Criar uma página que permita ao usuário digitar o seu nome no
momento em que a página for carregada (onload), exibindo a cortesia
que indica se é bom dia, boa tarde ou boa noite, seguido do nome do
usuário solicitado. De acordo com o horário do sistema operacional.

Exemplo: Bom dia, João.

Exercício 02
2) Criar uma página que permita indique ao seu usuário no momento
em que for carregada à página (onload), se o estabelecimento esta
aberto ou não baseado no horário do sistema operacional, lembrando
que o horário de funcionamento da empresa será das 08:00 as 12:00 e
13:00 as 17:00. Simplificando o processo a mensagem deverá ser Aberto
ou Fechado.
Exercício 03
3) Crie uma página que solicite através de um formulário o nome do
aluno, a disciplina desejada (caixa de lista) , nota 1 e nota 2, ao clicar no
botão Verificar a função javascript irá mostrar através de um alerta
que o aluno foi aprovado ou não, sendo que para ser aprovado a média
deverá ser maior ou igual a 7.
Exercício 04
4) Construa um formulário para cadastrar usuários, onde deverá
solicitar o campo nome do usuário, senha de acesso, redigite a sua
senha e o botão Enviar. A página deverá ter uma função Javascript para
verificar a obrigatoriedade do campo Nome e verificar se as senhas são
iguais.
Exercício 05
5) Construa um formulário para o cadastro de novos alunos em uma
Auto Escola, tendo os seguintes campos obrigatórios: Nome completo,
idade, e-mail e telefone. Mas o cadastro só será aceito para os alunos
com a idade superior a 18 anos. Caso seja menor, favor alertar que
aguarde a idade mínima exigida.
Exercício 06
6) Construa um formulário para calcular as despesas médias do usuário.
Onde o usuário deverá digitar a sua Renda Mensal e os seguinte gastos:
Luz, Agua, Telefone, Cartão de Crédito e Supermercado. Sendo que a
página deverá calcular o Saldo (restante) do cálculo da Renda Mensal
menos a soma de todos os gastos: Renda Mensal – (Luz + Agua +
Telefone + Cartão de Crédito + Supermercado).