| # Dia | Tópicos |
|---|---|
| 01 | Introdução |
| 02 | Tipos de dados |
| 03 | Booleanos, operadores, data |
| 04 | Condicionais |
| 05 | Matrizes |
| 06 | Loops |
| 07 | Funções |
| 08 | Objetos |
| 09 | Funções de ordem superior |
| 10 | Conjuntos e mapas |
| 11 | Destruição e espalhamento |
| 12 | Expressões regulares |
| 13 | Métodos de objeto de console |
| 14 | Manuseio de erros |
| 15 | Classes |
| 16 | JSON |
| 17 | Armazenamentos na web |
| 18 | Promessas |
| 19 | Encerramento |
| 20 | Escrevendo código limpo |
| 21 | Dom |
| 22 | Manipulando o objeto DOM |
| 23 | Ouvintes de eventos |
| 24 | Mini Projeto: Sistema Solar |
| 25 | Mini Project: World países Visualização de dados 1 |
| 26 | Mini Projeto: Países Mundiais Visualização de Dados 2 |
| 27 | Mini Projeto: Portfólio |
| 28 | Mini Project: Robôlego de Lábios |
| 29 | Mini Projeto: Personagens Animando |
| 30 | Projetos finais |
??? Codificação feliz ???
Autor: Asabeneh Yetayeh
Janeiro de 2020
? Inglês ?? Espanhol ?? Italiano ?? Russo ?? Turco ?? Azerbaijão ?? Coreano ?? Vietnamita ?? Polonês ?? Português
Dia 2 >>
Parabéns por decidir participar de 30 dias de desafio de programação JavaScript. Nesse desafio, você aprenderá tudo o que precisa para ser um programador JavaScript e, em geral, todo o conceito de programação. No final do desafio, você receberá um Certificado de Conclusão de Desafio de Programação de 30DaysOfjavascript. Caso você precise de ajuda ou se quiser ajudar outras pessoas, você pode participar do grupo de telegrama dedicado.
Um desafio 30DaysOfJavascript é um guia para desenvolvedores de JavaScript para iniciantes e avançados. Bem -vindo ao JavaScript. JavaScript é o idioma da web. Gosto de usar e ensinar JavaScript e espero que você o faça também.
Neste desafio JavaScript passo a passo, você aprenderá JavaScript, a linguagem de programação mais popular da história da humanidade. O JavaScript é usado para adicionar interatividade aos sites, para desenvolver aplicativos móveis, aplicativos de desktop, jogos e JavaScript hoje pode ser usado para programação do lado do servidor , aprendizado de máquina e IA .
O JavaScript (JS) aumentou em popularidade nos últimos anos e tem sido a principal linguagem de programação nos últimos dez anos e é a linguagem de programação mais usada no GitHub.
Esse desafio é fácil de ler, escrito em inglês de conversação, envolvente, motivador e, ao mesmo tempo, é muito exigente. Você precisa alocar muito tempo para terminar esse desafio. Se você é um aluno visual, pode obter a lição de vídeo no canal do YouTube de arruela. Inscreva -se no canal, comente e faça perguntas no YouTube Vides e seja proativo, o autor acabará notar você.
O autor gosta de ouvir sua opinião sobre o desafio, compartilhe o autor expressando seus pensamentos sobre o desafio 30DaysOfJavaScript. Você pode deixar seu depoimento neste link
Nenhum conhecimento prévio da programação é necessário para seguir esse desafio. Você precisa apenas:
Eu acredito que você tem a motivação e um forte desejo de ser um desenvolvedor, um computador e internet. Se você os possui, então você tem tudo para começar.
Você pode não precisar de Node.js agora, mas pode precisar disso mais tarde. Instale o Node.js.
Depois de baixar clique duas vezes e instale
Podemos verificar se o nó está instalado em nossa máquina local, abrindo nosso terminal de dispositivo ou prompt de comando.
asabeneh $ node -v
v12.14.0Ao fazer este tutorial, eu estava usando o nó versão 12.14.0, mas agora a versão recomendada do Node.js for Download é v14.17.6, quando você usar este material, você pode ter uma versão mais alta do Node.js.
Existem muitos navegadores por aí. No entanto, eu recomendo fortemente o Google Chrome.
Instale o Google Chrome se você ainda não tiver um. Podemos escrever um pequeno código JavaScript no console do navegador, mas não usamos o console do navegador para desenvolver aplicativos.
Você pode abrir o Google Chrome Console clicando em três pontos no canto superior direito do navegador, selecionando mais ferramentas -> Ferramentas de desenvolvedor ou usando um atalho de teclado. Eu prefiro usar atalhos.
Para abrir o console do Chrome usando um atalho de teclado.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Depois de abrir o Google Chrome Console, tente explorar os botões marcados. Passaremos a maior parte do tempo no console. O console é o local onde vai o seu código JavaScript. O mecanismo do Google Console V8 altera seu código JavaScript para código da máquina. Vamos escrever um código JavaScript no Google Chrome Console:
Podemos escrever qualquer código JavaScript no Google Console ou em qualquer console do navegador. No entanto, para esse desafio, focamos apenas no Google Chrome Console. Abra o console usando:
Mac
Command+Option+I
Windows:
Ctl+Shift+I Para escrever nosso primeiro código JavaScript, usamos um console de função interno.log () . Passamos um argumento como dados de entrada e a função exibe a saída. Passamos 'Hello, World' como dados de entrada ou argumento na função console.log ().
console . log ( 'Hello, World!' ) A função console.log() pode levar vários parâmetros separados por vírgulas. A sintaxe parece a seguinte: console.log(param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' ) Como você pode ver no código do snippet acima, console.log() pode receber vários argumentos.
Parabéns! Você escreveu seu primeiro código JavaScript usando console.log() .
Podemos adicionar comentários ao nosso código. Os comentários são muito importantes para tornar o código mais legível e deixar comentários em nosso código. O JavaScript não executa a parte do comentário do nosso código. No JavaScript, qualquer linha de texto que começa com // em JavaScript é um comentário, e qualquer coisa entre este // também é um comentário.
Exemplo: comentário de linha única
// This is the first comment
// This is the second comment
// I am a single line commentExemplo: Comentário multiline
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/ As linguagens de programação são semelhantes às línguas humanas. O inglês ou muitos outros idiomas usa palavras, frases, frases, frases compostas e outras mais para transmitir uma mensagem significativa. O significado em inglês da sintaxe é o arranjo de palavras e frases para criar frases bem formadas em um idioma . A definição técnica de sintaxe é a estrutura das declarações em uma linguagem de computador. As linguagens de programação têm sintaxe. JavaScript é uma linguagem de programação e, como outras linguagens de programação, ele tem sua própria sintaxe. Se não escrevermos uma sintaxe que o JavaScript entende, ele aumentará diferentes tipos de erros. Vamos explorar diferentes tipos de erros de JavaScript posteriormente. Por enquanto, vamos ver erros de sintaxe.
Eu cometi um erro deliberado. Como resultado, o console gera erros de sintaxe. Na verdade, a sintaxe é muito informativa. Informa que tipo de erro foi cometido. Ao ler a diretriz de feedback de erro, podemos corrigir a sintaxe e corrigir o problema. O processo de identificação e remoção de erros de um programa é chamado de depuração. Vamos corrigir os erros:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' ) Até agora, vimos como exibir o texto usando o console.log() . Se estivermos imprimindo texto ou string usando console.log() , o texto deve estar dentro das citações, citações duplas ou um backtick. Exemplo:
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) Agora, vamos praticar mais códigos de javascript de escrita usando console.log() no Google Chrome Console para tipos de dados numéricos. Além do texto, também podemos fazer cálculos matemáticos usando JavaScript. Vamos fazer os seguintes cálculos simples. É possível escrever o código JavaScript no Google Chrome Console pode diretamente sem a função console.log() . No entanto, ele está incluído nesta introdução, porque a maior parte desse desafio estaria ocorrendo em um editor de texto onde o uso da função seria obrigatório. Você pode brincar diretamente com instruções no console.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Podemos escrever nossos códigos no console do navegador, mas não será para projetos maiores. Em um ambiente de trabalho real, os desenvolvedores usam diferentes editores de código para escrever seus códigos. Neste desafio de 30 dias de JavaScript, usaremos o Código do Visual Studio.
O Código do Visual Studio é um editor de texto de código aberto muito popular. Eu recomendaria baixar o código do Visual Studio, mas se você for a favor de outros editores, fique à vontade para seguir com o que você tem.
Se você instalou o código do Visual Studio, vamos começar a usá -lo.
Abra o código do Visual Studio clicando duas vezes em seu ícone. Ao abrir, você receberá esse tipo de interface. Tente interagir com os ícones rotulados.
JavaScript pode ser adicionado a uma página da web de três maneiras diferentes:
As seções a seguir mostram maneiras diferentes de adicionar código JavaScript à sua página da web.
Crie uma pasta de projetos na sua área de trabalho ou em qualquer local, nomeie 30DaysOfJs e crie um arquivo index.html na pasta do projeto. Em seguida, cole o código a seguir e abra -o em um navegador, por exemplo, Chrome.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Inline Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!') " > Click Me </ button >
</ body >
</ html > Agora, você acabou de escrever seu primeiro script embutido. Podemos criar uma mensagem de alerta pop-up usando a função alert() integrada.
O script interno pode ser escrito na head ou no body , mas é preferido colocá -lo no corpo do documento HTML. Primeiro, vamos escrever na parte da cabeça da página.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ head >
< body > </ body >
</ html > É assim que escrevemos um script interno na maioria das vezes. Escrever o código JavaScript na seção do corpo é a opção mais preferida. Abra o console do navegador para ver a saída do console.log() .
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!'); " > Click Me </ button >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ body >
</ html > Abra o console do navegador para ver a saída do console.log() .
Semelhante ao script interno, o link de script externo pode estar no cabeçalho ou no corpo, mas é preferido colocá -lo no corpo. Primeiro, devemos criar um arquivo JavaScript externo com a extensão .js. Todos os arquivos que terminam com a extensão .js são arquivos JavaScript. Crie um arquivo chamado Introdução.js dentro do diretório do projeto e escreva o código a seguir e vincule este arquivo .js na parte inferior do corpo.
console . log ( 'Welcome to 30DaysOfJavaScript' )Scripts externos na cabeça :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
< script src =" introduction.js " > </ script >
</ head >
< body > </ body >
</ html >Scripts externos no corpo :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
</ head >
< body >
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
< script src =" introduction.js " > </ script >
</ body >
</ html > Abra o console do navegador para ver a saída do console.log() .
Também podemos vincular vários arquivos JavaScript externos a uma página da web. Crie um arquivo helloworld.js dentro da pasta 30DaysOfJS e escreva o código a seguir.
console . log ( 'Hello, World!' ) <!DOCTYPE html >
< html lang =" en " >
< head >
< title > Multiple External Scripts </ title >
</ head >
< body >
< script src =" ./helloworld.js " > </ script >
< script src =" ./introduction.js " > </ script >
</ body >
</ html >Seu arquivo main.js deve estar abaixo de todos os outros scripts . É muito importante lembrar disso.
No JavaScript e também em outras linguagens de programação, existem diferentes tipos de tipos de dados. A seguir, são apresentados tipos de dados primitivos JavaScript: string, número, booleano, indefinido, nulo e símbolo .
Uma coleção de um ou mais caracteres entre duas citações únicas, citações duplas ou backsticks.
Exemplo:
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'Um valor booleano é verdadeiro ou falso. Qualquer comparação retorna um valor booleano, que é verdadeiro ou falso.
Um tipo de dados booleano é um valor verdadeiro ou falso.
Exemplo:
true // if the light is on, the value is true
false // if the light is off, the value is falseNo JavaScript, se não atribuirmos um valor a uma variável, o valor será indefinido. Além disso, se uma função não estiver retornando nada, ela retorna indefinida.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetNulo em javascript significa um valor vazio.
let emptyValue = null Para verificar o tipo de dados de uma determinada variável, usamos o operador TIPOOF . Veja o exemplo a seguir.
console . log ( typeof 'Asabeneh' ) // string
console . log ( typeof 5 ) // number
console . log ( typeof true ) // boolean
console . log ( typeof null ) // object type
console . log ( typeof undefined ) // undefined Lembre -se de que comentar no JavaScript é semelhante a outras linguagens de programação. Os comentários são importantes para tornar seu código mais legível. Existem duas maneiras de comentar:
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentComentando multiline:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ Variáveis são recipientes de dados. As variáveis são usadas para armazenar dados em um local de memória. Quando uma variável é declarada, um local de memória é reservado. Quando uma variável é atribuída a um valor (dados), o espaço de memória será preenchido com esses dados. Para declarar uma variável, usamos palavras -chave var , let ou const .
Para uma variável que muda em um horário diferente, usamos LET . Se os dados não mudarem, usamos const . Por exemplo, PI, nome do país, gravidade não mudam e podemos usar o const . Não usaremos o VAR neste desafio e eu não recomendo que você o use. É uma maneira propensa a erros de declarar variável, ele tem muito vazamento. Falaremos mais sobre var, let e const em detalhes em outras seções (escopo). Por enquanto, a explicação acima é suficiente.
Um nome de variável JavaScript válido deve seguir as seguintes regras:
A seguir, são apresentados exemplos de variáveis JavaScript válidas.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020A primeira e a segunda variáveis na lista segue a convenção de camelcase de declarar em JavaScript. Neste material, usaremos variáveis de camelcase (CamelwitHoneHump). Usamos o CamelCase (Camelwithtwohump) para declarar classes, discutiremos sobre classes e objetos em outra seção.
Exemplo de variáveis inválidas:
first - name
1 _num
num_ # _1Vamos declarar variáveis com diferentes tipos de dados. Para declarar uma variável, precisamos usar a palavra -chave LET ou const antes do nome da variável. Seguindo o nome da variável, escrevemos um sinal igual (operador de atribuição) e um valor (dados atribuídos).
// Syntax
let nameOfVariable = valueO nomeOfviable é o nome que armazena diferentes dados de valor. Veja abaixo exemplos de detalhes.
Exemplos de variáveis declaradas
// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
console . log ( firstName , lastName , country , city , age , isMarried ) Asabeneh Yetayeh Finland Helsinki 100 true // Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console . log ( gravity , boilingPoint , PI ) 9.81 100 3.14 // Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
let name = 'Asabeneh' , job = 'teacher' , live = 'Finland'
console . log ( name , job , live ) Asabeneh teacher FinlandQuando você executa o arquivo index.html na pasta de 01 dias, você deve obter o seguinte:
? Você é incrível! Você acabou de concluir o desafio do dia 1 e está no caminho para a grandeza. Agora faça alguns exercícios para o seu cérebro e músculo.
Escreva um comentário de linha única que diga, os comentários podem tornar o código legível
Escreva outro comentário único que diga, bem -vindo ao 30DaySofJavascript
Escreva um comentário multilina que diga, os comentários podem tornar o código legível, fácil de reutilizar e informativo
Crie um arquivo variável.js e declare variáveis e atribua a String, Boolean, indefinido e os tipos de dados nulos
Crie arquivo de dados de dados.js e use o operador JavaScript TypeOf para verificar diferentes tipos de dados. Verifique o tipo de dados de cada variável
Declare quatro variáveis sem atribuir valores
Declare quatro variáveis com valores atribuídos
Declare variáveis para armazenar seu primeiro nome, sobrenome, estado civil, país e idade em várias linhas
Declare variáveis para armazenar seu primeiro nome, sobrenome, estado civil, país e idade em uma única linha
Declare duas variáveis Myage e YourAge e atribua -lhes valores iniciais e faça log no console do navegador.
I am 25 years old.
You are 30 years old.? Parabéns! ?
Dia 2 >>
