BREVE INTRODUÇÃO
SOBRE “JavaScript”
Prof: Valter
• Vimos que HTML e CSS são fundamentais para a criação de páginas
web. O foco do HTML é o conteúdo enquanto o foco do CSS é a
formatação dessas páginas. Com o JavaScript podemos construir
páginas extremamente dinâmicas e interativas. O foco do JavaScript é
implementar o comportamento ou a inteligência das páginas web.
Há duas formas de associar código JavaScript e documentos
HTML:
INTRODUÇÃO AO JAVASCRIPT
• JavaScript é uma linguagem de programação voltada para ambiente web que tem como
objetivo "interagir" com a página HTML.
• Inicialmente JavaScript não era JavaScript, mas sim LiveScript, uma tecnologia criada pela
Netscape, quando ela estava desenvolvendo a versão 2.0 de seu navegador. Ela se
destacou principalmente pelo fato de não precisar ser compilada (interpretada), sendo
adicionada no documento HTML e de seus scripts não serem lentos, uma vez que eles
não precisavam ser executados no servidor, mas sim no PC do usuário que estava
acessando a página. Na época, não houve muito interesse pelo LiveScript, pois havia um
grande marketing em relação a linguagem Java, criada pela Sun Microsystems há 3 anos
e que oferecia um potencial muito maior que o LiveScript.
• Para aproveitar deste marketing, a Netscape tornou o Netscape 2.0 compatível com a
linguagem Java e deu apoio a Sun Microsystems para reestruturar o LiveScript de acordo
com a linguagem Java. Naquele momento, o LiveScript se tornou JavaScript.
• A consequência desta mudança foi em criar uma linguagem de script que conseguiu unir
os dois universos: um simples como LiveScript e outro robusto, poderoso e "conhecido"
como Java.
• A partir da versão 2.0 do Netscape e da versão 3.0 do Internet Explorer, todo navegador
web suporta JavaScript e desde então o JavaScript tem ganhado grandes evoluções. Hoje
o JavaScript é um padrão aberto e empresas de todo o mundo o suportam.
JAVA É DIFERENTE DE JAVASCRIPT
• Apesar dos nomes bem parecidos, Java não é o mesmo que JavaScript. Estas são duas
técnicas diferentes de programação na Internet. Java é uma linguagem de programação.
JavaScript é uma linguagem de hipertexto.
• A linguagem de programação JavaScript, desenvolvida pela Netscape, Inc., não faz parte
da plataforma Java.
• JavaScript não cria applets ou aplicativos independentes. Em sua forma mais comum
hoje, JavaScript reside dentro de documentos HTML e pode fornecer níveis de
interatividade com páginas da Web que não podem ser conseguidos com HTML simples.
• As diferenças principais entre Java e JavaScript estão listadas. Java é uma linguagem de
programação OOP, ao passo que Java Script é uma linguagem de scripts OOP. Java cria
aplicativos executados em uma máquina virtual ou navegador, ao passo que o código
JavaScript é executado apenas em um navegador.
• O código Java precisa ser compilado, ao passo que os códigos JavaScript estão totalmente
em texto, apenas interpretado.
• Eles requerem plug-ins diferentes.
A TAG SCRIPT
• O console nos permite testar códigos diretamente no navegador.
Porém, não podemos pedir aos usuários do site que sempre abram o
console, copiem um código e colem para ele ser executado.
• Para inserirmos um código JavaScript em uma página, é necessário
utilizar a tag <script>:
<script>
alert("Olá, Mundo!");
</script>
JavaScript interno
• A tag <script> pode ser declarada dentro da tag <head> assim como na tag <body>,
mas devemos ficar atentos, porque o código é lido imediatamente dentro do
navegador. Veja a consequência disso nos dois exemplos abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Aula de JS</title>
<script> alert("Olá, Mundo!"); </script>
</head>
<body>
<h1> JavaScript </h1>
<h2> Linguagem de programação</h2>
</body>
</html>
• Repare que, ao ser executado, o script trava o processamento da página.
Imagine um script que demore um pouco mais para ser executado ou que
exija alguma interação do usuário como uma confirmação. Não seria interessante
carregar a página toda primeiro antes de sua execução por uma questão de
performance e experiência para o usuário?
• Para fazer isso, basta removermos o script do <head>, colocando-o no final do
<body>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aula de JS</title>
</head>
<body>
<h1>JavaScript</h1>
<h2> Linguagem de Programação </h2>
<script> alert("Olá, Mundo!");</script>
</body>
</html>
• Devemos sempre colocar o script antes de fecharmos a tag </body> ?
Na maioria esmagadora das vezes sim.
JAVASCRIPT EM ARQUIVO EXTERNO
Se o mesmo script for utilizado em outra página, como fazemos? Imagine ter
que reescrever o script toda vez que ele for necessário. Para não acontecer
isso, é possível importar scripts dentro da página utilizando também a tag
<script>:
<script type="text/javascript“ src="js/[Link]"> </script>
alert("Olá, Mundo!");
Com a separação do script em arquivo externo é possível reaproveitar
alguma funcionalidade em mais de uma página.
MENSAGENS NO CONSOLE
É comum querermos dar uma olhada no valor de alguma varíavel ou
resultado de alguma operação durante a execução do código. Nesses
casos, poderíamos usar um alert. Porém, se esse conteúdo deveria
somente ser mostrado para o desenvolvedor, o console do navegador
pode ser utilizado no lugar do alert para imprimir essa mensagem:
var mensagem = "Olá mundo";
[Link](mensagem);
Operadores
• Para manipular os valores das variáveis de um programa, devemos utilizar
os operadores oferecidos pela linguagem de programação adotada. A
linguagem JavaScript possui diversos operadores e os principais são
categorizados da seguinte forma:
• Aritmético: + - * / %
• Atribuição: = += -= *= /= %= ++ --
• Relacional: == != < <= > >=
• Lógico: && ||
Aritméticos
• Os operadores aritméticos funcionam de forma muito semelhante
aos operadores da matemática. Os operadores aritméticos são:
• Adição+
• Subtração
• Multiplicação*
• Divisão/
• Módulo%
Variáveis
• Assim como qualquer linguagem de programação, JavaScript permite a
criação de variáveis através da palavra chave var. Toda variável deve ter um
nome (identificador).
var idadeDoJonas = 30;
var precoDoProduto = 28.75;
var nomeDoInstrutor = "Marcelo Martins";
var acessoLiberado = true;
LINGUAGENS DE PROGRAMAÇÃO FRACAMENTE E FORTEMENTE TIPADAS
• Linguagem fortemente tipadas, são linguagens de programação que cada
variável do programa, representa um tipo bem definido, ou seja
explicitamente você será obrigado a declarar o tipo da variável ao qual
estará declarando e caso tente fazer operações com variáveis de tipos
diferentes precisará fazer conversões, caso contrário irá acontecer erros
em seu código.
Exemplo de declaração de variáveis fortemente tipadas:
Inteiro contador = 1;
Caracter sexo = ‘F’;
String nome = “Jonas”;
• Já nas linguagens de programação que são classificadas como Linguagem
de Programação Fracamente Tipada ou de tipagem dinâmica, não
precisamos colocar o tipo da variável antes de seu identificador, além do
tipo da variável ser modificado em tempo de execução sem precisar fazer
conversão, ou seja o tipo da linguagem é modificada automaticamente
segundo o valor que você armazena na mesma.
idade = “18” - (tipo String);
idade = 18 - (agora a varável idade é do tipo inteiro);
DECLARANDO OU CRIANDO UMA VARIÁVEL JAVASCRIPT
• Diferente da maioria das linguagens o JavaScript define as variáveis
dinamicamente, portanto ao atribuir uma variável ele escolhe o tipo
conforme o valor passado para a variável, não sendo necessário especificar
o mesmo.
Existem dois tipos de sintaxe de declaração de variável em JavaScript que
são:
var nome-da-variável = valor-da-variável; nome-da-variável = valor-da-variável;
TIPOS DE VARIÁVEIS JAVASCRIPT
• Como já mencionado, no JavaScript não declaramos explicitamente o tipo
de uma variável. Por exemplo, se a variável recebe um número inteiro
declaramos, por exemplo, int x, ou se ela recebe um número real
declaramos float y, mas no JavaScript isso não acontece. O tipo de uma
variável é definido dinamicamente, não precisando o desenvolvedor
especificar o seu tipo.
TRABALHANDO COM STRING E NÚMEROS EM JAVASCRIPT
CONCATENAÇÃO DE STRINGS
• Como vimos anteriormente, o operador + é utilizado para realizar
soma aritmética. Mas, ele também pode ser utilizado para concatenar
strings. Veja um exemplo:
• var s1 = "Marcelo";
• var s2 = " ";
• var s3 = "Martins";
• // "Marcelo Martins"
• var s4 = s1 + s2 + s3;
TRABALHANDO COM OUTROS TIPOS DE DADOS JAVASCRIPT
• Agora, vamos descrever outros tipos de dados ou variáveis
suportadas no JavaScript.
• Booleanos: suportam dois valores true/false (verdadeiro ou falso).
Exemplo:
• Constante: Valor que não se altera no decorrer do código. Exemplo:
CONTROLE DE flUXO
If e else
• O comportamento de uma aplicação pode ser influenciado por
valores definidos pelos usuários. Por exemplo, considere um sistema
de cadastro de produtos. Se um usuário tenta adicionar um produto
com preço negativo, a aplicação não deve cadastrar esse produto.
Caso contrário, se o preço não for negativo, o cadastro pode ser
realizado normalmente.
• O comando if permite que valores booleanos sejam testados. Se o
valor passado como parâmetro para o comando if for true, o bloco do
if é executado. Caso contrário, o bloco do else é executado. O
comando else assim como o seu bloco são opcionais.
If e else
if (preco < 0) {
alert(’O preço do produto não pode ser negativo’);
} else {
alert(’Produto cadastrado com sucesso’);
}
while
• Em alguns casos, é necessário repetir um determinado trecho de
código várias vezes. Por exemplo, suponha que seja necessário exibir
5 vezes a mensagem: “Bom Dia”. Podemos resolver essa tarefa como
seguinte código JavaScript.
[Link]("Bom Dia");
[Link]("Bom Dia");
[Link]("Bom Dia");
[Link]("Bom Dia");
[Link]("Bom Dia");
while
• Se ao invés de 5 vezes fosse necessário exibir 100 vezes a mensagem
“Bom Dia”, já seriam 100 linhas de código JavaScript. É muito
trabalhoso utilizar essa abordagem para solucionar esse problema.
• Através do comando while, é possível executar várias vezes um
determinado trecho de código.
var contador = 0;
while(contador < 100) {
[Link]("Bom Dia");
contador++;
}
while
• Avariável contador indica o número de vezes que a mensagem“Bom
Dia” foi exibida. O operador ++ incrementa a variável contador a cada
iteração. O parâmetro do comando while deve ser um valor
booleano.
for
• O comando for é análogo ao while. A principal diferença entre esses
dois comandos é que o for recebe três argumentos.
for
for (var contador = 0; contador < 100; contador++) {
[Link]("Bom Dia");
•}
Cria um arquivo chamado [Link]
Adicione um arquivo chamado [Link]
Cria um arquivo chamado [Link]
Cria um arquivo chamado [Link]
exibe-nome
• <!DOCTYPE html>
• <html lang="pt-br">
• <head>
• <meta http-equiv="Content -Type" content="text/html; charset=UTF-8">
• <title>TLP - JavaScript</title>
• <script type="text/javascript" src="[Link]"></script>
• </head>
• <body>
• </body>
• </html>
exibe -1-ate -100
• <!DOCTYPE html>
• <html lang="pt-br">
• <head>
• <meta http-equiv="Content -Type" content="text/html; charset=UTF-8">
• <title>TLP - JavaScript</title>
• <script type="text/javascript" src="exibe -1-ate -[Link]"></script>
• </head>
• <body>
• </body>
• </html>