Curso de JavaScript – 25 Aulas

Curso de JavaScript – 25 Aulas



Curso de JavaScript – 25 Aulas

JavaScript para iniciantes: o que é, origens, para que serve e “Hello World”

O que é JavaScript? Para que serve? Qual é a origem? Descubra tudo isso nesse post e ainda escreva o seu 1º código JS!

 

Sabe quando você é criança e aprende a falar as primeiras palavras, aí seus pais, avós, tios e tias comemoram como se aquilo fosse um ato incrível de genialidade.

Então, na TI, em 90% dos casos, essas primeiras palavras são: “HTML, CSS e JavaScript”.

Gift Card 728x90

Nesse post você irá dar os seus primeiros passos com o JavaScript: descobrir o que é JavaScript, sua origem, funcionalidades e já escrever o seu primeiro código com a linguagem de programação.

O que é JavaScript?

Vamos começar pelo que JavaScript não é:

JavaScript não é Java!CLIQUE PARA TUITAR

O JavaScript (JS) é uma linguagem de programação utilizada principalmente em páginas web. Com o JS, você pode mostrar mensagens e outras informações interessantes, fazer verificações ou mudar dinamicamente a apresentação visual das páginas, conforme o comportamento que você deseja que sua página (ou aplicação) possua. Tudo através do navegador do usuário. É possível fazer isso, até mesmo sem conexão com a internet.

IMPORTANTE: o JavaScript mudou muito com o passar dos anos. Hoje, trata-se de uma tecnologia que pode ser utilizada tanto no cliente-side de uma aplicação, quanto no server-side.

2 Botas por 199 Masculino

Origem do JS

Diferente do que muitos pensam, JavaScript não é baseado na linguagem Java, a única relação direta entre as duas é uma possível jogada de marketing da empresa Netscape que na época de sua criação tinha acabado de habilitar a linguagem Java em seu revolucionário navegador.

A linguagem foi criada em 1995 por um funcionário da Netscape chamado Brendan Eich, na época ela se chamava LiveScript e depois passou a ser conhecida definitivamente como JavaScript, ela é baseada na linguagem de programação ECMAScript padronizada pela Ecma International.

Por que devo usar o JavaScript?

 Por que usar JavaScript | JavaScript para iniciantes: o que é, origens, para que serve e "Hello World"

Atualmente, o JavaScript é a linguagem web mais popular do mundo, o fato é que todos os sites modernos e a grande maioria das aplicações web possuem recursos em JavaScript. Uma galeria de imagem, interação com a rolagem da página, animações parallax, validações e manipulação de elementos HTML e CSS. Hoje em dia, até banco de dados NoSQL podem ser baseados em JavaScript.

Estamos falando de uma linguagem essencial para qualquer programador e que ao mesmo tempo é simples de aprender. Trata-se de uma linguagem baseada em eventos. E, ainda, você conta com diversos frameworks (AngularJS, node.js, Ember.js, ReactJS) e bibliotecas específicas para a linguagem, como o jQuery, que apoiam o seu desenvolvimento com a linguagem.

Obs: O fato de existir diversos frameworks auxiliares pode ser um problema também, pois fica muito difícil manter um foco em apenas uma ferramenta.

Mas então, voltando ao porquê de usar o JS, cito mais dois fatores extremamente relevantes:

  • A possibilidade de criar aplicações web ricas e até sistemas completos;
  • A relevância do mercado de trabalho para o profissional que domina essa tecnologia

Dê uma pesquisada a mais nesses dois itens, vale a pena!

Um ótimo exemplo de uso do JavaScript

Para um site trazer uma experiência de usuário agradável, ele deve atender a diversos pontos importantes, como a entrega do conteúdo de forma objetiva e atraente e, claro, a responsividade, pois a grande massa de usuários utiliza dispositivos móveis.  E este é o ponto que eu gostaria de chegar.

O JS pode poupar uma terrível dor de cabeça quando o assunto é responsividade, por ser uma linguagem compatível com todos os browsers da atualidade, seu script pode validar a resolução do dispositivo utilizado pelo seu usuário. Trazendo os elementos certos, para os usuários corretos. Evitando possíveis experiências negativas por incompatibilidade móvel.

Outras aplicações do JavaScript

Você pode usar o JavaScript para uma série de funções:

  • Validação de formulários: assim, o seu usuário não passa pela frustação de ter que recarregar a página inteira simplesmente porque digitou um campo errado;
  • Esconder ou apresentar informações da página, conforme o comportamento de seu usuário;
  • Janelas de aviso ou de confirmação;
  • Sistemas de autocomplete, algo parecido com quando você digita na busca do Google e ele completa com as palavras possíveis ou já salvas pelo seu navegador;
  • Sistemas ou aplicações web que mostram informações que mudam constantemente, conforme eventos internos ou externos ao site/aplicação.
  • Interações com elementos HTML, para que estes mudem dinamicamente.
  • Interação com regras CSS, da mesma forma que com o HTML.

Enfim, basicamente, o JavaScript é o responsável por dar vida a sua página ou aplicação web.

Crie agora o seu primeiro código JS

Vamos iniciar com um exemplo bem simples, onde você irá apresentar uma janela com o clássico “Hello World JavaScript”

Para isso, vamos precisar de um documento base HTML. Crie o documento e  salve da seguinte forma: ExemploJS1.html.

Sempre que desejarmos adicionar um script em uma página html é necessário declará-lo. Para isso, usamos a tag script da seguinte forma:

Entre as tags <script>, adicionamos o médoto window.alert(”), para abrir uma janela quando o navegador for carregado. Entre os parenteses, devemos adicionar o texto que vamos exibir.

Olá mundo JavaScript

Este é o código completo:

Não esqueça do ponto e vírgula ao final do método!

Exemplo 2: Trocando o texto com um clique

Outro recurso bastante utilizado é a troca de elementos através da interação do usuário, vamos fazer este exemplo juntos.

Iniciamos com a marcação básica de um documento html padrão.

Salvamos este documento como exemploJS2.html. Neste exemplo você vai precisar de alguns conhecimentos básicos de HTML. O objetivo é trocar o texto quando o usuário realizar uma ação na página.

Então a primeira coisa que precisamos fazer é identificar o texto que aparece na tela, vamos adicionar um paragrafo ao código html, assim:

Analisando o código, veja que adicionamos um id para o paragrafo. Como dito anteriormente, o JavaScript é baseado em eventos ou métodos. Estes métodos precisam ser devidamente identificados, esta identificação em HTML é feita por meio de classes ou ids.

Neste exemplo, usamos um id com nome de “change”

Agora vamos criar a interação com o usuário através de um botão <button>, que irá adicionar o evento onclick (ao clicar). Nesse caso, não precisamos inserir a tag <script>, pois o JavaScript irá funcionar através do elemento HTML <button>. Aliás, é possível repetir essa técnica para qualquer elemento html.

IMPORTANTE: Com tempo e experiência, você irá entender melhor sobre quando usar códigos JavaScript através da tag <script> e quando utilizar pela tag html. Para a grande maioria dos casos, é considerado uma boa prática, utilizar a tag <script>.

O sua tag <button> deve ficar assim:

Métodos, classes e id

Código JavaScript | JavaScript para iniciantes: o que é, origens, para que serve e "Hello World"

Lembra que falei que o JS é baseado em métodos e estes são identificados por classes ou Id.

Pois bem, o JavaScript possui métodos prontos ou peseudocódigos. Em nosso exemplo, iremos usar o document.getElementById(”) que manipula o objeto com o id identificado na página, este método combinado com outro pseudocódigo chamado innerHTML, realiza a troca do texto.

Resumindo, a nossa linha de código deverá ficar assim:

Adicione esta linha de código ao seu html, abaixo da tag <p> e pronto! Salve o documento e a página com o novo exemplo está pronta para ser testada. Basta carregá-la com o seu browser de preferência e clicar no botão! O seu código deverá ficar similar a este:

Este exemplo pode ser feito com imagens e outros elementos HTML também. Portanto, faça mais testes, pratique! E caso você queira aprender ainda mais sobre JavaScript e, claro, a tríplice completa (HTML e CSS),

 

Deixe um comentário

Esta é uma loja de vendas de produtos de afiliação. Dispensar

X
0

Your Cart

%d blogueiros gostam disto: