Material Didático

Cursos / Informática para Internet / Desenvolvimento Web I / Aula

Aula 11 - JavaScript: Acessando Objetos - Parte 2

Biblioteca de objetos de JavaScript

Nesta aula, continuaremos a aprender sobre os objetos DOM HTML, além de compreender novos tipos de objetos, tais como Objetos JavaScript e Objetos do Browser. Cada um desses grupos de objetos serão apresentados com mais detalhes nas seções seguintes.

Objetos DOM HTML

Na aula passada, vimos exemplos e discutimos sobre os objetos Link, Input Text e Form, além de exemplos manipulando imagens. Nesta aula continuaremos estudando objetos DOM HTML.

Select e TextArea

O exemplo a seguir vai combinar o uso de dois novos elementos: select e textarea, além do input text que já foi visto em exemplos anteriores. A ideia desse exemplo é montar uma página contendo um campo de texto, um botão, uma lista e uma área de texto. Toda vez que o usuário clicar no botão, o conteúdo que está digitado no campo de texto vai ser adicionado como um item da lista.

Além disso, toda vez que o usuário selecionar um item da lista, o conteúdo do item selecionado será acrescentado na área de texto. O código, apesar de mais complexo, contém somente conteúdo já tratado nos exemplos anteriores, mudando somente os elementos HTML que estão sendo manipulados.

O único trecho que deve ser realmente novo para você é o comando document.createElement('option'). Este permite criar novos elementos HTML de acordo com o nome passado como parâmetro. No caso do exemplo, o comando serve para criar uma nova opção na lista de itens (tag <option> dentro da tag <select>).

//Adiciona um novo option ao elemento select
		function adicionarItem(){
		  var campoTexto=document.getElementById("item");
		  var campoItens=document.getElementById("itens");
		  
		  var opcaoNova=document.createElement('option');
		  opcaoNova.text = campoTexto.value;
		  
		  campoItens.add(opcaoNova);
		}

//Concatena o texto do item selecionado na área de texto
		function adicionarTexto(){

var campoAreaTexto=document.getElementById("areaTexto");
		  var campoItens=document.getElementById("itens");
		  
		  var posicaoSelecionada = campoItens.selectedIndex;
		  
		  var novoTexto = campoItens[posicaoSelecionada].text;
		  
		  campoAreaTexto.value = campoAreaTexto.value + "\n" + novoTexto;
		  
		}
	  
	</script>
</head>
<body>
		<br/>
		<form>
			<input id="item" type="text" value="Digite algo!" />
			<input type="button" value="Adicionar Item" onClick="adicionarItem()"/>
			<br/>
			<select id="itens" onchange="adicionarTexto()">
			  <option>Item Inicial</option>
			</select>
			<br/>
			<textarea id="areaTexto" rows="20" cols="30"></ textarea>
		</form>
	</body>
</html>

Termo de uso

arrow_back Aula 11 - JavaScript: Acessando Objetos - Parte 2

Biblioteca de objetos de JavaScript

Objetos DOM HTML

Select e TextArea

Aula 11 - JavaScript: Acessando Objetos - Parte 2