JavaScript

JavaScript
//Beispiel JavaScript
function halloWelt() {
	alert('Hello World');
}
window.onload = halloWelt;
Dados básicos
Paradigmas : multiparadigmático
Ano de publicação: Maio de 1996
Designer: Brendan Eich
Desenvolvedor: Brendan Eich
Versão atual  : ECMAScript 2020   (junho de 2020)
Digitando : fraco , dinâmico , pato
Implementações importantes : SpiderMonkey , Rhino , JavaScriptCore , V8
Influenciado por: Self , C , Scheme , Perl , Python , Java , Lua
Afetado: ActionScript , Haxe , CoffeeScript , Dart , TypeScript
Licença : BSD

JavaScript ( JS para abreviar ) é uma linguagem de script que foi originalmente desenvolvida pela Netscape em 1995 para HTML dinâmico em navegadores da web a fim de avaliar as interações do usuário, alterar, recarregar ou gerar conteúdo e, assim, expandir as possibilidades de HTML e CSS . Hoje, o JavaScript também é usado fora dos navegadores, por exemplo, em servidores e em microcontroladores.

O nome atual da linguagem originalmente chamada LiveScript foi criado em 1996 a partir de uma cooperação entre a Netscape e a Sun Microsystems . Seus applets Java , criados com a linguagem de programação Java , também publicada em 1995 , foram integrados ao Netscape Navigator com a ajuda do LiveScript . Para capitalizar a popularidade do Java, o LiveScript foi renomeado para JavaScript, embora as duas linguagens tenham sido desenvolvidas de forma independente e tenham conceitos básicos completamente diferentes.

O núcleo da linguagem do JavaScript padronizado como ECMAScript ( ECMA 262) descreve uma linguagem de script com tipagem dinâmica , orientada a objetos , mas sem classes . Faz justiça a todos os paradigmas de programação orientada a objetos, entre outras coisas com base em protótipos , cuja declaração é possível a partir do ECMAScript 6 com uma sintaxe semelhante à usada em linguagens de programação baseadas em classes. JavaScript pode ser programado de maneira orientada a objetos , procedural ou funcional , conforme necessário .

desenvolvimento

A sintaxe do JavaScript é semelhante a C -Abkömmlingen. Apesar da semelhança de nomes e sintaxe, JavaScript tem pouco em comum com Java . Em JavaScript, por exemplo, a herança não é suportada por classes , mas por protótipos .

No passado, o JavaScript era usado principalmente no lado do cliente . As implementações de JavaScript ou ECMAScript, por exemplo, com a estrutura Node.js e como JScript ou JScript .NET em um ambiente ASP ou ASP.NET no Microsoft Internet Information Services também permitem aplicativos do lado do servidor. Outros exemplos de programação JavaScript do lado do servidor são POW e Jaxer, que são baseados no mecanismo Mozilla JavaScript SpiderMonkey , V8CGI, que é baseado na implementação JavaScript V8 e integrado ao servidor Apache HTTP , e QML , uma forma estendida de JavaScript para superfícies de desenho e animações.

A linguagem também é usada como linguagem de script para jogos e programas de aplicativos , uma vez que o núcleo da linguagem contém apenas alguns objetos e o intérprete necessário para executar scripts formulados em JavaScript pode, portanto, ser mantido relativamente pequeno.

Além disso, o JavaScript é usado como a língua franca no banco de dados MongoDB e em microcontroladores.

usar

Áreas típicas de aplicação

As áreas típicas de aplicação de JavaScript no navegador da web são:

  • manipulação dinâmica de sites usando o Document Object Model
  • Verificação de plausibilidade ( validação de dados ) de entradas de formulário antes da transmissão para o servidor
  • Exibição de janelas de diálogo
  • Envio e recebimento de dados sem que o navegador precise recarregar a página ( Ajax )
  • Sugira termos de pesquisa enquanto você digita
  • Banners de publicidade ou ticker
  • E-mail ofuscação de combater o spam
  • Altere vários quadros de uma vez ou remova a página do conjunto de quadros
  • Acesso de leitura e gravação a cookies e armazenamento da web no navegador

Abuso

Alguns aplicativos possíveis com JavaScript agem parcialmente contra a vontade do usuário ou contradizem o princípio da menor surpresa . Alguns navegadores, portanto, oferecem funções que suprimem tais funções JavaScript.

Exemplos:

Nota no navegador Firefox para muitas janelas de diálogo
  • Ocultação de endereços de Internet aos quais um link se refere
  • Desativando o menu de contexto para tornar mais difícil salvar imagens ou a página inteira
  • Desativando a função de cópia para tornar mais difícil copiar texto ou imagens
  • Pop-ups não solicitados (publicidade) ou pop-unders ou caixas de diálogo consecutivas que atrapalham o usuário
  • Fechamento involuntário da janela do navegador
  • Redimensionamento não intencional da janela do navegador
  • Os sites sem barreiras são caracterizados pelo fato de que podem ser usados ​​sem restrições, tanto quanto possível, mesmo quando o JavaScript está desligado. O JavaScript desativado restringe parcialmente a usabilidade de um site.
  • Medidas que permitem que um usuário seja reconhecido quando visitar um site em uma data posterior, ignorando as configurações de segurança do navegador (ver anonimato na Internet )
  • No caso de aplicativos da Web vulneráveis, o JavaScript também pode ser mal utilizado por terceiros, por exemplo, via XSS (injeção de código).

história

Em 18 de setembro de 1995, a Netscape lançou a versão anterior do Navigator 2.0, um navegador com uma linguagem de script embutida, que na época se chamava LiveScript e havia sido desenvolvido por Brendan Eich . A linguagem pode incluir Verifique as entradas do formulário do usuário antes de enviar. Em 4 de dezembro de 1995, a Netscape e a Sun Microsystems anunciaram uma cooperação voltada para a interação do LiveScript diretamente com miniaplicativos Java. A Sun desenvolveu as classes Java necessárias, a interface Netscape do LiveConnect e renomeou a linguagem para JavaScript (JavaScript 1.0). JavaScript é uma marca comercial da Oracle desde que adquiriu a Sun Microsystems .

Com a primeira versão beta do Navigator 3.0, a Netscape introduziu o JavaScript 1.1 em 29 de abril de 1996. Na mesma versão surgiram as novidades para poder acessar imagens e criar os chamados rollover graphics . LiveConnect agora era parte integrante do navegador. Com a versão beta do Internet Explorer  3, a Microsoft apresentou seu primeiro navegador compatível com JScript em maio de 1996. Este foi o início da guerra dos navegadores .

Com o anúncio do Netscape Communicator , o JavaScript 1.2 foi lançado em 15 de outubro de 1996; No entanto, o Netscape Communicator 4.0 com JavaScript 1.2 não apareceu até 4 de junho de 1997. Também em junho de 1997, a European Computer Manufacturers Association publicou seu padrão ECMA-262 (ECMAScript) , que foi desenvolvido em conjunto com a Netscape e tinha como objetivo padronizar o básico elementos de uma linguagem de script. Este se tornou o padrão ISO ISO / IEC 16262: 1998 Tecnologia da informação - especificação de linguagem ECMAScript em abril de 1998 . Em 1 de outubro de 1997, o Internet Explorer 4 foi lançado, cobrindo a faixa de idiomas do JavaScript 1.1. Além disso, foram publicadas extensões próprias, o que gerou diferenças de compatibilidade entre o Navigator e o Internet Explorer e forneceu uma sintaxe semelhante ao DOM que possibilitou acessar todos os elementos do site e alterá-los conforme necessário.

O interpretador JavaScript Rhino implementado em Java foi fornecido como parte do Java Runtime Environment como parte do Java Runtime Environment a partir da versão 6.0 . Em julho de 1998, com a versão beta do Netscape Communicator 4.5, o JavaScript 1.3, que já estava disponível na versão 4.06 do Netscape Communicator, foi lançado. Em outubro de 1998, a Netscape introduziu o JavaScript 1.4. Esta versão era totalmente compatível com ECMA-262. No entanto, um navegador com suporte para esta versão não apareceu. Em abril de 2000, o Preview Release 1 do Navigator 6 veio com JavaScript 1.5 e DOM Nível 1. Em 5 de junho de 2002 Mozilla 1.0 com JavaScript 1.5 (JavaScript versão 1.5 corresponde a ECMA-262 versão 3), em 29 de novembro de 2005 Mozilla Firefox 1.5 com JavaScript 1.6, em 12 de julho de 2006 Mozilla Firefox 2.0b1 com JavaScript 1.7 e em 18 de dezembro de 2007 Mozilla Firefox 3.0b2 com JavaScript 1.8.

Histórico de versão de JavaScript

história
versão publicação Correspondência Netscape Navigator Mozilla Firefox Internet Explorer Ópera safári Google Chrome
Versão mais antiga; Não mais suportado: 1.0.0 Março de 1996 2.0 3,0
Versão mais antiga; Não mais suportado: 1.1.0 Agosto de 1996 3,0
Versão mais antiga; Não mais suportado: 1.2.0 Junho de 1997 4,0-4,05
Versão mais antiga; Não mais suportado: 1.3.0 Outubro de 1998 ECMA-262 1ª edição / ECMA-262 2ª edição 4,06-4,7x 4,0
Versão mais antiga; Não mais suportado: 1.4.0 Netscape Server
Versão mais antiga; Não mais suportado: 1.5.0 Novembro de 2000 ECMA-262 3ª edição 6,0 1.0
  • 5.5 (JScript 5.5)
  • 6 (JScript 5.6)
  • 7 (JScript 5.7)
  • 8 (JScript 6)
  • 6,0
  • 7,0
  • 8,0
  • 9,0
Versão mais antiga; Não mais suportado: 1.6.0 Novembro de 2005 1.5 + Array extras + Array & String genéricos + E4X 1,5
  • 3,0
  • 3,1
Versão mais antiga; Não mais suportado: 1.7.0 Outubro de 2006 1.6 + geradores Pythônicos + Iteradores + let + atribuições de desestruturação 2.0
  • 3,2
  • 4,0
1.0
Versão mais antiga; Não mais suportado: 1.8.0 Junho de 2008 1.7 + Expressões de gerador + Fechamentos de expressão 3,0
Versão mais antiga; Não mais suportado: 1.8.1 Junho de 2009 1.8 + pequenas atualizações 3,5
Versão Atual: 1.8.2 Janeiro de 2010 1.8.1 + pequenas atualizações 3,6
Versão Atual: 1.8.5 Julho de 2010 1.8.1 + Conformidade ECMAScript 5 9.0 (JScript 9.0)

Histórico da versão do ECMAScript (ECMA-262)

A versão atual é a versão 2020, publicada em junho de 2020 como "ECMAScript 2020". Seguem atualizações anuais. Os padrões são desenvolvidos no GitHub.

versão publicado em Diferenças em relação à versão anterior editor
Versão mais antiga; Não mais suportado: 1 Junho de 1997 primeira versão Guy L. Steele, Jr.
Versão mais antiga; Não mais suportado: 2 Junho de 1998 Mudanças para compatibilidade com o padrão internacional ISO / IEC 16262 Mike Cowlishaw
Versão mais antiga; Não mais suportado: 3 Dezembro de 1999 Expressões regulares , melhor processamento de strings de caracteres, fluxo de controle, tratamento de erros com try / catch, melhor tratamento de erros, melhor formatação na saída de números, etc. são novos . Mike Cowlishaw
Versão mais antiga; Não mais suportado: cancelado Devido ao desacordo sobre o futuro da linguagem, o desenvolvimento do esboço complexo para ECMAScript 4 foi interrompido. Algumas ideias vão voltar à vida no ES6.
Versão mais antiga; Não mais suportado: 5 Dezembro de 2009 No "modo estrito", uma verificação de erro estendida é ativada. Construções de linguagem pouco claras do ECMAScript 3 são desativadas e novos recursos, como métodos getter e setter, suporte para JSON , etc., são adicionados. Pratap Lakshman , Allen Wirfs-Brock
Versão mais antiga; ainda com suporte: 5,1 Junho de 2011 Está em conformidade com o padrão internacional ISO / IEC 16262: 2011, versão 3 Pratap Lakshman, Allen Wirfs-Brock
Versão mais antiga; ainda com suporte: 2015 Junho de 2015 Nova sintaxe para aplicativos complexos, como classes e módulos, que podem, no entanto, ser definidos com terminologia semelhante à do ECMAScript 5 (modo estrito). Novos componentes de linguagem como for/ of-loops, sintaxe parcialmente baseada em Python etc. O nome do código é “Harmony” e era chamado de “ECMAscript 6” até pouco antes de ser aprovado. Allen Wirfs-Brock
Versão mais antiga; ainda com suporte: 2016 Junho de 2016 **( Função de energia ) ,,Array.prototype.includes várias adaptações para geradores, atribuições destrutivas Brian Terlson
Versão mais antiga; ainda com suporte: 2017 Junho de 2017 async/ await, várias Objectfunções Brian Terlson
Versão mais antiga; ainda com suporte: 2018 Junho de 2018 global, import(), Resto / Espalhe Propriedades for- await- of(iteradoras Asynchronous), estofo string , ... Brian Terlson
Versão mais antiga; ainda com suporte: 2019 Junho de 2019 Array#{flat,flatMap}, Object.fromEntries, String#{trimStart,trimEnd}, Symbol#description, ... Brian Terlson, Bradley Farias, Jordan Harband
Versão Atual: 2020 Junho de 2020 String.matchAll, BigInt, import(), ... Jordan Harband, Kevin Smith

segurança

Princípio da caixa de areia

O JavaScript é executado no navegador em uma chamada sandbox . O efeito disso é que em JavaScript você só tem acesso aos objetos do navegador e não ao sistema de arquivos . Uma exceção é o acesso de leitura a um arquivo que foi <input type="file">selecionado pelo usuário por meio da caixa de diálogo de seleção de arquivo, iniciada com o elemento HTML .

Para evitar problemas de segurança, como cross-site scripting , cada site ou aplicativo da web é executado isoladamente no navegador e a troca de dados é impedida. Sem essa proteção, seria possível executar código malicioso em um lado que, por exemplo, lê ou manipula dados bancários ou de login em outras janelas do navegador que estão abertas ao mesmo tempo.

Certas funções do navegador relevantes para a segurança, como fechar a janela do navegador, ocultar e mostrar barras de ferramentas , alterar a página inicial do navegador, acessar a área de transferência ou ler as últimas páginas da Web visitadas pelo usuário também são protegidas por entrada obrigatória do usuário.

Por padrão, um script é executado como um único thread em um navegador . Loops de espera ou cálculos longos devem, portanto, ser evitados em programas JavaScript. Com Workerobjetos , é possível criar threads adicionais.

Desativando JavaScript

Em muitos navegadores habilitados para JavaScript, o JavaScript pode ser desativado ou ações individuais, como alterar o texto na barra de status ou manipular as janelas do navegador, podem ser desativadas. Com alguns navegadores, isso também pode ser automatizado por meio de extensões que ativam e desativam JavaScript especificamente para páginas que usam listas brancas e negras . Como resultado, os desenvolvedores não podem confiar que os programas JavaScript se comportem da mesma maneira ou funcionem em todos os ambientes.

Elementos de linguagem

Tipos de dados

JavaScript é digitado dinamicamente . Isso significa que a atribuição de valores a variáveis ​​não está sujeita a quaisquer restrições baseadas em tipo . No entanto, existem várias extensões para JavaScript que requerem digitação estática como uma opção ou obrigatória, por exemplo, TypeScript da Microsoft .

Devido à tipagem dinâmica, o tipo de dado não é propriedade de uma variável, mas sim propriedade de seu valor atual (ou propriedade de um literal ) em relação ao tempo de execução . O tipo de dados de um valor pode ser determinado com o operador unáriotypeof .

Tipos de dados primitivos

Entre os tipos de dados primitivos incluem valores para números, strings, valores booleanos e símbolos. As cadeias de caracteres têm o tipo String ( typeofsuprimentos "string"), os valores numéricos são o tipo Número ( typeofsuprimentos "number"), os valores booleanos são o tipo Booleano ( typeofsuprimentos "boolean"). Outro tipo de dado primitivo, embora raramente usado, é o símbolo , que funciona ( entrega ) como um identificador (consulte também símbolo de palavra-chave ). typeof"symbol"

Um caso especial é o tipo Indefinido com undefinedo único valor ( typeofretorna "undefined").

Tipos de dados não primitivos

As funções não são um tipo primitivo; typeofsuprimentos "function". Para todos os outros valores - nullincluindo expressões regulares, matrizes e o valor - retorna typeofo valor da string "object". Ao contrário de outras linguagens de programação, não há matrizes associativas reais em JavaScript .

Os objetos criados com as predefinidas funções construtoras String() , Number()e Boolean()se comportam como valores dos tipos de dados correspondentes -, mas os typeofoperadores "object"retornos. Esses objetos são conhecidos como objetos de invólucro . Não há função construtora com o mesmo nome para o tipo de dados do símbolo . A seguir está um exemplo de uma variável e o objeto de invólucro correspondente:

let variable = "Beispieltext";
// Die Funktion "alert" gibt das Ergebnis "string" in einem Fenster aus.
alert(typeof variable);

variable = new String("Beispieltext");
alert(typeof variable); // ergibt "object"

Por outro lado, os valores dos tipos primitivos Number , Boolean e String são convertidos automaticamente em objetos da função construtora correspondente, se necessário:

let variable = "Beispieltext";
alert(variable.length); // ergibt 12

Estruturas de controle

JavaScript conhece as estruturas de controle usuais . Se estes são para conter mais do que uma instrução , um bloco fechado em colchetes deve ser utilizado. As instruções são encerradas com um ponto e vírgula. Na maioria dos casos, isso é opcional; a inserção automática de ponto-e-vírgula significa que geralmente é adicionado automaticamente.

if-else (declaração condicional)

if (bedingung) {
    anweisungen;
} else {
    anweisungen;
}

Abreviação para atribuições de valores condicionais:

variable = bedingung ? wertWennWahr : wertWennFalsch;

estrutura de controle de chave

switch (variable) {
    case wert1:
        anweisungen;
        break;
    case wert2:
        anweisungen;
        break;
    default:
        anweisungen;
}

loop while

while (bedingung) {
    anweisungen;
}

loop do-while

do {
    anweisungen;
} while (bedingung);

para loop

for (startausdruck; bedingung; iterationsausdruck) {
    anweisungen;
}

para ... em loop

Com esta instrução, todas as propriedades próprias e herdadas de um objeto são executadas, as quais têm o atributo interno Enumerable. Este atributo foi introduzido no ECMA Script 5 e não é definido para certas propriedades internas (por exemplo, a função toString do Objeto de protótipo), mas geralmente pode ser definido (e removido) pelo usuário. O nome da propriedade é atribuído a uma variável especificada com cada passagem de loop.

for (let eigenschaftsname in objekt) {
    anweisungen;
}

para ... de loop

Esta estrutura de controle funciona como um for… in loop, com a diferença de que a variável especificada não recebe o nome da propriedade, mas o valor da propriedade.

for (let wert of objekt) {
    anweisungen;
}

variáveis

As variáveis ​​devem ser declaradas em JavaScript com letou vare, então, são válidas dentro do escopo em que foram declaradas, sendo leto escopo ainda mais limitado do que var. Se você usar variáveis ​​sem declará-las explicitamente de antemão, elas serão declaradas implicitamente como propriedades do objeto global (no navegador window); este comportamento pode ser evitado pela instrução "use strict";. Um recurso especial do JavaScript é o levantamento de variáveis, o que garante que todas as variáveis ​​e funções declaradas em uma seção de código sejam automaticamente trazidas para o início durante o processamento (apenas a declaração, mas não sua atribuição de valor).

Escopo de variáveis

Variáveis ​​declaradas dentro de funções ou como parâmetros de função têm validade local; Variáveis ​​declaradas fora das funções são globalmente válidas. Global para JavaScript em navegadores significa que as variáveis ​​declaradas desta forma são válidas para todo o site e para todos os JavaScripts ativos. Uma vez que isso pode levar a efeitos colaterais indesejados com outros scripts integrados na página (como plug-ins de terceiros, análise da web ou banners publicitários), as variáveis ​​globais devem ser evitadas tanto quanto possível.

let a, b;               // explizite Deklaration einer globalen Variable
a = 1;                  // Definition einer Variable
console.log(a);         // ergibt 1

c = 2;                  // implizite Deklaration ohne let - es entsteht keine Variable, sondern ...
console.log(c);         // ergibt 2
console.log(window.c);  // ... dem globalen Objekt (Window) wurde eine Eigenschaft zugewiesen
console.log(window.a);  // Fehler

function foo(e) {       // saubere Deklaration eines Funktionsparameters
    let f, g = 5;       // saubere Deklaration und Definition einer lokalen Variablen
    console.log(a);     // globale Variablen sind überall gültig
    console.log(c);     // Eigenschaften des globalen Objektes auch
    console.log(e);     // Funktionsparameter haben denselben Gültigkeitsbereich wie lokale Variablen
    h = 7;              // das implizit deklarierte h ist eine globale Variable
}

foo(a);

console.log(e);           // Fehler, da der Funktionsparameter e nur innerhalb der Funktion gültig ist
console.log(f);           // Fehler, da die Variable f nur innerhalb der Funktion gültig ist

console.log(h);           // ergibt 7 - (s.o.)
console.log(window.h);    // ergibt 7 - die globale Variable ist eine Eigenschaft von window

Constantes

As constantes também devem ser constdeclaradas, um valor deve ser atribuído a elas durante a inicialização. As mesmas condições se aplicam à área de validade para as declarações de variáveis ​​com let. As constantes não podem ser alteradas reatribuindo-as, mas - se as constantes forem objetos - as propriedades individuais das constantes podem ser alteradas.

Funções

Funções são objetos completos em JavaScript. Eles têm métodos e propriedades, podem ser criados e sobrescritos, passados ​​como argumentos para funções e podem ser criados e retornados por eles.

No último caso, um encerramento é criado , também conhecido como encerramento de função, com o qual, por exemplo, o encapsulamento de dados pode ser implementado:

let nachricht = function() {
    let geheim = 42;

    return function() {
        return geheim;
    };
};

// botschaft ist eine von nachricht zurückgegebene Funktion
let botschaft = nachricht();
alert(typeof geheim); // undefined
alert(botschaft()); // 42

Nem todos os argumentos de uma função precisam ser especificados ao chamá-la. O valor undefined é definido para argumentos ausentes ; Desde ECMAScript 2015, os parâmetros também podem ser definidos com valores padrão. argumentsOs argumentos também podem ser acessados dentro da função por meio do objeto.

geração

Existem várias maneiras de criar funções em JavaScript:

  • Declarações de funções:
function f(x, y) {
    return x + y;
}
  • Expressões de função:
let f = function(x, y) {
    return x + y;
};
  • Expressões de função invocadas imediatamente:

As funções anônimas também podem ser executadas diretamente, sem primeiro atribuí-las a uma variável. Isso pode ser usado para encapsular o escopo das variáveis.

(function(x, y) {
    return x + y;
})(2, 3);
  • Expressões de função nomeada:

fUma função com um identificador é gatribuída à variável . Fora da função, ela pode ser ftratada com , dentro com fe g.

let f = function g(x, y) {
    return x + y;
};
  • Construtores de função:
let f = new Function('x', 'y', 'return x + y;');
  • Funções de seta:

Os colchetes são opcionais se a função tiver exatamente um argumento. Se as chaves forem omitidas, você deve especificar exatamente uma expressão sem retorno como o valor de retorno. Qualquer código pode ser especificado com chaves, mas return deve ser usado para valores de retorno.

(x, y) => x + y;
(x, y) => { return x + y; };
x => x + 1;
x => { return x + 1; };

// Eine so erzeugte Funktion kann man natürlich auch einer Variablen zuweisen
let f = (x, y) => x + y;

exemplo

Uma implementação funcional e recursiva do algoritmo euclidiano com dois argumentos se parece com isto:

function euklid(a, b) {
    if (b === 0)
        return a;

    return euklid(b, a % b);
}

Implementação do algoritmo euclidiano com qualquer número de argumentos:

function ggT(...numbers) {
    if (numbers.length === 0) // (1.)
        return 0;

    if (numbers.length === 1) // (2.)
        return numbers[0];

    return numbers.reduce(euklid); // (3.)
}

console.log(ggT());           // 0
console.log(ggT(4));          // 4
console.log(ggT(24, 36, 84)); // 12
  1. Se chamado ggTsem um argumento, zero é retornado.
  2. Se a ggTchamada for feita com exatamente um argumento, o próprio argumento será retornado. Isso também é conhecido como identidade .
  3. Reduzido numbersa um único valor reduzindo dois elementos por vez da esquerda para a direita com reducee euklid.

Implementação do algoritmo euclidiano com aplicação parcial:

function ggT(first) {
    if (first === undefined)
        return 0;

    return function(second) {
        if (second === undefined)
            return first;

        return ggT(euklid(first, second));
    };
}

console.log(ggT());             // 0
console.log(ggT(4)());          // 4
console.log(ggT(24)(36)(84)()); // 12

Objetos

Os objetos em JavaScript consistem em propriedades que são implementadas como pares nome / valor. Nenhuma distinção é feita entre atributos e métodos do objeto (uma propriedade cujo valor tem o tipo Function atua como um método). Cada objeto - mesmo objetos criados por literais - herda do protótipo do construtor de objeto global.

Objetos predefinidos

JavaScript conhece vários objetos embutidos e tipos de objetos que são definidos no padrão ECMAScript. Um tipo de objeto é representado por uma função construtora com o mesmo nome , que pode ser usada para criar objetos do tipo correspondente e que também contém uma referência ao protótipo do tipo de objeto.

Outros objetos que são usados no lado do cliente JavaScript, surgiu historicamente principalmente pela Netscape especificações ( window, documentetc.). O windowpróprio objeto é de fato o objeto global simplesmente atribuindo windowo objeto global a uma variável . Vários sub-objectos de documentter sido agora através de DOM padronizado HTML ( title, images, links, formsetc.). Os navegadores atuais também suportam DOM Core e outros padrões W3C DOM, bem como extensões para Microsoft JScript .

Acesso às propriedades e métodos do objeto

As propriedades dos objetos (também os métodos são propriedades) podem ser tratadas da seguinte forma:

Notação de pontos (com identificadores estáticos )
objekt.eigenschaft;

objekt.methode(parameter1, parameter2);
Notação de colchetes (com identificadores dinâmicos )
objekt["eigenschaft"];

objekt["methode"](parameter1, parameter2);

// Eigenschaftsname, der in Punktnotation illegal wäre
objekt["methode 1"]();

// So können auch alle Eigenschaften des Objekts durchlaufen werden
for (let eigenschaftsName in objekt) {
    console.log(eigenschaftsName, " = ", objekt[eigenschaftsName]);
}

Novas propriedades podem ser adicionadas a todos os objetos em tempo de execução ou as deleteexistentes podem ser removidas com:

// Statisch bzw. dynamisch benannte Eigenschaften hinzufügen:
objekt.eigenschaftA = "ein Wert";
objekt["eigenschaftB"] = "ein anderer Wert";

// Statisch bzw. dynamisch benannte Eigenschaften entfernen:
delete objekt.eigenschaftA;
delete objekt["eigenschaftB"];

Literais de objeto

Os objetos podem ser definidos diretamente em JavaScript com base em suas propriedades:

let meinObjekt = {
    zahl: 42,
    gibZahl: function() {
        return this.zahl;
    }
};

alert(meinObjekt.gibZahl()); // 42

Existe uma notação especial para expressões regulares:

// mit Konstruktorfunktion
(new RegExp("a")).test("ab"); // true

// als Literal
/a/.test("ab"); // true

Funções de construtor

Uma função pode ser usada newpara inicializar um objeto criado com. Neste caso, fala-se de um construtor ou de uma função construtora. Dentro desta função, o novo objeto pode ser thisendereçado por meio da variável .

function MeinObjekt(x) { // Konstruktor
    this.zahl = x;
}

let objekt = new MeinObjekt(3); // Instanz erzeugen
alert(objekt.zahl); // per Meldefenster ausgeben (3)

Propriedades "privadas"

Propriedades e métodos privados não fazem parte explicitamente da linguagem.

Com a ajuda de fechamentos (ver funções ), no entanto, propriedades privadas de objetos podem ser realizadas:

let erschaffeKatze = function() {
    let lebensZahl = 7;

    let maunz = function() {
        return (lebensZahl > 0) ? "miau" : "örks";
    };

    // gibt neues Objekt zurück
    return {
        toeten: function() {
            lebensZahl -= 1;
            alert(maunz());
        }
    };
};

let otto = erschaffeKatze();
otto.toeten(); // miau

Apenas o toetenmétodo de ottoconhece a variável lebensZahl. O efeito é semelhante ao de uma propriedade privada se todos os métodos do gato erschaffeKatzeforem definidos na função geradora . lebensZahlfica então visível para todos os métodos (métodos privilegiados, no exemplo toeten) e funções internas da função geradora (métodos privados, no exemplo maunz), mas não externamente ou de métodos que são subsequentemente anexados ao objeto.

Herança por meio de protótipos

A herança pode ser implementada em JavaScript por meio de protótipos. Isso requer que a propriedade de protótipo de uma função de construtor seja atribuída a um objeto de protótipo. Se um objeto é criado com a função construtora, a propriedade correspondente do protótipo (se disponível) é retornada quando uma propriedade inexistente do novo objeto é acessada. Exemplo:

let fisch = {
    augen: 2
};

let Mutantenfisch = function() {
    this.augen = 3;
};

Mutantenfisch.prototype = fisch;

let blinky = new Mutantenfisch();

// eigene Eigenschaft von blinky
alert(blinky.augen); // 3

// blinkys eigene Eigenschaft wird gelöscht
delete blinky.augen;

// blinky hat die Eigenschaft selbst nicht mehr,
// es schimmert die Eigenschaft des Prototyps durch
alert(blinky.augen); // 2

Para determinar se um objeto tem uma propriedade própria ou se a herdou do protótipo, cada objeto (automaticamente por meio da herança de Object) tem o método hasOwnProperty:

blinky.hasOwnProperty('augen'); // false

Fixação da estrutura e conteúdo do objeto

A estrutura de um objeto obj, que geralmente é completamente dinâmica em JavaScript, pode ser corrigida de várias maneiras: Depois que o método foi chamado Object.preventExtensions(obj), nenhum atributo ou método adicional pode ser adicionado. Object.seal(obj)impede a extensão e a exclusão de atributos e métodos. A chamada Object.freeze(obj)corrige a estrutura do objeto e os valores dos atributos, incluindo os métodos em relação às alterações subsequentes. O status relevante de um objeto objpode ser determinado com Object.isExtensible(obj), Object.isSealed(obj)e Object.isFrozen(obj).

Também é possível objcorrigir apenas um único atributo de um objeto . Por exemplo, a chamada

Object.defineProperty(obj, "vorname", {writable:false});

o atributo obj.vornamesomente leitura.

Princípios de delegação

JavaScript é uma linguagem de delegação com mecanismos de autoexecução e de delegação direta.

Objetos funcionais como papéis (traços e mixins)
JavaScript já suporta várias implementações do modelo de função com base em objetos de função no nível do núcleo da linguagem, como B. Traits e Mixins . Comportamento adicional é fornecido vinculando pelo menos um método usando a palavra-chave thisno corpo de um functionobjeto. Se um objeto requer um comportamento adicional que não pode ser disponibilizado para ele por meio da cadeia de protótipo, uma função pode ser delegada diretamente por callou applypara esse objeto.
Composição e herança de objetos por meio de delegação
Embora a composição em JavaScript possa ser coberta por essa delegação direta, a delegação automática é sempre usada quando o intérprete precisa migrar para cima na cadeia de protótipo de um objeto, por exemplo, B. para encontrar um método associado a este objeto que não pertence a ele diretamente. Assim que o método é encontrado, ele é chamado no contexto deste objeto. Como resultado, a herança em JavaScript é mapeada por meio de um mecanismo de delegação autoexecutável que prototypeestá vinculado à propriedade das funções do construtor.

Manipulação de erros

A partir da versão 3, o ECMAScript possui tratamento de erros adotado do Java . A instrução try … catch … finallycomeça com exceções ( exceções ab), que ocorrem devido a um erro ou throwinstrução de ocorrência. A sintaxe é:

try {
    // Anweisungen, in denen Ausnahmen auftreten oder ausgelöst werden können
} catch (exception) {
    // Anweisungsfolge, die im Ausnahmefall ausgeführt wird.
    // In diesem Teil kann die Fehlerbehandlung erfolgen.
} finally {
    // Anweisungsfolge, die anschließend in jedem Fall ausgeführt wird.
}

throw "sample exception"; // wenn verfügbar, besser: Error-Objekt (siehe unten)

No início, as instruções do trybloco são executadas. Se ocorrer uma exceção, o fluxo de controle é imediatamente catchredirecionado para o bloco com o objeto de exceção como parâmetro.

O bloco de exceção é normalmente ignorado. Após a execução do trybloco (mesmo que parcialmente) e, se aplicável, do catchbloco, as instruções do bloco são sempre finallyexecutadas. A finallyparte-pode ser omitida, alternativamente a catchparte-.

Alguns ambientes de tempo de execução, como V8 (e, portanto, Node.js ) e também muitos navegadores da web fornecem objetos de erro separados que, além da mensagem de erro, também podem transportar um rastreamento de pilha e outras informações adicionais. Para aproveitar essas vantagens, na aplicação mais simples, altere o throwcomando de para .throw "Meldungstext";throw new Error("Meldungstext");

Os parênteses em torno do parâmetro do throwcomando geralmente não são necessários. Se forem necessários em casos excepcionais, por exemplo, para resumir um parâmetro distribuído por várias linhas, a possível confusão com uma chamada de função ainda pode ser evitada inserindo um espaço entre throwos colchetes de abertura.

Bibliotecas JavaScript

Existem várias bibliotecas e frameworks para facilitar a criação de aplicações web com a ajuda de JavaScript . Uma biblioteca é uma coleção de funções que o programador pode usar. Além disso, um framework requer uma certa estrutura de programação devido a um grau especial de abstração .

Desencadeado por novos conceitos como Ajax , tem havido um novo interesse em JavaScript desde 2004. JavaScript é cada vez mais usado para aplicativos rich client que transferem a aparência de programas convencionais de desktop para aplicativos baseados na web. JavaScript desempenha um papel fundamental quando se trata de transferir informações de status entre o navegador e o servidor HTTP sem carregar uma página inteira. No decorrer desses novos requisitos, várias bibliotecas surgiram que desejam simplificar o desenvolvimento de tais aplicativos. Além das funcionalidades do Ajax, a maioria dessas bibliotecas oferece sua própria base para a programação orientada a objetos, uma camada de abstração para um trabalho confortável com o DOM e efeitos gráficos, como animações . Porém, mesmo antes de o Ajax ser amplamente usado, já existiam coleções de funções para oferecer suporte à programação entre navegadores.

Bibliotecas e estruturas de JavaScript bem conhecidas incluem AngularJS , Dojo Toolkit , Ext JS , jQuery , MooTools , Prototype , Qooxdoo , React , Vue.js e a biblioteca de interface de usuário do Yahoo . Moo.fx e Script.aculo.us lidam especificamente com efeitos gráficos . Bibliotecas e estruturas separadas estão disponíveis para programação do lado do servidor usando Node.js.

Algumas bibliotecas e estruturas em particular adicionam funções adicionais à linguagem, que muitas vezes são incorporadas em versões posteriores da especificação ou, se necessário, adaptam implementações mais antigas por meio de polyfill .

JavaScript e otimização de mecanismos de pesquisa (SEO)

Os motores de busca lidam com o processamento de conteúdo Javascript de forma diferente, razão pela qual nos últimos anos tem havido casos repetidos em que o site não foi encontrado nos motores de busca, parcial ou totalmente. De acordo com suas próprias declarações, o operador de mecanismo de busca Google pode rastrear, renderizar e indexar conteúdo JavaScript. Além de recomendações gerais, como Por exemplo, o uso de títulos significativos, códigos de status claros e o tratamento cuidadoso de diretivas noindex, existem recomendações ainda mais específicas em relação ao JavaScript que podem ajudar os aplicativos da web em JavaScript a serem encontrados de forma otimizada por meio da otimização de mecanismo de pesquisa . Isso inclui o lado do servidor ou pré-renderização ou a omissão de fragmentos em links. Há uma série de recomendações oficiais do Google para depurar JavaScript e SEO para verificar como o Googlebot está capturando o conteúdo da web.

Veja também

literatura

Links da web

Commons : JavaScript  - coleção de imagens, vídeos e arquivos de áudio
Wikilivros: Desenvolvimento de sites: JavaScript  - Materiais de Aprendizagem e Ensino
Wikcionário: JavaScript  - explicações de significados, origens de palavras, sinônimos, traduções

Especificações

Documentação

Evidência individual

  1. speakjs.com .
  2. Especificação de linguagem ECMAScript® 2020 . Em: www.ecma-international.org . Ecma International. 30 de junho de 2020. Acessado em 17 de junho de 2021.
  3. Stefan Koch: JavaScript . Introdução, programação e referência - incluindo Ajax. 5ª edição. dpunkt.verlag, Heidelberg 2009, ISBN 978-3-89864-594-2 , visão geral, p. 5-17 (457 pp.).
  4. a b Olaf Göllner: JavaScript para microcontroladores. In: heise online. Verlag Heinz Heise, 13 de agosto de 2013, acessado em 27 de julho de 2016 .
  5. a b Olaf Göllner: Tessel: quadro de desenvolvedores JavaScript para a "Internet das Coisas". In: heise online. Verlag Heinz Heise, 15 de agosto de 2013, acessado em 27 de julho de 2016 .
  6. Stefan Koch: JavaScript . Introdução, programação e referência - incluindo Ajax. 5ª edição. dpunkt.verlag, Heidelberg 2009, ISBN 978-3-89864-594-2 , JavaScript no navegador, p. 137-156 (457 pp.).
  7. ^ Jens Ihlenfeld: Nó - servidor Javascript estritamente orientado a eventos. In: Golem.de. 24 de novembro de 2009. Recuperado em 27 de julho de 2016 .
  8. Steve Champeon: JavaScript: Como chegamos aqui? (Não está mais disponível online.) In: Web DevCenter. O'Reilly, 6 de abril de 2001; arquivado do original em 19 de julho de 2016 ; acessado em 27 de julho de 2016 .
  9. Chris Mills: Uma breve história do JavaScript. In: Wiki do Grupo da Comunidade de Educação na Web. W3C, 27 de julho de 2012, acessado em 27 de julho de 2016 .
  10. Registro de marca registrada # 75026640 no USPTO para JavaScript. In: uspto.gov. United States Patent and Trademark Office , 6 de maio de 1997, acessado em 24 de outubro de 2012 .
  11. Ingo Pakalski: 15 anos da WWW: As Guerras dos Navegadores . A primeira guerra de navegadores coloca a Netscape de joelhos. In: Golem.de. 1 de maio de 2008, acessado em 27 de julho de 2016 .
  12. Klaus-Peter Kerbusk: Abuso do monopólio . In: Der Spiegel . Não. 44 , 1997 ( online ).
  13. ^ Scripting para a plataforma Java. In: Documentação Java SE. Oracle , acessado em 24 de outubro de 2012 .
  14. Florian Scholz, Eric Shepherd: Novo em JavaScript 1.3. Em: Mozilla Developer Network. Mozilla Foundation, 20 de janeiro de 2016, acessado em 27 de julho de 2016 .
  15. Florian Scholz, Eric Shepherd: Novo em JavaScript 1.4. Em: Mozilla Developer Network. Mozilla Foundation, 20 de janeiro de 2016, acessado em 27 de julho de 2016 .
  16. Novos recursos nesta versão. (Não está mais disponível online.) In: DevEdge Online Documentation. Netscape Communications Corporation 29 de outubro de 1998, arquivado do original 2 de agosto de 2004 ; acessado em 27 de julho de 2016 .
  17. Florian Scholz, Eric Shepherd: Novo em JavaScript 1.5. Em: Mozilla Developer Network. Mozilla Foundation, acessado em 20 de janeiro de 2016 .
  18. Wladimir Palant, SylvainPasche, Nickolay Ponomarev, Florian Scholz, Eric Shepherd: Novo em JavaScript 1.6. Em: Mozilla Developer Network. Mozilla Foundation, 4 de abril de 2016, acessado em 27 de julho de 2016 .
  19. Florian Scholz, James Herdman, Eric Shepherd, Robert Sedovšek, David Bruant, Leo Balter, Jonathan Watt, Eli Gray, Nickolay Ponomarev, Martin Honnen, Evan Prodromou: Novo em JavaScript 1.7. Em: Mozilla Developer Network. Mozilla Foundation, 21 de outubro de 2015, acessado em 27 de julho de 2016 .
  20. Florian Scholz, Eli Gray, Leandro Mercês Xavier, Nickolay Ponomarev: Novo em JavaScript 1.8. Em: Mozilla Developer Network. Mozilla Foundation, 20 de janeiro de 2016, acessado em 27 de julho de 2016 .
  21. ^ John Resig: Versões do JavaScript. In: johnresig.com/. 22 de abril de 2008, acessado em 8 de junho de 2020 .
  22. Especificação de linguagem ECMAScript 2020. Junho de 2020, acessado em 19 de junho de 2020 (inglês).
  23. Julia Schmidt: O padrão para ECMAScript deve receber atualizações todos os anos. In: heise Developer. 23 de janeiro de 2015, acessado em 22 de outubro de 2015 .
  24. tc39 / ecma262. In: GitHub. Recuperado em 2 de janeiro de 2017 .
  25. Mudanças no JavaScript, Parte 1: EcmaScript 5
  26. Especificação de linguagem ECMAScript 2015. Recuperado em 2 de janeiro de 2017 .
  27. Especificação de linguagem ECMAScript 2016 . 7ª edição. Emca International, Genebra (inglês, 586 páginas, ecma-international.org [PDF]). Especificação de idioma ECMAScript 2016 ( Memento de 12 de abril de 2015 no arquivo da Internet )
  28. Tabela de compatibilidade ECMAScript 6. In: kangax.github.io. Recuperado em 2 de janeiro de 2017 .
  29. Nicholas C. Zakas: JavaScript profissional para desenvolvedores da Web . John Wiley & Sons., 2011, ISBN 978-1-118-02669-4 (inglês, 960 páginas).
  30. Especificação de idioma ECMAScript 2017. Junho de 2017, acessado em 5 de dezembro de 2017 .
  31. Padrão JavaScript ECMAScript 2016 oficialmente adotado. In: heise online. heise Developer, 17 de junho de 2016, acessado em 3 de janeiro de 2017 .
  32. a b ECMAScript Próxima tabela de compatibilidade. In: kangax.github.io. Recuperado em 2 de janeiro de 2017 .
  33. Especificação de idioma ECMAScript 2017. Ecma International, junho de 2017, acessado em 4 de agosto de 2017 .
  34. Christian Liebel: Evolução na Web: ECMAScript 2017. heise Developer, 1 de agosto de 2017, acessado em 4 de agosto de 2017 .
  35. ECMAScript 2017. In: Explorando ES2016 e ES2017. 22 de março de 2017, acessado em 4 de agosto de 2017 .
  36. ↑ O padrão JavaScript ECMAScript 2018 adotou oficialmente heise.de em 28 de junho de 2018
  37. Acompanhamento de propostas ECMAScript. In: TC39. Ecma, acessado em 4 de agosto de 2017 .
  38. ECMAScript 2019: Nove inovações para o padrão de linguagem JavaScript. In: heise online. heise online, 4 de fevereiro de 2019, acessado em 17 de abril de 2020 .
  39. JavaScript: os recursos do ECMAScript 2020 são corrigidos. In: heise online. heise online, 6 de abril de 2020, acessado em 19 de junho de 2020 .
  40. Rascunho de trabalho do W3C, 24 de setembro de 2015. In: w3.org. Recuperado em 28 de julho de 2016 .
  41. Ilja Zaglov: TypeScript: a nova extensão JavaScript da Microsoft. In: revista t3n . 10 de outubro de 2012, acessado em 10 de outubro de 2012 .
  42. JavaScript / Objetos / Matriz. In: SELFHTML. 15 de julho de 2016, acessado em 27 de julho de 2016 .
  43. para ... em MDN
  44. Object.defineProperty () MDN
  45. para ... de MDN
  46. JavaScript / variável / let in the SELFHTML Wiki
  47. JavaScript / Variable / const no SELFHTML Wiki
  48. Juriy Zaytsev Kangax: Expressões de funções nomeadas desmistificadas. In: kangax.github.io. 17 de junho de 2009, acessado em 28 de julho de 2016 .
  49. a b Especificação de linguagem ECMAScript - ECMA-262 Edição 5.1. Em: ecma-international.org. Recuperado em 28 de julho de 2016 . ( ecma-international.org (PDF) PDF).
  50. Wikipedia em inglês: programação orientada a papéis
  51. Traits for Javascript , 2010.
  52. ^ CocktailJS - Anotações. Características. Talentos. Abril de 2013.
  53. Angus Croll, Um novo olhar sobre JavaScript Mixins, 31 de maio de 2011.
  54. A capacidade de generalizar os muitos talentos das abordagens de programação orientada a funções em JavaScript, como traits e mixins. peterseliger.blogspot.de; 5 de junho de 2014.
  55. API JavaScript Stack Trace no Google V8 Wiki , em 28 de junho de 2010, acessado em 23 de fevereiro de 2013
  56. JavaScript Core Reference: Error ( Memento de 4 de novembro de 2014 no Internet Archive ) em Aptana HTML Reference , a partir de 2 de julho de 2012, acessado em 23 de fevereiro de 2013
  57. Tom DuPont: Relatar erros não tratados do JavaScript. 13 de abril de 2013, acessado em 16 de abril de 2013 (inglês, registro de erros com rastreamento de pilha em JavaScript).
  58. ^ Nico Reed: Qual é o objeto de erro? ( Memento de 31 de março de 2013 no Internet Archive ) In: Nodejitsu Documentation , a partir de 26 de agosto de 2011, acessado em 23 de fevereiro de 2013.
  59. Stefan Koch: JavaScript. Introdução, programação e referência - incluindo Ajax . 5ª edição. dpunkt.verlag, Heidelberg 2009, ISBN 978-3-89864-594-2 , Ajax, p. 333-355 (457 pp.).
  60. Noções básicas de JavaScript SEO | Central de pesquisa do Google. Recuperado em 7 de dezembro de 2020 .
  61. Ferramentas de desenvolvedor da Web para depurar problemas de JavaScript na Pesquisa Google. Acessado em 7 de dezembro de 2020 .