It’s a repository of JavaScript (JS) programming 📜

I created this repository for my JavaScript Full-Stack development learning.

🎒 Prerequisites and repositories 📚:

  • Good domains in English;
  • Programming logic;
  • Programming paradigms;
  • HTML, CSS, SVG, Sass, Bootstrap;
  • Databases, SQL language and No-SQL;
  • HTTP methods and APIs
  • Desire to learn.

⚠️ WARNING: It’s very important to install each one of components shown and to execute the codes on your own machine. Besides that, please note that repository is only focused in JavaScript development, if you want to learn about HTML5, CSS3 or JS Frameworks i recommend to access another repositories, click on links bellow!

🔗 Links de Apoio 📚:

Codepen
FreeCodeCamp
StackOverflow
HTML5
Css3
JS
JS
JSON

🧩 Para simulações de programação recomendo esses jogos educacionais ⚔️:


🐒 Paradigmas de desenvolvimento de software 🧒

Hoje em dia, o desenvolvimento de sistemas se baseia em vários e diferentes paradigmas, tais como os listados a seguir:

  • Imperativo (Procedural): Segue sequências de comandos ordenados segundo uma lógica.
  • Funcional: Trabalha com a divisão de problemas através de funções, que resolvem separadamente problemas menores e que, ao serem organizados, resolvem o problema como um todo.
  • Lógico: Voltado ao desenvolvimento de problemas de lógica e usado em sistemas de inteligência computacional.
  • Orientado a Objetos (OO): Define um conjunto de classes para dividir o problema e realiza a interação entre as diferentes classes para também resolver o problema como um todo.

📜 The History of JavaScript (JS) 🔢

Em maio de 1995, Brendan Eich, que trabalhava na Netscape, desenvolveu uma linguagem de programação em apenas 10 dias. A linguagem era bem simples, com o intuito de atrair novos programadores para ela.

O nome dessa linguagem inicialmente foi Mocha, que é o nome de um tipo de café. Logo esse nome foi alterado para LiveScript.
Em maio de 1995 também estava surgindo uma nova linguagem de programação que prometia revolucionar o modo de programar: Java, da Sun MicroSystems. Seu objetivo era nos poupar do trabalho de programar para cada um dos sistemas operacionais. Escreva uma única vez, execute em qualquer lugar (Write once, run anywhere.).

Curiosidade: O JavaScript foi lançado junto com a versão beta do Netscape 2.0.

Para aproveitar o marketing, o LiveScript teve seu nome alterado para JavaScript em 4 de dezembro de 1995. Isso causou confusões que existem até hoje para quem está começando no mundo da programação, pois pela semelhança do nome, muitos pensam que é a mesma coisa, ou que o JavaScript é uma versão mais simples do Java. Porém, foi apenas uma jogada de Marketing.

📜 JavaScript (JS) Timeline 🕰️

JS Timeline

📜 O que é JavaScript (JS)? 📜

O JavaScript (JS) é uma linguagem de programação dinâmica, que é comumente utilizada como parte dos navegadores, criada para esse propósito, manipular elementos no HTML. Mas acabou crescendo, e atualmente podemos ver diversos ambientes que rodam JavaScript, além de desenvolver para os mais variados fins, como extensões para aplicações, desenvolvimento híbrido para desktop ou mobile e até mesmo códigos back-end.

Quando falamos de linguagens de programação, percebemos que estas se parecem como times de futebol, cada desenvolvedor gosta de uma e acredita na qualidade que ela oferece, mas nenhuma delas consegue assumir uma característica que JavaScript assumiu: a “onipresença” em aplicações. Amando ou odiando, ele está em todos os lugares, é difícil escapar. Uma linguagem que muitas vezes é julgada como simples brinquedo de front-end, criando firulas para os olhos de usuários leigos, na verdade, é uma grande ferramenta.
A web atualmente está infestada de códigos JavaScript. Os recursos oferecidos por muitos dos sites que acessamos são controlados por ele, desde a mais simples interação com formulários, até mesmo grandes plataformas como Google Docs, foram desenvolvidas com base nos recursos dessa linguagem. Aprender esta linguagem se torna essencial, uma grande ferramenta para auxiliar o desenvolvimento.

Além disso, a linguagem apresenta características incomuns à maioria dos desenvolvedores que estão acostumados com Java ou C#. O JavaScript não apresenta classes do mesmo modo que as outras linguagens e funções estão em todos os lugares, fazendo todos os serviços possíveis, desde criar novos objetos até retornarem novas funções.
A linguagem apresenta uma sintaxe simples que facilita o aprendizado, mas também apresenta um comportamento diferenciado das demais, afinal, um objeto que pode ter atributos adicionados ou removidos em tempo de execução de forma simples não é algo comum ao dia a dia de desenvolvedores de outras linguagens.
Essa simplicidade esconde o quão poderoso podemos tornar nosso desenvolvimento, e a primeira vista, muitos desenvolvedores olham e acreditam que a linguagem é defeituosa ou esquisita, mas não compreendem o real poder que se esconde por trás desta simplicidade.

Por fim, que venha o JavaScript, uma linguagem flexível que consegue se aproximar de muitas outras, mas que em sua essência é completamente diferente. Sendo assim vamos aprender o que realmente ela tem a nos oferecer, e perceber quão poderosa ela pode se tornar dentro de nossas aplicações.

Diferente da linguagem HTML, a linguagem JavaScript corresponde à programação orientada a objetos, isto significa que todos os elementos de uma página da Web são tratados como objetos. Estes objetos são agrupados de acordo com seu tipo ou finalidade.

Hello, World! – JavaScript

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

📜 ECMAScript (ES) 📒

Outro nome muito conhecido entre os desenvolvedores é o ECMAScript (ES), derivado dos anos de 1996 e 1997 quando a organização European Computer Manufactures Association (ECMA) padronizou a linguagem, surgindo assim às versões de ECMAScript.

Essa padronização define a estrutura da linguagem, seus comandos, como ela deve se comportar, etc. Baseando-se nessas especificações, os desenvolvedores dos navegadores sabem o que um interpretador de JavaScript deve ter e como deve responder aos comandos.
Baseando-se nessas especificações, outras linguagens também surgiram, como o JScript, ActionScript e TypeScript.

👍 Dica: O nome JavaScript e ECMAScript definem a mesma linguagem, então podem ser usados livremente como sinônimos.

📜 A presença do JavaScript atualmente ⚛️

Hoje em dia, quando você visita uma página e vê elementos interagindo com você, seja uma modal aparecendo, uma janelinha abrindo, uma resposta ao clique do mouse, etc, pode ter certeza que há um código JavaScript sendo executado ali.

O JavaScript ainda era um pouco complicado de se usar antigamente. Então, no início dos anos 2000, várias bibliotecas com o intuito de facilitar o uso do JavaScript surgiram, como jQuery e Prototype.

🔃 AJAX (Asynchronous JavaScript And XML) 🔃

Em 2004 começaram a aparecer aplicações web, como o Gmail da Google. Ele usava uma técnica chamada AJAX (Asynchronous JavaScript And XML), a qual permite enviar e receber dados de um servidor sem ter que recarregar a página inteira, apenas os dados são trafegados e então são inseridos no meio do HTML.

📜 jQuery ☄️

Para ser mais preciso o jQuery é um Framework JavaScript para Front-end com uma grande facilidade de manipular o DOM e de código simples, muito usado para criar animações, eventos, chamadas AJAX e ainda cria plugins. Pode ser baixado no site oficial ou usado pelo CDN (Content Delivery Network), para isso basta copiar um dos códigos (escolha apenas uma versão) e colar no seu código HTML. Recomenda-se a versão 3 do CDN.

🚘 V8 🚘

Em setembro de 2008 a Google lançou seu navegador, o Google Chrome. O Chrome tem um interpretador de JavaScript muito poderoso, o V8. Esse nome é baseado no motor de combustão V8, que tem esse nome por ter 8 cilindros unidos na parte de baixo, formando um “V”. São normalmente usados em automóveis de grande porte, embarcações marítimas, aeronáuticas, etc.

O V8 “compila” o JavaScript, mas por trás ele executa C++. Assim, o JavaScript ganhou muita velocidade, próximo a um código binário compilado.

🟩 Node.js 🟩

Em 2009, Ryan Dahl desenvolveu o Node.js. O Node usa o V8 fora do navegador, e possui muitas outras funcionalidades que nos permite programar com JavaScript no lado do servidor. Com o Node foi possível a criação de coisas como automatizadores de tarefas e criação de servidores em JavaScript.

Empresas grandes começaram a migrar de linguagens como Ruby e Java para o Node.js, como é o caso do PayPal, Yahoo!, eBay, Linkedin e Trello. Todas elas afirmam que conseguiram desenvolver em menos tempo, com menos linhas de códigos e que seus sistemas agora possuem um melhor desempenho.

🧭 NW.js 🧭

O Node Web-Kit, ou simplesmente NW.js é uma aplicação em tempo de execução baseado em Chromium e Node.js, com ele é possível desenvolver aplicativos nativos para Windows, Linux e Mac, usando tecnologias web e usufruindo dos pacotes do Node.js.

Foi construído no Centro de tecnologia de código aberto da Intel combinando a estrutura Node.js. com um mecanismo Chromium (anteriormente conhecido como Webkit).

Graças à combinação Node.js e Chromium, você pode criar um aplicativo que não apenas carrega um site local em uma janela de aplicativo, mas também se conecta ao sistema operacional por meio da API JavaScript. Esta solução permite controlar parâmetros como dimensões da janela, barra de ferramentas e itens de menu , além de fornecer acesso aos arquivos do computador local.

O NW.js não tem opinião e oferece a liberdade de escolher estruturas e bibliotecas que você deseja usar em um projeto. Permite chamar os módulos Node.js. diretamente do DOM, suporta todos os recursos do navegador, fornece proteção de fonte JavaScript e está disponível no Linux, Mac OS e Windows.

Para ter uma ideia do que é possível fazer com ele visite o site:

:electron: Electron :electron:

O Electron é um framework de código aberto criada inicialmente pelo editor GitHub for Atom em 2013. Essa biblioteca permite criar aplicativos GUI de desktop com tecnologias da web como JavaScript, HTML e CSS.

A vantagem significativa dessa solução é que não há necessidade de um desenvolvedor web JavaScript aprender novas tecnologias ou idiomas para criar um aplicativo de desktop. O aplicativo Electron geralmente reutiliza a lógica comercial, o design e a estrutura geral de um aplicativo Web. É uma ótima maneira de economizar tempo e dinheiro no lado comercial e de desenvolvimento.

Se você é um desenvolvedor de JavaScript, precisará aprender algumas coisas relativamente simples sobre como o Electron funciona e sua API. Provavelmente, você poderá configurar seu primeiro aplicativo de desktop Electron em apenas alguns dias.

O elétron é uma tecnologia madura com uma comunidade em crescimento e, portanto, cria um ótimo ambiente de produção. Graças à renderização da interface do usuário do mecanismo Chromium, você obtém acesso a ferramentas como Developer Tools e Storage Access.

📜 Phaser 🕹️

O Phaser é um dos maiores pacotes de criação de games (Engine) de JavaScript. Existem outras Engines que também compilam o JavaScript como a Unity, Construct 2 e 3 ou Game Maker, porém isso fica a gosto do desenvolvedor, use aquela que você mais se familiariza!

📜 Processing.js 🤪

Processing.js é uma porta JavaScript descontinuada de Processing, uma estrutura projetada para escrever visualizações, imagens e conteúdo interativo. Ele permite que os navegadores da web exibam animações, aplicativos visuais, jogos e outros conteúdos gráficos ricos sem a necessidade de um miniaplicativo Java ou plugin Flash.

Um exemplo de aplicação feita com Processing.js são os emojis interativos e animados do Facebook, como o amei, grr, triste, haha, uau, like e um bônus.

📜 Browserify 🧙‍♂️

📜 Require.js 🎯

📜 Puppeteer 🧸

📜 JSS 📜

📜 Grunt 🐗

📜 Babel 🏙️

📜 Flow ⚡

📜 TypeScript (TS) 🟦

📜 ESLint 🟪

📜 Ember 🐹

📜 React.js ⚛️

📜 Next.js ⚛️

📜 Redux ⚛️

📜 Angular.js 🛡️

📜 Angular 🅰️

📜 Vue.js ✌️

O Vue.js é um framework JavaScript progressivo, você consegue utilizar ele em conjunto com outros frameworks ou com uma aplicação de grande porte, cujo o Vue.js entrega a melhor performance.

Foi criada por Evan You (Google) em 2013 / 2014. Possui uma renderização declarativa e composição de componentes. As versões do Framework possuem nomes de Animes.

📜 Webpack 🧊

📜 Gulp 🥤

📜 Jest 🃏

📜 Cypress ⚫

📜 Apache Cordova 🤖📲

📜 Ionic 🔵📲

📜 React Native ⚛️📲

🦕 Deno 🦕

📜 Gatsby 🟣

📜 Nest JS 🦁

📜 Mocha ☕

📜 Chai 🍵

📜 js-bin 🗑️


📜 Bibliotecas JavaScript 📚

highlighter.js


JavaScript no Docker


JavaScript em Cloud Computing

JavaScript na AWS – Amazon Web Services


📜 A importância do JavaScript para o mundo 🏆

Cada vez mais o JavaScript começou a ganhar mais força. Hoje em dia temos várias bibliotecas, frameworks, plugins, etc. O JavaScript não é mais só uma pequena ferramenta para criar interação em sites.

Hoje em dia temos cada vez mais funcionalidades que nos permite ter ainda mais poder com a linguagem, como acesso à câmera e microfone, leitura e edição de arquivos, edição de som e imagem, envio de notificações, modelagem 3D, geolocalização, etc. Grandes empresas usam JavaScript, até mesmo no back-end, como:

  • Google;
  • Microsoft;
  • IBM;
  • Netflix;
  • Uber;
  • Paypal;
  • Linkedin;
  • New York Times;
  • Walmart;
  • Sony;

Hoje ele é utilizado nos mais diversos lugares, como:

  • Websites;
  • Aplicações Web;
  • Desenvolvimento de Jogos Eletrônicos (Videogames);
  • Animações
  • Servidores;
  • Bancos de Dados;
  • Sistemas Operacionais de SmartTvs;
  • Automação de Tarefas;
  • Automação de Testes;
  • Softwares Desktop;
  • Controle de Hardware;
  • IoT – Internet das Coisas;
  • Inteligência Artificial;
  • Desenvolvimento Mobile Multiplataforma (Apps Híbridos);
  • Plugins para programas, como Photoshop.

📜 JavaScript (JS) RoadMap 🗺️

GitHub

View Github