Este é o código de um sistema de livraria, feito em HTML e JavaScript,
que permite ver como funciona e também manipular uma tabela através do DOM.
<html>
<head>
<script type="text/javascript">
var ultimocodigo=2;
function remover() {
//Recebe a posição a ser alterada
pos=codigo.value-1;
pos=parseInt(pos);
//remove filho de livro da posição pos
var oChild=livros.children(pos);
livros.removeChild(oChild);
if(pos+1==ultimocodigo)
ultimocodigo--;
}
function removerCol() {
//remove filhos de linha, um a um (na posição 0) a cada vez que a função é chamada
var oChild=linha.children(0);
linha.removeChild(oChild);
}
function removerALL() {
try
{
livros.removeNode(true);//remove todos nodes de livros
}
catch(x)
{
alert("Você já removeu todos elementos. A página será recarregada quando você apertar ok.");
document.location.reload();
}
}
function removerTable() {
try
{
oTable.removeNode(true);
}
catch(x)
{
alert("Você já removeu a tabela. A página será recarregada quando você apertar ok.");
document.location.reload();
}
}
function incluir() {
linha=document.createElement('tr');
_codigo=document.createElement('td');
ultimocodigo++;
textoCodigo=document.createTextNode(ultimocodigo);
_codigo.appendChild(textoCodigo);// inclui textoCodigo como filho de td
_titulo=document.createElement('td');
textoTitulo=document.createTextNode(document.getElementById("titulo").value); // Returna uma referencia para o primeiro objeto com o valor específico do atributo ID
_titulo.appendChild(textoTitulo);// inclui como filho de td
_autor=document.createElement('td');
textoautor=document.createTextNode(document.getElementById("autor").value); // Returna uma referencia para o primeiro objeto com o valor específico do atributo ID
_autor.appendChild(textoautor);// inclui como filho de td
_preço=document.createElement('td');
textopreço=document.createTextNode(document.getElementById("preço").value); // Returna uma referencia para o primeiro objeto com o valor específico do atributo ID
_preço.appendChild(textopreço);// inclui como filho de td
linha.appendChild(_codigo); // refere td a tr
linha.appendChild(_titulo); // refere td a tr
linha.appendChild(_autor);
linha.appendChild(_preço);
x = document.getElementById("livros"); // refere tr a tbody
x.appendChild(linha);
}
</script>
<style type="text/css">
table { border-left:solid black thin;
border-top:solid black thin;
}
th { border-right: solid black thin;
border-bottom: solid black thin;
background: #CCCCCC;
}
td { border-right:solid black thin;
border-bottom:solid black thin;
}
</style>
</head>
<body>
<h1>Livraria</h1>
<table id="oTable" border="0" cellspacing="0" cellpadding="5">
<caption>Livros Disponíveis</caption>
<thead>
<tr><th>Código</th><th>Título</th><th>Autor(es)</th><th>Preço</th></tr>
</thead>
<tbody id="livros">
<tr><td>1</td><td>Internet & WWW</td><td>Deitel, Deitel e Nieto</td><td>79.80</td></tr>
<tr><td>2</td><td>Harry Potter</td><td>J.K.Rowling</td><td>29.90</td></tr>
</tbody>
</table>
<p style="margin-top:30pt"><strong>Inserir livros:</strong><br/>
Título: <input type="text" id="titulo" value="Everyday Italian"/>
Autor(es): <input type="text" id="autor" value="Giada de Laurentis"/>
Preço: <input type="text" size="7" id="preço" value="14.90"/>
<input type="button" value="Incluir" onclick="incluir()"/></p>
<p style="margin-top:30pt"><strong>Remover livros:</strong><br/>
Número da linha: <input type="text" size="4" id="codigo"/>
<input type="button" value="Remover" onClick="remover()"/></p>
<p style="margin-top:30pt"><strong>Remover TODOS livros:</strong>
<input type="button" value="Remover" onClick="removerALL()"/></p>
<p style="margin-top:30pt"><strong>Remover livro coluna a coluna:</strong>
<input type="button" value="Remover" onClick="removerCol()"/></p>
<p style="margin-top:30pt"><strong>Remover toda a tabela:</strong>
<input type="button" value="Remover" onClick="removerTable()"/></p>
</body>
</html>
Para ver esse código em funcionamento acesse:
theway.789mb.com/aulas/livros.html
Este blog foi criado para auxiliar no estudo de tecnologias para desenvolvimento web, como HTML, Java EE (JSP, Servlets), Javascript, AJAX, XML, DOM, PHP, ASP, EJB, Web Services, etc
domingo, 30 de setembro de 2007
segunda-feira, 17 de setembro de 2007
CSS
Cascading Style Sheets, ou simplesmente CSS, é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
Fonte: Wikipedia
Acesso em 17/09/2007
Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
Fonte: Wikipedia
Acesso em 17/09/2007
Exemplo Calculadora em JavaScript
Desenvolvi esta calculadora simples, que realiza as operações básicas e também aceita algarismos decimais. Acho que ela exemplifica bem os conhecimentos básicos de JavaScript.
<html>
<head>
<title> Calculadora</title>
<script type="text/javascript">
num1=0.0;
num2=0.0;
operador=null;
getnum=null;
isdecimal=false;
function entranum(a){
if(getnum==null){
getnum=a.toString();
visor.value=getnum;
}
else{
getnum+=a.toString();
visor.value=getnum;
}
if(operador=='+'){
num=parseFloat(getnum);
num2=num1+num;
}
if(operador=='-'){
num=parseFloat(getnum);
num2=num1-num;
}
if(operador=='*'){
num=parseFloat(getnum);
num2=num1*num;
}
if(operador=='*'){
num=parseFloat(getnum);
num2=num1*num;
}
if(operador=='/'){
num=parseFloat(getnum)
num2=num1/num;
}
}
function soma(){
operador="+";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function subtrai(){
operador="-";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function multiplica(){
operador="*";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function divide(){
operador="/";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function reset(){
num1=0.0;
num2=0.0;
visor.value=num1;
getnum=null;
operador=null;
}
function resultop(){
visor.value=num2;
num1=0.0;
num2=0.0;
getnum=null;
operador=null;
}
var gosta = confirm( "Gostaria de usar a calculadora?" );
if ( gosta == true )
{
document.write( "<p>Faça bom proveito!</p>" );
}
else
{
document.write( "<p>Use da próxima vez!</p>" );
}
</script>
</head>
<body>
<h1>Calculadora em Javascript<br><br></h1>
<table border="2" cellspacing="0" cellpadding="5">
<thead>
<tr><input type="text" name="visor"/></tr>
</thead>
<tbody id="calc">
<tr><td><input type="button" name="num1" value="1" onClick="entranum(1)" /></td><td><input type="button" name="num2" value="2" onClick="entranum(2)"/></td><td><input type="button" name="num3" value="3" onClick="entranum(3)"/></td><td><input type="button" name="num4" value="4" onClick="entranum(4)"/></td></tr>
<tr><td><input type="button" value="5" onClick="entranum(5)" /></td><td><input type="button" value="6" onClick="entranum(6)"/></td><td><input type="button" value="7" onClick="entranum(7)"/></td><td><input type="button" value="8" onClick="entranum(8)"/></td></tr>
<tr><td><input type="button" value="9" onClick="entranum(9)" /></td><td><input type="button" value="0" onClick="entranum(0)"/></td><td><input type="button" value="+" onClick="soma()"/></td><td><input type="button" value="-" onClick="subtrai()" /></td></tr>
<tr><td><input type="button" value="*" onClick="multiplica()"/></td><td><input type="button" value=":" onClick="divide()"/></td><td><input type="button" value="C" onClick="reset()"/></td><td><input type="button" value="=" onClick="resultop()" /></td></tr>
</tbody>
</table>
<input type="button" name="num1" value="decimal" onClick="entranum('.')" />
</body>
</html>
Se quiser ver este site em funcionamento acesse: pedrofao.789mb.com/portal/calculadora.html
<html>
<head>
<title> Calculadora</title>
<script type="text/javascript">
num1=0.0;
num2=0.0;
operador=null;
getnum=null;
isdecimal=false;
function entranum(a){
if(getnum==null){
getnum=a.toString();
visor.value=getnum;
}
else{
getnum+=a.toString();
visor.value=getnum;
}
if(operador=='+'){
num=parseFloat(getnum);
num2=num1+num;
}
if(operador=='-'){
num=parseFloat(getnum);
num2=num1-num;
}
if(operador=='*'){
num=parseFloat(getnum);
num2=num1*num;
}
if(operador=='*'){
num=parseFloat(getnum);
num2=num1*num;
}
if(operador=='/'){
num=parseFloat(getnum)
num2=num1/num;
}
}
function soma(){
operador="+";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function subtrai(){
operador="-";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function multiplica(){
operador="*";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function divide(){
operador="/";
num1=parseFloat(getnum);
getnum=null;
visor.value=num1;
}
function reset(){
num1=0.0;
num2=0.0;
visor.value=num1;
getnum=null;
operador=null;
}
function resultop(){
visor.value=num2;
num1=0.0;
num2=0.0;
getnum=null;
operador=null;
}
var gosta = confirm( "Gostaria de usar a calculadora?" );
if ( gosta == true )
{
document.write( "<p>Faça bom proveito!</p>" );
}
else
{
document.write( "<p>Use da próxima vez!</p>" );
}
</script>
</head>
<body>
<h1>Calculadora em Javascript<br><br></h1>
<table border="2" cellspacing="0" cellpadding="5">
<thead>
<tr><input type="text" name="visor"/></tr>
</thead>
<tbody id="calc">
<tr><td><input type="button" name="num1" value="1" onClick="entranum(1)" /></td><td><input type="button" name="num2" value="2" onClick="entranum(2)"/></td><td><input type="button" name="num3" value="3" onClick="entranum(3)"/></td><td><input type="button" name="num4" value="4" onClick="entranum(4)"/></td></tr>
<tr><td><input type="button" value="5" onClick="entranum(5)" /></td><td><input type="button" value="6" onClick="entranum(6)"/></td><td><input type="button" value="7" onClick="entranum(7)"/></td><td><input type="button" value="8" onClick="entranum(8)"/></td></tr>
<tr><td><input type="button" value="9" onClick="entranum(9)" /></td><td><input type="button" value="0" onClick="entranum(0)"/></td><td><input type="button" value="+" onClick="soma()"/></td><td><input type="button" value="-" onClick="subtrai()" /></td></tr>
<tr><td><input type="button" value="*" onClick="multiplica()"/></td><td><input type="button" value=":" onClick="divide()"/></td><td><input type="button" value="C" onClick="reset()"/></td><td><input type="button" value="=" onClick="resultop()" /></td></tr>
</tbody>
</table>
<input type="button" name="num1" value="decimal" onClick="entranum('.')" />
</body>
</html>
Se quiser ver este site em funcionamento acesse: pedrofao.789mb.com/portal/calculadora.html
JavaScript
JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:
Validação de formulários no lado cliente (programa navegador);
Interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.
Oferece tipagem dinâmica - tipos de variáveis não são definidos;
É interpretada, ao invés de compilada;
Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).
Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.
Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente Macromedia, porém a empresa foi vendida à Adobe).
Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.
O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma:
Fonte: Wikipedia
Acesso em 15-09-2007
Validação de formulários no lado cliente (programa navegador);
Interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.
Oferece tipagem dinâmica - tipos de variáveis não são definidos;
É interpretada, ao invés de compilada;
Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).
Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.
Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente Macromedia, porém a empresa foi vendida à Adobe).
Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.
O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma:
Fonte: Wikipedia
Acesso em 15-09-2007