Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.725 materiais240.568 seguidores
Pré-visualização40 páginas
lido ou se também pode escrever-se 
o seu valor (funciona com type="text" e type="password")
size Lê ou define o número de caracteres que podem ser vistos ao 
mesmo tempo
src Quando se tem type="image" lê ou define o endereço (URL) da 
imagem
tabIndex Lê ou define o índice (número de ordem) do elemento que 
corresponde a este objeto no acesso através da tecla tab
type Lê o tipo (valor do atributo type) do elemento
value Lê ou define o valor de um checkbox ou de um radiobutton
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 163
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Cada uma das propriedades descritas mais acima corresponde a um atributo 
do elemento <input> em acordo com a linguagem HTML. 
Exemplos de Aplicação
Controlar o estado de um checkbox (caixa de validação)
<html>
<head>
 function check()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.checked=true
 }
 function uncheck()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.checked=false
 }
<title></title>
</head>
<body>
 <form>
 <input type=&quot;checkbox&quot; value=&quot;on&quot; id=&quot;myInput&quot;>
 <input onclick=&quot;check()&quot; type=&quot;button&quot; value=&quot;Marcar Checkbox&quot;>
 <input onclick=&quot;uncheck()&quot; type=&quot;button&quot; value=&quot;Desmarcar Checkbox&quot;>
 </form>
</body>
</html>
Desativar ou ativar um campo do formulário
<html>
<head>
 function makeDisable()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.disabled=true
 }
 function makeEnable()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.disabled=false
 }
<title></title>
</head>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 164
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
<body>
 <form>
 <input value=&quot;Olá Pessoal!&quot; id=&quot;myInput&quot;><br>
 <input onclick=&quot;makeDisable()&quot; type=&quot;button&quot;
 value=&quot;Desativar Caixa de Texto&quot;>
 <input onclick=&quot;makeEnable()&quot; type=&quot;button&quot;
 value=&quot;Ativar Caixa de Texto&quot;>
 </form>
</body>
</html>
Definir o número máximo de caracteres que podem ser escritos num campo de 
texto
<html>
<head>
 function maximum()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.maxLength=&quot;5&quot;
 }
<title></title>
</head>
<body>
 <p>
 Antes de clicar no botão &quot;Definir Tamanho Máximo&quot;
 conseguimos escrever na caixa de texto tantos
 caracteres quantos quisermos (experimente!)
 </p>
 <p>
 Depois de clicar no botão &quot;Definir Tamanho Máximo&quot;
 não lhe será permitido escrever mais de 5 caracteres
 na caixa de texto.
 </p>
 <form>
 Escreva algum texto: <input id=&quot;myInput&quot;>
 <input onclick=&quot;maximum()&quot; type=&quot;button&quot; value=&quot;Definir Tamanho Máximo&quot;>
 </form>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 165
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Fazer com que um campo possa apenas ser lido
<html>
<head>
 function makeReadOnly()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.readOnly=true
 }
 function delReadOnly()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.readOnly=false
 }
<title></title>
</head>
<body>
 <form>
 <p>
 Tente escrever na caixa depois de clicar no botão
 &quot;Permitir apenas a leitura&quot;
 </p>
 <input value=&quot;Olá Pessoal!&quot; id=&quot;myInput&quot;>
 <input onclick=&quot;makeReadOnly()&quot; type=&quot;button&quot;
 value=&quot;Permitir apenas a leitura&quot;>
 <input onclick=&quot;delReadOnly()&quot; type=&quot;button&quot; value=&quot;Permitir a escrita&quot;>
 </form>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 166
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Alterar o tamanho de um campo
<html>
<head>
 function sizeCinco()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.size=5
 }
 function sizeVinte()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.size=20
 }
<title></title>
</head>
<body>
 <p>
 Clique em cada um dos botões para alterar
 o tamanho da caixa de texto.
 </p>
 <form>
 <input id=&quot;myInput&quot; type=&quot;text&quot;><br><br>
 <input onclick=&quot;sizeCinco()&quot; type=&quot;button&quot; value=&quot;size=5&quot;>
 <input onclick=&quot;sizeVinte()&quot; type=&quot;button&quot; value=&quot;size=20&quot;>
 </form>
</body>
</html>
Ler e manipular o estado de um radiobutton
<html>
<head>
 function fruit(index)
 {
 var x=document.getElementById(&quot;myForm&quot;)
 alert(x[index].value)
 }
<title></title>
</head>
<body>
 <form id=&quot;myForm&quot;>
 Banana:
 <input onclick=&quot;fruit(0)&quot; type=&quot;radio&quot; value=&quot;Banana&quot; name=&quot;fruta&quot;><br>
 Mamão:
 <input onclick=&quot;fruit(1)&quot; type=&quot;radio&quot; value=&quot;Mamão&quot; name=&quot;fruta&quot;><br>
 Laranja:
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 167
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
 <input onclick=&quot;fruit(2)&quot; type=&quot;radio&quot; value=&quot;Laranja&quot; name=&quot;fruta&quot;>
 </form>
</body>
</html>
Selecionar o texto de um campo do formulário
<html>
<head>
 function makeSelect()
 {
 var x=document.getElementById(&quot;myInput&quot;)
 x.select()
 x.focus()
 }
<title></title>
</head>
<body>
 <form>
 <input value=&quot;Olá Pessoal!&quot; id=&quot;myInput&quot;>
 <input onclick=&quot;makeSelect()&quot; type=&quot;button&quot;
 value=&quot;Selecionar o Texto da Caixa&quot;>
 </form>
</body>
</html>
11.10 Objeto object
Este objeto representa de forma completa os elementos criados com a etiqueta 
<object> do HTML.
Propriedades
Propriedade Descrição
form Se o objeto estiver contido num elemento <form> devolve o 
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 168
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
objeto que corresponde a esse elemento <form>, caso contrário 
devolve null
code Se o elemento <object> estiver sendo usado para inserir uma 
miniaplicação Java (em vez do elemento <applet>, que foi 
rejeitado nas versões modernas do HTML) este atributo contém 
o nome da classe Java na qual se deve iniciar a execução do 
código. Nos outros casos contém null.
align Corresponde ao atributo align
archive Corresponde ao atributo archive. Contém os nomes de um ou 
mais arquivos (separados por vírgulas) que guardam código a 
executar pelo objeto.
border Corresponde ao atributo border
codeBase Corresponde ao atributo codebase
codeType Corresponde ao atributo codetype
data Corresponde ao atributo data, que fornece o endereço de um 
recurso contendo dados que o objeto consome
declare Propriedade ainda não utilizada mas que está reservada para 
uso no futuro
height Corresponde ao atributo height
name Corresponde ao atributo name
standby Corresponde ao atributo standby
tabIndex Lê ou define o índice (número de ordem) do elemento que 
corresponde a este objeto no acesso através da tecla tab
type Corresponde ao atributo type
useMap Se o elemento que corresponde a este objeto tiver sido dividido 
em partes usando o elemento <map> então esta propriedade 
contém o valor true, no caso contrário contém false. Veja o 
atributo usemap do elemento que no HTML corresponde a este 
objeto.
width Corresponde ao atributo width
Cada uma das propriedades descritas mais acima corresponde a um atributo 
do elemento <object> em acordo com a linguagem HTML.
11.11 Objeto option
Este objeto representa de forma completa os elementos criados com a etiqueta 
<option> do HTML. 
Propriedades
Propriedade Descrição
defaultSelected Indica que esta é a opção selecionada na partida
disabled Lê
Carregar mais