Normalmente, o desenvolvimento de uma página web envolve duas etapas. A primeira é a criação do HTML que consiste na estrutura da página. E a segunda é o CSS, que envolve a estilização dos elementos da página. Contudo se a intenção é também interagir com o usuário através da página web, saber como fazer script JavaScript é fundamental.
O Javascript é uma linguagem de programação que traz mais dinamismo a página web. Por meio dela é possível contar com várias funcionalidades. Desde itens mais simples, como a manipulação de sliders, alertas e galerias. Até funções mais complexas, como a criação de apps, animações em 2D e 3D, entre outros.
Veja agora nesse tutorial tudo o que precisa saber sobre como desenvolver seus primeiros códigos em javascript. E aproveite para esclarecer todas as suas dúvidas sobre o assunto. Confira!
Aprenda como fazer script JavaScript
Para desenvolver seus primeiros códigos na linguagem Java, é importante que possua um entendimento básico de CSS e HTML.
Outro detalhe é que para que seu navegador interprete o código JavaScript, ele precisa associá-lo a um documento HTML. Para isso, você pode separar os arquivos ou então criar os códigos em meio ao HTML.
Digamos que você tem um arquivo denominado “exemplo.html”.
<!doctype html>
<html lang="pt-br">
<head>
<title>Exemplo</title>
<meta charset="utf-8">
</head>
<body>
<p>....</p>
</body>
</html>Então, se optar por criar os códigos no HTML, você terá que destacar o local usando a tag “<script></script>”. Ela deve ficar entre a tag “<head></head>”. Depois que fizer isto, o arquivo ficará assim:
<!doctype html>
<html lang="pt-br">
<head>
<title>JAVASCRIPT</title>
<meta charset="utf-8">
<script>
</script>
</head>
<body>
<p>....</p>
</body>
</html>Assim que abrir seu arquivo, é provável que não percebe nenhuma diferença. Isso acontece porque seu Javascript está sem nenhuma funcionalidade.
Criando variáveis no Javascript
Aprender a criar variações no Java também é importante quando se fala em como fazer script no Javascript. Essa funcionalidade serve basicamente para salvar dados para acesso futuro. Sejam dados em números, strings, arrays ou qualquer outro tipo. E para cria-la você deve usar a palavra “var” no seu script.
Como exemplo prático dessa etapa, vamos usar o arquivo exemplo.js criado no tópico anterior. Nele, você deve criar duas variáveis entre as tags “”, que são “var numero2=10” e “var numero3=15”.
Com a adição do var e essas duas variáveis você pode, por exemplo, desenvolver uma operação matemática:
var resultado = numero2 + numero3;Para conseguir visualizar o resultado dessa operação, você deve inserir abaixo do resultado a função alert(). Sendo assim, nesse script, os comandos ficarão da seguinte forma:
var numero2 = 20;
var numero3 = 25
var resultado = numero2 + numero3;
alert(resultado);Feito isso, agora é só atualizar a página, que aparecerá uma caixa de alerta exibindo o resultado da operação.
Inserindo variáveis diretamente no HTML
Criar alertas na tela, seguindo os comandos acima é interessante. Mas, já pensou se fosse possível fazer isso diretamente no HTML?
Pois saiba que essa possibilidade existe. Ou seja, tem como fazer script em Javascript diretamente no HTML. Para isso, primeiramente é preciso alterar seu HTML para:
<!doctype html>
<html lang="pt-br">
<head>
<title>JAVASCRIPT</title>
<meta charset="utf-8">
<script>
</script>
</head>
<body>
<h2>JS</h2>
<p>20 + 25 = <strong id='resultado'></strong></p>
</body>
</html>Se verificar acima, perceberá que ficou uma tag “Strong” com um id resultado sem preenchimento. Isso foi feito para que possa inserir um valor nela ao acessar a tag HTML “Strong”. É a forma mais prática e simples de fazer isso por meio de um ID.
Considerando o script que criamos no início, então a variável ficará da seguinte maneira:
var numero2 = 20;
var numero3 = 25
var resultado = numero2 + numero3;
document.getElementById('resultado').innerHTML = resultado;Com o Javascript você pode transformar o HTML em objetos e, assim, acessar várias propriedades de cada tag. Desde tamanho, até valores, cores entre outras.
No exemplo acima o objeto é o “document” que corresponde ao arquivo HTML. Então para procurar o elemento, basta usar o ID “resultado” dentro do HTML. E se quiser alterar o texto use a função innerHTML.
Portanto, agora você já sabe os passos iniciais de como fazer script Javascript no HTML. Ficou com alguma dúvida? Comente abaixo!
