Formulare Web ,CSS,Javascript


TRECE UN NUMAR IN BAZA 2 din baza 10



Vom scrie codul de mai jos in NOTEPAD si il salvam ALL Files si intre paranteze scriem :"baza2.html"

<style>
form {
  border-radius: 25px;
    border: 2px solid #831bc1;
    padding: 20px;
    width: 200px;
    height: 150px;
}
body {
   border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 800px;
    height: 800px; }
hr { width:200px;height:20px;color:yellow;}
</style>

<body BGCOLOR="#99cc00">
<marquee>Transforma din baza 2 in baza 10 </marquee>
<H1>Scrie n si apasa pe buton  </H1>

<script language="javascript">
function baza2()
{
  var n,n1,aux,nr,  s, i;

//n e numarul , nr e rezultatul , 2-baza, n1-catul la imp la 2
//aux-e nr scris invers
n=eval(document.getElementById("numar").value);
document.writeln(n," este numarul introdus si in baza 2 este<hr><br> ");
n1=n;s="";
while(n>0){ document.writeln("o cifra este  ",n%2,"<br>");
s=String(n%2)+s;
n=Math.floor(n/2);
}
alert(String(n1)+" scris in baza 2 este "+s);
}
</script>
<form>
<p>
<font color = #60605e><label> dati n </label>
<input type="text" value="0"id="numar">
</font>
</p>
<input type = "button" value = "Transforma in baza 2 " Onclick="baza2(this)">
<hr>
</form>
</body>

Pentru a calcula factorialul avem o variantă a acestui cod 

<style>
form {
  border-radius: 25px;
    border: 2px dotted #831bc1;
    padding: 20px;
    align-items:center;
    width: 200px;
    height: 150px;
}
body {
   border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 800px;
    height: 800px; }
hr { width:200px;height:20px;color:yellow;}
</style>

<body BGCOLOR="#99cc00">
<marquee>Calculeaza factorialul </marquee>
<H1>Scrie n si apasa pe buton  </H1>

<script language="javascript">
function f()
{
  var n,i,aux,nr,  p, i;

//n e numarul 
n=eval(document.getElementById("numar").value);
document.writeln(n," este numarul introdus si factorialul sau este<hr><br> ");
p=1;
for(i=1;i<=n;i++) { 
p=i*p;

}
alert(String(n)+"  are factorialul  "+p);
document.writeln(p);
}
</script>
<form>
<p>
<font color = #60605e><label> dati n </label>
<input type="text" value="0" id="numar">
</font>
</p>
<input type = "button" value = "calculeaza factorial " Onclick="f(this)">
<hr>
</form>
</body>

OBSERVATIE - functiile baza2 si f sunt declarate fără parametrii formali și cu toate acestea sunt apelate cu parametrul actual this.
This este un cuvânt cheie care în javascript , în acest context leagă efectiv codul funcției de datele preluate din formular . Vedem că se preiau date din formular cu instrucțiunea GetElementById.

Functia lui Fibonacci in varianta recursiva 

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Exercițiu: Factorial</title>
    <style>
        form {
            border-radius: 25px;
            border: 2px solid #831bc1;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        body {
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 20px;
            width: 800px;
            height: 800px;
            background-color: #99cc00;
        }
        hr {
            width: 200px;
            height: 20px;
            color: yellow;
        }
    </style>
</head>
<body>
    <marquee>Calculeaza factorial</marquee>
    <H1>Scrie n și apasă pe buton</H1>

    <script language="javascript">
        function factorial(n) {
            if (n === 0 || n === 1) return 1;
            return n * factorial(n - 1);
        }

        // Obținerea valorii de la utilizator
        function calculateFactorial() {
            var numarInput = document.getElementById("numar");
            var n = parseInt(numarInput.value);

            if (isNaN(n) || n < 0) {
                alert("Vă rog introduceți un număr natural.");
                return;
            }

            var result = factorial(n);
            document.getElementById("result").textContent = "Factorialul lui " + n + " este: " + result;
        }
    </script>

    <form>
        <p>
            <font color="#60605e">
                <label>dati n</label>
                <input type="text" value="0" id="numar">
            </font>
        </p>
        <input type="button" value="calculeaza factorial" onclick="calculateFactorial()">
        <hr>
    </form>

    <div id="result"></div>
</body>
</html>



Un comentariu: