Aula - 08 - Introdução Java Script PDF

PROGRAMAÇÃO
WEB
➢ Introdução JavaScript
➢ Conceitos Básicos
➢ Operadores
➢ Tipos de Variáveis
➢ Exercícios
Prof.William José
Baseado nos Materiais do Prof.Alcides Teixeira
JAVASCRIPT
• Linguagem integrada ao navegador.
• Usa o chamado "modelo de execução controlado por eventos", ou seja, o código

JavaScript só é executado quando o evento ao qual está associado é acionado,
mas, em alguns casos, podemos inserir o código sem a associação a eventos e
o mesmo é executado conforme o navegador interpreta a página.
• Processamento do lado cliente, no navegador.
• É uma linguagem interpretada, diferente de outras linguagens que fazem o

processo de compilação antes de executar o programa, como por exemplo a
linguagem Java.
• O JavaScript é uma linguagem capaz de simular alguns conceitos da orientação

a objetos, então podemos dizer que o JavaScript suporta o desenvolvimento
utilizando alguns conceitos da Programação Orientada a Objetos.
COMO INSERIR UM CÓDIGO JAVASCRIPT NA
PÁGINA?
• Podemos inserir nossos códigos JavaScript das seguintes formas:
– Dentro do corpo da página <body>....</body>
– Dentro do cabeçalho <head>....</head>
– Dentro de um marcador html
– Em um arquivo separado do html: este arquivo deve ter a

extensão .js
JAVASCRIPT DENTRO DO BODY E
HEAD
• Se fizermos uma comparação com CSS, esse modo de
inserir JavaScript em uma página, seria o modo incorporado.
• Dentro do body ou do head, utilizamos a tag <script>
• Ex:
<html>
<head>
<title>Exemplo JavaScript</title>
<script type="text/javascript">
alert("Eu estou no cabeçalho.");
</script>
</head>
<body>
document.write("<b class= ' teste ' >Eu estou no corpo do documento.</b>");
</script>
</body>
</html> exemplo1.html
OBS: Podemos colocar tags dentro das aspas inclusive com os atributos class e id.
JAVASCRIPT EM UMA TAG
• Quando inserimos um código JavaScript em uma tag, este é

associado a um evento. Os eventos serão vistos mais
adiante, por enquanto faremos um exemplo simples com o
evento onclick que é acionado quando o usuário clica no
elemento (esse uso inline deve ser evitado).
• Ex:
<html>
<head>
</head>
<body>
<input type="button" value="Clique aqui"
Verifique o uso de
onclick="alert('Olá......')"> aspas duplas " e
</body> simples '
</html>
exemplo2.html
ARQUIVO JAVASCRIPT
• Assim como em CSS, também podemos criar um arquivo

separado do html com nossos códigos em JavaScript. Esse
arquivo deve ser salvo com a extensão .js e é chamado no
cabeçalho da página com a tag <script>
• Ex: Código dentro do arquivo ex3.js

<html>
<head> alert("Estou em um arquivo .js");
<script type="text/javascript" src="ex3.js"></script>
</head>
<body>
Conteúdo da página. Também podemos fazer aqui chamadas para
blocos de códigos do arquivo .js.
</body>
exemplo3.html
</html>
ex3.js
CONCEITOS BÁSICOS
• Variáveis
– Toda variável deve começar com uma letra ou um underscore("_");
– Caracteres subsequentes devem ser letras ou números;
– Não deve conter espaço em branco ou caracteres especiais;
– Não deve ser uma palavra reservada.
• JavaScript é case-sensitive, logo as variáveis abaixo são

todas diferentes:
– quantidade
– QUANTIDADE
– Quantidade
– QuAnTidAdE
TIPOS DE VARIÁVEIS
• JavaScript é uma linguagem de tipos de variáveis flexíveis,
ao contrário de outras linguagens que exigem a declaração
de uma variável com um tipo de dado definido.
• Não precisamos definir o tipo de uma variável, com isso

podemos mudar seu valor de texto para número, por
exemplo, durante a execução do script (essa prática deve
ser evitada).
• Ex:
– var nome="Fulano"; Nos dois primeiros exemplos,
ou declaramos a variável nome já com
– nome="Fulano"; a informação; no último exemplo,
ou declaramos a variável nome vazia.
– var nome;
COMENTÁRIOS
• É uma boa prática inserirmos comentários em

nossos códigos; em JavaScript podemos fazer isso
de duas formas:
• Para Comentários de várias linhas:
/*
Inserimos aqui Os comentários são anotações,
nossos comentários observações, ignoradas pelo
interpretador de JavaScript.
em várias linhas
*/
• Para Comentários de uma única linha:
//Aqui inserimos somente uma linha de comentário
OPERADORES ARITMÉTICOS
• Para você verificar a tabela abaixo, declaramos uma variável
x igual a 10
• var x=10;
OPERADORES DE ATRIBUIÇÃO
• Para você verificar a tabela abaixo, declaramos duas
variáveis:
– var x=10;
– var y=2;
CONCATENAÇÃO DE STRINGS
• Também usamos o operador "+" para concatenar Strings (textos) em
JavaScript
• Ex:
var x="Bom ";
var y="dia";
var z = x + y;
// após a execução o resultado armazenará: z="Bom dia"
• Cuidado, quando usamos o operador "+" com números e textos, o
resultado é sempre texto;
var x=4;
var y="a";
var z=x+y; // o resultado será z="4a"
var x="4";
var y="4";
var z=x+y; // o resultado será z="44"
CAIXA DE DIÁLOGO
• São meios básicos para entrada e saída de informação
• Caixa de alerta
Caixa de diálogo para exibir mensagens, possui somente um botão OK.
Sintaxe:
alert("Mensagem");
• Caixa de confirmação
Caixa de diálogo básica para tomada de decisão, possui dois botões, o botão OK
(retorna true) e o botão CANCELAR (retorna false). Os valores retornados
devem ser armazenados em uma variável.
Sintaxe:
variável = confirm("Mensagem");
• Caixa de entrada de dados

Caixa de diálogo para entrada de dados básica, o valor deve ser armazenado em
uma variável, o valor digitado sempre será texto, logo, para operações
matemáticas precisamos converter os valores digitados para números.
Sintaxe:
variável = prompt("Mensagem","valor inicial opcional");
CAIXA DE DIÁLOGO
<html>
<head>
<title>JS</title>
<script language="javascript">
//Caixa de mensagem
alert("Caixa de mensagem básica");
//Caixa de confirmação
var x;
x = confirm("Quer continuar?");
//Caixa de mensagem
alert("Você escolheu: " + x);
//Caixa de entrada
var nome;
nome = prompt("Digite seu nome", "");
//Caixa de mensagem
alert("Seu nome é :" + nome);
</script>
</head>
<body>
</body>
</html>
exemplo4.html
ESCREVENDO NA PÁGINA
• Além da caixa de diálogo "alert", temos disponível também em
JavaScript outra forma de mostrar mensagens ou elementos utilizando o
objeto document, que representa a página Web. Neste caso, as
informações são acrescentadas na página (também nos permite
ADICIONAR TAGS HTML).
SINTAXE:
DOCUMENT.WRITE("CONTEÚDO"); OU
DOCUMENT.WRITELN("CONTEÚDO");
EXEMPLO:
VAR NOME="LUCCA";
DOCUMENT.WRITE("<B>NOME:" + NOME + "</B>");
CONVERSÃO DE TIPOS
• Como comentado anteriormente, quando utilizamos a caixa

de prompt para entrada de dados do usuário, ou até mesmo
através de campos de texto de formulários, os valores lidos
são sempre textos.
• Caso seja necessário realizar alguma operação matemática
com os valores lidos, precisamos inicialmente converte-los
em números.
• Para isso temos duas funções em JavaScript que convertem
para inteiro ou para real.
CONVERSÃO DE TIPOS
• Para converter um texto em número inteiro

utilizamos a função parseInt
• Sintaxe: Valor a ser convertido.
variável = parseInt(texto [, base]);

Base da conversão (opcional).
• Para converter um texto em número real (float),

utilizamos a função parseFloat.
• Sintaxe: Valor a ser convertido.
variável = parseFloat(texto);
CONVERSÃO DE TIPOS
EXEMPLOS
//modo 1
var a;
var aux = prompt("Digite o valor de a","");
a = parseInt(aux);
//modo 2
var b = parseInt(prompt("Digite o valor de b",""));
//mostra o cálculo
alert(a + " + " + b + " = " + (a+b));
</script>
exemplo5.html
DESENVOLVIMENTO EM CAMADAS
• Vimos até o momento como trabalhar com HTML, CSS e JavaScript. Nas
formas de uso do CSS e JavaScript foram demonstradas algumas
possibilidades para a inserção dessas tecnologias dentro da página HTML.
Dentre essas possibilidades devemos sempre procurar separar os códigos, ou
seja, criar arquivos separados para cada tecnologia, isso seria o
desenvolvimento em camadas.
• São três camadas que estaremos utilizando:
– Camada de estrutura (arquivo HTML)

– Camada de apresentação (arquivo CSS, .css)
– Camada de comportamento (arquivo JavaScript, .js)
OBS: por questões de facilidade na manipulação dos arquivos, os exemplos

serão trabalhados utilizando o JS dentro da página HTML, porém, em
trabalhos reais utilize a distribuição em camadas, ou seja, cada tecnologia no
seu respectivo arquivo.
HORA DE EXERCITAR
6) Uma empresa irá dar 25% de aumento para todos os funcionários, você
foi contratado para desenvolver um programa que leia o salário atual do
funcionário. Após a leitura, calcular e mostrar na própria página o salário
atual em uma linha e em outra linha o salário com o aumento de 25%.
7) Crie um script que pergunte o nome do usuário, e 4 números , calcule e

mostre na própria página o nome do usuário e a média desses 4 números.
8) Crie um script que calcule as raízes de uma equação de 2º grau ax2 + bx

+ c. Supor que as raízes são reais. Para calcular a raiz você pode utilizar a
função Math.sqrt (valor) – função própria do JavaScript. Essa função retorna
o resultado da raiz quadrada que deverá ser guardado em alguma variável.
Neste exemplo vamos supor que sempre teremos um delta válido.
EXERCÍCIOS
• 2) Crie uma classe com o nome de meunome em CSS e faça as configurações
abaixo:
– Tipo da fonte = Verdana
– Tamanho da fonte = 50pt
– Cor de fundo = preto
– Cantos arredondados = 130px
– Tamanho da caixa = 500px
– Cor da letra = branco
– Alinhamento do texto = centro
• Dentro do corpo da página (body) crie um script JavaScript que deverá escrever na
página uma DIV com o uso da classe anterior e como mensagem o seu nome.
Lembre-se que comandos HTML na linguagem JavaScript devem estar sempre
dentro de aspas "<div>.....</div>".
EXERCÍCIOS
3) Faça um script que leia um número inteiro, em seguida calcule e mostre o dobro
desse número.
4) Faça um script para somar dois números informados pelo usuário.
5) Faça um script para calcular o quadrado de um número informado pelo usuário.
6) Faça um script que leia três notas reais, calcule e mostre a média dessas notas.
7) Faça um programa que receba três números inteiros, calcule e mostre a soma
desses números.
8)Faça um script para calcular e mostrar a área de um triângulo (área = (base *

altura) /2.
EXERCÍCIOS
9)Faça um script que leia o nome de uma pessoa, o ano de nascimento dessa
pessoa e o ano atual, calcule e mostre a idade dessa pessoa e seu nome em
linhas separadas.
10)Faça um script que receba a altura de um degrau de uma escada e a altura

que um pedreiro deseja alcançar utilizando essa escada, calcule e mostre
quantos degraus ele deverá subir para atingir seu objetivo, os valores fornecidos
devem ser em metros.
11)Escreva um script que leia três nomes e em seguida os imprima, mostre um

nome em cada linha.
CONTATO
E-mail
w.santos@ctrlplay.com.br
w.santos1407@hotmail.com
WhatsApp
(011)94273-7796

Aula - 08 - Introdução Java Script PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula - 08 - Introdução Java Script PDF

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMAÇÃO

• Linguagem integrada ao navegador.

• Usa o chamado "modelo de execução controlado por eventos", ou seja, o código

• Processamento do lado cliente, no navegador.

• É uma linguagem interpretada, diferente de outras linguagens que fazem o

• O JavaScript é uma linguagem capaz de simular alguns conceitos da orientação

– Dentro do corpo da página <body>....</body>

– Dentro do cabeçalho <head>....</head>

– Dentro de um marcador html

– Em um arquivo separado do html: este arquivo deve ter a

• Quando inserimos um código JavaScript em uma tag, este é

• Assim como em CSS, também podemos criar um arquivo

• Ex: Código dentro do arquivo ex3.js

• JavaScript é case-sensitive, logo as variáveis abaixo são

• Não precisamos definir o tipo de uma variável, com isso

• É uma boa prática inserirmos comentários em

• Caixa de entrada de dados

• Como comentado anteriormente, quando utilizamos a caixa

• Para converter um texto em número inteiro

variável = parseInt(texto [, base]);

• Para converter um texto em número real (float),

• São três camadas que estaremos utilizando:

– Camada de estrutura (arquivo HTML)

OBS: por questões de facilidade na manipulação dos arquivos, os exemplos

7) Crie um script que pergunte o nome do usuário, e 4 números , calcule e

8) Crie um script que calcule as raízes de uma equação de 2º grau ax2 + bx

4) Faça um script para somar dois números informados pelo usuário.

5) Faça um script para calcular o quadrado de um número informado pelo usuário.

8)Faça um script para calcular e mostrar a área de um triângulo (área = (base *

10)Faça um script que receba a altura de um degrau de uma escada e a altura

11)Escreva um script que leia três nomes e em seguida os imprima, mostre um

Você também pode gostar