Aqui temos um parágrafo com o id=destino...veja tag anchor
| Definição: | Função Matemática |
| Biblioteca: | Math |
| Tipo: | Método. |
| Finalidade: | Retorna o valor absoluto (Módulo) de um número. |
| Sintaxe: | Math.abs(número) |
| Parâmetros: | numero é qualquer expressão numérica ou uma propriedade de um objeto existente. Não pode ser omitido(required) |
| Descrição: |
Se o número recebido for positivo, retorna o mesmo número. Se for negativo, retorna o número só que positivo sem qualquer arredondamento, só troca o sinal. |
| exemplo: | <div><script>document.write(Math.abs(-4.783943));</script></div> |
| Teste: |
|
| Nota(s): |
Math.abs("String") = NaN Math.abs(null) = 0 |
| Definição: | Parâmetro/Propriedade de tag HTML | ||||||||||||||||||||||||||
| Biblioteca: | DOM | ||||||||||||||||||||||||||
| Tipo: | Parâmetro | ||||||||||||||||||||||||||
| Finalidade: | Define ou obtém a tecla de atalho para a tag. | ||||||||||||||||||||||||||
| Sintaxe: | var x = document.getElementById("link").accessKey; | ||||||||||||||||||||||||||
| Parâmetros: | elemento html Pode ser qualquer elemento html. | ||||||||||||||||||||||||||
| Descrição: | Toda tag HTML pode ter uma tecla de atalho para facilitar seu uso e normalmente é acessada pelas teclas shift, control, alt pressionadas conjuntamente com uma letra. | ||||||||||||||||||||||||||
| exemplo: |
var x = document.getElementById("meubotao").accessKey; Exemplo abaixo : <button id="meubotao" accesskey="w" onfocus='alert("Este botão recebeu o foco")' > Clique em [Alt]+w e veja se este botão recebe o foco da app. </button> Pressione 'esc' para sair. |
||||||||||||||||||||||||||
| Teste: | Pressione 'esc' para sair. | ||||||||||||||||||||||||||
| Nota(s): |
O atributo accesskey é um parâmetro da tag HTML que especifica uma
tecla de atalho para ativar ou focar um elemento. O valor do atributo de acesso deve ser um único caractere (uma letra ou um dígito). A forma de acessar a tecla de atalho varia em diferentes navegadores:
|
||||||||||||||||||||||||||
| Definição: | Função Matemática |
| Biblioteca: | Math |
| Tipo: | Método. |
| Finalidade: |
Retorna o arco cosseno (em radianos) de um número. Retorna o arco cujo cosseno daria o valor do parâmetro recebido. |
| Sintaxe: | Math.acos(número) |
| Parâmetros: |
número é o cosseno do ângulo que desejamos descobrir
o ângulo. Este parâmetro não pode ser omitido. O valor dele deve estar em -1 e 1 (veja circulo trignométrico). |
| Descrição: |
O método acos é a função inversa do cosseno.
No cosseno você dá o angulo e retorna o cosseno.
No Acos você dá o cosseno e ele retorna o ângulo. Retorna um valor numérico do angulo,em radianos, que daria o cosseno recebido como parâmetro. Esse cosseno pode variar de +- pi radianos (PI=180 graus). Ex: Se o cosseno for -1 a função acos retornará o ângulo PI radianos (180 graus). |
| exemplo: | <script>document.write(Math.acos(-1));</script> |
| Teste: |
|
| Nota(s): |
Se o parâmetro estiver fora de faixa (-1 a 1) este método
retornará NaN. O ângulo retornado estará em radianos(-¶ a +¶). Importante : Para converter o angulo de graus para radianos multiplique o angulo por PI e divida por 180 (isto sempre dará um ângulo entre 0 e 2PI (6,28).) ângulo -1 = -180 graus. |
| Definição: | Função Matemática |
| Biblioteca: | Math |
| Tipo: | Método. |
| Finalidade: |
Retorna o arco cosseno hiperbólico (em radianos) de um número. Retorna o arco cujo cosseno hiperbólico que daria o valor do parâmetro recebido. |
| Sintaxe: | Math.acosh(número) |
| Parâmetros: |
número é o cosseno hiperbólico do ângulo que desejamos
descobrir o ângulo. Este parâmetro não pode ser omitido. O valor dele deve ser maior que 1. |
| Descrição: |
O método acosh é a função inversa do cosseno hiperbólico.
No cosseno hiperbólico você dá o angulo e retorna o cosseno hiperbólico.
No Acosh você dá o cosseno hiperbólico e ele retorna o ângulo hiperbólico. Retorna um valor numérico do angulo,em radianos, que daria o cosseno hiperbólico recebido como parâmetro. Esse cosseno hiperbólico pode variar de +- pi radianos (PI=180 graus). |
| exemplo: | <script>document.write(Math.acosh(2.87));</script> |
| Teste: |
|
| Nota(s): |
Se o parâmetro estiver fora de faixa (menor que 1) este método
retornará NaN. O ângulo retornado estará em radianos(-¶ a +¶). Importante : Para converter o angulo de graus para radianos multiplique o angulo por PI e divida por 180 (isto sempre dará um ângulo entre 0 e 2PI (6,28).) ângulo -1 = -180 graus. |
| Definição: |
No documento HTML sempre tem um objeto que tem o foco da página. A propriedade activeElement aponta para ele. |
| Biblioteca: | Document-DOM |
| Tipo: | Propriedade |
| Finalidade: | A propriedade activeElement retorna o elemento atualmente em foco no documento. |
| Sintaxe: | document.activeElement |
| Parâmetros: | Nenhum |
| Descrição: |
Retorna o elemento HTML que no momento tem o foco da página. |
| exemplo: |
<div id="meuElementoAtivo"> <script> var x = document.activeElement.tagName; document.write(x); </script> </div> |
| Teste: |
|
| Nota(s): |
No resultado do teste acima recebemos no load da página que a tag ativa no load do documento é a tag body. Importante : O parâmetro activeElement é Apenas Leitura (ReadOnly), ou seja, podemor ler mas não alterar. Infelizmente no IOS todas tags que não são input type text esta função retorna o activeElement do body se existir ou null. |
| Definição: | O método document.addEventListener () anexa um manipulador de eventos ao documento ou tag. |
| Biblioteca: | Documento, Elemento-DOM |
| Tipo: | Método |
| Finalidade: | Adicionar o tratamento de um evento ao elemento html. |
| Sintaxe: | document.addEventListener(evento, função, ModoDeCaptura) |
| Parâmetros: |
evento : designa qual evento irá disparar a funcionalidade (click, over, etc.). função : É uma função ( normalmente feita em JavaScript ) que tratará o evento. E o ModoDeCaptura que pode ser false (bubbling-borbulhamento-default) ou true (Capturing). Nota : Ao omitir o parâmetro ModoDeCaptura será utilizado o bubbling(default - false). |
| Descrição: |
Adiciona um manipulador ('handler') de um determinado evento a um elemento html do
documento corrente. |
| exemplo: |
Clique aqui para disparar o evento click recém adicionado a este controle : <input type="text" id="demoAddEventListener" /> <script> document.addEventListener("click", function () { document.getElementById("demoAddEventListener").value = "Não é que funciona"; }); </script> |
| Teste: | Clique aqui para disparar o evento click recém adicionado a este controle : |
| Nota(s): |
1-Você pode adicionar o mesmo evento a diferentes objetos do DOM mas nunca dois tratamentos
de evento ao mesmo objeto do DOM. Cada objeto só admite uma função de tratamento para cada
evento. 2-Os eventos mais comuns são : Assunto html - 09-Eventos |
| Definição: | Interface com o usuário. |
| Biblioteca: | Objeto Window |
| Tipo: | Método. |
| Finalidade: | Exibe uma caixa de diálogo Alerta com uma mensagem que pode ser customizada pelo programador da mensagem e um botão OK. |
| Sintaxe: | alert("mensagem") |
| Parâmetros: | message é qualquer string ou uma propriedade de um objeto existente. |
| Descrição: |
Emite uma caixa de diálogo de alerta com uma mensagem customizável e um botão de Ok. Esta caixa de diálogo é exibida no modo Modal, ou seja, não é possível clicar em mais nada além do botão OK da caixa de alerta. No exemplo abaixo há um botão. Clique nele e será exibida um alerta. Use o método alert para exibir uma mensagem que não requer uma decisão do usuário. O argumento message especifica uma mensagem que a caixa de diálogo contém. Embora o alert seja um método do objeto window, você não precisa especificar uma windowReference ao chamá-lo. Por exemplo, windowReference.alert() é desnecessário. Você não pode especificar um título para uma caixa de diálogo de alerta, mas pode usar o método aberto para criar sua própria caixa de diálogo "alerta". |
| Exemplo: |
<form> <input type="button" value="Clique aqui para que um caixa de diálogo de alerta seja exibida" onclick='alert("Desta vez foi só um teste mas normalmente é uma mensagem que alerta o usuário sobre um ponto importante.")'> </form> |
| Teste: |
|
| Nota(s): | É um dos principais recursos de depuração dos scripts JavaScript. A grande maioria dos testes damos um alert(x) onde x é algo que desejamos saber se tem ou não o valor esperado, de uma variável, propriedade, objeto, etc. |
| Definição: | HTML-Cor de exibição do(s) Link(s) |
| Biblioteca: | Document |
| Tipo: | Propriedade. |
| Finalidade: | Determina que seja usada uma cor específica para um link ativo, ou seja, depois do botão do mouse é pressionado, mas antes que o botão do mouse seja liberado. |
| Sintaxe: | document.alinkColor |
| Parâmetros: | Uma cor. Veja descrição abaixo. |
| Descrição: |
Obsoleta desde DOM Level 2 (HTML 4.01) - Utilizar o CSS : active em seu lugar. Esta propriedade é o reflexo de JavaScript do atributo alink da tag <body>. A propriedade alinkColor é expressa como um trigêmeo RGB hexadecimal ou como uma das literais de seqüência de caracteres listadas em Valores de cor. R é a quantidade de cor vermelha(RED), G é a quantidade de cor verde (Green) e B é a quantidade de cor azul (Blue). Por exemplo, os valores hexadecimais de RGB para salmão são vermelho=FA, verde=80 e azul=72, portanto, o trigêmeo RGB para salmão é "#FA8072". Podemos definir a cor pelo seu nome como aquamarine, lightblue, purple, etc. Temos as seguintes cores de links : cor do link novo [a:link()], cor do link visitado[a:visited()], cor do link quando o mouse esta sobre ele [a:hover()], cor do link que tem o foco da página:[active()]. |
| Exemplo: |
document.alinkColor="aqua" document.alinkColor="#00FFFF" |
| Teste: |
Não é possível dar exemplo desta funcionalidade pelo motivo que este item
se aplica quando o link não foi visitado e o mouse foi clicado. Por esse
motivo funcionaria a primeira vez e depois teríamos que fechar e abrir
o browser para refazer o teste. Se precisar ajuda na escolha de uma cor visite : Assunto: CSS- 11-Escolhendo Cor.html |
| Nota(s): |
Obsoleta desde DOM Level 2 (HTML 4.01) - Utilizar o CSS : active em seu lugar. O motivo pelo qual foi removida é que tudo que é formatação ou estilo foi migrado no html5 para a CSS. |
| Definição: |
Document.adoptNode () transfere um nó de outro documento para o documento do método. O nó adotado e sua subárvore são removidos de seu documento original (se houver), e seu ownerDocument é alterado para o documento atual. O nó pode é inserido no documento atual. |
| Biblioteca: | Document-DOM |
| Tipo: | Método |
| Finalidade: | Mover um nó do documento origem para o documento destino. |
| Sintaxe: | document.adoptNode(document, XMLDocument); |
| Parâmetros: | XMLDocument é opcional. Usado apenas quando desejamos incluir um nó de um documento XML. |
| Descrição: |
Move um nó de outro documento para o documento atual. Se um nó que pertence a outro documento e precisa ser inserido no documento atual, ele deverá ser importado primeiro. Os nós podem ser importados com os métodos adoptNode e importNode. O método adoptNode move o nó de origem, enquanto o método importNode o copia. A subárvore inteira que pertence ao nó é movida ou copiada por esses métodos, embora o método importNode também possa ser usado para copiar um nó sem seus descendentes. Devido a restrições de segurança, o conteúdo de um documento pode ser acessado de outro documento apenas se os dois documentos estiverem localizados no mesmo domínio. Se você deseja copiar um nó dentro de um documento, use o método cloneNode. |
| exemplo: |
var frame = document.getElementsByTagName("IFRAME")[0]; var h = frame.contentWindow.document.getElementsByTagName("H1")[0]; var x = document.adoptNode(h); |
| Teste: | Clique aqui para disparar o evento click recém adicionado a este controle : |
| Nota(s): |
1-Você pode adicionar o mesmo evento a diferentes objetos do DOM mas nunca dois tratamentos
de evento ao mesmo objeto do DOM. Cada objeto só admite uma função de tratamento para cada
evento. 2-Os eventos mais comuns são : Assunto html - 09-Eventos 3-Em mais de 25 anos de experiência nesta área nunca usei esta funcionalidade. Costumamos usar o innerHTML para transferir valores de um elemento para outro mas não mover o elemento de uma parte do documento para outra. |
| Definição: | Devolve um booleano(True/False) se a tecla ALT estava pressionada quando o evento ocorreu. |
| Biblioteca: | Event-Document-DOM |
| Tipo: | Propriedades dos Eventos disparados pelo teclado / Mouse |
| Finalidade: |
Estender o teclado através da combinação de teclas. Modificar a percepção da tecla dando mais funcionalidades ao teclado. |
| Sintaxe: | Exemplo: <body onkeydown="funcao(event);">. Veja script abaixo. |
| Parâmetros: | Não tem. |
| Descrição: | Devolve True se a tecla ALT estava pressionada quando o evento disparado pelo teclado ou mouse. |
| exemplo: |
<script> function funcao1(e) { alert( "ALT key : " + e.altKey + "\n" ); } </script> |
| Teste: | |
| Nota(s): |
Esta propriedade é definida nos eventos de teclado e mouse. Portanto, no teclado por exemplo, será dentro
do evento onkeydown="funcao(event);" que teremos acesso a funcionalidade altkey. No caso do mouse será
no evento onclick ou em outro similar(onfocus etc.). Por exemplo, ao pressionar a tecla S estamos digitando apenas a tecla S mas com ALT + S podemos definir uma funcionalidade para salvar o arquivo ou seja lá qual contexto desejarmos para a combinação das teclas. |
| Tipo: | Parâmetro de Tag <a>. |
| Finalidade: |
Quando você clica num link ele vai de uma origem para um destino. Esse destino pode ser uma
página ou um ponto no interior da página. Para marcar esse ponto específico de destino em uma
página usamos a 'pseudo-tag' anchor que nada mais é que o parâmetro id de uma tag qualquer. Define um ponto de destino para um link permitindo o deslocamento direto para uma parte da página definida. Sendo assim uma tag <a> poderá ir diretamente para esse ponto quando no parâmetro href colocamos caractere # seguido do nome do ponto criado. O link a ser clicado fará com que a exibição do documento seja deslocada não só para a página desejada ( se for o caso) mas também para um ponto especídico de destino nessa página. |
| Sintaxe: |
Definição da anchor - destino do link : <p id="destino">Aqui temos um parágrafo com o id=destino...veja tag anchor</p> Definição do link que ao ser clicado exibira o ponto definido do documento: <a href="#destino">Clique aqui para ir ao destino</a> |
| Parâmetros: | id dá um nome ao ponto do documento. Na tag <a> o parametro href="#id" fará o documento apontar para o ponto. |
| Descrição: | Define um ponto em um documento de maneira que um link possa navegar diretamente para esse ponto da página. O parâmetro id indentifica a âncora (destino) enquanto na tag <a href="#id"> cria o link para esse destino. |
| Exemplo: | <p id="destino">Aqui temos um parágrafo com o id=destino...veja tag anchor</p> |
| Teste: | Clique aqui para ir ao destino |
| Nota(s): |
•O parâmetro id deve ser único em todo documento. •Podemos combinar o link para acessar uma página externa diretamente no ponto desejado, como faço neste site. Para isto basta combinar o parâmetro url do tipo href="paginaDeDestino.html#pontodesejado" onde ponto desejado seria o id de alguma tag de destino do link na página de destino. |
| Tipo: | Propriedade CSS <a>. |
| Finalidade: | Permite alterar o nome de uma animação de uma css. |
| Sintaxe: |
document.getElementById("minhaDIV").style.animationName = "meuNovoNomeAnimacao"; Supondo que a CSS tenha sido aplicada numa classe da div minhaDIV. |
| Parâmetros: | meuNovoNomeAnimacao é o nome da nova animação a ser aplicado no objeto. |
| Descrição: |
Animação é a movimentação de objetos do documento dinâmicamente e automaticamente pelo browser. A animação na CSS é um recurso fantástico para sites onde a movimentação de um objeto é importante, como num logo empresarial que vai se montando aos poucos. Literalmente concorre com um vídeo em igualdade de recursos. Usamos junto com keyframes para tomar as decisões de alterar a animação. |
| Exemplo: |
object.style.animationName retorna o nome da animação corrente. object.style.animationName = "none|keyframename|initial|inherit" define o novo nome da animação a ser aplicada ao estilo do objeto. |
| Teste: | |
| Nota(s): |
•Este recurso é da CSS e portanto será melhor tratado neste site na
•Toda animação pode ser definida como sendo um conjunto de movimentos a serem feitos com o
objeto. Sendo assim tem uma linha de tempo associada a aplicação dessas movimentações e,
durante o percorrer dessa linha de tempo, podemos alterar a movimentação que no momento está sendo
aplicada ao objeto. •O parâmetro none desliga a animação do estilo. •O parâmetro keyframename define em qual keyframe a animação deve ser aplicada. •O parâmetro initial define que a animação deverá ser aplicada na sua condição inicial. •O parâmetro inherit define que a animação deverá prosseguir da situação atual seja onde ela se encontrar no momento. |
navigator.appCodename
document.write("The value of navigator.appCodename is " +
navigator.appCodename)
For Navigator 2.0 and 3.0, this displays the following:
The value of navigator.appCodename is Mozillaappname, appVersion, javaEnabled, userAgent properties
<aPPLET
CODE=classFilename
HEIGHT=height
WIDTH=width
MAYSCRIPT
[name=appletname]
[CODEBASE=classFileDirectory]
[ALT=alternateText]
[ALIGN="left"|"right"|
"top"|"absmiddle"|"absbottom"|
"texttop"|"middle"|"baseline"|"bottom"]
[HSPACE=spaceInPixels]
[VSPACE=spaceInPixels]>
[<PARAM name=parametername VALUE=parameterValue>]
[ ... <PARAM>]
</aPPLET>
.class extension.
.class file, if it is different from the directory that contains the HTML page.
document.applets[index]
<aPPLET CODE="musicPicker.class" WIDTH=200 HEIGHT=35Accessing JavaScript when the MAYSCRIPT attribute is not specified results in an exception.
name="musicApp" MAYSCRIPT>
document.applets[0], document.applets[1], and document.applets[2].
1. document.applets[index]index is an integer representing an applet in a document or the name of an Applet objeto as specified by the name attribute.
2. document.applets.length
document.applets.length.
document.applets[0]="myApplet.class" has no effect.
| Property | Descrição |
|---|---|
|
length
|
Reflects the number of <aPPLET> tags in the document
|
<aPPLET CODE="musicSelect.class" WIDTH=200 HEIGHT=35For more Exemplos, see Chapter 4, "LiveConnect."
name="musicApp" MAYSCRIPT>
</aPPLET>
navigator.appname
document.write("The value of navigator.appname is " +
navigator.appname)
For Navigator 2.0 and 3.0, this displays the following:
The value of navigator.appname is NetscapeappCodename, appVersion, javaEnabled, userAgent properties
navigator.appVersion
document.write("The value of navigator.appVersion is " +
navigator.appVersion)
For Navigator 2.0 on Windows 95, this displays the following:
The value of navigator.appVersion is 2.0 (Win95, I)For Navigator 3.0 on Windows NT, this displays the following:
The value of navigator.appVersion is 3.0 (WinNT, I)Example 2. The following example populates a Textarea objeto with newline characters separating each line. Because the newline character varies from platform to platform, the example tests the appVersion property to determine whether the user is running Windows (appVersion contains "Win" for all versions of Windows). If the user is running Windows, the newline character is set to \r\n; otherwise, it's set to \n, which is the newline character for Unix and Macintosh.
<SCRIPT>appCodename, appname, userAgent properties
var newline=null
function populate(textareaObject){
if (navigator.appVersion.lastIndexOf('Win') != -1)
newline="\r\n"
else newline="\n"
textareaObject.value="line 1" + newline + "line 2" + newline
+ "line 3"
}
</SCRIPT>
<FORM name="form1">
<BR><TEXTAREA name="testLines" ROWS=8 COLS=55></TEXTAREA>
<P><INPUT TYPE="button" VALUE="Populate the Textarea object"
onClick="populate(document.form1.testLines)">
</TEXTAREA>
</FORM>
1. functionname.arguments[index]
2. functionname.arguments.length
| Property |
Descrição
|
length
|
Reflects the number of arguments to the function
| |
|---|
function list(type) {
document.write("<" + type + "L>")
for (var i=1; i<list.arguments.length; i++) {
document.write("<LI>" + list.arguments[i])
document.write("</" + type + "L>")
}
}
You can pass any number of arguments to this function, and it displays each argument as an item in the type of list indicated. For example, the following call to the function
list("U", "One", "Two", "Three")
results in this output:
<UL>caller
<LI>One
<LI>Two
<LI>Three
</UL>
1. arrayObjectname = new Array([arrayLength])To use Array objects:
2. arrayObjectname = new Array([element0, element1, ..., elementn])
1. arrayObjectname.propertyname
2. arrayObjectname.methodname(Parametros)
billingMethod = new Array(5)When you create an array, all of its elements are initially null. The following code creates an array of 25 elements, then assigns values to the first three elements:
musicTypes = new Array(25)An array's length increases if you assign a value to an element higher than the current length of the array. The following code creates an array of length zero, then assigns a value to element 99. This changes the length of the array to 100.
musicTypes[0] = "R&B"
musicTypes[1] = "Blues"
musicTypes[2] = "Jazz"
colors = new Array()You can construct a dense array of two or more elements starting with index 0 if you define initial values for all elements. A dense array is one in which each element has a value. The following code creates a dense array with three elements:
colors[99] = "midnightblue"
myArray = new Array("Hello", myVar, 3.14159)
In Navigator 2.0, you must index arrays by their ordinal number, for example document.forms[0]. In Navigator 3.0, you can index arrays by either their ordinal number or their name (if defined). For example, suppose you define the following array:
myArray = new Array("Wind","Rain","Fire")
You can then refer to the first element of the array as myArray[0] or myArray["Wind"].
| Property |
Descrição
|
length
|
Reflects the number of elements in an array
|
prototype
|
Lets you add a properties to an Array object.
| |
|---|
|
|
|
msgArray = new Array()Veja também the Exemplos for the onError event handler.
msgArray [0] = "Hello"
msgArray [99] = "world"
if (msgArray .length == 100) // This is true, because defined msgArray [99] element.
document.write("The length is 100.")
a = new Array(4)This example displays the following results:
for (i=0; i < 4; i++) {
a[i] = new Array(4)
for (j=0; j < 4; j++) {
a[i][j] = "["+i+","+j+"]"
}
}
for (i=0; i < 4; i++) {
str = "Row "+i+":"
for (j=0; j < 4; j++) {
str += a[i][j]
}
document.write(str,"<p>")
}
Multidimensional array test
Row 0:[0,0][0,1][0,2][0,3]
Row 1:[1,0][1,1][1,2][1,3]
Row 2:[2,0][2,1][2,2][2,3]
Row 3:[3,0][3,1][3,2][3,3]Image object
| Tipo: | Médodo biblioteca MATH. |
| Finalidade: |
Calcula qual o tamanho do arco que gera o seno recebido por parâmetro. O ângulo é em radianos. |
| Sintaxe: | Math.asin(x) |
| Parâmetros: |
x é o valor do seno do ângulo que devemos obter o arco. Varia de -1 a +1 ( limites do círculo trignométrico). |
| Descrição: |
Calcula o arco que produz o seno recebido por parâmetro pela função. Este valor deve estar entre -1 e 1 senão a método retornará NaN. MATH.asin é um método estático, ou seja, não é necessário instanciar o objeto MATH ( tipo var x as new MATH). |
| Exemplo: |
Math.asin(-1); retorna -1.5707963267948966 = PI/2. Math.asin(-2); retorna NaN Math.asin(0.5); retorna 0.5235987755982989 = PI/6. |
| Teste: | Math.asin(0.5) = |
| Nota(s): |
Todas as funções trignométricas são suportadas pelo Javascript: • Math.sin() : Seno. • Math.cos() : Cosseno. • Math.tan() : Tangente. • Math.asin() : Arco-Seno. • Math.acos() : Arco-Cosseno. • Math.atan() : Arco-Tangente. • Math.atan2() : Arco-Tangente 2(Retorna extremos). O método asin retorna um valor númerico entre -pi/2 e pi/2 radianos. Se o valor parametro estiver fora dessa faixa irá retornar NaN. |
| Tipo: | Médodo biblioteca MATH. |
| Finalidade: |
Calcula qual o tamanho do arco que gera a tangente recebido por parâmetro. O ângulo é em radianos. |
| Sintaxe: | Math.atan(x) |
| Parâmetros: |
x é o valor da tangente do ângulo que devemos obter o arco. Varia de -1 a +1 ( limites do círculo trignométrico). |
| Descrição: |
Calcula o arco que produz a tangente recebida por parâmetro pela função. Este valor deve estar entre -1 e 1 senão a método retornará NaN. MATH.atan é um método estático, ou seja, não é necessário instanciar o objeto MATH ( tipo var x as new MATH). |
| Exemplo: |
Math.atan(1); retorna 0.7853981633974483. Math.atan(-2); retorna NaN Math.atan(0.5); retorna 0.5235987755982989 = PI/6. |
| Teste: | Math.asin(0.5) = |
| Nota(s): |
Todas as funções trignométricas são suportadas pelo Javascript: • Math.sin() : Seno. • Math.cos() : Cosseno. • Math.tan() : Tangente. • Math.asin() : Arco-Seno. • Math.acos() : Arco-Cosseno. • Math.atan() : Arco-Tangente. • Math.atan2() : Arco-Tangente 2(Retorna extremos). O método asin retorna um valor númerico entre -pi/2 e pi/2 radianos. Se o valor parametro estiver fora dessa faixa irá retornar NaN. |
Math.atan2(x,y)
function getAtan2(x,y) {
return Math.atan2(x,y)
}
If you pass getAtan2 the values (90,15), it returns 1.4056476493802699; if you pass it the values (15,90), it returns 0.16514867741462683.
history.back()
history.go(-1).
<P><INPUT TYPE="button" VALUE="< Back"forward, go métodos
onClick="history.back()">
<P><INPUT TYPE="button" VALUE="> Forward"
onClick="history.forward()">
document.bgColor
document.bgColor="aqua"The following example sets the color of the document background to aqua using a hexadecimal triplet:
document.bgColor="00FFFF"alinkColor, fgColor, linkColor, vlinkColor properties
stringname.big()
var worldString="Hello, world"The previous example produces the same output as the following HTML:
document.write(worldString.small())
document.write("<P>" + worldString.big())
document.write("<P>" + worldString.fontsize(7))
<SMALL>Hello, world</SMALL>fontsize, small métodos
<P><BIG>Hello, world</BIG>
<P><FONTSIZE=7>Hello, world</FONTSIZE>
stringname.blink()
var worldString="Hello, world"The previous example produces the same output as the following HTML:
document.write(worldString.blink())
document.write("<P>" + worldString.bold())
document.write("<P>" + worldString.italics())
document.write("<P>" + worldString.strike())
<BLINK>Hello, world</BLINK>bold, italics, strike métodos
<P><B>Hello, world</B>
<P><I>Hello, world</I>
<P><STRIKE>Hello, world</STRIKE>
1. fileUploadname.blur()
2. passwordname.blur()
3. selectname.blur()
4. textname.blur()
5. textareaname.blur()
6. frameReference.blur()
7. windowReference.blur()
userPass.blur()This example assumes that the password is defined as
<INPUT TYPE="password" name="userPass">focus method, select method
stringname.bold()
var worldString="Hello, world"The previous example produces the same output as the following HTML:
document.write(worldString.blink())
document.write("<P>" + worldString.bold())
document.write("<P>" + worldString.italics())
document.write("<P>" + worldString.strike())
<BLINK>Hello, world</BLINK>blink, italics, strike métodos
<P><B>Hello, world</B>
<P><I>Hello, world</I>
<P><STRIKE>Hello, world</STRIKE>
booleanObjectname = new Boolean(value)To use a Boolean object:
booleanObjectname.propertyname
| Property |
Descrição
|
prototype
|
Lets you add a properties to a Boolean object.
| |
|---|
bNoParam = new Boolean()The following Exemplos create Boolean objects with an initial value of true:
bZero = new Boolean(0)
bNull = new Boolean(null)
bEmptyString = new Boolean("")
bfalse = new Boolean(false)
btrue = new Boolean(true)
btrueString = new Boolean("true")
bfalseString = new Boolean("false")
bSuLin = new Boolean("Su Lin")
imagename.border
function checkBorder(theImage) {
if (theImage.border==0) {
alert('The image has no border!')
}
else alert('The image's border is ' + theImage.border)
}
height, hspace, vspace, width properties
<INPUT
TYPE="button"
name="buttonname"
VALUE="buttonText"
[onBlur="handlerText"]
[onClick="handlerText"]
[onFocus="handlerText"]>
1. buttonname.propertyname
2. buttonname.methodname(Parametros)
3. formname.elements[index].propertyname
4. formname.elements[index].methodname(Parametros)
| Property |
Descrição
|
form property
|
Specifies the form containing the Button object
|
name
|
Reflects the name attribute
|
type
|
Reflects the TYPE attribute
|
value
|
Reflects the VALUE attribute
| |
|---|
|
|
|
<INPUT TYPE="button" VALUE="Calculate" name="calcButton"Form object, Reset object, Submit object
onClick="calcFunction(this.form)">
functionname.caller
functionname.toString()--the decompiled canonical source form of the function.
function myFunc() {
if (myFunc.caller == null) {
alert("The function was called from the top!")
} else alert("This function's caller was " + myFunc.caller)
}
arguments array
Math.ceil(number)
function getCeil(x) {
return Math.ceil(x)
}
If you pass getCeil the value 45.95, it returns 46; if you pass it the value -45.95, it returns -45.
stringname.charAt(index)
var anyString="Brave new world"indexOf, lastIndexOf, split métodos
document.write("The character at index 0 is " + anyString.charAt(0))
document.write("The character at index 1 is " + anyString.charAt(1))
document.write("The character at index 2 is " + anyString.charAt(2))
document.write("The character at index 3 is " + anyString.charAt(3))
document.write("The character at index 4 is " + anyString.charAt(4))
<INPUT
TYPE="checkbox"
name="checkboxname"
VALUE="checkboxValue"
[CHECKED]
[onBlur="handlerText"]
[onClick="handlerText"]
[onFocus="handlerText"]>
textToDisplay
1. checkboxname.propertyname
2. checkboxname.methodname(Parametros)
3. formname.elements[index].propertyname
4. formname.elements[index].methodname(Parametros)
|
|
|
<B>Specify your music preferences (check all that apply):</B>Example 2. The following example contains a form with three text boxes and one checkbox. The user can use the checkbox to choose whether the text fields are converted to uppercase. Each text field has an onChange event handler that converts the field value to uppercase if the checkbox is checked. The checkbox has an onClick event handler that converts all fields to uppercase when the user checks the checkbox.
<BR><INPUT TYPE="checkbox" name="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" name="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" name="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" name="musicpref_newage" CHECKED> New Age
<HTML>Form object, Radio objects
<HEAD>
<TITLE>Checkbox objeto example</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
if (document.form1.convertUpper.checked) {
field.value = field.value.toUpperCase()}
}
function convertAllFields() {
document.form1.lastname.value = document.form1.lastname.value.toUpperCase()
document.form1.firstname.value = document.form1.firstname.value.toUpperCase()
document.form1.cityname.value = document.form1.cityname.value.toUpperCase()
}
</SCRIPT>
<BODY>
<FORM name="form1">
<B>Last name:</B>
<INPUT TYPE="text" name="lastname" SIZE=20 onChange="convertField(this)">
<BR><B>First name:</B>
<INPUT TYPE="text" name="firstname" SIZE=20 onChange="convertField(this)">
<BR><B>City:</B>
<INPUT TYPE="text" name="cityname" SIZE=20 onChange="convertField(this)">
<P><INPUT TYPE="checkBox" name="convertUpper"
onClick="if (this.checked) {convertAllFields()}"
> Convert fields to upper case
</FORM>
</BODY>
</HTML>
1. checkboxname.checked
2. radioname[index].checked
function stateChecker() {
var checkedButton = ""
for (var i in document.musicForm.musicType) {
if (document.musicForm.musicType[i].checked=="1") {
checkedButton=document.musicForm.musicType[i].value
}
}
}
defaultChecked property
clearTimeout(timeoutID)
1. buttonname.click()
2. radioname[index].click()
3. checkboxname.click()
document.musicForm.musicType[0].click()The following example toggles the selection status of the newAge checkbox on the musicForm form:
document.musicForm.newAge.click()
document.close()
document.close() to close a stream that was opened with document.open(). The document.close() method forces the content of the stream to display in the window.
function windowWriter1() {
var myString = "Hello, world!"
msgWindow.document.open()
msgWindow.document.write(myString + "<P>")
msgWindow.document.close()
}
open (document object), write, writeln métodos
windowReference.close()
self.close(). However, if the window has only one document (the current one) in its session history, the close is allowed without any confirm. This is a special case for one-off windows that need to open other windows and then dispose of themselves.
window.close() instead of simply using close(). Due to the scoping of static objects in JavaScript, a call to close() without specifying an objeto name is equivalent to document.close().
window.close()The following example closes the messageWin window:
self.close()
close()
messageWin.close()This example assumes that the window was opened in a manner similar to the following:
messageWin=window.open("")
closed property; open (window object) method
[windowReference.]closed
win1=window.open('opener1.html','window1','width=300,height=300')
...
if (win1.closed)
function1()
else
function2()
Example 2. The following code determines if the current window's opener window is still closed, and calls the appropriate function.
if (window.opener.closed)close (window object), open (window object) métodos
function1()
else
function2()
imagename.complete
<B>Choose an image:</B>lowsrc, src properties
<BR><INPUT TYPE="radio" name="imageChoice" VALUE="image1" CHECKED
onClick="document.images[0].src='f15e.gif'">F-15 Eagle
<BR><INPUT TYPE="radio" name="imageChoice" VALUE="image2"
onClick="document.images[0].src='f15e2.gif'">F-15 Eagle 2
<BR><INPUT TYPE="radio" name="imageChoice" VALUE="image3"
onClick="document.images[0].src='ah64.gif'">AH-64 Apache
<BR><INPUT TYPE="button" VALUE="Is the image completely loaded?"
onClick="alert('The value of the complete property is '
+ document.images[0].complete)">
<BR>
<IMG name="aircraft" SRC="f15e.gif" ALIGN="left" VSPACE="10"><BR>
confirm("message")
windowReference.confirm() is unnecessary.
function confirmCleanUp() {
if (confirm("Are you sure you want to quit this application?")) {
cleanUp()
}
}
You can call the confirmCleanUp function in the onClick event handler of a form's pushbutton, as shown in the following example:
<INPUT TYPE="button" VALUE="Quit" onClick="confirmCleanUp()">alert, prompt métodos
objectType.constructor
function Tree(name) {
this.name=name
}
theTree = new Tree("Redwood")
document.writeln("<B>theTree.constructor is</B> " +
theTree.constructor + "<P>")
This example displays the following output:
theTree.constructor is function Tree(name) { this.name = name; }
prototype property; "Creating new objects"
cookies.txt file.
document.cookie
"expires=" component in the cookie file sets an expiration date for the cookie, so it persists beyond the current browser session. This date string is formatted as follows:
Wdy, DD-Mon-YY HH:MM:SS GMTThis format represents the following values:
expires=Wednesday, 09-Nov-99 23:12:40 GMTThe cookie date format is the same as the date returned by toGMTString, with the following exceptions:
function RecordReminder(time, expression) {
// Record a cookie of the form "@<T>=<E>" to map
// from <T> in milliseconds since the epoch,
// returned by Date.getTime(), onto an encoded expression,
// <E> (encoded to contain no white space, semicolon,
// or comma characters)
document.cookie = "@" + time + "=" + expression + ";"
// set the cookie expiration time to one day
// beyond the reminder time
document.cookie += "expires=" + cookieDate(time + 24*60*60*1000)
// cookieDate is a function that formats the date
//according to the cookie spec
}
Hidden object
Math.cos(number)
function getCos(x) {
return Math.cos(x)
}
If x equals Math.PI/2, getCos returns 6.123031769111886e-017; if x equals Math.PI, getCos returns -1.
history.current
if (history.current.indexOf("netscape.com") != -1) {
myFunction(history.current)
}
next,
previous
properties;
"Using data tainting for security"