В связи с возникшими у той девушки трудностями с построением графика синуса сочинил для эксперимента с помощью подсказок в интернете вот такую штуку (но в ту тему такое постить не возьмусь - не уверен, что это будет хороший поступок, да и штука эта, вероятно, далека от совершенства):
вот этот текст можно скопировать и сохранить у себя в компьютере в "Блокноте" (в виндовском Notepad) как htm-файл, т.е. например с именем example.htm. Тогда, по идее, после запуска браузером он будет строить на экране график синуса, и параметры этого синуса можно менять в разумных пределах и смотреть, как меняется график
- <!doctype html>
- <html>
- <head>
- <title>Example</title>
- <meta http-equiv="Content-Type" content="text/html; charset='utf-8'">
- </head>
- <body>
-
- <script>
- function calc(x,a,k,dlt)
- {
- result = a*Math.sin(dlt+x*k*Math.PI/60);
- return result;
- }
-
- function cleargraph(x,y)
- {
- var example = document.getElementById("example");
- ctx = example.getContext('2d');
- ctx.translate(-example.width/2, -example.height/2);
- ctx.clearRect(x, y, example.width, example.height);
- }
-
- function graph(a,k,dlt)
- {
- var example = document.getElementById("example");
- ctx = example.getContext('2d');
- ctx.strokeStyle = "black";
- ctx.lineWidth = 0.5;
- ctx.strokeRect(0, 0, example.width, example.height);
-
- ctx.translate(example.width/2, example.height/2);
-
- var dx = example.width/8;
- var dy = example.height/6;
- var ay = example.height/6;
-
- ctx.beginPath();
-
- for (let i = 0; i < 9; i++)
- {
- ctx.moveTo(-example.width/2 + i*dx, -example.height/2);
- ctx.lineTo(-example.width/2 + i*dx, example.height/2);
- }
-
- for (let i = 0; i < 7; i++)
- {
- ctx.moveTo(-example.width/2, -example.height/2 + i*dy);
- ctx.lineTo(example.width/2, -example.height/2 + i*dy);
- }
-
- ctx.stroke();
-
- ctx.lineWidth = 1;
-
- ctx.beginPath();
- ctx.moveTo(0, -example.height/2);
- ctx.lineTo(0, example.height/2);
- ctx.moveTo(-example.width/2, 0);
- ctx.lineTo(example.width/2, 0);
- ctx.stroke();
-
- ctx.strokeStyle = "red";
- ctx.lineWidth = 2;
-
- ctx.beginPath();
- ctx.moveTo(-example.width/2, 0);
- for (i = -example.width/4; i < 1+example.width/4; i++)
- {
- x = i*2;
- y = -ay*calc(x,a,k,dlt);
- ctx.lineTo(x, y);
- }
-
- ctx.stroke();
- }
-
- </script>
-
- <h3>График функции y = a·sin(k·x+δ) </h3>
- <p>Сначала смотрим график при a = 1, k = 1 и δ = 0.<br>
- По x "цена деления" = π , по y "цена деления" = 1.
- <br><br>
-
- <canvas height='300' width='480' id='example'> </canvas>
- <br>
-
- <script>
- graph(1,1,0);
- </script>
-
- <form name = "param">
- <p><b>Введите новые значения параметров</b>:<br>
- a = <input type = "text" size = 3 name = "p1"><br>
- k = <input type = "text" size = 3 name = "p2"><br>
- δ = <input type = "text" size = 4 name = "p3">
-
- <p><b>И нажмите вот эту кнопку:</b>
- <input name = "btnCalc" type = "button" value = "Новое построение графика"
- onClick = "
-
- cleargraph(0,0);
-
- var new_a = 1.0*param.p1.value;
- var new_k = 1.0*param.p2.value;
- var new_dlt = 1.0*param.p3.value;
-
- graph(new_a,new_k,new_dlt);
-
- "><br>
-
- </form>
- <p>Чтобы начать сначала, нажмите клавишу F5 или значок "обновление страницы" в браузере.
-
- </body>
- </html>
Только тут у меня нерешённая проблемка осталась с кодировкой: в моей устаревшей системе, чтобы печаталась кириллица, приходится в подобном коде задавать charset=windows-1251. А интернет учит, что надо задавать charset='utf-8', на таком варианте я пока и остановился в приведённом выше коде (но тогда у меня печатаются нечитаемые значки вместо русского текста). Правда, интернет учит ещё, что и в настройках среды разработки надо задать utf-8; но у меня средой служит привычный простой "Блокнот", и простой пользователь, скопировавший этот код, сохранит его тоже в "Блокноте", не меняя его настроек (и, кстати, получившийся файл будет отличаться от того, который даёт здешняя кнопка "скачать"; но не знаю: у всех ли это так же выглядит...)
Может быть, наши форумные участники с опытом подобного программирования подскажут, как тут правильнее составить html-код; ну и вообще: работает ли приведённый выше код на разных системах, и что и как можно улучшить или сделать грамотнее.
В общем, это дело в духе идеи
wrest - напрячь ту даму на расчёты с калькулятором. Только тут в роли калькулятора выступает браузер, а результат расчёта это прямо готовый график. Не знаю, с преподавательской точки зрения приемлема ли такая штука в качестве "учебного пособия". Если да, то можно насочинять подобных браузерных обучалок и под другие школьные задачки.