Criando o seu primeiro script - Curso JavaScript #04

Introdução e Perguntas Iniciais

Visão Geral da Seção: Nesta seção, o professor faz algumas perguntas iniciais antes de começar a aula.

Perguntas Iniciais

• Quais são as bibliografias recomendadas e os sites para aprender JavaScript?

• Quais documentos foram recomendados para facilitar o aprendizado em JavaScript?

• É necessário saber inglês para ser um programador? Isso é um pré-requisito?

• Quais foram as dicas para estudar e aprender JavaScript corretamente?

• Quais macetes foram dados para fixar o conteúdo na memória?

• Quais programas foram instalados no computador para desenvolver o primeiro programa em JavaScript?

Voltando à Aula Anterior

Visão Geral da Seção: O professor incentiva os alunos a revisarem a aula anterior caso não consigam responder às perguntas feitas anteriormente.

Desenvolvendo os Primeiros Scripts em JavaScript

Visão Geral da Seção: Nesta seção, o professor anuncia que irá começar a desenvolver os primeiros scripts em JavaScript.

Apresentação do Professor

Visão Geral da Seção: O professor se apresenta e dá as boas-vindas aos alunos.

Importância de Estudar a Base da Linguagem

Visão Geral da Seção: O professor destaca a importância de estudar a base da linguagem antes de avançar para os scripts.

Relembrando Conceitos Iniciais

Visão Geral da Seção: O professor relembra conceitos como a diferença entre JavaScript e Java, o que é ECMAScript e a estrutura dos documentos HTML, CSS e JavaScript.

Panorama Completo do Curso

Visão Geral da Seção: O professor incentiva os alunos a revisarem as primeiras aulas para obterem uma visão completa do curso.

Preparação do Ambiente de Desenvolvimento

Visão Geral da Seção: O professor demonstra como abrir o Google Chrome e o Visual Studio Code, que foram instalados na aula anterior.

Utilizando Dois Monitores ou um Celular

Visão Geral da Seção: O professor sugere utilizar dois monitores ou um celular para assistir à aula enquanto programa no computador.

Organização dos Arquivos

Visão Geral da Seção: O professor destaca a importância de organizar os arquivos durante o desenvolvimento para evitar se perder posteriormente.

Abertura da Pasta do CursoJS no Visual Studio Code

Visão Geral da Seção: O professor demonstra como abrir a pasta do curso no Visual Studio Code.

Conclusão

Visão Geral da Seção: O professor conclui a introdução e está pronto para começar a parte prática do curso.

Note que as seções foram criadas de acordo com os títulos e conteúdo do vídeo, seguindo uma ordem cronológica. Os bullet points fornecem uma visão geral dos principais pontos abordados em cada seção.

Economizando espaço da tela

Visão geral da seção: Nesta parte, o instrutor mostra como economizar espaço na tela do Visual Studio Code.

Organizando arquivos em pastas

• Para economizar espaço na tela, é possível clicar nos papéis brancos para ocultar a área lateral esquerda.

• Ao clicar novamente, a área lateral é exibida.

• É recomendado organizar os arquivos por aulas.

• Clicando no ícone "Nova Pasta", é possível criar uma nova pasta e nomeá-la de acordo com a aula correspondente.

Criando um arquivo HTML

• Após criar a pasta, pode-se criar um novo arquivo clicando no ícone "Novo Arquivo".

• O primeiro exercício será chamado de "ex001.html" (nomes de arquivos para web devem ser em letras minúsculas).

• Ao pressionar Enter, o arquivo é criado.

Visualizando o arquivo no navegador

• É possível ocultar as abas desnecessárias, como a aba "Welcome".

• Ao abrir a pasta correspondente à aula e clicar duas vezes no arquivo desejado, ele será aberto no navegador.

• Qualquer alteração feita no código requer um reload para atualizar o navegador.

Criando código HTML

Visão geral da seção: Nesta parte, o instrutor demonstra como criar um código HTML básico usando o Visual Studio Code.

Utilizando o recurso Intelisense

• Digite "html" para acionar o recurso Intelisense.

• Selecione "html5" para utilizar a versão mais atualizada do HTML.

Código HTML5 gerado automaticamente

• Ao selecionar "html5", o Visual Studio Code gera automaticamente um código HTML5 básico.

• Esse código é simples e fácil de entender, mesmo para iniciantes.

Importância do conhecimento em HTML

• O conhecimento prévio em HTML não é essencial para este curso de JavaScript.

• No entanto, é recomendado que os alunos aprendam HTML posteriormente.

• O Curso em Vídeo oferece um "Curso de HTML com CSS" para aprofundar o conhecimento nessas tecnologias.

Estrutura básica do documento HTML

Visão geral da seção: Nesta parte, o instrutor explica a estrutura básica de um documento HTML.

Cabeça e corpo do documento

• Todo site possui uma estrutura composta pela cabeça e pelo corpo.

• A área da cabeça contém configurações e metadados.

• A área do corpo é onde o conteúdo será exibido.

Tags e marcações no HTML

• As marcações no HTML são feitas por meio das tags.

• As tags são utilizadas para definir elementos e suas configurações.

• Exemplos de tags mencionadas incluem as configurações de caracteres (para suportar acentuações) e a configuração do viewport.

Título do documento

• O título define o texto que aparecerá na aba ou na barra superior do navegador.

• É possível alterar o título ao salvar o arquivo.

Salvando arquivos e alterações

Visão geral da seção: Nesta parte, o instrutor explica como salvar arquivos no Visual Studio Code e como identificar arquivos modificados.

Salvando arquivos

• Para salvar um arquivo, basta clicar em "File" e selecionar "Save".

• Uma bola ao lado do nome do arquivo indica que o arquivo foi modificado e ainda não foi salvo.

• Pressionando Ctrl+S, a bola desaparece, indicando que o arquivo foi salvo.

Identificando arquivos modificados

• Um número ao lado do nome do arquivo indica quantos arquivos foram modificados.

• Ao fazer alterações no código sem salvar, uma bolinha é exibida para indicar que o arquivo foi alterado.

Meu Primeiro Programa e a Maldição do Olá Mundo

Visão Geral da Seção: Nesta seção, o palestrante fala sobre a importância de começar um programa com o famoso "Olá, Mundo!" e como isso pode afetar o aprendizado.

Meu Primeiro Programa e a Maldição do Olá Mundo

• A "maldição do Olá Mundo" é uma crença de que se você não escrever "Olá, Mundo!" em seu primeiro exemplo de programação, você pode não aprender corretamente.

• O palestrante decide seguir essa tradição e inclui o código "Olá, Mundo!" em seu primeiro programa.

• Ele mostra onde está escrito "Meu primeiro programa" e onde será inserido o código "Olá, Mundo!".

• Salva o arquivo pressionando Ctrl+S ou atualiza a página pressionando F5.

• Explica que a opção de traduzir a página aparece porque está em inglês, mas ele opta por não traduzir.

• Destaca que o título do programa é "Meu primeiro programa" e o conteúdo é "Olá, Mundo!".

Título e Parágrafo

• Demonstra como transformar o texto "Olá, Mundo!" em um título usando tags HTML adequadas.

• Explica que um título é semelhante ao título de uma matéria de jornal.

• Mostra como criar um parágrafo usando as tags HTML correspondentes.

Estilo

• Introduz a parte de estilo no HTML.

• Explica que as configurações de estilo geralmente são feitas na área <head> do documento HTML.

• Mostra como criar uma tag <style> em letras minúsculas.

• Demonstra como definir o estilo de fundo usando a propriedade background-color.

• Explica que é possível escolher cores usando nomes, códigos RGB ou hexadecimal.

• Salva e atualiza a página para mostrar as alterações no estilo.

Conteúdo e Estilo no HTML

Visão Geral da Seção: Nesta seção, o palestrante explora a estrutura do HTML, incluindo conteúdo e estilo.

Conteúdo

• Destaca que todo o conteúdo está dentro de um arquivo HTML.

• Sugere fazer tudo dentro de um único arquivo HTML.

• Compara a parte de conteúdo com a parte de estilo.

Estilo

• Explica que a parte de estilo é configurada na área <head> do documento HTML.

• Mostra como criar uma tag <style> em letras minúsculas.

• Demonstra como definir estilos para elementos específicos, como o corpo (<body>) do documento.

• Exemplifica a definição da cor de fundo usando background-color.

Configurando Estilos com CSS

Visão Geral da Seção: Nesta seção, o palestrante explora como configurar estilos usando CSS no HTML.

Configurando Estilos com CSS

• Explica que os estilos são escritos em CSS dentro das tags <style>.

• Mostra como usar seletores para aplicar estilos a elementos específicos, como o corpo (<body>) do documento.

• Demonstra como definir propriedades de estilo, como background-color, para personalizar a aparência dos elementos.

• Destaca que é possível escolher cores usando nomes, códigos RGB ou hexadecimal.

• Salva e atualiza a página para mostrar as alterações no estilo.

Configurando Fontes com CSS

Visão Geral da Seção: Nesta seção, o palestrante explora como configurar fontes usando CSS no HTML.

Configurando Fontes com CSS

• Explica que é possível configurar a fonte usando CSS.

• Mostra como usar a propriedade font-family para definir a família de fonte desejada.

• Demonstra como definir o tamanho da fonte usando a propriedade font-size.

• Salva e atualiza a página para mostrar as alterações na aparência do texto.

Essas são as principais informações abordadas no vídeo. Recomenda-se assistir ao vídeo completo para obter uma compreensão mais detalhada dos conceitos apresentados.

Atualização e Estilo

Visão Geral da Seção: Nesta seção, o palestrante fala sobre atualizações e estilos em HTML.

Atualização de Tamanho de Letra

• O tamanho da letra é atualizado para 20.

• A letra fica proporcional ao tamanho definido.

Estilo em HTML

• O estilo em HTML é colocado dentro da tag <style>.

• Existem outras maneiras de adicionar estilo, como usar arquivos separados.

• Recomenda-se fazer um curso de HTML para aprender mais sobre isso.

Adicionando JavaScript

• O JavaScript geralmente é adicionado antes do fechamento do corpo (</body>).

• Um script pode ser criado usando a tag <script></script>.

• É possível criar scripts externos também.

Programação em JavaScript

• Dentro do script, é possível escrever comandos em JavaScript.

• Comandos em JavaScript são escritos principalmente em letras minúsculas.

• Um exemplo básico é mostrar um alerta na tela usando window.alert() ou apenas alert().

Programar em JavaScript

Visão Geral da Seção: Nesta seção, o palestrante explica a diferença entre programar em HTML, CSS e JavaScript. Ele também mostra como escrever comandos básicos em JavaScript.

Linguagens de Programação

• HTML é uma linguagem de marcação.

• CSS é uma linguagem de estilos (folhas de estilo).

• JavaScript é uma linguagem de programação.

Escrevendo Comandos em JavaScript

• Os comandos em JavaScript são escritos principalmente em letras minúsculas.

• Um exemplo básico é usar alert() para mostrar uma mensagem na tela.

• As mensagens devem ser colocadas entre aspas.

Executando o Código

Visão Geral da Seção: Nesta seção, o palestrante mostra como executar o código HTML com JavaScript e destaca a interatividade do JavaScript.

Execução do Código

• Ao atualizar a página, o estilo é aplicado imediatamente.

• O conteúdo HTML não aparece até que um comando em JavaScript seja executado.

• Ao usar window.alert() ou alert(), a mensagem só aparece após clicar em "Ok".

Interatividade

• A interatividade é uma característica importante do JavaScript.

• Mesmo que o conteúdo não seja exibido inicialmente, os comandos em JavaScript podem ser executados.

Programar em JavaScript é simples

Visão geral da seção: Nesta parte do vídeo, o instrutor enfatiza que programar em JavaScript é, em geral, muito simples. Ele desencoraja a ideia de que JavaScript é difícil e explica que as pessoas que dizem isso podem estar frustradas com suas próprias experiências de aprendizado ou não querem concorrência.

• Programar em JavaScript é considerado muito simples.

• A base do JavaScript é fácil, mas pode parecer mais complicado quando se lida com arrays e vetores.

Conteúdo HTML, estilo CSS e interação JavaScript

Visão geral da seção: O instrutor explica a importância de unir conteúdo HTML, estilo CSS e interação JavaScript ao desenvolver um site. Ele mostra como esses elementos estão presentes no código criado anteriormente.

• Desenvolver um site envolve combinar conteúdo (HTML), estilo (CSS) e interatividade (JavaScript).

• No código criado anteriormente, a parte HTML corresponde ao conteúdo visível na página.

• A parte CSS define o estilo visual do conteúdo.

• A parte JavaScript lida com a interatividade do site.

Adicionando estilos ao código

Visão geral da seção: O instrutor demonstra como adicionar estilos ao código usando CSS. Ele altera a cor do título h1 para amarelo e adiciona uma opacidade máxima.

• É possível adicionar estilos ao código usando CSS.

• O título h1 pode ser estilizado alterando sua cor.

• É possível ajustar a opacidade dos elementos.

• O instrutor faz essas alterações no código para exemplificar.

Unindo conteúdo, estilo e interatividade

Visão geral da seção: O instrutor destaca a importância de unir conteúdo, estilo e interatividade ao desenvolver um site. Ele menciona que existem técnicas para melhorar o código, mas nesse estágio inicial é importante focar nos primeiros passos.

• Desenvolver um site envolve unir conteúdo, estilo e interatividade.

• Bons programadores sabem como combinar esses elementos.

• Existem técnicas avançadas para melhorar o código, mas é importante começar com os primeiros passos.

Comandos adicionais em JavaScript

Visão geral da seção: O instrutor apresenta mais dois comandos em JavaScript: window.confirm() e window.prompt(). Ele demonstra como usar esses comandos e mostra exemplos de suas funcionalidades.

• Além do comando window.alert(), existem outros comandos úteis em JavaScript.

• O comando window.confirm() exibe uma mensagem de confirmação com as opções "Ok" ou "Cancelar".

• O comando window.prompt() solicita ao usuário que insira algum valor.

• Esses comandos podem ser utilizados para obter informações do usuário ou confirmar ações.

Limitações do prompt()

Visão geral da seção: O instrutor explica que o comando prompt() não permite acessar diretamente as informações inseridas pelo usuário. Ele menciona que nas próximas aulas serão abordadas formas de utilizar essas informações.

• O comando prompt() não permite acessar diretamente as informações inseridas pelo usuário.

• Nas próximas aulas, serão apresentadas maneiras de utilizar as informações obtidas com o prompt().

Variáveis

Visão geral da seção: Nesta seção, o instrutor fala sobre variáveis e destaca a importância da prática para aprender JavaScript.

Variáveis

• Uma introdução às variáveis em JavaScript.

• A importância de praticar para realmente entender e dominar o assunto.

• Assistir ao vídeo não é suficiente para afirmar que você sabe JavaScript; é necessário praticar e comprovar seu conhecimento.

• Incentivo para se inscrever no canal do Curso em Vídeo no YouTube e explorar os cursos disponíveis.

• Sugestões para interagir nos comentários, compartilhar com grupos de estudo e recomendar o Curso em Vídeo para outras pessoas.

Conclusão

Visão geral da seção: O instrutor encerra a aula reforçando a importância da prática antes de prosseguir para a próxima lição sobre variáveis.

Prática e Encerramento

• Incentivo final para praticar antes de avançar para a próxima aula sobre variáveis.

• Despedida do instrutor, desejando um grande abraço aos alunos.

• Lembrete de que o próximo conteúdo abordará mais detalhes sobre variáveis.