Curso de Javascript (parte 1)

Share

Hoje vamos começar uma série de posts sobre programação em Javascript. Vamos criar desde códigos simples até alguns códigos mais avançados, e ainda apresentar diversas ferramentas úteis para um desenvolvedor Web. Mas como é de costume em qualquer curso, vamos começar com a teoria.

Javascript é uma linguagem interpretada (isto é, não precisa ser compilada e gerar um arquivo binário para que possa ser testada) voltada para a Web. Embora existam aplicações no lado do servidor, seu uso é mais comum no lado cliente, ou seja, no navegador do usuário, pois permite a criação de uma página dinâmica. O Javascript pode ser utilizado desde códigos simples para validação de um formulário, por exemplo, até aplicações complexas desenvolvidas com centenas de milhares de linhas de código.

Vamos começar com o básico: como incluir Javascript em minha página HTML? (esse curso supõe que você tenha pelo menos um conhecimento básico de HTML)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
         <title>Curso de Javascript do Blog Seja Livre</title>
         <!-- podemos incluir um arquivo externo assim: -->
         <script src="javascript.js" type="text/javascript"></script>
    </head>
 
    <body>
        <!-- ou inserir o código no meio do arquivo assim: -->
        <script type="text/javascript">
            alert("Curso de Javascript do Blog Seja Livre!");
        </script>
    </body>
</html>
<html>
    <head>
         <title>Curso de Javascript do Blog Seja Livre</title>
         <!-- podemos incluir um arquivo externo assim: -->
         <script src="javascript.js" type="text/javascript"></script>
    </head>

    <body>
        <!-- ou inserir o código no meio do arquivo assim: -->
        <script type="text/javascript">
            alert("Curso de Javascript do Blog Seja Livre!");
        </script>
    </body>
</html>

Pronto, você já tem seu código Javascript rodando. Mas sem fazer nada. Agora vamos ver alguma coisa um pouco mais útil, pegar o valor de um campo de texto digitado pelo usuário e exibi-lo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
         <title>Curso de Javascript do Blog Seja Livre</title>
    </head>
 
    <body>
        <!-- Nosso código Javascript -->
        <script type="text/javascript">
            function formSubmit() {
                var nome = document.getElementById("nome").value();
                alert("Olá " + nome + "! Bem-vindo ao Blog Seja Livre!");
            }
        </script>
 
        <!-- vamos criar um formulário com um campo de texto e um botão -->
        <form id="formulario" onsubmit="formSubmit()">
            <label for="nome">Digite seu nome: </label>
            <input type="text" id="nome" />
            <input type="submit" id="submit" text="Enviar" />
        </form>
    </body>
</html>
<html>
    <head>
         <title>Curso de Javascript do Blog Seja Livre</title>
    </head>

    <body>
        <!-- Nosso código Javascript -->
        <script type="text/javascript">
            function formSubmit() {
                var nome = document.getElementById("nome").value();
                alert("Olá " + nome + "! Bem-vindo ao Blog Seja Livre!");
            }
        </script>

        <!-- vamos criar um formulário com um campo de texto e um botão -->
        <form id="formulario" onsubmit="formSubmit()">
            <label for="nome">Digite seu nome: </label>
            <input type="text" id="nome" />
            <input type="submit" id="submit" text="Enviar" />
        </form>
    </body>
</html>

Quer continuar por dentro das novidades do Blog Seja Livre? Siga o nosso perfil no TWITTER, curta a nossa página no FACEBOOK ou adicione o Blog Seja Livre nos seus círculos do GOOGLE+.