JavaScript

  • Revision slug: CSS/Como_começar/JavaScript
  • Revision title: JavaScript
  • Revision id: 274547
  • Created:
  • Creator: Verruckt
  • Is current revision? Não
  • コメント

Revision Content

{{ AnteriorPróxima("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}

Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.

Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias. Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias. Vá para outros tutorias para aprender isto em detalhes.

Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS. Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.

Informação: JavaScript

JavaScript é uma linguagem de programação. Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaSript.

JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.

Existem três maneiras para fazer isto:

  • Trabalhando com uma lista de folhas de estilo no documento — por exemplo: adicionando, removendo ou modificando uma folha de estilo.
  • Trabalhando com as regras de uma folha de estilo — por exemplo: adicionando, removendo ou modificando uma regra.
  • Trabalhando com um elemento individual no DOM — modificando seu estilo independentemente da folha de estilo do seu documento.
Mais detalhes
Para mais informações sobre JavaScript no Mozilla, veja a página JavaScript neste wiki.

Ação: Uma demonstração de JavaScript

Criei um novo documento HTML, doc5.html. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Como Começar Mozilla CSS - Demonstração JavaScript</TITLE>
<LINK rel="stylesheet" type="text/css" href="style5.css">
<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
</HEAD>

<BODY>
<H1>JavaScript de amostra</H1>

<DIV id="square"></DIV>

<BUTTON type="button" onclick="doDemo(this);">Clique Aqui</BUTTON>

</BODY>
</HTML>

Crie um novo arquivo CSS, style5.css. Copie e cole o conteúdo daqui:

/*** Demonstração JavaScript ***/
#square {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  margin-bottom: 1em;
  }

button {
  padding: .5em 2em;
  }

Crie um novo arquivo de texo, script5.js. Copie e cole o conteúdo daqui:

// Demonstração JavaScript
function doDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "#fa4"
  button.setAttribute("disabled", "true")
  setTimeout(clearDemo, 2000, button)
  }

function clearDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "transparent"
  button.removeAttribute("disabled")
  }

Abra o documento no seu navegador e pressione o botão.

Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui. Deve se parecer como isto, antes e depois de você pressionar o botão:

Demonstração JavaScript

Demonstração JavaScript

Notas sobre esta demonstração:

  • O documento HTML é ligado à folha de estilo normalmente, e também é ligado ao script.
  • O script trabalha com elementos individuais no DOM. Isto modifica o estilo dos quadrados diretamente, porém, modifica o estilo do botão indiretamente mudando um atributo.
  • Em JavaScript, document.getElementById("square") é similar em função ao seletor CSS #square.
  • Em JavaScript, backgroundColor corresponde à propriedade background-color do CSS.
  • Seu navegador tem uma regra construída das CSS para button{{ mediawiki.external('disabled=\"true\"') }} que muda a aparência do botão quando ele está desabilitado.
Desafio
Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde.

O que vem depois?

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script. Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados. A próxima página demonstra isto: XBL bindings

{{ AnteriorPróxima("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}

Categorias

Interwiki Language Links

{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pl": "pl/CSS/Na_pocz\u0105tek/JavaScript" } ) }}

Revision Source

<p>
{{ AnteriorPróxima("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}
</p><p>Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.
</p><p>Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias.
Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias.
Vá para outros tutorias para aprender isto em detalhes.
</p><p>Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS.
Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.
</p>
<h3 name="Informa.C3.A7.C3.A3o:_JavaScript"> Informação: JavaScript </h3>
<p>JavaScript é uma <i>linguagem de programação</i>.
Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaSript.
</p><p>JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.
</p><p>Existem três maneiras para fazer isto:
</p>
<ul><li>Trabalhando com uma lista de folhas de estilo no documento — por exemplo: adicionando, removendo ou modificando uma folha de estilo.
</li><li>Trabalhando com as regras de uma folha de estilo — por exemplo: adicionando, removendo ou modificando uma regra.
</li><li>Trabalhando com um elemento individual no DOM — modificando seu estilo independentemente da folha de estilo do seu documento.
</li></ul>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;width:100%;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Mais detalhes
</caption><tbody><tr>
<td> Para mais informações sobre JavaScript no Mozilla, veja a página <a href="pt/JavaScript">JavaScript</a> neste wiki.
</td></tr></tbody></table>
<h3 name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript"> Ação: Uma demonstração de JavaScript </h3>
<p>Criei um novo documento HTML, <code>doc5.html</code>.
Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:
</p>
<div style="width:48em; height:12em; overflow:auto;"><pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;

&lt;HEAD&gt;
&lt;TITLE&gt;Como Começar Mozilla CSS - Demonstração JavaScript&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style5.css"&gt;
&lt;SCRIPT type="text/javascript" src="script5.js"&gt;&lt;/SCRIPT&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;H1&gt;JavaScript de amostra&lt;/H1&gt;

&lt;DIV id="square"&gt;&lt;/DIV&gt;

&lt;BUTTON type="button" onclick="doDemo(this);"&gt;Clique Aqui&lt;/BUTTON&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre></div>
<p>Crie um novo arquivo CSS, <code>style5.css</code>.
Copie e cole o conteúdo daqui:
</p>
<div style="width:48em;"><pre>/*** Demonstração JavaScript ***/
#square {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  margin-bottom: 1em;
  }

button {
  padding: .5em 2em;
  }
</pre></div>
<p>Crie um novo arquivo de texo, <code>script5.js</code>.
Copie e cole o conteúdo daqui:
</p>
<div style="width:48em;"><pre>// Demonstração JavaScript
function doDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "#fa4"
  button.setAttribute("disabled", "true")
  setTimeout(clearDemo, 2000, button)
  }

function clearDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "transparent"
  button.removeAttribute("disabled")
  }
</pre></div>
<p>Abra o documento no seu navegador e pressione o botão.
</p><p>Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui.
Deve se parecer como isto, antes e depois de você pressionar o botão:
</p>
<table>
<tbody><tr>
<td style="padding-right:2em;">
<table style="border:2px outset #36b;padding:0 1em .5em .5em;">
<tbody><tr>
<td><p><b>Demonstração JavaScript</b></p>
<div style="width:5em;height:5em;border:2px inset gray;background-color:white;">
<div style="width:2em;height:1em;border:1px outset black;background-color:#ccc;margin-top:4px;">
</div></div></td></tr></tbody></table>
</td><td>
<table style="border:2px outset #36b;padding:0 1em .5em .5em;">
<tbody><tr>
<td><p><b>Demonstração JavaScript</b></p>
<div style="width:5em;height:5em;border:2px inset gray;background-color:#fa4;">
<div style="width:2em;height:1em;border:1px inset black;background-color:#ccc;margin-top:4px;">
</div></div></td></tr></tbody></table>
</td></tr></tbody></table>
<p>Notas sobre esta demonstração:
</p>
<ul><li>O documento HTML é ligado à folha de estilo normalmente, e também é ligado ao script.
</li><li>O script trabalha com elementos individuais no DOM. Isto modifica o estilo dos quadrados diretamente, porém, modifica o estilo do botão indiretamente mudando um atributo.
</li><li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.
</li><li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade <code>background-color</code> do CSS.
</li><li>Seu navegador tem uma regra construída das CSS para <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que muda a aparência do botão quando ele está desabilitado.
</li></ul>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:.5em;">
<caption style="font-weight:bold; text-align:left;margin-top:.5em;">Desafio
</caption><tbody><tr>
<td> Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde.
</td></tr></tbody></table>
<h4 name="O_que_vem_depois.3F"> O que vem depois? </h4>
<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="Talk:pt/CSS/Como_come%c3%a7ar/JavaScript">Discussão</a>.
</p><p>Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script.
Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados.
A próxima página demonstra isto:
<b><a href="pt/CSS/Como_come%c3%a7ar/XBL_bindings">XBL bindings</a></b>
</p><p>{{ AnteriorPróxima("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}
</p><p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pl": "pl/CSS/Na_pocz\u0105tek/JavaScript" } ) }}
Revert to this revision