Arquivo da categoria ‘JavaScript’

Websites – Switch – JavaScript – Linux

Publicado: 31 de março de 2014 em JavaScript
0

A instrução Switch avalia uma expressão, combinando com o valor da expressão a uma cláusula de caso, e executa instruções associadas a esse caso. Em algumas outras linguagens de script este comando é conhecido como Case.

switch

Switch

 

Exemplo:

Neste exemplo à partir de um valor de uma variável (ou expressão) o comando switch pode ser usado para efetuar ações.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Switch </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var escolha = 100;

document.writeln("Avalia uma expressao, combinando com o valor da expressao a \n" +
                 "uma clausula de caso, e executa instrucoes associadas a esse caso.");
document.writeln();

document.writeln("Valor escolhido:");

switch(escolha) {

   case 50 :
   document.writeln("valor de escolha: 50");
   break;
   
   case 100 :
   document.writeln("valor de escolha: 100");
   break;
   
   case 150:
   document.writeln("valor de escolha: 150");
	break;
}

</script>
</pre>

</body>

</html>

Websites – If – Else – Else if – Tomada de Decisões – JavaScript – Linux

Publicado: 30 de março de 2014 em JavaScript
0

IF é um dos comandos mais comuns e um dos mais importantes na programação, este comando é responsável pelas tomadas de decisões, existe praticamente em todas as linguagens de programação, antigamente este comando era conhecido como “se-então-senão” ou “if-then-else” mas as linguagens mais modernas substituirão o “então” pelo símbolo “{}” (colchetes), se a condição puder ser executada por apenas uma linha de comando então não é necessário usar o colchete.

ifelse

If – Else – Else If

 

Exemplo:

Neste exemplo usamos instruções de decisão para comparar valores e imprimir resultados na tela.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - If - Else - Else If </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>
var numero = 2;

document.writeln("Verifica o valor da variavel numero:")

  if (numero == 1) 
  {
  
    document.writeln("Numero = 1");
  }
  else
  {
  
	 document.writeln("Numero diferente de 1");
  }
  
document.writeln();
document.writeln("Define o valor de x:");
  
var x = 4;
  
  if (x == 1)
  {
      document.writeln("x = 1");
  }
  else if (x == 2)
  {
      document.writeln("x = 2");
  }
  else if (x == 3)
  {
      document.writeln("x = 3");
  }
  else
   {
	   document.writeln("x diferente de 1,2 ou 3");
   }   

</script>
</pre>

</body>

</html>

Websites – Function – Função Pura, Procedimento e Expressão – JavaScript – Linux

Publicado: 29 de março de 2014 em JavaScript
0

Em programação de computadores, uma sub-rotina é uma sequência de instruções de programas que executam uma tarefa específica, embalados como uma unidade. Esta unidade pode então ser utilizada em programas de onde essa tarefa particular, deve ser executada. Subprogramas podem ser definidos dentro de programas, ou separadamente em bibliotecas que podem ser usados ​​por vários programas.

Em diferentes linguagens de programação uma sub-rotina pode ser chamada de um procedimento, uma função, uma rotina, um método ou um subprograma.

Um “subprograma” pode ser chamado de função. Como o programa em si, uma função é composta por uma sequência de instruções chamadas o corpo da função. Os valores podem ser passados ​​para uma função, e a função pode retornar um valor.

function

Função

Exemplo:

Neste exemplo criamos três tipos de funções,  a primeira é uma função na qual é conhecida como um procedimento, pois executa instruções no corpo da função e não retorna nenhum valor. A segunda é uma função chamada de pure function ou função pura, é o método clássico de uma função e executa o bloco dentro de seu corpo e retorna um valor. A terceira é uma função conhecida com função de expressão pois é embutida dentro de uma variável.

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Functions </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var bandas =  { tocar: "Horario vago" }

function festival(apresentacao) {

apresentacao.tocar = "Red Hot Chilli Peppers";

}

festival(bandas);

document.writeln("Uso da function como um procedimento:");
document.writeln("Show da banda: " + bandas.tocar);
document.writeln();

function duplica(texto) {

   var txt = texto + " " + texto;
	return txt;
}

document.writeln("Uso da function como uma funcao:");
document.writeln("Duplica um texto: " + duplica("meu texto"));
document.writeln();

var quadrado = function(q) { return q*q};

document.writeln("Uso da function como uma expressao:");
document.writeln("O quadrado de 2: " + quadrado(2));

</script>
</pre>

</body>

</html>

Websites – Objects Initializers e Arrays Initializers – Javascript – Linux

Publicado: 28 de março de 2014 em JavaScript
0

Em programação de computadores, um array é uma variável indexada ou arranjo, também conhecida como vetor (para arrays uni-dimensionais) ou matriz (para arrays bi-dimensionais), é uma das mais simples estruturas de dados. Os arrays mantêm uma série de elementos de dados, geralmente do mesmo tamanho e tipo de dados. Elementos individuais são acessados por sua posição no array. A posição é dada por um índice, também chamado de subscrição. Alguns arrays são multi-dimensionais, significando que eles são indexados por um número fixo de números inteiros, por exemplo, por um sequência (ou sucessão) finita de quatro números inteiros. Geralmente, arrays uni e bi-dimensionais são os mais comuns.

Objeto Initializers e Arrays Initializers são expressões cujo valor é um objeto recém-criado em uma ordem definida. A diferença entre Arrays e objetos Initializers são o modo como são escritos, os objetos possuem chaves ao invés de colchetes e também possuem propriedades ao invés de índices e podem ser aninhados.

array

Arrays e Objetos – Initializers

 

Exemplo:

Neste exemplo criamos arrays e objetos initializers e os imprimimos em pagina html.

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Objects - Arrays Initializers </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

// Declara Arrays Initializers e Objetcts Initializers

var array = ["A", "B", "C"]

var matriz = { x:"Valor 1 = X", y:"Valor 2 = Y", z:"Valor 3 = Z" };

var objeto = { propriedade1: { vl_a:"Valor de A", vl_b:"Valor de B"},
               propriedade2: { vl_c:"Valor de C", vl_d:"Valor de D"} }

// Acessando Arrays

var campo1 = array[0];
var campo2 = array[1];
var campo3 = array[2];

// Imprimindo Arrays e Objetos

document.writeln("Array Initializer - usam  colchetes: Indices 0,1,2");
document.writeln(campo1 + " " + campo2 + " " + campo3);
document.writeln();

document.writeln("Objetos Initializers - usam chaves: Valores da matriz x, y e z");
document.writeln(matriz.x);
document.writeln(matriz.y);
document.writeln(matriz.z);
document.writeln();

document.writeln("Propriedades de Objetos de Arrays");
document.writeln("A= " + objeto.propriedade1.vl_a);
document.writeln("B= " + objeto.propriedade1.vl_b);
document.writeln("C= " + objeto.propriedade2.vl_c);
document.writeln("D= " + objeto.propriedade2.vl_d);

</script>
</pre>

</body>

</html>

Websites – Wrapper Objects – String – JavaScript – Linux

Publicado: 27 de março de 2014 em JavaScript
0

Objetos JavaScript são valores compostos: são uma coleção de propriedades ou valores nomeados. Referimo-nos ao valor de uma propriedade usando notação. Quando o valor de um propriedade é uma função, podemos chamá-la de método. Para chamar o método  de um objeto, usa-se o construtor, exemplo: método().

String

Em programação e em linguagens formais, String é uma cadeia de caracteres ou seja, é uma sequência ordenada de caracteres (símbolos) escolhidos a partir de um conjunto pré-determinado. Em programação, cada símbolo armazenado na memória é representado por um valor numérico. Uma variável declarada com tipo de dado cadeia geralmente armazena um número pré-determinado de caracteres.

String é um Objeto ?

Em algumas linguagens de programação uma String é um objeto como em Java ou C++, em JavaScript uma String não é um objeto.

Strings não são objetos então por que elas têm propriedades?

Sempre que você tenta referir uma propriedade de uma String, o JavaScript converte o valor da String para um objeto, chamando automaticamente new String (s). Este objeto herda os métodos de uma String e é usado para  resolver a referência de propriedade. Uma vez que a propriedade tenha sido resolvida, o objeto recém-criado é descartado.

 

wrapper

Wrapper Objects

 

Exemplo:

Neste exemplo criamos uma variável String  e usamos suas propriedades, quando efetuamos este procedimento o core do javascript encapa a variável a transformando em um objeto temporário que depois será descartado automaticamente. Você só precisa saber que Strings, números e valores booleanos diferem de objetos e que suas propriedades são somente para leitura e que você não pode definir novos valores de propriedades sobre eles.

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Wrapper - Encapando Objetos </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var objeto = "Em javascript string nao e um objeto";

tamanho = objeto.length;
recorta = objeto.substr(30,6)

document.writeln(objeto);
document.writeln("A string possui o tamanho de :"  + tamanho);
document.writeln("Recortando um pedaco da string: " + recorta);

</script>
</pre>

</body>

</html>

Websites – Escopo de Variáveis – Global e Local – JavaScript – Linux

Publicado: 27 de março de 2014 em JavaScript
0

Escopo

O escopo de uma variável é a região do seu código-fonte no qual a variável está definida. Uma variável global tem um escopo global, é vista em todos os lugares em seu código JavaScript. Por outro lado, as variáveis ​​declaradas dentro de uma função são definidas somente dentro do corpo da função. Elas são variáveis ​​locais e têm um escopo local. Os parâmetros da função também contam como variáveis ​​locais e são definidas somente dentro do corpo da função.

Função

Em ciência da computação, no contexto da programação, uma função ou sub-rotina consiste em uma porção de código que resolve um problema muito específico e pode ser reutilizada quando necessário. O conceito de função difere da noção de procedimento, já que devolve um valor.

escopo

Escopo JavaScript

 

Exemplo:

Neste exemplo declaramos uma variável no espaço global do script e dentro de uma função a redeclaramos onde o espaço se torna local, deste modo podemos ver claramente como funciona o alcance de uma variável em um código JavaScript.

Html /JavaScript

<pre><!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Escopo</h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var var_escopo = "variavel global";

function variavel_local() {

var var_escopo = "variavel local";

return var_escopo

}
document.writeln("A variavel var_escopo esta declarada como:\n");
document.writeln("Escopo do script: " + var_escopo);
document.writeln("Escopo da function: " + variavel_local());

</script>
</pre>

</body>

</html>

Websites – Date() – Data e Hora – JavaScript – Linux

Publicado: 27 de março de 2014 em JavaScript
0

Date()

Cria uma instância de data JavaScript que representa um único momento no tempo. Objetos de data são baseados em um valor de tempo que é o número de milissegundos desde 1 º de janeiro de 1970 UTC.

Objetos de data só podem ser instanciados, chamando  o JavaScript Date como um construtor: chamando-o como uma função regular ou seja, sem o operador new irá retornar uma string ao invés de um objeto de data, ao contrário de outros tipos de objeto de JavaScript, objetos JavaScript Date não têm sintaxe literal .

datahora

Website – Data e Hora

 

Day

Representa o dia do mês de um objeto de datas.

Month.

Representa o numero do mês, corresponde a um índice iniciando no numero 0 com termino no numero 11, sendo que o mês de janeiro é representado pelo menor índice ou seja o numero zero e não mês 1.

Year

Representa o exercício de um calendário do objeto de datas.

Hours

Representa o numero de horas de um objeto de datas.

Minutes

Representa o numero de minutos de um objeto de datas.

Seconds

Representa o numero de segundos de um objeto de datas.

Exemplo:

Neste exemplo mostramos em uma pagina html vários tipos de formatos que se pode extrair de um objeto de datas.

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto - Data e Hora</h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var datahora = new Date();

document.writeln("Dia: " + datahora.getDay());
document.writeln("Mes: " + datahora.getMonth());
document.writeln("Ano: " + datahora.getFullYear());
document.writeln();
document.writeln("Hora: " + datahora.getHours());
document.writeln("Minutos: " + datahora.getMinutes());
document.writeln("Segundos: " + datahora.getSeconds());
document.writeln();
document.writeln("Data: " + datahora.toString());
document.writeln();
document.writeln("Data local:" + datahora.toLocaleDateString());
document.writeln("Hora local:" + datahora.toLocaleTimeString());

</script>
</pre>

</body>

</html>

Websites – Html Básico – Document, Var, Write e Writeln – Javascript – Linux

Publicado: 24 de março de 2014 em JavaScript
0

As instruções abaixo iniciam você ao mundo da programação web, mostrando como é estruturado um documento Html e como funciona a utilização de Javascript para manipular o documento dinamicamente. Esta categoria do site é multiplataforma apesar de nossa apresentação ser para Linux.

Html Básico

A declaração <DOCTYPE> deve ser a primeira coisa em seu documento HTML, antes da tag <html>. O <! DOCTYPE> não é uma tag HTML, é uma instrução para o navegador da web sobre qual é a versão do HTML da página.

A tag <h1> à <h6> significa header ou titulo, é usada para destacar um titulo em uma pagina HTML.

A tag <p> cria um paragrafo, tornando possível nomear o paragrafo e designar suas propriedades.

A tag <br> insere uma linha em branco, em HTML a tag <br> não precisa ser encerrada com  a </br>, porem em XHTML o fechamento é necessário.

A tag <pre> define um texto pré-formatado. O texto em um elemento <pre> é exibido em uma fonte de largura fixa, e preserva os espaços e quebras de linha.

A tag <script> é usada para definir um script do lado do cliente, como um JavaScript. O elemento <script> ou contém declarações de script, ou ele aponta para um arquivo de script externo através do atributo src. Os usos comuns para JavaScript são de manipulação de imagem, validação de formulário, e as mudanças dinâmicas do conteúdo.

JavaScript

Ponto e vírgula separa instruções JavaScript. Normalmente você adicionar um ponto e vírgula no final de cada instrução executável. Usando ponto e vírgula também torna possível escrever muitas declarações em única uma linha.

Document

O objeto document nos dá acesso a muitos elementos encontrados na página HTML, inclusive à própria página.

Var

O comando var declara uma variável em javascript.

Write e Writeln

Write é uma instrução básica do javascript para imprimir um texto no documento e Writeln imprime o texto e efetua uma quebra de linha.

Exemplo:

Neste exemplo criamos uma pagina básica usando html  e javascript. para escrever textos armazenados dentro de variáveis javascript. A figura abaixo ilustra o resultado do script deste exemplo:

javascript001

Website básico

Html / JavaScript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h1> h1 - Desenvolvimento Aberto</h1>
<h2> h2 - Desenvolvimento Aberto</h2>
<h3> h3 - Desenvolvimento Aberto</h3>
<h4> h4 - Desenvolvimento Aberto</h4>
<h5> h5 - Desenvolvimento Aberto</h5>
<h6> h6 - Desenvolvimento Aberto</h6>

<br>
<p>Este texto foi escrito em um paragrado HTML</p>
<br>

<pre>
<script>
var texto = "Este texto foi escrito em JavaScript\n";
var numero = 10;
var decimal = 25.5;
var linha = "\n";

document.write(texto + linha);
document.write("numero: " + numero.toString() + linha);
document.write("decimal: " + decimal.toString() + linha);
</script>
</pre>

</body>

</html>

Introdução a Websites – Apache – BlueFish e Firefox – Triologias de Programação Web – Linux – JavaScript

Publicado: 23 de março de 2014 em JavaScript, Linux
0

Programar para Web consiste basicamente em duas triologias distintas, a primeira de ferramentas necessárias para criar e rodar um website, um Servidor Web, uma IDE de desenvolvimento de scripts e um Navegador para interpretar os scripts. A segunda triologia consiste nas técnicas básicas de desenvolvimento na qual o desenvolvedor deve conhecer os scripts: Html, Css e Javascript. Nosso objetivo aqui é programar websites direcionados para o sistema operacional Linux, mas o conteúdo deste Walktrhought é multiplataforma.

HTML

Abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto, é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML.

Todo documento HTML possui etiquetas (do inglês: tags), palavras entre parênteses angulares (< e >) ou sinal de menor e maior; essas etiquetas são os comandos de formatação da linguagem. Um elemento é formado por um nome de etiqueta (tag), atributos, valores e filhos (que podem ser outros elementos ou texto). Os atributos modificam os resultados padrões dos elementos e os valores caracterizam essa mudança.

CSS

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

JavaScript

É a linguagem de programação da Web. A esmagadora maioria dos sites modernos usam JavaScript, e todos os modernos navegadores web, desktops, jogos consoles, tablets e smartphones também usam JavaScript.

JavaScript foi criado pela Netscape nos primórdios da Web, e tecnicamente, o JavaScript é uma marca licenciada da Sun Microsystems comprada pela Oracle utilizado para desenvolver o Netscape agora Mozilla. A linguagem foi padronizada pelo selo europeu EMCA.

Firefox

Mozilla Firefox é um navegador livre e multiplataforma desenvolvido pela Mozilla Foundation com ajuda de centenas de colaboradores. A intenção da fundação é desenvolver um navegador leve, seguro, intuitivo e altamente extensível. Baseado no componente de navegação da Mozilla Suite (continuada pela comunidade como Seamonkey), o Firefox tornou-se o objetivo principal da Mozilla Foundation. Anteriormente o navegador juntamente com o Mozilla Thunderbird, outro produto da Mozilla Foundation eram os destaques da mesma. Cerca de 40% do código do programa foi totalmente escrito por voluntários.

O Firefox já vem instalado no Ubuntu, caso esteja usando outro sistema operacional visite:

http://www.mozilla.org/pt-BR/firefox/new/

HTTPD – Apache2 Web Server

O servidor Apache é o mais bem sucedido servidor web livre. Foi criado em 1995 por Rob McCool, então funcionário do NCSA (National Center for Supercomputing Applications). Numa pesquisa realizada em dezembro de 2007 , foi constatado que a utilização do Apache representa cerca de 47.20% dos servidores ativos no mundo. Em maio de 2010, o Apache serviu aproximadamente 54,68% de todos os sites e mais de 66% dos milhões de sites mais movimentados. É a principal tecnologia da Apache Software Foundation, responsável por mais de uma dezena de projetos envolvendo tecnologias de transmissão via web, processamento de dados e execução de aplicativos distribuídos.

http://httpd.apache.org/

Como Instalar o Apache

Para instalar o Apache2 digite no terminal:


sudo apt-get install apache2

Para testar o apache entre no browser e digite o endereço: localhost

apache

BlueFish

Bluefish é um poderoso editor voltado para programadores e webdevelopers, com muitas opções para escrever websites, scripts e códigos de programação. Bluefish suporta muitas linguagens de programação e de marcação. Bluefish é um projeto de desenvolvimento de código aberto, lançado sob a licença GNU GPL.

Bluefish é uma aplicação multi-plataforma que roda na maioria dos sistemas operacionais de desktop, incluindo Linux, FreeBSD, Mac OS-X, Windows, OpenBSD e Solaris.

http://bluefish.openoffice.nl/

Como Instalar o Bluefish


sudo apt-get install bluefish

Depois de instalado o BlueFish deve parecer como a imagem abaixo:

bluefish

Estrutura HTML

  • <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
  • <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
  • <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.

Como Criar Um Website Em Um WebServer Apache Linux

  1.  Crie o diretorio: /home/user1/DesenvolvimentoAberto/Sites/devaberto, onde /home/user1 é o seu diretório do Linux.
  2. Abra o Blufish e selecione o diretorio devaberto.
  3. Crie um novo projeto chamado DesenvolvimentoAberto
  4. Escreva o código html abaixo e salve com o nome de index.html
  5. Clique no icone da barra de ferramentas chamado Antever no navegador, você deve obter um site como na imagem abaixo.hello
  6. Preste atenção no endereço da Url da imagem acima, você esta testando localmente no diretório definido por nós, agora precisamos efetuar um Upload do site para o servidor web Apache.
  7. Abra uma janela do terminal e digite a linha de comando: “sudo chown user1.users /var/www“, onde user1 é o seu usuário do Linux.
  8. Depois digite a segunda linha de comando: “sudo chown user1.users /var/www/index.html“.
  9. Dependendo da versão do Apache o arquivo index.html pode estar dentro da pasta html, adicione a pasta no caminho mostrado acima conforme sua versão do Apache.
  10. No menu Arquivo, clique em Upload/Download, coloque o diretório do site local no qual criamos na opção diretório local e o diretório remoto na opção seguinte.
  11. O diretório remoto em nosso caso é nosso servidor web, que por default esta localizado no sistema de arquivos Linux em: “/var/www“.
  12. Clique no botão Upload, use a imagem abaixo para referencia.upload
  13. Abra o Firefox e digite: localhost, você deve obter o site rodando no seu servidor web como na figura abaixo website

HTML

<html>
   <head>
      <title>Desenvolvimento Aberto</title>
   </head>
<body>
          Desenvolvimento Aberto

<br></br>

<h1>Hello World Wide Web!!!</h1>

</body>
</html>

Como aprender Html / Javascript neste site?

Após instalar o Apache e o BlueFish, no menu categorias clique em JavaScript e vá para o primeiro post, cada post contem uma teoria e um código fonte, siga os em ordem decrescente ou seja do ultimo para o mais recente, o post mais antigo contem as primeiras lições e como usar a IDE BlueFish, continue acompanhando o site para se atualizar e aprender mais sobre JavaScript.

Entradas mais Recentes