@ -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!
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)
> 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!
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)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
```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/).
✅ 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).
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)
> 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.
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"
4. No painel Explorer, clique no ícone "Novo Arquivo"
5. Nomeie seu arquivo como `index.html`
5. Nomeie seu arquivo como `index.html`
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
> 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.
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:
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?
✅ **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:
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)
> 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.
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
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)
> 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.
> 💡 **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)
> 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
- **Suporte entre dispositivos**: Funciona em desktop e dispositivos móveis
- **Consciente do desempenho**: Sem vazamentos de memória ou cálculos redundantes
- **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.
Você pode publicar seu Terrarium na web usando **Azure Static Web Apps**.
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.
1. Faça um fork deste repositório
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**:
**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.
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)
> Alguns navegadores antigos, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Como os Navegadores Processam Conteúdo Web
### 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.
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.
> **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
### Visão Geral das Telas da Extensão
**Tela de Configuração** - Configuração inicial do usuário:
**Tela de Configuração** - Configuração inicial do usuário:
**Tela de Resultados** - Exibição de dados de pegada de carbono:
**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.
> ⚠️ **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.
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.
✅ 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:
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:
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?
✅ 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
### 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.
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
## 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').
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.
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.
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
## 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').
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.
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.
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
## 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').
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.
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.
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
## 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").
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.
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.
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
## 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').
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.
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.
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
## 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').
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.
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.
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
## 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').
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.
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)
> 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:
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
- Nave do herói
- Formação 5×5 de monstros
- Formação 5×5 de monstros
### Passos Recomendados para Iniciar o Desenvolvimento
### 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:
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.
- **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:
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.
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
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
3. Note como a página recarrega e os dados aparecem na URL
### Comparação de Métodos HTTP
### 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"
2. **Clique** no botão "Criar Conta"
3. **Observe** a resposta do servidor no seu navegador
3. **Observe** a resposta do servidor no seu navegador
**O que você deve ver:**
**O que você deve ver:**
- **Redirecionamento do navegador** para a URL do endpoint da API
- **Redirecionamento do navegador** para a URL do endpoint da API
@ -615,7 +615,7 @@ async function register() {
3. **Clique** em "Criar Conta"
3. **Clique** em "Criar Conta"
4. **Observe** as mensagens do console e o feedback ao usuário
4. **Observe** as mensagens do console e o feedback ao usuário
**O que você deve ver:**
**O que você deve ver:**
- **Estado de carregamento** aparece no botão de envio
- **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
3. **Tente** caracteres especiais no campo de nome de usuário
4. **Insira** um valor de saldo negativo
4. **Insira** um valor de saldo negativo
**O que você observará:**
**O que você observará:**
- **O navegador exibe** mensagens de validação nativas
- **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:
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:**
**Por que essa abordagem parecia desajeitada:**
- Cada clique significava reconstruir a página inteira do zero
- Cada clique significava reconstruir a página inteira do zero
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
Browser->>User: Shows updated content (no reload)
```
```
**Por que os SPAs são muito melhores:**
**Por que os SPAs são muito melhores:**
- Apenas as partes que realmente mudaram são atualizadas (inteligente, né?)
- 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!
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
#### 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:
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!
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:
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
```mermaid
flowchart TD
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:
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:**
**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:
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.
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!
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:**
**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 ⚙️
- **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á
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
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:**
**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ê
- 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`)
3. Insira o nome do arquivo, incluindo a extensão apropriada (`style.css`, `script.js`, `index.html`)
4. Pressione Enter para criar o arquivo
4. Pressione Enter para criar o arquivo
**Convenções de nomenclatura:**
**Convenções de nomenclatura:**
- Use nomes descritivos que indiquem o propósito do arquivo
- 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
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!
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:**
**As coisas legais que acontecem enquanto você programa:**
- Seu código é lindamente colorido para facilitar a leitura
- 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"
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
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):**
**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
2. Navegue ou procure algo específico
3. Clique em qualquer coisa que pareça interessante para saber mais
3. Clique em qualquer coisa que pareça interessante para saber mais
**O que você encontrará lá:**
**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
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
4. Ajuste as configurações até que fiquem perfeitas para o seu fluxo de trabalho
**Coisas comuns que você pode querer ajustar:**
**Coisas comuns que você pode querer ajustar:**
- Como seu código é formatado (tabulação vs espaços, comprimento da linha, etc.)
- 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"
4. **Escreva** uma mensagem de commit: "Adicionar estrutura inicial de HTML"
5. **Clique** em "Commit new file" para salvar suas alterações
5. **Clique** em "Commit new file" para salvar suas alterações
**O que essa configuração inicial realiza:**
**O que essa configuração inicial realiza:**
- **Estabelece** uma estrutura de documento HTML5 adequada com elementos semânticos
- **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.
✅ **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:**
**O que você verá na interface:**
- **Barra lateral do Explorer**: **Exibe** os arquivos e estrutura de pastas do seu repositório
- **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:**
**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.
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:**
**Entendendo a interface aprimorada:**
- **Visualização dividida**: **Mostra** seu código de um lado e a pré-visualização ao vivo do outro
- **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
## 🗺️ 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.
**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:**
**Aqui está o que torna o playground tão útil:**
- **Experimente** diferentes modelos de IA como GPT-4o-mini, Claude e outros (todos gratuitos!)
- **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.
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
## 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)
- **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)
- **Clique** em "Use this template" no canto superior direito (certifique-se de estar logado no GitHub)
**Passo 2: Iniciar Codespaces**
**Passo 2: Iniciar Codespaces**
- **Abra** o repositório recém-criado
- **Abra** o repositório recém-criado
- **Clique** no botão verde "Code" e selecione "Codespaces"
- **Clique** no botão verde "Code" e selecione "Codespaces"
- **Escolha** "Create codespace on main" para iniciar seu ambiente de desenvolvimento
- **Escolha** "Create codespace on main" para iniciar seu ambiente de desenvolvimento
**Passo 3: Configuração do Ambiente**
**Passo 3: Configuração do Ambiente**
Assim que seu Codespace carregar, você terá acesso a:
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
# 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:
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)
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`
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 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_
### 📣 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!
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!
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:
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:
- Criação de prompts e engenharia de prompts
- Prompting e engenharia de prompts
- Geração de aplicativos de texto e imagem
- Geração de apps de texto e imagem
- Aplicativos de busca
- Apps de busca
Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para começar!
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
## 🌱 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
### 📋 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
#### 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.
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`
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Executando o currículo em um Codespace
#### 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
#### 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:
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)
[CodeSpace](./images/createcodespace.png)
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:
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:
```bash
```bash
git clone <your-repository-url>
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
> * [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
> * [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,120 +144,129 @@ Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/
## 📂 Cada aula inclui:
## 📂 Cada aula inclui:
- sketchnote opcional
- sketchnote opcional
- vídeo complementar opcional
- vídeo suplementar opcional
- quiz de aquecimento antes da aula
- quiz de aquecimento pré-aula
- aula escrita
- aula escrita
- para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto
- 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
## 🗃️ Aulas
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| | 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 |
| 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 | 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 |
| 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 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 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 | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 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 |
| 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) | 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 |
| 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 estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 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 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 |
| 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 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 |
| 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 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 |
| 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 |
| 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 |
| 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õ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 |
| 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 com base no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/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 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 |
| 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 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 |
| 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 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 |
| 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 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 |
| 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 aplicativo mantém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/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 | [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 |
| 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 como construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/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
## 🏫 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
* aprendizado baseado em projetos
* quizzes frequentes
* 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
## 🧭 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
## 📘 PDF
Um PDF de todas as aulas pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.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:
Nossa equipe produz outros cursos! Confira:
### Azure / Edge / MCP / Agents
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
### LangChain
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/langchain4j-for-beginners)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Azure / Edge / MCP / Agentes
[](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)
---
---
### Série de IA Generativa
### Série IA Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](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 Essencial
### Aprendizado Básico
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](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/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-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://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/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-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)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Série Copilot
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?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)
[](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)
@ -255,5 +276,5 @@ Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
**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.
Γεια σου, μελλοντικέ προγραμματιστή! 👋 Έτοιμος να ενταχθείς σε εκατομμύρια κωδικοποιητές σε όλο τον κόσμο; Είμαι πραγματικά ενθουσιασμένος που θα σου παρουσιάσω το GitHub – σκέψου το σαν την πλατφόρμα κοινωνικής δικτύωσης για προγραμματιστές, αλλά αντί να μοιραζόμαστε φωτογραφίες από το γεύμα μας, μοιραζόμαστε κώδικα και δημιουργούμε απίστευτα πράγματα μαζί!
Γεια σου, μελλοντικέ προγραμματιστή! 👋 Έτοιμος να ενταχθείς σε εκατομμύρια προγραμματιστές σε όλο τον κόσμο; Είμαι πραγματικά ενθουσιασμένος που σου παρουσιάζω το GitHub – σκέψου το σαν την πλατφόρμα κοινωνικής δικτύωσης για προγραμματιστές, εκτός από το ότι αντί για φωτογραφίες του γεύματός σου, μοιραζόμαστε κώδικα και δημιουργούμε απίστευτα πράγματα μαζί!
Αυτό που με εντυπωσιάζει απόλυτα: κάθε εφαρμογή στο κινητό σου, κάθε ιστοσελίδα που επισκέπτεσαι και τα περισσότερα εργαλεία που θα μάθεις να χρησιμοποιείς έχουν δημιουργηθεί από ομάδες προγραμματιστών που συνεργάζονται σε πλατφόρμες όπως το GitHub. Αυτή η εφαρμογή μουσικής που αγαπάς; Κάποιος σαν εσένα συνέβαλε σε αυτήν. Αυτό το παιχνίδι που δεν μπορείς νασταματήσεις να παίζεις; Ναι, πιθανότατα δημιουργήθηκε με συνεργασία στο GitHub. Και τώρα ΕΣΥ θα μάθεις πώς ναγίνεις μέρος αυτής της εκπληκτικής κοινότητας!
Αυτό που πραγματικά με εντυπωσιάζει είναι το εξής: κάθε εφαρμογή στο τηλέφωνό σου, κάθε ιστοσελίδα που επισκέπτεσαι και τα περισσότερα εργαλεία που θα μάθεις να χρησιμοποιείς δημιουργήθηκαν από ομάδες προγραμματιστών που συνεργάζονται σε πλατφόρμες όπως το GitHub. Αυτή η εφαρμογή μουσικής που αγαπάς; Κάποιος σαν εσένα συνέβαλλε σε αυτήν. Αυτό το παιχνίδι που δεν μπορείς νααφήσεις κάτω; Ναι, πιθανότατα δημιουργήθηκε με συνεργασία στο GitHub. Και τώρα ΕΣΥ θα μάθεις πώς ναείσαι μέρος αυτής της καταπληκτικής κοινότητας!
Ξέρω ότι μπορεί νασου φαίνεται λίγο δύσκολο στην αρχή – θυμάμαι να κοιτάζω την πρώτη μου σελίδα στο GitHub και να σκέφτομαι "Τι σημαίνουν όλα αυτά;". Αλλά να θυμάσαι: κάθε προγραμματιστής ξεκίνησε ακριβώς από εκεί που βρίσκεσαι τώρα. Μέχρι το τέλος αυτού του μαθήματος, θα έχεις το δικό σου αποθετήριο στο GitHub (σκέψου το σαν τη δική σου προσωπική βιτρίνα έργων στο cloud) και θα ξέρεις πώς να αποθηκεύεις τη δουλειά σου, να τη μοιράζεσαι με άλλους και να συμβάλλεις σε έργα που χρησιμοποιούν εκατομμύρια άνθρωποι.
Ξέρω ότι μπορεί ναφαίνεται πολύ στην αρχή – ρε παιδί μου, θυμάμαι που κοίταζα την πρώτη μου σελίδα GitHub και σκεφτόμουν «Τι στο καλό σημαίνει όλο αυτό;» Αλλά να το ένα: κάθε προγραμματιστής ξεκίνησε ακριβώς από εκεί που είσαι τώρα. Μέχρι το τέλος αυτού του μαθήματος, θα έχεις το δικό σου αποθετήριο GitHub (σκέψου το σαν τη προσωπική σου έκθεση έργων στο σύννεφο), και θα ξέρεις πώς να αποθηκεύεις τη δουλειά σου, να τη μοιράζεσαι με άλλους και ακόμανα συμβάλλεις σε έργα που χρησιμοποιούν εκατομμύρια άνθρωποι.
Θα κάνουμε αυτό το ταξίδι μαζί, βήμα-βήμα. Χωρίς βιασύνη, χωρίς πίεση –μόνο εσύ, εγώ και μερικά πολύ ωραία εργαλεία που πρόκειται να γίνουν οι καλύτεροί σου φίλοι!
Θα κάνουμε αυτό το ταξίδι μαζί, βήμα-βήμα. Χωρίς βιασύνη, χωρίς πίεση –απλά εσύ, εγώ, και κάποια πολύ ωραία εργαλεία που σύντομα θα γίνουν οι νέοι σου καλύτεροι φίλοι!
> Σκίτσο από την [Tomomi Imura](https://twitter.com/girlie_mac)
> Σκιτσάκι από [Tomomi Imura](https://twitter.com/girlie_mac)
## Ερωτηματολόγιο πριν το μάθημα
```mermaid
[Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app)
Πριν βουτήξουμε στα πραγματικά συναρπαστικά πράγματα, ας ετοιμάσουμε τον υπολογιστή σουγια λίγη μαγεία GitHub! Σκέψου το σαννα οργανώνεις τα υλικά τέχνης σου πριν δημιουργήσεις ένα αριστούργημα – έχοντας τα σωστά εργαλεία έτοιμα κάνει τα πάντα πιο ομαλά και πολύ πιο διασκεδαστικά.
Πριν βουτήξουμε στα πραγματικά συναρπαστικά θέματα, ας ετοιμάσουμε τον υπολογιστή σουγια λίγη μαγεία GitHub! Σκέψου το σαννα οργανώνεις τα υλικά τέχνης σου πριν δημιουργήσεις ένα αριστούργημα –το να έχεις τα σωστά εργαλεία έτοιμα κάνει τα πάντα πολύ πιο ομαλά και διασκεδαστικά.
Θα σε καθοδηγήσω προσωπικά σε κάθε βήμα της εγκατάστασης, και υπόσχομαι ότι δεν είναι τόσο τρομακτικό όσο μπορεί να φαίνεται με την πρώτη ματιά. Αν κάτι δεν σου φαίνεται λογικό αμέσως, είναι απολύτως φυσιολογικό! Θυμάμαι να προσπαθώ να στήσω το πρώτο μου περιβάλλον ανάπτυξης και να νιώθω σαννα προσπαθώ να διαβάσω αρχαία ιερογλυφικά. Κάθε προγραμματιστής έχει βρεθεί ακριβώς εκεί που βρίσκεσαι τώρα, αναρωτώμενος αν το κάνει σωστά. Μικρό spoiler: αν είσαι εδώ και μαθαίνεις, ήδη το κάνεις σωστά! 🌟
Θα σε περπατήσω προσωπικά μέσα από κάθε βήμα της ρύθμισης, και υπόσχομαι πως δεν είναι τόσο τρομακτικό όσο ίσως φαίνεται στην αρχή. Αν κάτι δεν καταλάβεις αμέσως, είναι απόλυτα φυσιολογικό! Θυμάμαι όταν έστηνα το πρώτο μου περιβάλλον ανάπτυξης και ένιωθα σαννα προσπαθώ να διαβάσω αρχαίους ιερογλυφικούς. Κάθε προγραμματιστής ήταν ακριβώς εκεί που είσαι τώρα, αναρωτώμενος αν τα κάνει σωστά. Μικρή ενημέρωση: αν είσαι εδώ και μαθαίνεις, ήδη τα κάνεις σωστά! 🌟
Σε αυτό το μάθημα, θα καλύψουμε:
Σε αυτό το μάθημα, θα καλύψουμε:
- την παρακολούθηση της δουλειάς που κάνεις στον υπολογιστή σου
- παρακολούθηση της δουλειάς που κάνεις στον υπολογιστή σου
- τη συνεργασία σε έργα με άλλους
- εργασία σε έργα με άλλους
- πώς να συμβάλλεις σε λογισμικό ανοιχτού κώδικα
- πώς να συμβάλλεις σε λογισμικό ανοιχτού κώδικα
### Προαπαιτούμενα
### Προαπαιτούμενα
Ας ετοιμάσουμε τον υπολογιστή σουγια λίγη μαγεία GitHub! Μην ανησυχείς – αυτή η εγκατάσταση είναι κάτι που χρειάζεται να κάνεις μόνο μία φορά, και μετά θα είσαι έτοιμος για όλη σου την πορεία στον προγραμματισμό.
Ας ετοιμάσουμε τον υπολογιστή σουγια λίγη μαγεία GitHub! Μην ανησυχείς – αυτή η ρύθμιση πρέπει να γίνει μόνο μία φορά, και μετά θα είσαι έτοιμος για όλο το ταξίδι σου στον προγραμματισμό.
Λοιπόν, ας ξεκινήσουμε με τα βασικά! Πρώτα, πρέπει να ελέγξουμε αν το Git είναι ήδη εγκατεστημένο στον υπολογιστή σου. Το Git είναι βασικά σαννα έχεις έναν υπερ-έξυπνο βοηθό που θυμάται κάθε αλλαγή που κάνεις στον κώδικά σου– πολύ καλύτερο από το να πατάς μανιωδώς Ctrl+S κάθε δύο δευτερόλεπτα (όλοι το έχουμε κάνει!).
Εντάξει, ας ξεκινήσουμε από τα βασικά! Πρώτα, πρέπει να δούμε αν το Git είναι ήδη εγκατεστημένο στον υπολογιστή σου. Το Git είναι βασικά σαννα έχεις έναν πανέξυπνο βοηθό που θυμάται κάθε αλλαγή που κάνεις στον κώδικά σου– πολύ καλύτερο από το να πατάς με μανία Ctrl+S κάθε δύο δευτερόλεπτα (έχουμε περάσει όλοι από αυτό!).
Ας δούμε αντο Git είναι ήδη εγκατεστημένο πληκτρολογώντας αυτή τη μαγική εντολή στο τερματικό σου:
Ας δούμε αν είναι ήδη εγκατεστημένο πληκτρολογώντας αυτή την μαγική εντολή στο τερματικό σου:
`git --version`
`git --version`
Αν το Git δεν είναι ακόμα εκεί, μην ανησυχείς! Απλά πήγαινε στο [download Git](https://git-scm.com/downloads) και κατέβασέ το. Μόλις το εγκαταστήσεις, πρέπει να συστήσουμε το Git σε εσένα σωστά:
Αν το Git δεν είναι ακόμα εκεί, μην ανησυχείς! Απλά πήγαινε στο [download Git](https://git-scm.com/downloads) και κατέβασέ το. Μόλις το εγκαταστήσεις, πρέπει να συστηθείς καλά με το Git:
> 💡 **Πρώτη Ρύθμιση**: Αυτές οι εντολές λένε στο Git ποιος είσαι. Αυτές οι πληροφορίες θα συνδέονται με κάθε commit που κάνεις, οπότε διάλεξε ένα όνομα και email που νιώθεις άνετα να μοιραστείς δημόσια.
> 💡 **Πρώτη Ρύθμιση**: Αυτές οι εντολές λένε στο Git ποιος είσαι. Αυτή η πληροφορία θα συνδεθεί με κάθε δέσμευση (commit) που κάνεις, οπότε διάλεξε όνομα και email που αισθάνεσαι άνετα να μοιραστείς δημόσια.
```bash
```bash
git config --global user.name "your-name"
git config --global user.name "your-name"
git config --global user.email "your-email"
git config --global user.email "your-email"
```
```
Για να ελέγξεις αν το Git είναι ήδη ρυθμισμένο, μπορείς να πληκτρολογήσεις:
Για να ελέγξεις αν το Git είναι ήδη ρυθμισμένο μπορείς να πληκτρολογήσεις:
```bash
```bash
git config --list
git config --list
```
```
Θα χρειαστείς επίσης έναν λογαριασμό στο GitHub, έναν επεξεργαστή κώδικα (όπως το Visual Studio Code), και να ανοίξεις το τερματικό σου (ή: command prompt).
Θα χρειαστείς επίσης έναν λογαριασμό στο GitHub, έναν επεξεργαστή κώδικα (όπως το Visual Studio Code) και θα πρέπεινα ανοίξεις το τερματικό σου (ή: command prompt).
Πήγαινε στο [github.com](https://github.com/) και δημιούργησε έναν λογαριασμό αν δεν έχεις ήδη, ή συνδέσου και συμπλήρωσε το προφίλ σου.
Πήγαινε στο [github.com](https://github.com/) και δημιούργησε λογαριασμό αν δεν έχεις ήδη, ή συνδέσου και συμπλήρωσε το προφίλ σου.
💡 **Σύγχρονη συμβουλή**: Σκέψου να ρυθμίσεις [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ή να χρησιμοποιήσεις το [GitHub CLI](https://cli.github.com/) γιαευκολότερη αυθεντικοποίηση χωρίς κωδικούς.
💡 **Σύγχρονη συμβουλή**: Σκέψου να ρυθμίσεις [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ή να χρησιμοποιήσεις [GitHub CLI](https://cli.github.com/) γιαπιο εύκολη αυθεντικοποίηση χωρίς κωδικούς.
✅ Το GitHub δεν είναι το μοναδικό αποθετήριο κώδικα στον κόσμο. Υπάρχουν και άλλα, αλλά το GitHub είναι το πιο γνωστό.
✅ Το GitHub δεν είναι το μόνο αποθετήριο κώδικα στον κόσμο· υπάρχουν και άλλα, αλλά το GitHub είναι το πιο γνωστό
### Προετοιμασία
### Προετοιμασία
Θα χρειαστείς έναν φάκελο με ένα έργο κώδικα στον τοπικό σου υπολογιστή (laptop ή PC) και ένα δημόσιο αποθετήριο στο GitHub, το οποίο θα χρησιμεύσει ως παράδειγμα για το πώς να συμβάλλεις στα έργα άλλων.
Θα χρειαστείς και έναν φάκελο με κάποιο πρότζεκτ κώδικα στον τοπικό σου υπολογιστή (laptop ή PC), και ένα δημόσιο αποθετήριο στο GitHub, που θα χρησιμεύσει ως παράδειγμα για το πώς να συμβάλλεις στα έργα άλλων.
### Διατήρηση της ασφάλειας του κώδικασου
### Προστασία του Κώδικάσου
Ας μιλήσουμε για την ασφάλεια για λίγο – αλλά μην ανησυχείς, δεν θα σε κατακλύσουμε με τρομακτικά πράγματα! Σκέψου αυτές τις πρακτικές ασφαλείας σαννα κλειδώνεις το αυτοκίνητο ή το σπίτι σου. Είναι απλές συνήθειες που γίνονται δεύτερη φύση και κρατούν τη σκληρή δουλειά σου προστατευμένη.
Ας μιλήσουμε λίγο για ασφάλεια – μη φοβηθείς, δεν θα σε πνίξουμε με τρομακτικά πράγματα! Σκέψου αυτές τις πρακτικές ασφαλείας σαννα κλειδώνεις το αυτοκίνητο ή το σπίτι σου. Είναι απλές συνήθειες που γίνονται δεύτερη φύση και κρατούν τη δουλειά σου προστατευμένη.
Θα σου δείξουμε τους σύγχρονους, ασφαλείς τρόπους να δουλεύεις με το GitHub από την αρχή. Με αυτόν τον τρόπο, θα αναπτύξεις καλές συνήθειες που θα σε εξυπηρετήσουν καθ' όλη τη διάρκεια της καριέραςσου στον προγραμματισμό.
Θα σου δείξουμε τους σύγχρονους, ασφαλείς τρόπους γιανα δουλεύεις με το GitHub από την αρχή. Έτσι, θα αναπτύξεις καλές συνήθειες που θα σε βοηθήσουν σε όλη την καριέρασου στον προγραμματισμό.
Όταν δουλεύεις με το GitHub, είναι σημαντικό ναακολουθείς τις βέλτιστες πρακτικές ασφαλείας:
Όταν δουλεύεις με το GitHub, είναι σημαντικό νατηρείς τις βέλτιστες πρακτικές ασφαλείας:
| Περιοχή Ασφάλειας | Βέλτιστη Πρακτική | Γιατί Είναι Σημαντικό |
| Περιοχή Ασφαλείας | Βέλτιστη Πρακτική | Γιατί Είναι Σημαντικό |
| **Αυθεντικοποίηση** | Χρησιμοποίησε SSH keys ή Personal Access Tokens | Οι κωδικοί είναι λιγότερο ασφαλείς και καταργούνται |
| **Ταυτοποίηση** | Χρήση SSH keys ή Διακριτικών Προσωπικής Πρόσβασης | Οι κωδικοί είναι λιγότερο ασφαλείς και σταδιακά καταργούνται |
| **Δύο-παραγοντική αυθεντικοποίηση** | Ενεργοποίησε το 2FA στον λογαριασμό σου στο GitHub | Προσθέτει ένα επιπλέον επίπεδο προστασίας στον λογαριασμόσου |
| **Δυο-παράγοντες Ταυτοποίηση** | Ενεργοποίηση 2FA στον λογαριασμό σου στο GitHub | Προσθέτει ένα επιπλέον επίπεδο προστασίας στον λογαριασμό |
| **Ασφάλεια Αποθετηρίου** | Ποτέ μην ανεβάζεις ευαίσθητες πληροφορίες | Τα API keys και οι κωδικοί δεν πρέπει ποτέ να βρίσκονται σε δημόσια αποθετήρια |
| **Ασφάλεια Αποθετηρίου** | Μην δέχεσαι ποτέ ευαίσθητες πληροφορίες | Κλειδιά API και κωδικοί δεν πρέπει ποτέ να είναι σε δημόσια αποθετήρια |
| **Διαχείριση Εξαρτήσεων** | Ενεργοποίησε το Dependabot για ενημερώσεις | Διατηρεί τις εξαρτήσεις σου ασφαλείς και ενημερωμένες |
| **Διαχείριση Εξαρτήσεων** | Ενεργοποίηση Dependabot για ενημερώσεις | Κρατά τις εξαρτήσεις σου ασφαλείς και ενημερωμένες |
> ⚠️ **Κρίσιμη Υπενθύμιση Ασφάλειας**: Ποτέ μην ανεβάζεις API keys, κωδικούς ή άλλες ευαίσθητες πληροφορίες σε οποιοδήποτε αποθετήριο. Χρησιμοποίησε μεταβλητές περιβάλλοντος και αρχεία `.gitignore`γιανα προστατεύσεις ευαίσθητα δεδομένα.
> ⚠️ **Κρίσιμη Υπόμνηση Ασφαλείας**: Μην δεσμεύεις ποτέ κλειδιά API, κωδικούς ή άλλες ευαίσθητες πληροφορίες σε οποιοδήποτε αποθετήριο. Χρησιμοποίησε μεταβλητές περιβάλλοντος και αρχεία `.gitignore`γιανα προστατεύσεις ευαίσθητα δεδομένα.
> 💡 **Συμβουλή Ειδικού**: Τα SSH keys εξαλείφουν την ανάγκη να εισάγεις συνεχώς κωδικούς και είναι πιο ασφαλή από τις παραδοσιακές μεθόδους αυθεντικοποίησης.
> 💡 **Επαγγελματική Συμβουλή**: Τα SSH keys εξαλείφουν την ανάγκη να εισάγεις κωδικούς πολλές φορές και είναι πιο ασφαλή από τις παραδοσιακές μεθόδους ταυτοποίησης.
---
---
## Διαχείριση του Κώδικα σουσαν Επαγγελματίας
## Διαχείριση του Κώδικά σουσαν Επαγγελματίας
Εντάξει, ΕΔΩ είναι που τα πράγματα γίνονται πραγματικά συναρπαστικά! 🎉 Είμαστε έτοιμοι να μάθουμε πώς να παρακολουθείς και να διαχειρίζεσαι τον κώδικά σου όπως κάνουν οι επαγγελματίες, και ειλικρινά, αυτό είναι ένα από τα αγαπημένα μου θέματα για διδασκαλία γιατί αλλάζει τελείως τα δεδομένα.
Εντάξει, ΕΔΩ είναι που τα πράγματα γίνονται πραγματικά συναρπαστικά! 🎉 Ετοιμαζόμαστε να μάθουμε πώς να παρακολουθούμε και να διαχειριζόμαστε τον κώδικα μας όπως οι επαγγελματίες, και ειλικρινά, αυτό είναι ένα από τα αγαπημένα μου θέματα γιατί είναι πραγματικά επαναστατικό.
Φαντάσου το εξής: γράφεις μια καταπληκτική ιστορία, και θέλεις να κρατάς αρχείο κάθε προσχέδιου, κάθε έξυπνης διόρθωσης, και κάθε στιγμή που λες «περίμενε, αυτό είναι ιδιοφυές!» κατά μήκος της διαδρομής. Αυτό ακριβώς κάνει το Git για τον κώδικά σου! Είναι σαννα έχεις το πιο απίθανο ταξιδιωτικό ημερολόγιο που θυμάται ΤΑ ΠΑΝΤΑ – κάθε πάτημα πλήκτρου, κάθε αλλαγή, κάθε «ουπς, αυτό χάλασε τα πάντα» στιγμή που μπορείς να αναιρέσεις αμέσως.
Φαντάσου το εξής: γράφεις μια εκπληκτική ιστορία και θέλεις να παρακολουθείς κάθε προσχέδιο, κάθε λαμπρή επεξεργασία και κάθε "περίμενε, αυτό είναι ιδιοφυές!" στιγμή στην πορεία. Αυτό ακριβώς κάνει το Git για τον κώδικά σου! Είναι σαννα έχεις το πιο απίστευτο σημειωματάριο που ταξιδεύει στον χρόνο και θυμάται ΤΑ ΠΑΝΤΑ – κάθε πληκτρολόγηση, κάθε αλλαγή, κάθε "ωχ, τα χάλασα όλα" στιγμή που μπορείς να διορθώσεις αμέσως.
Θα είμαι ειλικρινής – στην αρχή μπορεί νασου φανεί περίπλοκο. Όταν ξεκίνησα, σκεφτόμουν «Γιατί δεν μπορώ απλώς να αποθηκεύω τα αρχεία μου όπως συνήθως;» Αλλά πίστεψέ με: μόλις το καταλάβεις (και θα το κάνεις!), θα έχεις μία από αυτές τις στιγμές που λες «Πώς ΔΙΚΑΙΑ κωδικοποιούσα χωρίς αυτό;» Είναι σαννα ανακαλύπτεις ότι μπορείς να πετάξεις αφού περπατούσες όλη σου τη ζωή!
Θα είμαι ειλικρινής – αυτό μπορεί νασου φανεί συντριπτικό στην αρχή. Όταν ξεκίνησα, σκέφτηκα "Γιατί δεν μπορώ απλά να αποθηκεύω τα αρχεία μου όπως συνήθως;" Αλλά εμπιστεύσου με: μόλις το Git σου κάνει κλικ (και θα το κάνει!), θα έχεις μια από αυτές τις στιγμές "φωτίστηκα" όπου θα σκέφτεσαι "Πώς ζούσα χωρίς αυτό;". Είναι σαννα ανακαλύπτεις ότι μπορείς να πετάξεις ενώ περπατούσες παντού όλη σου τη ζωή!
Ας πούμε ότι έχεις έναν φάκελο τοπικά με κάποιο πρότζεκτ κώδικα και θέλεις να αρχίσεις να παρακολουθείς την πρόοδό σου με το git - το σύστημα ελέγχου εκδόσεων. Κάποιοι το συγκρίνουν με το να γράφεις ένα ερωτικό γράμμα στον μελλοντικό εαυτό σου. Διαβάζοντας τα μηνύματά σου κάποια μέρα ή εβδομάδες ή μήνες αργότερα, θα μπορείς να θυμηθείς γιατί πήρες μια απόφαση ή να «γυρίσεις πίσω» μια αλλαγή – αρκεί να γράφεις καλά «μηνύματα commit».
Ας πούμε ότι έχεις έναν φάκελο τοπικά με κάποιο έργο κώδικα και θέλεις να αρχίσεις να παρακολουθείς την πρόοδό σου χρησιμοποιώντας το git - το σύστημα ελέγχου εκδόσεων. Μερικοί άνθρωποι συγκρίνουν τη χρήση του git με το να γράφεις ένα ερωτικό γράμμα στον μελλοντικό σου εαυτό. Διαβάζοντας τα μηνύματα commit σου μέρες, εβδομάδες ή μήνες αργότερα, θα μπορείς να θυμηθείς γιατί πήρες μια απόφαση ή να "αναιρέσεις" μια αλλαγή – δηλαδή, όταν γράφεις καλά "μηνύματα commit".
```mermaid
flowchart TD
A[📁 Τα Αρχεία του Έργου σας] --> B{Είναι Αποθετήριο Git;}
B -->|Όχι| C[git init]
B -->|Ναι| D[Κάντε Αλλαγές]
C --> D
D --> E[git add .]
E --> F["git commit -m 'μήνυμα'"]
F --> G[git push]
G --> H[🌟 Κώδικας στο GitHub!]
### Αποστολή: Δημιούργησε το Πρώτο σου Αποθετήριο!
H --> I{Θέλετε να συνεργαστείτε;}
I -->|Ναι| J[Φορκάρετε & Κλωνοποιήστε]
I -->|Όχι| D
J --> K[Δημιουργία Κλαδιού]
K --> L[Κάντε Αλλαγές]
L --> M[Αίτημα Έλξης]
M --> N[🎉 Συμμετέχετε!]
> 🎯 **Η Αποστολή σου (και είμαι τόσο ενθουσιασμένος για σένα!)**: Θα δημιουργήσουμε μαζί το πρώτο σου αποθετήριο στο GitHub! Μέχρι να τελειώσουμε εδώ, θα έχεις τη δική σου μικρή γωνιά του διαδικτύου όπου ζει ο κώδικάς σου, και θα έχεις κάνει το πρώτο σου "commit" (αυτό είναι η γλώσσα των προγραμματιστών για την αποθήκευση της δουλειάς σου με έναν πολύ έξυπνο τρόπο).
style A fill:#fff59d
style H fill:#c8e6c9
style N fill:#ff4081,color:#fff
```
### Εργασία: Δημιούργησε το Πρώτο σου Αποθετήριο!
> 🎯 **Η αποστολή σου (και είμαι πολύ ενθουσιασμένος για σένα!)**: Θα δημιουργήσουμε μαζί το πρώτο σου αποθετήριο στο GitHub! Μέχρι να τελειώσουμε εδώ, θα έχεις τη δική σου μικρή γωνιά στο διαδίκτυο όπου ζει ο κώδικάς σου, και θα έχεις κάνει την πρώτη σου «commit» (αυτό σημαίνει αποθήκευση της δουλειάς σου με πολύ έξυπνο τρόπο).
>
>
> Αυτό είναι πραγματικά μια ξεχωριστή στιγμή – πρόκειται να ενταχθείς επίσημα στην παγκόσμια κοινότητα των προγραμματιστών! Θυμάμαι ακόμα τη συγκίνηση όταν δημιούργησα το πρώτο μου repo και σκέφτηκα "Ουάου, το κάνω πραγματικά!"
> Είναι πραγματικά μια τόσο ιδιαίτερη στιγμή – είσαι έτοιμος να γίνεις επίσημα μέρος της παγκόσμιας κοινότητας προγραμματιστών! Ακόμα θυμάμαι τον ενθουσιασμό όταν δημιούργησα το πρώτο μου repo και σκέφτηκα «Ουάου, το κάνω στ’ αλήθεια!»
Ας περάσουμε μαζί αυτή την περιπέτεια, βήμα-βήμα. Πάρε τον χρόνο σου σε κάθε μέρος – δεν υπάρχει βραβείο για βιασύνη, και υπόσχομαι ότι κάθε βήμα θα βγάζει νόημα. Θυμήσου, κάθε αστέρι του προγραμματισμού που θαυμάζεις κάποτε καθόταν ακριβώς εκεί που είσαι εσύ τώρα, έτοιμος να δημιουργήσει το πρώτο του αποθετήριο. Πόσο ωραίο είναι αυτό;
Ας κάνουμε αυτή την περιπέτεια μαζί, βήμα-βήμα. Πάρε το χρόνο σου σε κάθε μέρος – δεν υπάρχει βραβείο για βιασύνη, και υπόσχομαι ότι κάθε βήμα θα έχει νόημα. Θυμήσου, κάθε προγραμματιστικός σταρ που θαυμάζεις καθόταν ακριβώς εκεί που είσαι εσύ τώρα, έτοιμος να δημιουργήσει το πρώτο του αποθετήριο. Πόσο κουλ είναι αυτό;
> Δες το βίντεο
> Δες το βίντεο
>
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
**Ας το κάνουμε μαζί:**
**Ας το κάνουμε μαζί:**
1. **Δημιούργησε το αποθετήριοσου στο GitHub**. Πήγαινε στο GitHub.com και ψάξε για το φωτεινό πράσινο κουμπί **New** (ή το **+** στην πάνω δεξιά γωνία). Πάτησέ το και επίλεξε **New repository**.
1. **Δημιούργησε το αποθετήριό σου στο GitHub**. Πήγαινε στο GitHub.com και βρες το λαμπερό πράσινο κουμπί **New** (ή το σημάδι **+** πάνω δεξιά). Κλίκαρέ το και επίλεξε **New repository**.
Τινα κάνεις:
Να τι πρέπεινα κάνεις:
1. Δώσε στο αποθετήριο σου ένα όνομα – κάνε το κάτι που έχει νόημα για σένα!
1. Δώσε ένα όνομα στο αποθετήριό σου– διάλεξε κάτι που έχει νόημα για σένα!
1. Πρόσθεσε μια περιγραφή αν θέλεις (αυτό βοηθά τους άλλους να καταλάβουν για τι πρόκειται το έργοσου)
1. Πρόσθεσε μια περιγραφή αν θέλεις (βοηθά τους άλλους να καταλάβουν τι κάνει το πρότζεκτσου)
1. Αποφάσισεαν θέλεις να είναι δημόσιο (όλοι μπορούν να το δουν) ή ιδιωτικό (μόνο για σένα)
1. Απόφασέαν θέλεις να είναι δημόσιο (όλοι μπορούν να το δουν) ή ιδιωτικό (μόνο για σένα)
1. Σου προτείνω να τσεκάρεις το κουτάκι γιανα προσθέσεις ένα αρχείο README – είναι σαν την πρώτη σελίδα του έργουσου
1. Προτείνω να τσεκάρεις το κουτί γιανα προσθέσεις ένα αρχείο README – είναι σαν το πρωτοσέλιδο του πρότζεκτσου
1. Πάτησε **Create repository** και γιόρτασε – μόλις δημιούργησες το πρώτο σου repo! 🎉
1. Κλίκαρε **Create repository** και γιορτάστε – μόλις δημιούργησες το πρώτο σου repo! 🎉
2. **Πήγαινε στον φάκελο του έργου σου**. Τώρα ας ανοίξουμε το τερματικό σου (μην ανησυχείς, δεν είναι τόσο τρομακτικό όσο φαίνεται!). Πρέπει να πούμε στον υπολογιστή σου πού βρίσκονται τα αρχεία του έργουσου. Πληκτρολόγησε αυτή την εντολή:
2. **Πήγαινε στον φάκελο του πρότζεκτ σου**. Τώρα άνοιξε το τερματικό σου (μη στεναχωριέσαι, δεν είναι τόσο τρομακτικό όσο φαίνεται!). Πρέπει να πεις στον υπολογιστή που βρίσκονται τα αρχεία του πρότζεκτσου. Πληκτρολόγησε αυτή την εντολή:
```bash
```bash
cd [name of your folder]
cd [name of your folder]
```
```
**Τι κάνουμε εδώ:**
**Τι κάνουμε εδώ:**
- Βασικά λέμε στον υπολογιστή "Πήγαινε στον φάκελο του έργου μου"
- Στην ουσία λέμε «Ε, υπολογιστή, πάμε στον φάκελο του πρότζεκτ μου»
- Είναι σαννα ανοίγεις έναν συγκεκριμένο φάκελο στην επιφάνεια εργασίαςσου, αλλά το κάνουμε με εντολές κειμένου
- Είναι σαννα ανοίγεις έναν συγκεκριμένο φάκελο στην επιφάνεια εργασίας, αλλά το κάνουμε με εντολές κειμένου
- Αντικατάστησε το `[name of your folder]` με το πραγματικό όνομα του φακέλου του έργουσου
- Αντικατέστησε το `[name of your folder]` με το πραγματικό όνομα του φακέλου του πρότζεκτσου
3. **Μεταμόρφωσε τον φάκελοσου σε αποθετήριο Git**. Εδώ γίνεται η μαγεία! Πληκτρολόγησε:
3. **Μεταμόρφωσε τον φάκελόσου σε αποθετήριο Git**. Εδώ γίνεται η μαγεία! Πληκτρολόγησε:
```bash
```bash
git init
git init
```
```
**Τι μόλις συνέβη (πολύ ωραία πράγματα!):**
**Τιέγινε μόλις (πολύ ωραία πράγματα!):**
- Το Git μόλις δημιούργησε έναν κρυφό φάκελο `.git`στο έργοσου– δεν θα τον δεις, αλλά είναι εκεί!
- Το Git μόλις δημιούργησε έναν κρυφό φάκελο `.git`μέσα στο πρότζεκτσου– δεν θα τον δεις, αλλά είναι εκεί!
- Οκανονικός σου φάκελος είναι τώρα ένα "αποθετήριο" που μπορεί να παρακολουθεί κάθε αλλαγή που κάνεις
- Οφάκελος σου έγινε «αποθετήριο» που μπορεί να παρακολουθεί κάθε αλλαγή που κάνεις
- Σκέψου το σαννα δίνεις στον φάκελοσου υπερδυνάμεις να θυμάται τα πάντα
- Σκέψου το σαννα δίνεις στον φάκελόσου υπερδυνάμεις να θυμάται τα πάντα
4. **Δες τι συμβαίνει**. Ας δούμε τι πιστεύει το Git για το έργο σου αυτή τη στιγμή:
4. **Δες τι γίνεται**. Ας δούμε τι λέει το Git για το πρότζεκτ σου τώρα:
- Αρχεία με **κόκκινο** είναι αρχεία που έχουν αλλαγές αλλά δεν είναι έτοιμα να αποθηκευτούν ακόμα
- Τα αρχεία με **κόκκινο** είναι αυτά που έχουν αλλαγές αλλά δεν είναι έτοιμα για αποθήκευση ακόμα
- Αρχεία με **πράσινο** (όταν τα δεις) είναι έτοιμα να αποθηκευτούν
- Τα αρχεία με **πράσινο** (όταν τα βλέπεις) είναι έτοιμα να αποθηκευτούν
- Το Git είναι χρήσιμο λέγοντάς σου ακριβώς τι μπορείς να κάνεις στη συνέχεια
- Το Git σε βοηθά λέγοντάς σου ακριβώς τι μπορείς να κάνεις στη συνέχεια
> 💡 **Επαγγελματική συμβουλή**: Η εντολή `git status` είναι ο καλύτερός σου φίλος! Χρησιμοποίησέ την κάθε φορά που μπερδεύεσαι. Είναι σαννα ρωτάς το Git «Ε, τι γίνεται τώρα;»
5. **Ετοίμασε τα αρχεία σουγια αποθήκευση** (αυτό λέγεται "staging"):
```bash
git add .
```
**Τι μόλις κάναμε:**
- Είπαμε στο Git «Ε, θέλω να συμπεριλάβω ΟΛΑ τα αρχεία μου στην επόμενη αποθήκευση»
- Το`.` σημαίνει «όλα όσα είναι σε αυτόν τον φάκελο»
- Τώρα τα αρχεία σου είναι «staged» και έτοιμα για το επόμενο βήμα
**Θέλεις να είσαι πιο επιλεκτικός;** Μπορείς να προσθέσεις μόνο συγκεκριμένα αρχεία:
```bash
git add [file or folder name]
```
**Γιατί μπορεί να θες να το κάνεις αυτό;**
- Μερικές φορές θέλεις να αποθηκεύσεις σχετικές αλλαγές μαζί
- Σε βοηθά να οργανώνεις τη δουλειά σου σε λογικά κομμάτια
- Κάνει πιο εύκολο το να καταλάβεις τι άλλαξε και πότε
**Άλλαξες γνώμη;** Μην ανησυχείς! Μπορείς να αφαιρέσεις αρχεία από το στάδιο έτσι:
```bash
# Αποστάδιοποιήστε τα πάντα
git reset
# Αποστάδιοποιήστε μόνο ένα αρχείο
git reset [file name]
```
Μην ανησυχείς – αυτό δεν διαγράφει τη δουλειά σου, απλά βγάζει τα αρχεία από το «έτοιμα για αποθήκευση» σωρό.
6. **Αποθήκευσε τη δουλειά σου οριστικά** (κάνε την πρώτη σου commit!):
```bash
git commit -m "first commit"
```
**🎉 Συγχαρητήρια! Μόλις έκανες το πρώτο σου commit!**
**Τι μόλις έγινε:**
- Το Git πήρε ένα «στιγμιότυπο» όλων των «staged» αρχείων αυτή ακριβώς τη στιγμή
- Το μήνυμα commit «first commit» εξηγεί τι είναι αυτό το σημείο αποθήκευσης
- Το Git έδωσε σε αυτό το στιγμιότυπο μια μοναδική ταυτότητα ώστε να το βρίσκεις πάντα αργότερα
- Επίσημα ξεκίνησες να παρακολουθείς την ιστορία του πρότζεκτ σου!
> 💡 **Μηνύματα για μελλοντικά commits**: Για τις επόμενες commits σου, γίνε πιο περιγραφικός! Αντί για «updated stuff», δοκίμασε «Προσθήκη φόρμας επικοινωνίας στην αρχική σελίδα» ή «Διόρθωση σφάλματος στο μενού πλοήγησης». Ο μελλοντικός εαυτός σου θα σε ευχαριστήσει!
7. **Σύνδεσε το τοπικό πρότζεκτ σου με το GitHub**. Προς το παρόν, το πρότζεκτ σου υπάρχει μόνο στον υπολογιστή σου. Ας το συνδέσουμε με το αποθετήριο GitHub γιανα μπορείς να το μοιραστείς με τον κόσμο!
Πάμε πρώτα στη σελίδα του αποθετηρίου σου στο GitHub και αντίγραψε το URL. Μετά έλα πίσω εδώ και πληκτρολόγησε:
(Αντικατέστησε αυτό το URL με το πραγματικό URL του αποθετηρίου σου!)
> 💡 **Συμβουλή ειδικού**: Η εντολή `git status` είναι ο καλύτερος σου φί
**Τι μόλις κάναμε:**
- Δημιουργήσαμε μια σύνδεση μεταξύ του τοπικού σας έργου και του αποθετηρίου σας στο GitHub.
- Δημιουργήσαμε μια σύνδεση μεταξύ του τοπικού σου έργου και του αποθετηρίου σου στο GitHub
- Το "Origin" είναι απλώς ένα ψευδώνυμο για το αποθετήριο σας στο GitHub – είναι σαννα προσθέτετε μια επαφή στο τηλέφωνό σας.
- Το "Origin" είναι απλώς ένα ψευδώνυμο για το αποθετήριο σου στο GitHub – είναι σαννα προσθέτεις μια επαφή στο τηλέφωνό σου
- Τώρα το τοπικό Git σας ξέρει πού να στείλει τον κώδικά σας όταν είστε έτοιμοι να τον μοιραστείτε.
- Τώρα το τοπικό σουGit ξέρει πού να στείλει τον κώδικά σου όταν είσαι έτοιμος να τον μοιραστείς
💡 **Πιο εύκολος τρόπος**: Αν έχετε εγκατεστημένο το GitHub CLI, μπορείτε να το κάνετε με μία εντολή:
💡 **Πιο εύκολος τρόπος**: Αν έχεις εγκατεστημένο το GitHub CLI, μπορείς να το κάνεις με μία εντολή:
```bash
```bash
gh repo create my-repo --public --push --source=.
gh repo create my-repo --public --push --source=.
```
```
8. **Στείλτε τον κώδικά σας στο GitHub** (η μεγάλη στιγμή!):
8. **Στείλε τον κώδικά σου στο GitHub** (η μεγάλη στιγμή!):
```bash
```bash
git push -u origin main
git push -u origin main
```
```
**🚀 Αυτό είναι! Ανεβάζετε τον κώδικά σας στο GitHub!**
**🚀 Αυτό είναι! Μεταφορτώνεις τον κώδικά σου στο GitHub!**
**Τι συμβαίνει:**
**Τι συμβαίνει:**
- Οι δεσμεύσεις σας ταξιδεύουν από τον υπολογιστή σας στο GitHub.
- Οιαλλαγές σου ταξιδεύουν από τον υπολογιστή σου στο GitHub
- Η σημαία `-u` δημιουργεί μια μόνιμη σύνδεση ώστε οι μελλοντικές αποστολές να είναι πιο εύκολες.
- Η σημαία `-u` δημιουργεί μια μόνιμη σύνδεση ώστε τα μελλοντικά push να είναι πιο εύκολα
- Το "main" είναι το όνομα του κύριου κλάδου σας (σαν τον κύριο φάκελο).
- Το "main" είναι το όνομα του κύριου κλάδου σου (σανο βασικός φάκελος)
- Μετά από αυτό, μπορείτε απλώς να πληκτρολογείτε `git push`για μελλοντικές αποστολές!
- Μετά από αυτό, μπορείς απλά να πληκτρολογείς`git push`για μελλοντικές αποστολές!
💡 **Σημείωση**: Ανο κλάδος σας έχει διαφορετικό όνομα (όπως "master"), χρησιμοποιήστε αυτό το όνομα. Μπορείτε να το ελέγξετε με την εντολή `git branch --show-current`.
💡 **Γρήγορη σημείωση**: Ανο κλάδος σου ονομάζεται διαφορετικά (πχ "master"), χρησιμοποίησε αυτό το όνομα. Μπορείς να το δεις με`git branch --show-current`.
9. **Η νέα σας καθημερινή ρουτίνα κωδικοποίησης** (εδώ γίνεται εθιστικό!):
9. **Ο νέος καθημερινός ρυθμός κωδικοποίησης σου** (εδώ γίνεται εθιστικό!):
Από εδώ και πέρα, κάθε φορά που κάνετε αλλαγές στο έργο σας, ακολουθείτε αυτή την απλή διαδικασία τριών βημάτων:
Από εδώ και πέρα, κάθε φορά που κάνεις αλλαγές στο έργο σου, ακολουθείς αυτόν τον απλό τριπλό χορό:
- Κάντε κάποιες καταπληκτικές αλλαγές στον κώδικά σας ✨
- Κάνε μερικές φανταστικές αλλαγές στον κώδικά σου ✨
- Προσθέστε τις με `git add` ("Γεια σου Git, δώσε προσοχή σε αυτές τις αλλαγές!")
- Πρόσθεσέ τες με `git add` ("Hey Git, δώσε προσοχή σε αυτές τις αλλαγές!")
- Αποθηκεύστε τις με `git commit` και ένα περιγραφικό μήνυμα (ο μελλοντικός εαυτός σας θα σας ευχαριστήσει!)
- Αποθήκευσέ τες με `git commit` και ένα περιγραφικό μήνυμα (το μελλοντικό εσύ θα σε ευχαριστεί!)
- Μοιραστείτε τις με τον κόσμο χρησιμοποιώντας `git push` 🚀
- Μοιράσου τις με τον κόσμο χρησιμοποιώντας `git push` 🚀
- Επαναλάβετε – σοβαρά, αυτό γίνεται τόσο φυσικό όσο η αναπνοή!
- Επανάλαβε – σοβαρά, γίνεται τόσο φυσικό όσο το να αναπνέεις!
Λατρεύω αυτή τη διαδικασία γιατί είναι σαννα έχετε πολλαπλά σημεία αποθήκευσης σε ένα βιντεοπαιχνίδι. Κάνατε μια αλλαγή που αγαπάτε; Δεσμεύστε την! Θέλετε να δοκιμάσετε κάτι ριψοκίνδυνο; Κανένα πρόβλημα – μπορείτε πάντα να επιστρέψετε στην τελευταία σας δέσμευση αν τα πράγματα πάνε στραβά!
Αγαπώ αυτή τη ροή εργασίας γιατί είναι σαννα έχεις πολλαπλά σημεία αποθήκευσης σε ένα βιντεοπαιχνίδι. Έκανες μια αλλαγή που σου αρέσει; Κάνε commit! Θέλεις να δοκιμάσεις κάτι ριψοκίνδυνο; Κανένα πρόβλημα – μπορείς πάντα να γυρίσεις στο τελευταίο commit σουαν τυχόν κάτι πάει στραβά!
> 💡 **Συμβουλή**: Ίσως θέλετε επίσης να υιοθετήσετε ένα αρχείο `.gitignore`γιανα αποτρέψετε αρχεία που δεν θέλετε να παρακολουθούνται από το GitHub – όπως το αρχείο σημειώσεων που αποθηκεύετε στον ίδιο φάκελο αλλά δεν έχει θέση σε ένα δημόσιο αποθετήριο. Μπορείτε να βρείτε πρότυπα για αρχεία `.gitignore` στο [.gitignore templates](https://github.com/github/gitignore) ή να δημιουργήσετε ένα χρησιμοποιώντας το [gitignore.io](https://www.toptal.com/developers/gitignore).
> 💡 **Συμβουλή**: Ίσως να θέλεις επίσης να χρησιμοποιήσεις ένα αρχείο `.gitignore`γιανα εμποδίσεις αρχεία που δεν θέλεις να παρακολουθείς να εμφανίζονται στο GitHub - όπως αυτό το αρχείο σημειώσεων που κρατάς στον ίδιο φάκελο αλλά δεν έχει θέση σε ένα δημόσιο αποθετήριο. Μπορείς να βρεις πρότυπα για αρχεία `.gitignore` στο [.gitignore templates](https://github.com/github/gitignore) ή να δημιουργήσεις ένα με το [gitignore.io](https://www.toptal.com/developers/gitignore).
Σκεφτείτε να υιοθετήσετε αυτές τις σύγχρονες πρακτικές:
**Πάρε μια στιγμή να γιορτάσεις και να αναλογιστείς:**
- Πώς ένιωσες όταν είδες τον κώδικά σουνα εμφανίζεται στο GitHub για πρώτη φορά;
- Ποιο βήμα φάνηκε το πιο μπερδεμένο και ποιο το πιο εύκολο;
- Μπορείς να εξηγήσεις τη διαφορά μεταξύ `git add`, `git commit`, και `git push` με δικά σου λόγια;
- **Conventional Commits**: Χρησιμοποιήστε μια τυποποιημένη μορφή μηνυμάτων δέσμευσης όπως `feat:`, `fix:`, `docs:` κ.λπ. Μάθετε περισσότερα στο [conventionalcommits.org](https://www.conventionalcommits.org/)
```mermaid
- **Atomic commits**: Κάντε κάθε δέσμευση να αντιπροσωπεύει μια λογική αλλαγή.
stateDiagram-v2
- **Συχνές δεσμεύσεις**: Δεσμεύστε συχνά με περιγραφικά μηνύματα αντί για μεγάλες, σπάνιες δεσμεύσεις.
[*] --> LocalFiles: Δημιουργία έργου
LocalFiles --> Staged: git add .
Staged --> Committed: git commit
Committed --> GitHub: git push
GitHub --> [*]: Επιτυχία! 🎉
#### Μηνύματα δέσμευσης
note right of Staged
Αρχεία έτοιμα για αποθήκευση
end note
Ένα εξαιρετικό θέμα μηνύματος δέσμευσης Git ολοκληρώνει την εξής πρόταση:
note right of Committed
Αν εφαρμοστεί, αυτή η δέσμευση θα <το θέμα σας εδώ>
Δημιουργία στιγμιότυπου
end note
```
> **Θυμήσου**: Ακόμα και έμπειροι προγραμματιστές ξεχνάνε κάποιες εντολές. Τονα γίνει αυτή η ροή εργασίας μυϊκή μνήμη χρειάζεται εξάσκηση – τα πας πολύ καλά!
Για το θέμα χρησιμοποιήστε την προστακτική, ενεστώτα: "αλλάζω" και όχι "άλλαξα" ή "αλλαγές".
#### Σύγχρονες ροές εργασίας με Git
Όπως στο θέμα, στο σώμα (προαιρετικό) χρησιμοποιήστε επίσης την προστακτική, ενεστώτα. Το σώμα πρέπει να περιλαμβάνει το κίνητρο για την αλλαγή και να το συγκρίνει με την προηγούμενη συμπεριφορά. Εξηγείτε το `γιατί`, όχι το `πώς`.
✅ Αφιερώστε λίγα λεπτά γιανα περιηγηθείτε στο GitHub. Μπορείτε να βρείτε ένα πραγματικά εξαιρετικό μήνυμα δέσμευσης; Μπορείτε να βρείτε ένα πραγματικά ελάχιστο; Ποια πληροφορία πιστεύετε ότι είναι η πιο σημαντική και χρήσιμη να μεταδοθεί σε ένα μήνυμα δέσμευσης;
Σκέψου να υιοθετήσεις αυτές τις σύγχρονες πρακτικές:
## Συνεργασία με άλλους (Το διασκεδαστικό μέρος!)
- **Conventional Commits**: Χρησιμοποίησε ένα τυποποιημένο φορμά μηνύματος commit όπως `feat:`, `fix:`, `docs:`, κλπ. Μάθε περισσότερα στο [conventionalcommits.org](https://www.conventionalcommits.org/)
- **Atomic commits**: Κάνε κάθε commit να αναπαριστά μια μόνο λογική αλλαγή
- **Συχνά commits**: Κάνε συχνά commits με περιγραφικά μηνύματα αντί για μεγάλα και σπάνια
Κρατηθείτε γιατί ΕΔΩ είναι που το GitHub γίνεται απολύτως μαγικό! 🪄 Έχετε κατακτήσει τη διαχείριση του δικού σας κώδικα, αλλά τώρα βουτάμε στο απόλυτο αγαπημένο μου μέρος – τη συνεργασία με εκπληκτικούς ανθρώπους από όλο τον κόσμο.
#### Μηνύματα commit
Φανταστείτε αυτό: ξυπνάτε αύριο και βλέπετε ότι κάποιος στο Τόκιο βελτίωσε τον κώδικά σας ενώ κοιμόσασταν. Μετά κάποιος στο Βερολίνο διορθώνει ένα σφάλμα που σας είχε κολλήσει. Μέχρι το απόγευμα, ένας προγραμματιστής στο Σάο Πάολο έχει προσθέσει μια λειτουργία που δεν είχατε καν σκεφτεί. Αυτό δεν είναι επιστημονική φαντασία – είναι απλώς μια τυπική μέρα στο σύμπαν του GitHub!
Ένας καλός τίτλος commit συμπληρώνει την εξής πρόταση:
Αν εφαρμοστεί, αυτή η αλλαγή θα <ο τίτλος σου εδώ>
Αυτό που με ενθουσιάζει πραγματικά είναι ότι οι δεξιότητες συνεργασίας που πρόκειται να μάθετε; Αυτές είναι οι ΑΚΡΙΒΩΣ ίδιες διαδικασίες που χρησιμοποιούν οι ομάδες της Google, της Microsoft και των αγαπημένων σας startups κάθε μέρα. Δεν μαθαίνετε απλώς ένα ωραίο εργαλείο – μαθαίνετε τη μυστική γλώσσα που κάνει ολόκληρο τον κόσμο του λογισμικού να συνεργάζεται.
Για τον τίτλο, χρησιμοποίησε την προστακτική, σε ενεστώτα: "change" όχι "changed" ή "changes".
Όπως στον τίτλο, στο σώμα (προαιρετικό) χρησιμοποίησε επίσης προστακτική, ενεστώτα. Το σώμα πρέπει να περιλαμβάνει το κίνητρο της αλλαγής και να συγκρίνει με την προηγούμενη συμπεριφορά. Εξηγείς το `γιατί`, όχι το `πώς`.
Σοβαρά, μόλις βιώσετε την αίσθηση του να έχει κάποιος να συγχωνεύσει το πρώτο σας pull request, θα καταλάβετε γιατί οι προγραμματιστές γίνονται τόσο παθιασμένοι με το ανοιχτό λογισμικό. Είναι σαννα είστε μέρος του μεγαλύτερου, πιο δημιουργικού ομαδικού έργου στον κόσμο!
✅ Πάρε λίγα λεπτά γιανα περιηγηθείς στο GitHub. Μπορείς να βρεις ένα πολύ καλό μήνυμα commit; Μπορείς να βρεις ένα πολύ μικρό; Ποια πληροφορία θεωρείς πιο σημαντική και χρήσιμη να περάσει ένα μήνυμα commit;
> Δείτε το βίντεο
## Συνεργασία με Άλλους (Το Διασκεδαστικό Μέρος!)
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
Πάρε βαθιά αναπνοή γιατί ΕΔΩ το GitHub γίνεται μαγικό! 🪄 Έχεις μάθει να διαχειρίζεσαι τον δικό σου κώδικα, αλλά τώρα βουτάμε στο αγαπημένο μου μέρος – τη συνεργασία με υπέροχους ανθρώπους από όλο τον κόσμο.
Φαντάσου το εξής: ξυπνάς αύριο και βλέπεις ότι κάποιος στο Τόκιο βελτίωσε τον κώδικά σου όσο κοιμόσουν. Μετά κάποιος στο Βερολίνο διορθώνει ένα σφάλμα που κολλούσες. Το απόγευμα, ένας προγραμματιστής στο Σάο Πάολο προσθέτει μια λειτουργία που δεν είχες καν φανταστεί. Αυτό δεν είναι επιστημονική φαντασία – είναι απλά Τρίτη στο σύμπαν του GitHub!
Ο κύριος λόγος γιανα βάλετε πράγματα στο GitHub ήταν να κάνετε δυνατή τη συνεργασία με άλλους προγραμματιστές.
Αυτό που με ενθουσιάζει πραγματικά είναι ότι οι δεξιότητες συνεργασίας που πρόκειται να μάθεις; Αυτές είναι ακριβώς οι ίδιες ροές εργασίας που χρησιμοποιούν ομάδες σε Google, Microsoft, και τις αγαπημένες σου startups κάθε μέρα. Δεν μαθαίνεις απλώς ένα κουλ εργαλείο – μαθαίνεις τη μυστική γλώσσα που κάνει όλο τον κόσμο του λογισμικού να συνεργάζεται.
Στο αποθετήριο σας, μεταβείτε στο `Insights > Community`γιανα δείτε πώς συγκρίνεται το έργο σας με τα προτεινόμενα πρότυπα κοινότητας.
Σοβαρά, μόλις νιώσεις την ώθηση του να συγχωνεύσεις το πρώτο σου pull request, θα καταλάβεις γιατί οι προγραμματιστές λατρεύουν το open source. Είναι σαννα συμμετέχεις στο μεγαλύτερο, πιο δημιουργικό ομαδικό έργο του κόσμου!
> Δες το βίντεο
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
Ο κύριος λόγος του να βάζεις πράγματα σε GitHub ήταν γιανα είναι δυνατή η συνεργασία με άλλους προγραμματιστές.
```mermaid
flowchart LR
A[🔍 Βρείτε το Έργο] --> B[🍴 Διακλάδωση Αποθετηρίου]
B --> C[📥 Αντιγραφή Τοπικά]
C --> D[🌿 Δημιουργία Κλαδιού]
D --> E[✏️ Κάντε Αλλαγές]
E --> F[💾 Καταχώρηση Αλλαγών]
F --> G[📤 Ανέβασμα Κλαδιού]
G --> H[🔄 Δημιουργία Αιτήματος Έλξης]
H --> I{Ανασκόπηση Διαχειριστή}
I -->|✅ Εγκεκριμένο| J[🎉 Συγχώνευση!]
I -->|❓ Αιτήθηκαν Αλλαγές| K[📝 Κάντε Ενημερώσεις]
K --> F
J --> L[🧹 Καθαρισμός Κλαδιών]
style A fill:#e3f2fd
style J fill:#e8f5e8
style L fill:#fff3e0
```
Στο αποθετήριό σου, πήγαινε στο `Insights > Community`γιανα δεις πώς συγκρίνεται το έργο σου με τα προτεινόμενα πρότυπα κοινότητας.
Θέλετε να κάνετε το αποθετήριο σας να φαίνεται επαγγελματικό και φιλόξενο; Μεταβείτε στο αποθετήριο σας και κάντε κλικ στο `Insights > Community`. Αυτή η καταπληκτική λειτουργία σας δείχνει πώς συγκρίνεται το έργο σας με αυτό που η κοινότητα του GitHub θεωρεί "καλές πρακτικές αποθετηρίου".
Θέλεις το αποθετήριό σουνα δείχνει επαγγελματικό και φιλόξενο; Πήγαινε στο αποθετήριό σου και κάνε κλικ στο `Insights > Community`. Αυτή η ωραία λειτουργία σου δείχνει πώς το έργο σου συγκρίνεται με αυτά που η κοινότητα του GitHub θεωρεί "καλές πρακτικές αποθετηρίου".
> 🎯 **Κάντε το έργο σας να ξεχωρίζει**: Ένα καλά οργανωμένο αποθετήριο με καλή τεκμηρίωση είναι σαννα έχετε μια καθαρή, φιλόξενη βιτρίνα. Δείχνει ότι νοιάζεστε για τη δουλειά σας και κάνει τους άλλους να θέλουν να συνεισφέρουν!
> 🎯 **Κάνε το έργο σουνα λάμψει**: Ένα καλοοργανωμένο αποθετήριο με καλή τεκμηρίωση είναι σαννα έχεις μια καθαρή, φιλόξενη βιτρίνα. Λέει στους ανθρώπους ότι νοιάζεσαι για τη δουλειά σου και τους κάνεινα θέλουν να συνεισφέρουν!
**Τι κάνει ένα αποθετήριο εξαιρετικό:**
**Αυτά κάνουν ένα αποθετήριο υπέροχο:**
| Τινα προσθέσετε | Γιατί είναι σημαντικό | Τι κάνει για εσάς |
| ΤιναΠροσθέσεις | Γιατί Είναι Σημαντικό | Τι Σου Κάνει |
> 💡 **Επαγγελματική συμβουλή**: Το GitHub παρέχει πρότυπα για όλα αυτά τα αρχεία. Κατά τη δημιουργία ενός νέου αποθετηρίου, επιλέξτε τα κουτάκια γιανα δημιουργήσετε αυτόματα αυτά τα αρχεία.
> 💡 **Επαγγελματική Συμβουλή**: Το GitHub παρέχει πρότυπα για όλα αυτά τα αρχεία. Κατά τη δημιουργία νέου αποθετηρίου, τσέκαρε τα κουτάκια γιανα δημιουργηθούν αυτόματα αυτά τα αρχεία.
**Σύγχρονες λειτουργίες του GitHub για εξερεύνηση:**
- **Κανόνες προστασίας κλάδων** για επιβολή προτύπων ποιότητας κώδικα
Όλοι αυτοί οι πόροι θα ωφελήσουν την ένταξη νέων μελών στην ομάδα. Και αυτά είναι συνήθως τα πράγματα που οι νέοι συνεισφέροντες εξετάζουν πριν καν κοιτάξουν τον κώδικά σας, γιανα δουν αν το έργο σας είναι το κατάλληλο μέρος γιανα αφιερώσουν τον χρόνο τους.
✅ Τα αρχεία README, αν και απαιτούν χρόνο γιανα προετοιμαστούν, συχνά παραμελούνται από πολυάσχολους συντηρητές. Μπορείτε να βρείτε ένα παράδειγμα ενός ιδιαίτερα περιγραφικού; Σημείωση: υπάρχουν μερικά [εργαλεία γιανα βοηθήσουν στη δημιουργία καλών README](https://www.makeareadme.com/) που ίσως θέλετε να δοκιμάσετε.
Όλοι αυτοί οι πόροι βοηθούν την ένταξη νέων μελών στην ομάδα. Και αυτά είναι συνήθως τα πράγματα που κοιτάνε οι νέοι συνεισφέροντες πριν καν δουν τον κώδικά σου, γιανα καταλάβουν αν το έργο σου είναι το σωστό μέρος γιανα αφιερώσουν τον χρόνο τους.
✅ Τα αρχεία README, αν και παίρνουν χρόνο να προετοιμαστούν, συχνά παραμελούνται από τους φορτωμένους διαχειριστές. Μπορείς να βρεις ένα παράδειγμα ιδιαίτερα περιγραφικού; Σημείωση: υπάρχουν μερικά [εργαλεία που βοηθούν στη δημιουργία καλών README](https://www.makeareadme.com/) που μπορεί να θέλεις να δοκιμάσεις.
### Εργασία: Συγχώνευση κώδικα
### Εργασία: Συγχώνευση κώδικα
Τα έγγραφα συνεισφοράς βοηθούν τους ανθρώπους να συνεισφέρουν στο έργο. Εξηγεί τι είδους συνεισφορές αναζητάτε και πώς λειτουργεί η διαδικασία. Οι συνεισφέροντες θα χρειαστεί να περάσουν από μια σειρά βημάτων γιανα μπορέσουν να συνεισφέρουν στο αποθετήριο σας στο GitHub:
Τα έγγραφα συνεισφοράς βοηθούν τους ανθρώπους να συμβάλουν στο έργο. Εξηγούν τους τύπους των συνεισφορών που αναζητάς και πώς λειτουργεί η διαδικασία. Οι συνεισφέροντες θα χρειαστεί να περάσουν από μια σειρά βημάτων γιανα μπορέσουν να συμβάλουν στο αποθετήριό σου στο GitHub:
1. **Forking το αποθετήριο σας**. Πιθανότατα θα θέλετε οι άνθρωποι να_fork_ το έργο σας. Το Forking σημαίνει τη δημιουργία ενός αντιγράφου του αποθετηρίου σας στο προφίλ τους στο GitHub.
1. **Fork του αποθετηρίου σου** Πιθανόν να θέλεις οι άνθρωποι να κάνουν _fork_ του έργου σου. Forking σημαίνει να δημιουργούν ένα αντίγραφο του αποθετηρίου σου στο προφίλ τους στο GitHub.
1. **Κλωνοποίηση**. Από εκεί θα κλωνοποιήσουν το έργο στον τοπικό τους υπολογιστή.
1. **Κλωνοποίηση**. Από εκεί θα κλωνοποιήσουν το έργο στον τοπικό τους υπολογιστή.
1. **Δημιουργία κλάδου**. Θα θέλετε να τους ζητήσετενα δημιουργήσουν έναν _κλάδο_για τη δουλειά τους.
1. **Δημιουργία κλάδου**. Θα θελήσεις να τους ζητήσειςνα δημιουργήσουν έναν _κλάδο_για τη δουλειά τους.
1. **Εστίαση της αλλαγής σε μία περιοχή**. Ζητήστε από τους συνεισφέροντες να επικεντρώσουν τις συνεισφορές τους σε ένα πράγμα τη φορά – έτσι οι πιθανότητες να μπορέσετε να_συγχωνεύσετε_ τη δουλειά τους είναι μεγαλύτερες. Φανταστείτενα γράφουν μια διόρθωση σφάλματος, να προσθέτουν μια νέα λειτουργία και να ενημερώνουν αρκετές δοκιμές – τι γίνεται αν θέλετε ή μπορείτε να εφαρμόσετε μόνο 2 από τις 3 ή 1 από τις 3 αλλαγές;
1. **Εστίαση της αλλαγής σε μια περιοχή**. Ζήτα από τους συνεισφέροντες να συγκεντρώσουν τις αλλαγές τους σε ένα θέμα κάθε φορά - έτσι οι πιθανότητες να μπορέσεις να_συγχωνεύσεις_ τη δουλειά τους είναι μεγαλύτερες. Φαντάσουνα γράφουν μια διόρθωση σφάλματος, να προσθέτουν μια νέα λειτουργία, και να ενημερώνουν διάφορα τεστ - τι γίνεται αν θες ή μπορείς να υλοποιήσεις μόνο 2 από τα 3, ή 1 από τα 3;
✅ Φανταστείτε μια κατάσταση όπου οι κλάδοι είναι ιδιαίτερα κρίσιμοι για τη συγγραφή και την αποστολή καλού κώδικα. Ποιες περιπτώσεις χρήσης μπορείτε να σκεφτείτε;
✅ Φαντάσου μια κατάσταση όπου οι κλάδοι είναι ιδιαίτερα κρίσιμοι για τονα γράφεις και να παραδίδεις καλό κώδικα. Τι περιπτώσεις χρήσης μπορείς να σκεφτείς;
> Σημείωση, γίνετε η αλλαγή που θέλετε να δείτε στον κόσμο και δημιουργήστε κλάδους για τη δική σας δουλειά επίσης. Οποιαδήποτε δέσμευση κάνετε θα γίνει στον κλάδο που έχετε "επιλέξει". Χρησιμοποιήστε `git status`γιανα δείτε ποιος είναι αυτός ο κλάδος.
> Σημείωση, να είσαι η αλλαγή που θέλεις να δεις στον κόσμο, και δημιούργησε κλάδους και για τη δική σου δουλειά. Οποιαδήποτε commits κάνεις θα γίνουν στον κλάδο που είσαι "checked out" αυτή τη στιγμή. Χρησιμοποίησε `git status`γιανα δεις ποιος είναι αυτός ο κλάδος.
Ας περάσουμε από τη διαδικασία ενός συνεισφέροντα. Υποθέστε ότι ο συνεισφέρων έχει ήδη κάνει _fork_ και _clone_ το αποθετήριο, ώστε να έχει ένα Git repo έτοιμο για εργασία στον τοπικό του υπολογιστή:
Ας δούμε μια ροή εργασίας συνεισφέροντα. Υποθέτουμε ότι ο συνεισφέροντας έχει ήδη _fork-άρει_ και _κλωνοποιήσει_ το αποθετήριο, οπότε έχει ένα Git repo έτοιμο για δουλειά στον τοπικό του υπολογιστή:
1. **Δημιουργία κλάδου**. Χρησιμοποιήστε την εντολή `git branch`γιανα δημιουργήσετε έναν κλάδο που θα περιέχει τις αλλαγές που σκοπεύουννα συνεισφέρουν:
1. **Δημιουργία κλάδου**. Χρησιμοποίησε την εντολή `git branch`γιανα δημιουργήσεις έναν κλάδο που θα περιέχει τις αλλαγές που θέλουννα συνεισφέρουν:
```bash
```bash
git branch [branch-name]
git branch [branch-name]
```
```
> 💡 **Σύγχρονη προσέγγιση**: Μπορείτε επίσης να δημιουργήσετε και να μεταβείτε στον νέο κλάδο με μία εντολή:
> 💡 **Σύγχρονη Προσέγγιση**: Μπορείς επίσης να δημιουργήσεις και να μεταβείς στον νέο κλάδο με μια εντολή:
```bash
```bash
git switch -c [branch-name]
git switch -c [branch-name]
```
```
1. **Μετάβαση στον κλάδο εργασίας**. Μεταβείτε στον συγκεκριμένο κλάδο και ενημερώστε τον κατάλογο εργασίας με `git switch`:
1. **Μετάβαση στον κλάδο εργασίας**. Μετακινήσου στον καθορισμένο κλάδο και ενημέρωσε το φάκελο εργασίας με `git switch`:
```bash
```bash
git switch [branch-name]
git switch [branch-name]
```
```
> 💡 **Σύγχρονη σημείωση**: Το`git switch` είναι η σύγχρονη αντικατάσταση του `git checkout`όταν αλλάζετε κλάδους. Είναι πιο σαφές και ασφαλές για αρχάριους.
> 💡 **Σύγχρονη Σημείωση**: Το`git switch` είναι η σύγχρονη αντικατάσταση του `git checkout`για αλλαγές κλάδων. Είναι πιο σαφές και ασφαλές για αρχάριους.
1. **Κάντε δουλειά**. Σε αυτό το σημείο θέλετε να προσθέσετε τις αλλαγές σας. Μην ξεχάσετε να ενημερώσετε το Git γι' αυτές με τις παρακάτω εντολές:
1. **Κάνε δουλειά**. Σε αυτό το σημείο θέλεις να προσθέσεις τις αλλαγές σου. Μην ξεχνάς να ενημερώνεις το Git με τις παρακάτω εντολές:
```bash
```bash
git add .
git add .
git commit -m "my changes"
git commit -m "my changes"
```
```
> ⚠️ **Ποιότητα μηνύματος δέσμευσης**: Βεβαιωθείτε ότι δίνετε στη δέσμευσή σας ένα καλό όνομα, τόσο για εσάς όσο και για τον συντηρητή του αποθετηρίου που βοηθάτε. Να είστε συγκεκριμένοι σχετικά με το τι αλλάξατε!
> ⚠️ **Ποιότητα Μηνύματος Commit**: Βεβαιώσου ότι δίνεις ένα καλό όνομα στο commit σου, τόσο για δικό σου όφελος όσο και για τον διαχειριστή του αποθετηρίου που βοηθάς. Να είσαι συγκεκριμένος σε τι άλλαξες!
1. **Συνδυάστε τη δουλειά σας με τον κλάδο `main`**. Σε κάποιο σημείο τελειώνετε τη δουλειά σας και θέλετε να τη συνδυάσετε με αυτή του κλάδου `main`. Ο κλάδος `main` μπορεί να έχει αλλάξει εν τω μεταξύ, οπότε βεβαιωθείτε ότι πρώτα τον ενημερώνετε με τις παρακάτω εντολές:
1. **Συνένωσε τη δουλειά σου με τον κλάδο `main`**. Κάποια στιγμή τελειώνεις τη δουλειά και θέλεις να τη συνενώσεις με τον κλάδο `main`. Ο κλάδος `main` μπορεί να έχει αλλάξει στο μεταξύ, οπότε βεβαιώσου πρώτα ότι τον ενημερώνεις με τις παρακάτω εντολές:
```bash
```bash
git switch main
git switch main
git pull
git pull
```
```
Σε αυτό το σημείο θέλετε να βεβαιωθείτε ότι τυχόν_συγκρούσεις_, καταστάσεις όπου το Git δεν μπορεί εύκολα να_συνδυάσει_ τις αλλαγές, συμβαίνουν στον κλάδο εργασίας σας. Επομένως, εκτελέστε τις παρακάτω εντολές:
Σε αυτό το σημείο θέλεις να βεβαιωθείς ότι οποιεσδήποτε_συγκρούσεις_, καταστάσεις όπου το Git δεν μπορεί εύκολα να_συνενώσει_ τις αλλαγές, συμβαίνουν στον κλάδο εργασίας σου. Επομένως τρέξε τις παρακάτω εντολές:
```bash
```bash
git switch [branch_name]
git switch [branch_name]
git merge main
git merge main
```
```
Η εντολή `git merge main` θα φέρει όλες τις αλλαγές από το`main` στον κλάδο σας. Ελπίζουμε να μπορείτε απλώς να συνεχίσετε. Αν όχι, το VS Code θα σας πει πού το Git είναι _μπερδεμένο_ και απλώς τροποποιείτε τα επηρεαζόμενα αρχεία γιανα πείτε ποιο περιεχόμενο είναι το πιο ακριβές.
Η εντολή `git merge main` θα φέρει όλες τις αλλαγές από τον`main` στον κλάδο σου. Ελπίζουμε να μπορείς να συνεχίσεις απλά. Αν όχι, το VS Code θα σου δείξει πού το Git είναι _μπλεγμένο_ και απλώς τροποποιείς τα επηρεασμένα αρχεία γιανα πεις ποιο περιεχόμενο είναι το πιο σωστό.
💡 **Σύγχρονη εναλλακτική**: Σκεφτείτε να χρησιμοποιήσετε το `git rebase`για καθαρότερο ιστορικό:
💡 **Σύγχρονη εναλλακτική**: Σκέψου να χρησιμοποιήσεις το `git rebase`για καθαρότερο ιστορικό:
```bash
```bash
git rebase main
git rebase main
```
```
Αυτό επαναλαμβάνει τις δεσμεύσεις σας πάνω από τον τελευταίο κλάδο `main`, δημιουργώντας ένα γραμμικό ιστορικό.
Αυτό αναπαράγει τα commits σου πάνω από τον τελευταίο κλάδο main, δημιουργώντας μια γραμμική ιστορία.
1. **Στείλε τη δουλειά σου στο GitHub**. Τονα στείλεις τη δουλειά σου στο GitHub σημαίνει δύο πράγματα. Να στείλεις τον κλάδο σου στο αποθετήριο σου και μετά να ανοίξεις ένα PR, Pull Request.
```bash
git push --set-upstream origin [branch-name]
```
Η παραπάνω εντολή δημιουργεί τον κλάδο στο fork που έκανες.
### 🤝 **Έλεγχος Δεξιοτήτων Συνεργασίας: Έτοιμος να Συνεργαστείς με Άλλους;**
**Ας δούμε πώς νιώθεις σχετικά με τη συνεργασία:**
- Σε κάνει πια νόημα η ιδέα του forking και των pull requests;
- Ποιο είναι το ένα πράγμα σχετικά με τη δουλειά με κλάδους που θέλεις να εξασκήσεις περισσότερο;
- Πόσο άνετα νιώθεις να συνεισφέρεις σε έργο κάποιου άλλου;
```mermaid
mindmap
root((Συνεργασία Git))
Branching
Feature branches
Bug fix branches
Experimental work
Pull Requests
Code review
Discussion
Testing
Best Practices
Clear commit messages
Small focused changes
Good documentation
```
> **Ενίσχυση αυτοπεποίθησης**: Κάθε προγραμματιστής που θαυμάζεις ήταν κάποτε αγχωμένος για το πρώτο του pull request. Η κοινότητα του GitHub είναι απίστευτα φιλόξενη για τους νέους!
1. **Στείλτε τη δουλειά σας στο GitHub**. Η αποστολή της δουλειάς σας στο GitHub σημαίνει δύο πράγματα. Αποστολή του κ
1. **Άνοιξε ένα PR**. Έπειτα, θες να ανοίξεις ένα PR. Το κάνεις πηγαίνοντας στο forked αποθετήριο στο GitHub. Θα δεις μια ένδειξη που θα ρωτάει αν θες να δημιουργήσεις νέο PR, πατάς εκεί και ανοίγει μια διεπαφή όπου μπορείς να αλλάξεις τον τίτλο του μηνύματος commit, να δώσεις μια πιο κατάλληλη περιγραφή. Τώρα ο διαχειριστής του αποθετηρίου που έκανες fork θα δει αυτό το PR και _σταυρωμένα δάχτυλα_ θα το εκτιμήσει και θα το _συγχωνεύσει_. Είσαι πια συνεισφέρων, γεια σου :)
🤞Ας ελπίσουμε ότι θα περάσουν όλοι οι έλεγχοι και οι ιδιοκτήτες του έργου θα συγχωνεύσουν τις αλλαγές σας στο έργο🤞
Ενημερώστε τον τρέχοντα τοπικό κλάδο εργασίας σας με όλες τις νέες δεσμεύσεις από τον αντίστοιχο απομακρυσμένο κλάδο στο GitHub:
💡 **Σύγχρονη συμβουλή**: Μπορείς επίσης να δημιουργήσεις PRs χρησιμοποιώντας το GitHub CLI:
- Σύνδεση με σχετικά issues χρησιμοποιώντας λέξεις κλειδιά όπως "Fixes #123"
- Πρόσθεσε στιγμιότυπα για αλλαγές στην διεπαφή χρήστη
- Ζήτα συγκεκριμένους reviewers
- Χρησιμοποίησε draft PRs για δουλειά σε εξέλιξη
- Βεβαιώσου ότι όλα τα CI checks περάσαν πριν ζητήσεις ανασκόπηση
1. **Καθάρισμα**. Θεωρείται καλή πρακτική να_καθαρίζετε_ μετά από μια επιτυχημένη συγχώνευση ενός PR. Θέλετε να καθαρίσετε τόσο το τοπικό σας branch όσο και το branch που στείλατε στο GitHub. Πρώτα ας το διαγράψουμε τοπικά με την ακόλουθη εντολή:
```bash
git branch -d [branch-name]
```
Βεβαιωθείτε ότι θα πάτε στη σελίδα του forked repo στο GitHub στη συνέχεια και θα αφαιρέσετε το απομακρυσμένο branch που μόλις στείλατε.
`Pull request` φαίνεται ένας αστείος όρος γιατί στην πραγματικότητα θέλετε να στείλετε τις αλλαγές σας στο έργο. Αλλά ο διαχειριστής (ιδιοκτήτης του έργου) ή η βασική ομάδα πρέπει να εξετάσουν τις αλλαγές σας πριν τις συγχωνεύσουν με το "main" branch του έργου, οπότε στην πραγματικότητα ζητάτε μια απόφαση αλλαγής από έναν διαχειριστή.
Ένα pull request είναι το μέρος όπου συγκρίνετε και συζητάτε τις διαφορές που εισάγονται σε ένα branch με αναθεωρήσεις, σχόλια, ενσωματωμένα τεστ και άλλα. Ένα καλό pull request ακολουθεί περίπου τους ίδιους κανόνες με ένα μήνυμα commit. Μπορείτε να προσθέσετε αναφορά σε ένα θέμα στο issue tracker, όταν η δουλειά σας για παράδειγμα διορθώνει ένα θέμα. Αυτό γίνεται με τη χρήση `#` ακολουθούμενο από τον αριθμό του θέματος σας. Για παράδειγμα `#97`.
🤞 Σταυρώστε τα δάχτυλα να περάσουν όλοι οι έλεγχοι και ο ιδιοκτήτης(οι) του έργου να συγχωνεύσουν τις αλλαγές σας στο έργο 🤞
Ενημερώστε το τρέχον τοπικό σας branch εργασίας με όλες τις νέες καταχωρίσεις από το αντίστοιχο απομακρυσμένο branch στο GitHub:
`git pull`
`git pull`
## Συμμετοχή σε έργα ανοιχτού κώδικα (Η ευκαιρία σας να κάνετε τη διαφορά!)
## Συνεισφορά στο Open Source (Η Ευκαιρία σας να Κάνετε Διαφορά!)
Είστε έτοιμοι για κάτι που θα σας αφήσει άφωνους; 🤯 Ας μιλήσουμε για τη συμμετοχή σε έργα ανοιχτού κώδικα – και μόνο που το σκέφτομαι, νιώθω ενθουσιασμό!
Είστε έτοιμοι για κάτι που θα σας μείνει πραγματικά αξέχαστο; 🤯 Ας μιλήσουμε για το πώς να συνεισφέρετε σε έργα ανοικτού κώδικα – και νιώθω ρίγος μόνο που το σκέφτομαι και το μοιράζομαι μαζί σας!
Αυτή είναι η ευκαιρία σας να γίνετε μέρος κάτι πραγματικά εξαιρετικού. Φανταστείτε να βελτιώνετε εργαλεία που χρησιμοποιούν εκατομμύρια προγραμματιστές καθημερινά ή να διορθώνετε ένα σφάλμα σε μια εφαρμογή που αγαπούν οι φίλοι σας. Δεν είναι απλώς ένα όνειρο – αυτό είναι η συμμετοχή σε έργα ανοιχτού κώδικα!
Αυτή είναι η ευκαιρία σας να γίνετε μέρος κάτι πραγματικά εξαιρετικού. Φανταστείτε να βελτιώνετε τα εργαλεία που χρησιμοποιούν εκατομμύρια προγραμματιστές καθημερινά, ή να διορθώνετε ένα σφάλμα σε μια εφαρμογή που αγαπούν οι φίλοι σας. Αυτό δεν είναι απλά ένα όνειρο – αυτή είναι η ουσία της συνεισφοράς στο open source!
Αυτό που με ενθουσιάζει κάθε φορά που το σκέφτομαι: κάθε εργαλείο που έχετε μάθει –ο επεξεργαστής κώδικα σας, τα frameworks που θα εξερευνήσουμε, ακόμα και ο browser που διαβάζετε αυτό – ξεκίνησε με κάποιον ακριβώς σαν εσάς να κάνει την πρώτη του συνεισφορά. Ο λαμπρός προγραμματιστής που δημιούργησε την αγαπημένη σας επέκταση του VS Code; Ήταν κάποτε αρχάριος που έκανε κλικ στο "create pull request" με τρεμάμενα χέρια, όπως ετοιμάζεστε να κάνετε κι εσείς.
Αυτό που με συγκινεί κάθε φορά που το σκέφτομαι είναι το εξής: κάθε εργαλείο που μαθαίνετε –ο κειμενογράφος κώδικα σας, τα πλαίσια που θα εξερευνήσουμε, ακόμα και ο περιηγητής που διαβάζετε αυτό το κείμενο – ξεκίνησε με κάποιον ακριβώς όπως εσείς να κάνει την πρώτη του συνεισφορά. Ο έξυπνος developer που έφτιαξε το αγαπημένο σας extension για το VS Code; Ήταν κάποτε ένας αρχάριος που πάτησε το "create pull request" με τρεμάμενα χέρια, ακριβώς όπως πρόκειταινα κάνετε κι εσείς.
Και το πιο όμορφο μέρος: η κοινότητα ανοιχτού κώδικα είναι σαν τη μεγαλύτερη αγκαλιά του διαδικτύου. Τα περισσότερα έργα αναζητούν ενεργά νέους συμμετέχοντες και έχουν θέματα με ετικέτα "good first issue" ειδικά για άτομα σαν εσάς! Οι συντηρητές ενθουσιάζονται πραγματικά όταν βλέπουν νέους συμμετέχοντες γιατί θυμούνται τα δικά τους πρώτα βήματα.
Και το πιο όμορφο είναι: η κοινότητα του open source είναι σαν τη μεγαλύτερη αγκαλιά στο διαδίκτυο. Τα περισσότερα έργα ψάχνουν ενεργά για νέους συμμετέχοντες και έχουν ζητήματα με την ετικέτα "good first issue" ειδικά για ανθρώπους σαν εσάς! Οι διαχειριστές πραγματικά ενθουσιάζονται όταν βλέπουν νέους συνεισφέροντες, γιατί θυμούνται τα πρώτα τους βήματα.
Δεν μαθαίνετε απλώς να προγραμματίζετε εδώ – προετοιμάζεστε να γίνετε μέλος μιας παγκόσμιας οικογένειας δημιουργών που ξυπνούν κάθε μέρα σκεπτόμενοι "Πώς μπορούμε να κάνουμε τον ψηφιακό κόσμο λίγο καλύτερο;" Καλώς ήρθατε στην ομάδα! 🌟
```mermaid
flowchart TD
A[🔍 Εξερευνήστε το GitHub] --> B[🏷️ Βρείτε "καλό πρώτο θέμα"]
B --> C[📖 Διαβάστε Οδηγίες Συμβολής]
C --> D[🍴 Fork Αποθετηρίου]
D --> E[💻 Ρυθμίστε το Τοπικό Περιβάλλον]
E --> F[🌿 Δημιουργήστε Κλάδο Χαρακτηριστικού]
F --> G[✨ Κάντε τη Συμβολή σας]
G --> H[🧪 Δοκιμάστε τις Αλλαγές σας]
H --> I[📝 Γράψτε Καθαρό Commit]
I --> J[📤 Push & Δημιουργία PR]
J --> K[💬 Αλληλεπιδράστε με τα Σχόλια]
K --> L[🎉 Συγχωνεύτηκε! Είστε Συνεργάτης!]
L --> M[🌟 Βρείτε το Επόμενο Θέμα]
style A fill:#e1f5fe
style L fill:#c8e6c9
style M fill:#fff59d
```
Δεν μαθαίνετε απλά να κωδικοποιείτε εδώ – ετοιμάζεστε να γίνετε μέλη μιας παγκόσμιας οικογένειας δημιουργών που ξυπνάνε κάθε μέρα σκεπτόμενοι "Πώς μπορούμε να κάνουμε τον ψηφιακό κόσμο λίγο καλύτερο;" Καλώς ήρθατε στην παρέα! 🌟
Πρώτα, ας βρούμε ένα αποθετήριο (ή **repo**) στο GitHub που σας ενδιαφέρει και στο οποίο θέλετε να συνεισφέρετε μια αλλαγή. Θα θέλετε να αντιγράψετε το περιεχόμενό του στον υπολογιστή σας.
Πρώτα, βρείτε ένα αποθετήριο (ή **repo**) στο GitHub που σας ενδιαφέρει και στο οποίο θέλετε να συνεισφέρετε μια αλλαγή. Θα θέλετε να αντιγράψετε τα περιεχόμενά του στον υπολογιστή σας.
✅ Ένας καλός τρόπος γιανα βρείτε αποθετήρια φιλικά προς αρχάριους είναι να [αναζητήσετε με την ετικέτα 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
✅ Ένας καλός τρόπος να βρείτε repos φιλικά για αρχάριους είναι να [αναζητήσετε με την ετικέτα 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Υπάρχουν διάφοροι τρόποι αντιγραφής κώδικα. Ένας τρόπος είναι να "κλωνοποιήσετε" το περιεχόμενο του αποθετηρίου, χρησιμοποιώντας HTTPS, SSH ή το GitHub CLI (Command Line Interface).
Υπάρχουν διάφοροι τρόποι γιανα αντιγράψετε κώδικα. Ένας τρόπος είναι να "κλωνοποιήσετε" τα περιεχόμενα του αποθετηρίου, χρησιμοποιώντας HTTPS, SSH ή το GitHub CLI (Διεπαφή Γραμμής Εντολών).
Ανοίξτε το τερματικό σας και κλωνοποιήστε το αποθετήριο ως εξής:
Ανοίξτε το τερματικό σας και κλωνοποιήστε το αποθετήριο ως εξής:
Μπορείτε επίσης να ανοίξετε ολόκληρο το έργο χρησιμοποιώντας:
Μπορείτε επίσης να ανοίξετε ολόκληρο το έργο χρησιμοποιώντας:
- **[GitHub Codespaces](https://github.com/features/codespaces)** - Το περιβάλλον ανάπτυξης cloud του GitHub με VS Code στον browser
- **[GitHub Codespaces](https://github.com/features/codespaces)** - Το περιβάλλον ανάπτυξης στο cloud του GitHub με VS Code στον περιηγητή
- **[GitHub Desktop](https://desktop.github.com/)** - Μια εφαρμογή GUI γιαλειτουργίες Git
- **[GitHub Desktop](https://desktop.github.com/)** - Μια εφαρμογή GUI για εργασίες Git
- **[GitHub.dev](https://github.dev)** - Πατήστε το πλήκτρο `.` σε οποιοδήποτε repo του GitHub γιανα ανοίξετε το VS Code στον browser
- **[GitHub.dev](https://github.dev)** - Πατήστε το πλήκτρο `.` σε οποιοδήποτε repo στο GitHub γιανα ανοίξετε το VS Code μέσα στον περιηγητή
- **VS Code** με την επέκταση GitHub Pull Requests
- **VS Code** με την επέκταση GitHub Pull Requests
Τέλος, μπορείτε να κατεβάσετε τον κώδικα σε έναν συμπιεσμένο φάκελο.
Τέλος, μπορείτε να κατεβάσετε τον κώδικα σε συμπιεσμένο φάκελο.
### Μερικά ακόμα ενδιαφέροντα πράγματα για το GitHub
### Μερικά ακόμα ενδιαφέροντα για το GitHub
Μπορείτε νακάνετε star, watch και/ή "fork" σε οποιοδήποτε δημόσιο αποθετήριο στο GitHub. Μπορείτε να βρείτε τα αποθετήρια που έχετε κάνει star στο αναπτυσσόμενο μενού πάνω δεξιά. Είναι σαννα κάνετε σελιδοδείκτες, αλλά για κώδικα.
Μπορείτε ναβάλετε αστέρι, να παρακολουθείτε και/ή να "fork" οποιοδήποτε δημόσιο αποθετήριο στο GitHub. Μπορείτε να βρείτε τα αποθετήρια με αστέρι στο μενού επάνω δεξιά. Είναι σαν σελιδοδείκτης, αλλά για κώδικα.
Τα έργα έχουν έναν παρακολουθητή θεμάτων, κυρίως στο GitHub στην καρτέλα "Issues", εκτός αν αναφέρεται διαφορετικά, όπου οι άνθρωποι συζητούν θέματα που σχετίζονται με το έργο. Και η καρτέλα Pull Requests είναι όπου οι άνθρωποι συζητούν και αξιολογούν αλλαγές που βρίσκονται σε εξέλιξη.
Τα έργα έχουν σύστημα αναφοράς θεμάτων (issue tracker), κυρίως στο GitHub στην καρτέλα "Issues" εκτός αν αναφέρεται διαφορετικά, όπου συζητούνται θέματα σχετικά με το έργο. Η καρτέλα Pull Requests είναι το μέρος όπου συζητούν και ελέγχουν τις αλλαγές που βρίσκονται σε εξέλιξη.
Τα έργα μπορεί επίσης να έχουν συζητήσεις σε φόρουμ, λίστες αλληλογραφίας ή κανάλια συνομιλίας όπως Slack, Discord ή IRC.
Τα έργα μπορεί επίσης να έχουν συζητήσεις σε φόρουμ, λίστες αλληλογραφίας, ή κανάλια συνομιλίας όπως Slack, Discord ή IRC.
🔧 **Σύγχρονα χαρακτηριστικά του GitHub**:
🔧 **Μοντέρνα χαρακτηριστικά του GitHub**:
- **GitHub Discussions** - Ενσωματωμένο φόρουμ για συζητήσεις της κοινότητας
- **GitHub Discussions** - Ενσωματωμένο φόρουμ για συζητήσεις κοινοτήτων
- **Insights tab** - Αναλύσεις για συνεισφέροντες, δεσμεύσεις και υγεία του έργου
- **Καρτέλα Insights** - Αναλύσεις για τους συνεισφέροντες, τα commits και την υγεία του έργου
- **Projects tab** - Ενσωματωμένα εργαλεία διαχείρισης έργων του GitHub
- **Καρτέλα Projects** - Τα ενσωματωμένα εργαλεία διαχείρισης έργου του GitHub
✅ Ρίξτε μια ματιά στο νέο σας αποθετήριο GitHub και δοκιμάστε μερικά πράγματα, όπως να επεξεργαστείτε ρυθμίσεις, να προσθέσετε πληροφορίες στο repo σας, να δημιουργήσετε ένα έργο (όπως έναν πίνακα Kanban) και να ρυθμίσετε το GitHub Actions για αυτοματοποίηση. Υπάρχουν πολλά που μπορείτε να κάνετε!
✅ Ρίξτε μια ματιά στο νέο σας αποθετήριο στο GitHub και δοκιμάστε μερικά πράγματα, όπως να επεξεργαστείτε ρυθμίσεις, να προσθέσετε πληροφορίες στο repo σας, να δημιουργήσετε ένα project (π.χ. πίνακα Kanban) και να ρυθμίσετε GitHub Actions για αυτοματοποίηση. Μπορείτε να κάνετε πολλά!
---
---
## 🚀 Πρόκληση
## 🚀 Πρόκληση
Εντάξει, ήρθε η ώρα να δοκιμάσετε τις νέες σας υπερδυνάμεις στο GitHub! 🚀 Εδώ είναι μια πρόκληση που θα σας κάνει να κατανοήσετε τα πάντα με τον πιο ικανοποιητικό τρόπο:
Εντάξει, ήρθε η ώρα να δοκιμάσετε τις φανταστικές νέες δυνατότητες του GitHub σας! 🚀 Ιδού μια πρόκληση που θα κάνει τα πάντα να «κουμπώσουν» με τον πιο ικανοποιητικό τρόπο:
Πάρτε έναν φίλο (ή εκείνο το μέλος της οικογένειας που πάντα σας ρωτάει τι κάνετε με όλα αυτά τα "πράγματα υπολογιστών") και ξεκινήστε μαζί μια συνεργατική περιπέτεια προγραμματισμού! Εδώ είναι που συμβαίνει η πραγματική μαγεία – δημιουργήστε ένα έργο, αφήστε τους να το κάνουν fork, δημιουργήστε μερικούς κλάδους και συγχωνεύστε αλλαγές σαν επαγγελματίες.
Πάρτε έναν φίλο (ή κάποιον από την οικογένεια που πάντα ρωτά τι κάνετε με όλα αυτά τα "πράγματα με τους υπολογιστές") και ξεκινήστε μια συνεργατική περιπέτεια κωδικοποίησης μαζί! Εδώ συμβαίνει η πραγματική μαγεία – δημιουργήστε ένα project, αφήστε να το «forkάρει» ο φίλος σας, κάντε μερικά branches και συγχωνεύστε αλλαγές σαν επαγγελματίες που γίνεστε.
Δεν θα σας πω ψέματα – πιθανότατα θα γελάσετε κάποια στιγμή (ειδικά όταν προσπαθήσετε και οι δύο να αλλάξετε την ίδια γραμμή), ίσως ξύσετε το κεφάλι σας με απορία, αλλά σίγουρα θα έχετε αυτές τις εκπληκτικές στιγμές "αχα!" που κάνουν όλη τη μάθηση να αξίζει τον κόπο. Επιπλέον, υπάρχει κάτι ξεχωριστό στο να μοιράζεστε αυτή την πρώτη επιτυχημένη συγχώνευση με κάποιον άλλο – είναι σαν μια μικρή γιορτή για το πόσο μακριά έχετε φτάσει!
Δεν θα πω ψέματα – πιθανότατα θα γελάσετε κάποια στιγμή (ειδικά όταν προσπαθείτε και οι δύο να αλλάξετε την ίδια γραμμή), μπορεί να ξύνουν το κεφάλι σας από σύγχυση, αλλά σίγουρα θα ζήσετε αυτές τις καταπληκτικές στιγμές «α, τώρα!» που κάνουν όλη τη μάθηση να αξίζει. Επιπλέον, υπάρχει κάτι ξεχωριστό στο να μοιράζεστε την πρώτη επιτυχημένη συγχώνευση με κάποιον άλλο – είναι σαν μικρός εορτασμός για την πορεία σας!
Δεν έχετε ακόμα συνεργάτη προγραμματισμού; Κανένα πρόβλημα! Η κοινότητα του GitHub είναι γεμάτη με απίστευτα φιλικούς ανθρώπους που θυμούνται πώς ήταν να είναι νέοι. Αναζητήστε αποθετήρια με ετικέτες "good first issue" – ουσιαστικά λένε "Γεια σας αρχάριοι, ελάτε να μάθετε μαζί μας!" Πόσο φοβερό είναι αυτό;
Δεν έχετε ακόμα παρέα για κώδικα; Κανένα πρόβλημα! Η κοινότητα του GitHub είναι γεμάτη από απίστευτα φιλικούς ανθρώπους που θυμούνται πώς ήταν να είσαι νέος. Ψάξτε για αποθετήρια με ετικέτες "good first issue" – βασικά σημαίνουν «Ελάτε αρχάριοι, μάθετε μαζί μας!» Πόσο τέλειο είναι αυτό;
## Κουίζ μετά το μάθημα
## Quiz μετά το μάθημα
[Κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/en/)
Ουάου! 🎉 Κοιτάξτε σας – μόλις κατακτήσατε τα βασικά του GitHub σαν απόλυτοι πρωταθλητές! Αν νιώθετε λίγο γεμάτοι αυτή τη στιγμή, είναι απολύτως φυσιολογικό και ειλικρινά καλό σημάδι. Μόλις μάθατε εργαλεία που μου πήρε εβδομάδεςνα νιώσω άνετα όταν ξεκίνησα.
Ουφ! 🎉 Κοίτα τι κατάφερες – μόλις κυριάρχησες στα βασικά του GitHub σαν απόλυτος πρωταθλητής! Αν το μυαλό σου νιώθει λίγο γεμάτο αυτή τη στιγμή, είναι απόλυτα φυσιολογικό και ειλικρινά καλό σημάδι. Μόλις έμαθες εργαλεία που μου πήραν εβδομάδες γιανα νιώσω άνετα όταν ξεκίνησα.
Το Git και το GitHub είναι απίστευτα ισχυρά (πραγματικά ισχυρά), και κάθε προγραμματιστής που γνωρίζω – συμπεριλαμβανομένων αυτών που τώρα φαίνονται σαν μάγοι – έπρεπε να εξασκηθεί και να σκοντάψει λίγο πριν καταλάβει τα πάντα. Το γεγονός ότι ολοκληρώσατε αυτό το μάθημα σημαίνει ότι είστε ήδη στο δρόμο γιανα κατακτήσετε μερικά από τα πιο σημαντικά εργαλεία στο κιτ εργαλείων ενός προγραμματιστή.
Το Git και το GitHub είναι απίστευτα ισχυρά (εντελώς σοβαρά ισχυρά), και κάθε προγραμματιστής που ξέρω – ακόμα κι αυτοί που τώρα μοιάζουν μάγοι – έπρεπε να εξασκηθεί και να σκοντάψει λίγο προτού καταλάβει όλα όσα χρειάζεται. Το γεγονός ότι πέρασες αυτό το μάθημα σημαίνει ότι είσαι ήδη καθ’ οδόν να κυριαρχήσεις σε μερικά από τα πιο σημαντικά εργαλεία στο οπλοστάσιο ενός developer.
Ακολουθούν μερικοί απολύτως φανταστικοί πόροι γιανα σας βοηθήσουν να εξασκηθείτε και να γίνετε ακόμα πιο καταπληκτικοί:
Να μερικοί φανταστικοί πόροι γιανα κάνεις πρακτική και να γίνεις ακόμη πιο καταπληκτικός:
- [Οδηγός για τη συνεισφορά σε λογισμικό ανοιχτού κώδικα](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) –Ο χάρτης σας γιανα κάνετε τη διαφορά
- [Οδηγός συνεισφοράς σε λογισμικό ανοικτού κώδικα](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) –Ο χάρτης πορείας σουγιανα κάνεις τη διαφορά
- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) –Κρατήστε το κοντάγια γρήγορη αναφορά!
- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) –Κράτα το κοντά σουγια γρήγορη αναφορά!
Και θυμηθείτε: η εξάσκηση φέρνει πρόοδο, όχι τελειότητα! Όσο περισσότερο χρησιμοποιείτε το Git και το GitHub, τόσο πιο φυσικό θα γίνεται. Το GitHub έχει δημιουργήσει μερικά εκπληκτικά διαδραστικά μαθήματα που σας επιτρέπουν να εξασκηθείτε σε ένα ασφαλές περιβάλλον:
Και θυμήσου: η εξάσκηση φέρνει πρόοδο, όχι τελειότητα! Όσο περισσότερο χρησιμοποιείς το Git και το GitHub, τόσο πιο φυσικό γίνεται. Το GitHub έχει δημιουργήσει μερικά εκπληκτικά διαδραστικά μαθήματα που σε αφήνουν να κάνεις πρακτική σε ασφαλές περιβάλλον:
- [Εισαγωγή στο GitHub](https://github.com/skills/introduction-to-github)
- [Εισαγωγή στο GitHub](https://github.com/skills/introduction-to-github)
**Αισθάνεστε περιπετειώδεις; Δοκιμάστε αυτά τα σύγχρονα εργαλεία:**
**Νιώθεις περιπετειώδης; Δες αυτά τα μοντέρνα εργαλεία:**
- [Τεκμηρίωση GitHub CLI](https://cli.github.com/manual/) – Για όταν θέλετε να νιώσετε σαν μάγος της γραμμής εντολών
- [Τεκμηρίωση GitHub CLI](https://cli.github.com/manual/) – Για όταν θέλεις να νιώσεις μάγος της γραμμής εντολών
- [Τεκμηρίωση GitHub Codespaces](https://docs.github.com/en/codespaces) –Προγραμματίστε στο cloud!
- [Τεκμηρίωση GitHub Codespaces](https://docs.github.com/en/codespaces) –Κάνε κώδικα στο cloud!
- [Τεκμηρίωση GitHub Actions](https://docs.github.com/en/actions) – Αυτοματοποιήστε τα πάντα
- [Τεκμηρίωση GitHub Actions](https://docs.github.com/en/actions) – Αυτοματοποιήστε τα πάντα
- [Καλές πρακτικές Git](https://www.atlassian.com/git/tutorials/comparing-workflows) –Αναβαθμίστε τις δεξιότητές σας στη ροή εργασίας
- [Καλές πρακτικές Git](https://www.atlassian.com/git/tutorials/comparing-workflows) –Ανεβάστε το επίπεδο του workflow σας
## Πρόκληση GitHub Copilot Agent 🚀
## Πρόκληση GitHub Copilot Agent 🚀
Χρησιμοποιήστε τη λειτουργία Agent γιανα ολοκληρώσετε την παρακάτω πρόκληση:
Χρησιμοποίησε τη λειτουργία Agent γιανα ολοκληρώσεις την παρακάτω πρόκληση:
**Περιγραφή:** Δημιουργήστε ένα συνεργατικό έργο ανάπτυξης ιστοσελίδων που να δείχνει ολόκληρη τη ροή εργασίας του GitHub που μάθατε σε αυτό το μάθημα. Αυτή η πρόκληση θα σας βοηθήσει να εξασκηθείτε στη δημιουργία αποθετηρίου, στις δυνατότητες συνεργασίας και στις σύγχρονες ροές εργασίας Git σε ένα πραγματικό σενάριο.
**Περιγραφή:** Δημιούργησε ένα συνεργατικό έργο ανάπτυξης ιστοσελίδας που να παρουσιάζει πλήρως το workflow του GitHub που έμαθες σε αυτό το μάθημα. Αυτή η πρόκληση θα σε βοηθήσει να εξασκηθείς στη δημιουργία αποθετηρίου, τις δυνατότητες συνεργασίας και τα σύγχρονα workflows του Git σε ένα πραγματικό σενάριο.
**Πρόκληση:** Δημιουργήστε ένα νέο δημόσιο αποθετήριο GitHub για ένα απλό έργο "Πόροι Ανάπτυξης Ιστοσελίδων". Το αποθετήριο πρέπει να περιλαμβάνει ένα καλά δομημένο αρχείο README.md που να απαριθμεί χρήσιμα εργαλεία και πόρους ανάπτυξης ιστοσελίδων, οργανωμένα ανά κατηγορίες (HTML, CSS, JavaScript, κ.λπ.). Ρυθμίστε το αποθετήριο με σωστά πρότυπα κοινότητας, συμπεριλαμβανομένων άδειας χρήσης, οδηγιών συνεισφοράς και κώδικα δεοντολογίας. Δημιουργήστε τουλάχιστον δύο κλάδους λειτουργιών: έναν για την προσθήκη πόρων CSS και έναν για πόρους JavaScript. Κάντε δεσμεύσεις σε κάθε κλάδο με περιγραφικά μηνύματα δεσμεύσεων και στη συνέχεια δημιουργήστε pull requests γιανα συγχωνεύσετε τις αλλαγές πίσω στο main. Ενεργοποιήστε χαρακτηριστικά του GitHub όπως τα Issues, Discussions και ρυθμίστε μια βασική ροή εργασίας GitHub Actions για αυτοματοποιημένους ελέγχους.
**Προτροπή:** Δημιούργησε ένα νέο δημόσιο αποθετήριο GitHub για ένα απλό έργο "Web Development Resources". Το αποθετήριο πρέπει να περιλαμβάνει ένα καλά δομημένο αρχείο README.md που να απαριθμεί χρήσιμα εργαλεία και πόρους για ανάπτυξη ιστοσελίδων, οργανωμένα κατά κατηγορίες (HTML, CSS, JavaScript κλπ). Ρύθμισε το αποθετήριο με τα κατάλληλα πρότυπα κοινότητας, συμπεριλαμβανομένης άδειας, κατευθυντήριων γραμμών συνεισφοράς και κώδικα δεοντολογίας. Δημιούργησε τουλάχιστον δύο feature branches: ένα για προσθήκη πόρων CSS και ένα για πόρους JavaScript. Κάνε commits σε κάθε branch με περιγραφικά μηνύματα commit, και μετά δημιούργησε pull requests γιανα συγχωνεύσεις τις αλλαγές πίσω στο main. Ενεργοποίησε λειτουργίες GitHub όπως Issues, Discussions και ρύθμισε μια βασική ροή εργασίας GitHub Actions για αυτοματοποιημένους ελέγχους.
## Εργασία
## Ανάθεση
Η αποστολή σας, αν επιλέξετε να την αποδεχτείτε: Ολοκληρώστε το μάθημα [Εισαγωγή στο GitHub](https://github.com/skills/introduction-to-github) στο GitHub Skills. Αυτό το διαδραστικό μάθημα θα σας επιτρέψει να εξασκηθείτε σε όλα όσα μάθατε σε ένα ασφαλές, καθοδηγούμενο περιβάλλον. Επιπλέον, θα λάβετε ένα ωραίο σήμα όταν το ολοκληρώσετε! 🏅
Η αποστολή σου, αν επιλέξεις να την δεχτείς: Ολοκλήρωσε το μάθημα [Introduction to GitHub](https://github.com/skills/introduction-to-github) στο GitHub Skills. Αυτό το διαδραστικό μάθημα θα σε αφήσει να εξασκηθείς σε όλα όσα έμαθες σε ένα ασφαλές, καθοδηγούμενο περιβάλλον. Επιπλέον, θα κερδίσεις ένα ωραίο σήμα όταν το τελειώσεις! 🏅
**Αισθάνεστε έτοιμοι για περισσότερες προκλήσεις;**
**Νιώθεις έτοιμος για περισσότερες προκλήσεις;**
- Ρυθμίστε τον έλεγχο ταυτότητας SSH για τον λογαριασμό σας στο GitHub (τέλος οι κωδικοί!)
- Ρύθμισε αυθεντικοποίηση SSH για τον λογαριασμό σου στο GitHub (τέλος οι κωδικοί!)
- Δοκιμάστε να χρησιμοποιήσετε το GitHub CLI για τις καθημερινές σας λειτουργίες Git
- Δοκίμασε να χρησιμοποιήσεις το GitHub CLI για τις καθημερινές λειτουργίες Git
- Δημιουργήστε ένα αποθετήριο με μια ροή εργασίας GitHub Actions
- Δημιούργησε ένα αποθετήριο με ροή εργασίας GitHub Actions
- Εξερευνήστε το GitHub Codespaces ανοίγοντας αυτό το ίδιο αποθετήριο σε έναν επεξεργαστή βασισμένο στο cloud
- Εξερεύνησε το GitHub Codespaces ανοίγοντας αυτό ακριβώς το αποθετήριο σε έναν επεξεργαστή στο cloud
---
## 🚀 Το Χρονοδιάγραμμά σουγια την Ικανότητα στο GitHub
### ⚡ **Τι Μπορείς να Κάνεις στα Επόμενα 5 Λεπτά**
- [ ] Βάλε αστέρι σε αυτό το αποθετήριο και σε 3 άλλα έργα που σε ενδιαφέρουν
- [ ] Ρύθμισε τον έλεγχο ταυτότητας δύο παραγόντων στο λογαριασμό σου στο GitHub
- [ ] Δημιούργησε ένα απλό README για το πρώτο σου αποθετήριο
- [ ] Ακολούθησε 5 προγραμματιστές που σε εμπνέουν
### 🎯 **Τι Μπορείς να Επιτύχεις Αυτή την Ώρα**
- [ ] Ολοκλήρωσε το quiz μετά το μάθημα και σκέψου το ταξίδι σου στο GitHub
- [ ] Ρύθμισε κλειδιά SSH για αυθεντικοποίηση χωρίς κωδικό
- [ ] Κάνε το πρώτο σου ουσιαστικό commit με εξαιρετικό μήνυμα
- [ ] Εξερεύνησε την καρτέλα "Explore" του GitHub γιανα ανακαλύψεις τάσεις
- [ ] Πρακτική στο forkάρισμα ενός αποθετηρίου και στην αλλαγή ενός μικρού κομματιού κώδικα
### 📅 **Η Περιπέτειά σου στο GitHub για Μία Εβδομάδα**
- [ ] Ολοκλήρωσε τα μαθήματα GitHub Skills (Introduction to GitHub, Markdown)
- [ ] Κάνε το πρώτο σου pull request σε ένα έργο ανοικτού κώδικα
- [ ] Ρύθμισε έναν ιστότοπο GitHub Pages γιανα παρουσιάσεις τη δουλειά σου
- [ ] Συμμετοχή στις συζητήσεις GitHub Discussions για έργα που σε ενδιαφέρουν
- [ ] Δημιούργησε ένα αποθετήριο με σωστά πρότυπα κοινότητας (README, Άδεια κλπ)
- [ ] Δοκίμασε το GitHub Codespaces για ανάπτυξη στο cloud
### 🌟 **Η Μεταμόρφωσή σου σε Έναν Μήνα**
- [ ] Συνεισφέρε σε 3 διαφορετικά έργα ανοικτού κώδικα
- [ ] Γίνε μέντορας σε έναν νέο χρήστη του GitHub (δώσε πίσω!)
- [ ] Ρύθμισε αυτοματοποιημένες ροές εργασίας με GitHub Actions
- [ ] Δημιούργησε ένα portfolio που να δείχνει τις συνεισφορές σου στο GitHub
- [ ] Συμμετοχή σε Hacktoberfest ή παρόμοια κοινοτικά events
- [ ] Γίνε διαχειριστής δικού σου έργου στο οποίο συμβάλλουν και άλλοι
### 🎓 **Τελικός Έλεγχος Ικανότητας στο GitHub**
**Γιόρτασε το πόσο μακριά έφτασες:**
- Ποιο είναι το αγαπημένο σου χαρακτηριστικό στο GitHub;
- Ποια λειτουργία συνεργασίας σε ενθουσιάζει περισσότερο;
- Πόσο σίγουρος νιώθεις για τη συνεισφορά σου στο open source τώρα;
- Ποιο είναι το πρώτο έργο που θέλεις να συνεισφέρεις;
```mermaid
journey
title Το Ταξίδι Αυτοπεποίθησης στο GitHub Σου
section Σήμερα
Nervous: 3: You
Curious: 4: You
Excited: 5: You
section Αυτή την Εβδομάδα
Practicing: 4: You
Contributing: 5: You
Connecting: 5: You
section Επόμενος Μήνας
Collaborating: 5: You
Leading: 5: You
Inspiring Others: 5: You
```
> 🌍 **Καλώς ήρθες στην παγκόσμια κοινότητα προγραμματιστών!** Τώρα έχεις τα εργαλεία γιανα συνεργαστείς με εκατομμύρια προγραμματιστές παγκοσμίως. Η πρώτη σου συνεισφορά μπορεί να φαίνεται μικρή, αλλά θυμήσου – κάθε μεγάλο έργο ανοικτού κώδικα ξεκίνησε με κάποιον να κάνει το πρώτο του commit. Το ζήτημα δεν είναι αν θα αφήσεις το στίγμα σου, αλλά ποιο εκπληκτικό έργο θα ωφεληθεί πρώτα από τη μοναδική σου οπτική! 🚀
Θυμηθείτε: κάθε ειδικός ήταν κάποτε αρχάριος. Το έχετε! 💪
Θυμήσου: κάθε εμπειρογνώμονας ήταν κάποτε αρχάριος. Μπορείς! 💪
---
---
**Αποποίηση ευθύνης**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Αποποίηση Ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρότι προσπαθούμε για ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
> Σημειώσεις από [Tomomi Imura](https://twitter.com/girlie_mac)
> Σημείωση από [Tomomi Imura](https://twitter.com/girlie_mac)
Οι τύποι δεδομένων είναι μία από τις θεμελιώδεις έννοιες στη JavaScript που θα συναντήσετε σε κάθε πρόγραμμα που γράφετε. Σκεφτείτε τους τύπους δεδομένων σαν το σύστημα αρχειοθέτησης που χρησιμοποιούσαν οι αρχαίοι βιβλιοθηκάριοι στην Αλεξάνδρεια – είχαν συγκεκριμένα μέρη για πάπυρους που περιείχαν ποίηση, μαθηματικά και ιστορικά αρχεία. Η JavaScript οργανώνει πληροφορίες με παρόμοιο τρόπο, με διαφορετικές κατηγορίες για διαφορετικά είδη δεδομένων.
```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)!
> Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο [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. **Δηλώστε μια μεταβλητή**. Ας ξεκινήσουμε δημιουργώντας την πρώτη μας μεταβλητή:
1. **Δηλώστε μια μεταβλητή**. Ας ξεκινήσουμε δημιουργώντας την πρώτη μας μεταβλητή:
@ -55,11 +102,11 @@ CO_OP_TRANSLATOR_METADATA:
```
```
**Τι επιτυγχάνει αυτό:**
**Τι επιτυγχάνει αυτό:**
- Αυτό λέει στη JavaScript να δημιουργήσει μια θέση αποθήκευσης που ονομάζεται `myVariable`
- Ενημερώνει τη JavaScript να δημιουργήσει μια θέση αποθήκευσης που ονομάζεται `myVariable`
- Η JavaScript δεσμεύει χώρο στη μνήμη για αυτή τη μεταβλητή
- Η JavaScript δεσμεύει μνήμη για αυτή τη μεταβλητή
- Η μεταβλητή αυτή τη στιγμή δεν έχει τιμή (undefined)
- Η μεταβλητή αυτή τη στιγμή δεν έχει τιμή (undefined)
2. **Δώστε της μια τιμή**. Τώρα ας βάλουμε κάτι στη μεταβλητή μας:
2. **Δώστε της μια τιμή**. Τώρα βάλτε κάτι μέσα στη μεταβλητή μας:
```javascript
```javascript
myVariable = 123;
myVariable = 123;
@ -67,21 +114,21 @@ CO_OP_TRANSLATOR_METADATA:
**Πώς λειτουργεί η ανάθεση:**
**Πώς λειτουργεί η ανάθεση:**
- Ο τελεστής `=` αναθέτει την τιμή 123 στη μεταβλητή μας
- Ο τελεστής `=` αναθέτει την τιμή 123 στη μεταβλητή μας
- Η μεταβλητή περιέχει τώρα αυτή την τιμή αντί να είναι undefined
- Η μεταβλητή πλέον περιέχει αυτή την τιμή αντί για undefined
- Μπορείτε να αναφέρετε αυτή την τιμή σε όλο τον κώδικά σας χρησιμοποιώντας το`myVariable`
- Μπορείτε να αναφερθείτε σε αυτή την τιμή σε όλο τον κώδικα χρησιμοποιώντας `myVariable`
> Σημείωση: η χρήση του `=` σε αυτό το μάθημα σημαίνει ότι χρησιμοποιούμε έναν "τελεστή ανάθεσης", που χρησιμοποιείται γιανα ορίσουμε μια τιμή σε μια μεταβλητή. Δεν δηλώνει ισότητα.
> Σημείωση: Η χρήση του `=` σε αυτό το μάθημα σημαίνει ότι χρησιμοποιούμε έναν "τελεστή ανάθεσης", που χρησιμοποιείται γιανα ορίσουμε μια τιμή σε μια μεταβλητή. Δεν δηλώνει ισότητα.
3. **Κάντε το έξυπνα**. Στην πραγματικότητα, ας συνδυάσουμε αυτά τα δύο βήματα:
3. **Κάντε το έξυπνα**. Στην πραγματικότητα, ας συνδυάσουμε τα δύο αυτά βήματα:
```javascript
```javascript
let myVariable = 123;
let myVariable = 123;
```
```
**Αυτή η προσέγγιση είναι πιο αποτελεσματική:**
**Αυτή η προσέγγιση είναι πιο αποτελεσματική:**
- Δηλώνετε τη μεταβλητή και της αναθέτετε μια τιμή σε μία δήλωση
- Δηλώνετε τη μεταβλητή και αναθέτετε τιμή σε μία δήλωση
- Αυτή είναι η τυπική πρακτική μεταξύ των προγραμματιστών
- Αυτή είναι η συνήθης πρακτική μεταξύ των προγραμματιστών
- Μειώνει το μήκος του κώδικα διατηρώντας την σαφήνεια
- Μειώνει το μήκος του κώδικα ενώ διατηρεί την σαφήνεια
4. **Αλλάξτε γνώμη**. Τι γίνεται αν θέλουμε να αποθηκεύσουμε έναν διαφορετικό αριθμό;
4. **Αλλάξτε γνώμη**. Τι γίνεται αν θέλουμε να αποθηκεύσουμε έναν διαφορετικό αριθμό;
@ -89,34 +136,61 @@ CO_OP_TRANSLATOR_METADATA:
myVariable = 321;
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
```javascript
const MY_VARIABLE = 123;
const MY_VARIABLE = 123;
```
```
**Τι κάνει αυτός ο κώδικας:**
**Αυτό που κάνειο κώδικας:**
- **Δημιουργεί** μια σταθερά με όνομα `MY_VARIABLE` και τιμή 123
- **Δημιουργεί** μια σταθερά με όνομα `MY_VARIABLE`με τιμή 123
- **Χρησιμοποιεί** την ονομασία με κεφαλαία γράμματα για σταθερές
- **Χρησιμοποιεί** σύμβαση ονοματοδοσίας με κεφαλαία αναφορικά με τις σταθερές
- **Αποτρέπει** οποιαδήποτε μελλοντική αλλαγή αυτής της τιμής
- **Αποτρέπει** μελλοντικές αλλαγές σε αυτή την τιμή
Οι σταθερές έχουν δύο βασικούς κανόνες:
Οι σταθερές έχουν δύο βασικούς κανόνες:
- **Πρέπει να τους δώσετε μια τιμή αμέσως** – δεν επιτρέπονται κενές σταθερές!
- **Πρέπει να τους δώσετε τιμή αμέσως** – δεν επιτρέπονται κενές σταθερές!
- **Δεν μπορείτε ποτέ να αλλάξετε αυτή την τιμή** – η JavaScript θα εμφανίσει σφάλμα αν προσπαθήσετε. Ας δούμε τι εννοούμε:
- **Δεν μπορείτε ποτέ να αλλάξετε αυτή την τιμή** – η JavaScript θα εκτοξεύσει σφάλμα αν το προσπαθήσετε. Ας δούμε τι εννοώ:
**Απλή τιμή** - Το παρακάτω ΔΕΝ επιτρέπεται:
**Απλή τιμή** - Το παρακάτω ΔΕΝ επιτρέπεται:
@ -125,12 +199,12 @@ const MY_VARIABLE = 123;
PI = 4; // δεν επιτρέπεται
PI = 4; // δεν επιτρέπεται
```
```
**Τιπρέπει να θυμάστε:**
**Τινα θυμάστε:**
- **Προσπάθειες** επαναφοράς τιμής σε σταθερά θα προκαλέσουν σφάλμα
- **Οι προσπάθειες** για ανακαθορισμό μίας σταθεράς προκαλούν σφάλμα
- **Προστατεύει** σημαντικές τιμές από τυχαίες αλλαγές
- **Προστατεύει** σημαντικές τιμές από τυχαίες αλλαγές
- **Εξασφαλίζει** ότι η τιμή παραμένει σταθερή σε όλο το πρόγραμμα
- **Εξασφαλίζει** ότι η τιμή παραμένει σταθερή σε όλο το πρόγραμμα
**Η αναφορά αντικειμένου προστατεύεται** - Το παρακάτω ΔΕΝ επιτρέπεται:
**Προστασία αναφοράς αντικειμένου** - Το παρακάτω ΔΕΝ επιτρέπεται:
```javascript
```javascript
const obj = { a: 3 };
const obj = { a: 3 };
@ -149,26 +223,26 @@ const MY_VARIABLE = 123;
obj.a = 5; // επιτρέπεται
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 που αποθηκεύσαμε ήταν στην πραγματικότητα ένας τύπος δεδομένων αριθμού:
Θυμάστε τη μεταβλητή μας από πριν; Το 123 που αποθηκεύσαμε ήταν στην πραγματικότητα ένας τύπος δεδομένων αριθμού:
@ -176,45 +250,195 @@ const MY_VARIABLE = 123;
let myVariable = 123;
let myVariable = 123;
```
```
**Βασικά χαρακτηριστικά:**
**Κύρια χαρακτηριστικά:**
- Η JavaScript αναγνωρίζει αυτόματα τις αριθμητικές τιμές
- Η JavaScript αναγνωρίζει αυτόματα τις αριθμητικές τιμές
- Μπορείτε να εκτελέσετε μαθηματικές πράξεις με αυτές τις μεταβλητές
- Μπορείτε να εκτελέσετε μαθηματικές πράξεις με αυτές τις μεταβλητές
- Δεν απαιτείται ρητή δήλωση τύπου
- Δεν απαιτείται ρητή δήλωση τύπου
Οι μεταβλητές μπορούν να αποθηκεύουν όλους τους τύπους αριθμών, συμπεριλαμβανομένων δεκαδικών ή αρνητικών αριθμών. Οι αριθμοί μπορούν επίσης να χρησιμοποιηθούν με αριθμητικούς τελεστές, που καλύπτονται στην [επόμενη ενότητα](../../../../2-js-basics/1-data-types).
Οι μεταβλητές μπορούν να αποθηκεύουν όλους τους τύπους αριθμών, συμπεριλαμβανομένων δεκαδικών ή αρνητικών αριθμών. Οι αριθμοί μπορούν επίσης να χρησιμοποιηθούν με αριθμητικούς τελεστές, που καλύπτονται στην [επόμενη ενότητα](../../../../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 //αναμενόμενη απάντηση 3` |
| `-` | **Αφαίρεση**: Υπολογίζει τη διαφορά δύο αριθμών | `1 - 2 //αναμενόμενη απάντηση είναι -1` |
| `-` | **Αφαίρεση**: Υπολογίζει τη διαφορά μεταξύ δύο αριθμών | `1 - 2 //αναμενόμενη απάντηση -1`|
| `*` | **Πολλαπλασιασμός**: Υπολογίζει το γινόμενο δύο αριθμών | `1 * 2 //αναμενόμενη απάντηση είναι 2` |
| `*` | **Πολλαπλασιασμός**: Υπολογίζει το γινόμενο δύο αριθμών | `1 * 2 //αναμενόμενη απάντηση 2` |
| `/` | **Διαίρεση**: Υπολογίζει το πηλίκο δύο αριθμών | `1 / 2 //αναμενόμενη απάντηση είναι 0.5` |
| `/` | **Διαίρεση**: Υπολογίζει το πηλίκο δύο αριθμών | `1 / 2 //αναμενόμενη απάντηση 0.5`|
| `%` | **Υπόλοιπο**: Υπολογίζει το υπόλοιπο από τη διαίρεση δύο αριθμών | `1 % 2 //αναμενόμενη απάντηση είναι 1` |
| `%` | **Υπόλοιπο**: Υπολογίζει το υπόλοιπο της διαίρεσης δύο αριθμών | `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
```
### Μορφοποίηση Συμβολοσειρών
Η χειραγώγηση συμβολοσειρών σας επιτρέπει να συνδυάζετε στοιχεία κειμένου, να ενσωματώνετε μεταβλητές και να δημιουργείτε δυναμικό περιεχόμενο που αντιδρά στην κατάσταση του προγράμματος. Αυτή η τεχνική σας δίνει τη δυνατότητα να δημιουργείτε κείμενο προγραμματιστικά.
Συχνά χρειάζεται να ενώσετε πολλές συμβολοσειρές μεταξύ τους – αυτή η διαδικασία ονομάζεται συνένωση (concatenation).
Για να**συνδυάσετε** δύο ή περισσότερες συμβολοσειρές, ή να τις ενώσετε μαζί, χρησιμοποιήστε τον τελεστή `+`.
✅ Δοκιμάστε το! Δοκιμάστε μια αριθμητική πράξη στην κονσόλα του περιηγητή σας. Σας εκπλήσσουν τα αποτελέσματα;
- **Συνδυάζει** πολλαπλές συμβολοσειρές χρησιμοποιώντας τον τελεστή `+`
- **Ενώνει** τις συμβολοσειρές απευθείας χωρίς κενά στο πρώτο παράδειγμα
- **Προσθέτει** χαρακτήρες κενών `" "` μεταξύ συμβολοσειρών για ευαναγνωσιμότητα
- **Εισάγει** σημεία στίξης όπως κόμματα για σωστή μορφοποίηση
✅ Γιατί το `1 + 1 = 2` στη JavaScript, αλλά `'1' + '1' = 11;` Σκέψου το. Τι γίνεται με το `'1' + 1`;
### Συμβολοσειρές
Τα**template literals** είναι ένας άλλος τρόπος μορφοποίησης συμβολοσειρών, εκτός από τα εισαγωγικά χρησιμοποιείται το backtick. Οτιδήποτε δεν είναι απλό κείμενο πρέπει να τοποθετείται μέσα σε δείκτες `${ }`. Αυτό περιλαμβάνει και μεταβλητές που μπορεί να είναι συμβολοσειρές.
Στη JavaScript, τα κείμενα αναπαρίστανται ως συμβολοσειρές. Ο όρος "συμβολοσειρά" προέρχεται από την έννοια των χαρακτήρων που συνδέονται μεταξύ
```javascript
Μπορείτε να πετύχετε τους στόχους μορφοποίησής σας με οποιαδήποτε μέθοδο, αλλά τα template literals θα σεβαστούν τυχόν κενά και αλλαγές γραμμής.
let myString1 = "Hello";
let myString2 = "World";
✅ Πότε θα χρησιμοποιούσατε ένα template literal αντί για ένα απλό string;
`${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
Τα 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
```javascript
let myTrueBool = true;
let myTrueBool = true;
@ -223,42 +447,172 @@ let myFalseBool = false;
**Στο παραπάνω, έχουμε:**
**Στο παραπάνω, έχουμε:**
- **Δημιουργήσει** μια μεταβλητή που αποθηκεύει την Boolean τιμή `true`
- **Δημιουργήσει** μια μεταβλητή που αποθηκεύει την Boolean τιμή `true`
- **Δείξει** πώς να αποθηκεύσετε την Boolean τιμή `false`
- **Επιδείξει** πώς να αποθηκεύσουμε την Boolean τιμή `false`
- **Χρησιμοποιήσει** τις ακριβείς λέξεις-κλειδιά `true` και `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 🚀
## Πρόκληση GitHub Copilot Agent 🚀
Χρησιμοποιήστε τη λειτουργία 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) εδώ.
Μάθετε περισσότερα για τη [λειτουργία 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! 🎉
---
---
**Αποποίηση ευθύνης**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Αποποίηση ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Ενώ επιδιώκουμε την ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται η επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρεξηγήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης.
# Βασικά Στοιχεία JavaScript: Μέθοδοι και Συναρτήσεις
# JavaScript Basics: Μέθοδοι και Συναρτήσεις
Η επαναλαμβανόμενη γραφή του ίδιου κώδικα είναι μία από τις πιο συνηθισμένες απογοητεύσεις στον προγραμματισμό. Οι συναρτήσεις λύνουν αυτό το πρόβλημα, επιτρέποντάς σας να πακετάρετε τον κώδικα σε επαναχρησιμοποιήσιμα μπλοκ. Σκεφτείτε τις συναρτήσεις σαν τα τυποποιημένα μέρη που έκαναν τη γραμμή συναρμολόγησης του 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)!
> Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο [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
```javascript
function nameOfFunction() { // function definition
function nameOfFunction() { // ορισμός συνάρτησης
// function definition/body
// ορισμός/σώμα συνάρτησης
}
}
```
```
Ας το αναλύσουμε:
Αναλύοντας:
- Η λέξη-κλειδί `function` λέει στη JavaScript "Γεια, δημιουργώ μια συνάρτηση!"
- Το`nameOfFunction` είναι το σημείο όπου δίνετε στη συνάρτησή σας ένα περιγραφικό όνομα
- Η λέξη-κλειδί `function` λέει στη JavaScript "Ε, δημιουργώ μια συνάρτηση!"
- Οι παρενθέσεις `()` είναι το σημείο όπου μπορείτε να προσθέσετε παραμέτρους (θα το δούμε σύντομα)
- Το`nameOfFunction` είναι όπου δίνετε στη συνάρτηση σας ένα περιγραφικό όνομα
- Οι αγκύλες `{}` περιέχουν τον πραγματικό κώδικα που εκτελείται όταν καλείτε τη συνάρτηση
- Οι παρενθέσεις `()` είναι εκεί όπου μπορείτε να προσθέσετε παραμέτρους (θα φτάσουμε σε αυτό σύντομα)
- Οι αγκύλες `{}` περιέχουν τον κώδικα που εκτελείται όταν καλείτε τη συνάρτηση
Ας δημιουργήσουμε μια απλή συνάρτηση χαιρετισμού γιανα το δούμε στην πράξη:
Ας δημιουργήσουμε μια απλή συνάρτηση χαιρετισμού γιανα το δούμε στην πράξη:
@ -59,34 +108,57 @@ function displayGreeting() {
}
}
```
```
Αυτή η συνάρτηση εκτυπώνει "Hello, world!" στην κονσόλα. Μόλις την ορίσετε, μπορείτε να τη χρησιμοποιήσετε όσες φορές χρειαστεί.
Αυτή η συνάρτηση τυπώνει "Hello, world!" στην κονσόλα. Μόλις την ορίσετε, μπορείτε να τη χρησιμοποιήσετε όσες φορές χρειάζεται.
Για να εκτελέσετε (ή "καλέσετε") τη συνάρτησή σας, γράψτε το όνομά της ακολουθούμενο από παρενθέσεις. Η JavaScript σας επιτρέπει να ορίσετε τη συνάρτηση πριν ή μετά την κλήση της – η μηχανή της JavaScript θα χειριστεί τη σειρά εκτέλεσης.
Για να εκτελέσετε (ή να "καλέσετε") τη συνάρτηση σας, γράψτε το όνομά της ακολουθούμενο από παρενθέσεις. Η JavaScript επιτρέπει να ορίσετε τη συνάρτηση πριν ή μετά την κλήση της – η μηχανή της JavaScript θα χειριστεί τη σειρά εκτέλεσης.
```javascript
```javascript
// calling our function
// καλώντας τη συνάρτησή μας
displayGreeting();
displayGreeting();
```
```
Όταν εκτελέσετε αυτή τη γραμμή, εκτελεί όλο τον κώδικα μέσα στη συνάρτηση `displayGreeting`, εμφανίζοντας "Hello, world!" στην κονσόλα του προγράμματος περιήγησης. Μπορείτε να καλέσετε αυτή τη συνάρτηση επανειλημμένα.
Όταν τρέχετε αυτή τη γραμμή, εκτελεί όλο τον κώδικα μέσα στη συνάρτηση `displayGreeting`, εμφανίζοντας "Hello, world!" στην κονσόλα του browser σας. Μπορείτε να καλέσετε αυτή τη συνάρτηση επανειλημμένα.
### 🧠 **Έλεγχος Βασικών Συναρτήσεων: Δημιουργία Πρώτων Συναρτήσεων**
> **Σημείωση:** Έχετε χρησιμοποιήσει **μεθόδους** σε όλη τη διάρκεια αυτών των μαθημάτων. Το`console.log()` είναι μια μέθοδος – ουσιαστικά μια συνάρτηση που ανήκει στο αντικείμενο `console`. Η βασική διαφορά είναι ότι οι μέθοδοι συνδέονται με αντικείμενα, ενώ οι συναρτήσεις είναι ανεξάρτητες. Πολλοί προγραμματιστές χρησιμοποιούν αυτούς τους όρους εναλλακτικά σε καθημερινές συζητήσεις.
**Ας δούμε πώς νιώθετε σχετικά με τις βασικές συναρτήσεις:**
- Μπορείτε να εξηγήσετε γιατί χρησιμοποιούμε αγκύλες `{}` στον ορισμό συναρτήσεων;
- Τι συμβαίνει αν γράψετε `displayGreeting` χωρίς τις παρενθέσεις;
- Γιατί μπορεί να θέλετε να καλέσετε την ίδια συνάρτηση πολλές φορές;
> **Σημείωση:** Έχετε χρησιμοποιήσει **μεθόδους** καθ’ όλη τη διάρκεια αυτών των μαθημάτων. Η`console.log()` είναι μέθοδος – ουσιαστικά μια συνάρτηση που ανήκει στο αντικείμενο `console`. Η βασική διαφορά είναι ότι οι μέθοδοι συνδέονται με αντικείμενα, ενώ οι συναρτήσεις λειτουργούν ανεξάρτητα. Πολλοί προγραμματιστές χρησιμοποιούν αυτούς τους όρους εναλλακτικά σε μη επίσημες συζητήσεις.
### Καλές πρακτικές για συναρτήσεις
### Καλές πρακτικές για συναρτήσεις
Ακολουθούν μερικές συμβουλές γιανα γράφετε καλές συναρτήσεις:
Εδώ είναι μερικές συμβουλές γιανα γράφετε καλές συναρτήσεις:
- Δώστε στις συναρτήσεις σας σαφή, περιγραφικά ονόματα –ο μελλοντικός σας εαυτός θα σας ευχαριστήσει!
- Δώστε στις συναρτήσεις σας σαφή, περιγραφικά ονόματα –το μελλοντικό σας εγώ θα σας ευχαριστεί!
- Χρησιμοποιήστε **camelCasing**για ονόματα με πολλές λέξεις (όπως `calculateTotal` αντί για`calculate_total`)
- Χρησιμοποιήστε **camelCase** για ονόματα πολλών λέξεων (π.χ.,`calculateTotal` αντί για`calculate_total`)
- Κρατήστε κάθε συνάρτηση επικεντρωμένη στο να κάνει ένα πράγμα καλά
- Κρατήστε κάθε συνάρτηση εστιασμένη στο να κάνει καλά ένα πράγμα
## Περνώντας πληροφορίες σε μια συνάρτηση
## Περνώντας πληροφορίες σε μια συνάρτηση
Η συνάρτηση `displayGreeting` είναι περιορισμένη – μπορεί να εμφανίσει μόνο "Hello, world!" για όλους. Οι παράμετροι μας επιτρέπουν να κάνουμε τις συναρτήσεις πιο ευέλικτες και χρήσιμες.
Η συνάρτηση `displayGreeting`μας είναι περιορισμένη – μπορεί μόνο να εμφανίζει "Hello, world!" για όλους. Οι παράμετροι μας επιτρέπουν να κάνουμε τις συναρτήσεις πιο ευέλικτες και χρήσιμες.
**Παράμετροι** λειτουργούν σαν θέσεις όπου μπορείτε να εισάγετε διαφορετικές τιμές κάθε φορά που χρησιμοποιείτε τη συνάρτηση. Με αυτόν τον τρόπο, η ίδια συνάρτηση μπορεί να λειτουργήσει με διαφορετικές πληροφορίες σε κάθε κλήση.
Οι**παράμετροι** λειτουργούν σαν θέσεις όπου μπορείτε να εισάγετε διαφορετικές τιμές κάθε φορά που χρησιμοποιείτε τη συνάρτηση. Έτσι, η ίδια συνάρτηση μπορεί να δουλεύει με διαφορετικές πληροφορίες σε κάθε κλήση.
Καταγράφετε τις παραμέτρους μέσα στις παρενθέσεις όταν ορίζετε τη συνάρτηση, χωρίζοντας πολλαπλές παραμέτρους με κόμματα:
Καταχωρείτε τις παραμέτρους μέσα στις παρενθέσεις όταν ορίζετε τη συνάρτηση, χωρίζοντας πολλαπλές παραμέτρους με κόμμα:
```javascript
```javascript
function name(param, param2, param3) {
function name(param, param2, param3) {
@ -94,9 +166,9 @@ function name(param, param2, param3) {
}
}
```
```
Κάθε παράμετρος λειτουργεί σαν θέση – όταν κάποιος καλεί τη συνάρτησή σας, θα παρέχει πραγματικές τιμές που θα τοποθετηθούν σε αυτά τα σημεία.
Κάθε παράμετρος λειτουργεί σαν θέση – όταν κάποιος καλεί τη συνάρτησή σας, παρέχει πραγματικές τιμές που τοποθετούνται σε αυτές τις θέσεις.
Ας ενημερώσουμε τη συνάρτηση χαιρετισμού μας ώστε να δέχεται το όνομα κάποιου:
Ας ενημερώσουμε τη συνάρτηση χαιρετισμού ώστε να δέχεται ένα όνομα:
```javascript
```javascript
function displayGreeting(name) {
function displayGreeting(name) {
@ -105,22 +177,44 @@ function displayGreeting(name) {
}
}
```
```
Παρατηρήστε πώς χρησιμοποιούμε ανάποδα εισαγωγικά (`` ` ``) και `${}` γιανα εισάγουμε το όνομα απευθείας στο μήνυμα – αυτό ονομάζεται template literal και είναι ένας πολύ χρήσιμος τρόπος γιανα δημιουργείτε συμβολοσειρές με μεταβλητές.
Παρατηρήστε πώς χρησιμοποιούμε το χαρακτήρα backticks (`` ` ``) και `${}` γιανα εισάγουμε το όνομα κατευθείαν στο μήνυμα – αυτό ονομάζεται πρότυπο συμβολοσειράς (template literal) και είναι πολύ βολικός τρόποςνα δημιουργείτε συμβολοσειρές με μεταβλητές ενωμένες.
Τώρα, όταν καλούμε τη συνάρτηση μας, μπορούμε να περάσουμε οποιοδήποτε όνομα:
Τώρα όταν καλούμε τη συνάρτηση, μπορούμε να περάσουμε οποιοδήποτε όνομα:
```javascript
```javascript
displayGreeting('Christopher');
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
```javascript
function displayGreeting(name, salutation='Hello') {
function displayGreeting(name, salutation='Hello') {
@ -128,35 +222,63 @@ function displayGreeting(name, salutation='Hello') {
}
}
```
```
Εδώ, το `name` είναι ακόμα απαραίτητο, αλλά το `salutation` έχει μια εφεδρική τιμή `'Hello'`αν κανείς δεν παρέχει διαφορετικό χαιρετισμό.
Εδώ, το `name` είναι ακόμα απαιτούμενο, αλλά το `salutation` έχει εφεδρική τιμή `'Hello'`αν κανείς δεν δώσει διαφορετικό χαιρετισμό.
Τώρα μπορούμε να καλέσουμε αυτή τη συνάρτηση με δύο διαφορετικούς τρόπους:
Τώρα μπορούμε να καλέσουμε τη συνάρτηση με δύο τρόπους:
```javascript
```javascript
displayGreeting('Christopher');
displayGreeting('Christopher');
// displays "Hello, Christopher"
// εμφανίζει "Γεια σου, Christopher"
displayGreeting('Christopher', 'Hi');
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
// εμφανίζει "Γεια, Christopher"
```
```
Στην πρώτη κλήση, η JavaScript χρησιμοποιεί το προεπιλεγμένο "Hello" αφού δεν καθορίσαμε χαιρετισμό. Στη δεύτερη κλήση, χρησιμοποιεί το προσαρμοσμένο "Hi". Αυτή η ευελιξία κάνει τις συναρτήσεις προσαρμόσιμες σε διαφορετικά σενάρια.
Στην πρώτη κλήση, η JavaScript χρησιμοποιεί το προεπιλεγμένο "Hello" αφού δεν καθορίσαμε χαιρετισμό. Στη δεύτερη κλήση, χρησιμοποιεί το δικό μας "Hi" αντί γι’ αυτό. Αυτή η ευελιξία κάνει τις συναρτήσεις προσαρμόσιμες σε διαφορετικά σενάρια.
### 🎛️ **Έλεγχος Παραμέτρων: Κάνοντας τις Συναρτήσεις Ευέλικτες**
**Δοκιμάστε την κατανόηση σας για τις παραμέτρους:**
- Ποια είναι η διαφορά μεταξύ παραμέτρου και ορίσματος;
- Γιατί οι προεπιλεγμένες τιμές είναι χρήσιμες στον πραγματικό προγραμματισμό;
- Μπορείτε να προβλέψετε τι συμβαίνει αν δώσετε περισσότερα ορίσματα από παραμέτρους;
> **Επαγγελματική συμβουλή**: Οι προεπιλεγμένες παράμετροι κάνουν τις συναρτήσεις σας πιο φιλικές προς τον χρήστη. Οι χρήστες μπορούν να ξεκινήσουν γρήγορα με λογικές προεπιλογές, αλλά και να προσαρμόσουν όταν χρειάζεται!
## Τιμές επιστροφής
## Τιμές επιστροφής
Οι συναρτήσεις μας μέχρι τώρα απλώς εκτύπωναν μηνύματα στην κονσόλα, αλλά τι γίνεται αν θέλετε μια συνάρτηση να υπολογίσει κάτι και να σας επιστρέψει το αποτέλεσμα;
Μέχρι τώρα οι συναρτήσεις μας απλώς τύπωναν μηνύματα στην κονσόλα, αλλά τι γίνεται αν θέλετε μια συνάρτηση να υπολογίζει κάτι και να σας επιστρέφει το αποτέλεσμα;
Εκεί έρχονται οι**τιμές επιστροφής**. Αντί να εμφανίζει απλώς κάτι, μια συνάρτηση μπορεί να σας επιστρέψει μια τιμή που μπορείτε να αποθηκεύσετε σε μια μεταβλητή ή να χρησιμοποιήσετε σε άλλα μέρη του κώδικα σας.
Εκεί έρχονται οι**τιμές επιστροφής**. Αντί να εμφανίζει κάτι απλά, μια συνάρτηση μπορεί να σας δώσει πίσω μια τιμή που μπορείτε να αποθηκεύσετε σε μια μεταβλητή ή να χρησιμοποιήσετε σε άλλα μέρη του κώδικα.
Για να στείλετε μια τιμή πίσω, χρησιμοποιείτε τη λέξη-κλειδί `return` ακολουθούμενη από ό,τι θέλετε να επιστρέψετε:
Για ναεπιστρέψετε μια τιμή, χρησιμοποιείτε τη λέξη-κλειδί `return`, ακολουθούμενη από ό,τι θέλετε να επιστρέψετε:
```javascript
```javascript
return myVariable;
return myVariable;
```
```
Κάτι σημαντικό: όταν μια συνάρτηση φτάσει σε μια δήλωση `return`, σταματά αμέσως να εκτελείται και στέλνει αυτή την τιμή πίσω σε όποιον την κάλεσε.
Να κάτι σημαντικό: όταν μια συνάρτηση φτάσει σε μια δήλωση `return`, σταματά άμεσα την εκτέλεση και στέλνει αυτή την τιμή πίσω σε όποιον την κάλεσε.
Ας τροποποιήσουμε τη συνάρτηση χαιρετισμού μας ώστε να επιστρέφει το μήνυμα αντί να το εκτυπώνει:
Ας τροποποιήσουμε τη συνάρτηση χαιρετισμού ώστε να επιστρέφει το μήνυμα αντί να το τυπώνει:
```javascript
```javascript
function createGreetingMessage(name) {
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 δευτερόλεπτα, θα δείτε ένα μήνυμα:
Δοκιμάστε αυτόν τον κώδικα – μετά από 3 δευτερόλεπτα, θα δείτε ένα μήνυμα:
Παρατηρήστε πώς περνάμε το`displayDone` (χωρίς παρενθέσεις) στο `setTimeout`. Δεν καλούμε τη συνάρτηση μόνοι μας – την παραδίδουμε στο `setTimeout` και λέμε "κάλεσε αυτή σε 3 δευτερόλεπτα."
Παρατηρήστε πως περνάμε τη`displayDone` (χωρίς παρενθέσεις) στο `setTimeout`. Δεν καλούμε εμείς τη συνάρτηση – την παραδίδουμε στο `setTimeout` και του λέμε "κάνε κλήση σε 3 δευτερόλεπτα."
### Ανώνυμες συναρτήσεις
### Ανώνυμες συναρτήσεις
Μερικές φορές χρειάζεστε μια συνάρτηση για ένα μόνο πράγμα και δεν θέλετε να της δώσετε όνομα. Σκεφτείτε το –αν χρησιμοποιείτε μια συνάρτηση μόνο μία φορά, γιατί να γεμίσετε τον κώδικα σας με ένα επιπλέον όνομα;
Μερικές φορές χρειάζεστε μια συνάρτηση για ένα και μόνο πράγμα και δεν θέλετε να της δώσετε όνομα. Σκεφτείτε το –αν χρησιμοποιείτε μια συνάρτηση μόνο μία φορά, γιατί να γεμίσετε τον κώδικά σας με ένα επιπλέον όνομα;
Η JavaScript σας επιτρέπει να δημιουργείτε **ανώνυμες συναρτήσεις** – συναρτήσεις χωρίς ονόματα που μπορείτε να ορίσετε ακριβώς εκεί που τις χρειάζεστε.
Η JavaScript σας επιτρέπει να δημιουργήσετε **ανώνυμες συναρτήσεις** – συναρτήσεις χωρίς όνομα που μπορείτε να ορίσετε ακριβώς εκεί που τις χρειάζεστε.
Να πώς μπορούμε να ξαναγράψουμε το παράδειγμα του χρονοδιακόπτη χρησιμοποιώντας μια ανώνυμη συνάρτηση:
Ας ξαναγράψουμε το παράδειγμα με το χρονόμετρο χρησιμοποιώντας ανώνυμη συνάρτηση:
```javascript
```javascript
setTimeout(function() {
setTimeout(function() {
@ -209,15 +369,15 @@ setTimeout(function() {
}, 3000);
}, 3000);
```
```
Αυτό επιτυγχάνει το ίδιο αποτέλεσμα, αλλά η συνάρτηση ορίζεται απευθείας μέσα στην κλήση του `setTimeout`, εξαλείφοντας την ανάγκη για ξεχωριστή δήλωση συνάρτησης.
Αυτό πετυχαίνει το ίδιο αποτέλεσμα, αλλά η συνάρτηση ορίζεται απευθείας μέσα στην κλήση του `setTimeout`, εξαλείφοντας την ανάγκη για ξεχωριστή δήλωση συνάρτησης.
### Συναρτήσεις με βέλη (Fat arrow functions)
### Συναρτήσεις βέλους (arrow functions)
Η σύγχρονη JavaScript έχει έναν ακόμη πιο σύντομο τρόπο να γράφετε συναρτήσεις, που ονομάζεται **arrow functions**. Χρησιμοποιούν το `=>` (που μοιάζει με βέλος – το πιάσατε;) και είναι πολύ δημοφιλείς στους προγραμματιστές.
Η σύγχρονη JavaScript έχει έναν ακόμη πιο σύντομο τρόπο να γράφετε συναρτήσεις που ονομάζονται **συναρτήσεις βέλους**. Χρησιμοποιούν το `=>` (που μοιάζει με βέλος – καταλαβαίνετε;) και είναι πολύ δημοφιλείς στους προγραμματιστές.
Οι συναρτήσεις με βέλη σας επιτρέπουν να παραλείψετε τη λέξη-κλειδί `function` και να γράψετε πιο συνοπτικό κώδικα.
Οι συναρτήσεις βέλους σας επιτρέπουν να παραλείψετε τη λέξη-κλειδί `function` και να γράψετε πιο συμπαγή κώδικα.
Να το παράδειγμα του χρονοδιακόπτη μας χρησιμοποιώντας μια συνάρτηση με βέλος:
Εδώ είναι το παράδειγμά μας με το χρονόμετρο χρησιμοποιώντας συνάρτηση βέλους:
```javascript
```javascript
setTimeout(() => {
setTimeout(() => {
@ -225,11 +385,64 @@ setTimeout(() => {
}, 3000);
}, 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 🚀
## Πρόκληση GitHub Copilot Agent 🚀
Χρησιμοποιήστε τη λειτουργία Agent γιανα ολοκληρώσετε την παρακάτω πρόκληση:
Χρησιμοποιήστε τη λειτουργία Agent γιαολοκλήρωση της παρακάτω πρόκλησης:
**Περιγραφή:** Δημιουργήστε μια βιβλιοθήκη βοηθητικών μαθηματικών συναρτήσεων που να δείχνει διαφορετικές έννοιες συναρτήσεων που καλύφθηκαν σε αυτό το μάθημα, συμπεριλαμβανομένων παραμέτρων, προεπιλεγμένων τιμών, τιμών επιστροφής και συναρτήσεων με βέλη.
**Περιγραφή:** Δημιουργήστε μια βιβλιοθήκη βοηθητικών μαθηματικών συναρτήσεων που να δείχνει διάφορες έννοιες συναρτήσεων που καλύφθηκαν σε αυτό το μάθημα, συμπεριλαμβανομένων των παραμέτρων, προεπιλεγμένων τιμών, τιμών επιστροφής και συναρτήσεων βέλους.
**Προτροπή:** Δημιουργήστε ένα αρχείο JavaScript με όνομα `mathUtils.js` που περιέχει τις εξής συναρτήσεις:
**Πρόταση:** Δημιουργήστε ένα αρχείο JavaScript με όνομα `mathUtils.js` που περιέχει τις ακόλουθες συναρτήσεις:
1. Μια συνάρτηση `add` που παίρνει δύο παραμέτρους και επιστρέφει το άθροισμά τους
1. Μια συνάρτηση `add` που παίρνει δύο παραμέτρους και επιστρέφει το άθροισμά τους
2. Μια συνάρτηση `multiply` με προεπιλεγμένες τιμές παραμέτρων (η δεύτερη παράμετρος προεπιλεγμένη στο 1)
2. Μια συνάρτηση `multiply` με προεπιλεγμένες παραμέτρους (δεύτερη παράμετρος με προεπιλογή την 1)
3. Μια συνάρτηση με βέλος `square` που παίρνει έναν αριθμό και επιστρέφει το τετράγωνό του
3. Μια συνάρτηση βέλους `square` που παίρνει έναν αριθμό και επιστρέφει το τετράγωνό του
4. Μια συνάρτηση `calculate` που δέχεται μια άλλη συνάρτηση ως παράμετρο και δύο αριθμούς, και στη συνέχεια εφαρμόζει τη συνάρτηση σε αυτούς τους αριθμούς
4. Μια συνάρτηση `calculate` που δέχεται μια άλλη συνάρτηση ως παράμετρο και δύο αριθμούς, και εφαρμόζει τη συνάρτηση σε αυτούς τους αριθμούς
5. Επιδείξτε την κλήση κάθε συνάρτησης με κατάλληλες δοκιμαστικές περιπτώσεις
5. Επιδείξτε κλήσεις κάθε συνάρτησης με κατάλληλες δοκιμαστικές περιπτώσεις
Μάθετε περισσότερα για τη [λειτουργία agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) εδώ.
Μάθετε περισσότερα για τη [λειτουργία 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 προγραμματισμού! 🚀
---
---
**Αποποίηση ευθύνης**:
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Αποποίηση Ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να έχετε υπόψη πως οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται ως η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρεξηγήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης.
localizeflow[bot]
8 months ago