Um belo script

Solução de uma equação do segundo grau.

Digite os valores dos coeficientes:

x² + x + = 0

Pensei bastante se começava com todo aquele papo teórico sobre algoritmos e fundamentos da programação e blá, blá, blá... Mas, na boa, não é isso que fará você se interessar pelo assunto. Então vou mostrar um script que demonstre um certo potencial do JS.

Aqui temos algo mais avançado que, talvez, você não entenda agora, mas, aos poucos, irá entender. Prometo ir decifrando cada parte, de acordo com os passos que daremos mais à frente. Esse script resolve uma equação do segundo grau completa (ou incompleta, se zerar alguns coeficientes), utilizando um formulário HTML e os recursos de CSS.

Deixo claro aqui que esta não será a nossa forma padrão de trabalhar nos primeiros scripts do "mão na massa", mas só uma amostra de onde queremos chegar. E podemos ir (e iremos) muito mais além, nos aventurando pelos recursos avançados do JS. Dentre essas aventuras, exploraremos a API Canvas e a linguagem Web GL, trabalhando com gráficos matemáticos. Neste trabalho, nos limitaremos à Matemática, porém, você pode alçar vôos muito maiores nessa imensidão, que é programar.

O JavaScript (dinâmica):

function mais(n) { //põe o sinal de + na frente do número
    return (n >= 0 ? '+' : '') + n;
}
function limpar() {
    document.getElementById("coef_a").value="";
    document.getElementById("coef_b").value="";
    document.getElementById("coef_c").value="";
    document.getElementById("resp").innerHTML="";
    document.getElementById("coef_a").focus();
}
function solucao() { //calcula as raízes da equação
    var a = document.getElementById("coef_a").value;
    var b = document.getElementById("coef_b").value;
    var c = document.getElementById("coef_c").value;
    var resp ='';
    var x1 = 0;
    var x2 = 0;
    var delta = b ** 2 - 4 * a * c;
    if (a == "" | b == "" | c == "") {
        window.alert("Não deixe campos em branco!");
    } else if (a == 0) {
        window.alert("O coeficiente a não pode ser zero!");
    } else {
        if (delta == 0) {
            x1 = -b / (2 * a);
            resp = "A equação <b>" + a + "x²" + mais(b) + "x" + mais(c) + "=0</b> possui uma raiz: <br>" + x1;
        } else if (delta > 0) {
            x1 = (-b + Math.sqrt(delta)) / 2 * a;
            x2 = (-b - Math.sqrt(delta)) / 2 * a;
            resp = "A equação <b>" + a + "x²" + mais(b) + "x" + mais(c) + "=0</b> possui duas raízes: <br>" + x1 + " e " + x2;
        } else {
            resp = "A equação <b>" + a + "x²" + mais(b) + "x" + mais(c) + "=0</b> não tem solução real.";
        }
    }
    document.getElementById('resp').innerHTML = resp;
}

O Formuláro (estrutura):

<form>
		<h2>Solução de uma equação do segundo grau.</h2>
		<h3>Digite os valores dos coeficientes:</h3>
		<div>
			<input id="coef_a" type="number" autofocus>x² +
			<input id="coef_b" type="number">x +
			<input id="coef_c" type="number"> = 0
		</div>
		<div>
			<input type="button" onclick="solucao();" value="Solução">
			<input type="button" onclick="limpar();" value="Limpar">
		</div>
		<div id="resp"></div>
</form>

O CSS (beleza):

form {
    background-color: moccasin;
    max-width: 500px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto;
}
form input {
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px 0;
    text-align: center;
    font-size: medium;
}
form input[type=submit] {
    width: 40%;
}
form input[type=number] {
    width: 20%;
}