Guia JavaScript, Parte 1: Primeiro programa, Recursos de idiomas, Padrões

Recentemente, realizamos uma pesquisa sobre a viabilidade da tradução deste guia JavaScript. Como se viu, cerca de 90% dos que votaram reagiram positivamente a essa ideia. Portanto, hoje publicamos a primeira parte da tradução.



Este guia, de acordo com o autor, destina-se àqueles que já estão um pouco familiarizados com JavaScript e desejam colocar seus conhecimentos em ordem e também aprender algo novo sobre o idioma. Decidimos expandir um pouco o público desse material, para incluir aqueles que não sabem absolutamente nada sobre JS, e começar escrevendo várias versões de “Hello, world!”.

→ Parte 1: primeiro programa, recursos de linguagem, padrões
→ Parte 2: estilo do código e estrutura do programa
→ Parte 3: variáveis, tipos de dados, expressões, objetos
→ Parte 4: recursos
→ Parte 5: matrizes e loops
→ Parte 6: exceções, ponto e vírgula, literais curinga
→ Parte 7: modo estrito, esta palavra-chave, eventos, módulos, cálculos matemáticos
→ Parte 8: Visão geral dos recursos do ES6
→ Parte 9: Visão geral dos padrões ES7, ES8 e ES9

Olá mundo!

O programa, que é tradicionalmente chamado de " Olá, mundo! "É muito simples. Ele exibe em algum lugar a frase "Olá, mundo!", Ou outra similar, por meio de um determinado idioma.

JavaScript é uma linguagem na qual os programas podem ser executados em diferentes ambientes. No nosso caso, estamos falando de navegadores e da plataforma do servidor Node.js. Se até agora você não escreveu uma única linha de código em JS e está lendo este texto em um navegador, em um computador desktop, isso significa que você está literalmente em segundos a partir do seu primeiro programa JavaScript.

Para escrevê-lo, se você usa o Google Chrome, abra o menu do navegador e selecione o comando > . A janela do navegador será dividida em duas partes. Em uma delas, uma página será visível; em outra, um painel com ferramentas de desenvolvedor será aberto, contendo vários marcadores. Estamos interessados ​​na guia Console . Clique nele. Não preste atenção no que já pode estar presente no console (você pode usar a combinação de Ctrl + L para limpá-lo). Agora estamos interessados ​​em convidar o console. É aqui que você pode inserir o código JavaScript que é executado pressionando a tecla Enter . Vamos inserir o seguinte no console:

 console.log("Hello, world!") 

Este texto pode ser digitado no teclado, você pode copiá-lo e colá-lo no console. O resultado será o mesmo, mas se você estiver aprendendo a programar, é recomendável inserir os textos dos programas e não copiá-los.

Depois que o texto do programa estiver no console, pressione Enter .

Se tudo for feito corretamente, o texto Hello, world! Aparecerá abaixo desta linha Hello, world! . Não preste atenção em tudo o resto.


O primeiro programa no console do navegador é exibir uma mensagem no console

Outra opção do navegador "Olá, mundo!" consiste em exibir uma caixa de mensagem. É feito assim:

 alert("Hello, world!") 

Aqui está o resultado da execução deste programa.


Exibir uma mensagem em uma janela

Observe que a barra de ferramentas do desenvolvedor agora está localizada na parte inferior da tela. Você pode alterar sua localização usando o menu com três pontos no título e selecionando o ícone apropriado. Lá você também pode encontrar um botão para fechar este painel.

Ferramentas de desenvolvedor, incluindo o console, também estão disponíveis em outros navegadores. O console é bom, pois está sempre à mão quando você usa o navegador.

Existem outras maneiras de executar o código JS em um navegador. Portanto, se falarmos sobre o uso normal de programas JavaScript, eles serão carregados no navegador para garantir o funcionamento das páginas da web. Como regra, o código é executado como arquivos separados com a extensão .js , conectados a páginas da Web, mas o código do programa também pode ser incluído diretamente no código da página. Tudo isso é feito usando a <script> . Quando o navegador detecta esse código, ele é executado. Detalhes da tag de script podem ser vistos em w3school.com. Em particular, considere um exemplo que demonstra como usar uma página da Web usando JavaScript usando este recurso. Este exemplo também pode ser executado por meio deste recurso (procure o botão Try it Yourself ), mas faremos um pouco diferente. Nomeadamente, criaremos um novo arquivo em algum editor de texto (por exemplo, no VS Code ou Notepad ++ ), que chamaremos de hello.html , e adicionaremos o seguinte código:

 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html> 

Aqui estamos mais interessados ​​na linha document.getElementById("hello").innerHTML = "Hello, world!"; , que é um código JS. Esse código está entre as tags de abertura e fechamento <script> . Ele encontra um elemento HTML com identificador hello no documento e altera sua propriedade innerHTML (ou seja, o código HTML contido nesse elemento) para Hello, world! . Se você abrir o arquivo hello.html em um navegador, o texto especificado será exibido nele.


Saída JavaScript para o elemento HTML

Como já mencionado, os exemplos fornecidos no w3school.com podem ser tentados ali mesmo. Existem ambientes online especializados para desenvolvimento da Web e, em particular, para a execução de código JS. Entre eles, por exemplo, codepen.io , jsfiddle.net , jsbin.com .

Aqui, por exemplo, se parece com o nosso exemplo, recriado por meio do CodePen.


O campo HTML contém código que descreve o elemento HTML, o campo JS contém código JavaScript e o resultado é exibido na parte inferior da página.

Dissemos acima que os programas JavaScript podem ser executados em várias plataformas, uma das quais é o ambiente do servidor Node.js. Se você quiser aprender JavaScript, concentrando-se especificamente no desenvolvimento do lado do servidor, provavelmente deverá executar os exemplos usando o Node.js. Observe que, de uma maneira simplificada, e sem levar em conta o suporte específico de recursos de idioma específicos usados ​​pelas versões do Node.js. e pelo navegador, o mesmo código funcionará no Node.js. e no navegador, usando os mecanismos básicos do idioma. Ou seja, por exemplo, o comando console.log("Hello, world!") Funcionará lá e ali. Os programas que usam mecanismos específicos do navegador não funcionarão no Node.js. (o mesmo vale para tentar executar programas criados para o Node.js. em um navegador).

Para lançar nosso "Olá, mundo!" no ambiente Node.js, instale o Node.js fazendo o download do pacote de distribuição apropriado a partir daqui . Agora crie o arquivo hello.js e coloque o seguinte código:

 console.log('Hello, World!'); 

Usando a linha de comando, iremos para a pasta na qual esse arquivo está armazenado e executaremos o seguinte comando:

 node hello.js 

Aqui está o resultado de sua implementação:


Mensagem impressa por Node.js

A propósito, você deve ter notado (e provavelmente percebido se você digitou o código por si mesmo) que alguns dos exemplos acima usam ponto e vírgula no final das linhas, e outros não. Em algumas, o texto que queremos exibir no console ou como uma mensagem é cercado por aspas duplas e, em algumas, simples. Talvez agora você esteja se perguntando por que isso ocorre e como, se diferentes versões do código funcionarem sem erros, escreva esse código corretamente. Se você responder a essa pergunta sem entrar em detalhes e sem levar em conta alguns pequenos detalhes, podemos dizer que as duas opções de uso de aspas e ponto-e-vírgula são aceitáveis ​​e que funcionam da mesma maneira. A escolha de uma opção específica depende do estilo de escrever o código ao qual o programador adere e das necessidades de uma determinada parte do programa. Além disso, com esses exemplos simples, você pode sentir uma das características do JavaScript, que é a linguagem que dá ao programador alguma liberdade.

Agora, após o seu primeiro conhecimento do JavaScript, oferecemos-lhe para falar mais sobre esse idioma.

Visão geral do JavaScript

JavaScript é uma das linguagens de programação mais populares do mundo. Criada há mais de 20 anos, percorreu um longo caminho em seu desenvolvimento. O JavaScript foi concebido como uma linguagem de script para navegadores. No começo, ele tinha capacidades muito mais modestas do que agora. Foi usado principalmente para criar animações simples, como menus suspensos, eles sabiam disso como parte da tecnologia Dynamic HTML (DHTML, HTML dinâmico).

Com o tempo, as necessidades do ambiente da web cresceram, em especial, surgiram novas APIs e o JavaScript, para apoiar o desenvolvimento da web, foi necessário acompanhar as outras tecnologias.

Atualmente, o JS é usado não apenas em navegadores tradicionais, mas também além. Em particular, estamos falando sobre a plataforma do servidor Node.js, sobre as possibilidades de usar JavaScript no desenvolvimento de aplicativos móveis e incorporados, sobre como resolver uma ampla variedade de tarefas para as quais o JavaScript não era usado antes.

Principais recursos de JavaScript

JavaScript é uma linguagem que possui os seguintes recursos:

• Alto nível Ele fornece abstrações do programador que permitem que você não preste atenção aos recursos do hardware no qual os programas JavaScript são executados. O idioma gerencia automaticamente a memória usando o coletor de lixo. Como resultado, o desenvolvedor pode se concentrar em resolver as tarefas a sua frente, sem se distrair com mecanismos de baixo nível (embora, note-se, isso não elimine a necessidade de uso racional da memória). A linguagem oferece ferramentas poderosas e convenientes para trabalhar com dados de vários tipos.
• Dinâmico. Diferentemente das linguagens de programação estática, as linguagens dinâmicas são capazes, durante a execução do programa, de executar ações que as linguagens estáticas executam durante a compilação do programa. Essa abordagem tem seus prós e contras, mas fornece ao desenvolvedor recursos poderosos como digitação dinâmica, ligação tardia, reflexão, programação funcional, alteração de objetos durante a execução, fechamento e muito mais.
• Digitado dinamicamente. Os tipos de variáveis ​​de desenvolvimento JS são opcionais. Na mesma variável, por exemplo, você pode primeiro escrever uma sequência e, em seguida, um número inteiro.
• Fracamente digitado. Diferentemente de idiomas com digitação forte, idiomas com digitação fraca não forçam o programador, por exemplo, a usar objetos de certos tipos em determinadas situações, executando, se necessário, conversões implícitas de tipo. Isso oferece mais flexibilidade, mas os programas JS não são seguros para tipos, o que torna as tarefas de verificação de tipos mais complicadas (o TypeScript e o Flow visam solucionar esse problema).
• Interpretado. Acredita-se amplamente que o JavaScript é uma linguagem de programação interpretada, o que significa que os programas nele escritos não precisam ser compilados antes de serem executados. JS nesse sentido se opõe a linguagens como C, Java, Go. Na prática, os navegadores, para melhorar o desempenho do programa, compilam o código JS antes de executá-lo. Esta etapa, no entanto, é transparente para o programador, não requer esforços adicionais dele.
• Multiparadigm. O JavaScript não impõe ao desenvolvedor o uso de nenhum paradigma de programação específico, diferente de, por exemplo, Java (programação orientada a objetos) ou C (programação imperativa). Você pode escrever programas JS usando um paradigma orientado a objetos, em particular, usando protótipos e classes que apareceram no padrão ES6. Os programas em JS também podem ser escritos em um estilo funcional, devido ao fato de que as funções aqui são objetos de primeira classe. JavaScript permite o estilo imperativo usado em C.

Sim, a propósito, deve-se notar que JavaScript e Java não têm nada em comum. Estes são idiomas completamente diferentes.

JavaScript e padrões

ECMAScript, ou ES, é o nome do padrão que guia os desenvolvedores de mecanismos JavaScript, ou seja, os ambientes em que os programas JS são executados. Vários padrões introduzem novos recursos no idioma, falando sobre o qual o nome dos padrões em forma abreviada é frequentemente mencionado, por exemplo - ES6. ES6 é o mesmo que ES2015, somente no primeiro caso o número significa o número da versão da norma (6) e no segundo - o ano de adoção da norma (2015).

Aconteceu que no mundo da programação da web por muito tempo o padrão ES3, adotado em 1999, era relevante. A quarta versão do padrão não existe (eles tentaram adicionar muitos recursos novos a ele e nunca o aceitaram). Em 2009, o padrão ES5 foi adotado, o que foi uma grande atualização para o idioma, a primeira em 10 anos. Depois disso, em 2011, o padrão ES5.1 foi adotado, e também havia muitas coisas novas. O padrão ES6 adotado em 2015 também se tornou muito significativo em termos de inovação. A partir de 2015, novas versões do padrão são adotadas todos os anos.

A versão mais recente do padrão no momento da publicação deste material é ES9 , adotada em junho de 2018.

Sumário

Hoje escrevemos "Olá, mundo!" no JavaScript, examinou os principais recursos da linguagem e falou sobre sua padronização. Da próxima vez, falaremos sobre o estilo dos textos JavaScript e a estrutura lexical dos programas.

Caros leitores! Se você, antes de ler este material, não conhecia o JavaScript, informe-nos se conseguiu executar o "Olá, mundo!".