JavaScript 5 Cursos Gratuitos

5 FREE Courses to Learn JavaScript 🔥🔥

1. JavaScript Intro

w3schools.com/js/

2. Learn JavaScript

codecademy.com/learn/introduc…

3. JavaScript DSAs

freecodecamp.org/learn/javascri…

4. The Modern JavaScript Tutorial

javascript.info

5. MDN JS Reference

developer.mozilla.org/en-US/docs/Lea…

JavaScript Biblioteca de Animação

JavaScript Animation libraries👇🏻

1. GreenSock Animation Platform (GSAP)

➩ greensock.com/gsap/

2. Anime.js

➩ animejs.com

3. Velocity.js

➩ velocityjs.org

4. Lottie

➩ airbnb.design/lottie/

5. ScrollMagic

➩ scrollmagic.io

6. Three.js

➩ threejs.org

7. Popmotion

➩ popmotion.io

8. Mo.js

➩ mojs.io

9. Typed.js:

➩ github.com/mattboldt/type…

10. AniJS

➩ anijs.github.io

11. Framer Motion:

➩ framer.com/api/motion/

Aprenda JavaScript em 100 dias

Learn Javascript in 100 Days:

1-10th Day: Foundations

➔ Introduction

• What is JavaScript?

• History and Evolution

➔ Variables

• `var`

• `let`

• `const`

➔ Data Types

• String

• Number

➔ Projects:

• Simple Calculator

• Basic Form Validation

11-20th Day: Foundations (Continued)

➔ Data Types (Continued)

• Boolean

• null

• undefined

➔ Operators

• Arithmetic, Logical, Comparison

➔ Control Structures

• `if-else`

• `switch-case`

➔ Projects:

• To-Do List

• Simple Weather App (API-less)

21-30th Day: Foundations

➔ Control Structures (Continued)

• Loops (`for`, `while`, `do-while`)

➔ Functions

• Function Declarations

• Expressions

• Arrow Functions

➔ Projects:

• Simple Quiz Game

• Countdown Timer

31-40th Day: Intermediate Topics

➔ Functions (Continued)

• Parameters & Arguments

• Return Statement

➔ Objects

• Creating Objects

• Methods

• Properties

➔ Projects:

• Object-Oriented Calculator

• Basic Blog System

41-50th Day: Intermediate Topics (Continued)

➔ Objects (Continued)

• `this` Keyword

➔ Arrays

• Methods (`push`, `pop`, `shift`, etc.)

• Iterations (`forEach`, `map`, `filter`, etc.)

➔ Projects:

• Simple Shopping Cart

• Recipe Book

51-60th Day: Intermediate Topics

➔ DOM Manipulation

• Selecting Element

• Modifying Content

• Event Listeners

➔ Error Handling

• `try-catch`

• Throwing Errors

➔ Projects:

• Interactive Web Page (Portfolio)

• Basic Chat Application

61-70th Day: Deep Dive into Advanced JS

➔ ES6+ Features

• Destructuring

• Spread & Rest Operators

➔ Asynchronous JS

• Callbacks

• Promises

➔ Projects:

• Weather App using APIs

• Currency Converter

71-80th Day: Deep Dive into Advanced JS (Continued)

➔ Asynchronous JS (Continued)

• Async/Await

• Fetch API

• AJAX

➔ Functional Programming

• Concepts

• Higher-order Functions

➔ Projects:

• Mini Social Media Dashboard

• Real-Time Stock Market App

81-90th Day: Ecosystem & Environment

➔ Environment Setup

• Node.js

• NPM

➔ Package Managers

• Understanding `package.json`

• NPM vs Yarn

➔ Projects:

• Node.js REST API

• Simple E-commerce Backend

91-100th Day: Modern Frameworks & Libraries

➔ React

• JSX

• Components

• Hooks

➔ Vue

• Vue Components

• Directives

➔ Projects:

• Full-Stack To-Do App with React and Node.js

• Real-Time Chat Application using Vue and WebSockets

Further Learning (Optional):

• Web APIs

• Graphics (Canvas API, WebGL)

• Backend with Node.js (Express.js, Middlewares, Databases)

• Testing (Jest, Mocha & Chai)

• Build Tools (Webpack, Babel, ESLint)

Follow @mdjunaidap for more.

Zing Chart - JavaScript

 Zing Chart / Biblioteca JavaScript

Add a little zing to your analytical apps with Zing Chart a freemium charting library that has plenty of great features and lots of chart types. ZingChart offers a modern, highly visual set of charts with features including horizontal style tooltips which to be fair are pretty unique and work very well. It also comes with pan and zoom interactivity straight out the box.

Notable Feature List

• Zoom, Pan, Select interactivity
• 2d & 3d charts
• Unique ‘Crosshair’ tooltips
• Drill down capability out of the box
• On-chart image rendering

Licensing

ZingChart has a freemium licensing model; This means that you can use it for both personal and commercial purposes as long as you show the small attribution link (this can be seen in the demo above). Alternatively, you can buy a full license which starts from as little as $99 per year.

CDN Links

ZingChart provides a content delivery network to use the JavaScript library which can be found on the following link.

• https://www.zingchart.com/download

GitHub Repo

• ZingChart GitHub Repository

Documentation

• ZingChart Documentation
• ZingChart Demos & Examples

Muze.JS - JavaScript

 

Muze.JS / Biblioteca JavaScript

If you’ve ever used Tableau data analytical software before, then this charting library will feel familiar. MuzeJS offers Tableau style charts in a package ready for the web. With a large array of chart types to choose from, this completely free-to-use package is a great contender in the data visualization world.

Notable Feature List

• In-built cross-filter helper
• Lasoo selection tool
• Zoom and pan
• Drill down functionality
• Big data capability, after rendering, interactivity is second to none
• Powered by Web Assembly

Licensing

From what I can interpret on the MuzeJS website, is that the license is a custom one. Although having said this, it still gives full flexibility between the usage of personal and commercial projects alike.

CDN Links

• https://cdn.jsdelivr.net/npm/@chartshq/muze@2.0.0/dist/

GitHub Repo

• MuzeJS GitHub Repository

Documentation

• MuzeJS Documentation
• MuzeJS Demos

AnyChart - JavaScript

 

AnyChart / Biblioteca JavaScript

Say hello to AnyChart, a very popular charting library among the commercial world with customers using it such as Bosch, Ford, Nokia, and many more. Boasting 70+ chart types this library has everything you could possibly need in terms of charting visualization. Offers huge customization to enable the most beautiful dashboard designs.

Notable Feature List

• Both 2d and 3d charts available
• Beautiful default styles, tooltips, and animations
• Load data from CSV and even export data to CSV & Excel
• Fully responsive
• Ready for essentially any platform
• Pareto charts
• Also offers additional ‘AnyMaps’ ‘AnyStocks’ ‘AnyGant’ packages
• Prepared for ‘Big Data’ with the ability to render seamlessly
• On canvas drawing tools, the ability to complete add your own info points/annotations
• Export rendered charts as an SVG, PNG, JPG, or PDF
• 70+ Chart types to choose from

Licensing

AnyCharts offers a range of licensing which are mainly catered for commercial usage. Although having said this, they do provide a custom free license for non-profit and educational use. Commercial licenses start from as little as $49 which is pretty amazing with the size of the package you get.

CDN Links

AnyCharts have their own content delivery network which can be found with the following link

• https://www.anychart.com/download/cdn/?v=8.9.0

GitHub Repo

• AnyChart GitHub Repository

Documentation

• AnyChart Documentation
• API Reference

Smoothie Charts - JavaScript

 

Smoothie Charts / Biblioteca JavaScript

Smoothie Charts is another very unique, one-purpose charting library. Bringing excellently animated line charts to the table for fast updated data. The library is perfect for manufacturing PLC data or as demonstrated in the examples a CPU monitor. Animations are flawlessly smooth and you wouldn’t expect anything less considering the name.

Notable Feature List

• Superior smooth chart updates
• Geared towards fast-updating data or ‘Streaming data’
• Very easy to set up
• Fully responsive
• Colour customization
• Line & multi-line capability
• Chart configuration builder that outputs code snippets ready to go

Licensing

Smoothie Charts has been released under the MIT license and so is free to use for both personal and commercial projects.

CDN Links

• https://cdnjs.com/libraries/smoothie

GitHub Repo

• SmoothieCharts GitHub Repository

Documentation

• SmoothieCharts Getting Started Tutorial
• SmoothieCharts Configuration Code Builder

Google Charts - JavaScript

 

Google Charts / Biblioteca JavaScript

Google charts is a very long-standing charting package that pretty much has it all. With an excellent documentation base and examples to support. Google Charts have an almost semi-modern style with the instant visual realization that it’s a Google brand, especially by the default color scheme.

Notable Feature List

• A massive feature of this package is that it’s completely free for commercial use, which is pretty awesome considering the size of the brand
• Extremely detailed documentation base with many examples to learn from
• Tooltips
• Annotations
• All charts are zoomable
• Some of the best visual chart gauges on the web (In my opinion)

Licensing

GoogleCharts is completely free to use across the board giving personal and commercial the rights to use it.

CDN Links

Google Charts has its own hosted content delivery network links which can be found using the following link

• https://developers.google.com/chart/interactive/docs/basic_load_libs

GitHub Repo

Not applicable

Documentation

• GoogleCharts Documentation
• Google Charts Examples and code snippets

C3.js - JavaScript

 

C3.js / Biblioteca JavaScript

C3.js deserves its place in this list of the best JS libraries available in 2021. The library has been around a long time, is super-clean, customizable to suit many needs, and has a good range of charts to work with. Built upon the renowned D3.js charting engine, C3.js offers a maintained, up-to-date visualization experience that is perfect for most use-cases.

Notable Feature List

• ‘Zoomable’ sub-charts
• Appealing animations
• Highly customizable
• Tooltips
• Excellent documentation with code examples and demonstrations

Licensing

C3.js is an open-source library free to use for both personal and commercial projects alike. C3.js is released under the MIT license.

CDN Links

AmCharts is hosted on various CDN networks and has its own CDN source links too.

• https://cdnjs.com/libraries/c3
• https://www.jsdelivr.com/package/npm/c3
• https://www.jsdelivr.com/package/npm/@amcharts/amcharts4

GitHub Repo

• C3.js GitHub Repository

Documentation

• C3.js Documentation
• C3.js Demo Library

RoughViz - JavaScript

 

RoughViz / Biblioteca JavaScript

RoughViz is certainly one to look at in 2021, built upon d3.js version 5, brings very unique visualizations to your front end. The rendered charts are almost like crayon drawings, with rough borders and coloring, it actually really pleases the eye. The library is super-easy to work with utilizing array-based data sets and various options easily modified.

Notable Feature List

• Very unique, nothing else around like it
• Plenty of customizable options
• Tooltips
• Built upon d3.js version 5

Licensing

RoughViz is another library that can be used in both commercial and personal projects free of charge. The library is released under the MIT license.

CDN Links

NVD3 is hosted on various CDN networks as listed below

• https://unpkg.com/rough-viz@1.0.6

GitHub Repo

• RoughViz GitHub Repository

ToastUI - JavaScript

 

ToastUI / Biblioteca JavaScript

ToastUI is a very visual, modernized library that not only offers pretty much all the common charts but looks brilliant too. Each chart has the capability to be exported in a variety of ways including .xls (data), .jpg (image). This of course is very handy for the end-user, especially the ability to export the data behind the chart for further analysis.

Notable Feature List

• Multi export functionality which includes .xls, .csv, .jpg and .png
• Completely responsive for the modern web
• Nice animations during real-time data updates
• Beautiful animations during chart updates
• Deselectable/selectable data series
• Zero dependencies

Licensing - ToastUI has been released under the MIT license. This gives the rights for both personal project and commercial project use alike.

Links - ToastUI is hosted on various CDN networks as listed below

• https://uicdn.toast.com/chart/latest/toastui-chart.min.css
• https://unpkg.com/browse/frappe-charts@1.3.0/
• https://cdnjs.com/libraries/tui-chart

GitHub Repo

• ToastUI Chart GitHub Repository

Documentation

• Demos, Examples and Documentation

Frappe Charts - JavaScript

 

Frappe Charts / Biblioteca JavaScript

If you’re a keen developer, then you’ll probably feel familiar with the way that Frappe Charts look and feel. That’s because the charts designs are inspired by charts you find on GitHub. You will recognize the heatmap straight away if you’ve been making plenty of commits lately.

Notable Feature List

• Rapid export an SVG capability which is basically an instant export to image (SVG) file.
• Annotations
• GitHub theme inspired which is extremely clean
• Beautiful animations during chart updates
• Mixed chart capability
• Epic looking tooltips when using multi/mixed charts
• Fully responsive
• Zero dependencies

Licensing - Frappe Charts are completely open-sourced and released under the MIT license. This gives the rights for both personal project and commercial project use alike.

Links - Frappe Charts is hosted on various CDN networks as listed below

• https://www.jsdelivr.com/package/npm/frappe-charts
• https://unpkg.com/browse/frappe-charts@1.3.0/

GitHub Repo

• Frappe Charts GitHub Repository

Documentation

• Frappe Charts User Documentation
• Demo

ApexCharts.js - JavaScript

 

ApexCharts.js / Biblioteca JavaScript

ApexChart.js comes with a variety of elegant features to bring beautiful data analysis to your web pages. On paper, this library ticks nearly all the boxes you would usually want it for. With annotation capability which is relatively rare in free-to-use packages. Responsiveness and animations and to top all that off, it looks pretty great too.

Notable Feature List

• Beautiful visual annotations
• Completely responsive
• Flexible interactivity including pan, scroll, zoom in and out.
• Tooltips
• Vast user documentation
• Preset color themes you can easily switch between
• Lot’s of demos and source code to get your hands on
• Offers paid upgrades to include some of FusionChart’s add-on packages.
• Works flawlessly with vanilla JS, VueJS, React, and Angular, documentation included.

Licensing - ApexChart.js is released under the MIT license and therefore is freely available to use in your own personal and commercial projects. Considering how many features this library offers, it’s hard to believe it’s free to use!

Links - 

ApexCharts is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/apexcharts

GitHub Repo

• ApexCharts GitHub Repository

Documentation

• ApexChart.js User Documentation
• Live Demos

ChartJS - JavaScript

 

ChartJS / Biblioteca JavaScript

Next at number four is another one of my personal favorites. If you want a chart visualization library that always looks great, then this is the one. Somehow, the creator of ChartJS got the default colors absolutely perfect and they go so well within any website. It’s again another library that doesn’t have a massive selection of charts but does it very well with the ones it does offer.

Notable Feature List

• Very easy to work with without the knowledge of JSON markup.
• Mixed chart types, build bars and lines onto the same visualization.
• Beautiful animations
• Tooltips
• Renderable on all major browsers including IE11+
• Completely responsive
• Thorough user documentation and sample base
• Includes one of the only free-to-use radar charts that actually works correctly and visualizes data properly.

Licensing - ChartJS is released under the MIT license and therefore is freely available to use in your own personal and commercial projects. It

Links - 

ChartJS is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/Chart.js
• https://www.jsdelivr.com/package/npm/chart.js?path=dist

GitHub Repo

• ChartJS GitHub Repository

Documentation

• ChartJS Documentation
• ChartJS Examples

Vis.js - JavaScript

 

Vis.js / Biblioteca JavaScript

Vis.js is a very versatile parent library of other sub-libraries including networking, timeline, 2d, and 3d visualization capabilities. This library offers 3d charts which are pretty rare amongst most charting libraries which definitely gives it an edge.

Notable Feature List

• 3D Charts
• 2D Charts
• Multi-chart capability
• Optional tooltips
• 3D interactivity on relevant charts
• Chart playgrounds demonstrating many of its features
• Flawless animations

Vis.js has some stunning visualizations in both 2d and 3d forms but of course, all will serve specific purposes. Personally, I’ve never come across the need to use 3d charts but if your working in some type of scientific data analysis background, I could imagine it would be useful.

Licensing - The Viz.js library is dual-licensed under both Apache 2.0 and MIT licenses. Both of these licenses enable usage, modification, and distribution by both personal and commercial parties.

Links - 

VizJS can be delivered directly to your own project by the following CDN networks

• https://cdnjs.com/libraries/vis

GitHub Repo

• https://github.com/visjs/vis-timeline

Documentation

• Main homepage of different libraries and documentation

Dygraphs - JavaScript

 

Dygraphs / Biblioteca JavaScript

Dygraphs is probably one of the fastest rendering charts I have come across, especially when the data set is vast. This library can handle data sets going into the tens of thousands and still deliver a great user experience.

Notable Feature List

• Can handle huge data sets and is superior in this department when compared to other libraries
• Cross chart synchronization
• Annotations, and highly customizable annotations at that
• Range/Viewfinder
• Very simple to get develop with
• Perfect for real-time data visualization
• Extremely fast data point feedback with off-chart data display
• Zoom in and out functionality
• Plenty of examples with links to JSFiddles
• Easy to work with data, simple arrays, or load from text or CSV files

The one drawback to all this glory is that it’s completely based on line graphs. No bars, pies, or anything that you would usually see in a JavaScript charting library. Not to worry though, it’s still an epic package, and here’s why.

Licensing - 

Dygraphs is licensed under the MIT License which offers usage, modification, and distribution by both personal and commercial parties.

Links - 

Dygraphs can be delivered directly to your own project by the following CDN networks

• https://www.jsdelivr.com/package/npm/dygraphs
• https://cdnjs.com/libraries/dygraph

GitHub Repo

• Dygraphs GitHub Repository

Documentation

• General Tutorials
• API Reference
• Annotations Tutorial

NVD3.JS - JavaScript

 

NVD3.JS / Biblioteca JavaScript

First and foremost is a library I’ve used frequently in industry and it never fails to please. NVD3 is a library that sits on top of the d3.js JavaScript library utilizing many of the usual traits.

The library doesn’t have every single chart imaginable but has all the most popular core ones. For example, scatter, bar, line. The rendered charts have a very easy-on-the-eye style with pastel-like colours that go well with any dashboard.

Notable Feature List

• Completely responsive
• User-friendly tooltips
• Customizable tooltips
• Easy to work with JSON
• Series turn on / turn off
• Legends
• Dual-axis capability
• Quick and easy to download and use
• Plenty of examples
• Live chart playground

Licensing - NVD3 is released and licensed with the Apache 2.0 license meaning it’s completely free to use for both personal and commercial practices.

Links - NVD3 is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/nvd3
• https://www.jsdelivr.com/package/npm/nvd3

GitHub Repo

• NVD3 GitHub Repository

Documentation

• NVD3 Documentation

Best Javascript Chart Libraries for 2021

 Best Javascript Chart Libraries for 2021 - Summary

There are clearly many very versatile and feature-packed libraries available to use on the web. I will continue to add to this list as I discover newly released libraries or even hidden gems.

I would love to hear which is your favorite, and it doesn’t have to be on this list either. Send me in the direction of some great libraries and I could well list them on here too.

----------------------------------------------------------------------------------------------------------

https://www.codewall.co.uk/best-javascript-chart-libraries/

Desenvolvedor web front-end

 

Developer Mozilla

Desenvolvedor web front-end

https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer

JavaScript (Front-end)

 JavaScript (Front-end)

JavaScript é uma linguagem de programação usada popularmente que permite aos usuários implementar recursos sofisticados em páginas da web.

O JavaScript pode ser acionado sempre que uma página estiver realizando uma ação dinâmica, como mostrar atualizações periódicas de conteúdo, gráficos animados bidimensionais e tridimensionais, mapas interativos, caixas de vídeo e muito mais.

Recursos

• Linguagem de script centrada em objetos – JavaScript é uma linguagem centrada em objetos como o Visual Basic e possui conceitos construídos em torno do conceito de objetos. Linguagens centradas em objetos são amplamente utilizadas para recursos como polimorfismo, por meio do qual um objeto pode ser obtido de várias formas.

• Tecnologia de ponta do cliente – Um navegador da web pode ser referido como um cliente que é utilizado por um usuário. Os dados de um servidor são carregados por um cliente e, em seguida, acessados por um usuário após serem renderizados. Um usuário pode usar um cliente ou navegador para navegar em sites e interagir com sites.

• Validação da entrada do usuário – A validação da entrada do usuário, também conhecida como validação de formulário, permite que os usuários iniciem interações com o cliente por meio do preenchimento de formulários de páginas da web. Os detalhes do formulário devem ser validados pelo cliente para validar as informações fornecidas por um usuário.

Vantagens

• Carga do servidor – JavaScript é uma linguagem do lado do cliente que pode reduzir as demandas do servidor dinamicamente. Alguns aplicativos também podem não exigir nenhum servidor para funcionar.

• Interfaces ricas – JavaScript pode ser utilizado para desenvolver recursos como funções de arrastar e soltar para controles deslizantes. Isso pode melhorar radicalmente a interface do usuário e a experiência do usuário em um site.

• Funcionalidade estendida – os desenvolvedores de JavaScript podem estender a funcionalidade da página da web criando snippets de JavaScript para vários complementos de terceiros.

Desvantagens

• Segurança do lado do cliente – o código JavaScript é executado no computador do usuário, geralmente levando a problemas de segurança devido a atividades maliciosas. É por isso que muitos desenvolvedores desabilitam o JavaScript.

• Suporte ao navegador – JavaScript pode ser interpretado de forma diferente com base no navegador que o interpreta. Como resultado, a criação de código para vários navegadores pode ser um desafio para alguns desenvolvedores.