Parte da linguagem javaScript que descreve os objetos do browser. Através do Bom pode-se acessar as propriedades e as funções do browser. O bom não esstá previsto nas ecmas script e em nenhuma especificação, w3c por exemplo. No entanto é implementado na maioria dos navegadores. Vários desenvolvedores javaScript vêm desenvolvendo scrips baseados no bom. Muitas de suas funcionalidades tem equivalentes na API DOM. Se a função for equivalente em ambas bibliotecas é interessante usar o DOM. Como ele não tem especificações para definir um padrão exato é melhor usar uma API padronizada. Todas as implementações javaScript que seja para o bom, ficará a critério dos fabricantes de browsers. É necessário cautela ao usar o bom.
O acesso é feito através do objeto window.
Neste objeto existem funções que auxiliam na criação de janelas (janelas do documento web), funções para criar uma janela de alerta, um prompt para criar uma janela de confirmação, funcionalidades para criação de temporizadores (de tanto em tanto tempo, uma determinada ação javaScript deverá acontecer).
O acesso aos documentos também é feito através do objeto window.
Dentro de documento pode-se acessar os formulários Html, gravar informações para usar posteriormente, depois de fechar o navegador pode-se acessar informações que ficaram gravadas no computador através dos cookies.
É também através do objeto window que os links são acessados.
As imagens assim como os links, são acessadas pelo objeto window.
Como alterar um Html na página, com o innerHTML, recurso implementado pelo fabricante de browser. Existe na Api DOM, várias funcionalidades para se criar novos conteúdos Html dentro do documento.
Lembrete:Esta propriedade é uma implementação dos browsers e começou com o I.E sendo que a microsoft quis registrar como patente mas os outros browsers seguiram o exemplo e implementaram também. No entanto, deve-se usar as funções da API DOM.
No Html:
<h1 id="teste">BOM
<small>(Browser Object Model)</small></h1>
Na folha de estilo:
#teste{
color: orange;
text-align: center;
font-size:1em;
font-weight: 700;
width:35%;
margin: 0 auto;
border: 1px dotted black;
background-color: yellow;
box-shadow: 1px 2px 1px 2px #686868;/*o 1º número é da sombra direita, o 2º da parte debaixo*/
border-radius: 8px; /*deixa a borda da caixa (div) arredondada*/
-moz-border-radius:8px; /*deixa as bordas arredondadas*/
-webkit-border-radius:8px;/*para que funcione em outros navegadores*/
}
No javaScript:
/*autor : Maria Adalgisa de Souza
descrição : BOM BROWSER OBJECT MODEL*/
window.onload = function(){
alert("Criando uma função");
document.getElementById("teste").innerHTML="<h1>Alterando o html utilizando innerHTML</h1>";
Dentro do objeto window está o objeto navigator (onde estão as informações do navegador utilizado, Sistema Operacional.) Poderia ser acessadado seguinte forma:
No javaScript:O objeto location informa a localização, o servidor, protocolo, a página acessada, se a página estiver sendo acessada com uma âncora interna, através do objeto location obtém-se este acesso, a porta que está sendo usada.
No javaScript:No objeto screen estão armazenadas informações sobre a largura da tela,a largura do browser, sua posição na tela
No javaScript:
window.onload = function(){
alert(screen.width);
alert(screen.height);
}
Resultado do I.E: 1366, 768
Resultado do firefox: 1252, 704
Resultado do Chrome: 1366, 768
Em history obtém-se informações das páginas que foram acessadas, voltar no histórico da página,
andar para frente e para trás na página acessada, no histórico de navegação.
No javaScript:
window.onload = function(){
history.go(-1);
}
Resultado: volta 1 página no histórico de navegação.
Na w3shools existe referência ao
objeto window, com informações mais detalhadas.
Obs:Pode-se acessar as propriedades e funções do objeto window, através da ferramenta firebug, do firefox.
No javaScript:
window.onload = function(){
alert("Criando uma função");
}
Resultado: Criando uma função.
No javaScript:
window.onload = function(){
confirm("Você quer uma passagem?");
}
Resultado:/*janela de corfirmação com opção de ok e cancelar*/
No javaScript:
window.onload = function(){
confirm("Você quer uma passagem?");
prompt("Qual a matéria escolar que você acha mais fácil?");
}
Resultado:/*janela para dar uma resposta a uma pergunta com opções de ok e cancelar*/
As janelas pop-ups são criadas com a função open
No javaScript:
window.onload = function(){
window.open("javaScript.html", "aula", "width=400, height=500, toobar=no, location=no");
}
As janelas pop-up devem ser usadas com cuidado, porque no passado os programadores utizaram-nas em excesso
e hoje praticamente todos os browsers, já vêm com a opção de desabilitá-las por default (padrão). Na
w3shools existe referência a
função open, que mostra todas as propriedades desta função. Exempo:width, height, toobar, location, etc.
Mais uma característica importante do Bom é manipular janelas.
No javaScript: