document.write(“Programando em Javascript”);
document.write(“Olá “+nome+” Seja Bem Vindo !!!”);

3. document.fgColor=” cor em inglês”;
Este comando altera a cor da letra na página. Ex:

document.fgColor=”blue”;

4. document.title=”Título da página”;
Define um título para a página. Ex:

document.title=”Curso de Informática”;

5. document.write (document.lastModified);

Exibe a data da última atualização da página. Ex:

document.write(document.lastModified);

6. window.open(“URL”,”nome_da_janela”,”Parâmetros”);

Comando para abrir uma página em uma nova janela, além de controlar sua

posição, tamanho e os controles que deverão aparecer na nova janela. Ex:

window.open(“URL”,”nome_da_janela”,”Parâmetros”);

URL : é o endereço da página a ser aberta

nome_da_janela : é um nome dado a nova janela a ser aberta que mais tarde

poderá ser referenciada em código, usando o atributo target.

Parâmetros: para colocar os controles de janela que deverão ser exibidos. São eles:

a) status (barra de status): possui dois valores yes(habilita a exibição) e

no(desabilita a exibição)

b) location (barra de endereço) : possui dois valores yes(habilita a

exibição) e no(desabilita a exibição)

c) toolbar (barra de ferramentas) : possui dois valores yes(habilita a 

exibição) e no(desabilita a exibição)

d) menubar (barra de menus) : possui dois valores yes(habilita a exibição) e no(desabilita a exibição)

e) scrollsbars (barra de rolagem) : possui dois valores yes(habilita a 

exibição) e no(desabilita a exibição)

f) left e screenX : definem a posição em pixels da janela a ser aberta a partir do lado esquerdo da janela do navegador. O left é utilizado no Internet Explorer e o screenX no Netscape.

g) top e screenY: definem a posição em pixels da janela a ser aberta a partir do aldo de cima da janela do navegador. O top é utilizado no Internet Explorer e o screenY no Netscape.

h) height (altura) : Controla a altura da nova janela. Este valor deverá ser informado em pixels.

i) width (largura) : Controla a largura da nova janela. Este valor deverá ser informado em pixels.

7. window.location.ref=”nome e estensão da outra página “;

Comando para redirecionar o internauta para outra url (página). Ex:

window.location.ref=”index.php”;

8. window.location.reload();

Este comando serve para atualizar a página atual no navegador. É como se

você pressionasse a tecla F5 ou clicar no menu exibir e selecionar atualizar. Ex:

window.location.reload();

9. window.close( );

Este comando fecha a página atual que está aberta no navegador e ao fechar

será exibida uma caixa de diálogo do Internet Explorer pedindo para confirmar o

fechamento da página.

10. window.status=” … mensagem …”;]

Com este comando, você pode exibir qualquer mensagem na barra de status

do navegador. Ex:

window.status=”Programação em Javascript”;

Exercício:

Fazer várias páginas usando todos os comandos. Procure agrupar vários comandos em uma única página.

Até o proximo tutorial.!

• Como adicionar uma estrutura de Mootools em uma página;
• Como obter um elemento DOM;
• Falei sobre setStyle() e Style();
• E dei alguns exemplos na prática.

Se você ainda não viu a parte 1 deste artigo, veja aqui.Vamos a parte 2:

Nesta parte do artigo vamos identificar um elemento (ID) e vamos personaliza-lo (fundo, exibir uma mensagem de alerta …) usando o Mootools:

1.Implementação Inoportuna:

Vamos começar escrevendo um código em HTML, e logo depois direi porque é inoportuna:

“li_1″>
“#” onClick=“javascript:getId(’1′)”>Get this ID
“li_2″>
“#” onClick=“javascript:getId(2)”>Get this ID
“li_3″>
“#” onClick=“javascript:getId(3)”>Get this ID

Este é uma lista simples com alguns elemento da lista id “li_1“, “li_2“, “li_3“.Cada elemento da lista contem um link solicitando o evento onClick do javascript e uma função getid().Com isto será exibido uma simples caixa de alerta com o ID do elemento que você clicou.O que aparecerá será mais ou menos isto:

O código javascript é este(está em inglês mais decidi deixa-lo, pois acho que não vai atrapalhar nossa lição):

<script type=“text/javascript”>
function getId(el){
var listElement = el;
alert(“The ID of the list element you’ve chosen is: li_”+listElement);

… é muito facil de se entender, se você tem noções básicas de javascript.Vamos chamar este cógido inoportuno, mas porque você me pergunta?Porque, dentro do código do HTML, contem uma solicitação da função getId() do javascript:

“#” onClick=“javascript:getId(’1′)”>Get this ID

Esta forma “inoportuna” não é errada, mais nos usaremos de forma que separe o HTML do Javascript, melhorando assim a vida de todos,hehehe

2. A forma discreta para implementá-lo usando Mootools.

“li_1″>“#”>Get this ID
“li_2″>“#”>Get this ID
“li_3″>“#”>Get this ID

Mais o que mudou?Simples removemos o evento onClick do HTML:

“li_1″>“#” onClick=”javascript:getId(’1′)” >Get this ID

Até aqui tudo certo, agora vamos voltar a um trecho da parte 1 do artigo, você se lembra como adicionar uma estrutura de Mootools no HTML?Não?Vou colocar a imagem aqui novamente, talvez você se lembre:

Bom, como você já deve saber é basicamente isto que temos de colocar logo depois da tag <head>do HTML:

<script type=“text/javascript” src=“mootools.svn.js”></script>

Agora copie e cole este código logo abaixo do que esta acima:

<script type=“text/javascript”>

window.addEvent(‘load’, function(){
$(‘myList’).getElements(‘li’).each(function(el){
el.getElement(‘a’).addEvent(‘click’, function(listID){
alert(“The ID of the list element you’ve chosen is: “+listID);
}.pass(el.id)
);
});
});

Bom nesta lição(parte 1) vou mostrar como manipular propriedades do elemento, em particular como começar o elemento DOM do ID como usar o getStyle (), o setStyle () (para ajustar propriedades do CSS), o toInt () para converter uma string em número e alguns exemplos:

1. Adicione a estrutura de Mootools a sua página:

Primeiramente, você tem que “chamar” o Mootools para o HTML dentro do Tag do <head> da página, como fizemos em todos os tutoriais(esse é um processo necessário para qualquer elemento usando o Mootools, JQuery…por isso é importante que você saiba disso):
Este é o código:

<script type=“text/javascript” src=“mootools.svn.js”></script>

Pronto agora já podemos iniciar qualquer efeito usando o mootools.

2. Obter um elemento DOM

Para obter um elemento DOM por ID você pode usar a seguinte sintaxe:

var element = $(‘meuElemento’);

… esta linha de código obtém o elemento com ID = “meuElemento” em sua página. Se você tem alguma familiaridade com JavaScript, é quase a mesma coisa para obter um elemento DOM por referência usando o código a seguir:

var element = document.getElementById(‘meuElemento’);

usando $ você pode obter uma série de elementos DOM dentro de um elemento com um determinado ID:

$(‘#meuElemento li.minhaListadoElemento’);

… por exemplo, esta linha de código retorna  um array de todas as tags

com a class = “minhaListadoElemento” dentro do DOM elemento com ID = “meuElemento”.3. setStyle() e Style()Estes são dois métodos básicos para definir e obter a propriedade de um elemento(altura, plano de fundo, cor …).Para definir uma propriedade deve-se usar o seguinte código:

Veja o exemplo:

http://motherrussia.polyester.se/docs/tablesorter/

Para experimentar este exemplo, adicione esta linha ao starterkit.html (abaixo da inclusão do jquery):

<script src=”lib/jquery.tablesorter.js” type=”text/javascript”></script>

Depois de incluir o plugin, você poderá chamá-lo assim:

$(document).ready(function() {
$(“#large”).tableSorter();
});

Tente clicar nos cabeçalhos da tabela e veja se ela fica ordenada em ordem ascendente no primeiro clique e descendente no segundo.

A tabela deve utilizar algum realce nas linhas, podemos adicioná-los passando algumas opções:

$(document).ready(function() {
$(“#large”).tableSorter({
stripingRowClass: ['odd','even'], // Nome da classe a ser utilizada para a divisão das linhas como um array.
stripRowsOnStartUp: true // Divide as linhas quando o tableSorter iniciar.
});
});

Existem mais exemplos e documentação sobre as opções disponíveis no site do tablesorter.

A maioria dos plugins podem ser utilizados como este: Inclua o arquivo do pluguin e chame o método do plugin em alguns elementos, passando os parâmetros opcionais para customizar o plugin.

Uma lista atualizada dos plugins disponíveis pode ser encontrada no site do jQuery.

Quando você utilizar o jQuery com mais frequência, você perceberá que será melhor empacotar o seu próprio código como um plugin, seja para o reuso para você mesmo ou para a sua empresa, ou para compartilhá-lo com a comunidade. O próximo tutorial dá algumas dicas sobre como estruturar um plugin.

$(document).ready(function() {
$(“a”).toggle(function() {
$(“.algumacoisa”).hide(‘slow’);
}, function() {
$(“.algumacoisa”).show(‘fast’);
});
});

Você pode criar qualquer combinação das animações com o animate() como por exemplo um slide com fade:

$(document).ready(function() {
$(“a”).toggle(function() {
$(“.algumacoisa”).animate({
height: ‘hide’,
opacity: ‘hide’
}, ‘slow’);
}, function() {
$(“.algumacoisa”).animate({
height: ‘show’,
opacity: ‘show’
}, ‘slow’);
});
});

Efeitos muito mais sofisticados podem ser feitos com a coleção de plugins Interface. No site você encontrará demonstrações e a documentação.

Além da coleção Interface, que está no topo da lista de plugins do jQuery, existem muitos outros. O próximo tutorial lhe mostrará como usar o plugintablesorter.

Para testar alguns desses seletores, vamos selecionar e modificar a primeira lista ordenada no nosso kit para começar.

Primeiramente queremos selecionar a própria lista. A lista tem um ID “listaOrdenada”. No javascript clássico, você pode selecioná-la usandodocument.getElementById("listaOrdenada"). Com o jQuery, nós fazemos isso assim:

$(document).ready(function() {
$(“#listaOrdenada”).addClass(“vermelho”);
});

O kit para começar fornece uma folha de estilos com a classe “vermelho” que simplesmente adiciona um fundo vermelho. No entanto, quando você recarrega a página no seu navegador, você verá que a primeira lista tem o fundo vermelho. A segunda lista permanece inalterada.

Agora vamos adicionar mais classes para os elementos filhos desta lista.

$(document).ready(function() {
$(“#listaOrdenada > li”).addClass(“azul”);
});

Isto seleciona todos os lis filhos do elemento com id listaOrdenada e adiciona a classe “azul”.

Agora alguma coisa mais sofisticada: Nós queremos adicionar e remover a classe quando o usuário passar o mouse sobre o elemento li, mas somente no último elemento da lista.

$(document).ready(function() {
$(“#listaOrdenada li:last”).hover(function() {
$(this).addClass(“verde”);
}, function() {
$(this).removeClass(“verde”);
});
});

Para todo evento onxxx disponível, como onclick, onchange, onsubmit, existem um equivalente no jQuery. Alguns outros eventos, como ready e hover, são métodos convenientes para algumas tarefas.

Você pode encontrar uma lista completa com todos os eventos suportados no Visual jQuery, na seção de Events.

Com estes seletores e eventos você já pode fazer muita coisa, mas tem muito mais.

$(document).ready(function() {
$(“#listaOrdenada”).find(“li”).each(function(i) {
$(this).html( $(this).html() + ” BAM! ” + i );
});
});

O find() permite que você faça uma pesquisa mais a fundo nos descendentes dos elementos já selecionados, apesar de $("#listaOrdenada).find("li")ser praticamente o mesmo que $("#listaOrdenada li"). O each() faz a iteração sobre cada elemento e permite um processamento mais profundo. A maioria dos métodos, como o addClass(), utiliza o each() internamente. Neste exemplo, o html() é utilizado para recuperar o texto de cada elemento li, adicionar algum texto a ele e definí-lo como o texto do elemento.

Uma outra tarefa que você frequentemente terá que lidar é chamar métodos em elementos DOM que não são suportados pelo jQuery. Pense em um formulário que você gostaria de resetar depois que enviou com sucesso via AJAX.

$(document).ready(function() {
// use isto para resetar um único formulário
$(“#reset”).click(function() {
$(“#form”)[0].reset();
});
});

Este código seleciona o elemento com o ID “form” e chama o reset() no primeiro elemento selecionado. Caso exista mais de um form, você pode fazer dessa maneira:

$(document).ready(function() {
// use isto para resetar todos os formulários de uma só vez
$(“#reset”).click(function() {
$(“form”).each(function() {
this.reset();
});

Isto deve selecionar todos os formulários no seu documento, fazer a iteração sobre eles e chamar o reset() para cada um.

Outro problema que você pode encontrar é não selecionar alguns elementos. O jQuery provê o filter() e o not() para isto. Enquanto o filter() reduz a seleção para os elementos que atendem à expressão de filtro, o not() faz exatamente o contrário, removendo todos os elementos que atendem a expressão. Imagine uma lista desordenada onde você quer selecionar todos os elementos li que não possuam um filho ul.

$(document).ready(function() {
$(“li”).not(“[ul]“).css(“border”, “1px solid black”);
});

Isto seleciona todos os elementos li e remove todos os elementos da seleção que possuam um elemento ul como filho. Sendo assim todos os elementos li ficarão com uma borda, com exceção daqueles que possuam um filho ul. A sintaxe [expressão] é vinda do XPath e pode ser utilizada para filtrar elementos e atributos filhos. Talvez você queira selecionar todas as âncoras que possuam o attributo name:

$(document).ready(function() {
$(“a[@name]“).background(“#eee”);
});

Isto adiciona uma cor de fundo para todos os elementos âncora com o atributo name.

Mais comum que selecionar as âncoras pelo nome, você pode precisar selecionar as âncoras pelo atributo “href”. Isto pode ser um problema uma vez que os navegadores se comportam inconsistentemente quando retornam o que eles pensam que o valor do “href” é. Para selecionar apenas uma parte do value, podemos utilizar o seletor contém “*=” ao invés do igual (“=”):

$(document).ready(function() {
$(“a[@href*=/content/gallery]“).click(function() {
// faça alguma coisa com todos os links que apontam para algum lugar em /content/gallery
});
});

Até agora, usamos todos os seletores para selecionar os filhos ou filtrar a seleção atual. Existem situações onde você irá precisar selecionar os anteriores ou próximos elementos, conhecidos como siblings (filhos do mesmo pai). Pense em uma página de um FAQ, onde todas as respostas estão escondidas em um primeiro momento e são exibidas quando a questão é clicada. O código do jQuery para isso:

$(document).ready(function() {
$(‘#faq’).find(‘dd’).hide().end().find(‘dt’).click(function() {
var resposta = $(this).next();
if (resposta.is(‘:visible’)) {
resposta.slideUp();
} else {
resposta.slideDown();
}
});
});

Aqui estamos usando um pouco de encadeamento para reduzir o tamanho do código e ganhar performance, uma vez que ‘#faq’ é selecionada apenas uma única vez. Usando o end(), o primeiro find() é desfeito, assim podemos começar a procurar com o próximo find() no nosso elemento #faq, ao invés de procurar no filho dd.

Com o acionamento do evento click, a função passada ao método click(), utilizamos $(this).next() para encontrar o próximo sibling a partir do dt atual. Isto nos permite selecionar rapidamente a resposta seguinte à questão clicada.

Além dos siblings, você também pode selecionar os elementos pais (também conhecidos como ancestrais para os mais familiarizados com o XPath). Talvez você pode querer realçar o parágrafo que é o pai do link que o usuário passar o mouse. Tente isso:

$(document).ready(function() {
$(“a”).hover(function() {
$(this).parents(“p”).addClass(“realcar”);
}, function() {
$(this).parents(“p”).removeClass(“realcar”);
});
});

Para todos os elementos âncoras que o usuário passar o mouse, o parágrafo pai é procurado e a classe “realcar” é adicionada e removida.

Vamos voltar um passo atrás de continuarmos: o jQuery faz com que o código fique menor e tornando-o mais fácil de ler e dar manutenção. O código seguinte é um atalho para a notação $(document).ready(callback):

$(function() {
// código a ser executado quando DOM está pronto
});

Aplicado ao exemplo do Alô Mundo!, ficaria assim

$(function() {
$(“a”).click(function() {
alert(“Alô Mundo!”);
});
});

Agora com o básico em mãos, queremos explorar outros aspectos, começando com o AJAX.

jQuery é o melhor framework javascript da atualidade (oficialmente é considerado uma biblioteca javascript), isso todos que já mexem com desenvolvimento web já sabem. Já quem está iniciando no mundo do desenvolvimento para web ainda não sabe… E justamente para explicar um pouco mais sobre o jQuery é que este artigo foi escrito, visando auxiliar aos que estão iniciando a jornada javascript a encontrar um caminho seguro para começar.

Introdução:

Geralmente desenvolvedores web gostam de colecionar bibliotecas e scripts prontos das linguagens de programação que utilizam no dia-a-dia. Ter à disposição inúmeros arquivos de terceiros, desde exemplos e classes, passando por modelos e tudo o mais que possa servir de alguma maneira – e/ou simplesmente satisfazer a curiosidade acerca determinado modo ou técnica para programar – é o modus operandi de quem programa para web.

Obviamente, todos queremos ter o melhor! E, em se tratando de progração, não poderia ser diferente. Dado que o melhor framework javascript atual é jQuery, então não há nada mais natural do que conhecer e saber usar esta poderosíssima ferramenta para desenvolver sites, blogs, produtos virtuais, sistemas online e o que mais você precisar que tenha javascript!

O que é um framework?

jQuery é a maneira mais fácil, simples, elegante e sofisticada de codificar javascript; é, nada mais, nada menos, que, segundo a opinião de profissionais do ramo e publicações especializadas, um dos melhores frameworks já desenvolvidos! Para ficar mais claro, framework, segundo definição encontrada na Wikipédia, é:

No desenvolvimento do software, um framework ou arcabouço é uma estrutura de suporte definida em que um outro projeto de software pode ser organizado e desenvolvido. Um framework pode incluir programas de suporte, bibliotecas de código, linguagens de script e outros softwares para ajudar a desenvolver e juntar diferentes componentes de um projeto de software.

Frameworks são projetados com a intenção de facilitar o desenvolvimento de software, habilitando designerse programadores a gastarem mais tempo determinando as exigências do software do que com detalhes tediosos de baixo nível do sistema. (sic)

Para que serve jQuery?

Segundo consta no web site oficial, “jQuery is designed to change the way that you write JavaScript”, ou seja, jQuery é projetado para mudar sua maneira de escrever javascript (tradução livre). Por experiência própria, posso afirmar que o objetivo da equipe de desenvolvimento foi atingido com sucesso!

jQuery é disponibilizado das diferentes maneiras:

• Desenvolvimento. Apresenta todos seus códigos completos, identados e de fácil entendimento (isso é relativo). Ideal para quem queira estudar e compreender como as coisas funcionam, essa “versão sem cortes” é ideal para estudo/aprendizado a fundo da biblioteca.
• Produção. Esta é a versão para quem se preocupa somente em utilizar o jQuery e usufruir de todo o seu poder através de um arquivo compactado, diminuto e ideal para aqueles que querem usar o framework rapidamente, evitando transferências desnecessárias e tempos de carregamento excessivos.
• Google API/CDN. Através da API AJAX de bibliotecas do Google é possível, dentre outros frameworks e bibliotecas, incorporar o jQuery a suas páginas web. Leia mais sobre como usar jQuery a partir da API AJAX do Google.

Quando se usa jQuery, realmente a maneira de se escrever javascript muda! É o fim das enormes linhas que servem somente para identificar um elemento; o fim dos laços de repetição que somente identificam quantos elementos de determinada categoria estão presentes no documento; o fim de inúmeros “Ctrl + C, Ctrl + V”; enfim, é o término do trabalho pesado e perda de tempo na codificação javascript e o início da codificação simples, elegante e eficazmente robusta e de fácil entendimento.

Com pouquíssimas linhas de código, é possível mexer à vontade com o DOM (identificação, edição, inserção, deleção, etc), manipular eventos javascript, alterar regras CSS, aplicar efeitos visuais (fade in / fade out, drag and drop, slides, movimentos, etc) e muito mais coisas interessantes, úteis e cross browser. E quando digo “pouquíssimas linhas de código”, refiro-me, por exemplo, a 3 ou 4 linhas para requisições AJAX!

Quer mais? jQuery é projetado para aceitar extensões de terceiros, quer dizer, qualquer um com certa habilidade em programação pode criar funcionalidades extra para a biblioteca, extendendo suas potencialidades nativas e/ou aproveitando

Recapitulação jQuery:

jQuery é uma biblioteca (ou framework) “projetado para mudar sua maneira de escrever javascript“; atualmente é a melhor biblioteca javascript disponível e está sempre nas listas das mais usadas no mundo. Algumas de suas características são:

• Cross browser;
• Controle total sobre o DOM;
• Manipulação de eventos javascript;
• Manipulação de regras CSS;
• Aplicação de efeitos visuais;
• Uso de AJAX;
• Muito, muito mais!

InsightPoint cria ilustrações sofisticadas e layouts para Web e de impressão. Quando se trata de explicitar e partilhar as suas ideias, como texto e gráficos, InsightPoint é o mais rápido e mais fácil de chegar até lá. Construído no topo de tecnologias XML, objeto abrangente de ferramentas de projeto orientado vetor, curva de aprendizado trivial, e experiência de desenho suave.

Download:

Download – InsightPoint 3.2.5.2

Inkscape é um editor Open Source vector graphics, com capacidades semelhantes ao Illustrator, Freehand, CorelDraw, ou Xara, estou usando o padrão W3C Scalable Vector Graphics (SVG) file format. Características suportadas de SVG incluem formas, caminhos, texto, marcadores, clones, alpha blending, transformações, gradientes, padrões e agrupamento. Inkscape também suporta metadados Creative Commons dados, edição de nó, camadas, operações complexas caminho, rastreamento de bitmaps, texto-em-caminho, fluiu de texto, edição de XML directo, e muito mais.

Download:

Download – Inkscape 0.45