JavaScript e CSS

Esta é a pirmeira sessão da Parte II do Tutorial de CSS. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.

Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.

Sessão Anterior (da Parte I): Media
Próxima sessão: SVG

Informação: JavaScript

JavaScript é um programming language. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica

Há três formas de fazer isso:

Trabalhando com lista de documentos de stylesheets—por exemplo: adicionando, removendo ou adicionando uma stylesheet.
Trabalhando com as regras em uma stylesheet—por exemplo: adicionando, removendo ou modificando uma regra.
Trabalhando com um documento individual na DOM—modificando seu estilo independentemente do stylesheetsdo documento.

Mais detalhes
Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki.

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

Faça um novo documento em HTML, doc5.html. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

<!DOCTYPE html>
<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>

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

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

button {
  padding: .5em 2em;
}

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

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

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

Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:

JavaScript demonstration

Notas importantes sobre esta demonstração:

Os links do documento HTML document linca a como usual, e também linca o script.
O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.
Em JavaScript, document.getElementById("square") é similar em função ao seletor CSS #square.
Em JavaScript, backgroundColor corresponde à propriedade CSS background-color. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.
Seu browser tem uma regra built-in CSS para button[disabled="true"] ela muda a aparência dos botões quando está disabilitado.

Desafio
Mude o script e então o square salta para a direita em 20 em quando muda as cores, e salta de volta depois.

Veja a solução deste desafio.

O que vem agora?

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

Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras stylesheets) para selecionar elementos. A próxima página demonstra isso: XBL bindings

JavaScript e CSS

Informação: JavaScript

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

Etiquetas do documento e colaboradores