1 Crie um bloco de script
para fazer referência ao código do programa de conteúdo
<linguagem script="JavaScript">
O código JavaScript está escrito aqui
</script>
2 Ocultar código de script
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
document.write(“Olá”);
// -->
</script>
O código relevante não será executado em navegadores que não suportam JavaScript
3. Exibido quando o navegador não oferece suporte.
Código do programa de conteúdo de referência
<noscript>
Olá ao navegador não JavaScript.
</noscript>
4 Vincular arquivos de script externos
Código do programa de conteúdo de referência
<script language="JavaScript" src="/"filename.js""></script>
5 Comentário script
Código do programa de conteúdo de referência
//Este é um comentário
document.write(“Olá”); // Este é um comentário
/*
Tudo isso
é um comentário
*/
6 Saída para navegador
Código do programa de conteúdo de referência
”
);
Código do programa de conteúdo de referência
var minhaVariável = “algum valor”;
adição de 8 strings
Código do programa de conteúdo de referência
var minhaString = “String1” + “String2”
;
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
var minhaVariável = “Olá”;
var láLugar = minhaVariável.search("lá");
document.write(láLugar);
// -->
</script>
10 Substituição de string
Código do programa de conteúdo de referência
Sexta
”);
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
var minhaVariável = “Olá”;
document.write(minhaVariável.big() + “<br>”);
document.write(minhaVariável.blink() + “<br>”);
document.write(minhaVariável.bold() + “<br>”);
document.write(minhaVariável.fixed() + “<br>”);
document.write(myVariable.fontcolor(“vermelho”) + “<br>”);
document.write(myVariable.fontsize(“18pt”) + “<br>”);
document.write(minhaVariável.italics() + “<br>”);
document.write(minhaVariável.small() + “<br>”);
document.write(minhaVariável.strike() + “<br>”);
document.write(minhaVariável.sub() + “<br>”);
document.write(minhaVariável.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = "Minha String";
var finalString = firstString.bold().toLowerCase().fontcolor("vermelho");
// -->
</script>
12 Criar matriz
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
var meuArray = new Array(5);
myArray[0] = "Primeira entrada";
myArray[1] = “Segunda entrada”;
myArray[2] = “Terceira entrada”;
myArray[3] = “Quarta entrada”;
myArray[4] = “Quinta entrada”;
var anotherArray = new Array("Primeira entrada","Segunda entrada","Terceira entrada","Quarta entrada","Quinta entrada");
// -->
</script>
13 Classificação de array
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
var meuArray = new Array(5);
meuArray[0] = "z";
minhaArray[1] = "c";
meuArray[2] = "d";
minhaArray[3] = "a";
minhaArray[4] = "q";
document.write(myArray.sort());
// -->
</script>
14 Sequência dividida
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
var minhaVariável = "a,b,c,d";
var stringArray = minhaVariável.split(",");
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script>
15 Mensagem de aviso pop-up
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
window.alert(“Olá”);
// -->
</script>
16 Caixa pop-up de confirmação
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
var resultado = window.confirm(“Clique em OK para continuar”);
// -->
</script>
17 Função personalizada
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
<!--
função múltipla(número1,número2) {
var resultado = número1 * número2;
resultado de retorno;
}
// -->
</script>
18 Chamar função JS
Código do programa de conteúdo de referência
<a href=”#” onClick=”functionName()”>Texto do link</a>
<a href="/”javascript:functionName"()”>Texto do link</a>
19 Execute a função após o carregamento da página
Código do programa de conteúdo de referência
<body onLoad="nomedafunção();">
Corpo da página
</body>
20 Julgamento condicional
Código do programa de conteúdo de referência
<roteiro>
<!--
var userChoice = window.confirm(“Escolha OK ou Cancelar”);
var resultado = (userChoice == verdadeiro) ? “OK”: “Cancelar”;
documento.write(resultado);
// -->
</script>
21 Especifique o número de loops
Código do programa de conteúdo de referência
<roteiro>
<!--
var meuArray = new Array(3);
meuArray[0] = "Item 0";
meuArray[1] = "Item 1";
meuArray[2] = "Item 2";
for (i = 0; i < meuArray.length; i++) {
document.write(meuArray[i] + “<br>”);
}
// -->
</script>
22 Definir execução futura
Código do programa de conteúdo de referência
<roteiro>
<!--
função olá() {
window.alert(“Olá”);
}
window.setTimeout("olá()",5000);
// -->
</script>
23 Função de execução agendada
Código do programa de conteúdo de referência
<roteiro>
<!--
função olá() {
window.alert(“Olá”);
window.setTimeout("olá()",5000);
}
window.setTimeout("olá()",5000);
// -->
</script>
24 Cancelar execução agendada
Código do programa de conteúdo de referência
<roteiro>
<!--
função olá() {
window.alert(“Olá”);
}
var meuTimeout = window.setTimeout("olá()",5000);
window.clearTimeout(meuTimeout);
// -->
</script>
25 Execute a função quando a página for descarregada
Código do programa de conteúdo de referência
<body onUnload="nomedafunção();">
Corpo da página
</body>
JavaScript é assim 2: Saída do navegador
26 Acesse o objeto do documento
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var meuURL = documento.URL;
janela.alert(meuURL);
</script>
27 HTML de saída dinamicamente
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
document.write(“<p>Aqui estão algumas informações sobre este documento:</p>”);
documento.write(“<ul>”);
document.write(“<li>Documento de referência: “ + document.referrer + “</li>”);
document.write(“<li>Domínio: “ + document.domain + “</li>”);
document.write(“<li>URL: “ + document.URL + “</li>”);
documento.write(“</ul>”);
</script>
28 Saída de nova linha
Código do programa de conteúdo de referência
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);
29 data de saída
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var estaData = new Data();
document.write(thisDate.toString());
</script>
30 Especifique o fuso horário da data
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var meuDeslocamento = -2;
var dataatual = new Data();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“A hora e data na Europa Central é: “ + currentDate.toLocaleString());
</script>
31 Definir formato de saída de data
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var estaData = new Data();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var estaDateString = estaDate.getFullYear() + “/” + estaDate.getMonth() + “/” + estaDate.getDate();
document.write(thisTimeString + “ em “ + thisDateString);
</script>
32 Ler parâmetros de URL
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var urlParts = document.URL.split("?");
var parâmetroParts = urlParts[1].split(“&”);
for (i = 0; i <parâmetroParts.length; i++) {
var pairParts = parâmetroParts[i].split(“=");
var parNome = parParts[0];
var pairValue = pairParts[1];
document.write(parNome + " : " +parValor );
}
</script>
Você ainda acha que HTML não tem estado?
33 Abra um novo objeto de documento
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
function novoDocumento() {
documento.open();
document.write(“<p>Este é um novo documento.</p>”);
document.close();
}
</script>
Salto de 34 páginas
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
janela.localização = “http://www.x-force.cn/”;
</script>
35 Adicionar janela de progresso de carregamento da página da web
Código do programa de conteúdo de referência
<html>
<cabeça>
<linguagem de script='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>A página principal</title>
</head>
<body onLoad='placeHolder.close()'>
<p>Esta é a página principal</p>
</body>
</html>
Isso é tudo para JavaScript 3: Imagem
36 Lendo atributos de imagem
Código do programa de conteúdo de referência
<img src="/”image1.jpg"” name="minhaImagem">
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Largura</a>
37 Carregando imagens dinamicamente
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
minhaImagem = nova imagem;
minhaImagem.src = “Tellers1.jpg”;
</script>
38 Substituição simples de imagem
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
rollImage = nova imagem;
rollImage.src = “rollImage1.jpg”;
imagem padrão = nova imagem;
imagem padrão.src = “image1.jpg”;
</script>
<a href="/"myUrl"" onMouseOver="document.myImage.src = rollImage.src;"
onMouseOut=”document.myImage.src = defaultImage.src;”>
<img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0>
39 Exibição aleatória de imagens
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var listaimagem = new Array;
listaimagem[0] = "image1.jpg";
listaimagem[1] = "image2.jpg";
listaimagem[2] = "image3.jpg";
listaimagem[3] = "image4.jpg";
var imagemChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>
40 Substituição de imagem implementada por função
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var fonte = 0;
var substituição = 1;
function createRollOver(originalImage,replacementImage) {
var imagemArray = new Array;
imageArray[fonte] = nova imagem;
imageArray[fonte].src = imagem original;
imageArray[substituição] = nova imagem;
imageArray[replacement].src = replacementImage;
retornar imagemArray;
}
var rollImage = createRollOver("image1.jpg","rollImage1.jpg");
</script>
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
onMouseOut=”document.myImage1.src = rollImage1[fonte].src;”>
<img src="/"image1.jpg"" width=100 name="myImage1" border=0>
</a>
41 Crie uma apresentação de slides
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var listaimagem = new Array;
listaimagem[0] = nova imagem;
listaimagem[0].src = “image1.jpg”;
listaimagem[1] = nova imagem;
listaimagem[1].src = “image2.jpg”;
listaimagem[2] = nova imagem;
listaimagem[2].src = “image3.jpg”;
listaimagem[3] = nova imagem;
listaimagem[3].src = “image4.jpg”;
function slideShow(Númeroimagem) {
document.slideShow.src = imageList[imageNumber].src;
número da imagem += 1;
if (imageNumber <imageList.length) {
window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
}
}
</script>
</head>
<body onLoad="slideShow(0)">
<img src="/”image1.jpg"” width=100 name=”slideShow”>
42 imagens publicitárias aleatórias
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var listaimagem = new Array;
listaimagem[0] = "image1.jpg";
listaimagem[1] = "image2.jpg";
listaimagem[2] = "image3.jpg";
listaimagem[3] = "image4.jpg";
var urlList = new Array;
urlList[0] = "http://algum.host/";
urlList[1] = "http://another.host/";
urlList[2] = "http://algum lugar.else/";
urlList[3] = "http://right.here/";
var imagemChoice = Math.floor(Math.random() * imageList.length);
document.write('<a href="' + urlList[imageChoice] + '"><img src="' + imageList[imageChoice] + '"></a>');
</script>
Isso é tudo para JavaScript 4: Formulário
43 Composição do formulário
Código do programa de conteúdo de referência
<método de formulário=”post” action=”target.html” name=”thisForm”>
<tipo de entrada=”texto” nome=”meuTexto”>
<select name="mySelect">
<option value="1">Primeira escolha</option>
<option value=”2”>Segunda escolha</option>
</selecionar>
<br>
<tipo de entrada=”enviar” valor=”Envie-me”>
</form>
44 Acesse o conteúdo da caixa de texto no formulário
Código do programa de conteúdo de referência
<nome do formulário="meuFormulário">
<tipo de entrada=”texto” nome=”meuTexto”>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Verificar campo de texto</a>
45 Copie dinamicamente o conteúdo da caixa de texto
Código do programa de conteúdo de referência
<nome do formulário="meuFormulário">
Digite algum texto: <input type=”text” name=”myText”><br>
Copiar texto: <input type=”text” name=”copyText”>
</form>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>Copiar campo de texto</a>
46 Detectar alterações na caixa de texto
Código do programa de conteúdo de referência
<nome do formulário="meuFormulário">
Digite algum texto: <input type=”text” name=”myText” onChange=”alert(this.value);”>
</form>
47 Acesse o Select selecionado
Código do programa de conteúdo de referência
<nome do formulário="meuFormulário">
<select name="mySelect">
<option value=”Primeira Escolha”>1</option>
<option value=”Segunda escolha”>2</option>
<option value=”Terceira Escolha”>3</option>
</selecionar>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Verificar lista de seleção</a>
48 Adicionar itens selecionados dinamicamente
Código do programa de conteúdo de referência
<nome do formulário="meuFormulário">
<select name="mySelect">
<option value=”Primeira Escolha”>1</option>
<option value=”Segunda escolha”>2</option>
</selecionar>
</form>
<linguagem script="JavaScript">
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Terceira Escolha”;
</script>
49 Validar campos do formulário
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
function checkField(campo) {
if (campo.valor == "") {
window.alert(“Você deve inserir um valor no campo”);
campo.foco();
}
}
</script>
<form name="myForm" action="target.html">
Campo de texto: <input type="text" name="myField" onBlur="checkField(this)">
<br><tipo de entrada=”enviar”>
</form>
50 Verificar Selecionar itens
Código do programa de conteúdo de referência
function checkList(seleção) {
if (seleção. comprimento == 0) {
window.alert(“Você deve fazer uma seleção na lista.”);
retornar falso;
}
retornar verdadeiro;
}
51 Altere dinamicamente a ação do formulário
Código do programa de conteúdo de referência
<form name="myForm" action="login.html">
Nome de usuário: <input type=”texto” nome=”nome de usuário”><br>
Senha: <tipo de entrada=”senha” nome=”senha”><br>
<tipo de entrada=”botão” valor=”Login” onClick=”this.form.submit();”>
<input type="button" value="Registrar" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="Recuperar senha" onClick="this.form.action = 'password.html'; this.form.submit();">
</form>
52 Usando botões de imagem
Código do programa de conteúdo de referência
<form name="myForm" action="login.html">
Nome de usuário: <input type=”texto” nome=”nome de usuário”><br>
Senha: <tipo de entrada=”senha” nome=”senha”><br>
<input type="image" src="/"login.gif"" value="Login">
</form>
53 Criptografia de dados de formulário
Código do programa de conteúdo de referência
<SCRIPT LANGUAGE='JavaScript'>
<!--
função criptografar(item) {
var novoItem = '';
for (i=0; i < item.comprimento; i++) {
newItem += item.charCodeAt(i) + '.';
}
return novoItem;
}
function criptografarForm(meuFormulário) {
for (i=0; i < meuForm.elements.length; i++) {
meuForm.elements[i].value = criptografar(myForm.elements[i].value);
}
}
//-->
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Digite algum texto: <input type=text name=myField><input type=submit>
</form>
Isso é tudo para JavaScript 5: Janela e quadro
54 Altere o prompt de texto da barra de status do navegador
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
window.status = “Uma nova mensagem de status”;
</script>
55 Caixa pop-up de confirmação
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var userChoice = window.confirm(“Clique em OK ou Cancelar”);
if (escolha do usuário) {
document.write(“Você escolheu OK”);
} outro {
document.write(“Você escolheu Cancelar”);
}
</script>
56 Solicitação de entrada
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var userName = window.prompt("Digite seu nome","Digite seu nome aqui");
document.write(“Seu nome é“ + nomedeusuario);
</script>
57 Abra uma nova janela
Conteúdo citado //Abra uma nova janela do navegador com código de programa chamado myNewWindow
<linguagem script="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow");
</script>
58 Defina o tamanho da nova janela
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>
59 Defina a posição da nova janela
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>
60 Se a barra de ferramentas e a barra de rolagem devem ser exibidas
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
window.open("http://www.x-force.cn/",barra de ferramentas=não, barra de menu=não);
</script>
61 É possível dimensionar o tamanho da nova janela?
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
window.open('http://www.x-force.cn/', 'myNewWindow', 'resizable=yes' );</script>
62 Carregar um novo documento na janela atual
Código do programa de conteúdo de referência
<a href='#' onClick='document.location = '125a.html';' >Abrir novo documento</a>
63 Defina a posição de rolagem da página
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
if (document.all) { //Se for um navegador IE, use o atributo scrollTop
document.body.scrollTop = 200;
} else { //Se for um navegador NetScape, use o atributo pageYOffset
janela.pageYOffset = 200;
}</script>
64 Abra uma janela em tela inteira no IE
Código do programa de conteúdo de referência
<a href='#' onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>Abrir uma janela em tela inteira</a>
65 Operações de novas janelas e janelas principais
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
//define nova janela
var novaJanela = janela.open("128a.html","novaJanela");
newWindow.close(); //Fecha a nova janela aberta na janela pai
</script>Feche o código do programa da janela pai em uma nova janela
window.opener.close()
66 Escreva conteúdo na nova janela
Código do programa de conteúdo de referência
<linguagem script="JavaScript">
var novaJanela = janela.open("","novaJanela");
novaJanela.document.open();
newWindow.document.write(“Esta é uma nova janela”);
novaWIndow.document.close();
</script>
67 Carregue a página na página do quadro
Código do programa de conteúdo de referência
<frameset colunas=”50%,*”>
<frame name="frame1" src="/"135a.html"">
<frame name="frame2" src="/"about:blank"">
</frameset>
Carregue a página no frame2 no frame1
parent.frame2.document.location = “135b.html”;
68 Compartilhando scripts entre páginas de quadro
Citando conteúdo Se houver um código de script no arquivo html no frame1
função doAlerta() {
window.alert(“Quadro 1 está carregado”);
}
código do programa
do métodopode ser chamado assim no frame2
<body onLoad="parent.frame1.doAlert();">
Este é o quadro 2.
</body>
69 Dados públicos
O conteúdo de referência pode definir itens de dados em uma página de quadro para que os dados possam ser usados pelo código utilitário da página em vários quadros.
<linguagem script="JavaScript">
var persistenteVariable = “Este é um valor persistente”;
</script>
<frameset colunas=”50%,*”>
<frame name="frame1" src="/"138a.html"">
<frame name="frame2" src="/"138b.html"">
</frameset>
Desta forma, a variável persistenteVariable pode ser usada tanto no frame1 quanto no frame2
70 Framework Code Library
Conteúdo citado De acordo com algumas das idéias acima, podemos usar uma página de quadro oculto como o
código
do programa base de todo o conjunto de quadros
<coleções do conjunto de quadros=”0,50%,*”>
<frame name="codeFrame" src="/"140code.html"">
<frame name="frame1" src="/"140a.html"">
<frame name="frame2" src="/"140b.html"">
</frameset>