Curso Online de JAVA SCRIPT

JavaScript Básico

JavaScript Básico - V1
JavaScript é uma linguagem de programação de scripts em alto nível, ele permite a criação de páginas da web interativas e, juntamente com HTML e CSS, formam o trio das principais tecnologias da World Wide Web.
Neste curso você aprenderá o básico para a programação com o JavaScript, entrará em contatos com conceitos para iniciar a caminhada na programação web.

Índice
01 - INTRODUÇÃO AO JAVASCRIPT .................................................................................7
CONHECENDO O AMBIENTE.............................................................................................................8
INSTALANDO A EXTENSÃO................................................................................................................8
PRIMEIRO CONTATO COM O JAVASCRIPT..................................................................................... 10
O PAINEL DE FERRAMENTAS DO DESENVOLVEDOR ..................................................................... 11
02 - CONCEITOS BÁSICOS DE PROGRAMAÇÃO .............................................................12
VARIÁVEIS ...................................................................................................................................... 12
TIPOS DE DADOS ........................................................................................................................... 12
OPERADORES................................................................................................................................. 13
ESTRUTURAS DE CONTROLE.......................................................................................................... 13
03 - OPERADORES E EXPRESSÕES ..................................................................................14
OPERADORES ARITMÉTICOS ......................................................................................................... 14
OPERADORES DE COMPARAÇÃO................................................................................................... 14
OPERADORES LÓGICOS ................................................................................................................. 15
OPERADORES DE ATRIBUIÇÃO ...................................................................................................... 15
OPERADOR TERNÁRIO................................................................................................................... 15
04 - ESTRUTURAS CONDICIONAIS..................................................................................16
A ESTRUTURA IF/ELSE............................................................................................16
A ESTRUTURA SWITCH/CASE.................................................................................18
05 - ESTRUTURAS DE REPETIÇÃO...................................................................................20
A ESTRUTURA FOR.................................................................................................20
A ESTRUTURA WHILE.............................................................................................22
A ESTRUTURA DO...WHILE.....................................................................................23
A ESTRUTURA FOR...OF .........................................................................................25
06 FUNÇÕES.................................................................................................................27
DECLARANDO FUNÇÕES................................................................................................................ 27
INVOCAÇÃO DE FUNÇÃO ............................................................................................................... 27
RETORNO DE VALORES.................................................................................................................. 28
FUNÇÕES ANÔNIMAS.................................................................................................................... 28
07 - ARRAY: DECLARAÇÃO, LISTAGEM E ACESSANDO ELEMENTOS .............................29
DECLARAÇÃO DE ARRAYS.............................................................................................................. 29
LISTAGEM DE ELEMENTOS ............................................................................................................ 29
COMPRIMENTO DO ARRAY ........................................................................................................... 30
ACESSANDO ELEMENTOS .............................................................................................................. 30
08 - ARRAYS: MÉTODOS DE USO ...................................................................................31
PUSH() .................................................................................................................31
POP() ...................................................................................................................31
SHIFT() .................................................................................................................32
UNSHIFT() .............................................................................................................32

INDEXOF()............................................................................................................ 32
SPLICE() ............................................................................................................... 33
09 - OBJETOS.................................................................................................................. 34
DECLARAÇÃO DE OBJETOS ............................................................................................................ 34
ACESSO ÀS PROPRIEDADES............................................................................................................ 34
ADIÇÃO E REMOÇÃO DE PROPRIEDADES...................................................................................... 35
REMOÇÃO DE PROPRIEDADES....................................................................................................... 35
ITERAÇÃO SOBRE PROPRIEDADES.................................................................................................. 35
10 - MANIPULANDO O DOM ......................................................................................... 36
SELECIONANDO ELEMENTOS......................................................................................................... 36
MANIPULANDO PROPRIEDADES E ESTILOS................................................................................... 37
ADICIONANDO E REMOVENDO ELEMENTOS ................................................................................ 37
11 - FORMULÁRIOS E EVENTOS .................................................................................... 38
CAPTURANDO DADOS DE FORMULÁRIOS..................................................................................... 38
VALIDAÇÃO DE FORMULÁRIOS...................................................................................................... 39
12 - INTRODUÇÃO A ES6 ............................................................................................... 40
LET E CONST ................................................................................................................................... 40
ARROW FUNCTIONS ...................................................................................................................... 40
DESESTRUTURAÇÃO....................................................................................................................... 41
SPREAD OPERATOR ....................................................................................................................... 41
CLASSES.......................................................................................................................................... 42
MÓDULOS...................................................................................................................................... 42
PROMESSAS (PROMISES)......................................................................................... 43

JavaScript Básico V1
7
01 - Introdução ao JavaScript
JavaScript é uma linguagem de programação de alto nível, dinâmica e orientada a objetos. Foi originalmente desenvolvida para adicionar interatividade e dinamismo às páginas da web, permitindo que os desenvolvedores criem elementos como pop- ups, animações, validações de formulários e muito mais. Com o tempo, o JavaScript evoluiu para se tornar uma linguagem poderosa, sendo amplamente utilizada tanto no desenvolvimento front-end quanto no back-end, graças a frameworks como o Node.js.
A principal característica do JavaScript é sua capacidade de interagir diretamente com o DOM (Document Object Model), permitindo a manipulação e atualização dinâmica dos elementos em uma página web. Além disso, o JavaScript suporta programação assíncrona, o que o torna ideal para lidar com operações que não podem ser executadas imediatamente.
Exemplo de código JavaScript em uma página HTML:

8
JavaScript Básico V1
Confira um exemplo de um código JavaScript que não resulta em informação visual na página HTML, apenas no console das ferramentas do desenvolvedor:
Neste exemplo, a função console.log() é utilizada para exibir uma mensagem no console do navegador ou do ambiente de execução JavaScript. A mensagem exibida será "Olá, meu nome é João e tenho 30 anos."

Conhecendo o Ambiente
Durante o curso você utilizará um editor de código (Visual Studio Code) em conjunto com um extensão (Live Server) para a execução de um servidor local
O Visual Studio Code é um editor de código gratuito, de código aberto e de plataforma cruzada que oferece suporte a muitas linguagens e recursos. Você pode encontrar mais informações sobre o programa em seu site oficial
Instalando a Extensão

Com o VS Code aberto, na barra presente na lateral esquerda do programa, clique no último botão... Ele é responsável por exibir o painel de extensões

JavaScript Básico V1
9
Caso a extensão "Live Server" esteja na lista de instaladas, clique na engrenagem presente no canto inferior direito do card da extensão e clique em "Desinstalar"
Após desinstalar, clique no botão "Restart Extensions"
Clique no botão "Atualizar" presente no topo do painel
Clique na caixa de pesquisa de extensões e digite "Live Server"
Procure pela extensão produzida por "Ritwick Dey", ela costuma ser a primeira da lista

10
JavaScript Básico V1
Clique no botão "Instalar"
Após instalada, o Visual Studio Code passará a exibir um botão chamado "Go Live" na parte inferior direita do programa
Importante: Sempre que for utilizar a extensão Live Server é importante que o visual studio code esteja trabalhando com uma pasta aberta, não apenas um arquivo. Durante o curso você utilizou o recurso de abertura de pasta justamente por isso
Primeiro Contato com o JavaScript

A especificação de um código JavaScript dentro de uma página HTML é feita usando a tag script. Ela pode ser utilizada para a incorporação direta, ou seja, inserir o código JavaScript em conjunto com o código HTML, mais ou menos como funciona o atributo style para a criação de regras CSS Inline ou a tag pode referenciar um arquivo externo, da mesma forma que a tag "link" serve para referenciar arquivos de folha de estilo externos
A tag para uso do script em conjunto com o HTML tem a seguinte aparência...
Dentro dela você insere os comandos JavaScript para execução:

JavaScript Básico V1
11
A outra possibilidade é a vinculação de um arquivo JavaScript externo, neste caso a aparência da tag é a seguinte:
Dentro do atributo src, você preenche o local e o nome do arquivo que será referenciado, por exemplo:
O Painel de Ferramentas do Desenvolvedor

Durante o curso, muitos códigos são vistos apenas no painel “Console” das ferramentas do desenvolvedor, para acessá-lo:
No seu navegador de preferência, tecle Ctrl+Shift+I
Para acessar o console, no painel das devtools, clique na guia "Console"

12
JavaScript Básico V1
02 - Conceitos Básicos de Programação
Para entender o JavaScript, é importante estar familiarizado com alguns conceitos básicos de programação
São utilizadas para armazenar dados temporários. Em JavaScript, as variáveis são declaradas utilizando as palavras-chave var, let ou const. Por exemplo:
JavaScript possui vários tipos de dados, incluindo números, strings, booleanos, arrays, objetos, null e undefined. Exemplos:

Variáveis
Tipos de Dados

JavaScript Básico V1
13
Operadores

São símbolos utilizados para realizar operações em variáveis e valores.
Confira alguns tipos e exemplos:
Aritméticos: +, -, *, /
Comparação: ==, !=,
Lógicos: &&, ||
Atribuição: =, +=, -=
Estruturas de Controle

São utilizadas para controlar o fluxo de execução do programa. As estruturas de controle mais comuns são condicionais (if/else) e loops (for, while).