Como prometido, aqui estão alguns exemplo concreto de JavaScript discreta, ferramenta versátil e poderosa, se usado corretamente. No Site / Blog Ryan Johnson você pode baixar dois exemplo muito bom de JavaScript discreta:
Ryan Johnson, em seu script, a biblioteca usa Prototype , como muitos do resto. Ele também escreveu algumas extensões para a relativamente Prototype , então introduzido - de uma forma diferente - na última versão da biblioteca.
Use Prototype para ilustrar a operação de código JavaScript discreta é geralmente mais conveniente - como veremos mais tarde, no entanto, aqui é um bruto primeiro exemplo que não requer bibliotecas externas. Começamos por relembrar que o conceito por trás do JavaScript discreta é começar a partir de qualquer página HTML (padrão e não necessariamente escrito por nós - o mais importante ponto forte) e utilizar Javascript para fazer algumas mudanças.
Schematimamente o conceito é para executar uma função que analisa o HTML, em seguida, percorre o DOM e em pontos específicos para adicionar ou alterar a funcionalidade. Normalmente utilizam dois métodos para executar código Javascript para carregar uma página: a primeira é que você não coloque o código em qualquer função, e deixar que o navegador execute código imediatamente enviados para o ponto onde a chamada é exibida:
O mesmo resultado é obtido por incluindo o código:
1
| "http://miosito.com/miocodice.js" >< / script > < roteiro src = "http://miosito.com/miocodice.js"> </ script de > |
No entanto, quando ele deve operar no DOM de uma página que assume um carregado totalmente, que tudo TAG da página está presente e disponível para ser rastreado. Portanto, a melhor solução se torna o único a ter certeza de que a página está concluída. Isto é possível por envolver o evento onload do tag body, por exemplo, que é liberada quando a carga da página é concluída.
1
2
3
| miafunzione ; janela onload = myfunction.;
/ / Ou, que é o mesmo
function ( ) { alert ( "Hello" ) ; } . onload janela = function () {alert ("Olá");} |
Ser evitada, é claro, a solução canónica que seria uma atenuação para chamar intrusivo:
1
| "miafunzione()" > < corpo onload = "myfunction ()"> |
Outra técnica, mais grosso e igualmente intrusivos (como seria forçar o usuário final para colocar o código em um determinado local), é inserir nosso script no final do documento antes de o corpo da tag de fechamento, agora técnica obsoleta e usados em casos raros (ver Google Analytics!).
Ainda melhor é a utilização do método abaixo:
1
2
3
4
5
6
7
| window. addEventListener ) { if (addEventListener window.) {
"load" , miafunzione , false ) ; addEventListener janela. ("load", myfunction, false) ¾ Í
( window. attachEvent ) { } Else if (window. attachEvent) {
"onload" , miafunzione ) ; janela. attachEvent ("onload", myfunction) ¾ Í
{ Else {}
createSubMenus; janela. onload = createSubMenusÍ ¾
} |
Mesmo este pedaço de código é colocado em uma função. Ele vai adicionar um ouvinte de eventos para o evento de carga da janela, chamando a nossa função miafunzione() . . Os navegadores modernos como o Firefox por exemplo, vai usar a função addEventListener() definido no DOM Nível 2, enquanto o Internet Explorer irá usar a sua função proprietária attachEvent() . No entanto não temos a perfeição, desta forma, na verdade, ele vai substituir todos - se houver - eventos onload criados por outros scripts, o que não é realmente "não intrusiva".
Para resolver este problema rapidamente, que, devido ao comportamento diferente do browser seria menos complicado explicar aqui, você deve usar como libreirie Prototype fornecendo método un'elengantissimo para superar o problema:
1
| window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; . Evento Observar (window, 'load', function () {alert ("Olá");}); |
A sintaxe é muito óbvio e espetacular! A vantagem para aqueles que não tinham entendido, é que você pode escrever:
1
2
| window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; . Evento Observar (window, 'load', function () {alert ("Olá 1");});
window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; . Evento Observar (window, 'load', function () {alert ("Olá 2");}); |
No carregamento da página será mostrado antes o alerta "Olá 2" e então o alerta "Olá 1". Basicamente você carregar em um (Input Output Sobrenome) FILO uma pilha, assegurando a execução de todos os eventos ligados ao carregar o documento exatamente o que foi desejado. Desta maneira, uma página pode carregar - virtualmente - JavaScript discreta sem fim que enganchar para carregar o documento.
Mas o que você pode fazer com esta técnica? Muitas coisas interessantes. Um exemplo que podemos comentar (ver também Prototype: o uso do cifrão duplo ($ $) ) vem Tobie Langel . Com poucas linhas de código e importação de bibliotecas Prototype e Scriptaculous que você pode dar um belo efeito à âncora clássico de nossas páginas. Primeiro, crie uma página HTML com o seguinte código:
1
2
3
4
5
6
7
8
| = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < um href = "# capítulo 1"> Vai no Capítulo 1 </ um > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... um monte 'de < p > </ p > .... apenas como um exemplo "capitolo1" > Capitolo 1 < / h1 > < h1 id = "capítulo 1"> Capítulo 1 </ h1 > |
Incluir a página:
1
2
3
4
5
6
7
8
9
10
11
12
| "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < roteiro src = "prototype.js" type = "text / javascript" charset = "utf-8"> </ script de > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < roteiro src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "utf-8"> </ script de > "text/javascript" language = "javascript1.2" > < roteiro type = "text / javascript" language = "JavaScript1.2"> Event.observe (window, 'load', function () { $ $ $ ('A [href ^ = #]: não ([href = #])') Cada (function (elemento) {. element.observe função ('click', (evento) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (evento); bindAsEventListener (elemento)) }) }) </ script de > |
Graças a "usar Event.observe() função e dois dólares ($ $) você pode facilmente modificar o comportamento da âncora clássico. Neste caso, uma nova função está ligado às cargas de páginas HTML. Ao levar o evento de carga é rastreada todos os links no DOM (Tag <A>) com href que começa com um sustenido (#, excluindo o com apenas o hash!). Para estes elementos é uma função ligado ao evento de clique, semelhante ao que foi feito com a carga do documento. Neste ponto entra em jogo Scriptaculous que produz um efeito de rolagem para o punatato elemento do nosso link - modificado!
Leia mais ...
Permitindo aos usuários interagir com uma página da Web nos últimos anos tem produzido um aumento significativo no uso de client-side scripting: código Javascript pode responder em tempo real e manipular uma variedade de informações. A Web 2.0 é a expressão máxima dessa capacidade de interação, no qual o usuário final - o usuário a participar activamente na construção e evolução "do site, interagindo com ele e ajudar a nós mesmos. É conhecido como User-Generated Content (UGC ou - conteúdo gerado pelo usuário), que vê o "navegador" definitivamente não é passivo!
Para atingir essa interação, permitindo que o usuário final adicionar a sua contribuição, nós desenvolvemos uma série de técnicas que mudaram a aparência e comportamento de páginas Web (estático até agora, mas agora semelhante à das aplicações tradicionais de Desktop) nos últimos anos. Alterar o conteúdo de uma página, enviar arquivos, dando seu voto a um vídeo ou um documento, registrar ou alterar seus dados pessoais, são apenas algumas das operações adaptações em muitos serviços (2,0 beta) na Web
Leia mais ...
Escolha a tecnologia para usar no desenvolvimento de um aplicativo da Web é de vital importância, para não se encontrar em apuros logo depois. O tipo de aplicação web, as suas características operacionais, são o primeiro ponto a ter em conta para escolher o FrameWork e tecnologias relacionadas.
Tenho muitas vezes discutida a eficácia do script JavaScript contra diferentes tecnologias como o Adobe Flash ou Java. No entanto, é importante salientar um aspecto importante muitas vezes ignorado: o acesso ao DOM Javascript, neste caso, o candidato (se não a única) um favorito para este tipo de operação..
Ferramentas com snap , por exemplo, operar com um mecanismo simples: quando a página HTML é carregada (e após a introdução do carregamento de scripts JavaScript) é para digitalizar a página e acrescentou um novo código HTML em pontos especiais. No caso de snap identifica todos os links para páginas externas (ou na configuração interna da última edição), o <A> TAG para indenderci. Estes são modificados de modo que no mouse para abrir um diálogo anterpima de links (ver neste blog muito, por exemplo).
Não só de encaixe , mas muitos outros scripts JavaScript, basicamente, fazer a mesma coisa. Ultimamente, esta técnica é amplamente utilizada pela biblioteca Prototype , que fornece uma variedade de métodos (como a famosa dupla de dólares, ou $ $ $ - ver Prototype: o uso do cifrão duplo ($ $) ) é a faixa que a mudança - a mosca - os elementos de uma página HTML.
Navegando pelo DOM HTML é, portanto, tarefa específica de Javascript. Historicamente, inter alia, JavaScript foi introduzido a fim de ler e escrever o conteúdo de uma página HTML.
Por exemplo, se quiséssemos fazer algumas mudanças para uma página HTML usando o Adobe Flash, aggorgeremmo nós - mais cedo ou mais tarde - para ser forçado a chamar uma função JavaScript. O novo ActionScript 3,0, por exemplo, fornece uma classe ( ExternalInterface ) apropriado para esta finalidade. – o fscommad() per chiamare una funzione Javascript: Uma vez (em versões anteriores do ActionScript) usamos o comando getURL() - agora substituído por uma melhor flash.net.navigateToURL() - ou fscommad() para chamar uma função JavaScript:
1
| ) ; getURL ("javascript: myFunction ()"); |
Além disso:
A classe ExternalInterface é a API externa, uma interface de programação de aplicativo que permite a comunicação direta entre o ActionScript e do Flash recipiente Player, por exemplo, uma página HTML com JavaScript, ou uma aplicação desktop com o Flash Player incorporado.
Note-se que "a aplicação desktop" que tanto lembra Apollo!
Hoje, graças a ExternalInterface , você pode chamar uma função JavaScript para pelo menos mais limpo (esta classe permite o gerenciamento muito mais eficiente do que getURL() , como passagem de parâmetros):
1
2
3
4
5
6
| / * Chama o externos função "SomaNumeros"
passando dois parâmetros, e atribuindo resultado dessa função
para o "resultado" variável * / uint = 3 ; var param1: uint = 3; uint = 7 ; var param2: uint = 7; uint = ExternalInterface . call ( "addNumbers" , param1 , param2 ) ; var resultado: uint = ExternalInterface chamada ("SomaNumeros", param1, param2);. |
1
2
3
4
5
6
| <<script>! -
/ / Adiciona dois números, e envia o resultado de volta para o ActionScript
num1 , num2 ) { SomaNumeros função (num1, num2) {
num1 + num2 ) ; return (num1 + num2);
}
/ / -> </ Script> |
O que podemos concluir então? Entre os vários quadros e bibliotecas disponíveis a análise inicial do projeto que pretende alcançar é de suma importância. Erros nesta fase pode afetar seriamente as fases subsequentes de qualquer projeto Web2.0. JavaScript, então, que supera tudo quando ele precisa interagir com o DOM.
Leia mais ...
Com a última versão do Prototype, Andrew , e Christophe ter acelerado e melhorou o "dólar duplo" ( $ $ utilitários ), que permite que você selecione um item especificando o disco (quase todos os seletores CSS3 suportados pelas especificações).
A utilidade desse recurso vai além dos US $ popular, que pode ser útil, mas, em última análise, não realiza nenhuma operação digna de nota. Os utilitários "de dois dólares" ($ $), mas na verdade permite que você selecione qualquer tipo de item, o que lhe dá grandes ferramentas para filtrar elementos no DOM.
Aqui estão alguns exemplos retirados do site oficial:
1
2
3
4
5
| ) ; // -> Tutti i DIV del documento. $ $ $ ('Div') / / -> Tudo o documento DIV. Mesmo que document.getElementsByTagName ('div')!
) ; // -> Uguale a $('contents'), ma ritorna sempre un array. $ $ $ ('O conteúdo #') / / -> O mesmo que $ ('conteúdo'), mas ele sempre retorna um array.
) ; // -> Tutti fli elementi LI con class 'faux' $ $ ('Li.faux') / / -> Todos os elementos FLI LI com 'falso' classe
) ; // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel $ $ ('Conteúdo # a [rel]') / / -> Todos os TAG A (links) abaixo de um elemento com ID "conteúdo" e com um atributo rel
) ; // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!) $ $ $ ('A [href = "#"]') / / -> Todos os TAG A (links) com um valor de atributo href com "#" (eyeew!) |
A força, no entanto, reside na possibilidade de exclusão de alguns artigos a favor de outros, por exemplo:
1
| ) ; // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow" $ $ $ ('A: não ([rel = nofollow ~])') / / -> TAG All A (links), excluindo aqueles que contêm um rel atributo definido como "nofollow" |
Ainda mais interessante é:
1
| ) $ $ $ ('A [href ^ = #]: não ([href = #])') |
Isso, na prática, todos localizados em TAG com o atributo href que começa com '#', mas não leva em conta aqueles que são iguais a '#' só. Em outras palavras, ignora os links que apontavam para um ID válido!
Esta característica única de ($ $) tem inspirado Tobie Langel para criar um script simples (desarmamento) pode adicionar um efeito muito bonito quando se desloca dentro de uma página HTML simples você se move para Âncoras, com a técnica - apenas - href = "#".
Para uma demonstração clique aqui .
Leia mais ...
Últimos Comentários
Rosanna : Alguém pode me dizer como faço para excluir o Snap Shots janela que se abre automaticamente quando eu ...
bendito Maresca : Eu não posso fazer download de qualquer skypemote me spiegaaa
Mateus : Olá a todos, infelizmente o Google não permite o uso da API para o Flash, mas vai ...
Giovambattista Fazioli : @ GM: Se você fazer upload de imagens para um servidor diferente (que o WordPress não pode ...
GM : Oi, desculpe ressuscitar um post antigo, mas eu espero que você possa me dar uma mão. Como eu, com este método, ...