Ir para conteúdo

Criação de site. Aula 02. Aplicando JavaScript.

Guest MrShewdor

Por Guest MrShewdor
em Arquivos

 Compartilhar

Posts Recomendados

Guest MrShewdor

Guest MrShewdor

Postado
Postado
Tutorial - Criação de site. Aula 01. Aplicando JavaScript.
Programador: Zuck
 
Aula 01: Clique aqui.
 
JavaScript: é uma linguagem de programação baseada em scripts.
 
Explicação: Vamos adicionar um javascript bem simples, mas legal e bem útil no site que começamos a criar na "Aula 01". O javascript que vamos adicionar tem a função de liberar o conteúdo do site somente quando a página estiver totalmente carregada.
 
Para adicionarmos um Javascript na página inicial sem precisamos criar em um arquivo .js separado, vamos precisar coloca-ló assim:
 
<script type="text/javascript">

Código javascript aqui dentro.

</script>

Código js: O código é esse:

function id(el) {
	return document.getElementById(el);
}
function hide(el) {
	id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
	id('all').style.display = 'block';//mostrar o site
	hide('loading');
}

Resultado: Então ficará assim:

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

Local: Vamos adicionar esse javascript abaixo de <head> e também abaixo de <title> mas vou adiciona-ló acima de <style> do site da aula anterior.

 

Exemplo: Site anterior:

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }
</style>

  </head>
  <body>
    <div id="texto">texto de exemplo</div>
    </body>
    </html>

Resultado: Site anterior com o javascript:

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }
</style>

  </head>
  <body>
    <div id="texto">texto de exemplo</div>
    </body>
    </html>

Imagem carregando: Para o site ficar mais legal irei adicionar uma imagem gif, para mostrar que o site está sendo carregado...

<img src="http://i.imgur.com/O5P6FUe.gif" alt="" id="loading" class="content"/>

CSS: Também adicionei alguns css para organizar a gif.

#loading { 
	display: block;
	width: 200px;
}

CSS adicionado: Então vamos adicionar o css no site:

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }

#loading { 
	display: block;
	width: 200px;
}
</style>

  </head>
  <body>
    <div id="texto">texto de exemplo</div>
    </body>
    </html>

Resultado: Pronto colocamos o #loading no css do site.

 

Adicionando imagem: Agora vamos colocar a imagem gif no site para mostrar que está carregando...

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }

#loading { 
	display: block;
	width: 200px;
}
</style>

  </head>
  <body>
    <div id="texto">texto de exemplo</div>
	
	<img src="http://i.imgur.com/O5P6FUe.gif" alt="" id="loading" class="content"/>

    </body>
    </html>

Resultado: Podem ver que já adicionei a "img" no site.

 

Importante: Agora vamos adicionar um "<section id="all">" para marcar a parte que será escondida enquanto o site carrega. No meu caso toda a parte que está o "texto de exemplo", ficará assim:

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }

#loading { 
	display: block;
	width: 200px;
}
</style>

  </head>
  <body>
  <section id="all">
    <div id="texto">texto de exemplo</div>
	</section>
	
	<img src="http://i.imgur.com/O5P6FUe.gif" alt="" id="loading" class="content"/>

    </body>
    </html>

Resultado: Podem ver que:

 

<section id="all">

 

</section>

 

Estão cobrindo a DIV texto, que será a parte que não mostrará enquanto carrega.

 

Depois iremos adicionar um js simples no final para mostrar a parte que foi escondida.

	<script type="text/javascript">
	hide('all');
    </script>

Javascript: Isso ficará em baixo da imagem gif, assim:

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }

#loading { 
	display: block;
	width: 200px;
}
</style>

  </head>
  <body>
  <section id="all">
    <div id="texto">texto de exemplo</div>
	</section>
	
	<img src="http://i.imgur.com/O5P6FUe.gif" alt="" id="loading" class="content"/>

	<script type="text/javascript">
	hide('all');
    </script>

    </body>
    </html>

Conclusão: Pronto galera, depois disso só abrir o site normal, se sua net for lenta e demorar pra carregar o site, ficará a imagem gif enquanto a página é carregada totalmente.

 

 

Resultado da Aula 02.

<!DOCTYPE html>
<head>
  <title>Nome do seu site aqui</title>

<script type="text/javascript">

function id(el) {
    return document.getElementById(el);
}
function hide(el) {
    id(el).style.display = 'none';//esconder o site
}
window.onload = function() {
    id('all').style.display = 'block';//mostrar o site
    hide('loading');
}

</script>

  <style>
body { background-color: #DDD; width: 100%; margin: 0 auto }

#texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) }

#loading { 
	display: block;
	width: 200px;
}
</style>

  </head>
  <body>
  <section id="all">
    <div id="texto">texto de exemplo</div>
	</section>
	
	<img src="http://i.imgur.com/O5P6FUe.gif" alt="" id="loading" class="content"/>

	<script type="text/javascript">
	hide('all');
    </script>

    </body>
    </html> 

Observação: Como o site só tem um texto, o js será inutil porque o site irá carregar muito rápido, mas se pegarem um site grande e adicionar os js ficará uma gif carregando em quando o site é totalmente carregado.

 

Atenciosamente: Zuck

Link para o comentário
Compartilhar em outros sites
Guest MrShewdor

Guest MrShewdor

Postado
Postado

podia botar imagens de como ficou né

 

não tem como, porque não vai ter como mostrar o gif, se quiser ver o gif da página enquanto carrega adiciona uns wallpaper abaixo da div "texto" assim a página vai ficar pesada, e vai demorar pra carregar, sendo assim vc vai ver um gif de carregando...

Link para o comentário
Compartilhar em outros sites
Dery

Dery

Postado
Postado

não tem como, porque não vai ter como mostrar o gif, se quiser ver o gif da página enquanto carrega adiciona uns wallpaper abaixo da div "texto" assim a página vai ficar pesada, e vai demorar pra carregar, sendo assim vc vai ver um gif de carregando...

Poderia pegar uma hospedagem gratuita na Hostinger e ir colocando os sites lá :D

Link para o comentário
Compartilhar em outros sites
Guest MrShewdor

Guest MrShewdor

Postado
Postado

Poderia pegar uma hospedagem gratuita na Hostinger e ir colocando os sites lá :D

nossa kk é só colocar o codigo em um bloco de notas, depois salvar como "index.html" e pronto abrir com o navegador e pronto. kk

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos

  • Quem está navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...