Languages
[Edit]
DE

JavaScript - Math.tan() Methode - Beispiel

3 points
Created by:
Nikki
8330

Math.tan() ist eine statische Methode, die nur einen Parameter akzeptiert und den approximierten Wert der mathematischen Tangentfunktion zurückgibt.

// ONLINE-RUNNER:browser;

console.log( Math.tan( 0                  ) ); //     0 <-    0 Grade
console.log( Math.tan( 0.7853981633974483 ) ); //    ~1 <-  ~45 Grade ==  PI / 4
console.log( Math.tan( 1.5707963267948966 ) ); // ~+Inf <-  ~90 Grade ==  PI / 2

console.log( Math.tan(-0.7853981633974483 ) ); //   ~-1 <- ~-45 Grade == -PI / 4
console.log( Math.tan(-1.5707963267948966 ) ); // ~-Inf <- ~-90 Grade == -PI / 2

Hinweis: 0.9999999999999999, 16331239353195370, -0.9999999999999999 und -16331239353195370 sollen gleich 1, +Inf, -1 und -Inf sein, sie sind jedoch nicht auf einen Fehler bei der Unterbrechungsgenaigkeit zurückzuführen.


1. Dokumentation

SyntaxMath.tan(number)
Parameternumber - Ganzzahl oder Gleitkommazahl im Radiant (primitiver Wert).
Ergebnisnumberwert berechnet als mathematische Funktion tan(x) (primitiver Wert).
BeschreibungMath.tan() ist eine statische Methode, die nur einen Parameter akzeptiert und den approximierten Wert der mathematischen Tangentfunktion zurückgibt.

2. Arbeit mit Radiant

// ONLINE-RUNNER:browser;

var x1 = 0.0;          // Berechnungsbeginn im Radiant
var x2 = Math.PI / 2;  // Berechnungsende im Radiant

var dx = Math.PI / 36; // Berechnungsschritt im Grad
for (var rad = x1; rad <= x2; rad += dx) {
  	var y = Math.tan(rad);
  
	console.log('tan(' + rad + ' rad) = ' + y);
}

3. Arbeit mit Grade

// ONLINE-RUNNER:browser;

function calculateTan(deg) {
	var radians = (Math.PI / 180) * deg;
  
  	return Math.tan(radians);
}

// Beispiel:

var x1 = 0.0;  // Berechnungsbeginn im Grade
var x2 = 90.0; // Berechnungsende im Grade

var dx = 5.0;  // Berechnungsschritt im Grad

for (var deg = x1; deg  <= x2; deg  += dx) {
	var y = calculateTan(deg );
  
  	console.log('tan(' + deg + ' deg) = ' + y);
}

4. Umgekehrtes Canvas-Diagramm - Beispiel

// ONLINE-RUNNER:browser;

var x1 = -3.14 * 2; // Beginn des Sinuscharts
var x2 = +3.14 * 2; // Ende des Sinuscharts
var y1 = -4.0;
var y2 = +4.0;

var xSteps = 60;
var ySteps = 60;

var dx = (x2 - x1) / xSteps; // Schritt der x-Achse
var dy = (y2 - y1) / ySteps; // Schritt der y-Achse

function printLine(y1, y2, character) {
	var line = '';
  
  	for(var y = y1; y < y2; y += dy) {
    	line += ' ';
    }
  
    console.log(line + character);
}

for (var rad = x1; rad < x2; rad += dx) {
  	var y = Math.tan(rad);
  
  	if (y <= y1 || y >= y2) {
        console.log(' ');
    } else {
    	printLine(y1, y, '+');
    }
}

5. Canvas-Diagramm - Beispiel

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style> #canvas { border: 1px solid black; } </style>
</head>
<body>
  <canvas id="canvas" width="150" height="400"></canvas>
  <script>
    
    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext('2d');

    // tangent chart range
    var x1 = -Math.PI / 2; // -90 Grade
    var x2 = +Math.PI / 2; // +90 Grade
    var y1 = -10.0;
    var y2 = +10.0;

    var dx = 0.05;

    var xRange = x2 - x1;
    var yRange = y2 - y1;
    
    var yScale = 1.0;

    function calculatePoint(x) {
      var y = Math.tan(x) * yScale;

      // Chart wird aufgrund von umgekehrten Canvas-Pixelsn horizontal umgekehrt

      var nx = (x - x1) / xRange;       // normaliziertes x
      var ny = 1.0 - (y - y1) / yRange; // normaliziertes y
      
      var point = {
        x: nx * canvas.width,
        y: ny * canvas.height
      };

      return point;
    }

    console.log('x range: <' + x1 + '; ' + x2 + '> // angles in radians');
    console.log('y range: <' + y1 + '; ' + y2 + '>');

    var point = calculatePoint(x1);
    
    context.beginPath();
    context.moveTo(point.x, point.y);

    for (var x = x1 + dx; x < x2; x += dx) {
      point = calculatePoint(x);
      context.lineTo(point.x, point.y);
    }

    point = calculatePoint(x2);
    context.lineTo(point.x, point.y);
    context.stroke();

  </script>
</body>
</html>

Siehe auch

  1. JavaScript - Math.atan() Methode - Beispiel
  2. JavaScript - Math.atan2() Methode - Beispiel

Literaturverzeichnis

  1. Trigonometrische Funktion - Wikipedia

JavaScript - Objekt Math (DE)

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join