@ -17,7 +17,7 @@ Olha, eu entendo totalmente se programar parece intimidante agora. Quando comece
Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não apenas possível, mas seriamente viciante. Estou falando dos mesmos editores, navegadores e fluxos de trabalho que os desenvolvedores da Netflix, Spotify e do seu estúdio indie favorito usam todos os dias. E aqui está a parte que vai te fazer dançar de felicidade: a maioria dessas ferramentas profissionais e padrão da indústria são completamente gratuitas!
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
@ -17,7 +17,7 @@ Eu sei que isso pode parecer muito no começo – eu mesmo lembro de olhar para
Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressão – apenas você, eu e algumas ferramentas muito legais que estão prestes a se tornar suas melhores amigas!
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Primeiro, vamos encontrar um repositório (ou **repo**) no GitHub que seja do se
✅ Uma boa maneira de encontrar repositórios 'amigáveis para iniciantes' é [buscar pela tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Existem várias maneiras de copiar código. Uma delas é "clonar" o conteúdo do repositório, usando HTTPS, SSH ou o GitHub CLI (Interface de Linha de Comando).
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ou Linguagem de Marcação de Hipertexto, é a base de todos os sites que você já visitou. Pense no HTML como o esqueleto que dá estrutura às páginas da web – ele define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde "vestirá" seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo isso possível.
@ -88,7 +88,7 @@ Você criará uma pasta dedicada para seu projeto de terrário e adicionará seu
4. No painel Explorer, clique no ícone "Novo Arquivo"
5. Nomeie seu arquivo como `index.html`
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Lembra como seu terrário em HTML parecia bem básico? Com o CSS, transformamos essa estrutura simples em algo visualmente atraente.
@ -205,7 +205,7 @@ body {
Abra as ferramentas de desenvolvedor do seu navegador (F12), navegue até a aba Elementos e inspecione seu elemento `<h1>`. Você verá que ele herda a família de fontes do body:
✅ **Hora de Experimentar**: Tente definir outras propriedades herdáveis no `<body>` como `color`, `line-height` ou `text-align`. O que acontece com seu título e outros elementos?
@ -599,7 +599,7 @@ Pronto para aprimorar seu terrário com reflexos realistas no vidro? Essa técni
Você criará destaques sutis que simulam como a luz reflete nas superfícies de vidro. Essa abordagem é semelhante à usada por pintores renascentistas como Jan van Eyck, que utilizavam luz e reflexos para fazer o vidro pintado parecer tridimensional. Aqui está o que você deve alcançar:
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Bem-vindo a um dos aspectos mais envolventes do desenvolvimento web - tornar as coisas interativas! O Modelo de Objeto de Documento (DOM) é como uma ponte entre seu HTML e JavaScript, e hoje vamos usá-lo para dar vida ao seu terrário. Quando Tim Berners-Lee criou o primeiro navegador web, ele imaginou uma web onde os documentos poderiam ser dinâmicos e interativos - o DOM torna essa visão possível.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Entendendo Closures**: Closures são um tópico significativo em JavaScript, e muitos desenvolvedores os utilizam por anos antes de compreender totalmente todos os aspectos teóricos. Hoje, estamos focando na aplicação prática - você verá closures surgirem naturalmente enquanto construímos nossos recursos interativos. A compreensão se desenvolverá à medida que você perceber como eles resolvem problemas reais.
> Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Agora teste seu terrário interativo! Abra seu arquivo `index.html` em um navega
- **Suporte entre dispositivos**: Funciona em desktop e dispositivos móveis
- **Consciente do desempenho**: Sem vazamentos de memória ou cálculos redundantes
# Meu Terrário: Um projeto para aprender sobre HTML, CSS e manipulação do DOM com JavaScript 🌵🌱
## Publique seu Terrarium
Uma pequena meditação de código com arrastar e soltar. Com um pouco de HTML, JS e CSS, você será capaz de construir uma interface web, estilizar e até adicionar várias interações de sua escolha.
1. [Introdução ao HTML](./1-intro-to-html/README.md)
2. [Introdução ao CSS](./2-intro-to-css/README.md)
3. [Introdução ao DOM e Closures em JS](./3-intro-to-DOM-and-closures/README.md)
## Créditos
Escrito com ♥️ por [Jen Looper](https://www.twitter.com/jenlooper)
O terrário criado via CSS foi inspirado no vidro de Jakub Mandra no [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
As ilustrações foram desenhadas à mão por [Jen Looper](http://jenlooper.com) com a ajuda do Procreate.
## Publique seu Terrário
Você pode publicar seu terrário na web usando o Azure Static Web Apps.
Você pode publicar seu Terrarium na web usando **Azure Static Web Apps**.
1. Faça um fork deste repositório
2. Pressione este botão
2. Pressione este botão 👇
[](https://portal.azure.com/#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Siga o assistente de configuração para criar seu app.
- Defina a **Raiz do app** para `/solution` ou para a raiz do seu código.
- Não há API neste app, então você pode pular a configuração da API.
- Uma pasta `.github` será criada automaticamente para ajudar o Azure Static Web Apps a compilar e publicar seu app.
3. Siga o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo como `/solution` ou a raiz do seu código. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta do GitHub será criada no repositório que você fez o fork, ajudando os serviços de build do Azure Static Web Apps a construir e publicar seu aplicativo em uma nova URL.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
Uma pequena meditação de código com arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode criar uma interface web, estilizar e adicionar interatividade.
> Alguns navegadores antigos, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Como os Navegadores Processam Conteúdo Web
@ -198,7 +198,7 @@ quadrantChart
Entender o processo de instalação de extensões ajuda você a antecipar a experiência do usuário ao instalar sua extensão. O processo de instalação é padronizado nos navegadores modernos, com pequenas variações no design da interface.
> **Importante**: Certifique-se de ativar o modo desenvolvedor e permitir extensões de outras lojas ao testar suas próprias extensões.
@ -313,10 +313,10 @@ Isso segue o princípio de divulgação progressiva usado no design de interface
### Visão Geral das Telas da Extensão
**Tela de Configuração** - Configuração inicial do usuário:
**Tela de Resultados** - Exibição de dados de pegada de carbono:
> ⚠️ **Consideração de Segurança**: Em aplicativos de produção, armazenar chaves de API no LocalStorage apresenta riscos de segurança, já que o JavaScript pode acessar esses dados. Para fins de aprendizado, essa abordagem funciona bem, mas aplicativos reais devem usar armazenamento seguro no servidor para credenciais sensíveis.
@ -126,7 +126,7 @@ Para abrir as Ferramentas de Desenvolvedor no Edge, clique nos três pontos no c
Vamos experimentar isso. Abra um site (Microsoft.com funciona bem para isso) e clique no botão 'Gravar'. Agora atualize a página e observe o profiler capturar tudo o que acontece. Quando você parar a gravação, verá um detalhamento de como o navegador 'escreve scripts', 'renderiza' e 'pinta' o site. Isso me lembra como o controle da missão monitora cada sistema durante o lançamento de um foguete - você obtém dados em tempo real sobre exatamente o que está acontecendo e quando.
✅ A [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tem muitos mais detalhes se você quiser se aprofundar.
@ -136,11 +136,11 @@ Selecione elementos da linha do tempo do perfil para ampliar os eventos que acon
Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo:
Verifique o painel de Log de Eventos para ver se algum evento levou mais de 15 ms:
✅ Familiarize-se com seu profiler! Abra as ferramentas de desenvolvedor neste site e veja se há algum gargalo. Qual é o ativo que carrega mais lentamente? O mais rápido?
@ -23,7 +23,7 @@ Essa extensão pode ser chamada sob demanda por um usuário, uma vez que uma cha
### Créditos
Usando a API CO2 Signal da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para que você tenha um lembrete diretamente no seu navegador sobre o quão intenso está o consumo de eletricidade na sua região. Utilizar essa extensão de forma pontual ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Primeiros Passos
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API da CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o consumo de energia da sua região e fornecer uma indicação sobre quais atividades intensivas em energia seriam apropriadas para você realizar. O conceito por trás desse sistema de 'ponto' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para monitorar o consumo de eletricidade, crie uma extensão de navegador para que você possa receber um lembrete diretamente no navegador sobre o consumo de eletricidade da sua região. O uso dessa extensão personalizada ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Primeiros Passos
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar extensão descompactada' para adicionar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail no campo desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Mapa de Eletricidade](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois que a chave de API e a região forem inseridas na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o consumo de energia da sua região e fornecer um indicador sobre quais atividades de alto consumo energético seriam apropriadas realizar. O conceito por trás desse sistema de 'pontos' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para rastrear o uso de eletricidade, esta extensão de navegador foi criada para lembrar você sobre o impacto do uso de energia na sua região enquanto navega. Utilizar esta extensão pode ajudá-lo a tomar decisões informadas com base nessas informações.
## Começando
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para encontrar o painel de extensões. A partir daí, selecione 'Carregar sem empacotar' para carregar uma nova extensão. No prompt, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API do CO2 Signal ([obtenha por e-mail aqui](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e [o código da sua região](http://api.electricitymap.org/v3/zones) no [Electricity Map](https://www.electricitymap.org/map) (por exemplo, em Boston, eu uso 'US-NEISO').
Depois que a chave de API e o código da região forem inseridos na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o uso de energia na sua região e fornecer um indicador sobre quais atividades intensivas em energia são mais adequadas para o momento. O conceito por trás deste sistema de 'ponto' foi inspirado pela extensão [Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Será utilizada a API Signal CO2 da tmrow para monitorar o uso de eletricidade e criar uma extensão para o navegador, permitindo que você tenha um lembrete diretamente no navegador sobre o impacto do consumo de eletricidade na sua região. O uso dessa extensão personalizada ajudará a avaliar suas atividades com base nessas informações.
## Para Começar
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, utilize o menu de "três pontos" no canto superior direito do navegador para acessar o painel de Extensões. Se ainda não estiver ativado, habilite o Modo Desenvolvedor (no canto inferior esquerdo). Selecione "Carregar sem compactação" para adicionar uma nova extensão. No prompt, abra a pasta "dist" e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API do CO2 Signal (você pode [obter uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa dessa página) e o [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [mapa elétrico](https://www.electricitymap.org/map) (em Boston, por exemplo, "US-NEISO").
Depois que a chave de API e a região forem inseridas na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o consumo de energia da região e fornecer uma indicação sobre quais atividades de alto consumo energético seriam apropriadas para realizar. O conceito por trás desse sistema de "pontos" foi inspirado na [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Com a API CO2 Signal da tmrow, você pode criar uma extensão de navegador que exibe lembretes sobre o consumo de energia na sua região diretamente no navegador. Essa extensão permite que você acompanhe o uso de energia e tome decisões informadas com base nessas informações.
## Introdução
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, encontre o painel "Extensões" no menu de "três pontos" no canto superior direito do navegador. A partir daí, selecione "Carregar sem compactação" e carregue a nova extensão. Quando solicitado, abra a pasta "dist" para carregar a extensão. Para utilizá-la, você precisará de uma chave de API da CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa dessa página) e do [código correspondente à sua região](http://api.electricitymap.org/v3/zones) no [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, use 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, um ponto colorido aparecerá na barra de extensões do navegador. Esse ponto mudará de cor para refletir o consumo de energia na sua região, ajudando você a decidir quais atividades que demandam energia são mais apropriadas naquele momento. O conceito desse sistema de "pontos" foi inspirado na extensão [Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para monitorar o consumo de eletricidade, crie uma extensão de navegador que possa alertá-lo sobre o impacto do consumo de energia na sua região. O uso dessa extensão pode ajudá-lo a tomar decisões mais conscientes sobre suas atividades com base nessas informações.
## Começando
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Abra a pasta 'dist' quando solicitado, e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa na página) e [o código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, um ponto colorido na barra da extensão do navegador mudará para refletir o consumo de energia da sua região e fornecerá sugestões sobre quais atividades intensivas são mais adequadas para o momento. O conceito por trás do sistema de 'pontos' foi inspirado pela [extensão de navegador Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
Usando a API CO2 Signal da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para que você tenha um lembrete diretamente no seu navegador sobre o quão intenso está o consumo de eletricidade na sua região. Usar essa extensão de forma pontual ajudará você a tomar decisões sobre suas atividades com base nessas informações.
## Primeiros Passos
@ -31,7 +31,7 @@ npm run build
Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem Empacotamento' para carregar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API do CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO').
Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o consumo de energia da sua região e fornecer uma indicação sobre quais atividades intensivas em energia seriam apropriadas para você realizar. O conceito por trás desse sistema de 'ponto' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia.
> Imagem de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Para desenhar no elemento canvas, você seguirá o mesmo processo de três etapas que forma a base de todos os gráficos do canvas. Depois de fazer isso algumas vezes, torna-se algo natural:
@ -329,11 +329,11 @@ Você criará uma página web com um elemento Canvas. Ela deve renderizar uma te
- Nave do herói
- Formação 5×5 de monstros
### Passos Recomendados para Iniciar o Desenvolvimento
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
O resultado final deve ser assim:
- **Sistema de pontuação**: Cada nave inimiga destruída concede 100 pontos (números redondos são mais fáceis para os jogadores calcularem mentalmente). A pontuação será exibida no canto inferior esquerdo.
- **Contador de vidas**: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de nave .
- **Contador de vidas**: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de nave .
Usar o `history.pushState` cria novas entradas no histórico de navegação do navegador. Você pode verificar isso segurando o *botão voltar* do seu navegador, ele deve exibir algo assim:
Se você tentar clicar no botão voltar algumas vezes, verá que a URL atual muda e o histórico é atualizado, mas o mesmo template continua sendo exibido.
@ -295,7 +295,7 @@ Primeiro, vamos observar o que acontece com o envio básico de formulários:
2. Observe as mudanças na barra de endereço do navegador
3. Note como a página recarrega e os dados aparecem na URL
### Comparação de Métodos HTTP
@ -350,7 +350,7 @@ Vamos configurar seu formulário de registro para se comunicar corretamente com
2. **Clique** no botão "Criar Conta"
3. **Observe** a resposta do servidor no seu navegador
**O que você deve ver:**
- **Redirecionamento do navegador** para a URL do endpoint da API
@ -615,7 +615,7 @@ async function register() {
3. **Clique** em "Criar Conta"
4. **Observe** as mensagens do console e o feedback ao usuário
**O que você deve ver:**
- **Estado de carregamento** aparece no botão de envio
@ -790,7 +790,7 @@ Vamos aprimorar seu formulário de registro com validação robusta que oferece
3. **Tente** caracteres especiais no campo de nome de usuário
4. **Insira** um valor de saldo negativo
**O que você observará:**
- **O navegador exibe** mensagens de validação nativas
@ -952,7 +952,7 @@ Mostre uma mensagem de erro no HTML se o usuário já existir.
Aqui está um exemplo de como a página de login final pode ficar após um pouco de estilização:
**Por que essa abordagem parecia desajeitada:**
- Cada clique significava reconstruir a página inteira do zero
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
**Por que os SPAs são muito melhores:**
- Apenas as partes que realmente mudaram são atualizadas (inteligente, né?)
@ -523,7 +523,7 @@ if (data.error) {
Agora, ao testar com uma conta inválida, você verá uma mensagem de erro útil diretamente na página!
#### Passo 4: Sendo Inclusivo com Acessibilidade
@ -961,7 +961,7 @@ Pronto para levar seu aplicativo bancário para o próximo nível? Vamos fazer c
Aqui está como um dashboard polido poderia parecer:
Não sinta que precisa seguir exatamente este modelo - use-o como inspiração e crie algo único!
@ -190,7 +190,7 @@ Como o design compartimentado do Titanic parecia robusto até que múltiplos com
Em vez de ficarmos correndo em círculos, vamos criar um sistema de **gerenciamento de estado centralizado**. Pense nisso como ter uma pessoa realmente organizada responsável por todas as coisas importantes:
```mermaid
flowchart TD
@ -804,7 +804,7 @@ Este desafio ajudará você a pensar como um desenvolvedor profissional que cons
Aqui está um exemplo de resultado após completar a tarefa:
@ -112,7 +112,7 @@ Consulte a [documentação da API do servidor](../api/README.md) para:
**Resultado Esperado:**
Após concluir esta tarefa, seu aplicativo bancário deve ter um recurso de "Adicionar Transação" totalmente funcional que pareça e se comporte de forma profissional:
Neste projeto, você aprenderá como construir um banco fictício. Estas lições incluem instruções sobre como estruturar um aplicativo web e fornecer rotas, criar formulários, gerenciar estado e buscar dados de uma API da qual você pode obter as informações do banco.
@ -185,7 +185,7 @@ Assim como o telefone de Alexander Graham Bell conectava locais distantes, vincu
Depois que tudo estiver carregado, você verá um espaço de trabalho limpo e bonito, projetado para mantê-lo focado no que importa – seu código!
**Aqui está um tour pelo ambiente:**
- **Barra de Atividades** (a faixa à esquerda): Sua navegação principal com Explorer 📁, Pesquisa 🔍, Controle de Fonte 🌿, Extensões 🧩 e Configurações ⚙️
@ -233,7 +233,7 @@ Este é perfeito quando você está começando no VSCode.dev e quer abrir um rep
1. Acesse [vscode.dev](https://vscode.dev) se ainda não estiver lá
2. Procure o botão "Open Remote Repository" na tela inicial e clique nele
**O Command Palette é como ter um mecanismo de busca para tudo o que você pode fazer:**
- Digite "open remote" e ele encontrará o abridor de repositórios para você
@ -304,7 +304,7 @@ Assim como organizar plantas em um escritório de arquitetura, a criação de ar
3. Insira o nome do arquivo, incluindo a extensão apropriada (`style.css`, `script.js`, `index.html`)
4. Pressione Enter para criar o arquivo
**Convenções de nomenclatura:**
- Use nomes descritivos que indiquem o propósito do arquivo
@ -322,7 +322,7 @@ Aqui é onde a diversão realmente começa! O editor do VSCode.dev está repleto
2. Comece a digitar e veja o VSCode.dev ajudá-lo com cores, sugestões e detecção de erros
3. Salve seu trabalho com Ctrl+S (Windows/Linux) ou Cmd+S (Mac) – embora ele também salve automaticamente!
**As coisas legais que acontecem enquanto você programa:**
- Seu código é lindamente colorido para facilitar a leitura
@ -343,7 +343,7 @@ Assim como arqueólogos criam registros detalhados das camadas de escavação, o
2. Os arquivos modificados aparecem na seção "Changes"
3. A codificação por cores indica os tipos de alteração: verde para adições, vermelho para exclusões
**Salvando seu trabalho (fluxo de trabalho de commit):**
@ -438,7 +438,7 @@ O marketplace de extensões é muito bem organizado, então você não vai se pe
2. Navegue ou procure algo específico
3. Clique em qualquer coisa que pareça interessante para saber mais
**O que você encontrará lá:**
@ -491,7 +491,7 @@ A maioria das extensões vem com configurações que você pode ajustar para que
3. Escolha "Configurações da Extensão" no menu suspenso
4. Ajuste as configurações até que fiquem perfeitas para o seu fluxo de trabalho
**Coisas comuns que você pode querer ajustar:**
- Como seu código é formatado (tabulação vs espaços, comprimento da linha, etc.)
@ -78,7 +78,7 @@ Como o VSCode.dev exige pelo menos um arquivo para abrir um repositório, criare
4. **Escreva** uma mensagem de commit: "Adicionar estrutura inicial de HTML"
5. **Clique** em "Commit new file" para salvar suas alterações
**O que essa configuração inicial realiza:**
- **Estabelece** uma estrutura de documento HTML5 adequada com elementos semânticos
@ -104,7 +104,7 @@ Agora que a base do seu repositório está estabelecida, vamos migrar para o VSC
✅ **Indicador de sucesso**: Você deve ver os arquivos do seu projeto na barra lateral do Explorer e `index.html` disponível para edição na área principal do editor.
**O que você verá na interface:**
- **Barra lateral do Explorer**: **Exibe** os arquivos e estrutura de pastas do seu repositório
@ -448,7 +448,7 @@ Extensões melhoram sua experiência de desenvolvimento ao fornecer recursos de
**Resultados imediatos após a instalação:**
Assim que o CodeSwing for instalado, você verá uma pré-visualização ao vivo do seu site de currículo aparecer no editor. Isso permite que você veja exatamente como seu site está enquanto faz alterações.
**Entendendo a interface aprimorada:**
- **Visualização dividida**: **Mostra** seu código de um lado e a pré-visualização ao vivo do outro
## 🗺️ Sua Jornada de Aprendizado no Desenvolvimento de Aplicativos com IA
@ -194,7 +194,7 @@ mindmap
**Princípio Central**: O desenvolvimento de aplicativos com IA combina habilidades tradicionais de desenvolvimento web com integração de serviços de IA, criando aplicativos inteligentes que parecem naturais e responsivos para os usuários.
**Aqui está o que torna o playground tão útil:**
- **Experimente** diferentes modelos de IA como GPT-4o-mini, Claude e outros (todos gratuitos!)
@ -204,7 +204,7 @@ mindmap
Depois de brincar um pouco, basta clicar na aba "Code" e escolher sua linguagem de programação para obter o código de implementação necessário.
## Configurando a Integração de Backend com Python
@ -2365,14 +2365,14 @@ Quer experimentar este projeto em um ambiente de desenvolvimento na nuvem? O Git
- **Acesse** o [repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Clique** em "Use this template" no canto superior direito (certifique-se de estar logado no GitHub)
**Passo 2: Iniciar Codespaces**
- **Abra** o repositório recém-criado
- **Clique** no botão verde "Code" e selecione "Codespaces"
- **Escolha** "Create codespace on main" para iniciar seu ambiente de desenvolvimento
**Passo 3: Configuração do Ambiente**
Assim que seu Codespace carregar, você terá acesso a:
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
# Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de codificação hoje!
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições mergulha em JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize a retenção do conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada de programação hoje!
Participe da Comunidade Azure AI Foundry no Discord
Siga estas etapas para começar a usar esses recursos:
1. **Faça um Fork do Repositório**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
Siga estes passos para começar a usar esses recursos:
1. **Faça um Fork do Repositório**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Participe do Azure AI Foundry Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
3. [**Junte-se ao Discord Azure AI Foundry e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporte Multilíngue
#### Suporte via GitHub Action (Automatizado e Sempre Atualizado)
#### Suportado via GitHub Action (Automatizado e Sempre Atualizado)
<!-- TABELA DE LÍNGUAS DO TRADUTOR CO-OP INÍCIO -->
**Se você deseja ter suporte para idiomas adicionais, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> **Prefere Clonar Localmente?**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
> Este repositório inclui mais de 50 traduções, o que aumenta significativamente o tamanho do download. Para clonar sem traduções, use sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Isso lhe oferece tudo que precisa para completar o curso com um download muito mais rápido.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
#### 🧑🎓 _Você é estudante?_
**Se desejar que idiomas adicionais sejam suportados, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
Visite [**Página do Hub Estudantil**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até mesmo maneiras de obter um voucher de certificado gratuito. Esta é a página que você deve marcar como favorita e verificar de tempos em tempos, pois trocamos o conteúdo mensalmente.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
### 📣 Anúncio - Novos desafios do modo Agente do GitHub Copilot para completar!
#### 🧑🎓 _Você é um estudante?_
Novo desafio adicionado, procure por "Desafio do Agente do GitHub Copilot 🚀" na maioria dos capítulos. Esse é um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você ainda não usou o modo Agente antes, ele é capaz de não apenas gerar texto, mas também criar e editar arquivos, executar comandos e muito mais.
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes estudantis e até formas de obter um voucher gratuito para certificado. Esta é a página que você vai querer favoritar e visitar de tempos em tempos, pois trocamos o conteúdo mensalmente.
### 📣 Anúncio - Novos desafios do modo Agente GitHub Copilot para completar!
Novo desafio adicionado, procure por "GitHub Copilot Agent Challenge 🚀" em vários capítulos. É um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também de criar e editar arquivos, executar comandos e mais.
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto de Assistente de IA acabou de ser adicionado, confira [projeto](./09-chat-project/README.md)
Novo projeto de Assistente de IA foi adicionado, confira o [projeto](./9-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acabou de ser lançado
Não perca nosso novo currículo de IA Generativa!
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo no aprendizado de tópicos como:
- Criação de prompts e engenharia de prompts
- Geração de aplicativos de texto e imagem
- Aplicativos de busca
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo na aprendizagem de tópicos como:
- Prompting e engenharia de prompts
- Geração de apps de texto e imagem
- Apps de busca
Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para começar!
@ -81,50 +92,51 @@ Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pa
## 🌱 Começando
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos seu feedback [em nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula.
**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-palestra e siga lendo o material da aula, complete as várias atividades e verifique seu entendimento com o quiz pós-palestra.
Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde nossa equipe de moderadores estará disponível para responder suas perguntas.
Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalharem juntos nos projetos! As discussões são incentivadas em nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder suas perguntas.
Para aprofundar sua educação, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
Para ampliar sua educação, recomendamos fortemente explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais adicionais de estudo.
### 📋 Configurando seu ambiente
Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente em seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, você pode escolher executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente em seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crie seu repositório
Para salvar seu trabalho facilmente, é recomendado que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório em sua conta do GitHub com uma cópia do currículo.
Para facilitar o salvamento do seu trabalho, recomendamos que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório na sua conta do GitHub com uma cópia do currículo.
Siga estas etapas:
Siga estes passos:
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Executando o currículo em um Codespace
Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar.
Na sua cópia do repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar.
#### Executando o currículo localmente no seu computador
Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas de Trabalho](../../1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo por várias opções para cada uma dessas ferramentas, para que você selecione o que funciona melhor para você.
Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), o guiará por várias opções para cada uma dessas ferramentas para que você escolha o que funcionar melhor para você.
Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
[CodeSpace](./images/createcodespace.png)
Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pela URL que você acabou de copiar:
Então, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pela URL que você acabou de copiar:
```bash
git clone <your-repository-url>
```
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que você acabou de clonar.
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **Arquivo** > **Abrir Pasta** e selecionando a pasta que você acabou de clonar.
> Extensões recomendadas para Visual Studio Code:
> Extensões recomendadas do Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido
@ -132,128 +144,137 @@ Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/
## 📂 Cada aula inclui:
- sketchnote opcional
- vídeo complementar opcional
- quiz de aquecimento antes da aula
- vídeo suplementar opcional
- quiz de aquecimento pré-aula
- aula escrita
- para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
> **Uma observação sobre os quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, com 48 quizzes no total, cada um com três perguntas. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Aulas
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| 01 | Primeiros Passos | Introdução à Programação e Ferramentas de Trabalho | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Primeiros Passos | Noções Básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto e colaborar com outros em um código base | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprenda como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construa um Jogo de Digitação | Aprenda como usar eventos de teclado para conduzir a lógica do seu aplicativo JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no local storage | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no local storage | [APIs, Formulários e Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho na web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho na web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento de Jogos Avançado](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos pela Tela](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de Colisões | Faça os elementos colidirem e reagirem uns aos outros usando teclas pressionadas e forneça uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a Pontuação | Realize cálculos matemáticos com base no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e Reiniciando o Jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar os recursos e redefinir valores de variáveis | [Condição de Finalização](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda sobre como construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Busca e Uso de Dados | Como os dados fluem dentro e fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu aplicativo mantém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Editor de Código Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda como usar um editor de código | [Usando o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda como construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris |
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| 01 | Começando | Introdução à Programação e Ferramentas do Ofício | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre o software que ajuda desenvolvedores | [Introdução às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Começando | Noções básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Começando | Acessibilidade | Aprenda o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | O básico sobre tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprenda como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico do CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em closures e manipulação de DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprenda a usar eventos de teclado para dirigir a lógica do seu app em JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como criar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis localmente | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários, e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento Avançado de Jogos com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, preparando-se para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisão | Faça elementos colidirem e reagirem entre si usando teclas e forneça uma função de cooldown para garantir a performance do jogo | [Detecção de Colisão](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos baseados no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre finalizar e reiniciar o jogo, incluindo limpeza de assets e reset de variáveis | [A Condição de Finalização](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda como criar a estrutura de arquitetura de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo Formulário de Login e Cadastro | Aprenda sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Buscar e Usar Dados | Como os dados entram e saem do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código do Navegador/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda a usar um editor de código | [Usando o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos principais em mente:
Nosso currículo é projetado com dois princípios pedagógicos chave em mente:
* aprendizado baseado em projetos
* quizzes frequentes
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo "space invader" e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo invasores do espaço e um app bancário para empresas. Ao final da série, os alunos terão adquirido uma sólida compreensão do desenvolvimento web.
> 🎓 Você pode fazer as primeiras aulas deste currículo como um [Caminho de Aprendizado](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
> 🎓 Você pode fazer as primeiras aulas deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos quais os autores contribuíram para este currículo.
Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas iniciais em fundamentos de JavaScript para introduzir conceitos, combinadas com um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriais em vídeo, alguns dos quais tiveram seus autores contribuindo para este currículo.
Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito em sua totalidade ou em partes. Os projetos começam pequenos e se tornam cada vez mais complexos ao final do ciclo de 12 semanas.
Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito integralmente ou em partes. Os projetos começam pequenos e ficam progressivamente mais complexos até o final do ciclo de 12 semanas.
Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para nos concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo após concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Embora tenhamos evitado propositalmente introduzir frameworks JavaScript para concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js via outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite nossas diretrizes no [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuindo](CONTRIBUTING.md). Nós agradecemos seu feedback construtivo!
> Visite nosso [Código de Conduta](CODE_OF_CONDUCT.md) e diretrizes de [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo!
## 🧭 Acesso offline
Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 do seu localhost: `localhost:3000`.
Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e então na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`.
## 📘 PDF
Um PDF de todas as aulas pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Outros Cursos
## 🎒 Outros Cursos
Nossa equipe produz outros cursos! Confira:
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Série de IA Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Aprendizado Essencial
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Série IA Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Aprendizado Básico
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Se você ficar preso ou tiver dúvidas sobre como construir aplicativos de IA, junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
Se você ficar travado ou tiver alguma dúvida sobre como construir aplicativos de IA, junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
Se você tiver feedback sobre produtos ou encontrar erros durante o desenvolvimento, visite:
Se você tiver feedback sobre produtos ou erros durante a construção, visite:
[](https://aka.ms/foundry/forum)
Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](../../LICENSE) para mais informações.
Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](../../LICENSE) para mais informações.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
> Σημειώσεις από [Tomomi Imura](https://twitter.com/girlie_mac)
Οι τύποι δεδομένων είναι μία από τις θεμελιώδεις έννοιες στη JavaScript που θα συναντήσετε σε κάθε πρόγραμμα που γράφετε. Σκεφτείτε τους τύπους δεδομένων σαν το σύστημα αρχειοθέτησης που χρησιμοποιούσαν οι αρχαίοι βιβλιοθηκάριοι στην Αλεξάνδρεια – είχαν συγκεκριμένα μέρη για πάπυρους που περιείχαν ποίηση, μαθηματικά και ιστορικά αρχεία. Η JavaScript οργανώνει πληροφορίες με παρόμοιο τρόπο, με διαφορετικές κατηγορίες για διαφορετικά είδη δεδομένων.
# Βασικά στοιχεία JavaScript: Τύποι Δεδομένων
> Σημείωση από [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Η Περιπέτεια σας με τους Τύπους Δεδομένων της JavaScript
section Θεμέλια
Μεταβλητές & Σταθερές: 5: You
Σύνταξη Δήλωσης: 4: You
Έννοιες Ανάθεσης: 5: You
section Βασικοί Τύποι
Αριθμοί & Μαθηματικά: 4: You
Συμβολοσειρές & Κείμενο: 5: You
Λογικοί & Boolean: 4: You
section Εφαρμογή Γνώσης
Μετατροπή Τύπου: 4: You
Παραδείγματα από την Πραγματική Ζωή: 5: You
Καλές Πρακτικές: 5: You
```
Οι τύποι δεδομένων είναι μία από τις βασικές έννοιες στην JavaScript που θα συναντάτε σε κάθε πρόγραμμα που γράφετε. Σκεφτείτε τους τύπους δεδομένων σαν το σύστημα αρχειοθέτησης που χρησιμοποιούσαν οι αρχαίοι βιβλιοθηκάριοι στην Αλεξάνδρεια – είχαν συγκεκριμένες θέσεις για παπύρους που περιείχαν ποίηση, μαθηματικά και ιστορικά αρχεία. Η JavaScript οργανώνει τις πληροφορίες με παρόμοιο τρόπο, με διαφορετικές κατηγορίες για διαφορετικούς τύπους δεδομένων.
Σε αυτό το μάθημα, θα εξερευνήσουμε τους βασικούς τύπους δεδομένων που κάνουν τη JavaScript να λειτουργεί. Θα μάθετε πώς να χειρίζεστε αριθμούς, κείμενο, τιμές αληθές/ψευδές και θα κατανοήσετε γιατί είναι σημαντικό να επιλέγετε τον σωστό τύπο για τα προγράμματά σας. Αυτές οι έννοιες μπορεί να φαίνονται αφηρημένες στην αρχή, αλλά με την εξάσκηση θα γίνουν δεύτερη φύση.
Σε αυτό το μάθημα, θα εξερευνήσουμε τους βασικούς τύπους δεδομένων που κάνουν την JavaScript να λειτουργεί. Θα μάθετε πώς να χειρίζεστε αριθμούς, κείμενο, τιμές true/false, και θα καταλάβετε γιατί η σωστή επιλογή τύπου είναι ουσιώδηςγια τα προγράμματά σας. Αυτές οι έννοιες μπορεί να φαίνονται αφηρημένες στην αρχή, αλλά με την εξάσκηση θα γίνουν δεύτερη φύση.
Η κατανόηση των τύπων δεδομένων θα κάνει όλα τα υπόλοιπα στη JavaScript πολύ πιο ξεκάθαρα. Όπως οι αρχιτέκτονες πρέπει να κατανοήσουν τα διαφορετικά υλικά κατασκευής πριν χτίσουν έναν καθεδρικό ναό, έτσι και αυτές οι βασικές αρχές θα υποστηρίξουν ό,τι χτίσετε στο μέλλον.
Η κατανόηση των τύπων δεδομένων θα κάνει τα πάντα στην JavaScript πολύ πιο κατανοητά. Όπως οι αρχιτέκτονες χρειάζεται να καταλάβουν τα διαφορετικά υλικά πριν χτίσουν έναν καθεδρικό ναό, έτσι και αυτές οι βασικές αρχές θα στηρίξουν ό,τι κατασκευάσετε στο μέλλον.
## Ερωτήσεις πριν το μάθημα
[Ερωτήσεις πριν το μάθημα](https://ff-quizzes.netlify.app/web/)
Αυτό το μάθημα καλύπτει τα βασικά της JavaScript, της γλώσσας που προσφέρει διαδραστικότητα στον ιστό.
Αυτό το μάθημα καλύπτει τα βασικά της JavaScript, της γλώσσας που παρέχει διαδραστικότητα στο διαδίκτυο.
> Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Μεταβλητές στη JavaScript")
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
[](https://youtube.com/watch?v=AWfA95eLdq8 "Τύποι δεδομένων στη JavaScript")
[](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
> 🎥 Κάντε κλικ στις παραπάνω εικόνες για βίντεο σχετικά με τις μεταβλητές και τους τύπους δεδομένων
Ας ξεκινήσουμε με τις μεταβλητές και τους τύπους δεδομένων που τις γεμίζουν!
```mermaid
mindmap
root((Δεδομένα JavaScript))
Μεταβλητές
let myVar
const PI = 3.14
var oldStyle
Πρωτότυποι Τύποι
αριθμός
42
3.14
-5
συμβολοσειρά
"Γειά"
'Κόσμος'
`Πρότυπο`
boolean
true
false
undefined
null
Λειτουργίες
Αριθμητική
+ - * / %
Μέθοδοι Συμβολοσειράς
συγχώνευση
πρότυπα συμβολοσειράς
Μετατροπή Τύπου
ρητή
σαφής
```
## Μεταβλητές
Οι μεταβλητές είναι θεμελιώδη δομικά στοιχεία στον προγραμματισμό. Όπως τα δοχεία με ετικέτες που χρησιμοποιούσαν οι μεσαιωνικοί αλχημιστές γιανα αποθηκεύσουν διαφορετικές ουσίες, οι μεταβλητές σας επιτρέπουν να αποθηκεύετε πληροφορίες και να τους δίνετε μια περιγραφική ονομασία ώστε να μπορείτε να τις αναφέρετε αργότερα. Θέλετε να θυμάστε την ηλικία κάποιου; Αποθηκεύστε την σε μια μεταβλητή που ονομάζεται `age`. Θέλετε να παρακολουθείτε το όνομα ενός χρήστη; Κρατήστε το σε μια μεταβλητή που ονομάζεται `userName`.
Οι μεταβλητές είναι βασικά δομικά στοιχεία στον προγραμματισμό. Όπως τα βαζάκια με ετικέτες που χρησιμοποιούσαν οι μεσαιωνικοί αλχημιστές γιαναφυλάσσουν διαφορετικές ουσίες, οι μεταβλητές σας επιτρέπουν να αποθηκεύετε πληροφορίες και να τους δίνετε ένα περιγραφικό όνομα γιανα τις αναφέρετε αργότερα. Θέλετε να θυμάστε την ηλικία κάποιου; Αποθηκεύστε την σε μια μεταβλητή που ονομάζεται `age`. Θέλετε να παρακολουθείτε το όνομα ενός χρήστη; Κρατήστε το σε μια μεταβλητή που ονομάζεται `userName`.
Θα επικεντρωθούμε στη σύγχρονη προσέγγιση για τη δημιουργία μεταβλητών στη JavaScript. Οι τεχνικές που θα μάθετε εδώ αντιπροσωπεύουν χρόνια εξέλιξης της γλώσσας και βέλτιστες πρακτικές που έχουν αναπτυχθεί από την κοινότητα προγραμματιστών.
Θα επικεντρωθούμε στη σύγχρονη προσέγγιση δημιουργίας μεταβλητών στην JavaScript. Οι τεχνικές που θα μάθετε εδώ εκπροσωπούν χρόνια εξέλιξης της γλώσσας και βέλτιστες πρακτικές που ανέπτυξε η κοινότητα προγραμματιστών.
Η δημιουργία και **δήλωση** μιας μεταβλητής έχει την εξής σύνταξη **[λέξη-κλειδί] [όνομα]**. Αποτελείται από δύο μέρη:
Η δημιουργία και **δήλωση** μιας μεταβλητής ακολουθεί την εξής σύνταξη **[λέξη-κλειδί] [όνομα]**. Αποτελείται από δύο μέρη:
- **Λέξη-κλειδί**. Χρησιμοποιήστε `let`για μεταβλητές που μπορούν να αλλάξουν ή `const`για τιμές που παραμένουν σταθερές.
- **Το όνομα της μεταβλητής**, είναι ένα περιγραφικό όνομα που επιλέγετε εσείς.
- **Λέξη-κλειδί**. Χρησιμοποιήστε `let`για μεταβλητές που μπορούν να αλλάξουν, ή `const`για τιμές που παραμένουν σταθερές.
- **Το όνομα της μεταβλητής**, αυτό είναι ένα περιγραφικό όνομα που επιλέγετε εσείς.
✅ Η λέξη-κλειδί `let` εισήχθη στην ES6 και δίνει στη μεταβλητή σας τη λεγόμενη _block scope_. Συνιστάται να χρησιμοποιείτε `let` ή `const` αντί για την παλαιότερη λέξη-κλειδί `var`. Θα καλύψουμε το block scope πιο αναλυτικά σε επόμενα μέρη.
✅ Η λέξη-κλειδί `let` εισήχθη στην ES6 και δίνει στη μεταβλητή σας ένα λεγόμενο _block scope_ (πεδίο ορατότητας μπλοκ). Συνιστάται να χρησιμοποιείτε `let` ή `const` αντί της παλαιότερης λέξης-κλειδί `var`. Θα καλύψουμε τα block scopes πιο αναλυτικά σε επόμενα μέρη.
### Εργασία - Εργασία με μεταβλητές
### Άσκηση - εργασία με μεταβλητές
1. **Δηλώστε μια μεταβλητή**. Ας ξεκινήσουμε δημιουργώντας την πρώτη μας μεταβλητή:
@ -55,11 +102,11 @@ CO_OP_TRANSLATOR_METADATA:
```
**Τι επιτυγχάνει αυτό:**
- Αυτό λέει στη JavaScript να δημιουργήσει μια θέση αποθήκευσης που ονομάζεται `myVariable`
- Η JavaScript δεσμεύει χώρο στη μνήμη για αυτή τη μεταβλητή
- Ενημερώνει τη JavaScript να δημιουργήσει μια θέση αποθήκευσης που ονομάζεται `myVariable`
- Η JavaScript δεσμεύει μνήμη για αυτή τη μεταβλητή
- Η μεταβλητή αυτή τη στιγμή δεν έχει τιμή (undefined)
2. **Δώστε της μια τιμή**. Τώρα ας βάλουμε κάτι στη μεταβλητή μας:
2. **Δώστε της μια τιμή**. Τώρα βάλτε κάτι μέσα στη μεταβλητή μας:
```javascript
myVariable = 123;
@ -67,21 +114,21 @@ CO_OP_TRANSLATOR_METADATA:
**Πώς λειτουργεί η ανάθεση:**
- Ο τελεστής `=` αναθέτει την τιμή 123 στη μεταβλητή μας
- Η μεταβλητή περιέχει τώρα αυτή την τιμή αντί να είναι undefined
- Μπορείτε να αναφέρετε αυτή την τιμή σε όλο τον κώδικά σας χρησιμοποιώντας το`myVariable`
- Η μεταβλητή πλέον περιέχει αυτή την τιμή αντί για undefined
- Μπορείτε να αναφερθείτε σε αυτή την τιμή σε όλο τον κώδικα χρησιμοποιώντας `myVariable`
> Σημείωση: η χρήση του `=` σε αυτό το μάθημα σημαίνει ότι χρησιμοποιούμε έναν "τελεστή ανάθεσης", που χρησιμοποιείται γιανα ορίσουμε μια τιμή σε μια μεταβλητή. Δεν δηλώνει ισότητα.
> Σημείωση: Η χρήση του `=` σε αυτό το μάθημα σημαίνει ότι χρησιμοποιούμε έναν "τελεστή ανάθεσης", που χρησιμοποιείται γιανα ορίσουμε μια τιμή σε μια μεταβλητή. Δεν δηλώνει ισότητα.
3. **Κάντε το έξυπνα**. Στην πραγματικότητα, ας συνδυάσουμε αυτά τα δύο βήματα:
3. **Κάντε το έξυπνα**. Στην πραγματικότητα, ας συνδυάσουμε τα δύο αυτά βήματα:
```javascript
let myVariable = 123;
```
**Αυτή η προσέγγιση είναι πιο αποτελεσματική:**
- Δηλώνετε τη μεταβλητή και της αναθέτετε μια τιμή σε μία δήλωση
- Αυτή είναι η τυπική πρακτική μεταξύ των προγραμματιστών
- Μειώνει το μήκος του κώδικα διατηρώντας την σαφήνεια
- Δηλώνετε τη μεταβλητή και αναθέτετε τιμή σε μία δήλωση
- Αυτή είναι η συνήθης πρακτική μεταξύ των προγραμματιστών
- Μειώνει το μήκος του κώδικα ενώ διατηρεί την σαφήνεια
4. **Αλλάξτε γνώμη**. Τι γίνεται αν θέλουμε να αποθηκεύσουμε έναν διαφορετικό αριθμό;
@ -89,34 +136,61 @@ CO_OP_TRANSLATOR_METADATA:
myVariable = 321;
```
**Κατανόηση της επαναφοράς τιμής:**
- Η μεταβλητή περιέχει τώρα 321 αντί για 123
**Κατανόηση της επαναανάθεσης:**
- Η μεταβλητή τώρα περιέχει 321 αντί για 123
- Η προηγούμενη τιμή αντικαθίσταται –οι μεταβλητές αποθηκεύουν μόνο μία τιμή κάθε φορά
- Αυτή η δυνατότητα αλλαγής είναι το βασικό χαρακτηριστικό των μεταβλητών που δηλώνονται με `let`
- Αυτή η μεταβλητότητα είναι το κύριο χαρακτηριστικό των μεταβλητών που δηλώνονται με `let`
✅ Δοκιμάστε το! Μπορείτε να γράψετε JavaScript απευθείας στον περιηγητή σας. Ανοίξτε ένα παράθυρο περιηγητή και πηγαίνετε στα Εργαλεία Προγραμματιστή. Στην κονσόλα, θα βρείτε ένα πεδίο εισαγωγής. Πληκτρολογήστε `let myVariable = 123`, πατήστε Enter και μετά πληκτρολογήστε `myVariable`. Τι συμβαίνει; Σημειώστε ότι θα μάθετε περισσότερα για αυτές τις έννοιες σε επόμενα μαθήματα.
✅ Δοκιμάστε το! Μπορείτε να γράψετε JavaScript απευθείας στον browser σας. Ανοίξτε το παράθυρο Developer Tools. Στην κονσόλα, θα βρείτε ένα prompt· πληκτρολογήστε `let myVariable = 123`, πατήστε enter, και μετά πληκτρολογήστε `myVariable`. Τι συμβαίνει; Σημειώστε ότι θα μάθετε περισσότερα για αυτές τις έννοιες σε επόμενα μαθήματα.
### 🧠 **Εξέταση Επάρκειας στις Μεταβλητές: Να νιώσετε άνεση**
**Ας δούμε πώς νιώθετε για τις μεταβλητές:**
- Μπορείτε να εξηγήσετε τη διαφορά μεταξύ δήλωσης και ανάθεσης σε μια μεταβλητή;
- Τι συμβαίνει αν προσπαθήσετε να χρησιμοποιήσετε μια μεταβλητή πριν την δηλώσετε;
- Πότε θα επιλέγατε `let` αντί για`const`για μια μεταβλητή;
```mermaid
stateDiagram-v2
[*] --> Declared: let myVar
Declared --> Assigned: myVar = 123
Assigned --> Reassigned: myVar = 456
Assigned --> [*]: Μεταβλητή έτοιμη!
Reassigned --> [*]: Ενημερωμένη τιμή
note right of Declared
Η μεταβλητή υπάρχει αλλά
δεν έχει τιμή (απροσδιόριστο)
end note
note right of Assigned
Η μεταβλητή περιέχει
την τιμή 123
end note
```
> **Γρήγορη συμβουλή**: Σκεφτείτε τις μεταβλητές σαν κουτιά αποθήκευσης με ετικέτες. Δημιουργείτε το κουτί (`let`), βάζετε κάτι μέσα (`=`), και αργότερα μπορείτε να αλλάξετε το περιεχόμενο αν χρειαστεί!
## Σταθερές
Μερικές φορές χρειάζεστε να αποθηκεύσετε πληροφορίες που δεν πρέπει να αλλάξουν κατά την εκτέλεση του προγράμματος. Σκεφτείτε τις σταθερές σαν τις μαθηματικές αρχές που καθιέρωσε ο Ευκλείδης στην αρχαία Ελλάδα – μόλις αποδειχθούν και καταγραφούν, παραμένουν σταθερές για πάντα.
Μερικές φορές χρειάζεταινα αποθηκεύσετε πληροφορίες που δεν πρέπει ποτένα αλλάξουν κατά την εκτέλεση του προγράμματος. Σκεφτείτε τις σταθερές σαν τις μαθηματικές αρχές που καθιέρωσε ο Ευκλείδης στην αρχαία Ελλάδα – μόλις αποδειχθούν και καταγραφούν, παρέμεναν σταθερές για πάντα.
Οι σταθερές λειτουργούν παρόμοια με τις μεταβλητές, αλλά με έναν σημαντικό περιορισμό: μόλις τους αναθέσετε μια τιμή, αυτή δεν μπορεί να αλλάξει. Αυτή η αμεταβλητότητα βοηθά στην αποφυγή τυχαίων τροποποιήσεων σε κρίσιμες τιμές του προγράμματός σας.
Οι σταθερές λειτουργούν παρόμοια με τις μεταβλητές, αλλά με έναν σημαντικό περιορισμό: μόλις τους ανατεθεί μια τιμή, δεν μπορεί να αλλάξει. Αυτή η αμεταβλητότητα βοηθά στην αποφυγή τυχαίων αλλαγών σε κρίσιμες τιμές μέσα στο πρόγραμμα σας.
Η δήλωση και η αρχικοποίηση μιας σταθεράς ακολουθεί τις ίδιες έννοιες με μια μεταβλητή, με την εξαίρεση της λέξης-κλειδί `const`. Οι σταθερές συνήθως δηλώνονται με κεφαλαία γράμματα.
Η δήλωση και η αρχικοποίηση μιας σταθεράς ακολουθεί τις ίδιες αρχές με μια μεταβλητή, με εξαίρεση τη λέξη-κλειδί `const`. Οι σταθερές συνήθως δηλώνονται με κεφαλαία γράμματα.
```javascript
const MY_VARIABLE = 123;
```
**Τι κάνει αυτός ο κώδικας:**
- **Δημιουργεί** μια σταθερά με όνομα `MY_VARIABLE` και τιμή 123
- **Χρησιμοποιεί** την ονομασία με κεφαλαία γράμματα για σταθερές
- **Αποτρέπει** οποιαδήποτε μελλοντική αλλαγή αυτής της τιμής
**Αυτό που κάνειο κώδικας:**
- **Δημιουργεί** μια σταθερά με όνομα `MY_VARIABLE`με τιμή 123
- **Χρησιμοποιεί** σύμβαση ονοματοδοσίας με κεφαλαία αναφορικά με τις σταθερές
- **Αποτρέπει** μελλοντικές αλλαγές σε αυτή την τιμή
Οι σταθερές έχουν δύο βασικούς κανόνες:
- **Πρέπει να τους δώσετε μια τιμή αμέσως** – δεν επιτρέπονται κενές σταθερές!
- **Δεν μπορείτε ποτέ να αλλάξετε αυτή την τιμή** – η JavaScript θα εμφανίσει σφάλμα αν προσπαθήσετε. Ας δούμε τι εννοούμε:
- **Πρέπει να τους δώσετε τιμή αμέσως** – δεν επιτρέπονται κενές σταθερές!
- **Δεν μπορείτε ποτέ να αλλάξετε αυτή την τιμή** – η JavaScript θα εκτοξεύσει σφάλμα αν το προσπαθήσετε. Ας δούμε τι εννοώ:
**Απλή τιμή** - Το παρακάτω ΔΕΝ επιτρέπεται:
@ -125,12 +199,12 @@ const MY_VARIABLE = 123;
PI = 4; // δεν επιτρέπεται
```
**Τιπρέπει να θυμάστε:**
- **Προσπάθειες** επαναφοράς τιμής σε σταθερά θα προκαλέσουν σφάλμα
**Τινα θυμάστε:**
- **Οι προσπάθειες** για ανακαθορισμό μίας σταθεράς προκαλούν σφάλμα
- **Προστατεύει** σημαντικές τιμές από τυχαίες αλλαγές
- **Εξασφαλίζει** ότι η τιμή παραμένει σταθερή σε όλο το πρόγραμμα
**Η αναφορά αντικειμένου προστατεύεται** - Το παρακάτω ΔΕΝ επιτρέπεται:
**Προστασία αναφοράς αντικειμένου** - Το παρακάτω ΔΕΝ επιτρέπεται:
```javascript
const obj = { a: 3 };
@ -149,26 +223,26 @@ const MY_VARIABLE = 123;
obj.a = 5; // επιτρέπεται
```
**Ανάλυση του τι συμβαίνει εδώ:**
- **Τροποποιεί** την τιμή της ιδιότητας μέσα στο αντικείμενο
- **Διατηρεί** την ίδια αναφορά του αντικειμένου
- **Δείχνει** ότι το περιεχόμενο του αντικειμένου μπορεί να αλλάξει ενώ η αναφορά παραμένει σταθερή
**Ανάλυση των γεγονότων:**
- **Τροποποιεί** την τιμή ιδιότητας μέσα στο αντικείμενο
- **Διατηρεί** την ίδια αναφορά αντικειμένου
- **Δείχνει** ότι το περιεχόμενο ενός αντικειμένου μπορεί να αλλάξει ενώ η αναφορά παραμένει σταθερή
> Σημείωση, το `const` σημαίνει ότι η αναφορά προστατεύεται από επαναφορά. Η τιμή δεν είναι _αμετάβλητη_ όμως και μπορεί να αλλάξει, ειδικά αν είναι σύνθετη δομή όπως ένα αντικείμενο.
> Σημειώστε ότι το `const` σημαίνει ότι η αναφορά προστατεύεται από ανακαθορισμό. Η τιμή δεν είναι απαραίτητα _αμετάβλητη_ και μπορεί να αλλάξει, ειδικά αν πρόκειται για σύνθετη δομή όπως ένα αντικείμενο.
## Τύποι Δεδομένων
Η JavaScript οργανώνει πληροφορίες σε διαφορετικές κατηγορίες που ονομάζονται τύποι δεδομένων. Αυτή η έννοια αντικατοπτρίζει το πώς οι αρχαίοι λόγιοι κατηγοριοποιούσαν τη γνώση –ο Αριστοτέλης διέκρινε μεταξύ διαφορετικών τύπων λογικής, γνωρίζοντας ότι οι λογικές αρχές δεν μπορούσαννα εφαρμοστούν ομοιόμορφα στην ποίηση, τα μαθηματικά και τη φυσική φιλοσοφία.
Η JavaScript οργανώνει τις πληροφορίες σε διαφορετικές κατηγορίες που ονομάζονται τύποι δεδομένων. Αυτή η έννοια αντανακλά το πώς οι αρχαίοι λόγιοι κατηγοριοποιούσαν τη γνώση –ο Αριστοτέλης διέκρινε μεταξύ διαφόρων τύπων λογικής σκέψης, γνωρίζοντας ότι οι λογικές αρχές δεν μπορούν να εφαρμοστούν ομοιόμορφα σε ποίηση, μαθηματικά και φυσική φιλοσοφία.
Οι τύποι δεδομένων έχουν σημασία επειδή διαφορετικές λειτουργίες λειτουργούν με διαφορετικά είδη πληροφοριών. Όπως δεν μπορείτε να κάνετε αριθμητικές πράξεις με το όνομα ενός ατόμου ή να ταξινομήσετε αλφαβητικά μια μαθηματική εξίσωση, η JavaScript απαιτεί τον κατάλληλο τύπο δεδομένων για κάθε λειτουργία. Η κατανόηση αυτού αποτρέπει σφάλματα και κάνει τον κώδικά σας πιο αξιόπιστο.
Οι τύποι δεδομένων έχουν σημασία επειδή διαφορετικές λειτουργίες λειτουργούν με διαφορετικά είδη πληροφοριών. Όπως δεν μπορείτε να κάνετε αριθμητικές πράξεις στο όνομα ενός ατόμου ή να ταξινομήσετε αλφαβητικά μια μαθηματική εξίσωση, έτσι και η JavaScript απαιτεί τον κατάλληλο τύπο δεδομένων για κάθε λειτουργία. Η κατανόηση αυτού αποτρέπει λάθη και καθιστά τον κώδικά σας πιο αξιόπιστο.
Οι μεταβλητές μπορούν να αποθηκεύουν πολλούς διαφορετικούς τύπους τιμών, όπως αριθμούς και κείμενο. Αυτοί οι διάφοροι τύποι τιμών είναι γνωστοί ως **τύποι δεδομένων**. Οι τύποι δεδομένων είναι ένα σημαντικό μέρος της ανάπτυξης λογισμικού, καθώς βοηθούν τους προγραμματιστές να λαμβάνουν αποφάσεις σχετικά με το πώς πρέπει ναγραφτεί ο κώδικας και πώς πρέπει να λειτουργεί το λογισμικό. Επιπλέον, ορισμένοι τύποι δεδομένων έχουν μοναδικά χαρακτηριστικά που βοηθούν στη μετατροπή ή την εξαγωγή πρόσθετων πληροφοριών από μια τιμή.
Οι μεταβλητές μπορούν να αποθηκεύσουν πολλά διαφορετικά είδη τιμών, όπως αριθμούς και κείμενο. Αυτοί οι διάφοροι τύποι τιμών είναι γνωστοί ως **τύποι δεδομένων**. Οι τύποι δεδομένων είναι σημαντικό μέρος της ανάπτυξης λογισμικού επειδή βοηθούν τους προγραμματιστές να λαμβάνουν αποφάσεις σχετικά με το πώς πρέπει ναγράφεται ο κώδικας και πώς πρέπει να εκτελείται το λογισμικό. Επιπλέον, ορισμένοι τύποι δεδομένων έχουν μοναδικά χαρακτηριστικά που βοηθούν στη μετατροπή ή εξαγωγή επιπλέον πληροφορίας μέσα από μια τιμή.
✅ Οιτύποι δεδομένων αναφέρονται επίσης ως JavaScript data primitives, καθώς είναι οι χαμηλότερου επιπέδου τύποι δεδομένων που παρέχονται από τη γλώσσα. Υπάρχουν 7 πρωτόγονοι τύποι δεδομένων: string, number, bigint, boolean, undefined, null και symbol. Πάρτε ένα λεπτό γιανα οπτικοποιήσετε τι μπορεί νααντιπροσωπεύει κάθε ένας από αυτούς τους τύπους. Τι είναι ένα `zebra`; Τι γίνεται με το `0`; `true`;
✅ ΟιΤύποι Δεδομένων αναφέρονται επίσης ως πρωτόγονοι τύποι δεδομένων της JavaScript, καθώς είναι οι πιο χαμηλού επιπέδου τύποι που παρέχει η γλώσσα. Υπάρχουν 7 πρωτόγονοι τύποι: string, number, bigint, boolean, undefined, null και symbol. Πάρτε ένα λεπτό να οπτικοποιήσετε τι μπορεί νααναπαριστά ο καθένας από αυτούς τους πρωτόγονους. Τι είναι ένα `zebra`; Τι γίνεται με το `0`;Το`true`;
### Αριθμοί
Οι αριθμοί είναι ο πιο απλός τύπος δεδομένων στη JavaScript. Είτε εργάζεστε με ακέραιους αριθμούς όπως το 42, δεκαδικούς όπως το 3.14 ή αρνητικούς αριθμούς όπως το -5, η JavaScript τους χειρίζεται ομοιόμορφα.
Οι αριθμοί είναι ο πιο άμεσος τύπος δεδομένων στην JavaScript. Είτε εργάζεστε με ακέραιους αριθμούς όπως το 42, δεκαδικούς όπως το 3.14, είτε με αρνητικούς αριθμούς όπως το -5, η JavaScript τους χειρίζεται ομοιόμορφα.
Θυμάστε τη μεταβλητή μας από πριν; Το 123 που αποθηκεύσαμε ήταν στην πραγματικότητα ένας τύπος δεδομένων αριθμού:
@ -176,45 +250,195 @@ const MY_VARIABLE = 123;
let myVariable = 123;
```
**Βασικά χαρακτηριστικά:**
**Κύρια χαρακτηριστικά:**
- Η JavaScript αναγνωρίζει αυτόματα τις αριθμητικές τιμές
- Μπορείτε να εκτελέσετε μαθηματικές πράξεις με αυτές τις μεταβλητές
- Δεν απαιτείται ρητή δήλωση τύπου
Οι μεταβλητές μπορούν να αποθηκεύουν όλους τους τύπους αριθμών, συμπεριλαμβανομένων δεκαδικών ή αρνητικών αριθμών. Οι αριθμοί μπορούν επίσης να χρησιμοποιηθούν με αριθμητικούς τελεστές, που καλύπτονται στην [επόμενη ενότητα](../../../../2-js-basics/1-data-types).
```mermaid
flowchart LR
A["🔢 Αριθμοί"] --> B["➕ Πρόσθεση"]
A --> C["➖ Αφαίρεση"]
A --> D["✖️ Πολλαπλασιασμός"]
A --> E["➗ Διαίρεση"]
A --> F["📊 Υπόλοιπο %"]
B --> B1["1 + 2 = 3"]
C --> C1["5 - 3 = 2"]
D --> D1["4 * 3 = 12"]
E --> E1["10 / 2 = 5"]
F --> F1["7 % 3 = 1"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
### Αριθμητικοί Τελεστές
Οι αριθμητικοί τελεστές σας επιτρέπουν να εκτελείτε μαθηματικούς υπολογισμούς στη JavaScript. Αυτοί οι τελεστές ακολουθούν τις ίδιες αρχές που χρησιμοποιούν οι μαθηματικοί εδώ και αιώνες – τα ίδια σύμβολα που εμφανίστηκαν στα έργα λογίων όπως ο Αλ-Χουαρίζμι, που ανέπτυξε τη συμβολική άλγεβρα.
Οι αριθμητικοί τελεστές σας επιτρέπουν να εκτελείτε μαθηματικούς υπολογισμούς στην JavaScript. Αυτοί οι τελεστές ακολουθούν τις ίδιες αρχές που χρησιμοποιούν οι μαθηματικοί εδώ και αιώνες – τα ίδια σύμβολα που εμφανίστηκαν στα έργα λόγιων όπως ο Αλ-Χουαρισμί, που ανέπτυξε τη συμβολική αναπαράσταση της άλγεβρας.
Οι τελεστές λειτουργούν όπως θα περιμένατε από τα παραδοσιακά μαθηματικά: το συνγια πρόσθεση, το μείον για αφαίρεση, και ούτω καθεξής.
Οι τελεστές λειτουργούν όπως θα περιμένατε από την παραδοσιακή μαθηματική: το συνγια πρόσθεση, το πλην για αφαίρεση και ούτω καθεξής.
Υπάρχουν διάφοροι τύποι τελεστών που μπορείτε να χρησιμοποιήσετε όταν εκτελείτε αριθμητικές λειτουργίες, μερικοί από αυτούς παρατίθενται παρακάτω:
Υπάρχουν διάφοροι τύποι τελεστών για χρήση κατά την εκτέλεση αριθμητικών λειτουργιών, και μερικοί παρατίθενται εδώ:
| `+` | **Πρόσθεση**: Υπολογίζει το άθροισμα δύο αριθμών | `1 + 2 //αναμενόμενη απάντηση είναι 3` |
| `-` | **Αφαίρεση**: Υπολογίζει τη διαφορά δύο αριθμών | `1 - 2 //αναμενόμενη απάντηση είναι -1` |
| `*` | **Πολλαπλασιασμός**: Υπολογίζει το γινόμενο δύο αριθμών | `1 * 2 //αναμενόμενη απάντηση είναι 2` |
| `/` | **Διαίρεση**: Υπολογίζει το πηλίκο δύο αριθμών | `1 / 2 //αναμενόμενη απάντηση είναι 0.5` |
| `%` | **Υπόλοιπο**: Υπολογίζει το υπόλοιπο από τη διαίρεση δύο αριθμών | `1 % 2 //αναμενόμενη απάντηση είναι 1` |
✅ Δοκιμάστε το! Δοκιμάστε μια αριθμητική πράξη στην κονσόλα του browser σας. Τα αποτελέσματα σας εκπλήσσουν;
✅ Δοκιμάστε το! Δοκιμάστε μια αριθμητική πράξη στην κονσόλα του περιηγητή σας. Σας εκπλήσσουν τα αποτελέσματα;
### 🧮 **Έλεγχος Μαθηματικών Ικανοτήτων: Υπολογίζοντας με Αυτοπεποίθηση**
### Συμβολοσειρές
**Δοκιμάστε την κατανόησή σας στα μαθηματικά:**
- Ποια είναι η διαφορά μεταξύ του `/` (διαίρεση) και του `%` (υπόλοιπο);
- Μπορείτε να προβλέψετε ποιο είναι το αποτέλεσμα του `10 % 3`; (Υπόδειξη: δεν είναι 3,33...)
- Γιατί μπορεί να είναι χρήσιμος ο τελεστής υπολοίπου στον προγραμματισμό;
```mermaid
pie title "Χρήση Εργασιών Αριθμών JavaScript"
"Πρόσθεση (+)" : 35
"Αφαίρεση (-)" : 20
"Πολλαπλασιασμός (*)" : 20
"Διαίρεση (/)" : 15
"Υπόλοιπο (%)" : 10
```
> **Πρακτική συμβουλή**: Ο τελεστής υπολοίπου (%) είναι πολύ χρήσιμος για έλεγχο ανοι αριθμοί είναι ζυγοί ή μονάδες, για τη δημιουργία προτύπων ή για τη δραστηριότητα μέσα σε πίνακες!
### Συμβολοσειρές (Strings)
Στην JavaScript, τα δεδομένα κειμένου αναπαριστώνται ως συμβολοσειρές. Ο όρος "string" προέρχεται από την έννοια χαρακτήρων που συνδέονται διαδοχικά, όπως οι γραφείς στα μεσαιωνικά μοναστήρια, που ένωναν γράμματα γιανα σχηματίσουν λέξεις και προτάσεις στα χειρόγραφά τους.
Οι συμβολοσειρές είναι θεμελιώδεις για την ανάπτυξη ιστοσελίδων. Κάθε κομμάτι κειμένου που εμφανίζεται σε μια ιστοσελίδα – ονόματα χρηστών, ετικέτες κουμπιών, μηνύματα λάθους, περιεχόμενο – χειρίζεται ως δεδομένα τύπου συμβολοσειράς. Η κατανόηση των συμβολοσειρών είναι απαραίτητη για τη δημιουργία λειτουργικών διεπαφών χρήστη.
Οι συμβολοσειρές είναι σύνολα χαρακτήρων που περικλείονται μέσα σε μονά `'` ή διπλά `"` εισαγωγικά.
```javascript
'This is a string'
"This is also a string"
let myString = 'This is a string value stored in a variable';
```
**Κατανόηση αυτών των εννοιών:**
- **Χρησιμοποιεί** είτε απλά εισαγωγικά `'` είτε διπλά εισαγωγικά `"`γιανα ορίσει συμβολοσειρές
- **Αποθηκεύει** κείμενο που μπορεί να περιλαμβάνει γράμματα, αριθμούς και σύμβολα
- **Αναθέτει** τιμές συμβολοσειρών σε μεταβλητές για μελλοντική χρήση
- **Απαιτεί** εισαγωγικά γιανα διαχωρίσει το κείμενο από ονόματα μεταβλητών
Θυμηθείτε να χρησιμοποιείτε εισαγωγικά όταν γράφετε μια συμβολοσειρά, διαφορετικά η JavaScript θα υποθέσει ότι πρόκειται για όνομα μεταβλητής.
```mermaid
flowchart TD
A["📝 Συμβολοσειρές"] --> B["Απλά Εισαγωγικά"]
A --> C["Διπλά Εισαγωγικά"]
A --> D["Λεκτικά Πρότυπα"]
B --> B1["'Hello World'"]
C --> C1["\"Hello World\""]
D --> D1["`Hello \${name}`"]
E["Ενέργειες σε Συμβολοσειρές"] --> F["Συνένωση"]
E --> G["Εισαγωγή Προτύπων"]
E --> H["Μήκος & Μέθοδοι"]
F --> F1["'Hello' + ' ' + 'World'"]
G --> G1["`Hello \${firstName} \${lastName}`"]
H --> H1["myString.length"]
style A fill:#e3f2fd
style E fill:#fff3e0
style D fill:#e8f5e8
style G fill:#e8f5e8
```
### Μορφοποίηση Συμβολοσειρών
Στη JavaScript, τα κείμενα αναπαρίστανται ως συμβολοσειρές. Ο όρος "συμβολοσειρά" προέρχεται από την έννοια των χαρακτήρων που συνδέονται μεταξύ
Μπορείτε να πετύχετε τους στόχους μορφοποίησής σας με οποιαδήποτε μέθοδο, αλλά τα template literals θα σεβαστούν τυχόν κενά και αλλαγές γραμμής.
Η χειραγώγηση συμβολοσειρών σας επιτρέπει να συνδυάζετε στοιχεία κειμένου, να ενσωματώνετε μεταβλητές και να δημιουργείτε δυναμικό περιεχόμενο που αντιδρά στην κατάσταση του προγράμματος. Αυτή η τεχνική σας δίνει τη δυνατότητα να δημιουργείτε κείμενο προγραμματιστικά.
✅ Πότε θα χρησιμοποιούσατε ένα template literal αντί για ένα απλό string;
Συχνά χρειάζεται να ενώσετε πολλές συμβολοσειρές μεταξύ τους – αυτή η διαδικασία ονομάζεται συνένωση (concatenation).
Για να**συνδυάσετε** δύο ή περισσότερες συμβολοσειρές, ή να τις ενώσετε μαζί, χρησιμοποιήστε τον τελεστή `+`.
- **Συνδυάζει** πολλαπλές συμβολοσειρές χρησιμοποιώντας τον τελεστή `+`
- **Ενώνει** τις συμβολοσειρές απευθείας χωρίς κενά στο πρώτο παράδειγμα
- **Προσθέτει** χαρακτήρες κενών `" "` μεταξύ συμβολοσειρών για ευαναγνωσιμότητα
- **Εισάγει** σημεία στίξης όπως κόμματα για σωστή μορφοποίηση
✅ Γιατί το `1 + 1 = 2` στη JavaScript, αλλά `'1' + '1' = 11;` Σκέψου το. Τι γίνεται με το `'1' + 1`;
Τα**template literals** είναι ένας άλλος τρόπος μορφοποίησης συμβολοσειρών, εκτός από τα εισαγωγικά χρησιμοποιείται το backtick. Οτιδήποτε δεν είναι απλό κείμενο πρέπει να τοποθετείται μέσα σε δείκτες `${ }`. Αυτό περιλαμβάνει και μεταβλητές που μπορεί να είναι συμβολοσειρές.
```javascript
let myString1 = "Hello";
let myString2 = "World";
`${myString1} ${myString2}!` //Γειά σου Κόσμε!
`${myString1}, ${myString2}!` //Γειά σου, Κόσμε!
```
**Ας κατανοήσουμε κάθε μέρος:**
- **Χρησιμοποιεί** backticks `` ` `` αντί για κανονικά εισαγωγικά για τη δημιουργία template literals
- **Ενσωματώνει** μεταβλητές απευθείας χρησιμοποιώντας τη σύνταξη `${}`
- **Διατηρεί** ακριβώς τα κενά και τη μορφοποίηση όπως έχουν γραφτεί
- **Παρέχει** έναν πιο καθαρό τρόπο δημιουργίας σύνθετων συμβολοσειρών με μεταβλητές
Μπορείτε να πετύχετε τους στόχους μορφοποίησής σας με οποιαδήποτε μέθοδο, αλλά τα template literals σέβονται οποιαδήποτε κενά και αλλαγές γραμμών.
✅ Πότε θα χρησιμοποιούσατε ένα template literal αντί για μια απλή συμβολοσειρά;
### 🔤 **Έλεγχος Επάρκειας Συμβολοσειρών: Αυτοπεποίθηση στην Επεξεργασία Κειμένου**
**Αξιολογήστε τις δεξιότητές σας στις συμβολοσειρές:**
- Μπορείτε να εξηγήσετε γιατί `'1' + '1'` ισούται με `'11'` αντί για`2`;
- Ποια μέθοδο συμβολοσειράς βρίσκετε πιο κατανοητή: η συγκόλληση ή τα template literals;
- Τι συμβαίνει αν ξεχάσετε τα εισαγωγικά γύρω από μια συμβολοσειρά;
```mermaid
stateDiagram-v2
[*] --> PlainText: "Γειά"
[*] --> Variable: name = "Άλις"
PlainText --> Concatenated: + " " + name
Variable --> Concatenated
PlainText --> Template: `Γειά ${name}`
Variable --> Template
Concatenated --> Result: "Γειά Άλις"
Template --> Result
note right of Concatenated
Παραδοσιακή μέθοδος
Πιο εκτενής
end note
note right of Template
Σύγχρονη σύνταξη ES6
Πιο καθαρή & ευανάγνωστη
end note
```
> **Επαγγελματική συμβουλή**: Τα template literals προτιμώνται γενικά για σύνθετο οικοδόμημα συμβολοσειρών γιατί είναι πιο κατανοητά και χειρίζονται όμορφα συμβολοσειρές πολλών γραμμών!
### Booleans
Τα Booleans αντιπροσωπεύουν την πιο απλή μορφή δεδομένων: μπορούν να έχουν μόνο μία από δύο τιμές –`true` ή `false`. Αυτό το δυαδικό σύστημα λογικής προέρχεται από το έργο του George Boole, ενός μαθηματικού του 19ου αιώνα που ανέπτυξε την Boolean άλγεβρα.
Οι Booleans αντιπροσωπεύουν την απλούστερη μορφή δεδομένων: μπορούν να έχουν μόνο δύο τιμές –`true` ή `false`. Αυτό το δυαδικό σύστημα λογικής προέρχεται από το έργο του George Boole, μαθηματικού του 19ου αιώνα που ανέπτυξε τη Boolean άλγεβρα.
Παρά την απλότητά τους, τα booleans είναι απαραίτητα για τη λογική του προγράμματος. Επιτρέπουν στον κώδικα σας να λαμβάνει αποφάσεις βάσει συνθηκών –αν ένας χρήστης είναι συνδεδεμένος, αν πατήθηκε ένα κουμπί ή αν πληρούνται ορισμένα κριτήρια.
Παρά την απλότητά τους, οι boolean είναι απαραίτητοι για τη λογική προγράμματος. Δίνουν στον κώδικά σας τη δυνατότητα να παίρνει αποφάσεις βάσει συνθηκών –αν ένας χρήστης έχει συνδεθεί, αν πατήθηκε ένα κουμπί, ή αν πληρούνται ορισμένα κριτήρια.
Τα Booleans μπορούν να έχουν μόνο δύο τιμές: `true` ή `false`. Τα Booleans μπορούν να βοηθήσουν στη λήψη αποφάσεων σχετικά με το ποιες γραμμές κώδικα πρέπει να εκτελεστούν όταν πληρούνται ορισμένες συνθήκες. Σε πολλές περιπτώσεις, οι [τελεστές](../../../../2-js-basics/1-data-types) βοηθούν στον καθορισμό της τιμής ενός Boolean και συχνά θα παρατηρήσετε και θα γράψετε μεταβλητές που αρχικοποιούνται ή των οποίων οι τιμές ενημερώνονται με έναν τελεστή.
Οι Booleans μπορούν να έχουν μόνο δύο τιμές: `true` ή `false`. Μπορούν να βοηθήσουν στο να γίνονται αποφάσεις για το ποιοι κώδικες πρέπει να εκτελεστούν όταν πληρούνται συγκεκριμένες συνθήκες. Σε πολλές περιπτώσεις, [οι τελεστές](../../../../2-js-basics/1-data-types) βοηθούν στον καθορισμό της τιμής ενός Boolean και συχνά θα παρατηρήσετε ή θα γράψετε μεταβλητές να αρχικοποιούνται ή να ενημερώνουν τις τιμές τους με έναν τελεστή.
```javascript
let myTrueBool = true;
@ -223,42 +447,172 @@ let myFalseBool = false;
**Στο παραπάνω, έχουμε:**
- **Δημιουργήσει** μια μεταβλητή που αποθηκεύει την Boolean τιμή `true`
- **Δείξει** πώς να αποθηκεύσετε την Boolean τιμή `false`
- **Επιδείξει** πώς να αποθηκεύσουμε την Boolean τιμή `false`
- **Χρησιμοποιήσει** τις ακριβείς λέξεις-κλειδιά `true` και `false` (χωρίς εισαγωγικά)
- **Προετοιμάσει** αυτές τις μεταβλητές για χρήση σε συνθήκες
✅ Μια μεταβλητή μπορεί να θεωρηθεί 'truthy' αν αξιολογείται ως boolean `true`. Ενδιαφέρον είναι ότι, στη JavaScript, [όλες οι τιμές είναι truthy εκτός αν οριστούν ως falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
✅ Μια μεταβλητή θεωρείται 'truthy' αν αξιολογηθεί ως boolean `true`. Είναι ενδιαφέρον ότι στη JavaScript [όλες οι τιμές είναι truthy εκτός αν οριστούν ως falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
F["⚡ Βασικές Έννοιες"] --> F1["Ο τύπος έχει σημασία στη λειτουργία"]
F --> F2["Η JavaScript είναι δυναμικά τυποποιημένη"]
F --> F3["Οι μεταβλητές μπορούν να αλλάξουν τύπο"]
F --> F4["Η ονομασία είναι ευαίσθητη στο πεζό-κεφαλαίο"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
```
## Πρόκληση GitHub Copilot Agent 🚀
Χρησιμοποιήστε τη λειτουργία Agent γιανα ολοκληρώσετε την παρακάτω πρόκληση:
**Περιγραφή:** Δημιουργήστε έναν διαχειριστή προσωπικών πληροφοριών που να δείχνει όλους τους τύπους δεδομένων της JavaScript που μάθατε σε αυτό το μάθημα, ενώ χειρίζεται σενάρια πραγματικών δεδομένων.
**Περιγραφή:** Δημιουργήστε έναν διαχειριστή προσωπικών πληροφοριών που ναεπιδεικνύει όλους τους τύπους δεδομένων της JavaScript που μάθατε σε αυτό το μάθημα, διαχειριζόμενος πραγματικά σενάρια δεδομένων.
**Εντολή:** Δημιουργήστε ένα πρόγραμμα JavaScript που δημιουργεί ένα αντικείμενο προφίλ χρήστη που περιέχει: το όνομα ενός ατόμου (string), την ηλικία (number), την κατάσταση ως φοιτητής (boolean), αγαπημένα χρώματα ως array, και ένα αντικείμενο διεύθυνσης με ιδιότητες οδού, πόλης και ταχυδρομικού κώδικα. Συμπεριλάβετε συναρτήσεις γιανα εμφανίσετε τις πληροφορίες του προφίλ και να ενημερώσετε μεμονωμένα πεδία. Βεβαιωθείτε ότι δείχνετε τη σύνδεση strings, τα template literals, τις αριθμητικές πράξεις με την ηλικία και τη λογική boolean για την κατάσταση του φοιτητή.
**Οδηγία:** Δημιουργήστε ένα πρόγραμμα JavaScript που δημιουργεί ένα αντικείμενο προφίλ χρήστη που περιέχει: το όνομα του ατόμου (συμβολοσειρά), ηλικία (αριθμός), κατάσταση φοιτητή (boolean), αγαπημένα χρώματα ως πίνακα, και ένα αντικείμενο διεύθυνσης με ιδιότητες δρόμο, πόλη και ταχυδρομικό κώδικα. Συμπεριλάβετε συναρτήσεις εμφάνισης των πληροφοριών προφίλ και ενημέρωσης ξεχωριστών πεδίων. Βεβαιωθείτε ότι επιδεικνύετε συγκόλληση συμβολοσειρών, template literals, αριθμητικές πράξεις με την ηλικία, και λογική boolean για την κατάσταση φοιτητή.
Μάθετε περισσότερα για τη [λειτουργία agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) εδώ.
## 🚀 Πρόκληση
Η JavaScript έχει κάποιες συμπεριφορές που μπορεί να ξαφνιάσουν τους προγραμματιστές. Εδώ είναι ένα κλασικό παράδειγμα για εξερεύνηση: δοκιμάστε να πληκτρολογήσετε αυτό στην κονσόλα του browser σας: `let age = 1; let Age = 2; age == Age` και παρατηρήστε το αποτέλεσμα. Επιστρέφει `false`– μπορείτε να προσδιορίσετε γιατί;
Η JavaScript έχει ορισμένες συμπεριφορές που μπορούν να εκπλήξουν τους προγραμματιστές. Εδώ είναι ένα κλασικό παράδειγμα γιαδιερεύνηση: δοκιμάστε να γράψετε στην κονσόλα του browser: `let age = 1; let Age = 2; age == Age` και παρατηρήστε το αποτέλεσμα. Επιστρέφει `false`– μπορείτε να προσδιορίσετε γιατί;
Αυτό αντιπροσωπεύει μία από τις πολλές συμπεριφορές της JavaScript που αξίζει να κατανοήσετε. Η εξοικείωση με αυτές τις ιδιαιτερότητες θα σας βοηθήσει να γράφετε πιο αξιόπιστο κώδικα και να εντοπίζετε προβλήματα πιο αποτελεσματικά.
Αυτή είναι μία από τις πολλές συμπεριφορές της JavaScript που αξίζει να κατανοήσετε. Ηγνώση αυτών των ιδιαιτεροτήτων θα σας βοηθήσει να γράφετε πιο αξιόπιστο κώδικα και να εντοπίζετε σφάλματα πιο αποτελεσματικά.
## Ερωτήσεις μετά το μάθημα
[Ερωτήσεις μετά το μάθημα](https://ff-quizzes.netlify.app)
## Τεστ Μετά το Μάθημα
[Τεστ μετά το μάθημα](https://ff-quizzes.netlify.app)
## Ανασκόπηση & Αυτομελέτη
## Ανασκόπηση & Αυτοεκπαίδευση
Ρίξτε μια ματιά σε [αυτή τη λίστα ασκήσεων JavaScript](https://css-tricks.com/snippets/javascript/) και δοκιμάστε μία. Τι μάθατε;
Δείτε [αυτήν τη λίστα με ασκήσεις JavaScript](https://css-tricks.com/snippets/javascript/) και δοκιμάστε μία. Τι μάθατε;
- Ποιος τύπος δεδομένων σας εξέπληξε περισσότερο όσον αφορά τη συμπεριφορά του;
- Πόσο άνετα νιώθετε να εξηγείτε μεταβλητές έναντι σταθερών σε έναν φίλο;
- Ποιο είναι το πιο ενδιαφέρον πράγμα που ανακαλύψατε για το σύστημα τύπων της JavaScript;
- Ποια πραγματική εφαρμογή μπορείτε να φανταστείτε να δημιουργείτε με αυτά τα θεμελιώδη;
```mermaid
journey
title Το Ταξίδι της Αυτοπεποίθησής σου στο JavaScript
section Σήμερα
Συγκεχυμένος: 3: You
Περιέργεια: 4: You
Ενθουσιασμένος: 5: You
section Αυτή την Εβδομάδα
Εξάσκηση: 4: You
Κατανόηση: 5: You
Δημιουργία: 5: You
section Τον Επόμενο Μήνα
Επίλυση Προβλημάτων: 5: You
Διδασκαλία σε Άλλους: 5: You
Πραγματικά Έργα: 5: You
```
> 💡 **Έχετε χτίσει τα θεμέλια!** Η κατανόηση των τύπων δεδομένων είναι σαννα μαθαίνεις το αλφάβητο πριν γράψεις ιστορίες. Κάθε πρόγραμμα JavaScript που θα γράψετε ποτέ θα χρησιμοποιεί αυτές τις βασικές έννοιες. Τώρα έχετε τα δομικά στοιχεία γιανα δημιουργήσετε διαδραστικές ιστοσελίδες, δυναμικές εφαρμογές, και να λύσετε πραγματικά προβλήματα με κώδικα. Καλώς ορίσατε στον υπέροχο κόσμο της JavaScript! 🎉
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Ενώ επιδιώκουμε την ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται η επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρεξηγήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης.
# Βασικά Στοιχεία JavaScript: Μέθοδοι και Συναρτήσεις
> Σκίτσο από την [Tomomi Imura](https://twitter.com/girlie_mac)
## Ερωτηματολόγιο πριν το μάθημα
[Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app)
Η επαναλαμβανόμενη γραφή του ίδιου κώδικα είναι μία από τις πιο συνηθισμένες απογοητεύσεις στον προγραμματισμό. Οι συναρτήσεις λύνουν αυτό το πρόβλημα, επιτρέποντάς σας να πακετάρετε τον κώδικα σε επαναχρησιμοποιήσιμα μπλοκ. Σκεφτείτε τις συναρτήσεις σαν τα τυποποιημένα μέρη που έκαναν τη γραμμή συναρμολόγησης του Henry Ford επαναστατική – μόλις δημιουργήσετε ένα αξιόπιστο εξάρτημα, μπορείτε να το χρησιμοποιήσετε όπου χρειάζεται χωρίς να το ξαναφτιάξετε από την αρχή.
Η επανάληψη του ίδιου κώδικα ξανά και ξανά είναι μία από τις πιο συχνές απογοητεύσεις στον προγραμματισμό. Οι συναρτήσεις λύουν αυτό το πρόβλημα επιτρέποντάς σας να πακετάρετε τον κώδικα σε επαναχρησιμοποιούμενες μονάδες. Σκεφτείτε τις συναρτήσεις σαν τα τυποποιημένα μέρη που έκαναν τη γραμμή συναρμολόγησης του Henry Ford επαναστατική – μόλις δημιουργήσετε ένα αξιόπιστο συστατικό, μπορείτε να το χρησιμοποιήσετε όπου χρειάζεται χωρίς να το ξαναδημιουργήσετε από την αρχή.
Οι συναρτήσεις σας επιτρέπουν να ομαδοποιήσετε κομμάτια κώδικα ώστε να μπορείτε να τα επαναχρησιμοποιήσετε σε όλο το πρόγραμμά σας. Αντί να αντιγράφετε και να επικολλάτε την ίδια λογική παντού, μπορείτε να δημιουργήσετε μία συνάρτηση μία φορά και να την καλείτε όποτε χρειάζεται. Αυτή η προσέγγιση διατηρεί τον κώδικά σας οργανωμένο και κάνει τις ενημερώσεις πολύ πιο εύκολες.
Οι συναρτήσεις σας επιτρέπουν ναδένετε κομμάτια κώδικα ώστε να μπορείτε να τα χρησιμοποιείτε ξανά και ξανά σε όλο το πρόγραμμα σας. Αντί να αντιγράφετε και να επικολλάτε την ίδια λογική παντού, μπορείτε να δημιουργήσετε μια συνάρτηση μία φορά και να την καλείτε όποτε χρειάζεται. Αυτή η προσέγγιση κρατάει τον κώδικά σας οργανωμένο και κάνει τις ενημερώσεις πολύ πιο εύκολες.
Σε αυτό το μάθημα, θα μάθετε πώς να δημιουργείτε τις δικές σας συναρτήσεις, να περνάτε πληροφορίες σε αυτές και να λαμβάνετε χρήσιμα αποτελέσματα πίσω. Θα ανακαλύψετε τη διαφορά μεταξύ συναρτήσεων και μεθόδων, θα μάθετε σύγχρονες συντακτικές προσεγγίσεις και θα δείτε πώς οι συναρτήσεις μπορούν να συνεργαστούν με άλλες συναρτήσεις. Θα χτίσουμε αυτές τις έννοιες βήμα προς βήμα.
Σε αυτό το μάθημα, θα μάθετε πώς να δημιουργείτε τις δικές σας συναρτήσεις, να περνάτε πληροφορίες σε αυτές και ναπαίρνετε χρήσιμα αποτελέσματα πίσω. Θα ανακαλύψετε τη διαφορά μεταξύ συναρτήσεων και μεθόδων, θα μάθετε σύγχρονες συντακτικές προσεγγίσεις, και θα δείτε πώς οι συναρτήσεις μπορούν ναλειτουργούν με άλλες συναρτήσεις. Θα χτίσουμε αυτές τις έννοιες βήμα προς βήμα.
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Μέθοδοι και Συναρτήσεις")
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
> 🎥 Κάντε κλικ στην παραπάνω εικόνα για ένα βίντεο σχετικά με τις μεθόδους και τις συναρτήσεις.
> 🎥 Κλικάρετε την εικόνα παραπάνωγια ένα βίντεο σχετικά με τις μεθόδους και τις συναρτήσεις.
> Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
```mermaid
mindmap
root((Συναρτήσεις JavaScript))
Βασικές Έννοιες
Δήλωση
Παραδοσιακή σύνταξη
Σύνταξη βέλους συνάρτησης
Κλήση
Χρήση παρενθέσεων
Υποχρεωτικές παρενθέσεις
Παράμετροι
Τιμές Εισόδου
Πολλαπλές παράμετροι
Προεπιλεγμένες τιμές
Ορίσματα
Τιμές που δίνονται
Μπορεί να είναι οποιουδήποτε τύπου
Τιμές Επιστροφής
Δεδομένα Εξόδου
δήλωση return
Έξοδος από συνάρτηση
Χρήση Αποτελεσμάτων
Αποθήκευση σε μεταβλητές
Αλυσίδωση συναρτήσεων
Προηγμένα Πρότυπα
Ανώτερης Τάξης
Συναρτήσεις ως παράμετροι
Ανάκληση (callbacks)
Ανώνυμες
Δεν απαιτείται όνομα
Ορισμός εντός γραμμής
```
## Συναρτήσεις
Μια συνάρτηση είναι ένα αυτοτελές μπλοκ κώδικα που εκτελεί μια συγκεκριμένη εργασία. Ενσωματώνει λογική που μπορείτε να εκτελέσετε όποτε χρειάζεται.
Μια συνάρτηση είναι ένα αυτόνομο μπλοκ κώδικα που εκτελεί μια συγκεκριμένη εργασία. Περιλαμβάνει λογική που μπορείτε να εκτελέσετε όποτε χρειάζεται.
Αντί να γράφετε τον ίδιο κώδικα πολλές φορές σε όλο το πρόγραμμά σας, μπορείτε να τον πακετάρετε σε μια συνάρτηση και να την καλείτε όποτε τη χρειάζεστε. Αυτή η προσέγγιση διατηρεί τον κώδικά σας καθαρό και κάνει τις ενημερώσεις πολύ πιο εύκολες. Σκεφτείτε την πρόκληση συντήρησης αν χρειαζόταν να αλλάξετε λογική που ήταν διασκορπισμένη σε 20 διαφορετικά σημεία του κώδικα.
Αντί να γράφετε τον ίδιο κώδικα πολλές φορές σε όλο το πρόγραμμα σας, μπορείτε να τον πακετάρετε σε μια συνάρτηση και να την καλείτε όποτε τη χρειάζεστε. Αυτή η προσέγγιση κρατάει τον κώδικά σας καθαρό και κάνει τις ενημερώσεις πιο εύκολες. Σκεφτείτε την πρόκληση συντήρησης ανέπρεπε να αλλάξετε λογική που εκτείνεται σε 20 διαφορετικές θέσεις στη βάση κώδικά σας.
Η περιγραφική ονομασία των συναρτήσεών σας είναι απαραίτητη. Μια καλά ονομασμένη συνάρτηση επικοινωνεί ξεκάθαρα τον σκοπό της – όταν βλέπετε `cancelTimer()`, καταλαβαίνετε αμέσως τι κάνει, όπως ένα κουμπί με σαφή ετικέτα σας λέει ακριβώς τι θα συμβεί όταν το πατήσετε.
Η ονομασία των συναρτήσεών σας με περιγραφικό τρόπο είναι κρίσιμη. Μια καλοορισμένη συνάρτηση επικοινωνεί καθαρά τον σκοπό της – όταν βλέπετε `cancelTimer()`, καταλαβαίνετε αμέσως τι κάνει, ακριβώς όπως ένα κουμπί με ξεκάθαρη ετικέτα σας δείχνει τι ακριβώς θα συμβεί όταν το πατήσετε.
## Δημιουργία και κλήση συνάρτησης
## Δημιουργία και κλήση μιας συνάρτησης
Ας εξετάσουμε πώς να δημιουργήσουμε μια συνάρτηση. Η σύνταξη ακολουθεί ένα συνεπές μοτίβο:
Ας εξετάσουμε πώς να δημιουργήσουμε μια συνάρτηση. Η σύνταξη ακολουθεί ένα σταθερό μοτίβο:
```javascript
function nameOfFunction() { // function definition
// function definition/body
function nameOfFunction() { // ορισμός συνάρτησης
// ορισμός/σώμα συνάρτησης
}
```
Ας το αναλύσουμε:
- Η λέξη-κλειδί `function` λέει στη JavaScript "Γεια, δημιουργώ μια συνάρτηση!"
- Το`nameOfFunction` είναι το σημείο όπου δίνετε στη συνάρτησή σας ένα περιγραφικό όνομα
- Οι παρενθέσεις `()` είναι το σημείο όπου μπορείτε να προσθέσετε παραμέτρους (θα το δούμε σύντομα)
- Οι αγκύλες `{}` περιέχουν τον πραγματικό κώδικα που εκτελείται όταν καλείτε τη συνάρτηση
Αναλύοντας:
- Η λέξη-κλειδί `function` λέει στη JavaScript "Ε, δημιουργώ μια συνάρτηση!"
- Το`nameOfFunction` είναι όπου δίνετε στη συνάρτηση σας ένα περιγραφικό όνομα
- Οι παρενθέσεις `()` είναι εκεί όπου μπορείτε να προσθέσετε παραμέτρους (θα φτάσουμε σε αυτό σύντομα)
- Οι αγκύλες `{}` περιέχουν τον κώδικα που εκτελείται όταν καλείτε τη συνάρτηση
Ας δημιουργήσουμε μια απλή συνάρτηση χαιρετισμού γιανα το δούμε στην πράξη:
@ -59,34 +108,57 @@ function displayGreeting() {
}
```
Αυτή η συνάρτηση εκτυπώνει "Hello, world!" στην κονσόλα. Μόλις την ορίσετε, μπορείτε να τη χρησιμοποιήσετε όσες φορές χρειαστεί.
Αυτή η συνάρτηση τυπώνει "Hello, world!" στην κονσόλα. Μόλις την ορίσετε, μπορείτε να τη χρησιμοποιήσετε όσες φορές χρειάζεται.
Για να εκτελέσετε (ή "καλέσετε") τη συνάρτησή σας, γράψτε το όνομά της ακολουθούμενο από παρενθέσεις. Η JavaScript σας επιτρέπει να ορίσετε τη συνάρτηση πριν ή μετά την κλήση της – η μηχανή της JavaScript θα χειριστεί τη σειρά εκτέλεσης.
Για να εκτελέσετε (ή να "καλέσετε") τη συνάρτηση σας, γράψτε το όνομά της ακολουθούμενο από παρενθέσεις. Η JavaScript επιτρέπει να ορίσετε τη συνάρτηση πριν ή μετά την κλήση της – η μηχανή της JavaScript θα χειριστεί τη σειρά εκτέλεσης.
```javascript
// calling our function
// καλώντας τη συνάρτησή μας
displayGreeting();
```
Όταν εκτελέσετε αυτή τη γραμμή, εκτελεί όλο τον κώδικα μέσα στη συνάρτηση `displayGreeting`, εμφανίζοντας "Hello, world!" στην κονσόλα του προγράμματος περιήγησης. Μπορείτε να καλέσετε αυτή τη συνάρτηση επανειλημμένα.
> **Σημείωση:** Έχετε χρησιμοποιήσει **μεθόδους** σε όλη τη διάρκεια αυτών των μαθημάτων. Το`console.log()` είναι μια μέθοδος – ουσιαστικά μια συνάρτηση που ανήκει στο αντικείμενο `console`. Η βασική διαφορά είναι ότι οι μέθοδοι συνδέονται με αντικείμενα, ενώ οι συναρτήσεις είναι ανεξάρτητες. Πολλοί προγραμματιστές χρησιμοποιούν αυτούς τους όρους εναλλακτικά σε καθημερινές συζητήσεις.
Όταν τρέχετε αυτή τη γραμμή, εκτελεί όλο τον κώδικα μέσα στη συνάρτηση `displayGreeting`, εμφανίζοντας "Hello, world!" στην κονσόλα του browser σας. Μπορείτε να καλέσετε αυτή τη συνάρτηση επανειλημμένα.
### 🧠 **Έλεγχος Βασικών Συναρτήσεων: Δημιουργία Πρώτων Συναρτήσεων**
**Ας δούμε πώς νιώθετε σχετικά με τις βασικές συναρτήσεις:**
- Μπορείτε να εξηγήσετε γιατί χρησιμοποιούμε αγκύλες `{}` στον ορισμό συναρτήσεων;
- Τι συμβαίνει αν γράψετε `displayGreeting` χωρίς τις παρενθέσεις;
- Γιατί μπορεί να θέλετε να καλέσετε την ίδια συνάρτηση πολλές φορές;
> **Σημείωση:** Έχετε χρησιμοποιήσει **μεθόδους** καθ’ όλη τη διάρκεια αυτών των μαθημάτων. Η`console.log()` είναι μέθοδος – ουσιαστικά μια συνάρτηση που ανήκει στο αντικείμενο `console`. Η βασική διαφορά είναι ότι οι μέθοδοι συνδέονται με αντικείμενα, ενώ οι συναρτήσεις λειτουργούν ανεξάρτητα. Πολλοί προγραμματιστές χρησιμοποιούν αυτούς τους όρους εναλλακτικά σε μη επίσημες συζητήσεις.
### Καλές πρακτικές για συναρτήσεις
Ακολουθούν μερικές συμβουλές γιανα γράφετε καλές συναρτήσεις:
Εδώ είναι μερικές συμβουλές γιανα γράφετε καλές συναρτήσεις:
- Δώστε στις συναρτήσεις σας σαφή, περιγραφικά ονόματα –ο μελλοντικός σας εαυτός θα σας ευχαριστήσει!
- Χρησιμοποιήστε **camelCasing**για ονόματα με πολλές λέξεις (όπως `calculateTotal` αντί για`calculate_total`)
- Κρατήστε κάθε συνάρτηση επικεντρωμένη στο να κάνει ένα πράγμα καλά
- Δώστε στις συναρτήσεις σας σαφή, περιγραφικά ονόματα –το μελλοντικό σας εγώ θα σας ευχαριστεί!
- Χρησιμοποιήστε **camelCase** για ονόματα πολλών λέξεων (π.χ.,`calculateTotal` αντί για`calculate_total`)
- Κρατήστε κάθε συνάρτηση εστιασμένη στο να κάνει καλά ένα πράγμα
## Περνώντας πληροφορίες σε μια συνάρτηση
Η συνάρτηση `displayGreeting` είναι περιορισμένη – μπορεί να εμφανίσει μόνο "Hello, world!" για όλους. Οι παράμετροι μας επιτρέπουν να κάνουμε τις συναρτήσεις πιο ευέλικτες και χρήσιμες.
Η συνάρτηση `displayGreeting`μας είναι περιορισμένη – μπορεί μόνο να εμφανίζει "Hello, world!" για όλους. Οι παράμετροι μας επιτρέπουν να κάνουμε τις συναρτήσεις πιο ευέλικτες και χρήσιμες.
**Παράμετροι** λειτουργούν σαν θέσεις όπου μπορείτε να εισάγετε διαφορετικές τιμές κάθε φορά που χρησιμοποιείτε τη συνάρτηση. Με αυτόν τον τρόπο, η ίδια συνάρτηση μπορεί να λειτουργήσει με διαφορετικές πληροφορίες σε κάθε κλήση.
Οι**παράμετροι** λειτουργούν σαν θέσεις όπου μπορείτε να εισάγετε διαφορετικές τιμές κάθε φορά που χρησιμοποιείτε τη συνάρτηση. Έτσι, η ίδια συνάρτηση μπορεί να δουλεύει με διαφορετικές πληροφορίες σε κάθε κλήση.
Καταγράφετε τις παραμέτρους μέσα στις παρενθέσεις όταν ορίζετε τη συνάρτηση, χωρίζοντας πολλαπλές παραμέτρους με κόμματα:
Καταχωρείτε τις παραμέτρους μέσα στις παρενθέσεις όταν ορίζετε τη συνάρτηση, χωρίζοντας πολλαπλές παραμέτρους με κόμμα:
```javascript
function name(param, param2, param3) {
@ -94,9 +166,9 @@ function name(param, param2, param3) {
}
```
Κάθε παράμετρος λειτουργεί σαν θέση – όταν κάποιος καλεί τη συνάρτησή σας, θα παρέχει πραγματικές τιμές που θα τοποθετηθούν σε αυτά τα σημεία.
Κάθε παράμετρος λειτουργεί σαν θέση – όταν κάποιος καλεί τη συνάρτησή σας, παρέχει πραγματικές τιμές που τοποθετούνται σε αυτές τις θέσεις.
Ας ενημερώσουμε τη συνάρτηση χαιρετισμού μας ώστε να δέχεται το όνομα κάποιου:
Ας ενημερώσουμε τη συνάρτηση χαιρετισμού ώστε να δέχεται ένα όνομα:
```javascript
function displayGreeting(name) {
@ -105,22 +177,44 @@ function displayGreeting(name) {
}
```
Παρατηρήστε πώς χρησιμοποιούμε ανάποδα εισαγωγικά (`` ` ``) και `${}` γιανα εισάγουμε το όνομα απευθείας στο μήνυμα – αυτό ονομάζεται template literal και είναι ένας πολύ χρήσιμος τρόπος γιανα δημιουργείτε συμβολοσειρές με μεταβλητές.
Παρατηρήστε πώς χρησιμοποιούμε το χαρακτήρα backticks (`` ` ``) και `${}` γιανα εισάγουμε το όνομα κατευθείαν στο μήνυμα – αυτό ονομάζεται πρότυπο συμβολοσειράς (template literal) και είναι πολύ βολικός τρόποςνα δημιουργείτε συμβολοσειρές με μεταβλητές ενωμένες.
Τώρα, όταν καλούμε τη συνάρτηση μας, μπορούμε να περάσουμε οποιοδήποτε όνομα:
Τώρα όταν καλούμε τη συνάρτηση, μπορούμε να περάσουμε οποιοδήποτε όνομα:
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
// εμφανίζει "Γεια σου, Christopher!" όταν εκτελείται
```
Η JavaScript παίρνει τη συμβολοσειρά `'Christopher'`, την αναθέτει στην παράμετρο `name` και δημιουργεί το εξατομικευμένο μήνυμα "Hello, Christopher!"
Η JavaScript παίρνει τη συμβολοσειρά `'Christopher'`, την αναθέτει στην παράμετρο `name`, και δημιουργεί το προσωποποιημένο μήνυμα "Hello, Christopher!"
```mermaid
flowchart LR
A["🎯 Κλήση Συνάρτησης"] --> B["📥 Παράμετροι"]
B --> C["⚙️ Σώμα Συνάρτησης"]
C --> D["📤 Αποτέλεσμα"]
A1["displayGreeting('Alice')"] --> A
B1["name = 'Alice'"] --> B
C1["Πρότυπο κειμένου\n\`Γειά σου, \${name}!\`"] --> C
D1["'Γειά σου, Alice!'"] --> D
E["🔄 Τύποι Παραμέτρων"] --> E1["Συμβολοσειρές"]
E --> E2["Αριθμοί"]
E --> E3["Λογικές τιμές"]
E --> E4["Αντικείμενα"]
E --> E5["Συναρτήσεις"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#f3e5f5
```
## Προεπιλεγμένες τιμές
Τι γίνεται αν θέλουμε να κάνουμε κάποιες παραμέτρους προαιρετικές; Εκεί είναι χρήσιμες οι προεπιλεγμένες τιμές!
Τι γίνεται αν θέλουμε μερικές παραμέτρους να είναι προαιρετικές; Εκεί έρχονταιοι προεπιλεγμένες τιμές!
Ας πούμε ότι θέλουμε οι άνθρωποι να μπορούν να προσαρμόσουν τη λέξη χαιρετισμού, αλλά αν δεν καθορίσουν μία, θα χρησιμοποιήσουμε απλώς το "Hello" ως εναλλακτική. Μπορείτε να ορίσετε προεπιλεγμένες τιμές χρησιμοποιώντας το ίσον, όπως ακριβώς ορίζετε μια μεταβλητή:
Ας πούμε ότι θέλουμε οιχρήστες να μπορούν να προσαρμόζουν τον χαιρετισμό, αλλά αν δεν καθορίσουν κάποιο, θα χρησιμοποιούμε το "Hello" ως εναλλακτική λύση. Μπορείτε να ορίσετε προεπιλεγμένες τιμές με το σύμβολο ισότητας, ακριβώς όπως καθορίζετε μια μεταβλητή:
```javascript
function displayGreeting(name, salutation='Hello') {
@ -128,35 +222,63 @@ function displayGreeting(name, salutation='Hello') {
}
```
Εδώ, το `name` είναι ακόμα απαραίτητο, αλλά το `salutation` έχει μια εφεδρική τιμή `'Hello'`αν κανείς δεν παρέχει διαφορετικό χαιρετισμό.
Εδώ, το `name` είναι ακόμα απαιτούμενο, αλλά το `salutation` έχει εφεδρική τιμή `'Hello'`αν κανείς δεν δώσει διαφορετικό χαιρετισμό.
Τώρα μπορούμε να καλέσουμε αυτή τη συνάρτηση με δύο διαφορετικούς τρόπους:
Τώρα μπορούμε να καλέσουμε τη συνάρτηση με δύο τρόπους:
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher"
// εμφανίζει "Γεια σου, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
// εμφανίζει "Γεια, Christopher"
```
Στην πρώτη κλήση, η JavaScript χρησιμοποιεί το προεπιλεγμένο "Hello" αφού δεν καθορίσαμε χαιρετισμό. Στη δεύτερη κλήση, χρησιμοποιεί το προσαρμοσμένο "Hi". Αυτή η ευελιξία κάνει τις συναρτήσεις προσαρμόσιμες σε διαφορετικά σενάρια.
Στην πρώτη κλήση, η JavaScript χρησιμοποιεί το προεπιλεγμένο "Hello" αφού δεν καθορίσαμε χαιρετισμό. Στη δεύτερη κλήση, χρησιμοποιεί το δικό μας "Hi" αντί γι’ αυτό. Αυτή η ευελιξία κάνει τις συναρτήσεις προσαρμόσιμες σε διαφορετικά σενάρια.
### 🎛️ **Έλεγχος Παραμέτρων: Κάνοντας τις Συναρτήσεις Ευέλικτες**
**Δοκιμάστε την κατανόηση σας για τις παραμέτρους:**
- Ποια είναι η διαφορά μεταξύ παραμέτρου και ορίσματος;
- Γιατί οι προεπιλεγμένες τιμές είναι χρήσιμες στον πραγματικό προγραμματισμό;
- Μπορείτε να προβλέψετε τι συμβαίνει αν δώσετε περισσότερα ορίσματα από παραμέτρους;
> **Επαγγελματική συμβουλή**: Οι προεπιλεγμένες παράμετροι κάνουν τις συναρτήσεις σας πιο φιλικές προς τον χρήστη. Οι χρήστες μπορούν να ξεκινήσουν γρήγορα με λογικές προεπιλογές, αλλά και να προσαρμόσουν όταν χρειάζεται!
## Τιμές επιστροφής
Οι συναρτήσεις μας μέχρι τώρα απλώς εκτύπωναν μηνύματα στην κονσόλα, αλλά τι γίνεται αν θέλετε μια συνάρτηση να υπολογίσει κάτι και να σας επιστρέψει το αποτέλεσμα;
Μέχρι τώρα οι συναρτήσεις μας απλώς τύπωναν μηνύματα στην κονσόλα, αλλά τι γίνεται αν θέλετε μια συνάρτηση να υπολογίζει κάτι και να σας επιστρέφει το αποτέλεσμα;
Εκεί έρχονται οι**τιμές επιστροφής**. Αντί να εμφανίζει απλώς κάτι, μια συνάρτηση μπορεί να σας επιστρέψει μια τιμή που μπορείτε να αποθηκεύσετε σε μια μεταβλητή ή να χρησιμοποιήσετε σε άλλα μέρη του κώδικα σας.
Εκεί έρχονται οι**τιμές επιστροφής**. Αντί να εμφανίζει κάτι απλά, μια συνάρτηση μπορεί να σας δώσει πίσω μια τιμή που μπορείτε να αποθηκεύσετε σε μια μεταβλητή ή να χρησιμοποιήσετε σε άλλα μέρη του κώδικα.
Για να στείλετε μια τιμή πίσω, χρησιμοποιείτε τη λέξη-κλειδί `return` ακολουθούμενη από ό,τι θέλετε να επιστρέψετε:
Για ναεπιστρέψετε μια τιμή, χρησιμοποιείτε τη λέξη-κλειδί `return`, ακολουθούμενη από ό,τι θέλετε να επιστρέψετε:
```javascript
return myVariable;
```
Κάτι σημαντικό: όταν μια συνάρτηση φτάσει σε μια δήλωση `return`, σταματά αμέσως να εκτελείται και στέλνει αυτή την τιμή πίσω σε όποιον την κάλεσε.
Να κάτι σημαντικό: όταν μια συνάρτηση φτάσει σε μια δήλωση `return`, σταματά άμεσα την εκτέλεση και στέλνει αυτή την τιμή πίσω σε όποιον την κάλεσε.
Ας τροποποιήσουμε τη συνάρτηση χαιρετισμού μας ώστε να επιστρέφει το μήνυμα αντί να το εκτυπώνει:
Ας τροποποιήσουμε τη συνάρτηση χαιρετισμού ώστε να επιστρέφει το μήνυμα αντί να το τυπώνει:
```javascript
function createGreetingMessage(name) {
@ -165,7 +287,7 @@ function createGreetingMessage(name) {
}
```
Τώρα, αντί να εκτυπώνει το χαιρετισμό, αυτή η συνάρτηση δημιουργεί το μήνυμα και μας το επιστρέφει.
Τώρα αντί να εκτυπώνει τον χαιρετισμό, αυτή η συνάρτηση δημιουργεί το μήνυμα και το επιστρέφει σε εμάς.
Για να χρησιμοποιήσουμε την επιστρεφόμενη τιμή, μπορούμε να την αποθηκεύσουμε σε μια μεταβλητή όπως οποιαδήποτε άλλη τιμή:
@ -173,15 +295,53 @@ function createGreetingMessage(name) {
Τώρα το `greetingMessage` περιέχει "Hello, Christopher" και μπορούμε να το χρησιμοποιήσουμε οπουδήποτε στον κώδικα μας –γιανα το εμφανίσουμε σε μια ιστοσελίδα, να το συμπεριλάβουμε σε ένα email ή να το περάσουμε σε μια άλλη συνάρτηση.
Τώρα η `greetingMessage` περιέχει το "Hello, Christopher" και μπορούμε να το χρησιμοποιήσουμε οπουδήποτε στον κώδικα –γιανα το εμφανίσουμε σε μια ιστοσελίδα, να το συμπεριλάβουμε σε ένα email ή να το περάσουμε σε άλλη συνάρτηση.
**Αξιολογήστε την κατανόηση σας στις τιμές επιστροφής:**
- Τι συμβαίνει στον κώδικα μετά από μια δήλωση `return` σε μια συνάρτηση;
- Γιατί η επιστροφή τιμών συχνά είναι καλύτερη από το απλό τύπωμα στην κονσόλα;
- Μπορεί μια συνάρτηση να επιστρέφει διαφορετικούς τύπους τιμών (συμβολοσειρά, αριθμό, boolean);
```mermaid
pie title "Συνηθισμένοι Τύποι Τιμών Επιστροφής"
"Συμβολοσειρές" : 30
"Αριθμοί" : 25
"Αντικείμενα" : 20
"Λογικές Τιμές" : 15
"Πίνακες" : 10
```
> **Κεντρική ιδέα**: Οι συναρτήσεις που επιστρέφουν τιμές είναι πιο ευέλικτες επειδή ο καλών αποφασίζει τι θα κάνει με το αποτέλεσμα. Αυτό κάνει τον κώδικα σας πιο αρθρωτό και επαναχρησιμοποιήσιμο!
## Συναρτήσεις ως παράμετροι για συναρτήσεις
## Συναρτήσεις ως παράμετροι σε συναρτήσεις
Οι συναρτήσεις μπορούν να περαστούν ως παράμετροι σε άλλες συναρτήσεις. Ενώ αυτή η έννοια μπορεί αρχικά να φαίνεται περίπλοκη, είναι ένα ισχυρό χαρακτηριστικό που επιτρέπει ευέλικτα πρότυπα προγραμματισμού.
Μπορείτε να περάσετε συναρτήσεις ως παραμέτρους σε άλλες συναρτήσεις. Αν και αυτή η ιδέα μπορεί αρχικά να φαίνεται περίπλοκη, είναι μια ισχυρή δυνατότητα που επιτρέπει ευέλικτα προγραμματιστικά πρότυπα.
Αυτό το πρότυπο είναι πολύ συνηθισμένο όταν θέλετε να πείτε "όταν συμβεί κάτι, κάνε αυτό το άλλο πράγμα." Για παράδειγμα, "όταν τελειώσει ο χρονοδιακόπτης, εκτέλεσε αυτόν τον κώδικα" ή "όταν ο χρήστης κάνει κλικ στο κουμπί, κάλεσε αυτή τη συνάρτηση."
Αυτή η μορφή είναι πολύ συνήθης όταν θέλετε να πείτε "όταν κάτι συμβεί, κάνε αυτό το άλλο πράγμα". Για παράδειγμα, "όταν τελειώσει ο χρονοδιακόπτης, εκτέλεσε αυτόν τον κώδικα" ή "όταν ο χρήστης πατήσει το κουμπί, κάλεσε αυτή τη συνάρτηση."
Ας δούμε το `setTimeout`, που είναι μια ενσωματωμένη συνάρτηση που περιμένει ένα συγκεκριμένο χρονικό διάστημα και στη συνέχεια εκτελεί κάποιον κώδικα. Πρέπει να της πούμε ποιον κώδικα να εκτελέσει – τέλεια περίπτωση γιανα περάσουμε μια συνάρτηση!
Ας δούμε το `setTimeout`, μια ενσωματωμένη συνάρτηση που περιμένει ένα χρονικό διάστημα και στη συνέχεια εκτελεί έναν κώδικα. Πρέπει να της πούμε ποιον κώδικα να τρέξει – τέλειο παράδειγμαγιανα περάσουμε μια συνάρτηση!
Δοκιμάστε αυτόν τον κώδικα – μετά από 3 δευτερόλεπτα, θα δείτε ένα μήνυμα:
Παρατηρήστε πώς περνάμε το`displayDone` (χωρίς παρενθέσεις) στο `setTimeout`. Δεν καλούμε τη συνάρτηση μόνοι μας – την παραδίδουμε στο `setTimeout` και λέμε "κάλεσε αυτή σε 3 δευτερόλεπτα."
Παρατηρήστε πως περνάμε τη`displayDone` (χωρίς παρενθέσεις) στο `setTimeout`. Δεν καλούμε εμείς τη συνάρτηση – την παραδίδουμε στο `setTimeout` και του λέμε "κάνε κλήση σε 3 δευτερόλεπτα."
### Ανώνυμες συναρτήσεις
Μερικές φορές χρειάζεστε μια συνάρτηση για ένα μόνο πράγμα και δεν θέλετε να της δώσετε όνομα. Σκεφτείτε το –αν χρησιμοποιείτε μια συνάρτηση μόνο μία φορά, γιατί να γεμίσετε τον κώδικα σας με ένα επιπλέον όνομα;
Μερικές φορές χρειάζεστε μια συνάρτηση για ένα και μόνο πράγμα και δεν θέλετε να της δώσετε όνομα. Σκεφτείτε το –αν χρησιμοποιείτε μια συνάρτηση μόνο μία φορά, γιατί να γεμίσετε τον κώδικά σας με ένα επιπλέον όνομα;
Η JavaScript σας επιτρέπει να δημιουργείτε **ανώνυμες συναρτήσεις** – συναρτήσεις χωρίς ονόματα που μπορείτε να ορίσετε ακριβώς εκεί που τις χρειάζεστε.
Η JavaScript σας επιτρέπει να δημιουργήσετε **ανώνυμες συναρτήσεις** – συναρτήσεις χωρίς όνομα που μπορείτε να ορίσετε ακριβώς εκεί που τις χρειάζεστε.
Να πώς μπορούμε να ξαναγράψουμε το παράδειγμα του χρονοδιακόπτη χρησιμοποιώντας μια ανώνυμη συνάρτηση:
Ας ξαναγράψουμε το παράδειγμα με το χρονόμετρο χρησιμοποιώντας ανώνυμη συνάρτηση:
```javascript
setTimeout(function() {
@ -209,15 +369,15 @@ setTimeout(function() {
}, 3000);
```
Αυτό επιτυγχάνει το ίδιο αποτέλεσμα, αλλά η συνάρτηση ορίζεται απευθείας μέσα στην κλήση του `setTimeout`, εξαλείφοντας την ανάγκη για ξεχωριστή δήλωση συνάρτησης.
Αυτό πετυχαίνει το ίδιο αποτέλεσμα, αλλά η συνάρτηση ορίζεται απευθείας μέσα στην κλήση του `setTimeout`, εξαλείφοντας την ανάγκη για ξεχωριστή δήλωση συνάρτησης.
### Συναρτήσεις με βέλη (Fat arrow functions)
### Συναρτήσεις βέλους (arrow functions)
Η σύγχρονη JavaScript έχει έναν ακόμη πιο σύντομο τρόπο να γράφετε συναρτήσεις, που ονομάζεται **arrow functions**. Χρησιμοποιούν το `=>` (που μοιάζει με βέλος – το πιάσατε;) και είναι πολύ δημοφιλείς στους προγραμματιστές.
Η σύγχρονη JavaScript έχει έναν ακόμη πιο σύντομο τρόπο να γράφετε συναρτήσεις που ονομάζονται **συναρτήσεις βέλους**. Χρησιμοποιούν το `=>` (που μοιάζει με βέλος – καταλαβαίνετε;) και είναι πολύ δημοφιλείς στους προγραμματιστές.
Οι συναρτήσεις με βέλη σας επιτρέπουν να παραλείψετε τη λέξη-κλειδί `function` και να γράψετε πιο συνοπτικό κώδικα.
Οι συναρτήσεις βέλους σας επιτρέπουν να παραλείψετε τη λέξη-κλειδί `function` και να γράψετε πιο συμπαγή κώδικα.
Να το παράδειγμα του χρονοδιακόπτη μας χρησιμοποιώντας μια συνάρτηση με βέλος:
Εδώ είναι το παράδειγμά μας με το χρονόμετρο χρησιμοποιώντας συνάρτηση βέλους:
```javascript
setTimeout(() => {
@ -225,11 +385,64 @@ setTimeout(() => {
}, 3000);
```
Το`()` είναι το σημείο όπου θα πήγαιναν οι παράμετροι (κενό σε αυτή την περίπτωση), μετά έρχεται το βέλος `=>`, και τέλος το σώμα της συνάρτησης στις αγκύλες. Αυτό παρέχει την ίδια λειτουργικότητα με πιο συνοπτική σύνταξη.
Οι`()` είναι το σημείο όπου θα πήγαιναν οι παράμετροι (άδειο σε αυτή την περίπτωση), ακολουθεί το βέλος `=>`, και τέλος το σώμα της συνάρτησης μέσα σε αγκύλες. Αυτό παρέχει την ίδια λειτουργικότητα με πιο συνοπτική σύνταξη.
```mermaid
flowchart LR
A["📝 Στυλ Συναρτήσεων"] --> B["Παραδοσιακό"]
A --> C["Βέλος"]
A --> D["Ανώνυμο"]
B --> B1["function name() {}"]
B --> B2["Ανυψωμένη"]
B --> B3["Ονομασμένη"]
C --> C1["const name = () => {}"]
C --> C2["Συνοπτική σύνταξη"]
C --> C3["Μοντέρνο στυλ"]
D --> D1["function() {}"]
D --> D2["Χωρίς όνομα"]
D --> D3["Χρήση μίας φοράς"]
E["⏰ Πότε να Χρησιμοποιήσετε"] --> E1["Παραδοσιακό: Επαναχρησιμοποιήσιμες συναρτήσεις"]
E --> E2["Βέλος: Σύντομα callbacks"]
E --> E3["Ανώνυμο: Διαχειριστές γεγονότων"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
### Πότε να χρησιμοποιείτε κάθε στρατηγική
Πότε πρέπει να χρησιμοποιείτε κάθε προσέγγιση; Ένας πρακτικός οδηγός: αν θα χρησιμοποιείτε τη συνάρτηση πολλές φορές, δώστε της ένα όνομα και ορίστε την ξεχωριστά. Αν είναι για μία συγκεκριμένη χρήση, σκεφτείτε μια ανώνυμη συνάρτηση. Τόσο οι συναρτήσεις με βέλη όσο και η παραδοσιακή σύνταξη είναι έγκυρες επιλογές, αν και οι συναρτήσεις με βέλη είναι διαδεδομένες σε σύγχρονες βάσεις κώδικα JavaScript.
Πότε πρέπει να χρησιμοποιείτε κάθε προσέγγιση; Μια πρακτική οδηγία: αν πρόκειται να χρησιμοποιήσετε τη συνάρτηση πολλές φορές, δώστε της όνομα και ορίστε την ξεχωριστά. Αν είναι για μια συγκεκριμένη χρήση, σκεφτείτε ανώνυμη συνάρτηση. Καιοι δύο –οι συναρτήσεις βέλους και η παραδοσιακή σύνταξη – είναι έγκυρες επιλογές, αν και οι συναρτήσεις βέλους είναι διαδεδομένες σε σύγχρονα codebases JavaScript.
### 🎨 **Έλεγχος Στυλ Συναρτήσεων: Επιλογή της Κατάλληλης Σύνταξης**
**Εξετάστε την κατανόηση σας στη σύνταξη:**
- Πότε μπορεί να προτιμάτε τις συναρτήσεις βέλους έναντι της παραδοσιακής σύνταξης;
- Ποιο είναι το βασικό πλεονέκτημα των ανώνυμων συναρτήσεων;
- Μπορείτε να σκεφτείτε μια κατάσταση όπου μια ονοματισμένη συνάρτηση είναι καλύτερη από μια ανώνυμη;
```mermaid
quadrantChart
title Μήτρα Αποφάσεων Επιλογής Συνάρτησης
x-axis Απλό --> Πολύπλοκο
y-axis Μιας χρήσης --> Επαναχρησιμοποιήσιμο
quadrant-1 Συναρτήσεις Βελών
quadrant-2 Ονομασμένες Συναρτήσεις
quadrant-3 Ανώνυμες Συναρτήσεις
quadrant-4 Παραδοσιακές Συναρτήσεις
Event Handlers: [0.3, 0.2]
Utility Functions: [0.7, 0.8]
Callbacks: [0.2, 0.3]
Class Methods: [0.8, 0.7]
Mathematical Operations: [0.4, 0.6]
```
> **Σύγχρονη τάση**: Οι συναρτήσεις βέλους γίνονται η προεπιλογή για πολλούς προγραμματιστές λόγω της συμπαγούς σύνταξης, αλλά οι παραδοσιακές συναρτήσεις έχουν ακόμα τη θέση τους!
---
@ -237,29 +450,135 @@ setTimeout(() => {
## 🚀 Πρόκληση
Μπορείτε ναεξηγήσετε με μία πρόταση τη διαφορά μεταξύ συναρτήσεων και μεθόδων; Δοκιμάστε το!
Μπορείτε νααποτυπώσετε με μια πρόταση τη διαφορά μεταξύ συναρτήσεων και μεθόδων; Δοκιμάστε το!
## Πρόκληση GitHub Copilot Agent 🚀
Χρησιμοποιήστε τη λειτουργία Agent γιανα ολοκληρώσετε την παρακάτω πρόκληση:
Χρησιμοποιήστε τη λειτουργία Agent γιαολοκλήρωση της παρακάτω πρόκλησης:
**Περιγραφή:** Δημιουργήστε μια βιβλιοθήκη βοηθητικών μαθηματικών συναρτήσεων που να δείχνει διαφορετικές έννοιες συναρτήσεων που καλύφθηκαν σε αυτό το μάθημα, συμπεριλαμβανομένων παραμέτρων, προεπιλεγμένων τιμών, τιμών επιστροφής και συναρτήσεων με βέλη.
**Περιγραφή:** Δημιουργήστε μια βιβλιοθήκη βοηθητικών μαθηματικών συναρτήσεων που να δείχνει διάφορες έννοιες συναρτήσεων που καλύφθηκαν σε αυτό το μάθημα, συμπεριλαμβανομένων των παραμέτρων, προεπιλεγμένων τιμών, τιμών επιστροφής και συναρτήσεων βέλους.
**Προτροπή:** Δημιουργήστε ένα αρχείο JavaScript με όνομα `mathUtils.js` που περιέχει τις εξής συναρτήσεις:
**Πρόταση:** Δημιουργήστε ένα αρχείο JavaScript με όνομα `mathUtils.js` που περιέχει τις ακόλουθες συναρτήσεις:
1. Μια συνάρτηση `add` που παίρνει δύο παραμέτρους και επιστρέφει το άθροισμά τους
2. Μια συνάρτηση `multiply` με προεπιλεγμένες τιμές παραμέτρων (η δεύτερη παράμετρος προεπιλεγμένη στο 1)
3. Μια συνάρτηση με βέλος `square` που παίρνει έναν αριθμό και επιστρέφει το τετράγωνό του
4. Μια συνάρτηση `calculate` που δέχεται μια άλλη συνάρτηση ως παράμετρο και δύο αριθμούς, και στη συνέχεια εφαρμόζει τη συνάρτηση σε αυτούς τους αριθμούς
5. Επιδείξτε την κλήση κάθε συνάρτησης με κατάλληλες δοκιμαστικές περιπτώσεις
2. Μια συνάρτηση `multiply` με προεπιλεγμένες παραμέτρους (δεύτερη παράμετρος με προεπιλογή την 1)
3. Μια συνάρτηση βέλους `square` που παίρνει έναν αριθμό και επιστρέφει το τετράγωνό του
4. Μια συνάρτηση `calculate` που δέχεται μια άλλη συνάρτηση ως παράμετρο και δύο αριθμούς, και εφαρμόζει τη συνάρτηση σε αυτούς τους αριθμούς
5. Επιδείξτε κλήσεις κάθε συνάρτησης με κατάλληλες δοκιμαστικές περιπτώσεις
Μάθετε περισσότερα για τη [λειτουργία agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) εδώ.
## Ερωτηματολόγιο μετά το μάθημα
[Ερωτηματολόγιο μετά το μάθημα](https://ff-quizzes.netlify.app)
Αξίζει να [διαβάσετε λίγο παραπάνω για τις συναρτήσεις βέλους](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), καθώς χρησιμοποιούνται όλο και περισσότερο στα codebases. Πρακτική στη σύνταξη μιας συνάρτησης και στη συνέχεια ξαναγράψτε την χρησιμοποιώντας αυτή τη σύνταξη.
## Εργασία
[Διασκέδαση με Συναρτήσεις](assignment.md)
---
## 🧰 **Περίληψη Εργαλείων για τις JavaScript Συναρτήσεις σας**
- [ ] Κατάκτησε προχωρημένες έννοιες συναρτήσεων όπως οι κλεισίματα και το scope
- [ ] Δημιούργησε ένα έργο που χρησιμοποιεί έντονα τη σύνθεση συναρτήσεων
- [ ] Συνεισέφερε σε open source βελτιώνοντας την τεκμηρίωση συναρτήσεων
- [ ] Δίδαξε κάποιον άλλον για τις συναρτήσεις και τις διαφορετικές συντακτικές μορφές
- [ ] Εξέρευνησε παραδείγματα λειτουργικού προγραμματισμού σε JavaScript
- [ ] Δημιούργησε μια προσωπική βιβλιοθήκη επαναχρησιμοποιήσιμων συναρτήσεων για μελλοντικά έργα
### 🏆 **Τελικός Έλεγχος Πρωταθλητή Συναρτήσεων**
**Γιόρτασε την κυριαρχία σου στις συναρτήσεις:**
- Ποια είναι η πιο χρήσιμη συνάρτηση που έχεις δημιουργήσει μέχρι τώρα;
- Πώς έχει αλλάξει ο τρόπος που σκέφτεσαι για την οργάνωση του κώδικα η εκμάθηση για τις συναρτήσεις;
- Ποια σύνταξη συναρτήσεων προτιμάς και γιατί;
- Ποιο πραγματικό πρόβλημα θα έλυνες γράφοντας μια συνάρτηση;
```mermaid
journey
title Η Εξέλιξη της Αυτοπεποίθησής σας στις Συναρτήσεις
section Σήμερα
Μπερδεμένος με τη Σύνταξη: 3: You
Κατανόηση Βασικών: 4: You
Γράφοντας Απλές Συναρτήσεις: 5: You
section Αυτή την Εβδομάδα
Χρήση Παραμέτρων: 4: You
Επιστροφή Τιμών: 5: You
Σύγχρονη Σύνταξη: 5: You
section Επόμενος Μήνας
Σύνθεση Συναρτήσεων: 5: You
Προηγμένα Πρότυπα: 5: You
Διδασκαλία Άλλων: 5: You
```
> 🎉 **Έχεις κατακτήσει μία από τις πιο ισχυρές έννοιες του προγραμματισμού!** Οι συναρτήσεις είναι τα δομικά στοιχεία των μεγαλύτερων προγραμμάτων. Κάθε εφαρμογή που θα δημιουργήσεις θα χρησιμοποιεί συναρτήσεις γιανα οργανώσει, να επαναχρησιμοποιήσει και να δομήσει τον κώδικα. Τώρα κατανοείς πώς να πακετάρεις τη λογική σε επαναχρησιμοποιήσιμα στοιχεία, κάνοντάς σε πιο αποδοτικό και αποτελεσματικό προγραμματιστή. Καλώς ήρθες στον κόσμο του modular προγραμματισμού! 🚀
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση Ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να έχετε υπόψη πως οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται ως η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρεξηγήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης.
localizeflow[bot]
3 weeks ago