2021-08-10js note 2

Posted by manlio on Sat, 25 Dec 2021 14:09:29 +0100

Refer to W3School documentation

JavaScript Math object

Math method
1.Math. The return value of round (x) is x rounded to the nearest integer.
2.Math. The return value of pow (x, y) is the y-power of X.
3.Math.sqrt(x) returns the square root of X.
4.Math.abs(x) returns the absolute (positive) value of X.
5.Math. The return value of ceil (x) is the nearest integer rounded on X.
6.Math. The return value of floor (x) is the nearest integer rounded down by X.

<p>Math.floor(x) return x The value rounded down to the nearest integer:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.floor(4.7);
</script>

7.Math.sin(x) returns the sine of angle X (in radians) (a value between - 1 and 1).

<p>Math.sin(x) return x(Sine in radians:</p>

<p>Angle in radians = (Angle in degrees) * PI / 180. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The sine value of 90 degrees is " + Math.sin(90 * Math.PI / 180);
</script>

8.Math.cos(x) returns the cosine of angle X (in radians) (a value between - 1 and 1).

<p>Math.cos(x) return x(Cosine in radians:</p>

<p>Angle in radians = (Angle in degrees) * PI / 180. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The cosine value of 0 degrees is " + Math.cos(0 * Math.PI / 180);
</script>

Math attribute (constant) JavaScript provides eight math constants that can be accessed by math objects:
Math.E / / returns the Euler's number
Math.PI / / return PI
Math.SQRT2 / / returns the square root of 2
Math.SQRT1_2 / / returns the square root of 1 / 2
Math.LN2 / / returns the natural logarithm of 2
Math.LN10 / / returns the natural logarithm of 10
Math.LOG2E / / returns the logarithm of E based on 2 (approximately equal to 1.414)
Math.LOG10E / / returns the logarithm of E based on 10 (approximately equal to 0.434)

JavaScript random

Math.random() and math Used with floor() to return a random integer.

<p>Math.floor(Math.random() * 10) Returns a random integer between 0 and 9 (both inclusive):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10);
</script>

JavaScript logic

JavaScript Boolean (logic) represents one of two values: true or false. You can use the Boolean() function to determine whether the expression (or variable) is true.

<p>display Boolean(10 > 9) Value of:</p>

<button onclick="myFunction()">have a try</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = Boolean(10 > 9);
}
//Return true
</script>

Comparison operator

operatordescribeexample
==be equal toif (day == "Monday")
>greater thanif (salary > 9000)
<less thanif (age < 18)

js comparison

Conditional (ternary) operator

<p>Enter your age and click this button:</p>

<input id="age" value="18" />

<button onclick="myFunction()">have a try</button>

<p id="demo"></p>

<script>
function myFunction() {
  var age, voteable;
  age = document.getElementById("age").value;
  voteable = (age < 18) ? "So young":"Mature enough";
  document.getElementById("demo").innerHTML = voteable;
}
</script>

JavaScript If... Else statement

Use if to specify the code block to execute if the specified condition is true
Use else to specify the code block to be executed if the same condition is false
Use else if to specify the new condition to be tested if the first condition is false
Use switch to specify multiple alternative code blocks to be executed

<p>Click the button to display a time-based greeting:</p>

<button onclick="myFunction()">have a try</button>

<p id="demo"></p>

<script>
function myFunction() {
  var greeting;
  var time = new Date().getHours();
  if (time < 10) {
    greeting = "good morning";
  } else if (time < 20) {
    greeting = "Good day";
  } else {
    greeting = "good night";
  }
  document.getElementById("demo").innerHTML = greeting;
}
</script>

JavaScript Switch statement

Evaluate the switch expression once
Compare the value of the expression with the value of each case
If there is a match, the associated code is executed

<p id="demo"></p>

<script>
var day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is" + day;
</script>

JavaScript For loop

If you need to run code multiple times and use different values each time, loop is quite convenient.
js supports many different types of loops
for - iterates over the code block multiple times
for/in - traverse object properties
while - loops a block of code when the specified condition is true
do/while - loops a block of code when the specified condition is true
be careful:
The break statement "jumps out" of the loop.
The continue statement "skips" an iteration in a loop.

<h1>JavaScript loop</h1>
<p id="demo"></p>
<p id="demo2"></p>
<script>
//for loop
var cars = ["BMW", "Volvo", "porsche", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
//while Loop 
var texts = "";
var i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}
document.getElementById("demo2").innerHTML = texts;
</script>

JavaScript data type

There are five data types in JavaScript that can contain values:
String (string)
number
boolean
object
function
There are three object types:
Object
Date
Array
There are two data types that cannot contain values:
null
undefined
Please note that:
The data type of NaN is numeric
The data type of the array is an object
The data type of the date is an object
The null data type is an object
The data type of an undefined variable is undefined
The data type of the variable that has not been assigned is also undefined

Topics: Javascript