☰ Contents · Computing

Web design tools and JavaScript

Lessons 19 · 1 lessons · N. I. Taylaqov (general editor), A. B. Akhmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatics and Information Technologies, Grade 11, 1st edition. “Extremum-press”, Tashkent, 2018
19

Web design and its software. Creating and decorating a web page (Macromedia Flash)

Textbook: pp. 68–72
GoalNames the tools for creating and decorating web pages (text editor, JavaScript, graphics programs, animation tools), explains what replaced Flash and writes a simple calculation form in JavaScript.
New words
JavaScript: a programming language that runs in the browser and makes a page react to the user · JavaScripttext editor: a program for writing code, such as Notepad or a code editor; it saves the page as an .html file · matn muharririFlash: a vector animation technology whose files had the .swf extension; support ended on 31 December 2020 · Flash (SWF)HTML5: the current web standard with built-in audio, video, forms and drawing, which replaced Flash · HTML5
Explanation

Several tools work together to create and decorate a web page: a text or code editor where the code is written (Notepad, VS Code and others), the browser and its developer tools, a graphics editor for pictures (PhotoShop, GIMP), animation tools and content management systems. JavaScript is a programming language that runs in the browser; it makes an HTML page respond to the user's actions (a button click, typed text). Its arithmetic resembles Pascal's, but with differences: / is always real division (7/2 = 3.5), % gives the remainder, and ** or Math.pow gives a power; the maths functions are Math.abs(a) – absolute value, Math.pow(a, b) – a to the power b, Math.sqrt(a) – square root, Math.sin(a), Math.cos(a), Math.tan(a) (the angle in radians), Math.log(a) – natural logarithm, and Math.round(a) – rounding. A form is made in HTML with input fields and a button, and a function does the calculation. Macromedia Flash was popular for vector animation and interfaces (SWF files) and Dreamweaver was a page editor; but Flash lost its place because of security weaknesses, not working on phones, and HTML5, CSS and JavaScript providing enough features: Adobe ended support on 31 December 2020 and browsers removed it. One of its successors is Adobe Animate, which can output animation for HTML5. Do not download unlicensed (“cracked”) programs: they often contain malware; paid programs have free alternatives or trial versions.

Worked examples
A form that adds VAT (12%) to a price. The file is saved as “vat.html” and opened in a browser: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎  <meta charset="utf-8"> ⏎  <title>QQS hisobi</title> ⏎ </head> ⏎ <body> ⏎  <h1>QQS hisoblagich</h1> ⏎  <p>Narx (so‘m): <input type="number" id="narx" value="250000"></p> ⏎  <button onclick="hisobla()">Hisobla</button> ⏎  <p>QQS bilan: <span id="natija"></span> so‘m</p> ⏎  <script> ⏎    function hisobla() { ⏎      var narx = Number(document.getElementById("narx").value); ⏎      var qqs = narx * 12 / 100; ⏎      document.getElementById("natija").textContent = narx + qqs; ⏎    } ⏎  </script> ⏎ </body> ⏎ </html> For 250000 so‘m the result is 250000 + 250000·12:100 = 280000 so‘m.
JavaScript functions: Math.sqrt(144) = 12; Math.pow(2, 10) = 1024; Math.abs(-7.5) = 7.5; Math.round(2.6) = 3; 17 % 5 = 2; 7 / 2 = 3.5; Math.sqrt(Math.pow(3, 4)) = 9. These can be checked by typing them in the console (F12).
Class activity

“Form workshop”: pairs write the VAT form, then change it to another calculation (a discount or the average of two numbers); a neighbouring pair checks it with 3 test values.

Practice
1
Which technologies replaced Flash and when was Flash ended?
2
The price is 400000 so‘m and VAT is 12%. How many so‘m is the price with VAT?
3
What is Math.sqrt(Math.pow(3, 4))?
4
Why did Flash go out of general use? Give two reasons.