JavaScript

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

Revision Content

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 JavaSript neste wiki.

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

Make a new HTML document, doc5.html. Copy and paste the content from here, making sure that you scroll to get all of it:

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

<HEAD>
<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE>
<LINK rel="stylesheet" type="text/css" href="style5.css">
<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
</HEAD>

<BODY>
<H1>JavaScript sample</H1>

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

<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON>

</BODY>
</HTML>

Make a new CSS file, style5.css. Copy and paste the content from here:

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

button {
  padding: .5em 2em;
  }

Make a new text file, script5.js. Copy and paste the content from here:

// JavaScript demonstration
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")
  }

Open the document in your browser and press the button.

This wiki does not support JavaScript in pages, so it is not possible to show the demonstration here. It looks something like this, before and after you press the button:

JavaScript demonstration

JavaScript demonstration

Notes about this demonstration:

  • The HTML document links the stylesheet as usual, and it also links the script.
  • The script works with individual elements in the DOM. It modifies the square's style directly. It modifies the button's style indirectly by changing an attribute.
  • In JavaScript, document.getElementById("square") is similar in function to to the CSS selector #square.
  • In JavaScript, backgroundColor corresponds to the CSS property background-color.
  • Your browser has a built-in CSS rule for button{{mediawiki.external('disabled=\"true\"')}} that changes the button's appearance when it is disabled.
Desafio
Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.

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 use o script. Mozilla extende o CSS então isto pode linkar 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

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

Revision Source

<p>
</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/JavaSript">JavaSript</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>Make a new HTML document, <code>doc5.html</code>.
Copy and paste the content from here, making sure that you scroll to get all of it:
</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;Mozilla CSS Getting Started - JavaScript demonstration&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 sample&lt;/H1&gt;

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

&lt;BUTTON type="button" onclick="doDemo(this);"&gt;Click Me&lt;/BUTTON&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre></div>
<p>Make a new CSS file, <code>style5.css</code>.
Copy and paste the content from here:
</p>
<div style="width:48em;"><pre>/*** JavaScript demonstration ***/
#square {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  margin-bottom: 1em;
  }

button {
  padding: .5em 2em;
  }
</pre></div>
<p>Make a new text file, <code>script5.js</code>.
Copy and paste the content from here:
</p>
<div style="width:48em;"><pre>// JavaScript demonstration
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>Open the document in your browser and press the button.
</p><p>This wiki does not support JavaScript in pages, so it is not possible to show the demonstration here.
It looks something like this, before and after you press the button:
</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>JavaScript demonstration</b></p>
<div style="width:5em;height:5em;border:2px inset gray;background-color:white;"></div>
<div style="width:2em;height:1em;border:1px outset black;background-color:#ccc;margin-top:4px;"></div>
</td></tr></tbody></table>
</td><td>
<table style="border:2px outset #36b;padding:0 1em .5em .5em;">
<tbody><tr>
<td><p><b>JavaScript demonstration</b></p>
<div style="width:5em;height:5em;border:2px inset gray;background-color:#fa4;"></div>
<div style="width:2em;height:1em;border:1px inset black;background-color:#ccc;margin-top:4px;"></div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<p>Notes about this demonstration:
</p>
<ul><li>The HTML document links the stylesheet as usual, and it also links the script.
</li><li>The script works with individual elements in the DOM.  It modifies the square's style directly.  It modifies the button's style indirectly by changing an attribute.
</li><li>In JavaScript, <code>document.getElementById("square")</code> is similar in function to to the CSS selector <code>#square</code>.
</li><li>In JavaScript, <code>backgroundColor</code> corresponds to the CSS property <code>background-color</code>.
</li><li>Your browser has a built-in CSS rule for <code>button{{mediawiki.external('disabled=\"true\"')}}</code> that changes the button's appearance when it is disabled.
</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> Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.
</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 use o script.
Mozilla extende o CSS então isto pode linkar 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>{{ wiki.languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pl": "pl/CSS/Na_pocz\u0105tek/JavaScript" } ) }}
Revert to this revision