Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Javascript

1.  Grundbegriffe


1.1  Integrieren in html

in header:

<script language="JavaScript1.2" type="text/javascript">
...
</script>

1.2  Ausgabe

Runden

document.form.ComplementLumin.value=custRound(CmpL,0);

function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)

Math.round(x);

Alert

Ausgabe eines Hinweises (z.B Fehlermeldung)

alert("Hinweis");

html direkt

document.write("Hallo User! <br>");
document.write(321);
document.write("Verwendung eines HTML-Tags: <br><br><br>");
document.write("<br>"); 

    

Form

Hcl °

<form name="form" id="form" style="font-size: 8pt">
Hcl <input type="Text" name="ComplementLumin" id="ComplementLumin" size="3" readonly style="background-color:#eeffee">°
</form>

1.3  Kommentare

// ich bin ein Kommentar
        /*
        Mehrzeiliger
        Kommentar
        */

1.4  Variable

var meine_variable = "text <br>";
document.write(meine_variable);
meine_variable = "anderer Text ";
document.write(meine_variable);

text
anderer Text

var meine_variable = prompt("Bitte etwas eingeben", "Hier Wert eingeben");
document.write("Es wurde eingegeben: ");
document.write(meine_variable);   

    

Es wurde eingegeben: Hier Wert eingeben

1.5  Eingaben / Ausgaben

Prompt:

prompt(aufforderung, vorbelegung);

Aus "button", Ausgabe "alert":

<input type="button" name="button" style="font-size: 8pt;" value="Prova" onClick=alert("funziona")>

Tonalità

<head>
...
var Clr = eval(document.form.Clr.value)
...
</head>
<body>
...
<form name="form" id="form" style="font-size: 8pt">
<input type="Text" name="Clr" size="3"><b>Tonalità</b>
</form>
...
</body>

Aus "input" mit erzwingen von Zahlenwerten

var Name = 1*(document.NameForm.Name.value);

Mit Ausgabe in "input":

document.modulo.NameForm.Name.value = custRound(Name,ZiffernRundung);

Und Rundung global:

function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}

1.6  Operatoren

5
11
-1
30
0.8333333333333334
Erster Teil, zweiter Teil!

// Operatoren
var s;
var a = 5;
var b = 6;
document.write(a);
document.write("<br>");
// Addition
s = 3 + 4;
s = a + b;
document.write(a + b);
document.write("<br>");
// Subtraktion
s = 3 - 2;
s = a - b;
document.write(a - b);
document.write("<br>");
// Multiplikation
s = 3 * 5;
s = a * b;
document.write(a * b);
document.write("<br>");
// Division
s = 6 / 3;
s = a / b;
document.write(a / b);
document.write("<br>");
// Zeichenketten verknüpfen
s = "Erster Teil, " + "zweiter Teil!"
document.write(s);

1.7  Logik

Normale Zahlenspiele

Zahl1 plus Zahl2: 16
Zahl1 mal Zahl2: 63
Zahl1 minus Zahl2: -2

Die Schleife
Durchlauf 1
9
Durchlauf 2
9
Durchlauf 3
9
Durchlauf 4
9
Durchlauf 5
9
Durchlauf 6
9
Durchlauf 7
9

Beispiel:

// Zahlen holen
                    var s = prompt("Bitte erste Zahl eingeben", 4);
                    var t = prompt("Bitte eine andere Zahl eingeben", 5);
                    // Was ist denn das?
                    if (s == t)
                    {
                        // Wenn s gleich t...
                        // Achtung: kein normales Gleichzeichen in der if-Anweisung...

                        alert("Die Zahlen mussten unterschiedlich sein. Nun ist es vorbei!");
                    }
                    else
                    {
                        // Wenn s ungleich t...
                        // Eine schöne Meldung:
                        alert("Cool! Zahlenspielereien beginnen!");

                        document.write("<b>Normale Zahlenspiele</b> <br><br>");

                        // Verwende verschiedene Operatoren: +, -, *
                        document.write("Zahl1 plus Zahl2: ");
                        document.write(s*1 + t*1); // Trick, damit die beiden Variablen nicht verkettet, sondern addiert werden
                        document.write("<br>");

                        document.write("Zahl1 mal Zahl2: ");
                        document.write(s*t);
                        document.write("<br>");                    

                        document.write("Zahl1 minus Zahl2: ");
                        document.write(s-t);
                        document.write("<br>");                

                        document.write("<br><b>Die Schleife</b> <br><br>");

                        // Jetzt wird's komplizierter
                        // Gebe Zahl1-mal Zahl2 aus
                        // Wenn also Zahl1 gleich drei ist, wird dreimal der Wert von Zahl2 ausgegeben
                        for(var i =1; i <= s; i++)                                    
                        {
                            // Verwendung des +-Operators zur Verkettung von einer Zeichenkette mit einer Zahl
                            document.write("Durchlauf "+i+"<br>");
                            document.write(t);
                            document.write("<br><br>");
                        }
                    }

                   

1.8  Farbvariablen in Tabelle

OnMouseOver

Clr
Cmpl
Cmpf
<head> <script>
Clr="#ffff00"; Cmpl="#0000ff"; Cmpf="#750073";
</script> </head>
<body>
<table border=1 style="font-size:10px; color:gray;">
<tr><td width="50" onMouseOver='this.bgColor=Clr'>Clr</td></tr>
<tr><td width="50" onMouseOver='this.bgColor=Cmpl'>Cmpl</td></tr>
<tr><td width="50" onMouseOver='this.bgColor=Cmpf'>Cmpf</td></tr>
</table>
</body>

2.  Esempio "percentuale"

Esempio percentuale
Totale gr Parziale gr

Percentuale %

<head>
<title>Esempio percentuale</title>
<script language="JavaScript1.2" type="text/javascript">
function percentuale() {
var Totale = 1*(document.modulo.Totale.value);
var Parziale = 1*(document.modulo.Parziale.value);
var Percentuale = Parziale/Totale*100;
document.modulo.Percentuale.value = custRound(Percentuale,2);
}
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
function resetForm(){
document.modulo.reset();
}
</script>
</head>
<body>
<form name="modulo" id="modulo" style="font-size: 8pt">
<input type="Text" name="Totale" size="3"><b>Totale</b> gr
<input type="Text" name="Parziale" size="3"><b>Parziale</b> gr<br />
<input type="button" name="button" style="font-size: 8pt;" value="esegui" onClick="percentuale()">
<input type="button" style="color: gray;" value="cancella" onClick="resetForm()"/><br />
<input type="Text" name="Percentuale" size="5"><i>Percentuale</i> %
</form>
</body>

3.  Funktionen

3.1  Gradrechnungen

Summen

var alfa1
var alfa2
var sumalfa = if alfa1 + alfa2 < 360 {alfa1+alfa2} else {alfa1+alfa2-360};

alfa1 alfa2

Differenz

zwei mögliche Werte. Der kleinere ist:
var beta1
var beta2
var diffbeta = if abs(beta1-beta2) <180 {abs(beta1-beta2)} else {abs(beta1-beta2)-180}

Mittelwert

zwei mögliche Werte:

3.2  Applicazioni

Complemento cromatico luminoso

Essendo stufo delle solite funzioni note in merito ho fatto una per me meno enigmatica.
Si basa sul fatto, che il complemento a un colore in notazione hex# si può determinare sottraendo cifra per cifra dal valore "f" (=15).

Colore a complemento

In JavaScript è realizzabile senza dover fare dei calcoli esadecimali p.es. in seguente modo:

  • far entrare il valore esadecimale del colore (x) come sequenza di 6 lettere
  • estrarre le sei singole lettere "xi" con un "loop" for(i=0;i<6;i++){} e
  • trasformarli con la funzione di abbinamento "switch" in "yi" case "0": y=("f"); ... case "f": y=("0");
  • aggiungendole lettera per lettera al valore "(ys)" per il complemento e alla fine
  • far vedere "(x)" come valore per il colore e "(ys)" come valore per il complemento.

Cliccando sul pulsante a fianco Clr → Cmpl succede proprio questo. Per chi intende a usare il programmino altrove, eccolo:

	<head>
		<title>Colore a complemento</title>
		<script type="text/javascript">
			function ComplementoL() {
			var x=""
			var y = ""
			var ys = ""
			x = window.prompt();
			document.write("Clr#" + x + " &rarr; ");
			for(i=0;i<6;i++){
			switch (x.substring(i,i+1)) {
case "0": y=("f"); break; ... case "f": y=("0"); break; 
default : y=(" cifre non identificabili!"); break;
			}
			ys = y + ys
		}
  			if (x.length != 6) {
    		alert("ci sono " + x.length + " cifre invece di 6!"); }		
		document.write("Cmpl#" + ys + "<br>");
		}
		</script>
	</head>
	<body>
		<form  name="" id="">
			<input type="button" name="" value="Clr&rarr;Cmpl" onCLick="ComplementoL()" />
		</form>
	</body>






Edit - History - Print - Recent Changes - Search
Page last modified on November 24, 2013, at 10:04 AM