Scribd
Carregar
4 visualizações

Aula 01 - JavaScript

Enviado por

João Vitor
Direitos autorais
© © All Rights Reserved
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
4 visualizações

Aula 01 - JavaScript

Enviado por

João Vitor
Direitos autorais
© © All Rights Reserved
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

Prof.º Germano Marcos J.

de Araújo
JavaScript

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Uma das mais populares do mundo

Linguagem de programação de alto nível

Fácil de aprender

Server-side

Client-side

JavaScript

Desktop Mobile

WEB

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Por que estudar JavaScript?


JavaScript é uma das 3 linguagens que todos os desenvolvedores da web devem aprender:

1. HTML para definir o conteúdo das páginas da web

2. CSS para especificar o layout das páginas da web

3. JavaScript para programar o comportamento das páginas da web

????????????????????????????????????????????????????????

• Como faço para obter o JavaScript?


Você não precisa obter ou baixar JavaScript.
• Onde posso baixar o JavaScript?
JavaScript já está sendo executado em seu navegador, em seu computador, em seu tablet e em seu smartphone.
• O JavaScript é grátis?
O JavaScript é de uso gratuito para todos.

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Cite 5 sites, jogos ou afins que utilizam JavaScript em suas bases de tecnologias.

É linguagem interpretada?

É Java ?

Onde inserir os códigos JavaScripts ?

O que é um script ?

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Onde inserir códigos JavaScript?

• A tag <script>
Em HTML, o código JavaScript é inserido entre as tags <script> e </script>.

• Exemplo
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Os exemplos antigos de JavaScript podem usar um atributo de tipo: <script type = "text / javascript">.

O atributo type não é obrigatório. JavaScript é a linguagem de script padrão em HTML.

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Funções e eventos JavaScript


Um function JavaScript é um bloco de código JavaScript que pode ser executado quando "chamado".
Por exemplo, uma função pode ser chamada quando ocorre um evento , como quando o usuário clica em um botão.

JavaScript em <head> ou <body>


Você pode colocar qualquer quantidade de scripts em um documento HTML.
Os scripts podem ser colocados na tag <body>, ou na tag <head> de uma página HTML, ou em ambas.

JavaScript em <head>
Neste exemplo, um JavaScript function é colocado na seção <head> de uma página HTML.
A função é invocada (chamada) quando um botão é clicado:

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Exemplo: JavaScript em <head>


<!DOCTYPE html>
<html>
<head>

<script>
function minhafuncao() {
document.getElementById(“exemplo").innerHTML = “Parágrafo editado.";
}
</script>

</head>

<body>

<h2>Exemplo JavaScript no HEAD</h2>


<p id="exemplo">Um parágrafo</p>
<button type="button" onclick=“minhafuncao()">Editar</button>
</body>

</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

JavaScript em <body>

Neste exemplo, um JavaScript function é colocado na seção <body> de uma página HTML.
A função é invocada (chamada) quando um botão é clicado:

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Exemplo: JavaScript em <body>


<!DOCTYPE html>
<html>

<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

JavaScript externo
Os scripts também podem ser colocados em arquivos externos:

Arquivo externo: myScript.js


function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

• Os scripts externos são práticos quando o mesmo código é usado em muitas páginas da web diferentes.
• Os arquivos JavaScript têm a extensão de arquivo .js

Para usar um script externo, coloque o nome do arquivo de script no atributo src (fonte) de uma tag <script>:

<script src="myScript.js"></script>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Exemplo: JavaScript externo


• Você pode colocar
uma referência de
script externa em
<head> ou <body>
como desejar.

• O script se
comportará como se
estivesse localizado
exatamente onde a
tag <script> está
localizada.

• Os scripts externos
não podem conter
tags <script>.

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Vantagens do JavaScript externo


Colocar scripts em arquivos externos tem algumas vantagens:

• Ele separa HTML e código


• Isso torna o HTML e o JavaScript mais fáceis de ler e manter
• Arquivos JavaScript em cache podem acelerar o carregamento da página

Para adicionar vários arquivos de script a uma página - use várias tags de script:

Exemplo:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referências Externas
Um script externo pode ser referenciado de 3 maneiras diferentes:
• Com um URL completo (um endereço da web completo)
• Com um caminho de arquivo (como / js /)
• Sem nenhum caminho
Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com
JavaScript

Este exemplo usa um URL completo para vincular a myScript.js:

Exemplo
<script src="https://www.w3schools.com/js/myScript.js"></script>

Este exemplo usa um caminho de arquivo para vincular a myScript.js:

Exemplo
<script src="/js/myScript.js"></script>

Este exemplo não usa nenhum caminho para vincular a myScript.js:

Exemplo
<script src="myScript.js"></script>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Saída de JavaScript

Possibilidades de exibição de JavaScript


JavaScript pode "exibir" dados de maneiras diferentes:

• Escrevendo em um elemento HTML, usando innerHTML.


• Escrevendo na saída HTML usando document.write().
• Escrevendo em uma caixa de alerta, usando window.alert().
• Escrevendo no console do navegador, usando console.log().

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Usando innerHTML
Para acessar um elemento HTML, JavaScript pode usar o método document.getElementById(id).
O atributo id define o elemento HTML. A propriedade innerHTML define o conteúdo HTML:
Exemplo
<!DOCTYPE html>
<html>
<body>

<h1>Minha primeira página WEB</h1>


<p>Meu primeiro parágrafo</p>

<p id="exemplo"></p>

<script>
document.getElementById("exemplo").innerHTML = 5 + 6;
</script>
Alterar a propriedade innerHTML de
um elemento HTML é uma maneira
</body>
comum de exibir dados em HTML.
</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Usando document.write ()
Para fins de teste, é conveniente usar document.write()
Exemplo
<!DOCTYPE html>
<html>
<body>

<h1>Minha primeira página WEB</h1>


<p>Meu primeiro parágrafo.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Usar document.write () após o carregamento de um documento HTML excluirá todos os HTML existentes :

Exemplo
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

O método document.write ()
deve ser usado apenas para
teste.

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Usando window.alert ()
Você pode usar uma caixa de alerta para exibir dados:
Exemplo
<!DOCTYPE html>
<html>
<body>

<h1>Minha primeira página WEB</h1>


<p>Meu primeiro parágrafo</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Você pode pular a palavra - chave window.

Em JavaScript, o objeto de janela é o objeto de escopo global, o que significa que variáveis, propriedades e métodos,
por padrão, pertencem ao objeto de janela. Isso também significa que especificar a palavra-chave window é
opcional:
Exemplo
<!DOCTYPE html>
<html>
<body>

<h1>Minha primeira página.</h1>


<p>Meu primeiro parágrafo.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Impressão JavaScript
• JavaScript não possui nenhum objeto de impressão ou método de impressão.
• Você não pode acessar dispositivos de saída de JavaScript.
• A única exceção é que você pode chamar o window.print() método no navegador para imprimir o conteúdo da
janela atual.
Exemplo
<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Imprimir esta página</button>

</body>
</html>

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


JavaScript

Prof.º Germano Marcos J. de Araújo E-mail: germano.mja@gmail.com


Prof.º Germano Marcos J. de Araújo

Você também pode gostar