Desenvolvimento JavaScript, Manuais, Projetos, Pesquisas de Programação Javascript

Baixe Desenvolvimento JavaScript e outras Manuais, Projetos, Pesquisas em PDF para Programação Javascript, somente na Docsity!

Apostila: versão 1.

www.youtube.com/canalfessorbruno

www.cfbcursos.com.br

[email protected]

www.facebook.com/canalfessorbruno

twitter: @fessorBruno

Introdução

A primeira observação a ser feita no curso de Javascript é que Java e Javascript não são a mesma coisa, não tem nenhuma relação entre as duas linguagens.

Javascript é classificada como uma linguagem multiplataforma, isso significa que Javascript não é exclusiva da web, um bom exemplo disso que é Javscript também é usada como linguagem em Unity3D.

Neste curso vamos aprender Javascript para web, criando scripts para incrementar as páginas web junto ao código HTML.

Comando de escrita – document.write

Como nosso curso será voltado para web, precisamos de uma página HTML para trabalhar com Javascript, inicialmente iremos trabalhar com código incorporado na própria página.

Vamos usar o “Notepad++” como editor padrão, por possuir algumas facilidades, mas o bloco de notas pode ser usado sem problema nenhum.

Crie um arquivo com o código básico HTML mostrado a seguir.

Curso de Javascript

Uma linguagem de programação é fundamental ter um comando para saída de texto, no caso de Javascript temos o método “write”, vamos entender esse comando.

Veja a sintaxe básica do comando.

document.write(“Texto a ser mostrado”);

Dentro dos parênteses inserimos o conteúdo que será impresso no browser, quando o conteúdo não for um cálculo ou o valor de uma variável, quando for um texto simples, deve vir entre aspas, basicamente é o que chamamos de string.

Adicione o código destacado em vermelho no código a seguir.

Curso de Javascript

Salve as alterações e abra o arquivo em seu browser. O resultado será o texto “Canal Fessor Bruno” sem aspas escrito em seu browser.

Vamos adicionar um parágrafo como o código destacado em vermelho a seguir.

Curso de Javascript

Este texto é escrito em HTML

Ao salvar as alterações e atualizar a página teremos o resultado conforme a ilustração a seguir.

A diferença é que o texto “Canal Fessor Bruno” é inserido via Javascript e o texto “Este texto é escrito em HTML” em parágrafo padrão HTML.

O comando write também pode inserir código HTML interpretável pelo browser, basta inserir normalmente as tags entre as aspas, veja o código em vermelho a seguir.

Curso de Javascript

Este texto é escrito em HTML

Onde inserir os scripts?

Os scripts podem ser inseridos dentro do da página como uma forma mais global ou em qualquer momento dentro da tag , desde que sempre estejam dentro da tag

Curso de Javascript

Comentários

Comentários são blocos de códigos que não serão interpretados ou compilados, em javascript podemos usar duas formas de inserir ou comentar códigos, veja a seguir.

//Comentário de linha única

/* Comentário De várias linhas */

Curso de Javascript

/* document.write("CFB"); document.write("YouTube"); */

Veja o resultado do código acima.

Note que foram impressas somente duas linhas de texto, isso porque as demais estão em forma de comentário. Todo o conteúdo que estiver em comentário é simplesmente ignorado e não é excutado.

Você pode usar comentário em qualquer local do código javascript e este inclusive é um ótimo hábito, pois irá facilitar na identificação das partes dos seu código.

Variáveis e constantes

É muito importante em uma linguagem de programação poder armazenar dados de forma temporária, essa é a função das variáveis, sempre que precisar armazenar uma informação, vamos usar as variáveis, podemos inserir, remover ou alterar informações em variáveis, vamos ver como usar esse recurso fundamental.

Var

Declarar variáveis em javascript é bem simples, diferente de linguagens tradicionais como C++, em javascript não informamos o tipo de dados e por isso não precisamos de operações como typecast, basta usar a palavra reservada “var” e o nome da variável, veja a seguir o código básico para se declarar uma variável.

Curso de Javascript

Naturalmente os valores foram impressos um após o outro, sem espaços ou quebras de linha, esse é o comportamento padrão, se precisarmos de espaços e ou quebras de linhas precisamos inserir como código HTML, como no código a seguir.

document.write(jogador + ""); document.write(vidas + ""); document.write(municao + "");

Nos comandos acima inserimos o conteúdo da variável mais o código HTML para quebra de linha, neste caso o operador + “soma” funciona como concatenação, o resultado deste código pode ser comparado com a ilustração a seguir.

Vamos adicionar um pouco mais de detalhe em nossa impressão.

document.write("Nome: " + jogador + ""); document.write("Vidas: " + vidas + ""); document.write("Munição: " + municao + "");

Nos comandos write acima usamos duas strings e uma variável para impressão (string + variável + string HTML).

Vamos aprender mais uma possibilidade de impressão, misturando strings com cálculos, dê uma olhada no código em vermelho seguir e note que iniciamos a variável pontos com valor zero e no momento da impressão realizamos um cálculo que resultará no valor 30.

var vidas=3; var municao=100; var pontos=0; document.write("Nome: " + jogador + ""); document.write("Vidas: " + vidas + ""); document.write("Munição: " + municao + ""); document.write("Pontos: " + (pontos + (vidas * 10)) + "");

Confira o resultado na ilustração a seguir.

Vamos incrementar mais um pouco o código, vamos adicionar formatação CSS inline, diretamente no HTML para formatar o valor das variáveis em vermelho.

document.write("Nome: " + jogador + ""); document.write("Vidas: " + vidas + ""); document.write("Munição: " + municao + ""); document.write("Pontos: " + (pontos + (vidas * 10)) + "");

Veja o resultado do código acima na ilustração a seguir.

Os cálculos também podem ser realizados na atribuição das variáveis, veja o código seguir destacado em vermelho.

O código acima declara uma variável e atribui o resultado do cálculo da média de disparos que acertaram o alvo, e é claro imprime este valor.

console.log()

Podemos ativar o modo console para testar variáveis e outros dados em nosso código, por exemplo, se quiser saber o valor de uma variável sem ter que imprimir na tela.

Para ativar o modo console geralmente usamos a tecla “F12”, veja o código a seguir.

Curso de Javascript

Na tela não é impresso nada, mas vamos ativar o modo console, pressione a tecla “F12” e será aberto o modo console, a seguir é mostrado no Chrome à esquerda e no I.E. à direita.

Em ambos vamos encontrar a guia “Console”, clique nesta aba e veja que estará mostrando o valor da variável “num”.

Caixas de mensagens

Uma ótima forma de comunicação com o usuário ou uma forma alternativa de colher dados para nosso programa são as caixas de mensagens, em javascript existem três tipos diferentes, são elas alert, prompt e confirm, vamos entender as três neste capítulo.

Alert

A caixa de mensagem mais simples é a caixa “alert”, mostra uma mensagem simples com um botão somente o botão OK, o comando é bem simples, basta inserir o conteúdo que será mostrado na caixa de texto dentro dos parênteses, veja o código a seguir.

Curso de Javascript

Veja a seguir o resultado do código acima em quatro navegadores diferentes, Google Chrome, Internet Explorer, Microsoft Edge, Opera.

Como vimos a caixa alert é meramente informativa, um detalhe interessante é que podemos usar a mesma lógica usada no método write para configuração do texto a ser mostrado, vamos incrementar nosso código com uma variável e mostra-la na caixa de mensagem alert.

Veja o código a seguir.

Veja que no código do método alert inserimos uma string e o conteúdo da variável canal, mas ainda tem um detalhe importante que devemos observar, veja que no final da string existe um \n que é o comando para quebra de linha, sempre que encontrar o comando \n será quebrada uma linha, então veja o resultado na ilustração a seguir.

Prompt

A caixa de mensagens prompt se diferencia por possibilitar a entrada de texto, permitindo que esse texto seja coletado e passado a uma variável, deste maneira é a primeira forma de coletar dados externos que iremos aprender.

A sintaxe de utilização do prompt é a seguinte.

Confirm

A caixa de mensagens confirme se particulariza por apresentar uma mensagem simples, dois botões OK e Cancelar.

Mas sua funcionalidade mais importante é o retorno de qual dos botões foi pressionado, caso seja clicado em OK a caixa retorna o valor “true” e caso seja clicado Cancelar a caixa retorna o valor “false”, simples assim.

Para tomar uma decisão após o clique basta usarmos o comando IF que veremos logo adiante, mas podemos armazenar este retorno também em uma variável como mostra o código a seguir.

Curso de Javascript

Criamos uma variável chamada “opc” sem valor definido.

Usamos a variável opc para receber o retorno do método confirm, lembre-se, se o botão OK for clicado o método retorna “true” (verdadeiro) e se Cancelar for clicado o método retorn “false” (falso), tornando assim a variável opc como do tipo boolean.

Na sequência imprimimos o valor da variável opc na tela, faça o teste clicando nos dois botões, veja o resultado do código a seguir.

Clique no botão OK Clique no botão Cancelar

Estrutura de decisão IF

Em qualquer linguagem de programação é extremamente importante podermos analisar um certo conteúdo ou resultado para direcionar a execução do nosso programa e determinar uma rotina ou outra a ser executada.

IF

A principal estrutura de decisão em programação é definida pelo comando IF, que traduzindo do inglês é SE, sua sintaxe básica é bem simples e vou mostrar a seguir.

if(teste lógico){ //comandos a serem executados se o teste for verdadeiro }

Nesta sintaxe o IF verifica o resultado do “teste lógico” e se for verdadeiro “true” ele executa os comandos entre suas chaves { }, caso contrário, se for falso, os comandos não serão executados e pulará para a próxima instrução após o IF.

O que é o “teste lógico”?

Basicamente o comando IF necessita de uma expressão que retorne “verdadeiro (true)” ou “falso (false)” e estes são os valores de retorno de qualquer teste lógico, basicamente é uma comparação que usa os operadores lógicos descritos a seguir:

Operador Nome Exemplo

> Maior 10 > 5 < Menor 5 < 10 >= Maior ou igual 10 >= 10 <= Menor ou igual 10 <= 10 != Diferente 1 != 2 == Igualdade 1 == 1

Vou mostrar alguns exemplos de testes lógicos.

Teste Retorno true=verdadeiro=1 / false=falso=

10 > 5 True 5 > 10 False 10 < 5 False 5 < 10 True 10 >= 10 True 10 >= 5 True 5 >= 10 False 10 <= 10 True 10 <= 5 False 5 <= 10 True 10 != 10 False 10 != 5 True 10 == 10 True 10 == 5 False 0 True 1 False