61

Re: події та обробники

koala написав:

Ви щось неправильно зрозуміли. Код

<input type="date" id="date" value ="2020-04-04">

Означає, що на момент завантаження сторінки в цьому полі буде значення 2020-04-04. Але, очевидно, ми можемо це значення змінити, і тоді там буде інше значення. Ви ж не вважаєте, що при зміні значення змінної нове значення є "пріоритетним"?

Саме так вважаю.

62

Re: події та обробники

А який ваш пріоритетний вік?

63 Востаннє редагувалося elektryk (04.04.2020 20:06:45)

Re: події та обробники

koala написав:

А який ваш пріоритетний вік?

Я вже підтоптаний...

64

Re: події та обробники

elektryk, ви прочитайте книжку якусь або хоча би якийсь вiдеокурс, а то у вас затик на самих основах. повiрте, кожному по рiзному даеться iнфа, хтось вчить за нiч по онлайн мануалу, а комусь треба iменно прочитати талмуд i пройти всi "домашнi завдання".
попробуйте також JQUERY, вiн простiший чим чистий жс, не слухайте тих хто пише шо вiн мертвий - вам результат потрiбен , а не понти.

65

Re: події та обробники

elektryk написав:
221VOLT написав:
elektryk написав:

А ще я з'ясував, що ввід числа в поле є пріорітетним.

*DONT_KNOW* тепер я загубився...
що означає "ввід числа в поле є пріоритетним" ?

Ну, це просто. Ось код.

<input type="date" id="date" value ="2020-04-04">

В ньому вже задана одна дата "2020-04-04".
Але коли ми вводимо в поле іншу дату, то інша має приоритет.

звідки ви це взяли?
за 10+ років цієї кухні вперше чую такий термін і таке пояснення  *SCRATCH*
і що таке цей ваш пріоритет, з чим його їдять7 що він дає?  *DONT_KNOW*

ще раз -- ви можете показати, звідки ви це взяли?
можливо, ви щось не так зрозуміли, з якогось дивного-сумбурного пояснення?

Подякували: leofun011

66

Re: події та обробники

можна написати

<input type="date" id="date" value ="2020-04-04">
<script>date.value = '2022-07-07';</script>

і ви у сучасному браузері побачите наступне --
https://jsfiddle.net/xqg4mues/
що ваша форма виглядає так же, як і при написанні

<input type="date" id="date" value ="2022-07-07">

які тут пріоритети?

у варіанті з js, ви не можете змінити текст в формі до того, як форму було створено (задекларовано),
відповідно, немає смислу розміщати js перед формою (яка у вас тут складається з одного інпуту)

і це точно не пріоритети ))
це звичайна робота парсера(лексера) --
отак, як і ви читаєте текст - рядки повідомлень --
зліва направо, зверху донизу,
отак і браузер читає код ))

браузер не читає один рядок зверху сторінки і далі один знизу,
а читає послідовно, зверху донизу -- перший рядок, 2й рядок, 3й ... останній :)

Подякували: leofun011

67

Re: події та обробники

ExPy написав:

JQUERY, вiн простiший чим чистий жс

Не згідний з цим твердженням. Для використання jQuery потрібно знати і JavaScript і сам jQuery, а для використання JavaScript - знати jQuery не обов'язково.
Тобто jQuery - це "понти".

ExPy написав:

результат потрiбен , а не понти.

Подякували: 221VOLT, ostap34PHP2

68

Re: події та обробники

bebyk написав:
elektryk написав:

Тож я не можу зробити єлементарну вправу:
1 При наведенні курсора на зображення розмір width має стати 500 (а був 100);
2 при сході курсора з зображення, воно повинне повернутись до початкового розміру.
З першою частиною я впорався без проблем:

function halterMouseOver(img){
    img.width = '500';
}
<img src='01.jpg' width='100' onmouseover="halterMouseOver(this)"/>

Аналогічно зробив і другу частину.

function halterMouseOut(img){
    img.width = '100';
}
<img src='01.jpg' width='100' onmouseout="halterMouseOut(this)"/>

Але з'ясувалося, що виникло два зображення. Одна функція працює з одним, а друга з іншим.
То як зарадити моєму горю??

Треба ж обидві функції в одне зображення додати:

function halterMouseOver(img){
    img.width = '500';
}

function halterMouseOut(img){
    img.width = '100';
}
<img src='01.jpg' width='100' onmouseover='halterMouseOver(this)' onmouseout='halterMouseOut(this)'/>

Працюючий приклад на CodePen

https://jsfiddle.net/j1tdpom8/
причесаний приклад з тією ж функціональністю (без лайнокоду -- js окремо від html)


наведення курсору на елемент -- це подія mouseenter, а не mouseover,
подія mouseover -- це переміщення курсору над елементом,

немає сенсу постійно змінювати ширину зображення, поки курсор рухається над зображенням,
достатньо змінити один раз -- при наведенні :)


як ви можете бачити, отримати доступ до елемента, щоб змінити його параметр, можна більше ніж один способом


обробник події load для window --
говорить браузеру виконувати цей js після завантаження сторінки та її ресурсів
(отримання та обробки html, css стилів та js скриптів)

весь список можливих подій (з прикладами) можна переглянути тут
https://www.w3schools.com/jsref/dom_obj_event.asp

Подякували: leofun011

69

Re: події та обробники

koala написав:

Ви щось неправильно зрозуміли. Код

<input type="date" id="date" value ="2020-04-04">

Означає, що на момент завантаження сторінки в цьому полі буде значення 2020-04-04. Але, очевидно, ми можемо це значення змінити, і тоді там буде інше значення. Ви ж не вважаєте, що при зміні значення змінної нове значення є "пріоритетним"?

Можливо, пан elektryk має на увазі, що деякі браузери (наприклад, Firefox) при зміні поля користувачем запам'ятовують введене значення, і при повторному завантаженні сторінки відображають не те значення, яке задано в початковому коді сторінки, а те, яке попереднього разу ввів користувач?

Подякували: 221VOLT1

70

Re: події та обробники

221VOLT написав:

https://jsfiddle.net/j1tdpom8/
причесаний приклад з тією ж функціональністю

Я би використовував DOMContentLoaded. А решта все правильно.

document.addEventListener('DOMContentLoaded', () => {
    let img = document.getElementById('img1');
    img.addEventListener('mouseenter',
        e => e.target.style.width = '500px'
    );
    img.addEventListener('mouseout',
        e => e.target.style.width = '100px'
    );
});
Подякували: 221VOLT1

71

Re: події та обробники

leofun01 написав:

Не згідний з цим твердженням.

То як бути пану електрику, що йому використовувати, щоб за кожним рядком не бiгав на форум? Думав, якщо чистий жс нiяк не йде, то jquery пiде краще..

72

Re: події та обробники

Боюся, що він такий же електрик, як і програміст.

Подякували: 221VOLT, ExPy, leofun013

73 Востаннє редагувалося 221VOLT (05.04.2020 00:33:53)

Re: події та обробники

elektryk написав:

Створити функцію, котра викликаеться при натисканні кнопки "рахувати" і рахує синус чи косинус в залежності від вибраного елементу випадаючого списку.

З чого починати??

elektryk написав:

цей код недороблений, бо я не знаю, як правильно доробити.
Жаль, що рядки не нумеруються як в бейсику.
Потрібно якось вибрати одну функцію: синус чи косинус.
Код з цим справляється.

А як цю функцію передати далі??
Тобто як в рядку var sin = Math.sin(arg); замінити sin на result і щоб обчислення продовжились??
чисто механічна заміна на працює.

<body>
    <script type="text/javascript">
        function tri() {
            var arg = Number(document.getElementById("4islo").value);
            arg = arg * Math.PI / 180;
             var e = document.getElementById("funk"); 
             var result = e.options[e.selectedIndex].value;
             alert(result);
            
            var sin = Math.sin(arg);
            alert(sin);
            var cos = Math.cos(arg);
            alert(cos);
        }
    </script>
    <form method="GET" name="form" >
        <input type="text" id="4islo" ><br>
        <select id = "funk">
            <option>sin</option> 
            <option>cos</option> 
        </select><br>
        <input type="button" value="рахувати" id="rax"><br>
    </form>
    <script type="text/javascript">
    rax.addEventListener("click", tri);    
    </script>
</body>

https://jsfiddle.net/7qd3yjka/
тобто, вам щось таке потрібно?


замість

<input type="number" step="2" id="number1">

для цілих  чисел, та

<input type="number" step="0.01" id="number1">

для чисел з плаваючою крапкою,
можна і справді використовувати текстове поле вводу,

посилання по темі
https://www.w3schools.com/tags/att_option_selected.asp
https://www.w3schools.com/tags/att_inpu … number.asp
https://www.w3schools.com/jsref/met_ele … stener.asp
https://www.w3schools.com/jsref/jsref_parseint.asp
https://www.w3schools.com/jsref/jsref_parsefloat.asp
https://www.w3schools.com/jsref/jsref_number.asp
https://www.w3schools.com/jsref/jsref_isnan.asp
https://www.w3schools.com/tags/tag_option.asp

upd. ой, а чого це у вас формула переведення градусів в радіани?
і я її скопіпастив з вашого коду :)))
https://www.fxyz.ru/формулы_по_геометри … в_радианы/
звідки ви її в коді взяли, і навіщо?
хоча..
https://replace.org.ua/post/138238/#p138238
WD вже навів вам приклад коду без цієї формули)
розберетесь))

74

Re: події та обробники

P.Y. написав:
koala написав:

Ви щось неправильно зрозуміли. Код

<input type="date" id="date" value ="2020-04-04">

Означає, що на момент завантаження сторінки в цьому полі буде значення 2020-04-04. Але, очевидно, ми можемо це значення змінити, і тоді там буде інше значення. Ви ж не вважаєте, що при зміні значення змінної нове значення є "пріоритетним"?

Можливо, пан elektryk має на увазі, що деякі браузери (наприклад, Firefox) при зміні поля користувачем запам'ятовують введене значення, і при повторному завантаженні сторінки відображають не те значення, яке задано в початковому коді сторінки, а те, яке попереднього разу ввів користувач?

трохи не так :)
браузери запам'ятовують не введені, а відправлені POST форми :)
можна вводити, та не відправити))
або вводити і відправляти за допомогою ajax чи вебсокетів, і браузер не запам'ятає

Подякували: leofun011

75

Re: події та обробники

0xDADA11C7 написав:

Боюся, що він такий же електрик, як і програміст.

Прихований текст

:D якщо живий, і старший за нас, то таки електрик кращий, ніж програміст  :D
клавіатура більш поблажлива до помилок, нііж електричний струм  :D  *CRAZY*

Подякували: 0xDADA11C71

76

Re: події та обробники

ExPy написав:
leofun01 написав:

Не згідний з цим твердженням.

То як бути пану електрику, що йому використовувати, щоб за кожним рядком не бiгав на форум? Думав, якщо чистий жс нiяк не йде, то jquery пiде краще..

:D 2020... jQuery... та закопайте той трупик назад))

jQuery -- імхо то шкідлива порада для новачка та інструмент без жодної користі станом на 2020...

77

Re: події та обробники

leofun01 написав:
221VOLT написав:

https://jsfiddle.net/j1tdpom8/
причесаний приклад з тією ж функціональністю

Я би використовував DOMContentLoaded. А решта все правильно.

document.addEventListener('DOMContentLoaded', () => {
    let img = document.getElementById('img1');
    img.addEventListener('mouseenter',
        e => e.target.style.width = '500px'
    );
    img.addEventListener('mouseout',
        e => e.target.style.width = '100px'
    );
});

можливо...
це залежить від окремих прикладів

якщо не помиляюсь,
DOMContentLoaded чекає лише парсання html та скриптів,
і не чекає стилі та зображення, відповідно,
якщо нам потрібно працювати з елементами з врахування їх стилів,
чи з зображеннями, варто користуватись load

агга, і ще з DOMContentLoaded є нюанси --
стилі можуть блокувати DOMContentLoaded, якщо після стилів включено інлайн js


Прихований текст

йой, та шо ви одразу так грузите електрика стрілочковими функціями))
не варто так багато одразу на новачка грузити -- може злякатись/замучатись і знову на рік пропаде...(

Подякували: leofun011

78 Востаннє редагувалося 221VOLT (05.04.2020 01:16:26)

Re: події та обробники

bebyk написав:
elektryk написав:

Ідемо далі:
"Створіть форму з текстовим полем, куди користувач повинен буде ввести дату свого народження в форматі ДД.ММ.РРРР (наприклад, 25.05.1960)".

Якби одне число, то я б справився...

А в чому проблема? Я розумію, що з дропдаунами і лупами треба покохатися.  :D

А тут напевне зарадить звичайний <input type="date">.

можна ще так
https://codepen.io/vivens07/pen/gOpOMMr


elektryk написав:
bebyk написав:
elektryk написав:

Ідемо далі:
"Створіть форму з текстовим полем, куди користувач повинен буде ввести дату свого народження в форматі ДД.ММ.РРРР (наприклад, 25.05.1960)".

Якби одне число, то я б справився...

А в чому проблема? Я розумію, що з дропдаунами і лупами треба покохатися.  :D

А тут напевне зарадить звичайний <input type="date">.

Проблема в тому, що потім цю дату треба обробити.
А для цього треба буде числа, місяці та роки відокремити і обробляти окремо.
В цьому відокремлюванні і є проблема.

та немає проблеми, split по розділювачу
https://www.w3schools.com/jsref/jsref_split.asp
і далі працюєте -- parseInt з тих строк


elektryk написав:

Ну, потрібно вирахувати кількість хвилин, які  громодянин прожив до цього часу.
А ще кількість секунд.

ну, дата народження є
https://www.w3schools.com/jsref/jsref_obj_date.asp
https://www.w3schools.com/js/js_date_methods.asp

секунд

( Date.now() - ( new Date(1990, 12, 21) - 0 ) ) / 1000

хвилин

( ( Date.now() - ( new Date(1990, 12, 21) - 0 ) ) / 1000 ) / 60

" - 0" тут в мене для приведення в число-таймстамп при виводі в консолі дати, зчитаної з окремих чисел,
в функції це віднімання можна видалити, там воно не є потрібним

https://replace.org.ua/post/138642/#p138642
harentius ок підказує

elektryk написав:

Хи-хи-хи-хи!! Звісно, що так.
Ось зчитали ми дату, наприклад, 25.05.1960
Як перетворити її в секунди??
Камінь спотикання для мене - це розділити дату на три окремі числа.

https://www.w3schools.com/jsref/jsref_obj_date.asp

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

можна користувати і так

var d = new Date(year, month, day);

у такому випадку hours, minutes, seconds, milliseconds будуть нулями

а про розділення я написав вище, а harentius ще вище))

висловлюю надію, що тепер таки розберетесь)))
якщо що - уточняйте, лол)

79 Востаннє редагувалося ExPy (05.04.2020 01:46:14)

Re: події та обробники

0xDADA11C7 написав:

Боюся, що він такий же електрик, як і програміст.

Схожий на нього, але якiсть вiдео погана

А так - вiн полiтик же, партiя бiдноти чи якось так.

Подякували: 0xDADA11C71

80

Re: події та обробники

ExPy написав:

А так - вiн полiтик же, партiя бiдноти чи якось так.

Прихований текст

:( і знову про політику...