Curso HTML e Javascript: 2011

quinta-feira, 1 de dezembro de 2011

Como surgiu Javascript

Como surgiu o JavaScript?
       - JavaScript é uma linguagem que foi primeiramente desenvolvida pela Netscape e que, inicialmente se chamava LiveScript. Antes do lançamento da 1ª versão do LiveScript, no final de 1995, a Netscape fechou uma aliança com a Sun Microsystems (Criadora da linguagem JAVA) , para desenvolverem em conjunto esta nova linguagem, que passou a se chamar JavaScript, também conhecida como JScript.

Onde é utilizada?
       - É muito utilizada como auxílio de criação para páginas web, a maioria das linguagens para Web tem suporte a JavaScript, sendo assim podemos inserir o código, tanto em HTML, ASP, etc...

Que linguagens preciso saber para começar com o JavaScript?
       - Na verdade, não precisa de nenhuma, mas eu recomendo, pelo menos o HTML, para que você possa entender algumas formatações do código.

o que é html

HTML é uma linguagem com a qual se definem as páginas web. Basicamente trata-se de um conjunto de etiquetas (tags) que servem para definir a forma na qual se apresentará o texto e outros elementos da página.

O HTML se criou a princípio com objetivos de divulgação. Porém, não se pensou que a web chegaria a ser uma área de ócio com caráter multimídia, de modo que, o HTML se criou sem dar respostas a todos os possíveis usos que lhe dariam posteriormente e a todo coletivo de gente que o utilizariam no futuro. Entretanto, frente a este deficiente planejamento, com o tempo, foram se incorporando modificações as quais são os padrões (standards) do HTML. Numerosos padrões já se apresentaram. O HTML 4.01 foi o último padrão feito até o mês de abril de 2004.

O HTML é uma linguagem de programação muito fácil de aprender, o que permite que qualquer pessoa, mesmo que nunca tenha programado possa enfrentar a tarefa de criar um website. O HTML é fácil e em pouco tempo poderemos dominar sua linguagem. Mais adiante, conseguiremos os resultados profissionais graças as nossas capacidades para o desenho e a nossa veia artística.

Uma vez conhecendo o conceito do HTML, vamos adiantar mais algumas coisas. Esta linguagem se escreve em um documento de texto, por isso necessitamos de um editor de textos para escrever uma página web. Sendo assim, o arquivo onde está contido o código HTML é um arquivo de texto com uma peculiaridade, que tem uma extensão .html ou .htm (é indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos com um editor de texto, o mais simples possível e salvaremos nossos trabalhos com extensão .html, por exemplo: minhapagina.html.

Para adiantar um pouco mais como se utiliza o HTML, diremos que a linguagem consta de tags que são etiquetas que tem esta forma<B> ou<P>. Cada etiqueta significa uma coisa , por exemplo:<B> significa que se escreve em negrito (bold) ou<P> significa um parágrafo,<A> é um link, etc. Quase todas as etiquetas têm sua correspondente etiqueta de fechamento, que indica que a partir desse ponto a etiqueta não vai se alterar. Por exemplo,</B> se utiliza para indicar que se deixe de escrever em negrito. Portanto, o HTML não é mais do que uma série de tags que se utilizam para definir a forma ou o estilo que queremos aplicar em nosso documento. Ou seja,<B> isto está em negrito</B>.

Aumentar imagem ao passar o mouse

<html>
<head>
<script language="javascript">

</script>

<title>Aumentar o tamanho de uma imagem ao passar o mouse</title>
</head>

<body>
<center>
<p><img src="http://www.codigofonte.com.br/img/logo.gif" width='258' height='45' alt="CodigoFonte.com.br" onMouseOver="aumenta(this)" onMouseOut="diminui(this)">
</center>
</body>
</html>

O que é Javascript

Javascript é uma linguagem de programação utilizada para criar pequenos programinhas encarregados de realizar ações dentro do âmbito de uma página web.
Trata-se de uma linguagem de programação do lado do cliente, porque é o navegador que suporta a carga de processamento. Graças a sua compatibilidade com a maioria dos navegadores modernos, é a linguagem de programação do lado do cliente mais utilizada.
Com Javascript podemos criar efeitos especiais nas páginas e definir interatividades com o usuário. O navegador do cliente é o encarregado de interpretar as instruções Javascript e executá-las para realizar estes efeitos e interatividades, de modo que o maior recurso, e talvez o único, com que conta esta linguagem é o próprio navegador.

Javascript é o seguinte passo, depois do HTML, que pode dar um programador da web que decida melhorar suas páginas e a potência de seus projetos. É uma linguagem de programação bastante simples e pensada para fazer as coisas com rapidez, às vezes com leveza. Inclusive as pessoas que não tenham uma experiência prévia na programação poderão aprender esta linguagem com facilidade e utilizá-la em toda sua potência com somente um pouco de prática.

Entre as ações típicas que se podem realizar em Javascript temos duas vertentes. Por um lado os efeitos especiais sobre páginas web, para criar conteúdos dinâmicos e elementos da página que tenham movimento, mudem de cor ou qualquer outro dinamismo. Por outro lado, Javascript nos permite executar instruções como resposta às ações do usuário, com o qual podemos criar páginas interativas com programas como calculadoras, agendas, ou tabelas de cálculo.

Javascript é uma linguagem com muitas possibilidades, permite a programação de pequenos scripts, mas também de programas maiores, orientados a objetos, com funções, estruturas de dados complexas, etc. Ademais, Javascript coloca à disposição do programador todos os elementos que formam a página web, para que este possa acessar a eles e modificá-los dinamicamente.
Com Javascript o programador, é quem se converte no verdadeiro dono e controlador de cada coisa que ocorre na página quando está sendo visualizada pelo cliente.

http://www.youtube.com/watch?v=YCjiN5Stx9k

segunda-feira, 28 de novembro de 2011

Calcular Comissão ultilizando Javascript

<html>
<head>
<title>Exemplo Javascript</title>
<script language="javascript">
function calcular()

{

var totalvendas,salario, comissao, receber ;
totalvendas = frmComissão.txttotalvendas.value;
salario = frmComissão.txtsalario.value;
totalvendas = parseFloat(totalvendas);
salario = parseFloat(salario);
if(totalvendas < 1000)

{

comissao = (totalvendas * 5)/ 100;

}

else

{

comissao = (totalvendas * 20)/ 100;

}

receber = salario + comissao;
frmComissão.txtreceber.value = receber;
frmComissão.txtcomissao.value = comissao;
}
</script>
</head>
<body>
<p>Utilizando Javascript<p>
<p>Claculo de Comissão<p>
<form name ="frmComissão">
Total Vendas <input type ="text" name="txttotalvendas"/><br>
Salário <input type ="text" name="txtsalario"/><br>
Comissão <input type ="text" name="txtcomissao"/><br>
Receber <input type ="text" name="txtreceber"/><br>
<br><input type="button" value="Calcular" onclick="javascript:calcular();"/><br>
</form>
</body>
</html>

Fonte de Estilos

<html>
<head>
<title>Fontes e Estilos</title>
</head>
<body>
<p>Exemplo de Fontes e Estilos</p>
<p>Niveis de Título</p>
<h1>Titulo de Nivel 1</h1>
<h2>Titulo de Nivel 2</h2>
<h3>Titulo de Nivel 3</h3>
<h4>Titulo de Nivel 4</h4>
<h5>Titulo de Nivel 5</h5>
<h6>Titulo de Nivel 6</h6>
<p>Estilos de Fontes</p>
<p>Fonte em <b>negrito</b></p>
<p>Fonte em <i>itálico</i></p>
<p>Fonte em <u>sublinhado</u></p>
<p>Fonte em <sup>sobrescrito</sup></p>
<p>Fonte em <sub>subscrito</sub></p>
<p> Misturas </p>
<p> <font color ="#ooooFFF">Fonte Azul</font></p>
<p> <font face ="Comic Sans MS">Fonte Comic Sans MS</font></p>
<p> <font size ="6">Fonte Tamanho</font></p>
<p> <font face ="Comic Sans MS" color = "#FF0000">Fonte Comic Vermelho</font></p>
<p>Linhas Horizontais</p>
<hr/>
</body>
</html>

Como deixar uma janela animada ao abrir no Javascript

<html>
<SCRIPT LANGUAGE=”JavaScript”>
    function janelanimada(endereco)
{
       var velocidadev = 5;
       var topo = 0;
       var esquerda = 0;
   var velocidadeh = 8;
if (document.all)
    {
   var tamlar = window.screen.availHeight;
   var tamjan = window.screen.availWidth;
   var tamanho = window.open(“”,””,”left=” + esquerda + “,top=” + topo + “,width=1,height=1,scrollbars=yes”);
       for (sizeheight = 1; sizeheight < tamlar; sizeheight += velocidadev)
       {
tamanho.resizeTo(“1”,sizeheight );
      }
      for (sizewidth = 1; sizewidth < tamjan; sizewidth += velocidadeh)
     {
      tamanho.resizeTo(sizewidth+6,sizeheight );
       }
     tamanho.location = endereco;
}
   else
   window.location = endereco;
}
</script>
<p align=center class=bodyfonts><a href=”http:// www. digerati.com.br” onClick=”janelanimada(‘http:// www.digerati.com.br’);return false;”>Clique aqui para ver a janela animada</a>
</html>

Como Inserir Imagens e cor de fundo no HTML

<html>
<head>
<title>Imagens</title>
</head>
<body bgcolor= #800FFF" text="#8000FF">
<p>Inserindo Imagens</p>
<p>Texto Padrão da pagina</p>
<p>Texto Padrão da pagina</p>
<p>Texto Padrão da pagina</p>
<img src="rosa azul.jpg" width="800" height= "800" alt = "rosa azuis do amor"/>
</body>
</html>

Como fazer formulários no HTML

<html>
<head>
<title>Formulários</title>
</head>
<body>
<h3>Formulário</h3>
<form name= "frmCadastro" method = "get" action = "sucesso.html">
<p>Nome:<input type = "text" name = "txtnome" size = "80" maxlenth = "10"/> </p>
<p>Senha:<input type = "password" name = "txtSenha" size = "20"/></p>
<p>Sexo:<input type = "radio" name = "sexo"/>Masculino
<input type = "radio" name = "sexo" checked/>Feminino</p>
<p>Preferencia:
<input type = "checkbox" name = "chkMusica"/>Música
<input type = "checkbox" name = "chkCinema"/>Cinema
<input type = "checkbox" name = "chkLeitura" checked/>Leitura</p>
<p>Estado:
<select name = "cmbEstado">
<option value = "1">São Paulo</option>
<option value = "2">Minas Gerais</option>
<option value = "3">Rio de Janeiro</option>
<option value = "4">Amazonas</option>
</select>
<p>Observação:<br>
<textarea name = "txtObs" rows = "10" cols= "50"></textarea></p>
<p><input type = "button" name = "btnBotão" value = "clique aqui"/></p>
<p><input type = "reset" name = "btnLimpar" value = "Limpar"/></p>
<p><input type = "submit" name = "btnEnviar" value = "Enviar"/></p>
</form>
</body>
</html>

Como calcular notas com Javascript

<html>
<head>
<title>Exemplo Javascript</title>
<script language="javascript">
function calcular()
{
var nota1, nota2, nota3, nota4, media;
nota1 = frmMedia.txtNota1.value;
nota2 = frmMedia.txtNota2.value;
nota3 = frmMedia.txtNota3.value;
nota4 = frmMedia.txtNota4.value;
nota1 = parseFloat(nota1);
nota2 = parseFloat(nota2);
nota3 = parseFloat(nota3);
nota4 = parseFloat(nota4);
media = (nota1 + nota2 + nota3 + nota4)/4;
frmMedia.txtMedia.value = media;
}
</script>
</head>
<body>
<p>Utilizando Javascript<p>
<p>Formularios e Eventos<p>
<form name ="frmMedia">
Nota1 <input type ="text" name="txtNota1"/><br>
Nota2 <input type ="text" name="txtNota2"/><br>
Nota3 <input type ="text" name="txtNota3"/><br>
Nota4 <input type ="text" name="txtNota4"/><br>
<br><input type="button" value="Calcular" onclick="javascript:calcular();"/><br>
<br>Media <input type ="text" name="txtMedia"/><br>
</form>
</body>
</html>

sexta-feira, 25 de novembro de 2011

Dica: utilizando Comandos de formatação Física

<HTML>
<HEAD>
<TITLE>FORMATAÇÃO FÍSICA</TITLE>
</HEAD>
<BODY>
<B> TEXTO EM NEGRITO </B><BR>
<BIG> TEXTO EM FONTE MAIOR </BIG><BR>
<BLINK> EXIBE TEXTO PISCANDO </BLINK> <BR>
<I>TEXTO EM ÍTALICO </I><BR>
<U>EXIBE O TEXTO SUBLINHADO </U><BR>
<SMALL>TEXTO EM FONTE MENOR </SMALL><BR>
<STRIKE>TEXTO RISCADO </STRIKE><BR>
<SUB>TEXTO EM SUBSCRITO </SUB><BR>
<SUP>TEXTO SOBRESCRITO </SUP><BR>
<TT>EXIBE O TEXTO USANDO FONTE EM TAMANHO FIXO</TT>
</BODY>
</HTML>
Essa formatação pode ser usada para que um texto apareça em negrito ou itálico, por
exemplo. E por ser formatação física permite que em um mesmo trecho de texto possa
ser aplicado em mais de um formato ao mesmo tempo. Os comandos de formatação
lógica apenas sugerem algum tipo de ênfase a ser dada no texto.
Veja a aparência de cada formatação:

O que é HTML?

     HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) é a uma
linguagem considerada a base de todas as outras linguagens de desenvolvimento de
projetos para WEB.
    Com ela você pode compartilhar fotos, vídeos, músicas, textos e fazer muitas coisas.
    A linguagem HTML foi criada com a visão de que todos os dispositivos deveriam ser
capazes de usar informações da Web: PCs com placas de vídeos e monitores de
diferentes resoluções e profundidades de cores; telefones celulares; dispositivos para
processar entrada e saída de voz; computadores com taxa de transferência alta ou
baixa e assim por diante.

Segue abaixo um link para auxiliar na criação de sua primeira pagina em HTML.
http://www.youtube.com/watch?v=qfay3ZHyUmU&feature=related

Os primeiros passos para fazer uma página de HTML simples

<html>
<head>
<title>Título</title>
</head>
<body>
Assunto
</body>
</html>