Nesta div nós não vamos colocar ID abrimos a div precisamos fechar então menor barra div e fecha com maior e dentro desta div sem ID nós vamos colocar TR dives uma para o título outra para o corpo e outra para o rodé da mensagem então menor objeto di ID igual e abre e fecha aspas duplas eu.
Vou chamar esta div de título msg fora das aspas duplas maior precisamos fechar esta div então menor barra div e fecha com maior para div corpo podemos a div título e agora eu vou alterar o ID para.
Corpo corpo msg Cola mais uma vez depois do corpo nós vamos ter o rodapé rodapé msg colocamos as dives próximo passo é definir o estilo de cada div começando pela div Caixa msg copia o id e acessa ao arquivo estiloe P HTML desce até o final dos códigos coloca um.
Jogo da velha cont v e abre e fecha Chaves e pressiona enter e dentro das chaves comando dis displ do pontos por padrão esta div vai ficar oculta e fecha a linha de código com ponto e vírgula na sequência comando position do pontos Fix e fech linha de código com ponto e.
Rádios Este comando pessoal é para colocar uma borda arredondada dois pontos 7 pixels e ponto e vírgula largura comando wid dois pontos 450 piels ponto e vírgula distância do Topo dois pontos 70 piels ponto e vírgula Deixa eu subir um pouco para facilitar a.
Visualização distância da esquerda comando left dois pontos 275 pixels ponto e vírgula propriedade Z traço index 2is pontos 1 e fecha a linha de código com ponto e vírgula Beleza definimos o estilo da primeira div agora nós vamos referenciar novamente a primeira div então jogo da.
Velha ID da div maior e agora para entrar na segunda div que não tem ID nós vamos Colocar assim comando div abre e fecha Chaves e pressiona enter e dentro das chaves comando background traço color cor de preenchimento dois pontos espaço e agora vocês vão colocar jogo da velha seguido de se FS 1 2 3 4 5 6 Esta.
É a definição da cor branca em HTML e fecha a linha de código com ponto e vírgula na sequência comando margem dois pontos espaço 6 piels e fecho a linha de código com ponto e vírgula Este comando é para colocar texto ou objetos por padrão a seis pixels de todas as.
Margens prosseguindo agora nós precisamos definir o estilo da div título portanto primeiro precisamos referenciar a div caixa msg jogo da velha ID da div maior div para entrar na segunda div maior jogo da velha e aí Precisamos do ID da div título msg copia o ID volta no arquivo de.
Veja Também:
- Pacote de Planilhas de Recursos Humanos 6.0
- Planilha Dashboard de Faturamento e Receitas em Excel
- 12 MODELOS DE CARTAS WORD
Estilo e cola depois do jogo da velha abre e fecha as chaves e pressiona
Enter e dentro das chaves Primeiro Comando vai ser o comando background traço color dois pontos espaço jogo da velha e aí vocês vão colocar 4 FS 2 3 4 e mais dois zeros Esta é a definição da cor amarela e fecha a linha de código com ponto e vírgula e eu quero.Definir o tamanho da fonte então propriedade ponte traço size dois pontos espaço 22 pixels e ponto e vírgula propriedade paging Pag dois pontos espaço 10 pixels ponto e vírgula cor do texto propriedade color dois pontos eu vou colocar jogo da velha 00er são TR zeros pessoal e fecha linha de código com ponto e.
Vírgula próximo passo é definir o estilo do corpo da mensagem então primeiro precisamos referenciar a caixa msg para facilitar podem Copiar esta parte copia e cola espaço coloca um jogo da velha volta no arquivo for HTML e copia o ID da.
Div copia o ID volta no estilo e cola depois do jogo da velha abre e fecha a Chaves e pressiona enter e dentro das chaves background traço color dois pontos espaço jogo da velha e agora vocês vão colocar 41 69 E1 Esta é a definição da cor azul forte e fecha a linha de código com ponto e.
Vírgula prosseguindo agora eu vou definir que eu quero o texto desta div Central então propriedade text traço align dois pontos comando Center e ponto e vírgula tamanho da fonte propriedade fonte traço size dois pontos espaço 15 pixels ponto e vírgula cor do texto comando Color dois.
Pontos jogo da velha e TR FS e fecha a linha de código com ponto e vírgula e por fim precisamos definir o estilo do rodapé da mensagem então podem Copiar esta parte copia e cola logo abaixo coloca um jogo da velha e agora precisamos do ID da div copia o ID volta no código e cola depois do jogo.
Da velha abre fecha as chaves e pressiona enter e dentro das chaves background traço color dois pontos jogo da velha e agora vocês vão colocar 41 69 e 1 Esta é a definição da cor azul forte e fecha a linha de código com ponto e vírgula e eu quero o texto Centralizado então propriedade text align dois pontos espaço comando Center.
E ponto e vírgula propriedade paging dois pontos espaço 10 pixels e ponto e vírgula esta propriedade pessoal serve para colocar uma distância do texto em relação às margens definido o estilo das dives da caixa de mensagem agora nós precisamos fazer uma função para exibir a caixa de mensagem e também referenciar todas as.
Dives Então agora vocês vão acessar o arquivo for TR JS HTML e acima da função caixa alta Primeiro passo é referenciar as divis Então vai primeira div vai ser a div caixa msg vai ser igual a document p get get Element get.
Element by bem com calma by
ID abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e fecha a linha de código com ponto e vírgula e dentro das aspas duplas vai o ID da div então acessem o arquivo for HTML e copia o ID da div caix.Msg volta no código e cola dentro das aspas duplas para as demais dives podemos reaproveitar esta linha de código e cola e agora eu vou referenciar a div título msg arquivo form copia o ID da div volta no código e altera dentro das.
Aspas duplas podem Copiar esta linha de código e agora vai ser o corpo da mensag então eu vou chamar esta variável de corpo msg arquivo for copia o ID da div volta no código e altera dentro das aspas duplas copia a linha de código e agora.
Vai ser o rodapé rodapé msg arquivo for copia o ID da div volta no código e altera dentro das aspas duplas referenciamos as dives agora nós precisamos fazer um botão de comando para fechar a caixa de.
Mensagem primeiro nós vamos definir o estilo e depois definir a fonte então var eu vou chamar esta variável de estilo vai ser igual e abre e fecha aspas simples deixa eu colocar esta função mais para baixo que vai ficar mais limpo a visualização e dentro das ASP simples.
Nós vamos colocar o comando Style passo igual espaço e abre e fecha aspas duplas e dentro das aspas duplas vocês vão colocar o comando cursor dois pontos espaço Pointer para colocar o ícone de mãozinha quando o usuário parar o cursor sobre o botão ponto e vírgula espaç.
E agora nós vamos colocar uma cor de preenchimento que é o comando background traço color traço color dois pontos espaço eu vou colocar Orange que é laranjado e fecho a linha de código com ponto e vírgula próximo passo é definir o estilo da fonte Então vai.
Fonte vai ser igual e abre e fecha aspas simples precisa ser aspas simples e dentro das aspas simples primeiro eu vou definir que eu quero o título do botão de comando em então menor tag B maior para fechar a tag B menor barra.
Tag b e fecha com maior e dentro da tag B nós vamos colocar a tag fonte então menor comando fonte espaço color para definir a cor do texto espaço igual e abre e fecha aspas duplas e dentro das aspas duplas comando Black para definir o texto como sendo.
Preto fora das aspas duplas comando size para definir o tamanho da fonte espaço igual abre e fecha aspas duplas e dentro da aspas duplas 5 piels fora das aspas duplas vocês vão fechar com maior e aí vem o texto do título no nosso caso vai ser fechar .
Preciso fechar a tag fonte então menor barra tag fonte e fecha com maior desta forma definimos o estilo do texto do título do botão de comando e fecha a linha de código com ponto e vírgula defini o estilo e a Fonte agora eu vou desenhar o botão de comando Vai Eu Vou Chamar esta variável de btn.
Fechar vai ser igual novamente a abre e fecha aspas simples precisa ser pessoal aspas simples e dentro das aspas simples menor comando Button Button espaço evento on Click igual e abre e fecha aspas duplas e dentro das aspas duplas vai o.
Nome da função que vai ser acionada nós vamos fazer uma função chamada fechar abre e fecha parênteses e fora das aspas duplas vocês vão fazer o seguinte deixa me ver agora pessoal é fora das aspas simples Mais e aí nós vamos colocar a variável estilo copia e cola mais abre e fecha aspas simples e dentro.
Das aspas simples maior para fechar esta primeira parte do objeto Button fora das aspas simples mais e agora vem a variável fonte copia e cola fonte Mais e aí preciso fechar o objeto Button Então abre e fecha aspas simples e dentro das aspas simples menor barra objeto Button e fecha com.
Maior e fecha a linha de código com ponto e vírgula beleza fizemos o botão fechar agora nós precisamos fazer esta função a função fechar podem copiar o nome da função function fechar abre e fecha Chaves e pressiona enter e dentro desta função nós vamos referenciar a div caixa.
Msg copia a variável Caixa isg P Style pon display display igual abre e fecha aspas duplas e dentro das aspas duplas comando None para ocultar a div caixa msg e fecha a linha de código com ponto e vírgula próximo passo é fazer uma função.
Para montar a caixa de mensagem function eu vou chamar Esta função de caixa msg msg box abre e fecha parênteses e dentro dos parênteses variável M fora dos parênteses abre e fecha a Chaves e pressiona enter e dentro desta função Primeiro passo é exibir a div.
Caixa msg copia o nome da variável caixa msg P Style Style P display igual abre e fecha aspas duplas e dentro das aspas duplas comando Block e fecha a linha de código com ponto e vírgula próximo passo é colocar o texto.
Do título da mensagem então agora nós vamos trabalhar com a variável título msg copia a variável e cola título msg piner iner HTML vai ser igual e abre e fecha aspas duplas eu vou colocar no título o texto aviso e fecha a linha de código com ponto e vírgula na sequência Precisamos do corpo.
Da mensagem variável corpo msg copia e cola na função Caixa msg Box corpo msg piner HTML vai ser igual a variável M que vai estar com o texto para o corpo da mensagem e fecha a linha de código com ponto e vírgula e por fim nós precisamos.
Do rodapé da mensagem copia a variável e cola na função caixa msg box roda pé msg pon iner HTML vai ser igual e no rodapé nós vamos colocar o btn fechar podem copiar a variável btn.
Fechar e colar depois do sinal de igual e fecha a linha de código com ponto e vírgula show de bola pessoal desenhamos a caixa de mensagem no entanto pessoal tem mais um detalhe no botão limpar eu quero solicitar para o usuário uma confirmação porque pode acontecer de o usuário clicar por engano no botão limpar e limpar todos os registros da.
Tabela HTML então nós precisamos de mais uma msgbox Primeiro vamos referenciar o btn limpar então document.get getelement by ID abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai o ID do botão limpar então acessem o arquivo.
For. HTML localiza o botão limpar e copia o ID copia o ID volta no código e cola dentro das aspas duplas fora dos parênteses ponto bem com calma agora addd event listener listener cuidem que o e e o l são em.
Caixa alta abre e fecha parênteses e dentro dos parênteses abre e fecha aspas duplas e dentro das aspas duplas evento clique fora das aspas duplas vírgula vem o nome da função que vai ser acionada nós vamos fazer uma função chamada msg box com confirmar e fecha a linha de código com ponto e.
Vírgula próximo passo é fazer esta função podem copiar o nome function msg Box confirmar abre e fecha parênteses e abre e fecha Chaves e pressiona enter deixa eu dar uma ajustada e dentro desta função Primeiro passo é exibir a div caixa msg para facilitar podemos copiar estas.
Duas linhas de código até podemos copiar estas três copia e cola dentro da função msg Box confirmar exibe AD caixa msg título da mensagem e agora no corpo eu vou colocar o texto para exibição abre e fecha ch aspas duplas e eu vou perguntar.
Deseja realmente limpar ponto de interrogação e agora pessoal nós precisamos fazer dois botão de comando um btn sim e outro btn para o não para facilitar nós vamos fazer o seguinte Deixa me ver vamos copiar estas três linhas de código nós vamos ajustar vai ser mais.
Fácil copia Cola dentro da função msgbox confirmar então estilo Style cursor Pointer cor de preenchimento agora eu vou alterar para Green que é verde gruen Opa precisa ser em caixa baixo gruen cor verde e a Fonte vamos ver se.
