Websites – Synchronous Script – Dinamic HTML – Javascript – Linux

Publicado: 6 de junho de 2014 em JavaScript

Quando o Javascript foi criado ainda não existia uma API para manipular a estrutura de um documento HTML e o único método disponível para alterar um documento dinamicamente era utilizando códigos Javascript para escrever tags HTML enquanto a pagina fosse carregada.

Quando um script passa texto para a instrução document.write (), o texto é adicionado ao documento, e o analisador de HTML se comporta como se o elemento de script tivesse sido substituído por esse texto. Está pratica não é mais considera um bom estilo de programação, porem ainda é funcional e possui importantes implicações.

Se o interpretador de HTML encontrar um elemento <script>, deve, por padrão, executar o script antes de poder analisar o restante do documento. Está técnica não oferece problemas quando você utiliza scripts de um modo procedural. Este modo de execução de scripts é o padrão e é chamado de modo síncrono.

Html - Dinâmico

Html – Dinâmico

Exemplo:

Neste exemplo criamos uma tabela HTML em tempo de execução utilizando o modo síncrono do interpretador do browser.

Html / JavaScript

<!DOCTYPE html>
<html>
 
<head>
   <title>Desenvolvimento Aberto</title>
</head>
 
<body>
 
<h2>Desenvolvimento Aberto</h2>
<h3>Javascript - WebBrowser - HTML Din&#226mico</h3>

<pre>

<script>
// Cria função
function factorial(n) 
{
   if (n <= 1) return n;
   else return n*factorial(n-1);
}

// Escreve tags html dinamicamente
document.write("<table border="1">");
document.write("<tr><th>Valor</th><th>Numero</th><th>Fatorial</th></tr>");

// Cria conteudo da tabela
for(var i = 1; i <= 10; i++) 
{ 
    document.write("<tr><td>Valor = </td><td>" + i + "</td><td>" + factorial(i) + "</td></tr>");
}

// Fecha tag html
document.write("</table>"); 
document.write("\nCriado em: " + new Date());
</script>
</pre>
 
</body>
 
</html>
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s