Forem: Shem Jaoko

Forem: Shem Jaoko The latest articles on Forem by Shem Jaoko (@shemjay). https://forem.com/shemjay https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F864444%2Fb4917cab-eaa1-452c-bf99-20e1e3016f44.png Forem: Shem Jaoko https://forem.com/shemjay en JavaScript Assignment Operators💻🧮 Explained with Canvas API🎨 Shem Jaoko Sun, 01 Jan 2023 20:51:42 +0000 https://forem.com/shemjay/javascript-assignment-operators-explained-with-canvas-api-mon https://forem.com/shemjay/javascript-assignment-operators-explained-with-canvas-api-mon <h2> Table of Contents </h2> <p>1 JavaScript Assignment Operators<br> 2 Code Workplace<br> 3 Questions<br> 4 Answers</p> <h2> JavaScript Assignment Operators brief overview </h2> <p>The Assignment operator is <code>equal (=)</code> which assigns the value of right-hand operand to its left-hand operand. That is if a = b assigns the value of b to a.</p> <p><code>+=</code> Addition Assignment: This operator adds the value to the right operand to a variable and assigns the result to the variable.</p> <p><code>-=</code> Subtraction assignment: Subtracts the value on the right from the variable value on the left, and returns the new variable value.</p> <p><code>*=</code> Multiplication assignment: Multiplies the variable value on the left by the value on the right, and returns the new variable value.</p> <p><code>/=</code> Division Assignment: This operator divides a variable by the value of the right operand and assigns the result to the variable.</p> <p><code>%=</code> Remainder/Modulus Assignment: This operator divides a variable by the value of the right operand and assigns the remainder to the variable.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4gYRbYr_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1dqv7xordn7hm6dzmwx.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4gYRbYr_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1dqv7xordn7hm6dzmwx.jpg" alt="javaScript operators" width="365" height="138"></a></p> <p><em>image credit:</em> <code>http://www.corelangs.com/js/basics/operators.html</code></p> <p>Let's carry out an exercise to manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.</p> <p>The following questions are obtained from the MDN JavaScript Documentation which you can find <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#active_learning_sizing_a_canvas_box">here</a>.</p> <h2> Code Workplace </h2> <p>Practice working on the coding questions using this workspace. Then check the answers if you need help💯<br> JSitor: <a href="https://jsitor.com/mxtwfi8OL5">https://jsitor.com/mxtwfi8OL5</a><br> You only edit these two lines for this exercise:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HtjBFONW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbaha9mxfindvz304bkg.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HtjBFONW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbaha9mxfindvz304bkg.png" alt="two lines to edit" width="336" height="62"></a></p> <h2> Questions </h2> <h3> Question 1 </h3> <p>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</p> <p>view the possible solution here</p> <h3> Question 2 </h3> <p>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</p> <p>view the possible solution here</p> <h3> Question 3 </h3> <p>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</p> <p>view the possible solution here</p> <h3> Question 4 </h3> <p>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</p> <p>view the possible solution here</p> <h3> Question 5 </h3> <p>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</p> <p>view the possible solution here</p> <h3> Question 6 </h3> <p>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</p> <p>view the possible solution here</p> <h2> Answers </h2> <h3> Answer 1 </h3> <p>Possible solution:<br> <code>x = (43 + 7);<br> y = 50;</code><br> simple right? The total, of course, will add up to 50 so the square will not change in size:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FFMPdYU8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goddb67t806xfdna7a8p.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FFMPdYU8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goddb67t806xfdna7a8p.JPG" alt="Solution for Question 1" width="321" height="167"></a></p> <p>back to question 1</p> <h3> Answer 2 </h3> <p>Possible solution:<br> <code>x = 50;<br> y = (25 + 3);</code><br> Just like the previous question this merely involves a simple subtraction operation to get the desired result:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NW8RL-yS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idxaxthx3zy9k08ji2l.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NW8RL-yS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idxaxthx3zy9k08ji2l.JPG" alt="Solution for Question 2" width="315" height="164"></a></p> <p>back to question 2</p> <h3> Answer 3 </h3> <p>Possible solution:<br> <code>x = 750 % 500;<br> y = 50;</code></p> <p>And voila! By dividing 750 by 500 we get a remainder of 250 exactly what we wanted.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2aFaqyxL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewxhqpp4scckcfm84cbv.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2aFaqyxL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewxhqpp4scckcfm84cbv.JPG" alt="Solution for Question 3" width="314" height="166"></a></p> <p>back to question 3</p> <h3> Answer 4 </h3> <p>Possible solution:<br> <code>x = 50;<br> y = 500 / 2 - 100;</code></p> <p>Not much explanation needed here. Our three numbers are 500, 100 and 2. When we divide 500 by 2 we get 250 which we then subtract 100 from to get 150:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jEUSNrD4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2itf33rsoxy18zvgfqc.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jEUSNrD4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2itf33rsoxy18zvgfqc.JPG" alt="Solution for Question 4" width="321" height="163"></a></p> <p>back to question 4</p> <h3> Answer 5 </h3> <p>Possible solution:<br> <code>x *= 4;<br> y = 50;</code></p> <p>As we already know, the <code>*=</code> operator multiplies the variable value on the left by the value on the right, and returns the new variable value. Since x has been assigned 50 it will multiply it by 4 to get 200:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZYUFjlYW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n7n5cqf9e3hwtkwjta9.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZYUFjlYW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n7n5cqf9e3hwtkwjta9.JPG" alt="Solution for Question 5" width="317" height="167"></a></p> <p>back to question 5</p> <h3> Answer 6 </h3> <p>Possible solution:<br> <code>x = 50;<br> y *= 50 + 3;</code></p> <p>Here we have merely used the <code>*=</code> operator then added our two numbers 50 + 3 to get our solution:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Bb-4yXHq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00x7pmhylsk5vku5huf.JPG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Bb-4yXHq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00x7pmhylsk5vku5huf.JPG" alt="Solution for Question 6" width="316" height="164"></a></p> <p>back to question 6</p> <p>You can practice making more complex scenarios with assignment operators. To read more on JavaScript assignment operators, take a look at this article on <a href="https://javascript.info/operators">javaScript.info</a></p> <p>If you found this article useful or if you spotted an error drop me a line in the comments I'd love to hear from you😁</p> javascript beginners webdev tutorial Defer vs Async Attributes Shem Jaoko Wed, 01 Jun 2022 07:02:03 +0000 https://forem.com/shemjay/defer-vs-async-attributes-4p2k https://forem.com/shemjay/defer-vs-async-attributes-4p2k <p>Async and Defer may look to have the same function but they are actually quite different. Usually its best to use Defer even though Async looks tastier😁. Though that's not to say you can't use Async. In this post I'll speak about what they both do and when you should use either one. So, let's begin.</p> <p><u><strong>SCRIPT TAG IN THE HEAD WITH NO ASYNC OR DEFER</strong></u><br> Before we begin looking at script loading with async and defer, lets look at a script tag with none of them loaded in the head of the document. </p> <p>An example could look like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><head> <script src = "index.js"></script> </head> </code></pre> </div> <p>When the browser is typically parsing an HTML document, it will stop parsing the HTML doc the moment it encounters a <code><script></code> tag in the head. The browser will be forced to download parse the entire <code><script></code> tag and evaluate it. Only then can the HTML parsing continue.</p> <p>Here is a diagram I made to illustrate:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9cCeGbp2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83jnj1k9ydf3ap3xbg0n.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9cCeGbp2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83jnj1k9ydf3ap3xbg0n.jpg" alt="A diagram of html parsing with script tag in the head" width="512" height="384"></a></p> <p>The problem is that large scripts can cause the DOM to stop loading. This can provide a very unsatisfactory user experience.</p> <p><u><strong>SCRIPT TAG IN THE BODY WITH NO ASYNC OR DEFER</strong></u><br> However, when the <code><script></code> is placed at the end of the body tag, like so:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><head> <title>JS Script Loading</title> </head> <body> <p>Some Content</p> <script> </body> </code></pre> </div> <p>The HTML parsing will be carried out first then the <code><script></code> is fetched and executed like so:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--enOnAByf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qzybr6ndexd8txm4q66.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--enOnAByf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qzybr6ndexd8txm4q66.jpg" alt="A diagram of html parsing with script tag in the body" width="512" height="384"></a></p> <p><u><strong>SCRIPT LOADING IN THE HEAD WITH ASYNC</strong></u><br> When loading <code><script></code> with Async the browser will fetch and download the <code><script></code> as it is parsing the HTML. It will only pause the HTML parsing when it wants to execute the <code><script></code>:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hIkt5TQG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt7w1i7q7h1pkdvsu3po.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hIkt5TQG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt7w1i7q7h1pkdvsu3po.jpg" alt="A diagram of html parsing with script tag and async attribute" width="512" height="384"></a></p> <p><u><strong>SCRIPT LOADING IN THE HEAD WITH DEFER</strong></u><br> Jus like with Async, Defer will fetch and download the <code><script></code> as it parsing the HTML. However, Defer is different from Async in that it will complete the HTML parsing before it executes the script:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ypD1lEHv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmkavtnjhx11f65m2vxq.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ypD1lEHv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmkavtnjhx11f65m2vxq.jpg" alt="A diagram of html parsing with script tag and defer attribute" width="512" height="384"></a></p> <p><u><strong>DEFER vs ASYNC</strong></u><br> Both Asnyc and Defer load scripts without blocking the DOM, but they have two main differences:</p> <ul> <li>Async does not load scripts in order while defer does. This means that if you have three scripts loaded like this: </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><script async src="script1.js"></script> <script async src="script2.js"></script> <script async src="script3.js"></script> </code></pre> </div> <p>Async can randomize the order of execution while defer will respect the sequence order. </p> <ul> <li>Defer waits for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> while Async does not. Defer will wait for the DOM to fully load before it executes. Async will not. This means if your <code>script</code> requires the DOM you should use defer. If you use Async in this scenario you stand the chance that element you need cannot be found which can lead to bugs.</li> </ul> <p>Here are some general rules on when to use either:</p> <ol> <li>If the script does not rely on any other scripts or if it does not require the DOM then you can use <strong>Async</strong>.</li> <li>If you want to load scripts in the middle of your HTML you can use <strong>Async</strong>. Since the DOM is already present, the <code>script</code> can be executed immediately without any problems.</li> <li>You should use <strong>defer</strong> for all other scripts because:</li> <li>It gets loaded ASAP which reduces load time.</li> <li>It respects the script order letting you structure which script will come first.</li> <li>It only executes once the DOM is ready.</li> </ol> <p><u><strong>CONCLUSION</strong></u><br> In conclusion, it usually better to use defer because it has more advantages over Async in most use cases even though Async can sound much better.</p> <p>If you found this article useful or if you spotted an error drop me a line in the comments i'd love to hear you opnions😁. </p> javascript beginners html programming