Para executar comando em javascript dentro de paginas HTML sera necesario a utlizacao da tag
'<'script type="text/javascript"'>'
lista de comandos;
'<'/script'>'
'<'script type="text/javascript"'>'
/* comentario em bloco javascript
pode conter varias linhas
*/
// comentario em inicio ou fim de linha
'<'/script'>'
Javascript muda valor de elemento html
elemento html
'<'p id="titulo"'>' Portalx Page '<'/p'>'
botao chamada da funcao
'<'button type="button" onclick="MudarTitulo()"'>'MudarTitulo '<'/button '>'
'<'script type="text/javascript"'>'
function MudarTitulo()
{
document.getElementById("titulo").value // pega valor de elemento html se desejar manipular
document.getElementById("titulo").innerHTML="PORTALX J" // coloca novo valor no elemento
}
'<'/scrip'>'
JavaScript pode mudar estilos de HTML ex: elemento demo
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
JavaScript pode alterar atributos HTML - mudar o arquivo de imagem
document.getElementById("image").src = "picture.gif";
A tag HTML -noscript>
A -noscript>tag é usada para fornecer um conteúdo alternativo para usuários que desativaram scripts
em seus navegadores ou possuem um navegador que não suporta scripts do lado do cliente:
Exemplo
-script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
-/script>
-noscript>Sorry, your browser does not support JavaScript!-/noscript>
Referencia de arquivos externos .js
Arquivos javascript Externo tem terminacao .js Contem codigos para serem usados na pagina que o referencia Sao refernciados na pagina na tag '<'script '>' '<'script type="text/javascript" src="nomearquiov.js"'>' '<'/scrip '>' Pode conter referencia de diretorios e e url externa
Variaveis Declara como var nomedavariavel pode comecar com: letras Maiusculas minusculas e $ Meu padrao $NomeSubnome Variaveis declaradas fora de função são globais ate o fim da secção Variaveis declarada dentro de funções são locais a função
Operadores aritimeticos: + soma - subtracao * multiplica / divide & modulo (sobra de divisao) - 5/3 =1 (e sobra 2) Exemplo: 5 & 3 = 2 Operadores comparacao: == igual === igual valor e tipo != diferente (exclamacao e igual) !== diferente tipo e valor > maior < menor >= maior ou igual <= menor ou igual Operadores logicos: && yes || or !: no
Caracteres reservados: \n nova linha \f nova pagina \r return ou tabulacao \b backspace \' aspas simple \" aspas duplas \\ barra invertida \unnnn unicod nnnn=de 0000 a FFFF \Onnn octal nnn de 000 a 377 \xnn Hexadecimal nn de 00 a FF Para usar caracteres especiais com normais basta colocalos entre aspas simples Exemplo: '//'
'<'script type="text/javascript"'>' var $Status var $SalarioBom=20000 status=(SalarioBom >=20000)?"Salario e Bom":"Salario menor que bom" // ?"condicao true":"condicao falsa" '<'/scrip'>'
- Exemplo if
if (condicao)
{
comandos se condicao true
}
- Exemplo if else
if (condicao)
{
comandos se condicao true
}
else
{
comando se condicao false
}
- Exemplo if else if
if (condicao A)
{
comandos se condicao true
}
else if (condicao B)
{
comando se condicao B true
}
else
{
comando se condicao A e B false
}
'<'script type="text/javascript"'>'
switch(condicao)
{
case 1
codigo se 1 true
case 2
codigo se 1 true
continue - testa condicao tudo de novo
case 3
codigo se 3 true
break - interrompe fluxo
default
codigo se todos anteriores false
}
'<'/scrip'>'
// Switch testa dia da semana
'<'script type="text/javascript"'>'
Var $dia
function DiaSemana()
{ // function
var day=Date().getDay() // retorna valor de 0 a 6 para cada dia da semana 0=domingo
switch(day)
{ // switch
case 0
$dia="domingo"
case 1
$dia="segunda-feira"
case 2
$dia="terca-feira"
case 3
$dia="quarta-feira"
case 4
$dia="quinta-feira"
case 5
$dia="sexta-feira"
case 6
$dia="sabado"
} // switch
} // function
return $dia
'<'/scrip'>'
'<'head'>'
'<'script type="text/javascript"'>'
function Alerta()
{
alert("Conforme entes de prosseguir");
}
'<'/scrip'>'
'<'/head'>'
'<'body'>'
'<'imput="button" onclick=Alerta() value="Mostrar Alerta"/'>'
'<'/body>
'<'head'>'
'<'script type="text/javascript"'>'
var $Resp=confirm("Apagar dado?");
if $Resp==true;
{
x="Confirmado";
}
else;
{
x="Cancelado";
}
'<'/scrip'>'
'<'/head'>'
'<'body'>'
'<'/body'>'
'<'head'>'
'<'script type="text/javascript"'>'
var $Resp=prompt("Digite seu nome","NomeDefault");
if $Resp !==null && $Resp!="";
{
x="Seja Benvindo"+$Resp;
}
else;
{
x="Seja Benvindo"+NomeDefault;
}
'<'/scrip'>'
'<'/head'>'
'<'body'>'
'<'/body'>'
onclick
onchange
onmousedown
onmouseup
onmouseenter
onmuoseleave
onfocus
onblur
onsubmit