Introdução ao javascript

JavaScript

Um pouco de historia

    O javascript foi desenvolvido em 1995 pela equipe do Netscape com o objetivo de ser uma linguagem de script do lado cliente o que permite que sejam executados comandos sem que seja necessário passar pelo servidor.

    Originalmente concebido com o nome mocha e posteriormente batizado de livescript a linguagem foi renomeada como javascript alguns meses apenas o seu lançamento para aproveitar a popularidade da linguagem de programação recém lançada java. 

Onde colocar o javascript

    O javascript deve pode ser criado dentro do arquivo html ou pode vir de um arquivo externo de extensão .js, dentro do html ele deve estar entre as tags <script></script> que podem ser colocadas tanto no <head></head> quanto no <body></body>.
    No javascript você pode tanto criar uma linha de código direta que será executada quando o navegador carregar o documento como pode-se criar também funções que são blocos de códigos que serão executados quando chamados por algum evento como por exemplo o click em um botão ou o pressionar de uma tecla em uma área de texto, para isso basta escrever function nomeDaFuncao(){} e colocar o código entre as chaves. Para chamar a função basta adicionar o nome da função(nomeDaFuncao()) como valor de um atributo de evento de um elemento html. Observe o exemplo abaixo.
    

 <html>  
 <head>  
 <script type="text/javascript">  
 function exibirAlerta(){  
 window.alert("essa é uma menssagem");  
 }  
 </script>  
 </head>  
 <body>  
 <input type="button" value="click Aqui" onclick="exibirAlerta()"/>  
 </body>  
 </html>  

    Copie o exemplo, salve e execute o html, você vai ver que ao clicar no botão será exibido uma janela popup de alerta.

trabalhando com elementos html(getElementById())

    O método document.getElementById(id) permite selecionar o elemento que possui a id passada como valor no parâmetro, é possível mudar todos os atributos html ou de estilo do elemento, é possível também fazer marcações html com o atributo innerHTML.

 <html>  
 <head>  
 <script type="text/javascript">  
 function editarTexto(){  
 document.getElementById("texto").innerHTML = "texto editado com javascript";  
 }  
 </script>  
 </head>  
 <body>  
 <input type="button" value="clique Aqui" onclick="editarTexto()"/>  
 <span id="texto"></span>  
 </body>  
 </html>

    Para mudar o estilo de um documento use o atributo style.

 <html>  
 <head>  
 <script type="text/javascript">  
 function editarEstiloTexto(){  
 document.getElementById("texto").style.color = "#99CC33";  
 }  
 </script>  
 </head>  
 <body>  
 <input type="button" value="clique Aqui" onclick="editarEstiloTexto()"/>  
 <span id="texto">esse é um texto que vai mudar de cor</span>  
 </body> 
 </html> 

Conclusão

    Nesse primeiro post sobre javascript foi possível ver um pouco da historia dessa linguagem e também aprender alguns comandos básicos, no próximo post de javascript vamos ver um pouco mais da sintaxe da linguagem, conhecer as variáveis e os operadores.

introdução a css

Introdução ao CSS

O que é css

    O css(cascading style sheet) é uma linguagem de estilo que é utilizada para formatar os documentos html, possibilitando formatar entre outras coisas o tamanho, a fonte, a cor de fundo, as bordas, as margens, a posição e muito mais dos elementos de um documento html.

Como usar o css

    O css pode ser usado de três formas nos documentos html:

• a primeira forma é aplicar diretamente na linha do elemento html através do atributo style, essa forma limita muito o uso do css, mas pode ser útil quando se quer afetar somente um elemento
• a segunda forma é inserir o css no cabeçalho do documento através da tag <style></style> entre as tags head, esta forma de inserir o css é um pouco mais ampla afetando todo o documento html.
• a terceira e melhor forma de aplicar css em um documento é através de um arquivo .css externo, é feito um link no documento html a partir da tag <link /> que vai referir ao arquivo .css pelo atributo href e vai também utilizar o atributo rel que define a relação entre o html e o arquivo do link e deve ter o valor "stylesheet" e o atributo type que define o tipo do arquivo e deve ter o valor "text/css". A grande vantagem de se utilizar um arquivo css externo é a facilidade de manutenção, já que qualquer modificação no arquivo será aplicado a todos os documentos associados poupando tempo, alem da melhor padronização de todos os documentos.

A sintax da linguagem css

Seletores e bloco de declaração

    As regras da linguagem css são baseadas em dois pontos o seletor e um bloco de declaração, onde o seletor é um elemento do documento html e as declarações são atributos e valores desses elementos.

 body  
 {  
   background-color : #CC3333;  
 }  

    No exemplo acima body é o seletor e o background-color : #CC3333 é a declaração que vai mudar a cor de fundo do elemento body para vermelho, as cores em css podem ser definidas com notação hexadecimal usando o padrão RGB(red,green,Blue). 

Pseudo-classes

    Existe também no css as chamadas pseudo-classes que são formas de especificar por exemplo um estado de determinado elemento.

 p:hover  
 {  
   color:black;  
 }  

    O hover é uma pseudo-classe que vai mudar a cor da fonte do elemento paragrafo quando o mouse estiver sobre o mesmo.

ids e classes

    O css permite ainda que você crie seus próprios seletores utilizando os atributos html class e id, após definir esses atributos no documento html você pode usar #id ou .class no css para modificar o estilo dos elementos que estiverem usando o id ou a classe

 <body>  
 <div id="divId" ></div>  
 <div class="divClasse"></div>  
 </body>  

 #divId  
 {  
  background-color : yellow;  
 }  
 .divClasse  
 {  
  background-color : blue;  
 }  

    O seletor #divId vai definir a cor de fundo da primeira div como sendo amarelo e o seletor .divClasse define a cor de fundo do segundo div como azul.
    Essas são as principais regras da linguagem css, no próximo post vamos falar das principais propriedades do css. Ate a próxima.