Tutorial Slide Javascript

1
Criação de Slide Show com HTML5,

CSS3 e JavaScript
Como inserir o JavaScript no HTML

A inserção do JavaScript pode ser de 3 formas:
Inserindo o código na “cabeça” da página:

Cria-se uma tag <script>, com o atributo 'type' com propriedade 'text/javascript' (com
o HTML5 este atributo passou a não ser obrigatório), então, coloca-se o código
JavaScript dentro dessa tag.
No Código 1 ao se abrir o navegador, carregará junto uma janela modal com a

mensagem Olá Mundo!, Figura 1, resultado da renderização do JavaScript no
navegador.
1. <head>
2. <script type="text/javascript">
3. alert('Olá mundo!');
4. </script>
5. </head>
Código 1 – Código JavaScript inline.
Figura 1 – Janela modal no navegador

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Utilize à vontade, mas, por favor, divulgue a autoria.
www.furst.com.br – cursos@furst.com.br – alexandre.furst@prof.unibh.br

2
Inserindo o código nas tags no corpo do HTML (inline):

Eventos, funções e outros conteúdos podem ser inseridos inline no código HTML, no
Código 2, a tag <body> recebe o atributo onLoad, evento de carregar em JavaScript e
este evento recebe a propriedade “slide1( )”.
1. <body onLoad="slide1()">
2. <img src="imagens/slide/tecnologia_web.jpg" id="slide" />
3. </body>
Na renderização do código acima o evento onLoad (ao carregar) define que assim que o
conteúdo do corpo da página for carregado, será exibida a imagem
“tecnologia_web.jpg”.
Vinculando um arquivo JavaScript externo à página HTML:

Essa forma é bem parecida com a inserção de códigos JavaScript, a maior diferença é que
não se coloca o código JavaScript dentro da tag, visto que esse código estará em um
arquivo externo. Assim, simplesmente é preenchido o atributo 'src' da tag <script> com o
caminho para o arquivo em questão.
Essa forma também permite carregar arquivos JavaScript sem ter que baixá-los para o seu
projeto. Isso é bastante utilizado como uma forma de fazer com que arquivos que são
usados por muitos projetos, como por exemplo, arquivos em jQuery, fiquem armazenados
em cache, sendo então carregados de forma mais rápida.
O Código 3, a ser inserido no HTML entre as tags <head>.....</head>.
1. <head>
2. <script type="text/javascript" src="js/meu-slide.js"></script>
3. </head>
Código 3 – Link com arquivo JavaScript externo.



3
Qual é o melhor local para colocar a tag <script>?

No geral, o melhor local para ser inserida uma tag <script>...</script> é antes do
fechamento da tag <body>. Isso se dá devido ao fato de que o browser, ao encontrar
uma tag <script>, precisa executar o que foi especificado ou dentro da tag ou pelo
atributo “src”, bloqueando assim a renderização do restante da página.
Assim, o código JavaScript é executado assim que é interpretado, logo, se existem

elementos abaixo do código, que serão manipulados por esse código (por exemplo,
quer-se remover todos os links de uma determinada página e os links encontram-se
abaixo da tag <script>), é necessário adicionar eventos indicando que a página já foi
carregada completamente, caso contrário, é bem possível que o código não funcione
corretamente.
Exemplo 1: Criando Slide Automático simples

Nesta primeira parte do tutorial, será ensinado como criar slides automáticos, bem
simples, somente com JavaScript e HTML ou seja, aqueles que independem do usuário,
a partir das 5 imagens usadas no projeto Falando de TI. No código visualizado abaixo
foram criadas 5 funções (slide1, slide2, slide3, slide4 e slide5) Cada uma destas funções
define, a partir de um id e do atributo “src” qual imagem será carregada a cada segundo,
tempo definido pela propriedade de objeto setTimeOut serão trocadas entre si e após
carregar a última imagem, retornará a primeira, fazendo, assim, um loop.
1. Insira o script abaixo entre as tags <head>...</head> do arquivo index.html.

<script type="text/javascript">
//insercao do slide 1 – comentario de uma linha inicia com 2 barras //

function slide1(){
document.getElementById('slide').src="imagens/slide/tecnologia_web.jpg";
setTimeout("slide2()",1000)
}
/*a função slide1, identifica no documento o elemento com id ‘slide’ e busca o

caminho da imagem tecnologia web, o tempo de saída ou troca de imagem é de 1
segundo – comentários com mais de uma linha, usa-se barra e asterisco
/*.......*/
//insercao do slide 2
function slide2(){
document.getElementById('slide').src="imagens/slide/business_intelligence.



4
jpg";
setTimeout("slide3()", 1000)
function
slide3(){document.getElementById('slide').src="imagens/slide/carreira.jpg";
function slide4(){
document.getElementById('slide').src="imagens/slide/certificacao.jpg";
//insercao do slide 5 e retorno ao slide 1 fazendo o loop do slide

function slide5(){
document.getElementById('slide').src="imagens/slide/fale.jpg";
</script>
2. Acrescente à tag <body>….</body> o atributo onLoad, como no Código 4.
3. <body onLoad="slide1()">
4. <img src="imagens/slide/tecnologia_web.jpg" id="slide" />
5. </body>
Lembre-se de colocar na tag <img/> o caminho correto das imagens do site final que
está sendo desenvolvido.
O slide está pronto, teste-o.



Tutorial Slide Javascript

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

Tutorial Slide Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

1

Criação de Slide Show com HTML5,

Como inserir o JavaScript no HTML

Inserindo o código na “cabeça” da página:

No Código 1 ao se abrir o navegador, carregará junto uma janela modal com a

Código 1 – Código JavaScript inline.

Figura 1 – Janela modal no navegador

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Inserindo o código nas tags no corpo do HTML (inline):

Código 2 – Código JavaScript inline.

Vinculando um arquivo JavaScript externo à página HTML:

O Código 3, a ser inserido no HTML entre as tags <head>.....</head>.

Código 3 – Link com arquivo JavaScript externo.

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Qual é o melhor local para colocar a tag <script>?

Assim, o código JavaScript é executado assim que é interpretado, logo, se existem

Exemplo 1: Criando Slide Automático simples

1. Insira o script abaixo entre as tags <head>...</head> do arquivo index.html.

//insercao do slide 1 – comentario de uma linha inicia com 2 barras //

/*a função slide1, identifica no documento o elemento com id ‘slide’ e busca o

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

//insercao do slide 5 e retorno ao slide 1 fazendo o loop do slide

2. Acrescente à tag <body>….</body> o atributo onLoad, como no Código 4.

Código 4 – Código JavaScript inline.

O slide está pronto, teste-o.

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Você também pode gostar