O que o JavaScript é capaz de fazer? - Curso JavaScript #01

O que é JavaScript?

Visão geral da seção: Nesta seção, o professor introduz o curso de JavaScript e explica a importância dessa tecnologia.

Introdução ao Curso de JavaScript

• O professor destaca a capacidade do JavaScript de realizar tarefas simples, mas poderosas.

• Ele menciona que é possível fazer alterações no site do Google usando comandos em JavaScript.

• Exemplos são mostrados, como mudar o fundo do site para preto e remover a logo.

• O professor convida os espectadores a assistir ao vídeo completo para aprender esses comandos.

Sobre o Curso

• É explicado que este é o primeiro curso de JavaScript do Curso em Vídeo, patrocinado pelo Google.

• O professor menciona outros cursos disponíveis no canal do Curso em Vídeo, abrangendo várias áreas da tecnologia.

• Ele expressa gratidão ao Google por acreditar no trabalho realizado e anuncia que o curso será lançado completo em um único dia.

Público-alvo do Curso

• O curso é destinado tanto para iniciantes sem conhecimento prévio de programação quanto para programadores mais experientes.

• Para iniciantes, o curso oferece uma introdução completa à programação.

• Para programadores experientes, há conteúdo sobre as últimas versões do ECMAScript e outras novidades.

O que o JavaScript faz?

Visão geral da seção: Nesta seção, o professor explica brevemente as funcionalidades e aplicações do JavaScript.

Funcionalidades do JavaScript

• É afirmado que o JavaScript pode fazer praticamente tudo.

• O professor promete demonstrar isso ao longo do curso.

Público-alvo do Curso

• O curso é adequado para iniciantes que nunca programaram antes.

• Também é útil para programadores experientes que desejam aperfeiçoar suas habilidades em JavaScript e aprender as últimas atualizações do ECMAScript.

Bem-vindo ao seu Curso de JavaScript!

Visão geral da seção: Nesta seção, o professor dá as boas-vindas aos espectadores e explica a proposta do curso.

Boas-vindas

• O professor cumprimenta os espectadores e expressa sua felicidade em iniciar o curso de JavaScript.

• Ele agradece aos espectadores por assistirem e ao Google pelo patrocínio.

• Uma menção especial é feita para duas pessoas chamadas Clarissa e Indiana.

Proposta do Curso

• O professor ressalta que o curso é voltado para aqueles que nunca programaram antes, mas também pode ser útil para programadores mais experientes.

• Ele menciona que algumas partes podem parecer básicas para os programadores experientes, mas lembra-os de quando eles começaram a aprender.

• É enfatizado que o objetivo é criar um ambiente acolhedor para todos os alunos, independentemente de seu nível de conhecimento prévio.

Conclusão

Visão geral da seção: Nesta seção final, o professor conclui sua introdução ao curso de JavaScript.

Considerações Finais

• O professor expressa esperança de que os espectadores gostem do curso.

• Ele menciona que serão abordadas algumas crenças limitantes ao longo do curso.

• É destacado que qualquer pessoa pode aprender a programar, independentemente da idade.

Fim do Resumo

A Importância da Dedicação no Aprendizado de Programação

Visão Geral da Seção: Nesta seção, o instrutor destaca a importância da dedicação no aprendizado de programação e incentiva os espectadores a assistirem aos vídeos com comprometimento total.

A Dedicação como Fator Fundamental

• Para aprender a programar, é necessário dedicar-se completamente ao processo de aprendizagem.

• É importante seguir todas as instruções do início ao fim para obter uma base sólida em JavaScript.

O Conceito de Cliente-Servidor na Internet

• Na internet, o conceito de cliente-servidor desempenha um papel fundamental.

• Os dispositivos dos usuários, como computadores e celulares, atuam como clientes que acessam serviços fornecidos por servidores.

• Ao utilizar um navegador, como o Google Chrome, os usuários digitam URLs que direcionam para servidores específicos.

Funcionamento do Servidor e do Cliente

• Os servidores são semelhantes às máquinas dos usuários e possuem sistemas operacionais, pastas e arquivos.

• Quando um usuário solicita um arquivo específico a partir de um servidor, uma cópia desse arquivo é enviada diretamente para o cliente.

• O navegador do cliente trabalha para gerar o conteúdo visual do site com base nos arquivos recebidos.

JavaScript como Tecnologia Client-Side

• O JavaScript surgiu inicialmente como uma tecnologia voltada para clientes na web.

• Embora também seja utilizado em servidores atualmente, seu foco principal é fornecer funcionalidades no lado do cliente.

Tecnologias Relacionadas ao JavaScript

• Além do JavaScript, é importante compreender as tecnologias relacionadas que estão envolvidas no desenvolvimento web.

Infraestrutura da Internet e o Papel dos Servidores

Visão Geral da Seção: Nesta seção, o instrutor explora a infraestrutura da internet e o papel dos servidores na disponibilização de conteúdo aos clientes.

A Infraestrutura da Internet

• A infraestrutura da internet é responsável por direcionar as solicitações dos clientes para os servidores corretos.

• Existem várias tecnologias envolvidas nesse processo, mas o objetivo final é conectar o cliente ao servidor desejado.

Funcionamento dos Servidores

• Os servidores possuem sistemas operacionais, pastas e arquivos semelhantes aos dispositivos dos usuários.

• Quando um cliente solicita um arquivo específico, uma cópia desse arquivo é enviada diretamente para o cliente.

O Papel do Navegador do Cliente

• O navegador do cliente trabalha para gerar o conteúdo visual do site com base nos arquivos recebidos do servidor.

• Ele processa os arquivos HTML e cria a interface que os usuários veem em seus dispositivos.

JavaScript como Tecnologia Client-Side

Visão Geral da Seção: Nesta seção, o instrutor reforça que o JavaScript é uma tecnologia voltada principalmente para clientes na web.

Foco Principal no Lado do Cliente

• O JavaScript é uma tecnologia client-side, ou seja, seu foco principal é fornecer funcionalidades no lado do cliente.

• Embora também possa ser utilizado em servidores, o JavaScript foi originalmente desenvolvido para atender às necessidades dos clientes.

Próximos Passos e Tecnologias Relacionadas

Visão Geral da Seção: Nesta seção final, o instrutor destaca a importância de continuar estudando JavaScript e menciona a existência de outras tecnologias relacionadas.

Continuação dos Estudos em JavaScript

• É importante continuar estudando JavaScript para explorar suas funcionalidades mais avançadas.

• O aprendizado inicial deve focar nos primeiros passos e conceitos fundamentais.

Tecnologias Relacionadas

• Além do JavaScript, existem outras tecnologias relacionadas que são importantes para o desenvolvimento web.

• É recomendado explorar essas tecnologias em conjunto com o estudo do JavaScript.

O Foco Inicial é o Cliente

Visão Geral da Seção: Nesta seção, o palestrante destaca que o foco inicial é o cliente e explica que as coisas que estão rodando no dispositivo do cliente são compostas por três tecnologias importantes.

As Três Tecnologias para um Website

• O website é composto por três tecnologias principais.

• O palestrante faz um paralelo com um jornal físico para explicar as três tecnologias.

• As três tecnologias são representadas por profissionais em um jornal.

• A primeira tecnologia é representada pela jornalista, responsável pelo conteúdo.

• O designer é responsável por tornar o conteúdo mais atraente visualmente.

• O programador cuida da engenharia da entrega do website.

HTML, CSS e JavaScript

• As três tecnologias são conhecidas como HTML, CSS e JavaScript.

• É recomendado ter conhecimento básico de HTML e CSS além de JavaScript.

• HTML trata do conteúdo, CSS cuida do estilo e JavaScript lida com a interação.

Conclusão

O palestrante destaca a importância das três tecnologias - HTML, CSS e JavaScript - na criação de websites. Ele explica que a jornalista (HTML) é responsável pelo conteúdo, o designer (CSS) torna tudo mais bonito e o programador (JavaScript) cuida das interações. Essas três tecnologias trabalham em conjunto para compor a parte do cliente nos sites modernos.

A Jornalista e a Produção de Textos em HTML

Visão Geral da Seção: Nesta seção, é discutido o papel da jornalista na produção de textos em HTML para uma reportagem. Também é explicado como o HTML é utilizado para organizar os textos e adicionar marcações.

A Jornalista e a Produção de Textos em HTML

• A jornalista é chamada para fazer uma reportagem e começa escrevendo o título da mesma. Em seguida, ela produz os parágrafos e organiza o texto.

• A produção dos textos em HTML envolve a criação de marcas específicas para transformar partes do texto em títulos ou outros elementos visuais.

• O objetivo do HTML é organizar o conteúdo do site, mas não se preocupa com a estética visual.

• Após a produção dos textos em HTML, eles são entregues ao designer responsável por deixar o conteúdo mais agradável visualmente.

Interações com JavaScript

Visão Geral da Seção: Nesta seção, é abordado o papel do JavaScript nas interações de um site. São mencionados exemplos de interações possíveis, como exibir legendas ao passar o mouse sobre uma imagem ou ampliar uma imagem ao clicar nela.

Interações com JavaScript

• O JavaScript permite adicionar interatividade aos sites.

• Exemplos de interações incluem exibir legendas ao passar o mouse sobre uma imagem ou ampliar uma imagem ao clicar nela.

• O JavaScript pode ser usado para modificar elementos do documento HTML e CSS, permitindo uma ampla gama de possibilidades de personalização.

HTML, CSS e JavaScript

Visão Geral da Seção: Nesta seção, é explicada a diferença entre HTML, CSS e JavaScript. Enquanto HTML e CSS são tecnologias de construção de sites, o JavaScript é uma linguagem de programação.

HTML, CSS e JavaScript

• HTML e CSS não são linguagens de programação, mas sim tecnologias para construir sites.

• O JavaScript é uma linguagem de programação que permite adicionar interatividade aos sites.

• É importante diferenciar entre "programar em JavaScript" e "desenvolver em HTML/CSS".

Aplicações do JavaScript

Visão Geral da Seção: Nesta seção, são apresentados exemplos de empresas e sites famosos que utilizam o JavaScript em suas aplicações.

Aplicações do JavaScript

• Empresas como Google, YouTube, LinkedIn, Netflix, Facebook, Amazon, IBM e governos dos EUA e Brasil utilizam o JavaScript em seus sites.

• O uso do JavaScript é amplo e abrange uma infinidade de sites diferentes.

Demonstração no Navegador

Visão Geral da Seção: Nesta seção final do vídeo, é feita uma demonstração prática no navegador para mostrar a importância do JavaScript.

Demonstração no Navegador

• Abra o seu navegador favorito (recomendado Google Chrome).

• A demonstração será realizada utilizando o site do Google como exemplo.

• O objetivo é mostrar como o site utiliza o JavaScript para adicionar funcionalidades e interatividade.

Curso em Vídeo

Visão geral da seção: Nesta seção, o palestrante menciona os diferentes cursos disponíveis no canal "Curso em Vídeo" e incentiva os espectadores a aproveitarem as oportunidades de aprendizado.

Cursos disponíveis no canal

• O canal "Curso em Vídeo" oferece cursos de Python, Java, YouTube, PHP, HTML, Excel e Algoritmo.

• Os espectadores que estão conhecendo o canal agora têm uma variedade de cursos para escolher.

• É recomendado que os espectadores concluam um curso até o final.

Ajuda do Google

• O palestrante demonstra como obter ajuda do Google ao pesquisar por "Curso em Vídeo".

• Ao inspecionar a página usando as ferramentas de desenvolvedor do navegador, é possível ver o código HTML do site.

• Desabilitar o JavaScript faz com que a página perca algumas funcionalidades, como a ajuda fornecida pelo Google.

Desabilitando o JavaScript

Visão geral da seção: Nesta seção, o palestrante mostra como desabilitar o JavaScript e observa as mudanças na aparência e funcionalidade dos sites.

Desabilitando o JavaScript no Google

• Ao desabilitar o JavaScript nas configurações do navegador e atualizar a página do Google, a versão antiga do site é exibida.

• A ajuda fornecida pelo Google ao pesquisar por "Curso em..." não está mais disponível sem JavaScript.

Desabilitando o JavaScript no YouTube

• Ao desabilitar o JavaScript nas configurações do navegador e atualizar a página do YouTube, o site fica praticamente inutilizável.

• A interação e funcionalidades do YouTube dependem fortemente do JavaScript.

Importância do JavaScript para o Google

Visão geral da seção: Nesta seção, o palestrante destaca a importância do JavaScript para o Google e mostra como diferentes recursos são ativados quando o JavaScript está habilitado.

Recursos avançados com JavaScript

• O Google possui uma versão mais moderna e funcional quando o JavaScript está habilitado.

• Ao rolar pela página de imagens do Google, as imagens são carregadas dinamicamente à medida que você chega ao final da página.

• No modo sem JavaScript, a paginação antiga é exibida.

Dependência do YouTube no JavaScript

• O YouTube também utiliza recursos como "rolagem infinita" e AJAX, que dependem do JavaScript.

• Sem o JavaScript habilitado, a maioria das interações e funcionalidades no YouTube não estão disponíveis.

Desabilitando o JavaScript no YouTube

Visão geral da seção: Nesta seção, o palestrante demonstra os impactos de desabilitar o JavaScript no site do YouTube.

Site inutilizável sem JavaScript

• Ao desabilitar o JavaScript nas configurações do navegador e atualizar a página principal do YouTube, nenhum conteúdo é exibido.

• A interação com vídeos e comentários só é possível com o uso de JavaScript.

Como desabilitar o JavaScript no Google Chrome

Visão geral da seção: Nesta seção, o instrutor explica como desabilitar o JavaScript no Google Chrome e destaca a importância dessa linguagem para os sites.

Desabilitando o JavaScript

• Desabilite o JavaScript na parte do DevTools do Google Chrome.

• Compreenda a importância da linguagem JavaScript para um site.

Promessa de demonstração de alterações em um site

Visão geral da seção: O instrutor faz uma promessa de mostrar como realizar alterações divertidas em um site, como mudar a cor de fundo ou ocultar a logo.

Demonstração das alterações

• Mudança da cor do fundo do site do Google.

• Transformação da logo em preto e branco.

• Ocultação da logo.

Início das atividades com o DevTools

Visão geral da seção: O instrutor convida os espectadores a abrirem o DevTools no Google Chrome e começarem as atividades "hacker".

Utilizando o DevTools

• Abra o DevTools no Google Chrome.

• Acesse o site do Google para iniciar as atividades "hacker".

Desabilitando e habilitando novamente o JavaScript

Visão geral da seção: O instrutor mostra como desabilitar e habilitar novamente o JavaScript no navegador.

Desabilitando e habilitando o JavaScript

• Vá nas configurações do navegador e desmarque a opção para habilitar o JavaScript.

• Segure a tecla Shift e clique em "Atualizar" para habilitar novamente o JavaScript.

Utilizando o Console do DevTools

Visão geral da seção: O instrutor explica como utilizar o Console do DevTools para executar comandos.

Utilizando o Console

• Digite comandos no Console, como alert('Olá, mundo!').

• Altere a cor de fundo de um site utilizando document.body.style.background.

Alterando a logo do Google

Visão geral da seção: O instrutor mostra como alterar a cor e ocultar a logo do Google utilizando comandos no Console.

Alterando a logo

• Acesse o elemento da logo utilizando document.querySelector('img#hplogo').

• Mude a cor da logo para preto e branco utilizando .style.filter e 'grayscale(100%)'.

• Oculte a logo utilizando .style.visibility e 'hidden'.

Compreendendo as alterações realizadas

Visão geral da seção: O instrutor explica que as alterações feitas são apenas locais, afetando somente a máquina em que foram realizadas.

Natureza das alterações

• As alterações afetam apenas a máquina local.

• Os sites continuam inalterados para outros usuários.

• Atualizar o site restaura as configurações originais.

Explorando outras possibilidades de modificação

Visão geral da seção: O instrutor mostra como realizar modificações em outro site, o G1.

Modificando o site G1

• Acesse o site G1 e utilize o DevTools para identificar os elementos a serem modificados.

• Realize alterações na manchete do site.

Identificando elementos no Console

Visão geral da seção: O instrutor ensina como identificar os elementos corretos a serem modificados utilizando o Console.

Identificando elementos

• Utilize document.querySelector() para selecionar os elementos desejados.

• Observe as classes ou IDs dos elementos para referenciá-los corretamente.

Mudança da manchete

Visão geral da seção: Nesta parte do vídeo, o palestrante menciona a mudança da manchete.

Mudança da manchete

• O palestrante afirma que acabou de mudar a manchete.

• Ele menciona que pode tirar um print e até mesmo alterar a foto, se necessário.

• O palestrante diz que faz todas as modificações no site G1, tira um print e compartilha com todos, anunciando que acabou de sair na capa. Ele destaca que o Curso de JavaScript é o melhor no YouTube.

Poder da linguagem JavaScript

Visão geral da seção: Nesta parte do vídeo, o palestrante fala sobre o poder da linguagem JavaScript.

Poder da linguagem JavaScript

• O palestrante menciona que você não entrou no site do G1 e modificou as coisas. Ele esclarece que tudo isso acontece apenas em seu computador ou máquina local. Se você atualizar o site, ele voltará para a manchete anterior.

• Ele destaca que com as demonstrações apresentadas, é possível entender o poder da linguagem JavaScript.

• O palestrante pergunta se você gostou da ideia e se deseja aprender essa linguagem para entender melhor cada um dos comandos vistos até agora e muitos outros.

Curso completo de JavaScript disponível online

Visão geral da seção: Nesta parte do vídeo, o palestrante fala sobre a disponibilidade do curso completo de JavaScript online.

Curso completo de JavaScript disponível online

• O palestrante informa que o curso já está completinho e disponível online para assistir do início ao fim.

• Ele agradece ao patrocínio do Google e aos alunos por assistirem e compartilharem o vídeo.

• O palestrante destaca que o Curso em Vídeo está construindo, a cada dia, um pouco do conhecimento dos alunos.

• Ele ressalta que o objetivo não é tornar esse curso o mais completo, mas sim ensinar os primeiros passos para que os alunos possam continuar aprendendo sozinhos.

Bem-vindo(a) ao Curso de JavaScript

Visão geral da seção: Nesta parte do vídeo, o palestrante dá as boas-vindas ao Curso de JavaScript.

Bem-vindo(a) ao Curso de JavaScript

• O palestrante dá as boas-vindas aos alunos ao Curso de JavaScript.

• Ele menciona que seu objetivo é ensinar e dar os primeiros passos para que os alunos possam caminhar sozinhos no aprendizado da linguagem.

• O palestrante encerra desejando bons estudos e convidando os alunos para a próxima aula.

Espero ter ajudado!