Javascript Progressivo

De Francisco J M De Matos

Saia do mais absoluto básico, até o nível profissional em linguagem JavaScript. Esse material tem o propósito de ser o maior, melhor e mais completo, não deixando nada a desejar a cursos, universidades e outros livros do mercado. Seu propósito é te ensinar todos os conceitos da linguagem JavaScript, até o nível profissional caso deseje trabalhar na área, mas de uma maneira bem progressiva, passo a passo, bem simples e fácil de entender. Usaremos textos, códigos, exercícios, questões resolvidas, criação de jogos e muito mais. Este livro será o melhor e mais barato investimento de sua vida. Conteúdo: - Introdução - Teste condicional - Laços e loopings - Funções - Arrays - Objetos - Eventos - Canvas

• Idioma: Português
• Editora: Clube de Autores
• Data de lançamento: 10 de out. de 2019

Pré-visualização do livro

Figura11

Índice

Sumário 2

Introdução ao JavaScript 9

JavaScript - O que é e Para que serve 10

JavaScript – Uma linguagem de Script e Interpretada 10

JavaScript – Uma linguagem do lado do cliente (client side) 11

As vantagens do JavaScript 12

O necessário para começar 14

HTML e CSS – Como criar sites 15

Onde estudar HTML & CSS 15

Navegador (Browser) 16

Editor de Texto para escrever o código JavaScript 16

Como criar um script em JavaScript – A tag < script > – Tutorial Olá Mundo 17

Como colocar o código JavaScript no HTML – A tag

Introdução ao JavaScript

Nesta seção iremos aprender o que é o JavaScript, para que serve, como baixar, o que instalar, onde escrever códigos e tudo que se refere a preparação para começarmos a programar em JavaScript, ou seja, toda a base e introdução ao assunto.

Os tutoriais desta seção são voltados para leigos, tanto na linguagem JavaScript, como em programação de um modo geral.

Assim, se você nunca contato com nenhuma linguagem de programação, você poderá entender perfeitamente as aulas desta seção de nosso curso.

Ao final deste seção, você vai aprender a criar seus scripts, declarar variáveis, fazer operações Matemática e até pedir informações dos usuários de seus sites.

JavaScript - O que é e Para que serve

JavaScript – Uma linguagem de Script e Interpretada

Como o próprio nome pode sugerir, o JavaScript é uma linguagem de script, e afinal, iremos criar diversos (milhares) de scripts ao longo de todos os tutoriais de nosso curso.

Mas você realmente sabe o que é uma linguagem de script?

A característica básica de uma linguagem de script, é que seu código é executado dentro de outro programa. O JavaScript, por exemplo, vai ser executado dentro do navegador (browser) de seu sistema, ou seja, sem um navegador, o JavaScript não serve de nada.

A linguagem C ou C++, por exemplo, não são linguagens de scripts, elas são linguagens compiladas. Ou seja, assim que terminamos de programar, temos que compilar e o resultado será a criação de um novo programa, um novo aplicativo, um executável.

Os códigos, chamados scripts, que iremos estudar em nossos tutoriais de JavaScript, são ditos serem interpretados. Ou seja, eles não são compilados.

Eles serão escritos, e um programa (navegador ou browser) vai ler cada um destes comandos do script e vai interpretar eles.

Esses programas são chamados também de interpretadores, pois eles vão ler cada comando, interpretar o que eles querem dizer e executar esses códigos, sem haver a necessidade de um processo de compilação pelo processador do computador.

JavaScript – Uma linguagem do lado do cliente (client side)

Outro termo técnico que é comum de ser dito sobre a linguagem JavaScript, é que ela é client side, ou seja, ela age no lado do cliente.

Mas que lado? Que cliente? Hã?

Vamos lá. Vamos dividir a Internet em dois pedaços: o lado do cliente, que são os usuários, pessoas comuns navegando na internet, como você agora, lendo este tutorial de JavaScript.

O outro lado da internet é o lado dos servidores.

Sempre que você acessa um site, como o da Globo.com, por exemplo, seu navegador fazer um pedido para os servidores (computadores) da Globo: Hey, Globo! Me manda as notícias, quero ler.

Aí os servidores vão e te enviam as informações.

Então você clica em um link, e seu navegador conversa de novo com os servidores: Ei servidor da Globo, ele clicou no link de esportes, quer ler sobre MMA, então me envie as informações sobre isso.

E assim vai funcionando a internet, nessa conversa entre o lado do cliente e o lado dos servidores. Pois bem, o JavaScript vai ser maravilhosamente útil no lado dos clientes. Os scripts vão rodar no navegador dos usuários.

Vejamos um exemplo disso.

Vamos supor que você vai se cadastrar no site de um banco, para ver se pode financiar um carro. Então você vai preencher um formulário onde tem que dizer sua data de nascimento, isso é necessário pois somente quem tem mais de 18 anos pode pedir um financiamento.

Então você preenche, seu browser envia as informações para o servidor do banco.

Mas se você for de menor, lá no servidor eles vão ver: Opa, esse cara aqui é de menor, não vai dar pra ele receber financiamento. Vamos mandar e-mail pra ele explicando isso.

Agora imagine milhares ou milhões de pessoas fazendo isso, quanto trabalho vai ter o servidor, em checar se são maiores de idade, em responder aos inscritos etc etc. É aí que entra o JavaScript.

Você cria um script dentro do HTML, no código dos formulário que vai fazer uma checagem. Ele vai pegar o dado do usuário sobre a data de nascimento, e vai checar matematicamente se ele é de maior e só vai deixar ele enviar os dados do formulário se for de maior.

Como veremos, é uma checagem simples. E o mais fantástico: os dados só são enviados se for maior de idade. Assim, os servidores não serão incomodados, não receberão dados inválidos, nem irão perder tempo e processamento checando isso e respondendo e-mail.

As vantagens do JavaScript

Por ser executado no lado do cliente, não há aquela conversa entre o seu navegador e os servidores, e essa velocidade vai depender da banda de sua internet, se for muito lenta, essa comunicação é bem demorada.

Porém, se o script rodar diretamente no seu navegador, é um processo quase instantâneo, pois o processador de seu computador é zilhões de vezes mais veloz que uma conexão de internet, não é verdade?

Não sei se você chegou a usar a internet na década de 90, quando a velocidade de conexão era super lenta, mas os sites eram super mega simples, basicamente feitos de textos, pois era muito custoso fazer diversos efeitos, por conta dessa conversa entre cliente e servidor.

Porém, com o uso do JavaScript, podemos criar efeitos na janela do navegador, nas cores dos links, podemos fazer uma imagem aumentar de tamanho quando passamos o mouse em cima, o JavaScript pode detectar a resolução da sua tela (tela de notebook, netbook, tablet, smartphone) e exibir o conteúdo de um site de uma maneira mais adequada para cada tipo de dispositivo e várias outras coisas.

E lembre-se do mais fantástico: tudo isso no lado do cliente, no computador das pessoas, e isso é algo extremamente veloz, geralmente percebemos como algo instantâneo, e tudo graças ao JavaScript.

Outra coisa interessante que você vai notar ao estudar qualquer tutorial de JavaScript, é que você pode fazer muita coisa offline, afinal ele vai rodar no seu navegador, e ele não precisa estar online para isso.

Assim, podemos criar calculadores em JavaScript, calcular IMC, criar jogos, programas para calcular média, calcular quantos segundos, minutos e horas de vidas vivemos, apenas fornecendo nossa data de nascimento, podemos criar um script que valida o número de um CPF, um script para quebrar senhas, para baixar o código-fonte de sites, você pode exibir uma mensagem Proibido a cópia de conteúdo, se alguém clicar no texto ou apertar Control+C, pode fazer com que a janela feche automaticamente caso a pessoa digite a senha errada etc etc etc.

A limitação do JavaScript é que ele é feito para web, você não vai usar essa linguagem para fazer coisas dentro de seu computador.

Mas a internet é algo tão vasto que já virou sinônimo de computador, afinal, quantas pessoas você conhece que tem computador e não acessam a internet?

Eu não conheço ninguém. Todos usam e vivem para usar a internet, então estudar JavaScript é criar aplicações que podem ser usadas por todo mundo. Não há limites ou fronteiras, a internet é simplesmente a tecnologia mais revolucionária, importante e usada de todos os tempos.

Parabéns, você decidiu estudar JavaScript, a linguagem que vai te dar o poder de dominar, entender, alterar e criar scripts para a web.

Bem vindo ao Curso JavaScript Progressivo, desejamos bons estudos e que use seus conhecimentos com responsabilidade, e caso fique milionário criando algum projeto revolucionário, não esquece da gente :)

O necessário para começar

Ok, você já leu a respeito da linguagem de programação e está decidido: quer aprender como programar em JavaScript !

Mas onde vamos programar? Que programar devemos usar? Onde escrever o código, como saber se está certo? Como ver o resultado de meus scripts? Como enviar para meus amigos?

Neste Tutorial de JavaScript iremos responder a todas estas dúvidas iniciais para todos os que desejam começar a programar em JavaScript.

HTML e CSS – Como criar sites

Como já deixamos bem claro em nosso tutorial onde explicamos O que é e Para que Serve o JavaScript, ele é uma linguagem de script voltada totalmente para programação web.

Ou seja, vamos usar o JavaScript para criar diversas aplicações para sites e sistemas. E como um site é feito, em sua forma mais básica?

Através da linguagem de marcação HTML, que nos permite estruturar todas as páginas de um site, marcando os locais de conteúdo, cabeçalho, menu, definindo links, formatando textos, localização de imagens, tabelas e praticamente tudo no que se refere à estrutura de um site.

Porém, nos dias de hoje, é raro um site que seja feito em HTML 100% puro e estático, geralmente eles são estilizados com a linguagem de marcação CSS, que de uma maneira bem simples e poderosa pode definir cores, efeitos em links, imagens, fontes, margens, espaçamento, atuar em tags específicas e uma série de outras possibilidades de uma maneira bem simples e concisa.

Não, não é obrigatório saber HTML e CSS para programar em JavaScript, mas é, leia bem, é ALTAMENTE RECOMENDÁVEL E ACONSELHÁVEL estudar HTML e CSS antes, ou durante, seus estudos de JavaScript.

Aliando o poder de uma linguagem de programação como o JavaScript, as linguagens de marcação e de estilo HTML & CSS, você poderá criar sites fantásticos, bem organizados, estruturados e com um belo design, que são características obrigatórias em qualquer website profissional que você possa a vir encontrar na internet.

Onde estudar HTML & CSS

Se não estudou HTML nem CSS, ou estudou mal, não fique nervoso ou triste. Temos um projeto chamado HTML Progressivo, que é um Curso de HTML e CSS online, completo, totalmente gratuito e voltado para iniciantes.

O site está no formato de uma apostila, que inicia ensinando o HTML 4.01, o HTML basicão que ainda predomina nos sites, explicando suas tags, lógica e estrutura.

Em seguida, o curso ensina você a estilizar seus sites em HTML com o fantástico CSS, sempre com exemplos, exercícios e códigos bem comentados. Por fim, a apostila irá se dedicar ao novíssimo, sofisticado e inovador HTML5.

Navegador (Browser)

Como dissemos antes, o JavaScript é uma linguagem para web, do lado do cliente (client side) que roda diretamente no browser (navegador de internet).

Então, é mais que óbvio que precisaremos de um navegador para estudar nossos tutoriais de JavaScript.

Recomendamos o Mozilla Firefox, Google Chrome ou mesmo o Opera. Evite o Internet Explorer, pois ele é realmente cheio de bugs e nada amigável para webmasters e desenvolvedores web.

Porém, mais importante que o navegador é a versão dele.

Mantenha sempre o navegador atualizado e habilite o JavaScript nele.

Sim, algumas vezes o JavaScript é desabilitado do browser, e isso pode gerar dor de cabeça à toa para você.

Editor de Texto para escrever o código JavaScript

Ok, você já estudou ou está estudando a dupla HTML & CSS e já tem seu navegador favorito atualizado e pronto para aguentar os inúmeros e fantásticos scripts que criaremos em JavaScript.

Chegou a hora de colocar a mão na massa: onde vamos escrever nossos códigos JavaScript?

A resposta é simples: em um editor de textos, qualquer um, como o bloco de notas.

Durante seus estudos de programação e contato com outros programadores, você vai ouvir falar bastante de programas, IDE’s, editores fantásticos que completam o código, que deixam você arrastar elementos e fazer maravilhas apenas apertando botões.

Nossa dica é: se for iniciante, se afaste totalmente destes tipos de programa. Sim, eles facilitam a vida dos programadores, mas só dos profissionais que trabalham diariamente com isso e não tem tempo para perder.

Se você é novato no mundo da programação, é totalmente necessário e importante que você escreva TODOS seus códigos JavaScript na mão, completos, no editor de textos de sua preferência. Iremos fornecer milhares de códigos, scripts e comandos em JavaScript, mas copiar e colar, ou deixar o programa completar, só vai te prejudicar.

Escrever cada linha de comando que você estuda é muito, muito importante mesmo, vai fazer você aprender e memorizar de verdade.

Se quiser usar um editor de textos que deixa seu código mais organizado e colorido, e que não vai fazer o trabalho para você recomendamos dois fantásticos editores:

Notepad++

Sublime Text

Baixou? Instalou? Ajeitou sua cadeira? Pegou o café? Então vamos, finalmente, programar em JavaScript!

Como criar um script em JavaScript – A tag < script > – Tutorial Olá Mundo

Agora que já sabemos O Que É e Para Que Serve o JavaScript e já nos preparamos obtendo O Necessário Para Programar em JavaScript, vamos de fato colocar a mão na massa e aprender como criar um script em um site HTML.

O passo inicial é criar o famoso Olá, mundo ou (Hello world) em JS, para isso, vamos aprender sobre a tag .

Como colocar o código JavaScript no HTML – A tag

Uma das grandes vantagens de iniciar seus estudos em JavaScript, já tendo estudado HTML e CSS, é que não vai precisar instalar ou fazer nada de diferente ou desconhecido para começar a criar seus scripts.

Vamos iniciar a programar em JavaScript como se estivéssemos continuando nossos estudos de HTML5 e CSS.

Mas onde vamos escrever os códigos de JavaScript? No meio do código HTML? Em qualquer local? Preciso dizer ao browser que aquilo é um script? Ele detecta automaticamente?

Afinal, onde vamos escrever os códigos de programação JavaScript? Como criar um script, e onde?

A resposta de tudo isso é: na tag

Assim, a estrutura de uma página em HTML5 que contém um script em JavaScript é:

<html>

<head>

  <title>Como usar JavaScript em HTML</title>

  <script type=text/javascript>

    //Seu código JavaScript vem aqui 

  </script>

</head>

<body>

  Corpo do site.

  </body>

</html>

Note que que dentro das tags não escrevemos nada, só um comentário, pois é ali dentro que iremos colocar os códigos da linguagem JavaScript.

Bem simples, não?

Como fazer o Olá, mundo em JavaScript

Agora que já sabemos onde colocar os códigos, vamos criar nosso primeiro script em JavaScript, que simplesmente exibe uma mensagem em uma caixa de diálogo.

Para isso, crie um documento .html com o seguinte código, que é uma mistura de HTML com JavaScript:

<html>

<head>

<title>Tutorial de JavaScript - Olá, mundo</title>

<metaname=descriptioncontent=Como criar um script em JavaScript no HTML>

<metacharset=utf-8>

>

  alert('Olá, mundo');

</script>

</head>

<body>

</body>

</html>

Agora abra o site no seu navegador.

Verá que apareceu uma caixa de alerta, com um botão de ‘Ok’ e uma mensagem, e isso tudo ocorre por um simples código, uma única de linha de JavaScript: alert(‘Olá, mundo’);

Provavelmente você já viu essa janelinha de alerta antes, quando digitou uma senha errada, esqueceu de preencher algum campo do formulário ou viu alguma mensagem de erro. É a mesma janelinha, de alert.

Experimente escrever outra coisa.

Por exemplo, vamos escrever:

alert(‘Como programar em JavaScript\nCurso JavaScript Progressivo!’);

(não estranhe o \n, é um símbolo que representa a quebra de linha, um enter)

Veja o resultado:

Figura1

Sim, aquele simples código cria uma janela, mostra Alerta JavaScript, um ícone, um botão Ok e um texto que você pode escolher. Tudo com uma linha de JavaScript.

Para fazer o mesmo na linguagem C, por exemplo, seria necessário dezenas de linhas de programação. Poderoso e simples esse JavaScript, não?

O que acontece nesse código é simples. Quando seu navegador se depara com o

Onde colocar o JavaScript em um site

Neste tutorial de nosso Curso de JavaScript Online e Gratuito, iremos aprender um pouco mais do funcionamento do JavaScript em nossos navegadores.

Veremos onde e quando os scripts são executados, onde podem ser inseridos, como usar scripts externos ao documento HTML, scripts na tag , , dentre outros detalhes sobre como as coisas funcionam no mundo JavaScript.

Como o JavaScript funciona no navegador

Em nosso tutorial de JavaScript sobre a tag

Isso não é regra, nem obrigatório.

Na verdade, como veremos no decorrer de nossa apostila de JavaScript, essa é a maneira mais incomum de se inserir scripts