JavaScript: Principais Comandos, Eventos e Operadores

2009-03-16T19:49:00.004-03:00

Hoje abordaremos mais uma parte básica do JavaScript.

Operadores Lógicos

Os principais operadores lógicos a serem utilizados em comandos condicionais são:

OPERADORES LÓGICOS	SIGNIFICADO
= =	Igual
!=	Diferente
>	Maior
>=	Maior ou Igual
<	Menor
<=	Menor ou Igual
&&	E
\|\|	Ou

Os comandos condicionais serão abordados mais abaixo.

Operadores Matemáticos

Os operadores Matemáticos a serem utilizados em cálculos, referências de indexadores e manuseio de strings são :

OPERADORES MATEMÁTICOS	SIGNIFICADO
+	adição de valor e concatenação de strings.
-	subtração de valores
*	multiplicação de valores
/	divisão de valores
%	obtém o resto de uma divisão

Estes operadores serão largamente utilizados, portanto, teremos uma noção mais precisa do seu funcionamento.

Controles Especiais

CONTROLES ESPECIAIS	SIGNIFICADO
\b	backspace
\f	form feed
\n	new line caracters
\r	carriage return
\t	tab characters
//	Linha de comentário
/..../	Delimitadores para inserir um texto com mais de uma linha como comentário.

Os delimitadores naturais para uma string são " ( aspas dupla) ou ' ( aspas simples). Caso seja necessário a utilização destes caracteres como parte da string, utilize \ precedendo " ou '. Como por exemplo : alert ("Cuidado com o uso de \" ou \' em uma string")

Estruturas de Controle ou Comandos Condicionais

Existem algumas estruturas de controle que lhe permitem modificar o fluxo de execução de um programa ou seja elas possui comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira.

São eles:

Comando IF

if (condição)

{ /*ação para condição satisfeita*/ }

[ else

{ /*ação para condição não satisfeita*/ } ]

Exemplo :

if (Idade <>

{Categoria = "Menor" }

else

{Categoria = "Maior"}

Comando FOR

for ( [inicialização/criação de variável de controle ;]

[condição ;]

[incremento da variável de controle] )

{ ação }

Exemplo.

for (x = 0 ; x <= 10 ; x++)

{alert ("X igual a " + x) }

Comando WHILE

Executa uma ação enquanto determinada condição for verdadeira.

while (condição)

{ ação }

Exemplo.

var contador = 10

while (contador > 1)

{ contador-- }

Move condicional

receptor = ( (condição) ? verdadeiro : falso)

Exemplo.

NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

Eventos

Os eventos são fatos que ocorrem durante a execução do sistema, a partir dos quais você pode definir ações a serem realizadas pelo programa. Logo abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que eles podem ocorrer, bem como, os objetos passíveis de sua ocorrência.

EVENTOS	OCORRÊNCIAS
onload	Ocorre na carga do documento. Ou seja, só ocorre no BODY(corpo) do documento.
onunload	Ocorre na descarga (saída) do documento. Também só ocorre no BODY(corpo).
onchange	Ocorre quando o objeto perde o focus e houve mudança de conteúdo. Válido para os objetos Text, Select e Textarea.
onblur	Ocorre quando o objeto perde o focus, independente de ter havido mudança. Válido para os objetos Text, Select e Textarea.
onfocus	Ocorre quando o objeto recebe o focus. válido para os objetos Text, Select e Textarea.
onclick	Ocorre quando o objeto recebe um Click do Mouse. válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
onmouseover	Ocorre quando o ponteiro do mouse passa por sobre o objeto. válido apenas para Link.
onselect	Ocorre quando o objeto é selecionado. Válido para os objetos Text e Textarea.
onsubmit	Ocorre quando um botão tipo Submit recebe um click do mouse. Válido apenas para o Form.

Mas espera aí! Onde se usam esses eventos?

Não se preocupe. Eles também serão muito usados e você entenderá aos poucos cada um.

Apartir desses comandos, operadores e eventos, começamos a ter uma base interessante para os exemplos dos próximos posts.

Abraço

A internet atualmente

2009-03-03T10:47:00.001-03:00

Para entendermos realmente nossa posição na internet.

História da Internet

2009-02-12T10:00:00.000-02:00

Por que sem ela, não teríamos esse blog ^_^

Google Chrome no Japão

2009-02-11T09:48:00.004-02:00

Atualmente, uso o Google Chrome como meu navegador principal, por sua velocidade em carregamento das páginas e interpretação de Javascript, bem como por ele próprio ser rápido quando preciso de uma nova janela.

No Japão, onde a busca do Google não é tão popular, eles precisam de outras formas de anunciar seu produto.

Veja esse comercial.

Até o dia desse post, o chrome estava na versão 1.0.154.48.

Pausa...

2008-12-09T08:38:00.002-02:00

Vim hoje aqui pra dar satisfação.

Não tenho postado nos últimos tempos, pois tenho que organizar os códigos que quero mostrar e comportamentos e bugs que pretendo explanar.

E isso demanda tempo...

Pretendo voltar a postar, e dessa vez com certa periodicidade, em janeiro, na segunda semana.

Vejo vocês lá.

HTML - O básico do básico

2008-11-14T09:45:00.000-02:00

Considere as linhas abaixo:

<html>
<head>
<title>Título do documento</title>

Cabeçalho do documento

</head>

<body>

Corpo do documento

</body>
</html>

Ele não possui alguns atributos que a w3c exige (DocType por exemplo), mas retirei-os propositalmente para não complicar o exemplo (serão abordados aos poucos). O HTML é composto por elementos chamados tag's que em grande parte, possuem o que chamamos abertura e fechamento. Observe os elementos que compõem a página:

html
head
title
body

Note que não mencionei </head>, </title>, </body> e </html>, isso porque, quando falo na tag html, isso implica em seu fechamento também. Se deixarmos sem o fechamento uma tag, estaremos criando uma situação de erro que pode complicar bastante o funcionamento do código, ou mesmo a exibição da página(isso será melhor abordado futuramente). A tag html diz ao seu navegador que esse é o início do documento. A última tag no documento é </html>. Essa tag diz ao seu navegador que esse é o fim do documento. O código entre <head> e </head> é o cabeçalho, e não é mostrado no interior da janela do browser. O texto entre as tags <title> e </title> é mostrado na barra de títulos da janela, e por fim, o conteúdo entre <body> e </body> são oque efetivamente o browser mostrará ao usuário.

Posteriormente, os dados dessas tag's poderão ser alterados dinamicamente(não significa que seja uma boa prática, mas é possível).

Tenho um desafio para você: procure sobre o docType. Falarei dele posteriormente.

Com o que programar em JavaScript

2008-11-11T15:08:00.000-02:00

Estou meio afastado do blog, mas venho trazendo a primeira dica relacionada ao desenvolvimento em JavaScript.

Apesar da pseudo simplicidade do JavaScript permitir que criemos código usando qualquer editor de textos, é importante termos uma ferramenta de apoio que agregue funcionalidades e agilidade no desenvolvimento. Dessa forma, venho recomendar o Aptana Studio para essa tarefa.

O Aptana é um programa (IDE) de desenvolvimento em HTML, JavaScript e CSS que permite edição desses formatos de maneira eficaz e rápida. Além disso, possui plugins de desenvolvimento para PHP, Python e Ruby. Além dessas características, permite o uso do SVN(controle de versões), e desenvolvimento para o iPhone.

Na realidade o Aptana é uma distribuição do eclipse, voltada para o front-side do site, portanto, quem já utilize o eclipse para outro tipo de programação pode usá-lo como plugin para sua versão do eclipse, mantendo apenas uma IDE. Eu o utilizo como IDE separada, até porque dificilmente edito html junto com Java.

Tenho um desafio para você: Depois de usar o Aptana Studio, dê uma olhada no Jaxer

Onde pode haver código JavaScript

2008-10-26T23:16:00.000-02:00

Existem 3 lugares que podem possuir código JavaScript:

dentro de alguns atributos de tag's como por exemplo onclick, onsubmit, onmouseover, dentre outros;
entre as tag's ;
dentro de arquivos com extensão .js incluídos no código HTML;

A ordem acima condiz com a ordem que o browser interpreta o JavaScript, ou seja, a ordem que o browser executará seu script.

A História do JavaScript

2008-10-20T20:28:00.000-02:00

JavaScript foi desenvolvido originalmente por Brendan Eich(da Netscape) sob o nome Mocha, posteriormente rebatizado para LiveScript e então para JavaScript. A mudança de nome de LiveScript para JavaScript coincide com a época em que a Netscape adicionou suporte a tecnologia Java no navegador Netscape.

O nome tem causado confusão, dando a impressão de que a linguagem é derivada de Java, e isso tem sido caracterizado por muitos como um truque de marketing da Netscape para dar ao JavaScript o selo de que era a linguagem de programação web do momento.

Microsoft chamou de JScript seu dialeto da linguagem para evitar problemas de marca. JScript foi suportado primeiramente no Internet Explorer 3.0 (Agosto, 1996), e incluia o Y2K-compliant funções de data, ao contrário do JavaScript que baseava-se na java.util.Date na época. Os dialetos são considerados tão semelhantes que os termos "JavaScript" e "JScript" são muitas vezes utilizados alternadamente.

Microsoft, no entanto, possui dezenas de motivos pelas quais JScript não é compatível com ECMA.

Netscape apresentou o JavaScript para ECMA International para a padronização resultando na versão padronizada chamado ECMAScript.

Fonte: http://en.wikipedia.org/wiki/Javascript

Linguagem tipada ou não-tipada

2008-10-20T19:32:00.000-02:00

O amigo Luís Mizutani enviou comentário com uma dúvida para o antigo endereço do blog, e transcrevo aqui:

Tenho algumas dúvidas básica:
Existe alguma vantagem ou desvantagem da liguagem tipada sobre a não tipada?
Em que casos pode ser obervado algum ganho de uma em relação à outra?
Neste caso poderíamos imaginar que as variáveis se comportariam como variáveis do tipo String?

Grato por prestigiar o blog, Mizutani. Vamos a resposta:

Linguagens tipadas necessitam que você obrigatoriamente informe o tipo de valor que a variável receberá. Isso garante que, se originalmente você quer um valor inteiro, não receberá uma String.

Linguagens não-tipadas não possuem essa obrigatoriedade, tendo um tipo geral (como var em javascript) que recebe qualquer tipo.

Enquanto a primeira garante um pouco mais de segurança no que se refere ao trânsito de dados entre variáveis(se você tentar atribuir um String para uma variável que espera um inteiro, ela não aceita e seu código não roda), a segunda aceitaria qualquer tipo em qualquer variável, oque minimiza a necessidade de ter que transformar dados de um tipo para outro quando trabalhar copm banco de dados por exemplo. Mas ambos pagam um preço por essas características.

Linguagens tipadas tendem a ter mais código para suas aplicações e sua curva de aprendizado pode ser maior.

Linguagens não-tipadas são mais simples em sua implementação, mas caso atribua algo errado, seu código pode fazer algo que você não esperava e será mais difícil encontrar o erro.

Pseudo facilidade do JavaScript

2008-10-19T01:04:00.000-02:00

Muito se engana quem olha o JavaScript como uma linguagem pobre ou fácil. Na verdade, possui poderosos recursos que podem “fazer chover de baixo para cima”, como costumo dizer.

A ilusão de que o JavaScript é fácil não se dá pela linguagem em si, mas sim por sua utilização. Por exemplo, é extremamente simples criar um código que imprime valores na tela, ou que dá um alerta de boas-vindas quando uma página é carregada, mas o controle de objetos tende a ser mais problemático quando não se conhece a linguagem. Algo simples como o momento em que o JavaScript é chamado pode fazer a diferença entre um código que funciona e um amontoado de letras que não faz nada.
Outra coisa que a torna acessível é o fato de não ser necessário grandes aparatos para criar um código. Veja o exemplo abaixo:

Sua função é exibir na tela valores de 0 à 9 como segue:

0123456789

Para testar esse código a única coisa necessária é um editor de texto(notepad) e um browser(Internet Explorer). Apenas colando o códico no notepad e salvando ele em C: com o nome de teste.htm já é possível vê-lo executar indo no Internet Explorer e digitando a URL file:///C:/teste.htm.

Um pouco (senão muito) dessa visão simplista do JavaScript perdeu-se recentemente com o advento da Web 2.0 e páginas que tornaram-se aplicações propriamente ditas, com maior interação usuário-site, tornado a experiência do usuário mais agradável.

Não me prolongando mais, digo, JavaScript é dito fácil para iniciantes, mas não significa que o código gerado de maneira fácil é o mais recomendado. Como iniciação na lógica de programação é uma ótima ferramenta mas como ferramenta web é que sua real força pode ser vislumbrada, quando feito de maneira organizada e consciente.

Iniciando - O Javascript

2008-10-18T23:38:00.000-03:00

Javascript é uma linguagem de programação leve, interpretada e com recursos de orientação a objeto. O núcleo de uso geral da linguagem foi incorporado no Netscape, Internet Explorer e em outros navegadores Web e aprimorado para programação Web com adição de objetos que representam a janela do navegador e seu conteúdo.

Com ele, uma página não precisa mais de HTML estático, mas sim, pode incluir programas que interagem com o usuário, controlam o navegador e criam conteúdo HTML dinamicamente.

Javascript assemelha-se sintáticamente às linguagens C, C++ e Java em seu núcleo, contendo instruções como if, laço while e operadores como &&. E as similaridades acabam aí. JAVASCRIPT NÃO É JAVA!

Em JavaScript, variáveis não precisam ter um tipo definido (é uma linguagem não-tipada). JavaScript é uma linguagem interpretada (o código que você cria, é o mesmo que será executado, sem necessidade de “traduzi-lo” para uma linguagem que a máquina entenda).

No próximo post, pretendo falar sobre a pseudo facilidade do Javascript.

Tenho um desafio pra você: Continue acompanhando!

2008-10-18T23:33:00.000-03:00

Há muito tempo procuro uma forma de registrar e dividir experiências, e agora acho que encontrei uma ótima forma. Muitos amigos meus gostariam de aprender sobre programação, e divido por aqui aquilo que humildemente sei. Através desse blog, percorrerei os caminhos do Javascript, desbravando seus mistérios e sua magia.

Tenho um desafio pra você: Acompanhar-me nessa jornada.