close

JavaScript

Ir para a navegação Ir para a pesquisa
linguagem de programação JavaScript
Javascript-736400 960 720.png
AutorBrendan Eich
Data de origem1995
Última versão1.8.5
ParadigmasProgramação de eventos e objetos, funcional
Digitandofraco
Extensões comuns.js
Influenciado porScheme , Self , Java , C , Python , Awk , HyperTalk
InfluenciouActionScript , AtScript , CoffeeScript , Dart , JScript .NET , Objective-J , QML , TypeScript , LiveScript
Implementação de referência
ImplementaçãoKJS , Rinoceronte , Macaco -Aranha , V8 , Presto , Chakra
Local na rede Internetdeveloper.mozilla.org/it/docs/Web/JavaScript

Na ciência da computação o JavaScript é uma linguagem de programação multiparadigma orientada a eventos , comumente usada em programação Web do lado do cliente (posteriormente também estendida ao lado do servidor ) para a criação, em sites e aplicações web, de efeitos dinâmicos interativos através de funções de script invocadas por eventos acionados por sua vez de várias maneiras pelo usuário na página da web em uso ( mouse , teclado , carregamento de página, etc ...).

Originalmente desenvolvido por Brendan Eich da Netscape Communications sob o nome de Mochan e mais tarde LiveScript , foi posteriormente renomeado como " JavaScript " e foi formalizado com uma sintaxe mais próxima da linguagem Java da Sun Microsystems ( que foi adquirida em 2010 da Oracle ). Padronizado pela primeira vez em 1997 pela ECMA sob o nome ECMAScript , o padrão mais recente, datado de junho de 2022, é ECMA-262 Edição 13 [1] e também é um padrão ISO ( ISO / IEC 16262).

Descrição

As funções de script, portanto, usadas na lógica de apresentação , podem ser convenientemente inseridas em arquivos HTML , em páginas JSP ou em arquivos separados especiais com a extensão .js e então recuperados na lógica de negócios . Recentemente seu campo de uso foi estendido aos chamados Hybrid Apps (apps híbridos), com os quais é possível criar aplicativos para vários sistemas operacionais usando um único código-fonte baseado em JavaScript, HTML e CSS .

Java, JavaScript e JScript

A mudança de nome de LiveScript para JavaScript ocorreu na época em que a Netscape incluía suporte para a tecnologia Java em seu navegador Netscape Navigator . [2] A escolha do nome provou ser uma fonte de grande confusão. Não existe uma relação real entre Java e JavaScript; suas semelhanças estão principalmente na sintaxe (derivada em ambos os casos da linguagem C ); suas semânticas são bem diferentes e, em particular, seus modelos de objetos não estão relacionados e são visivelmente incompatíveis.

Dado o sucesso do JavaScript como linguagem de enriquecimento de páginas web , a Microsoft desenvolveu uma linguagem compatível, conhecida como JScript . A necessidade de especificações comuns foi a base do padrão ECMA 262 para ECMAScript , do qual oito edições foram publicadas desde que o trabalho começou em novembro de 1996 [3] .

Aspectos estruturais

As principais características do JavaScript são:

Outros pontos de interesse: Em JavaScript do lado do cliente, o código é executado diretamente no cliente e não no servidor . A vantagem desta abordagem é que, mesmo com a presença de scripts particularmente complexos , o servidor web não corre o risco de sobrecarregar, pois o trabalho é feito pelo cliente. Uma desvantagem é que, no caso de scripts particularmente grandes, o tempo de transferência da rede pode se tornar excessivamente longo. Além disso, qualquer informação que requeira acesso a dados armazenados em um banco de dados remoto deve ser enviada de volta para uma linguagem que realiza fisicamente a transação , para então retornar os resultados para uma ou mais variáveis ​​JavaScript; tais operações requerem um novo carregamento da própria página. No entanto, esses limites foram amplamente superados com o nascimento do AJAX .

Alguns outros recursos JavaScript notáveis:

Incompatibilidade

As várias implementações de JavaScript, como já aconteceu com o HTML, muitas vezes não estão em conformidade com os padrões, mas são construídas para funcionar com um navegador web específico e um conjunto de versões específicas do mesmo. O padrão ECMAScript atual deveria teoricamente ser a base de todas as implementações JavaScript, mas na prática os navegadores Mozilla (e Netscape ) usam JavaScript , o Microsoft Internet Explorer usa JScript , e outros navegadores como Opera e Safari usam outras implementações ECMAScript , muitas vezes com não- recursos padrão para permitir compatibilidade com JavaScript e JScript.

JavaScript e JScript contêm muitos recursos que não fazem parte do padrão oficial ECMAScript e também podem ser desprovidos de vários recursos. Ao fazer isso, eles são parcialmente incompatíveis, o que leva os roteiristas a ter que lidar com esses problemas ao escrever software . Dos dois, o JavaScript é mais compatível com o padrão: isso significa que um script escrito de acordo com os padrões ECMA funcionará com a maioria dos navegadores, especialmente em versões recentes.

Outro efeito é que cada navegador pode tratar o mesmo script de forma diferente, e o que funciona em um navegador pode não funcionar em outro ou em uma versão diferente do mesmo navegador. Assim como no HTML, é recomendado escrever código compatível com os padrões. Claro, ao longo dos anos foram criadas várias bibliotecas e frameworks que podem ser usados ​​para simplificar a escrita de código JavaScript que funcione corretamente independentemente do navegador utilizado. Uma das bibliotecas mais conhecidas e difundidas para simplificar a escrita de scripts simples dentro de páginas HTML ou PHP é o jQuery , enquanto existem inúmeros frameworks para escrever aplicações em JavaScript, mesmo extremamente sofisticados (lado do cliente e/ou lado do servidor), ignorando completamente a necessidade de reconhecer qual navegador o usuário final usará.

Contramedidas

Existem duas técnicas principais para lidar com incompatibilidades: sniffing do navegador (literalmente "sniffing the browser") e detecção de objetos . Quando havia apenas dois navegadores que suportavam scripts, ou seja, Netscape e Internet Explorer, o sniffing de navegador era a técnica mais popular. Ao verificar várias propriedades do cliente, que retornavam informações de plataforma, navegador e versão, era possível para o código discernir exatamente em qual navegador estava sendo executado. técnicas posteriores de sniffing tornaram-se mais difíceis de implementar, pois o Internet Explorer começou a disfarçar suas informações, por exemplo, fornecendo informações cada vez mais imprecisas do navegador (as razões da Microsoft para isso têm sido contestadas). Mais tarde ainda, o sniffing de navegador se tornou uma forma de arte complicada quando outros navegadores de script entraram no mercado, cada um com sua própria plataforma, cliente e informações de versão.

A detecção de objetos é baseada na verificação da existência da propriedade de um objeto. 

function  set_image_source ( imageName ,  imageURL ) 
{ 
  // Testa se o objeto 'document' tem uma propriedade 'images' 
  if (  document .images ) { // executa somente se existir um vetor de documento 'images' . imagens [ nomedaimagem ]. src = imagemURL ; } }

Um exemplo mais complexo é baseado no uso de testes booleanos vinculados :

if  ( document . body  &&  document . body . style )

Nesse caso, a expressão "document.body.style" normalmente causaria um erro em um navegador que não possui a propriedade "document.body", mas o uso do operador "&&" garante que "document.body.style" seja nunca chamado se" document.body "não existir. O teste aproveita essa peculiaridade da avaliação de expressões lógicas, denominada avaliação preguiçosa (lit. "avaliação preguiçosa").

Hoje, uma combinação de sniffing de navegador, detecção de objetos e conformidade com padrões, como a especificação ECMAScript e CSS , é usada em várias medidas para tentar garantir que um usuário nunca encontre um erro de JavaScript.

Uso

Ao contrário de outras linguagens, como C ou C++, que permitem escrever programas completamente autônomos, o JavaScript é usado principalmente como uma linguagem de script , integrada, ou seja, dentro de outro código.

A ideia básica é que o programa host (aquele que hospeda e executa o script) forneça ao script uma API bem definida , que permite o acesso a operações específicas, cuja implementação é de responsabilidade do próprio programa host . O script, quando executado, usa referências a essa API para solicitar (o programa host ) a execução de operações específicas, não pretendidas pelas próprias construções da linguagem JavaScript. Esse mecanismo também é adotado em linguagens como C ou Java , nas quais o programa conta com bibliotecas , não previstas pela própria linguagem, que permitem realizar operações como I/O ou a execução de chamadas para funções do sistema .

O exemplo típico (e talvez o mais conhecido e mais comum) de um programa host para um script JavaScript é o do navegador . Um navegador moderno normalmente incorpora um interpretador JavaScript . Quando uma página da web que contém código JavaScript é visitada, ela é executada pelo interpretador contido no navegador. As interfaces que permitem que o JavaScript se relacione com um navegador são chamadas de DOM ( Document Object Model em italiano ). Muitos sites usam a tecnologia JavaScript do lado do cliente para criar aplicativos Web dinâmicos poderosos .

Um dos principais usos do JavaScript no ambiente Web é a escrita de pequenas funções integradas em páginas HTML que interagem com o DOM do navegador para realizar determinadas ações não possíveis apenas com HTML estático : verificar os valores nos campos de entrada, ocultar ou exibir certos elementos, etc. Infelizmente, os padrões DOM impostos pelo W3C nem sempre são respeitados de forma consistente e consistente por todos. Diferentes navegadores, dependendo de seu mecanismo de renderização , expõem diferentes objetos ou métodos ao script, por isso muitas vezes é necessário implementar controles adicionais a uma função JavaScript, para garantir a compatibilidade com cada navegador e até mesmo de acordo com as várias versões de um mesmo navegador.

Fora da web, os interpretadores JavaScript são integrados a diversos aplicativos. O Adobe Acrobat e o Adobe Reader suportam JavaScript em arquivos PDF . A plataforma Mozilla , que sustenta muitos navegadores populares, usa JavaScript para implementar a interface do usuário e a lógica de transação de seus vários produtos. Os interpretadores JavaScript também são integrados a aplicativos proprietários sem interfaces programáveis. Finalmente, a tecnologia Windows Script Host da Microsoft suporta JavaScript (via JScript), uma linguagem de script para sistemas operacionais .

Cada um desses aplicativos fornece seu próprio modelo de objeto que dá acesso ao ambiente host, com o núcleo da linguagem JavaScript permanecendo praticamente inalterado em cada aplicativo. Existem várias implementações do núcleo da linguagem JavaScript, incluindo:

Uso em HTML

Tag de script (HTML)

Para inserir um script em uma página HTML, você precisa usar a tag script . Essa tag não faz parte da linguagem JavaScript em si, ela serve apenas como um "contêiner" dentro de uma página HTML. 

< script  type = "text / javascript" > 
// <! [CDATA [ 
instruções JavaScript  ... //]]> </ script >

Um documento pode ter a definição da tag script em várias partes. Através desta tag você pode representar a versão utilizada e dependendo do navegador você terá a interpretação da parte apropriada do código. As definições podem ser as seguintes: 

< tipo de script  = "texto / javascript" > ... </ script >
Exemplo: Olá mundo!

O exemplo a seguir exibe uma mensagem de aviso com " Hello world " dentro. 

< script  type = "texto/javascript" > 
   alert ( 'Olá mundo' ); 
< / roteiro>

Para "escrever" diretamente na página HTML: 

< tipo de script  = "texto / javascript" > documento . escreva ( 'Olá mundo' ); < / roteiro>

O tipo MIME para o código-fonte JavaScript é application/javascript, mas é o mais usado text/javascript, embora não seja padrão.

Para incorporar o código JavaScript em um documento HTML, preceda-o com: 

< tipo de script  = "texto/javascript" >

e siga por: 

</ script >

Os navegadores mais antigos geralmente exigem que o código comece com: 

  < script  language = "JavaScript"  type = "texto / javascript" > 
  <! -

e termina com: 

  // ->
   </ script >

Marcadores de comentários <!--... -->são necessários para garantir que o código não seja exibido como texto por navegadores muito antigos que não reconhecem a tag <script>em documentos HTML, enquanto LANGUAGE é um atributo HTML (que agora não é recomendado) que pode ser solicitado de antigos navegadores. No entanto, as tags <script> em documentos XHTML / XML não funcionam quando comentadas, pois analisadores em conformidade com os padrões XHTML/XML ignoram comentários e também podem encontrar problemas com símbolos --e <em >scripts (por exemplo, confundindo-os com operadores de decremento de inteiros e comparação). Os documentos XHTML devem incluir os scripts como seções CDATA do XML, prefixados com 

  < tipo de script  = "texto / javascript" > // <! [CDATA [

e seguindo-os por 

  //]]>
   </ script >

(Os símbolos '//' no início de uma linha sinalizam o início de um comentário JavaScript, para evitar <![CDATA[e ]]>ser analisado pelo script.)

Os elementos HTML [1] podem conter eventos intrínsecos que podem ser associados a manipuladores especificados por um script. Para escrever um código HTML 4.01 válido, o servidor web deve retornar um 'Content-Script-Type' com o valor 'text / JavaScript'. Se o servidor web não puder ser configurado para esta finalidade, o autor do site pode colocar a seguinte declaração na seção de cabeçalho do documento 

< meta  http-equiv = "Content-Script-Type"  content = "text / javascript"  />

Uso frequente em navegadores da web

O JavaScript pode ser usado para todos os aspectos do script do lado do cliente de um navegador da Web , mas alguns usos se tornaram mais difundidos do que outros. Os exemplos incluem substituição de imagens, criação de janelas pop-up e validação de dados de formulário . Na maioria dos navegadores, o trecho de código XHTML a seguir mostra uma maneira pela qual uma imagem pode ser substituída por outra quando o usuário move o cursor sobre ela. Esse efeito geralmente é chamado de rollover ou mouse over . No entanto, comportamentos semelhantes também podem ser alcançados usando apenas CSS . 

 < img  src =  "normal.png" 
      onclick =  "window.location.href = 'http: //en.wikipedia.org/'" 
      onmouseover =  "this.src = 'rollover.png'" 
      onmouseout   =  "this.src = 'normal.png'"  />

Subsidiárias

Um novo exemplo do uso de JavaScript são os Bookmarklets , pequenas seções de código dentro dos marcadores ou favoritos dos navegadores da web. A linguagem de programação usada no Macromedia Flash (chamada ActionScript ) tem uma forte semelhança com JavaScript, devido à sua relação compartilhada com ECMAScript . ActionScript tem quase a mesma sintaxe do JavaScript, mas o modelo de objeto [7] é muito diferente.

JavaScript para OSA (JavaScript OSA, ou JSOSA), é uma linguagem de script para Macintosh baseada na implementação JavaScript 1.5 da Mozilla [8] . É um componente freeware disponibilizado pela Late Night Software . A interação com o sistema operacional e aplicativos de terceiros é gerenciada por meio de um objeto MacOS . Além disso, a linguagem é praticamente idêntica à implementação do Mozilla. Foi proposto como uma alternativa à linguagem AppleScript mais usada .

Elementos da linguagem

Variáveis

As variáveis ​​são tipicamente tipadas dinamicamente, ou seja, são definidas simplesmente atribuindo-lhes um valor ou usando o comandolet ; aqueles declarados fora de qualquer função estão em visibilidade "global" ou acessíveis de toda a página da web ; aqueles declarados dentro de uma função são locais ou internos a essa função. Para passar variáveis ​​de página para página, um desenvolvedor pode definir um cookie ou usar um quadro ou janela oculta em segundo plano para armazená-las.

Objetos

Tudo em JavaScript é um valor primitivo ou um objeto. Objetos são entidades com singularidade (são iguais apenas a si mesmos) e que associam nomes de propriedades a valores. Isso significa que um objeto é um vetor associativo semelhante a hashes em Perl e Ruby , ou a dicionários em Python , PostScript e Smalltalk .

JavaScript tem vários tipos de objetos predefinidos, notadamente Array , Boolean ( Boolean ), Date (objetos contendo uma data e hora), Function ( funções ), Math (objeto contendo funções usadas em cálculos matemáticos), Number (numbers) , Object ( objetos ), RegExp ( expressões regulares ) e String ( strings ). Outros objetos são os "objetos convidados", definidos não pela linguagem, mas pelo ambiente de execução. Em um navegador, os objetos de host típicos pertencem ao DOM : janela ( janela ), formulário (máscara), link ( link ) etc.

JSDOM.gif

Ao definir um construtor , você pode definir objetos. JavaScript é uma linguagem orientada a objetos baseada em protótipos. Isso significa que a herança é entre objetos, não entre classes (JavaScript não tem classes). Objetos herdam propriedades de seus protótipos.

Propriedades ou métodos adicionais podem ser adicionados a objetos individuais após serem criados. Para fazer isso para todas as instâncias criadas por um único construtor, você pode usar a prototypepropriedade constructor para acessar o objeto protótipo.

Exemplo: Criando um objeto 

// 
função construtora  MyObject ( attributeA ,  attributeB ) 
{ 
  this . atributoA  =  atributoA 
  this . atributoB  =  atributoB 
}
 
// cria um Object 
obj  =  new  MyObject ( 'red' ,  1000 )
 
// acessa um atributo do obj 
alert ( obj . attributeA )
 

// acessa um atributo com a notação do alerta de vetor associativo ( obj [ "attributeA" ])

Simular herança

A hierarquia de objetos em JavaScript pode ser emulada. Por exemplo: 

function  Base () 
{ 
  this . Substituir  =  _Substituir ; 
  isso . BaseFunction  =  _BaseFunction ;
 
  function  _Override () 
  { 
    alert ( "Base :: Override()" ); 
  }

  function  _BaseFunction () 
  { 
    alert ( "Base::BaseFunction()" ); 
  } 
}
 
função  Deriva () 
{ 
   this . Substituir  =  _Substituir ; 
   function  _Override () 
   { 
     alert ( "Derive:: Override()" ); 
   } 
}

Deriva . protótipo  =  nova  Base ();
 
d  =  new  Deriva (); 
d . Substituir (); 
d . Função Base ();

resultará na saída: 

Derivar :: Substituir ()
Base :: BaseFunction()

Objetos predefinidos

Além de permitir a definição de objetos, o JavaScript fornece toda uma série de objetos que podem ser usados ​​para seus scripts:

Matriz

Um array é uma associação entre inteiros e valores de tipo arbitrário. Em JavaScript, todos os objetos podem associar inteiros e valores, mas arrays são um tipo especial de objetos que possuem comportamentos específicos e métodos especializados para usar índices inteiros (por exemplo,, joine slice) push.

Os arrays têm uma propriedade lengthque garante ser sempre maior que o maior índice usado no vetor. Ele é atualizado automaticamente se você criar uma propriedade com um índice ainda maior. Escrever um número menor na propriedade lengthremove os índices maiores. Esta propriedade é a única característica especial dos vetores, que os distingue de outros objetos.

Com elementos de matriz, você pode usar a notação normal para acessar as propriedades do objeto: 

  myArray[1]
  myArray["1"]

Essas duas notações são equivalentes. Você não pode usar notação de ponto ou strings com uma representação alternativa do número: 

  myArray.1(erro de sintaxe)
   myArray(1)(sintaxe incorreta, permitida apenas pelo Internet Explorer)
   myArray["01"](não é igual a myArray[1])

A declaração de um vetor pode usar uma notação explícita ou o construtor Array: 

 myArray = [0,1,,,4,5];(vetor de comprimento 6 com 4 elementos)
  myArray = new Array(0,1,2,3,4,5);(vetor com comprimento 6 e 6 elementos)
  myArray = new Array(365);(vetor vazio com comprimento 365)

Arrays são implementados para que apenas elementos definidos usem memória; são "vetores dispersos". Defina myArray[10] = 'qualcosa'e myArray[57] = 'qualcosaltro'use espaço apenas para esses dois elementos, como para qualquer outro objeto. O comprimento da matriz sempre será relatado como 58.

Estruturas de controle e condicionais

se ... senão

A estrutura de controle IF corresponde a SE em italiano

A instrução contida dentro das chaves será executada somente e somente se a condição for verdadeira, caso contrário a instrução contida no ELSE será executada. 

  se (condição)
  {
     instruções;
  }

  se (condição)
  {
     instruções;
  }
  senão
  {
     instruções;
  }

Enquanto loop 

  enquanto (condição)
  {
     instruções;
  }

Faça ... while loop 

  Faz
  {
     instruções;
  } while (condição);

Para loop 

  for ([expressão inicial]; [condição]; [expressão de incremento])
  {
     instruções;
  }

Para loop ... em

Este loop percorre todas as propriedades de um objeto (ou os elementos de um vetor). 

  for (variável no objeto)
  {
     instruções;
  }

Para ... de loop

Este loop percorre todos os valores de um objeto (ou os elementos de um vetor). 

  para (variável de objeto)
  {
     instruções;
  }

Instrução de troca 

  mudar (expressão)
  {
     valor do caso1 :
        instruções;
        quebrar ;
     valor do caso2 :
        instruções;
        quebrar ;
     padrão  :
        instruções;
  }

Funções

Uma função é um bloco de instruções , com uma lista de argumentos (possivelmente vazia) e que pode ter um nome (embora não seja necessário). Uma função pode retornar um valor por meio da instrução return . 

  função (pode estar vazia)
  {
     instruções;
     expressão de retorno ;
  }

O número de argumentos passados ​​ao chamar uma função não precisa necessariamente ser igual ao número de argumentos da definição da função (ou seja, o número de parâmetros formais não precisa necessariamente ser respeitado ao chamar a função, ou seja, no especificação dos parâmetros atuais ). Dentro da função, a lista de argumentos também pode ser referenciada por meio do vetor arguments(este último tem a propriedade calleede representar um ponteiro para a própria função).

Cada função é uma instância de Function , um tipo básico de objeto. As funções podem ser criadas e atribuídas como qualquer outro objeto: 

   var myFunc1 = new Function ("alerta ('Olá')");
   var minhaFunc2 = minhaFunc1;
   minhaFunc2();

produz como saída: 

   Olá

Interação com o usuário

Entre as outras técnicas com as quais um script JavaScript pode interagir com o usuário dentro de uma página web, estão as seguintes:

  • Elementos de formulário HTML , editáveis ​​acessando o HTML DOM;
  • Caixa de diálogo de alerta
  • Confirmar caixa de
  • Caixa de diálogo de prompt
  • Barra de status do navegador
  • Saída padrão ("console")

Nota: as caixas de diálogo não funcionam com o navegador Opera; não há erro, eles simplesmente não são executados.

Métodos de gravação de vídeo (saída padrão)

Para escrever na tela (ou seja, na página onde o script está localizado) você pode usar o método document.write(); as strings a serem exibidas podem ser concatenadas usando o operador de concatenação '+': 

< html > 
< head > 
< script  type = "text / javascript" > 
<!  - Ocultar  script  de navegadores obsoletos   

// Esta função gera uma linha horizontal da largura escolhida. 
barra de funções  ( larguraPct ) { document . write ( "<hr align = 'left' width = '" + widthPct + "%' />" ); }

      


// Esta função gera texto precedido por um título de um determinado nível. 
saída da função  ( headLevel , headText , text ) { document . write ( "<h" + headLevel + ">" + headText + "</ h" + headLevel + "> <p>" + text + "</p>" ); }  

                  


// Fim do código para ocultar -> 
< / script> 
< / head> 
< body > 
< script  type = "text / javascript" > 
<! -  Ocultar  script  de navegadores obsoletos   

bar ( 25 ) 
output ( 2 ,  "JavaScript Rules!" ,  "Usar JavaScript é fácil ..." )

// Fim do código para ocultar -> 
< / script>

< p > Este  é  um HTML normal  , diferente do gerado pelo código acima . _ < / p>        

< /body> 
< /html>

Eventos

Elementos de texto podem ser a origem de vários eventos que podem acionar uma ação se um manipulador de eventos ECMAScript tiver sido registrado . Em HTML, esses manipuladores de eventos geralmente são funções definidas como anônimas diretamente na tag HTML. A sintaxe para chamar um evento em um script é a seguinte: 

Assunto . evento  =  manipulador ;

Existem várias categorias de eventos:

  1. Eventos que podem ser ativados pelos botões do mouse
  2. Eventos que podem ser ativados por movimentos do mouse
  3. Eventos que podem ser ativados arrastando o mouse (arrastar e soltar)
  4. Eventos que podem ser ativados pelo usuário com o teclado
  5. Eventos que podem ser ativados por modificações do usuário
  6. Eventos relacionados a "fogo"
  7. Eventos que podem ser ativados carregando objetos
  8. Eventos que podem ser ativados por movimentos de janela
  9. Eventos vinculados a botões específicos
  10. Outros e novos tipos de eventos

Eventos que podem ser ativados por botões do mouse

Lista de eventos:

  1. onClick : ativado ao clicar em um objeto;
  2. onDblClick : ativado com um duplo clique;
  3. onMouseDown : ativado quando o botão esquerdo do mouse é pressionado;
  4. onMouseUp : ativado quando você levanta o botão esquerdo do mouse pressionado anteriormente;
  5. onContextMenu : ativado quando o botão direito do mouse é clicado abrindo o ContextMenu.

O duplo clique é um evento que engloba os demais e, para ser mais preciso, ativa sucessivamente onmousedown, onmouseup, onclick.

Etiqueta de aplicação

A, ENDEREÇO, APPLET, ÁREA, B, BDO, GRANDE, BLOCKQUOTE, CORPO, BOTÃO, LEGENDA, CENTRO, CITE, CÓDIGO, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = botão, INPUT type = checkbox, INPUT type = file, INPUT type = imagem, INPUT type = password, INPUT type = rádio, INPUT type = reset, INPUT type = submit, INPUT type = text , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, TEAD, TR, TT, U, UL, VAR, XMP

Eventos que podem ser ativados por movimentos do mouse

Lista de eventos:

  1. onMouseOver : ativado quando o mouse se move sobre um objeto;
  2. onMouseOut : ativado quando o mouse se move de um objeto;
  3. onMouseMove : move o ponteiro do mouse, mas como esse evento ocorre com frequência (o uso do mouse é frequente), ele não está disponível por padrão, mas apenas combinado com a captura de eventos, que será explicado mais adiante.
Etiqueta de aplicação

A, ENDEREÇO, APPLET, ÁREA, B, BDO, GRANDE, BLOCKQUOTE, CORPO, BOTÃO, LEGENDA, CENTRO, CITE, CÓDIGO, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = botão, INPUT type = checkbox, INPUT type = file, INPUT type = imagem, INPUT type = password, INPUT type = rádio, INPUT type = reset, INPUT type = submit, INPUT type = text , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, TEAD, TR, TT, U, UL, VAR, XMP

Eventos que podem ser ativados arrastando o mouse (arrastar e soltar)

Lista de eventos:

  1. onDragDrop : evento acionado quando um usuário arrasta um objeto na janela do navegador ou quando solta um arquivo nele;
  2. onMove : ativado quando um objeto move uma janela ou um quadro;
  3. onDragStart : evento ativado assim que o usuário começa a arrastar um objeto;
  4. onDrag : ativado quando o mouse arrasta um objeto ou uma seleção de texto para a janela do mesmo navegador ou mesmo de outro ou mesmo na área de trabalho;
  5. onDragEnter : ativado assim que o usuário arrasta um objeto para um destino válido do mesmo ou de outro navegador;
  6. onDragOver : ativado quando o usuário arrasta um objeto em um destino válido para hospedá-lo, e é semelhante ao evento anterior, mas é ativado depois disso;
  7. onDragLeave : ativado quando o usuário arrasta um objeto em um destino adequado para hospedá-lo, mas não é liberado;
  8. onDragEnd : acionado quando o usuário solta o objeto após a conclusão do arrasto.
  9. onDrop : ativado quando o mouse levanta o botão do mouse após uma operação de arrastar;
Etiqueta de aplicação

A, ENDEREÇO, APPLET, ÁREA, B, BDO, GRANDE, BLOCKQUOTE, CORPO, BOTÃO, LEGENDA, CENTRO, CITE, CÓDIGO, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = botão, INPUT type = checkbox, INPUT type = file, INPUT type = imagem, INPUT type = password, INPUT type = rádio, INPUT type = reset, INPUT type = submit, INPUT type = text , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, TEAD, TR, TT, U, UL, VAR, XMP

Eventos que podem ser ativados pelo usuário com o teclado

Lista de eventos:

  1. onKeyPress : evento acionado quando um usuário pressiona e solta uma tecla ou mesmo quando ele a mantém pressionada;
  2. onKeyDown : ativado quando a tecla é pressionada;
  3. onKeyUp : evento ativado quando uma tecla que havia sido pressionada é liberada;
  4. onHelp : ativado quando um usuário pressiona a tecla F1;

Eventos que podem ser acionados por modificações do usuário

onChange

Acionado quando o conteúdo de um formulário ou campo de formulário é alterado ou não está mais selecionado. Também é usado com objetos FileUpload, Select, Text, TextArea.

Exemplo: 

< input  type = "texto"  value = "Digite o endereço de email"  name = "userEmail"  onChange = validateInput ( this . value )  /> 
< script  type = "text / javascript" > 
  this . meuFormulário . userEmail . foco (); 
  isso . meuFormulário . userEmail . selecione ();
 
  function  validateInput () 
  { 
    userInput  =  new  String (); 
    userInput  =  this . meuFormulário . userEmail . valor ; 
    if  ( userInput . match ( "@" )) 
      alert ( "Obrigado pelo seu interesse." ); 
    else 
      alert ( "Por favor, verifique se seus dados de e-mail estão corretos antes de enviar" ); 
  } 
< / roteiro>
onCellChange

Ativado quando um elemento em um banco de dados é modificado, para esta característica tem um uso não estritamente relacionado ao JavaScript;

onPropertyChange

Evento acionado quando a propriedade de um elemento muda;

onReadyStateChange

Evento acionado quando o status de carregamento de um elemento muda, o evento é útil, por exemplo, para verificar se um elemento foi carregado.

Etiqueta de aplicação

A, ENDEREÇO, APPLET, ÁREA, B, BDO, GRANDE, BLOCKQUOTE, CORPO, BOTÃO, LEGENDA, CENTRO, CITE, CÓDIGO, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = botão, INPUT type = checkbox, INPUT type = file, INPUT type = imagem, INPUT type = password, INPUT type = rádio, INPUT type = reset, INPUT type = submit, INPUT type = text , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, TEAD, TR, TT, U, UL, VAR, XMP

Eventos relacionados com "fogo"

onFocus

Esse manipulador é o oposto do onBlur, portanto, é ativado quando o usuário entra em um campo;

onBlur

É ativado quando o ponteiro ou cursor do mouse sai da janela atual usando o mouse ou o caractere TAB. Aplicado aos módulos, porém, este handler inicia se o campo cujo tag contém o controle for encerrado;

Exemplo 

Digite o endereço de  e  -mail  < input  type = "text"  value = ""  name = "userEmail"  onBlur = addCheck () > 
< script  type = "text / javascript" > 
function  addCheck () 
{ 
  alert ( "Por favor, verifique se os detalhes do seu e-mail estão corretos antes de enviar " ) 
} 
< /script>
onSelect

Ele pode ser ativado quando você seleciona texto dentro de uma caixa de texto com o mouse ou mantendo pressionada a tecla SHIFT e selecionando com as teclas de seta;

onSelectStart

É ativado quando você começa a selecionar um evento;

onbeforeEditFocus

É ativado com um duplo clique ou com um clique em um objeto que já possui a seleção, quando este estiver em DesignMode;

onLoseCapture

Aciona quando um objeto perde a captura do mouse.

Etiqueta de aplicação

A, ENDEREÇO, APPLET, ÁREA, B, BDO, GRANDE, BLOCKQUOTE, CORPO, BOTÃO, LEGENDA, CENTRO, CITE, CÓDIGO, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type = botão, INPUT type = checkbox, INPUT type = file, INPUT type = imagem, INPUT type = password, INPUT type = rádio, INPUT type = reset, INPUT type = submit, INPUT type = text , KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB , SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, TEAD, TR, TT, U, UL, VAR, XMP

Eventos que podem ser ativados carregando objetos

onLoad

Este manipulador funciona no carregamento de objetos, principalmente janelas e imagens;

onDescarregar

É o oposto do anterior e funciona quando você sai de uma janela para carregar outra ou até mesmo para recarregar a mesma (com o botão de atualização);

onAbort

O handler do evento onAbort permite especificar algum código caso o usuário bloqueie o carregamento de um objeto, ou bloqueie o carregamento de uma imagem.

Esse manipulador usa as seguintes propriedades de evento.

Exemplo 

  < img  name =  "myPic"  SRC =  "images / myPic.gif"  onAbort =  "alert ('Carregamento de imagem abortado!')" >
onError

Ele é ativado quando o carregamento de um objeto causa um erro, mas somente se isso for devido a um erro de sintaxe do código e não do navegador, então ele funciona em um link incorreto de uma imagem da página, mas não em um incorreto link de carregamento de uma página inteira. O Opera não trata esse evento, que agora está obsoleto: a construção try ... catch é usada para o tratamento correto de erros;

onBeforeUnload

Esse manipulador funciona da mesma forma que onUnload, mas carrega em um momento anterior;

onStop

Esse manipulador funciona quando você interrompe o carregamento da página com a tecla stop do navegador e também deve funcionar da mesma maneira que onUnload carregando antes disso, mas depois de onBeforeUnload.

Etiqueta de aplicação
  1. onLoad Este handler é usado com as tags <BODY> e <FRAMESET> e pelo JavaScript 1.1 também com <IMG> enquanto no Explorer também é necessário adicionar as tags <SCRIPT>, <LINK>, <EMBED>, <APPLET> . No JavaScript 1.2, a tag <LAYER> também é adicionada no Netscape.
  2. onUnload Esse manipulador também é usado com as tags <BODY> e <FRAMESET> no Internet Explorer.
  3. onAbort Esse manipulador é usado apenas com a tag <IMG> também no Internet Explorer.
  4. onError Este manipulador é usado apenas com a tag <IMG> e com Window enquanto no Internet Explorer também com <OBJECT> e <STYLE>.
  5. onBeforeUnload Esse manipulador também é usado com tags <BODY> no Internet Explorer.
  6. onStop Esse manipulador também é usado com as tags <BODY> no Internet Explorer.

Eventos que podem ser ativados por movimentos de janela

Lista de eventos:

  1. onResize: Este manipulador é ativado quando o usuário reduz ou maximiza uma janela ou um quadro ou, em particular para o Explorer, um objeto ao qual a altura e a largura ou mesmo a posição foram fixadas, como uma camada;
  2. onScroll: ativado ao rolar a página com o mouse usando as teclas PGUP e PGDOWN ou também com o método doScroll.
Etiqueta de aplicação

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, Hn, HR, I, IMG, tipo de ENTRADA = botão, tipo de ENTRADA = arquivo, tipo de ENTRADA = imagem, tipo de ENTRADA = senha, tipo de ENTRADA = reset, tipo de ENTRADA = enviar, tipo de ENTRADA = texto, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE , MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, window, XMP

Eventos relacionados a botões específicos

  1. onSubmit: Este manipulador é ativado clicando no botão Enviar de um formulário;
  2. onReset: este manipulador é ativado clicando no botão Cancelar de um formulário.
Etiqueta de aplicação

Manipulador aplicável apenas ao objeto Form.

Tratamento de erros

Versões mais recentes de JavaScript (começando com aquelas usadas no Internet Explorer 5 e Netscape 6) incorporam a possibilidade de uma try... catchconstrução de tratamento de erros .

A construção try ... catch ... finallycaptura exceções lançadas por um erro ou instrução throw. Sua sintaxe é a seguinte: 

try  { 
   // Declarações onde exceções podem ser lançadas 
}  catch  ( error )  { 
   // Declarações a serem executadas em caso de exceção 
}  finally  { 
   // Declarações a serem executadas posteriormente em ambos os casos 
}

Inicialmente, as instruções dentro do bloco são executadas try. Se uma exceção for lançada, o fluxo de controle do script será imediatamente passado para as instruções do bloco catch, com a exceção sendo disponibilizada como um argumento error. Caso contrário, o bloco catché ignorado. Uma vez que o bloco catché finalizado, ou o bloco tryé executado até o fim sem que nenhuma exceção seja lançada, as instruções no bloco são executadas finally.

Integração com HTML5

Com o nascimento do HTML5 o JavaScript adquiriu várias inovações [9] :

Reconhecimento de voz

O usuário pode falar dentro de um formulário ao invés de escrever:

< tipo de entrada  = "texto" x - webkit - fala /> var reconhecimento = new SpeechRecognition (); var speechRecognitionList = new SpeechGrammarList ();

Notificações do sistema

Image
A página web pode conter outros tipos de gráficos como estes. Estas não são notificações do sistema.

As notificações do sistema são projetadas para chamar a atenção do usuário, exibindo uma mensagem curta mesmo fora da página atual ou mesmo se o navegador não estiver em primeiro plano. Dada a sua potencial invasividade, só é possível utilizá-los se o site já tiver obtido um consentimento específico do utilizador. [10] [11]

As notificações do sistema, como o nome sugere, são integradas de forma consistente com o dispositivo atual (na área de trabalho geralmente é um pop-up , no celular geralmente está na barra de notificação etc.). [11] [10]

Abaixo está um exemplo mínimo com dois botões, para solicitar permissões para notificações do sistema e exibir um. 

< button  id = "btn-asking" > Solicitar permissões </ button > 
< button  id = "btn-notify" > Mostrar notificação </ button >

< script > 
// pesquisa de botão 
var  btnAsking  =  document . getElementById (  'btn-asking'  ); 
var  btnNotify  =  document . getElementById (  'btn-notify'  );

// após o clique ele inicia a solicitação de permissões 
btnAsking . addEventListener (  'click' ,  function ()  { 
    Notification . requestPermission (); 
}  );

// após o clique eu mostro uma notificação 
btnNotify . addEventListener (  'click' ,  function ()  { 
    new  Notification (  "Nova notificação!"  ); 
}  ); 
</ script >

O aprofundamento da documentação oficial permite levar a cabo outras boas práticas, nomeadamente:

  • verificação de suporte (por exemplo , o Safari no iOS é notório por não obter um ótimo suporte) [12] [11]
  • respeito pelo consentimento prévio (evite pedir vários pedidos de consentimento)
  • respeito pela discordância (evite tentar abrir notificações se não houver consentimento)

O lançamento da solicitação de permissão só deve ocorrer após uma interação com o usuário (como o clique de um botão). Muitos navegadores modernos até proíbem a abertura do pop-up de solicitação de consentimento para notificações nativas se não houver interação. [11]

Conteúdo editável

Possibilidade de o usuário modificar a página web como se estivesse dentro de um editor WYSIWYG , mesmo que as alterações não sejam salvas na página web real remota, mas apenas visíveis no navegador do usuário:

< div  contenteditable = "true " > 
Este  texto  é  editável  pelo usuário . < /div> documento . execCommand ( "defaultParagraphSeparator" , false , "p" );

Arraste para fora

Arraste e solte arquivos de uma página da Web para seu computador ou outro dispositivo:

<a href =  "src / star.mp3" arrastável = "true" class = "dragout" data - downloadurl = "MIMETYPE: FILENAME: ABSOLUTE_URI_TO_FILE"> download < / a > var files = document . querySelectorAll ( '. dragout' ); for ( var i = 0 , arquivo ; arquivo = arquivos [ i ]; ++ i ) { arquivo . addEventListener ( 'dragstart' , function ( e ) { e . dataTransfer . setData ( 'DownloadURL' , this . dataset . downloadurl ); }, false ); }

API do sistema de arquivos

Grave de forma assíncrona um arquivo em um sistema de arquivos em área restrita usando JavaScript:

janela . requestFileSystem ( window . TEMPORARY ,  1024  *  1024 ,  function ( fs )  { 
  fs . root . getFile ( 'log.txt' ,  { create :  true },  function ( fileEntry )  {

    arquivoEntrada . createWriter ( função ( escritor )  {  .

        escritor . onwrite  =  function ( e )  {  ...  }; 
        escritor . onerror  =  function ( e )  {  ...  };

        var  bb  =  new  BlobBuilder (); 
        bb . append ( 'Olá Mundo!' );

        escritor . escreva ( bb.getBlob ( ' texto / simples' ));

    },  opt_errorHandler ); 
  } 
},  opt_errorHandler );

Geolocalização

Possibilidade de o usuário declarar sua posição em um aplicativo ou página da web:

if  ( navigator . geolocation )  { 
  navigator . geolocalização . getCurrentPosition ( function ( position )  { 
    var  latLng  =  new  google . maps . LatLng ( 
        position . coords . latitude ,  position . coords . longitude ); 
    var  marker  =  new  google . maps . Marker ({ position :  latLng ,  map :  map }) ; 
    map .setCenter ( latLng ); }, errorHandler ) ; }

Orientação do dispositivo

Relatório de dados indicando mudanças na orientação do dispositivo em relação à atração da gravidade. Em particular, dispositivos portáteis, como telefones celulares, podem usar essas informações para girar automaticamente a tela para ficar na posição vertical, apresentando uma visualização em tela cheia do conteúdo da web quando o dispositivo é girado para que sua largura seja maior que a de Sua Majestade.

janela . addEventListener ( 'deviceorientation' ,  function ( event )  { 
  var  a  =  event . alpha ; 
  var  b  =  event . beta ; 
  var  g  =  event . gamma ; 
},  false );

Armazenamento Local, Cache de Aplicativo e API de Cota

Capacidade de navegar em páginas da Web visualizadas anteriormente, mesmo sem conexão com a Internet:

botão salvar . addEventListener ( 'click' ,  function  ()  { 
  window . localStorage . setItem ( 'value' ,  area . value ); 
  window . localStorage . setItem ( 'timestamp' ,  ( new  Date ())) getTime ()); 
},  false ); 
área de texto . valor  =  janela . localStorage . getItem ( 'valor' );

< html  manifest = "cache.appcache" > 
janela . applicationCache . addEventListener ( 'updateready' ,  function ( e )  { 
  if  ( window . applicationCache . status  ==  window . applicationCache . UPDATEREADY )  { 
    window . applicationCache . swapCache (); 
    if  ( confirm ( 'Uma nova versão deste site está disponível. Load it? ' ))  { 
      window . location . reload (); 
    } 
  } 
},  false );

Banco de Dados Web SQL

Novas funções integradas com SQL:

var  db  =  janela . openDatabase ( "DBName" ,  "1.0" ,  "descrição" ,  5 * 1024 * 1024 );  // 5 MB de 
banco de dados . transação ( function ( tx )  { 
  tx . executeSql ( "SELECT * FROM test" ,  [],  successCallback ,  errorCallback ); 
});

BD Indexado

Essa API usa índices para permitir pesquisas de dados de alto desempenho. Embora o armazenamento na Web seja útil para armazenar quantidades menores de dados, é menos útil para armazenar quantidades maiores de dados estruturados. IndexedDB fornece uma solução.

var  idbRequest  =  window . indexDB . open ( 'Nome do banco de dados' ); 
idbRequest . onsucesso  =  função ( evento )  { 
  var  db  =  evento . srcElement . resultado ; 
  var  transação  =  db . transação ([],  IDBTransaction . READ_ONLY ); 
  var  curRequest  =  transação . objectStore ( 'Nome do ObjectStore' ). openCursor (); 
  curRequest . sucesso  =  ...; 
};

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( usado ,  restante )  { 
    console . log ( "Cota usada:"  +  usado  +  ", cota restante:"  +  restante ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( usado )  { 
    console . log ( "Cota usada:"  +  usado  +  ", cota restante:"  +  restante ); 
  } 
);

Trabalhadores da Web

Aumente o desempenho da página web:

var  trabalhador  =  new  Trabalhador ( 'task.js' ); 
trabalhador . onmessage  =  function ( event )  {  alert ( event . data );  }; 
trabalhador . postMessage ( 'dados' ); 
tarefa . js : 
próprio . onmessage  =  function ( event )  { 
  // Faça algum trabalho. 
  próprio . postMessage ( "recv'd:"  +  event . data ); 
};

Web Socket

Comunicação bidirecional full-duplex pela web: tanto o servidor quanto o cliente podem enviar dados a qualquer momento ou até mesmo simultaneamente. Apenas os dados em si são enviados, sem a sobrecarga dos cabeçalhos HTTP, reduzindo drasticamente a largura de banda.

var  socket  =  new  WebSocket ( 'www.sito.it' ); 
soquete . onopen  =  function ( evento )  { 
  socket . enviar ( 'Olá' ); 
}; 
soquete . onmessage  =  function ( event )  {  alert ( event . data );  } 
soquete . onclose  =  function ( event )  {  alert ( 'closed' );  }

Páginas da web em tela cheia 

if  ( elem.webkitRequestFullScreen ) { elem . _ _ webkitRequestFullScreen ( Elemento . ALLOW_KEYBOARD_INPUT ); } else if ( elem.mozRequestFullScreen ) { elem . _ _ mozRequestFullScreen (); } else if ( elemento requestFullScreen ) { elem . requestFullScreen (); } : tela cheia - ancestral : root { estouro : oculto ; _ } : full - screen - ancestral { z - index : auto ; transformar : nenhum ; transição : nenhum ; } pre : full - screen { background - color : white ; }

Novos seletores (API DOM) 

var  el  =  documento . getElementById ( 'seção1' ); 
el . foco (); 
var  els  =  documento . getElementsByTagName ( 'div' ); 
els [ 0 ]. foco (); 
var  els  =  documento . getElementsByClassName ( 'seção' ); 
els [ 0 ]. foco (); 
var  els  =  documento . querySelectorAll ( "ul li: enésimo filho (ímpar)" ); 
var  tds  =  documento . querySelectorAll ( "table.test> tr> td" ); 
var  el  =  documento . querySelector ( "table.test> tr> td" );

Atributos personalizáveis 

< div  id = "out"  data - id = "good"  data - name = "joe"  data - screen - name = "user1" > < / div> 
var  el  =  document . querySelector ( '#out' ); 
el . setAttribute ( 'data-foo' ,  'bar' ); 
var  html  =  []; 
for  ( chave var  no conjunto de dados el . ) { html . push ( key , ':' , el . dataset [ key ], '<br>' ); } e . innerHTML = html . juntar ( ' ); Saída : id : bom nome : joe screenName : user1 foo : bar

Element.classList

O uso classListé uma alternativa para acessar a lista de classes de um elemento como uma string delimitada por espaço via element.className.

< div  id = "main"  class = "sombra arredondada" > < / div> 
var  el  =  document . querySelector ( '#main' ). classList ; 
el . add ( 'destaque' ); 
el . remover ( 'sombra' ); 
el . alternar ( 'destaque' );

consola . log ( el . contém ( 'destaque' ));  //falso 
console . log ( el . contém ( 'sombra' ));  //falso 
console . log ( el . classList . toString ()  ==  el . className ); 
// saída: 
< div  id = "main"  class = "rounded" > < / div>

API de história

Oferece a capacidade de alterar a URL de um site sem uma atualização de página inteira. Isso é útil para carregar partes de uma página com JavaScript de forma que o conteúdo seja visivelmente diferente e garanta uma nova URL.

ligação . addEventListener ( 'click' ,  function ( event )  { 
  history . pushState ( 'Contact Page Form' ,  'Contact Page' ,  '/ contact' ); 
}); 
janela . addEventListener ( 'popstate' ,  function ( event )  { 
  document . querySelector ( 'h1' ). innerHTML  =  event . state ; 
});

webkitStorageInfo . queryUsageAndQuota ( webkitStorageInfo . TEMPORARY ,  function ( usado ,  restante )  { 
    console . log ( "Cota usada:"  +  usado  +  ", cota restante:"  +  restante ); 
  } 
); 
webkitStorageInfo . requestQuota ( webkitStorageInfo . PERSISTENT ,  10  *  1024  *  1024 ,  function ( usado )  { 
    console . log ( "Cota usada:"  +  usado  +  ", cota restante:"  +  restante ); 
  } 
);

JS na web 3D

JavaScript inclui bibliotecas e frameworks para criação de interfaces web 3D [13] .

Exemplo de WebGL
Exemplo de WebGL
function  main ()  { 
  const  canvas  =  document . querySelector ( "#glCanvas" ); 
  const  gl  =  tela . getContext ( "webgl" ); 
  if  ( gl  ===  null )  { 
    alert ( "Atualize seu navegador" ); 
    retorno ; 
  } 
  gl . clearColor ( 0,0 ,  0,0 ,  0,0 ,  1,0 ); 
  gl . limpar ( gl . COLOR_BUFFER_BIT ); 
} 
janela . onload  =  principal ;

Alternativas

Com o nascimento do HTML 5 e CSS 3 algumas possibilidades como a criação de [14] [15] [16] [17] [18] [19] [20] :

eles podem ser implementados sem o uso de JavaScript, o que muitas vezes era impossível com HTML 4 e CSS 2 [14] .

Exemplos de IU JavaScript

Notas

  1. ^ ECMA-262 13ª Edição , em 262.ecma-international.org .
  2. ^ Uma Breve História do JavaScript , no Auth0 - Blog . Recuperado em 28 de fevereiro de 2020 .
  3. ^ Padrão ECMA-262
  4. ^ David Flanagan, JavaScript - O guia , Milão, Apogeo, 2000, p.1, ISBN  88-7303-627-9 .
  5. ^ David Flanagan, JavaScript - O guia , Milão, Apogeo, 2000, p.53, ISBN  88-7303-627-9 .
  6. ^ David Flanagan, JavaScript - O guia , Milão, Apogeo, 2000, ISBN  88-7303-627-9 .
  7. ^ Início rápido flexível - definindo modelos de dados | Adobe Developer Connection , em adobe.com . Recuperado em 28 de fevereiro de 2020 .
  8. ↑ Matt Neuburg , AppleScript: The Definitive Guide: Scripting and Automating Your Mac , "O'Reilly Media, Inc.", 4 de janeiro de 2006, ISBN  978-1-4493-7915-5 . Recuperado em 28 de fevereiro de 2020 .
  9. ^ slide , em github.com .
  10. ^ a b Usando a API de Notificações , em developer.mozilla.org . Recuperado em 23 de junho de 2022 .
  11. ^ a b c d Notification.permission , em developer.mozilla.org . _ _ Recuperado em 23 de junho de 2022 .
  12. ^ API de notificação : requestPermission , em caneuse.com . Recuperado em 23 de junho de 2022 .
  13. ^ 20 Interactive 3D JavaScript Libraries & Frameworks - Bashooka , em bashooka.com , 30 de maio de 2019. Recuperado em 18 de fevereiro de 2021 .
  14. ^ a b 5 coisas que você pode fazer com CSS em vez de JavaScript , no LogRocket Blog , 29 de outubro de 2019. Recuperado em 9 de fevereiro de 2021 .
  15. ^ ( PT ) 49 Galerias CSS , em Free Frontend . Recuperado em 9 de fevereiro de 2021 .
  16. ^ LiveCode - HTML5 - Calculator App Demo , em livecode.com . Recuperado em 9 de fevereiro de 2021 .
  17. ^ Andrea Pacchiarotti, menu responsivo em HTML e CSS sem JavaScript e jQuery , em Andrea pacchiarotti . Recuperado em 9 de fevereiro de 2021 .
  18. ^ Como fazer dicas de ferramentas mágicas e animadas com CSS , no Web Design Envato Tuts + . Recuperado em 9 de fevereiro de 2021 .
  19. ^ Usando a API de arrastar e soltar HTML5 , su web.dev . Recuperado em 9 de fevereiro de 2021 .
  20. ^ Como criar um botão de upload de arquivo , em w3schools.com . Recuperado em 9 de fevereiro de 2021 .

Bibliografia

  • Michel Dreyfus: JavaScript (Addison Wesley Longman Itália - 2002)
  • David Flanagan: JavaScript versão 1.5 (Apogeo - 2002)
  • Emily A. Vander Veer: JavaScript (com CD-ROM) (Apogeo - 2001)
  • Roberto Abbate: Aprendendo JavaScript (Master Editions - 2006)
  • Shelley Powers: Programação em JavaScript (Novas Técnicas - 2007)
  • Douglas Crockford: JavaScript - As técnicas para escrever o melhor código (New Techniques - 2009)

Itens relacionados

Outros projetos

Links externos

Recuperado de " https://it.wikipedia.org/w/index.php?title=JavaScript&oldid=129571785 "