JavaScript é uma linguagem de programação para páginas HTML com o intuito de tornar suas páginas realmente interativas. JavaScript é um linguagem de programação interpretada, não havendo necessidade de compilação, quem interpreta é o próprio navegador (browser) que tem um intepretador JavaScript dentro dele. O JavaScript permite manipular e detectar qualquer ação/coisa que acontece em uma página HTML, trazendo também o que tem de melhor em programação, como sintaxe para "codições", "loops", "funções", "variáveis", "passagem de parâmentros", "cálculos", "validações", "troca de elementos", "tratamento de erros" etc. Uma informação importante é que o JavaScript é case-sensitive.
Uma página HTML básica deve ter pelo menos as seguintes "tags": html, head e body, conforme figura a seguir:
Já uma página HTML básica com JavaScript, além dos elementos acima (html, head e body), precisa de uma "tag" especial que é a "script", conforme figura a seguir:
Ao colocar a tag "script" deve-se especificar que se trata de JavaScript com o "type=text/javascript" ou "type=application/javascript". Existem vários tipos de linguagem de "script" para páginas HTML como Visual Basic, Ajax, ASP etc, mas é a opção "type" que especifica o tipo que no nosso caso é JavaScript. A tag "script" pode estar em qualquer lugar em sua página HTML, mas é uma boa prática colocá-la dentro da tag "head", da mesma forma como é um boa prática colocar as tags "style", "meta", "css" etc dentro de "head".
Primeiro JavaScript
O javascript a seguir mostra na tela do browser um popup (janela) com o conteúdo do "window alert".
Segundo JavaScript
O javascript a seguir mostra na tela do browser um popup (janela) com o conteúdo do "window alert" ao aperta o botão "Clicar Aqui".
Passagem de Parâmetro
Ao clicar no botão "Clique Aqui" a mensagem "Bem Vindo ao..." será passada por parâmentro pela função "clicar" para a variável "mensagem". Depois essa mesma mensagem será exibida na tela.
Document.Write
O javascript a seguir mostra na tela do browser um texto "Texto Qualquer".
Document.Write 2
O javascript a seguir mostra na tela do browser um texto "Texto Qualquer" ao abertar o botão "Clicar Aqui".
TROCANDO ELEMENTOS
O javascript a seguir mostra como trocar elemente dentro de uma página HTML usado um identificador que nesse caso é o "ID".
TROCANDO ELEMENTOS COM UM ARQUIVO JAVASCRIPT EXTERNO
O javascript a seguir mostra como trocar elemente dentro de uma página HTML usado um identificador que nesse caso é o "ID".
Arquivo "scripts.js".
CAPTURANDO ELEMENTOS
O javascript a seguir captura o elemento "body" dentro de uma página HTML usado um identificador que nesse caso é o "ID".
Resultado:
CAPTURANDO O CONTEÚTO DOS ELEMENTOS
O javascript a seguir captura o conteúto do elemento "body" dentro de uma página HTML usado um identificador que nesse caso é o "ID".
Resultado:
IDEM SÓ QUE USANDO A TAG "INPUT" INVÉS DO "BUTTON"
Idem.
ALERTA
Mensagem de alerta (ao invés de usar "window.alert" se poderia usar somente "alert").
ALERTA, MAS SALTANDO UMA LINHA (\n)
Mensagem de alerta, mas saltando um linha com a sintaxe "\n".
CONFIRMAÇÃO (OK OU CANCEL)
CONFIRMAÇÃO (OK / CANCEL) COM "IF" E "ELSE"
Também se está usando uma variável "x".
CAMPO DE DIGITAÇÃO (PROMPT / OK / CANCEL)
Também se está usando uma variável "x".
Obs: ao apertar o botão "CANCEL" em um JavaScript é enviado por parâmetro o valor "null" para o objeto/função que o usou (no caso desse exemplo o objeto/função é o "prompt"). Assim, se pode realizar testes condicionais para saber qual botão foi clicado.
TRATAMENTO DE ERRO (TRY / CATCH)
O erro está destacado em vermelho, onde não foi definida a variável "WWWWWWWWW".
INSTANCIAR OBJECTOS
Objetos:
Resultado:
INSTANCIAR OBJECTOS COM PASSAGEM DE PARÂMETROS
Objetos:
Resultado:
INSTANCIAR OBJECTOS E A UTILIZAÇÃO DO "THIS"
O "this" informa ao javascript que a variável que utiliza o "this" é local, ou seja, de dentro da função que a pertence:
Resultado: 20, 5, 20 e 10.
INSTANCIAR OBJECTOS E A UTILIZAÇÃO DO "THIS" 2
O "this" informa ao javascript que a variável que utiliza o "this" é local, ou seja, de dentro da função que a pertence:
Resultado: 20, 5 e 10.
DUAS INSTANCIAS DE UM MESMO OBJECTOS, UTILIZAÇÃO DO "THIS" E PASSAGEM DE PARAMETROS
O "this" informa ao javascript que a variável que utiliza o "this" é local, ou seja, de dentro da função que a pertence:
Resultado: 20, 5 e 100.
FUNÇÃO E SUB-FUNÇÃO
O "this" informa ao javascript que a variável que utiliza o "this" é local, ou seja, de dentro da função que a pertence:
Resultado:
IDEM AO ANTERIOR, SEM INSTACIAR OBJETOS
Somente chamando o objeto (método):
Resultado:
RETURN
A declaração "return" tem o objetivo que a função retorne um valor. Quando o "return" é usado, a função é parada e o valor é retornado. O "return" não pára o JavaScript inteiro, mas somente a função que ele está:
Resultado:
VETOR (ARRAY) COM LOOP
Nesse exemplo foi digitado "João", "Pedro" e "José":
Resultado:
BREAK 1
O "break" faz com que o LOOP(ou SWITCH) seja interrompido e que a interação sai do LOOP. Nesse exemplo foi digitado "João", "Pedro" e "José":
Resultado:
BREAK 2
O "break" faz com que o LOOP(ou SWITCH) seja interrompido e que a interação sai do LOOP. Nesse exemplo foi digitado "João", "Pedro" e "José":
Resultado:
CONTINUE
O "break" faz com que o LOOP(ou SWITCH) seja interrompido e que a interação sai do LOOP. Nesse exemplo foi digitado "João", "Pedro" e "José":
Resultado:
VAR 1
O "var" é usado para inicializar um variável. Por padrão, deve ser usado no início do código. Contudo, se inicializada duas vezes a mesma variável, essa variável não perde o seu conteúdo. Abaixo é mostrada a diferença de se usar o "var" ou não, dependo onde é usado, vai ser global ou local:
Resultado:
VAR 2
Idem ao anterior, menos na parte de chamar a função "clicar()". O resultado é o mesmo:
Resultado:
Referências Bibliográgicas