sábado, 25 de abril de 2009

:= Pascal EBNF =:

Programs and Blocks

program
program-heading block "."
program-heading
program identifier "(" identifier-list ")" ";"
block
declaration-part statement-part
declaration-part
[ label-declaration-part ]
[ constant-definition-part ]
[ type-definition-part ]
[ variable-declaration-part ]
procedure-and-function-declaration-part
label-declaration-part
label label { "," label } ";"
constant-definition-part
const constant-definition ";" { constant-definition ";" }
constant-definition
identifier "=" constant
type-definition-part
type type-definition ";" { type-definition ";" }
type-definition
identifier "=" type
variable-declaration-part
var variable-declaration ";" { variable-declaration ";" }
variable-declaration
identifier-list ":" type
procedure-and-function-declaration-part
{ (procedure-declaration | function-declaration) ";" }
procedure-declaration
procedure-heading ";" procedure-body |
procedure-heading ";" directive |
procedure-identification ";" procedure-body
procedure-body
block
function-declaration
function-heading ";" function-body |
function-heading ";" directive |
function-identification ";" function-body
function-body
block
directive
forward | compiler-defined-directives
statement-part
begin statement-sequence end

Procedure and Function Definitions

procedure-heading
procedure identifier [ formal-parameter-list ]
function-heading
function identifier [ formal-parameter-list ] ":" result-type
result-type
type-identifier
procedure-identification
procedure procedure-identifier
function-identification
function function-identifier
formal-parameter-list
"(" formal-parameter-section { ";" formal-parameter-section } ")"
formal-parameter-section
value-parameter-section |
variable-parameter-section |
procedure-parameter-section |
function-parameter-section
value-parameter-section
identifier-list ":" parameter-type
variable-parameter-section
var identifier-list ":" parameter-type
procedure-parameter-section
procedure-heading
function-parameter-section
function-heading
parameter-type
type-identifier | conformant-array-schema
conformant-array-schema
packed-conformant-array-schema |
unpacked-conformant-array-schema
packed-conformant-array-schema
packed array "[ " bound-specification " ]" of type-idnetifier
unpacked-conformant-array-schema
array "[ " bound-specification { ";" bound-specification } " ]"
of (type-identifier | conformant-array-schema)
bound-specification
identifier ".." identifier ":" ordinal-type-identifier
ordinal-type-identifier
type-identifier

Statements

statement-sequence
statement { ";" statement }
statement
[ label ":" ] (simple-statement | structured-statement)
simple-statement
[ assignment-statement | procedure-statement | goto-statement ]
assignment-statement
(variable | function-identifier) ":=" expression
procedure-statement
procedure-identifier [ actual-parameter-list ]
goto-statement
goto label
structured-statement
compound-statement | repetitive-statement | conditional-statement | with-statement
compound-statement
begin statement-sequence end
repetitive-statement
while-statement | repeat-statement | for-statement
while-statement
while expression do statement
repeat-statement
repeat statement-sequence until expression
for-statement
for variable-identifier ":=" initial-expression (to | downto) final-expression do statement
initial-expression
expression
final-expression
expression
conditional-statement
if-statement | case-statement
if-statement
if expression then statement [ else statement ]
case-statement
case expression of
case-limb { ";" case-limb } [ ";" ]
end
case-limb
case-label-list ":" statement
case-label-list
constant { "," constant }
with-statement
with record-variable { "," record-variable } do statement
actual-parameter-list
"(" actual-parameter { "," actual-parameter } ")"
actual-parameter
actual-value | actual-variable | actual-procedure | actual-function
actual-value
expression
actual-procedure
procedure-identifier
actual-function
function-identifier

Expressions

expression
simple-expression [ relational-operator simple-expression ]
simple-expression
[ sign ] term { addition-operator term }
term
factor { multiplication-operator factor }
factor
variable | number | string | set | nil | constant-identifier | bound-identifier | function-designator | "(" expression ")" | not factor
relational-operator
"=" | "<>" | "<" | "<=" | ">" | ">=" | "in"
addition-operator
"+" | "-" | or
multiplication-operator
"*" | "/" | div | mod | and
variable
entire-variable | component-variable | referenced-variable
entire-variable
variable-identifier | field-identifier
component-variable
indexed-variable | field-designator | file-buffer
indexed-variable
array-variable "[ " expression-list " ]"
field-designator
record-variable "." field-identifier
set
"[ " element-list " ]"
element-list
[ expression { "," expression } ]
function-designator
function-identifier [ actual-parameter-list ]
file-buffer
file-variable "^"

Types

type
simple-type | structured-type | pointer-type | type-identifier
simple-type
subrange-type | enumerated-type
enumerated-type
"(" identifier-list ")"
subrange-type
lower-bound ".." upper-bound
lower-bound
constant
upper-bound
constant
structured-type
[ packed ] unpacked-structured-type
unpacked-structured-type
array-type | record-type | set-type | file-type
array-type
array "[ " index-type { "," index-type } " ]" of element-type
index-type
simple-type
element-type
type
record-type
record field-list end
set-type
set of base-type
base-type
type
file-type
file of file-component-type
file-component-type
type
pointer-type
"^" type-identifier

Record Fields

field-list
[ (fixed-part [ ";" variant-part ] | variant-part) [ ";" ] ]
fixed-part
record-section { ";" record-section }
record-section
identifier-list ":" type
variant-part
case tag-field type-identifier of variant { ";" variant }
tag-field
[ identifier ":" ]
variant
case-label-list ":" "(" field-list ")"

Input/Output

output-list
output-value { "," output-value }
output-value
expression [ ";" field-width [ ":" fraction-length ] ]
field-width
expression
fraction-length
expression

Variable and Identifier Categories

identifier
letter { letter | digit }
file-variable
variable
referenced-variable
pointer-variable "^"
record-variable
variable
pointer-variable
variable
actual-variable
variable
array-variable
variable
field-identifier
identifier
constant-identifier
identifier
variable-identifier
identifier
type-identifier
identifier
procedure-identifier
identifier
function-identifier
identifier
bound-identifier
identifier

Low Level Definitions

variable-list
variable { "," variable }
identifier-list
identifier { "," identifier }
expression-list
expression { "," expression }
number
integer-number | real-number
integer-number
digit-sequence
real-number
digit-sequence "." [ digit-sequence ] [ scale-factor ] |
digit-sequence scale-factor
scale-factor
("E" | "e") [ sign ] digit-sequence
unsigned-digit-sequence
digit { digit }
digit-sequence
[ sign ] unsigned-digit-sequence
sign
"+" | "-"
letter
"A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M" | "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z" | "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z"
digit
"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
string
"'" string-character { string-character } "'"
string-character
any-character-except-quote | "''"
label
integer-number
constant
[ sign ] (constant-identifier | number) | string

:= Pascal =:

Definição de Tipos

Possibilita q declaração de seus próprios tipos de dados. Uma vez criado o novo tipo, pode-se declarar quantas variáveis quiser do tipo criado. Usa-se a palavra reservada Type para declarar um tipo de dado definido pelo programador.

A seção Type é declarada antes da seção Var, pois na seção Var pode-se declarar as variáveis que pertencem aos tipos padrão e aos tipos definidos pelo usuário.

type valor = real;
var salario : valor;

Vetores (Arrays unidimensionais)

O tipo vetor permite armazenar mais de um valor em uma mesma variável. Esta é dividida em posições, e cada posição pode receber um valor diferente, porém do mesmo tipo.

type
Vetor = array[1..100] of Real
var
Notas : Vetor;

Matrizes (Arrays bidimendionais)

Igual nas características do vetor, porém, possui mais de duas dimensões, ou seja, possui linhas e colunas.

type
Matriz = array[1..100, 1..100] of Real { onde: array[linha, coluna] }
var
Notas : Matriz;

Record (Registro)

Em um registro poderemos utilizar uma estrutura que agrupe várias informações, que podem ser de tipos de dados diferentes. Por esta razão, este tipo de dado é considerado heterogêneo. Em Pascal, os tipos registro devem ser declarados ou atribuídos antes das definições das variáveis, pois é muito comum ocorrer à necessidade de se declarar uma variável com o tipo de registro atribuído. Um tipo registro é declarado em Pascal com a instrução type em conjunto com a instrução record.

type
Pessoa = record
                    Nome, Endereco : string [35];
                    Fone : string [20]; 
                    Sexo : char;
                    Idade : byte;
                    Salario : real;
end;
var
funcionario, aluno : Pessoa;

Uma forma fácil de acessar os campos para preenchê-los é usando o comando with:

with data do
begin
       write(‘Digite um dia: ‘);
readln(dia);

:= Pascal =:

Comandos de entrada e saída

Os comandos de entrada permitem que o usuário informe dados ao programa, e os comandos de saída permitem que o programa mostre dados ao usuário.

Entrada: Read ou Realn à Read(<variável>), Readln(<variável>);

Saída: Write ou Writeln à Write(<variável>), Write(“texto”, <variável>), Writeln(<variável>), Writeln(“texto”, <variável>);

Estrutura de decisão

Comando if...then...else: if (se) realiza um teste de condicional que permite a implementação de desvios de execução dos comandos, dependendo da condição especificada.

Sintaxe: if <condição>
              then
                  <codigo1>
               else
                   <codigo2 >;

Comando case: é um comando condicional de múltipla escolha. Ao contrário do if, que permite somente a escolha da condição verdadeira ou falsa, case permite especificar duas ou mais escolhas.

Sintaxe: case: <expessão> of
             Opção1 : <código1>;
             Opção2 : <código2>;
             Opçãon : <códigon>;

Estrutura de Repetição

Estrutura While ... do: é uma estrutura de repetição condicional, também chamado de laço condicional ou loops, que se repete um conjunto de instruções enquanto uma dada condição for satisfeita (verdadeira).

Sintaxe: while <condição> do
                Instruções;

Estrutura for ... do: também é uma estrutura de repetição, porém contado. Ao invés de especificarmos uma condição que deve ser satisfeita para que o laço seja executado, o for possui uma variável de controle (contador) própria, que é incrementada automaticamente até que ela seja maior que o valor final estipulado.

Sintaxe: for variável := valor_inicial to valor_final do
                  instruções;

Estrutura repeat ... until: também é um laço de condicional como o while e for, porém existem uma pequena diferença: as instruções contidas dentro do repeat são executadas pelo menos uma vez, pois a condição é testada somente no final do repeat, no until;

Sintaxe: repeat
                Instruções;
             until <condição>

Sub-rotinas

O pascal permite a utilização de dois tipos de sub-rotinas: procedure (procedimento) e function (função). A diferença entre os dois tipos é que a função sempre retorna um valor após o seu processamento, enquanto o procedimento pode ou não retornar um valor.

Procedure: é uma estrutura de programa autônoma que está incluída num programa em Pascal. Nele podem ser colocados todos os elementos da linguagem Pascal, como se fosse um programa completo; isso é feito através de sua declaração. Um procedimento pode ser referido escrevendo simplesmente o seu nome seguido de uma lista opcional de parâmetros. Quando um procedimento é referenciado, o controle de execução do programa é automaticamente transferido para o início do procedimento. As instruções de execução dentro do procedimento são então executadas, tendo em conta quaisquer declarações especiais que sejam únicas para o procedimento. Quando todas as instruções de execução tiverem sido executadas, o controle passa automaticamente para a instrução imediatamente a seguir à da chamada do procedimento.

procedure <nome> ( parâmetros)
{ declaração de variáveis – locais }
  begin { início principal do procedimento }
         <instruções>
   end;

Function: Uma function, assim com uma procedure, é um bloco de programa, ao qual são válidas todas as regras estudadas de programação. Sua diferença em relação a uma procedure está no fato de retornar sempre um valor.

Function <nome> ( parâmentros) : <tipo>;
{ declaração de variáveis - locais }
begin { início principal da função }
     <instruções>
end;

sexta-feira, 24 de abril de 2009

:= Pascal =:

Operadores

Pascal possui 3 tipos de operadores aritméticos, relacionais e lógicos.
Operadores aritméticos: o resultado das expressões aritméticas são sempre numéricos. Os operadores para as expressões aritméticas são:

Operador

Exemplo

Descrição

Adição ( + )

2 + 2

Definida para operandos inteiros e reais. Se um ou os dois operandos forem reais, o resultado será real; se os dois forem inteiros, o resultado será inteiro.

Concatenação ( + )

Valor1 + “val”

Definida sobre operandos caracteres e strings. O resultado será string.

Subtração ( - )

5 – 3

Definida para operandos inteiros e reais. Se um ou os dois operandos forem reais, o resultado será real; se os dois forem inteiros, o resultado será inteiro.

Multiplicação ( * )

X * Z

Funciona da mesma maneira que a adição e subtração

Divisão ( / )

Y / X

Este operador de divisão só pode ser utilizado quando um dos operandos for real. O resultado também será real.

Divisão (div)

B div 2

Este operador de divisão só pode ser utilizado quando um dos operandos for inteiro.

Resto da divisão inteira ( mod )

A mod 2

Este operador retorna o resto da divisão.

Operadores relacionais: os operadores relacionais permitem comparações entre valores ou expressões de tipos equivalentes, retornando sempre valores lógicos. São eles:

Operador

Exemplo

Descrição

Maior que ( > )

X > Y

Retorna true se X for Maior que Y e false caso contrário.

Menor que ( < )

X < Y

Retorna true se X for Menor que Y e false caso contrário.

Igual a ( = )

X = Y

Retorna true se X for igual a Y e false caso contrário

Diferente de ( <> )

X <> Y

Retorna true se X for diferente de Y e false caso contrário.

Operadores lógicos: os operadores lógicos compõem expressões lógicas, que também retornam valores lógicos (true ou false). Os operadores lógicos são:

a) AND – e
b) OR – ou
c) NOT – não

O resultado de cada expressão que envolve estes operadores é dado pela tabela-verdade de cada um deles. Em pascal as expressões são consideradas a seguinte ordem de precedência:

1º) funções e parênteses
2º) not
3º) *, /, div, mod, and
4º) +, -, or
< 5º) <>, =, >, <, >=, <=



<anterior Próximo>

:= Pascal =:

Definição

Pascal é uma linguagem de programação estruturada na década de 70 pelo suíço Niklaus Wirth, professor da Faculdade Politécnica de Zurique, na Suíça, que colocou este nome em homenagem ao matemático Blaise Pascal.
Pascal é muito usada para fins acadêmicos, pois é uma linguagem de alto nível muito próxima da linguagem escrita.

Palavras reservadas

Palavra

Descrição

And

Operador (booleano)

Array

Tipo

Begin

Marcador de bloco

Case

Instrução

class

Tipo

Const

Declaração ou diretiva (parâmetros)

Div

Operador

Do

Instrução

Downto

Instrução (parte do for)

Else

Instrução (parte do if ou case)

End

Marcador de bloco

File

Tipo

For

Instrução

Function

Declaração

Goto

Instrução

If

Instrução

In

Operador (conjunto) - estrutura de projeto

Label

Declaração

Mod

Operador (matemático)

Nil

Valor

Not

Operador (booleano)

Of

Instrução (parte do case)

Or

Operador (booleano)

Packed

Diretiva (registro)

Procedure

Declaração

Program

Estrutura de programa

Record

Tipo

Repeat

Instrução

Set

Tipo

String

Tipo

Then

Instrução (parte do if)

To

Instrução (parte do for)

Type

Declaração

Until

Instrução

Var

Declaração

While

Instrução

With

Instrução

Proximo>

terça-feira, 24 de fevereiro de 2009

SELETORES JQUERY 2/3

Continuação do post anterior

- Seletores com filtros (cont.) -

* $(seletor:even) - Acessa os elementos pares em um conjunto de elementos indicados pelo seletor. Seletor exclusivo do framework;

* $(seletor:odd) - Acessa os elementos ímpares em um conjunto de elementos indicados pelo seletor.Seletor exclusivo do framework;

* $(seletor:eq(índice)) - Acessa o elemento da posição indicada pelo argumento 'indice' de um conjunto de elementos acessados pelo 'seletor'. Seletor exclusivo do framework;

* $(seletor:gt(índice)) - Acessa todos os elementos selecionados pelo seletor a partir do índice especificado, ou seja, acessa os elementos do conjunto selecionados pelo seletor com índices maiores do que o especificado. Seletor exclusivo do framework;

* $(seletor:lt(índice)) - acessa todos os elementos selecionados pelo seletor anteriores ao índice especificado, ou seja, acessa os elementos do conjunto selecionados pelo seletor com índices inferiores ao que o especificado. Seletor exclusivo do framework;

* $(":header") - acessa todas os elementos do tipo cabeçalho (h1, h2, ..., h6). Seletor exclusivo do framework;

* $(seletor:animated) - acessa os elementos que possuem eventos de animação, que estão no conjunto selecionado pelo seletor;

Aplicando os seletores:

Exemplo 04

Comentando o código

linha 4: Acessa as tags 'tr' pares da tabela e troca a cor de fundo para vermelho;
linha 5: Acessa as tags 'tr' ímpares da tabela e troca a cor de fundo para verde;
linha 6: Acessa a tag 'td' que está na posição 6 na tabela(l.24), lembrando que em javascript o índice começa com 0, e troca a cor de fundo por amarelo;
linha 7: Acessa as tags 'td' apartir da posição 12 da tabela (l.28) e troca a cor de fundo para azul;
linha 8: Acessa as tags 'td' anteriores da posição 1 da tabela (l.17) e troca a cor de fundo para cinza;
linha 9: Acessa as tags 'h3', 'h4' e 'h5' existente no documento(l.13) e troca a cor de fundo para vermelho;

- Seletores de texto -

$(seletor:contains(string)) - Procura pelo texto informado nos elementos selecionados pelo seletor. Este seletor é case sensitive, ou seja, o texto "Valor" é diferente de "valor". Seletor exclusivo do framework;

$(seletor:empty) - Acessa todos os elementos vazios acessados pelo seletor;

$(seletor1:has(seletor2)) - Acessa todos os elementos selecionado pelo seletor1 que possuem os elementos selecionado pelo seletor2. Seletor exclusivo do framework;

$(seletor:parent) - Acessa todos os elementos que tenham filhos, considerando que texto como um nó filho. Seletor exclusivo do framework.

Aplicando os seletores:

Exemplo 05

Comentando o código

linha: Acessa as tags 'div' e procura pelo texto 'framework'(linha tal) dentro delas e troca a cor de fundo por vermelha;
linha: Acessa as tags 'div' e procura por alguma que esteja vazia(linha tal) e troca a cor de funda para velho;
linha: Acessa as tags 'div' procurando por pelo menos uma ocorrência da tag 'span'(linha tal);

Referencias:

jQuery A Biblioteca do programador JavaScript, Maurício Samy Silva, novatec

------------------------------

Bom pessoal é isto ai!! jQuery é uma ferramenta de trabalho bastante ampla e muito útil no dia a dia de desenvolvedores web, ficarei devendo o restante dos seletores para vocês, um abraço e até o proximo post.

SELETORES JQUERY - 1/3

Olá pessoal !! No post passado fiz uma pequena introdução sobre jQuery, falei um pouco de cada coisa, neste reduzei um pouco mais o foco, continuarei falando sobre o jQuery, entretanto, falarei especificamente sobre seletores jQuery, foi uma sugestão do prof° Jackson, isso mesmo, o professor culpado pelo post anterior é o mesmo culpado por este, e não para por ai, o desafio é bem maior, começarei a partir deste uma série de post falando sobre cada tema específicos de jQuery, bom então vamos lá que o conteúdo é muito.

Bom é importante esclarecer algumas coisas antes de começar a mostrar código e falar sobre eles. E para que o conteúdo seja bem entendido por todos é importante saber o que são seletores jQuery? Para que eles servem?

Para responder estas perguntas irei falar um pouco sobre CSS. Cascading Style Sheets (CSS) traduzindo folha de estilos em cascata, sua principal utilização é para definir layout de documentos HTML, que através de sua linguagem de estilos, controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Para aplicar/manipular estes itens de estilos é preciso identifica as tag do documento HTML onde serão aplicadas, para isso a CSS usa uma técnica chamada de seletores, que são famosos por sua rapidez no acesso as tags.

John Resing sabendo desta rapidez de acesso, resolveu utilizar os poderosos seletores da CSS 3 na sua biblioteca(jQuery), por este e outros motivos jQuery é considerada uma das mais rápidas biblioteca JavaScript.

Com que estas informações já somos capazes de responder as perguntas feitas antes:
O que são seletores jQuery ? R: São técnicas que a biblioteca jQuery utiliza para identificar/acessar tags no documento HTML;
Para que eles servem? R: Servem para acessar as tags que se quer manipular/inserir eventos estilos, estilos, animações e outras infinidades de coisas que jQuery permite.

- Seletores simples -

* Seletor de id - $(“#id”) : Acessa o elemento exato que possui o valor do atributo 'id' informado no argumento. Este seletor acessa um único elemento, ou seja, se você tiver mais de um elemento com 'id' igual, ele acessará o primeiro elemento.

* Seletor de classe - $(“.class”): Acessa todos os elementos que possuem o valor do atributo 'class' informado no argumento.

* Seletor de elemento - $(“elemento”): Acessa todos os elementos que seja igual ao informado no argumento;

* Grupo de seletores - $(seletor1, seletor2, ..., seletorN): Acessa a combinação de resultados de todos os seletores informados como argumento;

Aplicando os seletores:

Exemplo 01
Comentando o código

linha 6: Acessa a tag 'button'(l.13) através do seletor de elemento e passa um evento para seu atributo onclick;
linha 7: Acessa a tag 'h1'(l.14) através de seu id utilizando o seletor de id e modificando o fundo para a cor vermelha;
linha 8: Acessa as tags 'div'(l.15e16) através do nome da classe utilizando o seletor de classe e modificando o fundo para a cor verde;

Percebam que nestes seletores as sintaxes são bem associativos com suas funcionalidades, não tem mistério, bem longe da nossa antiga realidade "document.getElementById(id).style.background = "red";"(uuhr! bate na madeira).

- Seletores compostos -

Apartir destes seletores já se exige um pouco mais de atenção, quanto as suas funcionalidades

* Seletor descendente - $(ancestral descendente): Acessa toda ocorrência do elemento descendente do ancestral especificado;

* Seletor de elemento filho direto - $(pai > filho): Acessa os elementos filhos imediatos do elemento pai, desconsiderando eventuais descendentes com nível mais baixo de parentesco;

* Seletor próximo - $(anterior + próximo): Acessa a primeira ocorrência do elemento próximo, logo após a identificação do elemento anterior;

* Seletor de irmãos - $(anterior ~ irmãos): Acessa os elementos irmãos(no mesmo nível) logo após o elemento especificado;

Aplicando os seletores:

Exemplo 02
Comentando o código

linha 4: Acessa a tag 'label'(l.14) que possui como pai uma tag 'p'(l.13);
linha 5: Acessa a tag 'span'(l.15,17) que são descendentes da tag 'div';
linha : Acessa a 1° ocorrência tag 'p'(l.20) que após a tag 'div'(l.19);
linha: Acessa a todas ocorrência da tag 'p' no mesmo nível e após a ocorrência da tag 'span': p(l.23) e span(l.22);

Obs: Nos seletores compostos pode ser utilizado qualquer tipo de seletor, não apenas o de elemento, utilizou-se apenas este seletor para melhorar no entendimento e facilitar na explicação dos exemplos. Portanto, como diria uma professora minha “você é livre” para escolher o seletor.

- Seletores com filtros -

São do tipo pseudo-seletores que filtram uma condição particular de um seletor simples ou composto.

* $(seletor:first) - Acessa o primeiro elemento do conjunto de elementos selecionados pelo seletor;

* $(seletor:last) - Acessa o ultimo elemento do conjunto de elementos selecionados pelo seletor;

* $(seletor1:not(seletor2)) - Acessa um conjunto de elementos de acordo com o seletor1, porém são retirados o(s) elemento(s) acessados pelo seletor2;

Aplicando os seletores:

Exemplo 03

Comentando o código

linha: Acessa o primeiro elemento da lista (linha tal);
linha: Acessa o ultimo elemento da lista (linha tal);
linha: Acessa todos os elementos da lista, menos o ultimo elemento;

Calma pessoal ainda não acabou, continua no próximo post

quinta-feira, 19 de fevereiro de 2009

jQuery

Olha eu de novo !! Bom no meu segundo post vou falar sobre assunto que irei trabalhar bastante nestes próximos dias, e o culpado por eu ter que fazer isso é o prof° Jackson, ops !!! esqueci de apresentá-lo, Jackson é professor do CEULP/ULBRA ministra as maiorias das matérias de programação do curso de Sistemas de Informação, na qual eu sou aluno, e também é coordenador do projeto Fábrica de Software e chefe do Portal, na qual, sou membro e funcionário respectivamente. Portanto, nos lançou o desafio para aprender sobre um framework de JavaScript chamado jQuery, então vamos mostrar um pouco da lição de casa que o professor passou !!

jQuery é uma biblioteca JavaScript lançada em janeiro de 2006 por Jon Resing, na qual usou como slogan do seu projeto "write less, do more" (escrever menos, fazer mais), Resing trabalha na Mozilla Corporation e é autor do livro Pro JavaScript Techniques.

Algumas características do framework

  • DOM - acesso direto usando os poderosos seletores das CSS 2.1 e CSS 3, e alguns seletores criados da biblioteca;
  • Manipuladores de conteúdo - sem limitações e com pouquíssimo código;
  • Eventos - uma infinidade de efeitos e animações que vai deixar o seu site irreconhecível (pra melhor é claro);
  • AJAX - É claro não podia faltar e bem mais fácil de utilizar
  • Encadeamento – admite programação encadeada, ou seja, cada método retorna um objeto;
  • Plug-ins - Por ser uma biblioteca de código aberto e extremante extensível, jQuery deixa aberta a porta para que qualquer um possa criar plug-ins, que utilizem e incrementem mais as suas funcionalidades. E a porta parece totalmente escancarada, pois atualmente existem vários plug-ins e a tendência é aumentar, visto que a cada dia, a biblioteca ganha mais admiradores (usuários).
jQuery veio com uma solução tanto para aqueles velhos probleminhas de compatibilidade entre browser, acessibilidades entre outros, como também aqueles utilitários que você sempre quis ter no seu site mais o script que você copiou de outro, não funciona no seu, ou seja, foi desenvolvido orientado a página (pra não dizer POG). Enfim é por estas e outras (muitas outras) coisas que jQuery vem ocupando espaço e merece, certamente a nossa atenção, para usufruir de tudo o que ele tem a nos oferecer.

Então, sem mais delongas, vamos aos exemplos: $(document).ready(function(){ … } – executa a função assim que a árvore do documento tenha sido carregado, quase equivalente a declaração do JavaScript window.onload, porém, mais otimizado, já que função do jQuery não espera a carregamento total da página.
Toggle(...) – Este evento permite executar duas ou mais, funções seguidas e alternadamente mediantes cliques sucessivos.
$(‘a’), $(‘#div’) – funções de seleção de objeto DOM que utiliza os famosos seletores da CSS.
Animate(...) – função que permite a manipulação das propriedades CSS dos elementos.
Neste exemplo assim que for clicado no tag a dispara o evento do toggle() que se encarrega de alternar as funções, que buscam pelo elemento com o id #div1 e insere/altera as propriedades CSS dele.
Exemplos utilizando plug-in:
$('#tabela').tablesorter(); - inicia o documento com a tabela já ordenada de crescente de cima para baixo.

$('#tabela').tablesorter( {sortList: [[0,0], [1,0]]} ); - altera a ordenação de acordo com o coluna específica, define a ordem em que o as colunas serão ordenadas através do parâmetro [[columnIndex, sortDirection], ... ], onde columnIndex indica o qual é a coluna, e sortDirection define qual será a ordem ordenado, sendo 0 para crescente (ascendente) e 1 para decrescente (descendente). Perceba que foi utilizado as tags thead e tbody, é através delas que a plug-in separa o corpo e o cabeçalho da tabela.
Bom é isso ai jQuery realmente facilitou muito o nosso trabalho !! Até a próxima !!!

Referências :
http://tablesorter.com/docs/

http://docs.jquery.com/Main_Page

http://ejohn.org/

Amostra do Livro – jQuery A Biblioteca do programador JavaScript, Maurício Samy Silva, novatec

Hello World Blog !!!

Olá pessoal, sejam bem-vindos a este "barco", e já vou avisando para colocarem o cinto e se segurarem, porque que ele está sendo guiado para o infinito mundo da busca pelo conhecimento! E está sempre aberto para receber mais passageiros ou tripulantes, e nesse barco não têm classe econômica não, é tudo área vip, portanto, vai se acomodando e pegue o cardápio que está recheado de coisas boas !!!

Pois é, este é o meu primeiro blog e também o meu primeiro post, sei que por enquanto poucas pessoas lerão, mas a viagem é longa e daqui a pouco estará cheio de passageiros e tripulantes para discutirmos sobre variados assuntos, agradeço a presença (se puder deixe sempre seu comentário) e convido para sempre voltar, que prometo postar coisas novas e em curtos prazos de tempo. Então até mais, valeu !!! :D