Arquivo mensal: março 2011

Padrão

Publicado por

Postado no

18 de março de 2011

Publicado em

Javascript, Linguagens

comentários

1 comentário

SdevLab – Tutorial | JavaScript – Regras básicas

Fala galera!

Para continuar com a idéia de ensinar o básico sobre JavaScript, segue neste post as regras básicas de declaração de variáveis e comentários.

boa leitura!

ATUALIZAÇÃO (24/08/2015): Este post foi escrito com base nos tutoriais do W3C para JavaScript ECMA-262 (dei um curso de linguagens web em 2010 mais ou menos e foi deste curso que surgiu a série de posts). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para a versão ECMAScript 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

JavaScript – Regras básicas (comentários e variáveis)

JavaScript é case sensitive e trabalha com comandos que o navegador vai executar. Estes comandos “podem” terminar ponto e vírgula, mas, isto não é obrigatório. Usa-se o ponto e vírgula para poder agrupar mais de um comando por linha.
Caso você não use ponto e virgula, divida os comandos em linhas.

Particularmente, eu prefiro usar ponto e vírgula para evitar problemas e manter a boa prática de programação.

Comentários

  • Comentários simples em JavaScript começam com //
  • Comentários de mais de uma linha, devem ser no formato /* e */

Variáveis

Variáveis em JavaScript são, assim como a linguagem, case sensitive. Devem começar com uma letra ou com o caractere undescore.

A declaração da variável deve seguir o modelo:

var x;

Nota: quando você redeclara uma variável, ela não perde seu valor (caso ela possua um valor).

Variável Local e Variável Global

Variáveis locais são usadas somente em funções. Quando a função termina de ser executada, a variavel (ou as variáveis) perdem seu valor.

Variáveis globais podem ser utilizadas por qualquer trecho javascript dentro da página. Só morre quando você sai ou muda de página.

Nota: Se você atribuir valor à uma variável não declarada, ela automaticamente passa a ser uma variável global.

Atribuindo valores e operando com variáveis

Esta parte é simples, basta seguir o exemplo:


var x;
x = 5;
var y = 7;
var z;
z = x + y; //resultado 12!

No caso de uma string:


var a = "S";
var b = "dev";
var c = "Lab";
var d;
d = a + b + c; //resultado SdevLab

Com isto encerramos o básico do básico, no próximo post da série ja vamos começar com estruturas condicionais, de repetição, de loop e muito mais!

Até a próxima!
xD

Padrão

Publicado por

Postado no

17 de março de 2011

Publicado em

Javascript, Linguagens

comentários

1 comentário

SdevLab – Tutorial | JavaScript – Onde colocar os Scripts?

Fala galera!
Dando continuidade ao post anterior, este explica onde colocar os blocos de script.

Boa leitura!

ATUALIZAÇÃO (24/08/2015): Este post foi escrito com base nos tutoriais do W3C para JavaScript ECMA-262 (dei um curso de linguagens web em 2010 mais ou menos e foi deste curso que surgiu a série de posts). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para a versão ECMAScript 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Onde colocar seus Scripts

JavaScript é executado pelo navegador assim que a página é carregada, então é uma boa idéia colocar os scripts (que podem ser vários, não existe limite de script por página) em um local adequado (sim, existe mais de um).
Este local pode ser entre as tags <body> e </body>, <head> e </head> ou ainda você tem a opção de escrever um arquivo somente com o script, salvá-lo com a extensão .js e então inserir o  endereço deste arquivo na sua página para utilizar os scripts deste arquivo externo.

JavaScript em <body>

Blocos de script no meio da página são bastante simples de se entender, bastando para isto o exemplo abaixo:


<html>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>

document.getElementById("demo").innerHTML=Date();

</body>
</html>

Como você pode ver, o exemplo simplesmente coloca o conteúdo do parágrafo que tem id=”demo”. Inicialmente vazio.

JavaScript em <head>

Se você optou por colocar seu script entre as tags <head> e </head> significa que talvez você não deseja que seu script seja imediatamente executado pelo navegador, então este script deve ser uma função, que vai estar esperando para ser executada (um dos estilos mais comuns de script…).

Para mostrar melhor, exemplo:


<html>
<head>

function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display  Date</button>
</body>
</html>

Neste exemplo tem um botão, que tem como ação chamar a função displayDate() quando pressionado. Funções JavaScript serão abordadas posteriormente.

Scripts Externos

Para finalizar, se você quer escrever várias funções que vai usar sempre, de repente é uma boa idéia juntar todas elas em um arquivo externo e somente colocar o endereço deste arquivo como referência na página, como é comum se fazer com css.

A única regra para isto é que seu arquivo deve ter a extensão .js e não pode conter as tags !

Exemplo:


<html>
<head>
http://xxx.js
</head>
<body>
</body>
</html>

Juntando tudo

Agora que já sabemos que modalidades de scripts podemos usar, vem a parte mais interessante, não precisa ser uma ou outra, podemos usar scripts em body, head e ainda ter um arquivo de scripts anexado, funcionando tudo junto!

Tente experimentar, cuidado pra não confundir!

Até a próxima!
xD

Fonte: w3schools.com

Padrão

Publicado por

Postado no

16 de março de 2011

Publicado em

Javascript, Linguagens

comentários

1 comentário

SdevLab – Tutorial | JavaScript – Introdução e Conceitos Básicos

Quer aprender uma linguagem de scripts fácil, versátil, com muitos recursos e possibilidades? Tente JavaScript! Para isto começe a ler este tutorial e continue acompanhando o blog que em breve este assunto será continuado!

boa leitura!

ATUALIZAÇÃO (24/08/2015): Este post foi escrito com base nos tutoriais do W3C para JavaScript ECMA-262 (dei um curso de linguagens web em 2010 mais ou menos e foi deste curso que surgiu a série de posts). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para a versão ECMAScript 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

JavaScript – Introdução e conceitos básicos

JavaScript, que não é Java (não tem nada a ver com o Java da SUN) é uma linguagem de scrips que foi idealizada para interagir com páginas web.

JavaScript é uma linguagem leve, segue o padrão ECMA-262, não precisa ser compilada, é somente interpretada e serve para fins como:

  • Colocar texto dinâmico em uma página
  • Reagir a eventos, como carregar uma pagina, …
  • Pode ler e escrever elementos HTML
  • Pode ser usado para validar dados de um formulário
  • Pode detectar o navegador do usuário
  • Pode ser usado para criar cookies

Para exemplificar como funciona segue o código abaixo:

<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>

... blocos de script aqui ...

</body>
</html>

Os separadores e delimitam a área de ação do javascript, colocando a linha abaixo dentro dos separadores, já podemos ver o resultado:

 

document.getElementById("demo").innerHTML=Date();

Assim eu encerro este post de introdução, em breve continuarei a explicar os fundamentos do JavaScript.

Até a próxima!
xD

Fonte: w3schools.com