Neocodex Design - Blog - Javascript
24 lições para iniciar em Javascript - Artigo 1
Olá, tudo bem?
Eu sou Emilio Dami Silva e este é o meu primeiro artigo para levar você ao mundo do Javascript
de forma prática.
Estes artigos são básicos e pretende te introduzir ao Javascript.
Javascript é um motor de interpretação que executa comandos internos do BROWSER,
senão vejamos, quando uma página da Web é carregada no navegador, ele cria um objeto modelo de documento, contendo toda a estrutura da página, esse
e o chamado DOM, (D)ocument (O)bject (M)odel, o DOM surgiu com o crescimento do NETSCAPE e o Internet Explorer na decada de 90. Naquela época se estabeleceu um padrão para que
os documentos fossem carregados e os BROWSERS pudessem interpretar, mas foi em 2003/2004 que surgiu a padronizacao
definitiva do DOM, feita pelo "World Wide Web Consortium (W3C)".
O Javascript não tem relação nenhuma com a linguagem JAVA, nem pode-se dizer que o Javascript seja uma linguagem de programação em sentido estrito,
o nome Javascript surgiu da junção de duas palavras em Ingles, JAVA mais SCRIPT. O vocábulo Java veio da linguagem JAVA que era um enorme sucesso na época da criação do Javascript,
para aproveitar o marketing da linguagem JAVA e o SCRIPT é porque era isso que era na época, um interpretador de script, juntou se os dois e por fim se chamou Javascript.
Assim, o JS (Forma rapida de chamar o Javascript de JS) veio para automatizar comandos que estao disponiveis no DOM para serem executados nas páginas HTML, vale a pena mencionar que o usuário pode
desligar essa execução de JS simplismente desligando isso no BROWSER, assim os scripts não serão executados.
Assim, fica mais fácil entender que o JS não é uma linguagem de programação em sentido estrito, mas sim,
ela é um conjunto de script que deve ser interpretado pelo Browser.
Muito bem, o JS trabalha interpretando comandos do DOM. Nossos artigos irão tratar de uma série de comandos importantes.
O que vamos precisar para testar nossos comandos:
- • Um Computador com o Windows;
- • um editor de textos; e
- • um browser, eu sugiro que seja o Google Chrome Browser
Por agora, vamos criar o nosso primeiro script, logo em seguida tem a explicação de cada linha, leia com atenção.
- Abra um editor de textos no seu computador, pode ser o bloco de notas e digite as seguintes linhas:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="Emilio Dami Silva"/>
<meta name="description" content="Artigos básicos sobre Javascript"/>
<meta name="keywords" content="Cursos, HTML, sites, web, websites, desenvolvimento"/>
<title>Neocodex Design Cursos</title>
</head>
<body>
<h1>
Nossa página OFICIAL
</h1>
<p>
Nossa primeira página criada para desenvolver scripts em HTML/CSS/JS.
Esse script irá criar um caixa de dialogo pedindo ao usuário o nome e irá mostrá-lo dentro de uma caixa de mensagens.
<br/>
<br/>
Clique para testar:
<br/>
</p>
<button onclick="myFunction()">
Qual é o seu nome?
</button>
<p id="info_name"></p>
<script>
function myFunction()
{
var name;
var name = prompt("Digite seu nome:");
if (name!=null)
{
document.getElementById("info_name").innerHTML="Olá meu amigo, eu aprendi nesse script a pedir e mostrar o seu nome na tela, senão veja você mesmo: seu nome é " + name;
}
}
</script>
</body>
</html>
Em HTML tudo funciona com TAGS, e em JS tudo funciona com comandos que estao disponiveis no DOM e mais uma grande estrutura de programação por traz que permite fazer quase tudo em uma página, e é o que torna o JS uma ferramenta muito poderosa para fazer qualquer coisa, nao vamos explicar todas as linhas da nossa página porque uma porção delas você já conhece. Se ainda não conhece, por gentileza, clique aqui e leia os artigos de HTML aqui mesmo no NeocodexDesign clicando nesse link:
12 Artigos para iniciar em HTML - Artigo 1,
<button>
A tag <button> como conhecemos em HTML mostra um botão que quando apertado pelo usuário executa uma função pré-estabelecida que neste caso aqui irá executar a função "myFunction", dentro desta função serão executados alguns comandos do DOM. Conforme você verá. Observe que o JS adota muitos conceitos programação e com a evolução do JS, hoje podemos dizer que é uma linguagem interpretada que roda em um browser ou em um server.
<p Id="info_name"></p>
Este comando gera um novo parágrafo e dá a ele o nome de "info_name", com essa identificação o JS irá ter acesso ao parágrafo para realizar os comandos necessários. Observer que você pode dar qualquer nomes aos seus parágrafos, divs etc, mas seja sempre bem legível evitando nomes complexos e dificeis de leitura, porque alguem irá precisar saber do que se trata no futuro, quem sabe, até mesmo você.
<script>
A tag <script> abre o script do JS para execução, todos os comandos colocados dentro da tag <script> será executada pelo interpretador do JS assim, você irá ter um bloco de comandos que serão interpretados pelo BROWSER sempre que o usuário clicar no BUTTON da pagina.
A tag <script> deve ser colocada em qualquer lugar da página depois da abertura da tag <HTML>, mas é recomendado que seja colocado no final da página, antes da tag de fechamento </body>, essa prática ajuda na compreensão do arquivo criado, se seguir este padrão a manutenção futura pode ser mais fácil.
function myFunction()
Uma vez dentro da tag <script> são colocados os comandos do JS, iremos ver um por um deles, aqueles mais essenciais por enquanto, nos próximos artigos. O primeiro comando é o function, esse comando abre uma função JS e dentro da função todos os comandos que serão executados toda vez que a função é requisitada. Vamos discorrer mais sobre funções no próximo artigo.
function myFunction()
{
}
Essas chaves representa um bloco de comandos que serão executados de uma vez somente quanto a função for acionada,
var name;
A instrucao var criam variaveis dentro do JS, variáveis são uma espécie de container que recebe coisas para uso futuro. Para o caso do nosso exemplo, var name; significa que vamos criar um container que vai guardar um conteudo qualquer na memória do dispositivo que se chamará name, esse conteúdo pode ser acessado a qualquer tempo pelo nome "name", porque o container tem esse nome. Uma variável consome uma fatia de memória do seu dispositivo e portanto deve ter reduzido o seu uso. Vamos ver muito a fundo sobre variaveis num artigo em breve e que trataremos exclusivamente de variáveis.
var name = prompt("Digite seu nome:");
Essa linha tem um outro comando chamado prompt e esse comando irá para a execução de sua página e irá pedir ao usuário para que informe os dados necessarios, e irá armazenar na variável chamada "name", criada para armazenar textos na memória do dispositivo, quando o JS executa o comando var name = prompt("digite seu nome:") o JS vai executar o prompt, receber os dados do usuário e armazenar na variavel "name" e você podera usar esse conteudo no futuro.
if (name!=null)
Essa instrucao faz literalmente o que esta escrito, ou seja, pergunta se o conteudo da variavel name contem alguma coisa digitada pelo usuario, se for diferente de nulo, ira executar o que esta dentro das chaves "{ }", se for nulo, sai desse bloco, se nao for nulo, executa o que esta dentro dos colchetes. Falaremos mais sobre estruturas de linguagem, condicoes e loops de repeticao em um curso que chama "conheca o essencial sobre linguagens de programacao e algoritimos"
document.getElementById("info_name").innerHTML=
Observe essa instrucao aqui dentro desse bloco, toda pagina e denominada pelo DOM de document e sao varias funcoes que o DOM separa para o document, essa instrucao utilizada no nosso exemplo aqui foi a "getElementById" que pega o elemento pelo seu identificador.
.getElementById("info_name")
Essa instrucao .getElementById("info_name"), na pagina interpretada pelos Browsers, retorna o elemento especificado pelo ID, existe outras maneiras de buscar o elemento da pagina, mas no nosso exemplo e nesse artigo vamos ficar com o ID apenas. No nosso exemplo, ID="info_name".
.innerHTML =
Essa instrucao ".innerHTML = " ira fazer que o conteudo que colocarmos nessa expressao fara parte do elemento que buscamos no DOM, ou por outra, uma vez que atribuimos qualquer conteudo a esse elemento, ela ira ser interpretado pelo Browser e fara a sua funcao que nesse caso especifico, e a funcao de mostrar na tela algum conteudo. O ".innerHTML" ira colocar o conteudo como a parte de HTML do elemento em questao.
"Olá meu amigo, eu aprendi nesse script a pedir e mostrar o seu nome na tela, senão veja você mesmo: seu nome é " Agora veja o complemento aqui exposto entre aspas duplas, este conteudo ira ser parte do elemento, e fara parte do .innerHTML que ira mostrar essa linha dentro do .innerHTML do elemento, mas essa e a primeira parte do lado direito da igualdade, ainda temos um + name, o que significa que o conteudo da variavel name sera anexado ao texto que esta entre aspas duplas. A partir disso, o Browser ira exibir a frase que esta entre aspas duplas somado com o nome que esta na variavel name. Os dois serao exibidos no elemento identificado pelo ID.
por exibir a variavel.
Parabéns por estudado esse primeiro artigo. Se você conseguiu obter exito meus parabéns, se não me envie mensagem com sua dúvida.
Clique no link para ir para o segundo artigo do curso:
24 lições para iniciar em Javascript - Artigo 2,
Fontes:
w3schools
w3schools js
Spec
ICANN
W3C
Por enquanto é só.
Eu sou Emílio Dami e retornaremos em breve.
Assista nossos vídeos em nosso canal no you-tube, se inscreva lá para continuar a receber todas as novidades automaticamente e deixe seu comentário, ah e compartilhe!
Você pode enviar um e-mail para info@neocodexdesign.com
JS - Artigo 1
Se você deseja construir uma plataforma sólida para seus negócios.
Envie-nos uma mensagem agora mesmo e vamos falar sobre o seu projeto!
Vamos conversar mais sobre o seu projeto?
Vamos direto ao trabalho! Fale algo sobre seu projeto!
Contate-nos usando o formulario abaixo, informe seu telefone e email para entrarmos em contato imediatamente!
Você pode nos contatar ligando para nós, utilizando o email ou nos contatando via redes sociais.
Mas se você preencher os campos abaixo iremos entrar em contato agora mesmo.
Muito obrigado pela sua visita ao nosso site!