Tutorials

JavaScript Star Pattern 9

Posted in JavaScript Tutorial

Updated on Jan 10, 2024

By Mari Selvan

👁️ 364 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

JavaScript Star Pattern 9

Here`s a program that prints the above star pattern using JavaScript Programming:

example.html

Copied

<!DOCTYPE html>
<html>
<body>

<script>
var i, j, k;
// First Part
for(i=1; i<=5; i++)
{
 for(j=5; j>=1; j--)
 {
  if(i == j)
   document.write("*");
  else
   document.write("&nbsp;&nbsp;");
 }
 for(k=2; k<=5; k++)
 {
  if(i == k)
   document.write("*");
  else
   document.write("&nbsp;&nbsp;");
 }
 document.write("<br>");
}
// Second Part
for(i=4; i>=1; i--)
{
 for(j=5; j>=1; j--)
 {
  if(i == j)
   document.write("*");
  else
   document.write("&nbsp;&nbsp;");
 }
 for(k=2; k<=5; k++)
 {
  if(i == k)
   document.write("*");
  else
   document.write("&nbsp;&nbsp;");
 }
 document.write("<br>");
}
</script>
</body>
</html>

💻 Testing the Program

When you run the above program, it will print the following output:

Output

🧠 How the Program Works

Let's break down the logic behind the code:

First Part:
1. Initialize three variables i, j, and k to be used as loop counters.
2. The outer loop runs from i = 1 to i <= 5 (inclusive) to control the height of the pattern.
3. Inside the outer loop, there are two nested loops:
  - The first nested loop (for(j=5; j>=1; j--)) runs from j = 5 to j >= 1 (inclusive) to generate the left side of the pattern.
  - Inside this loop, there's a conditional (if(i == j)) that checks if the value of i (current row) is equal to the value of j (current column). If they are equal, it prints an asterisk (*), otherwise, it prints two non-breaking spaces (  ).
  - The second nested loop (for(k=2; k<=5; k++)) runs from k = 2 to k <= 5 (inclusive) to generate the right side of the pattern.
  - Inside this loop, there's a conditional (if(i == k)) that checks if the value of i (current row) is equal to the value of k (current column). If they are equal, it prints an asterisk (*), otherwise, it prints two non-breaking spaces (  ).
4. After the two nested loops, a <br> tag is added to move to the next line, creating the effect of moving to the next row in the pattern.
Second Part:
1. Another set of nested loops is used to generate the second part of the pattern.
2. This time, the outer loop runs from i = 4 to i >= 1 (inclusive) to control the height of the pattern.
3. The structure inside this part is similar to the first part, with two nested loops for generating the left and right sides of the pattern, and the same conditional statements to determine whether to print an asterisk or spaces.
4. Again, after the nested loops, a <br> tag is used to move to the next line.

💯 Tips for Enhancement:

Explore the versatility of this pattern by adjusting its parameters. Whether you increase or decrease the size, tweak the spacing, or modify the characters used, each change opens up a world of possibilities, allowing you to customize and create your unique visual effects.

✔ Conclusion:

Creating visually appealing patterns is not only a fun endeavour but also a great way to enhance your programming or design skills. We hope this tutorial has inspired you to explore the world of creative coding. Share your creations with us, and let your imagination run wild!

🤗 Closing Call-to-Action:

We'd love to see your unique interpretations of the star pattern. Share your creations in the comments below, and don't hesitate to reach out if you have any questions or suggestions for future tutorials. Happy coding!