Exploring JavaScript : as I use knowledge of compiling language in it
1) Introduction
In my previous blog, I started the journey into the vibrant world of JavaScript, unraveling its role as the driving force behind the dynamic web. I dived into alerts, data types, variables, and more, building a solid foundation for interactive web development. Today, I will expand my knowledge as I try more topics.
2) Math.random()
The Math.random() static method returns a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1 or 0.9999999999999999(16 decimal places), we can scale the numbers to our desired range by simply multiplying it with the range number example multiply it by 6 which will give us range between 0 to 5.99999. Usually use with Math.floor() to convert it into an integer.
Note: it cannot be chosen or reset by the user.
A program that can provide random numbers like dice
var n = Math.random();
n = n * 6;
n = Math.floor(n) + 1; // converting float into int
console.log(n);
// literally could be any number between 1 and 6
"Random" refers to true unpredictability, while "pseudo-random" refers to apparent randomness generated through algorithms. If you need true randomness, you often need to rely on external physical processes(for example: turning natural sounds into numbers), which can be challenging to implement in digital systems.
Exercise 1
Making love calculator
prompt("Please enter you name");
prompt("Please enter you lover name");
// literally ignored --^
// code
var n = Math.random();
n = n * 100;
n = Math.floor(n) + 1;
alert("Your love score is " + n + "%");
3) if...else
Conditional statements are used to perform different actions based on different conditions.
if (condition) {
// block of code to be executed if the condition is true
}
Exercise 2
Upgrading the love calculator by adding different replies according to the percentage
var firstUseLessName = prompt("Please enter you name");
var secondUseLessName = prompt("Please enter you lover name`");
var n = Math.random();
n = n * 100;
n = Math.floor(n) + 1;
console.log("Your love score is " + n + "%");
if (n < 50){ // a voice would be better than print
console.log("how cute (but in Kaguya voice from love is war) ")
console.log("he\she definitely in love with you! (but in Miyuki voice from love is war) ")
}
"==" vs "==="
The main difference between the == and === operators in javascript is that the == operator does the type conversion of the operands before comparison, whereas the === operator compares the values as well as the data types of the operands.
var n = 1;
var m = "1";
console.log("n is " + typeof(n)); // number
console.log("m is " + typeof(m)); // string
// ==
console.log("==")
if (n == m){
console.log("yes");
}else {
console.log("no"); // it will check datatype
} // checks for equality while considering type coercion (if needed).
// ===
console.log("===")
if (n === m){
console.log("yes"); // it will check value
}else { // checks for strict equality, including both value and data type.
console.log("no");
}
In JavaScript, if, else if, and else are used to control the flow of your code based on conditions. Additionally, you can use logical operators such as && (logical AND), || (logical OR), and ! (logical NOT) to combine and evaluate conditions. Here's how they work:
Exercise 3
Make a BMI calculator that comments on your BMI score
function bmiCalculator (weight, height) {
var bmi = weight / Math.pow(height, 2);
bmi = Math.round(bmi);
if (bmi < 18.5) {
return "Your BMI is " + bmi + ", so you are underweight.";
} else if (bmi > 18.5 && bmi < 24.9) {
return "Your BMI is " + bmi + ", so you have a normal weight.";
} else {
return "Your BMI is " + bmi + ", so you are fatso.";
}
return interpretation;
}
var weight = prompt("Please enter your weight");
var height = prompt("Please enter your height");
console.log(bmiCalculator(75, 1.78));
4) Array
- An array is a special variable, which can hold more than one value:
var array_name = [item1, item2, ...];
includes()
The includes() method returns true if a string contains a specified string.
Otherwise, it returns false.
The includes() method is case sensitive.
string.includes(searchvalue, start)
Exercise 4
Write a program to find if a name exists in the list
var guestList = ["a", "b", "c", "d", "e", "f" , "g", "h", "i"];
var className = prompt("What is your name?");
if (guestList.includes(className)) {
alert("Welcome");
} else {
alert("Sorry, maybe next time.");
}
5) Loop
Loops are handy if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
The While Loop
The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
// code block to be executed
}
Example
In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:
while (i < 10) {
text += "The number is " + i;
i++;
}
The For Loop
The for statement creates a loop with 3 optional expressions:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Expression 1 is executed (one time) before the execution of the code block.
Expression 2 defines the condition for executing the code block.
Expression 3 is executed (every time) after the code block has been executed.
Example
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Exercise 5
99 Bottles of Beer (well better than Buzzfizz)
var bottle = 99;
for (bottle; bottle >= 1; bottle--){
console.log(bottle + " bottles of beer on the wall, " + bottle + " bottles of beer.");
if(bottle == 1){
console.log("Take one down and pass it around, no more bottles of beer on the wall.");
console.log(" ");
console.log("No more bottles of beer on the wall, no more bottles of beer.");
console.log("Go to the store and buy some more, 99 bottles of beer on the wall.");
} else {
console.log("Take one down and pass it around, " + (bottle - 1) +" bottles of beer on the wall.");
}
console.log(" ");
}
song link:- https://youtu.be/FITjBet3dio
Conclusion
Till now I've been learning about Javascript and using it inside the Chrome Developer tools console. Now that was the purest form of Javascript as we saw the code as it is and saw what it does. But there is no use in learning about it. if I am not going to apply it to my websites. So in the next blog, I will incorporate Javascript into my websites.