The First Step: Understanding JavaScript Computation
In the second week of the Physical System Computation course, Mr. Sparisoma Viridi or commonly called Mr. Dudung, taught us about basic JavaScript computation for beginners. Before that, to make it easier to write and run the script, we downloaded Notepad++ and used it to create an HTML file. Like in other programming languages, first we tried to create a simple “Hello World!” program using cnt or the container element. Then, we arranged the style of the container, such as padding, margin, border radius, width, and border. After that, we dragged or opened the HTML file in Chrome, and the screen displayed the result like the picture below.
The next lesson was creating a button using btn and a label using lab. The button allows us to click something, while the label will display text or a value. The button-label practice that we learned was to create three buttons consisting of add, sub, and reset. We needed to create every element and could edit the style of each element like before. The hardest part was creating a function for the counter of each button when we clicked it. For the add button, we must add +1 to the counter, for sub we subtract -1, and for reset the counter goes back to zero. For practice, I tried to make the number shift to the right every time I clicked add, to the left when I clicked sub, and back to the starting position when I clicked reset. To make it work, in the script I wrote lab.style.left = counter + “2px” to make the number shift from the left border. But, remember to change lab.style.position to relative to make it work, because using absolute didn’t work. The result is displayed in the picture below.
Get sitikhoriah’s stories in your inbox
Join Medium for free to get updates from this writer.
Afterward, we were introduced to the text area, which is an HTML element used to receive long text input consisting of many columns and rows. JavaScript can be used to read, change, or validate the text. In the last session, we were also introduced to the canvas, and maybe in the next meeting we will learn more deeply about it. Again, for practice, I had an idea to combine all the elements that I had learned. So, I created a simple project called Free-Fall Motion Calculator to calculate the time of fall from a given height. I used three labels for the title, the text “Input Height (m),” and the “Time Result” text. For the text area, I used it to input the height number in a box placed beside the “Input Height (m)” text. One button was used to calculate the time, with a function based on the formula (t = \sqrt{2h/g}), with (g = 9.8). The final result is shown in the picture below.
That is what I learned in the second week of Physical System Computation, starting from the basic JavaScript elements, buttons, labels, and text areas. From this lesson, I realized that JavaScript can be used to create simple UI/UX and interactive programs. I think it is also interesting to use JavaScript to create simple programs for introducing physics concepts to school students, so they can learn physics in a more interactive and fun way.
