Reakcja na wciśnięcie klawisza

pytanie zadane 26 lutego 2017 w JavaScript przez Geek1234 Użytkownik (570 p.)
edycja 26 lutego 2017 przez Arkadiusz Waluk

Jak zaprogramować skrypt w javascript że gdy kliknę W to wyskoczy alert że kliknąłeś przycisk W.

2 odpowiedzi

odpowiedź 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)
wybrane 26 lutego 2017 przez Geek1234

Najlepsza

<!DOCTYPE html>
<html>
<body onkeydown="myFunction(event)">

<p><strong>Note:</strong> The key property is not supported in Safari or IE 8 and earler versions.</p>

<script>
function myFunction(event) {
    var x = event.key;

    // If the pressed keyboard button is "a" or "A" (using caps lock or shift), alert some text.
       
    if (x == "a" || x == "A") { 
        alert ("You pressed the 'A' key!");
    }
}
</script>

</body>
</html>

komentarz 26 lutego 2017 przez Geek1234 Użytkownik (570 p.)

dzięki ,chociaż chciałem wiedzieć jak ale dzięki.

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

hmm nie rozumiem..

masz 3 kolorowo na białym ;):

<body onkeydown="myFunction(event)"> - tu podpinasz ze jak będzie na body jakiś klawisz wciśnięty to ma wykonać funkcje myFunction i przekazujesz do niej event

var x = event.key; - tu przypisujesz wartość naciśniętego klawisza do zmiennej x którą od razu deklarujesz var

if (x == "a" || x == "A") - potem to już tylko sprawdzanie czy to co nacisnąłeś jest równe znakowi

alert ("You pressed the 'A' key!"); - i wyświetlasz alert,

tyle;

komentarz 26 lutego 2017 przez Geek1234 Użytkownik (570 p.)

nie chodziło mi o podanie rozwiązania, ale dzięki.

komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.)

Ech… Jak już podajemy gotowca, to przynajmniej porządnego. A porządne != bindingi w HTML-u. Wystarczy poczytać o podstawach CSP, żeby wiedzieć, czemu to bardzo słaby pomysł. Pomijam tu już cały aspekt łamania warstw aplikacji.

Poza tym chamskie kopiowanie przykładów z W3Schools nie sprawia, że są mniej błędne… Nie dość, że brudzą niepotrzebnie HTML, to dodatkowo wystawiają wszystko do globalnego scope. No i to nieszczęsne key – nie ma sensu tego na chwilę obecną używać.

Lepszy przykład.

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Oczywiście że masz racje że lepiej jest dodać EventListener żeby w ogóle oddzielić JS od HTML, ale trzeba też znać podstawy oraz nie trzeba akurat posłać kogoś na głęboką wodę i komplikować całość. Niektórym wystarczy tylko to co posłałem przynajmniej na początek. A tak nie potrzebnie zniechęcisz na początku... co może być problemem...

Co do hamskiego kopiowania fakt faktem powstało to na bazie tego co podałeś aczkolwiek jak zerkniesz to znajdź różnice w tym co podałem a w tym co ty podlinkowałeś.

komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.)

Oczywiście że masz racje że lepiej jest dodać EventListener żeby w ogóle oddzielić JS od HTML, ale trzeba też znać podstawy

Podstawa tworzenia oprogramowania, nie tylko webowego, od kilkudziesięciu lat jest niezmienna: podział warstw aplikacji. Poza tym co jest niby prostszego w HTML-owym [onkeydown]? Magiczna zmienna event? Zakamuflowany eval?

Nie nazywajmy podstawami złych praktyk, bo TO NIE SĄ PODSTAWY. Złe praktyki nazywają się złymi praktykami, bo… są złymi praktykami, huh.

A tak nie potrzebnie zniechęcisz na początku... co może być problemem...

To uczmy robić layouty na tabelkach – na pewno nikt się nie zrazi, gdy później się mu pokaże flexa… Oh, wait…

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Podstawa tworzenia oprogramowania, nie tylko webowego, od kilkudziesięciu lat jest niezmienna: podział warstw aplikacji.

Co nie znaczy że ktoś może mieć fantazje, upodobania, albo np. na przekór wszystkim zrobić po swojemu wszystko dać w jednym pliku ... bo akurat jemu tak odpowiada? I co kto mu zabroni zrobi po swojemu ;)

Poza tym co jest niby prostszego w HTML-owym [onkeydown]? Magiczna zmienna event? Zakamuflowany eval?

Ja wiem że ty jesteś już guru i wszystko wiesz, (a zazwyczaj każdy mierzy innych swoja miarą) i jak dla ciebie to jest tak oczywiste ... ale wiesz mi nie wszyscy są na takim poziomie jak ty i dla niektórych to jest kamień milowy

To uczmy robić layouty na tabelkach – na pewno nikt się nie zrazi, gdy później się mu pokaże flexa… Oh, wait…

Oczywiście pokażmy komuś że można zrobić layout w tabelkach, i pokażmy w divach HTML5 i nawet flex ale też wytłumaczmy mu dlaczego w większości wypadków wynik jest taki sam więc dlaczego jest tak a nie inaczej. A nie tak jak ty masz podejście do wszystkich ja ci mówię to masz robić tak jak ja chce bo strona ta czy tamta tak mówi. tu ludzie się uczą, chcą i potrzebują pomocy i wytłumaczenia pewnych spraw nawet pozornie by się wydawało błahych.

komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.)

Co nie znaczy że ktoś może mieć fantazje, upodobania, albo np. na przekór wszystkim zrobić po swojemu wszystko dać w jednym pliku ... bo akurat jemu tak odpowiada? I co kto mu zabroni zrobi po swojemu ;)

Wiesz co usłyszy taki "geniusz" w pracy? "GTFO" i tyle. Po to stworzono dobre praktyki, żeby je stosować, a nie podważać, "bo tak". Dobre praktyki podważa się wyłącznie wtedy, gdy ma się ku temu naprawdę solidne podstawy. "Na przekór" zaś to po prostu głupota albo szczenięce zachowanie.

Ja wiem że ty jesteś już guru i wszystko wiesz, (a zazwyczaj każdy mierzy innych swoja miarą) i jak dla ciebie to jest tak oczywiste ... ale wiesz mi nie wszyscy są na takim poziomie jak ty i dla niektórych to jest kamień milowy

A Ty wiesz, co tak naprawdę oznacza tam zmienna event i czemu trzeba ją przekazać? Jak tak naprawdę parsowane są te atrybuty? Bo to wcale nie jest takie oczywiste i łatwe, jak próbujesz wmówić. I nie ma tu nic do tego, że ja to wiem. Problemem jest to, że ktoś będzie tego używał nie wiedząc.

A nie tak jak ty masz podejście do wszystkich ja ci mówię to masz robić tak jak ja chce bo strona ta czy tamta tak mówi. tu ludzie się uczą, chcą i potrzebują pomocy i wytłumaczenia pewnych spraw nawet pozornie by się wydawało błahych.

Wiesz, nie brzmiałoby to tak śmiesznie, gdybyś nie zapodał gotowca z W3Schools, który promuje przestarzałe i złe praktyki, po czym nie próbował ich bronić, wmawiając mi, że ja pewnych rzeczy nie tłumaczę. Otóż nie mam zamiaru powtarzać się miliard razy tylko i wyłącznie dlatego, że "na przekór" dasz gotowca ze strony, która bezsprzecznie podaje fałszywe informacje i będziesz się spierał o to, że uczenie złych praktyk to dawanie ludziom podstaw.

Nie, dawanie ludziom gotowców opartych na złych praktykach to nie jest ani pomoc, ani wytłumaczenie czegokolwiek. I przypomnę tylko, że w co 3 moim poście na tym forum znalazłbyś linki do materiałów piętnujących te złe praktyki i pokazujących lepsze alternatywy, np. link do artykułu porneLa o atrybutach [on…].

I jeszcze powrócę: serio zarzucasz mi, że nie tłumaczę, podczas gdy sam wrzucasz gotowca…? Serio?

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

A Ty wiesz, co tak naprawdę oznacza tam zmienna event i czemu trzeba ją przekazać? Jak tak naprawdę parsowane są te atrybuty? Bo to wcale nie jest takie oczywiste i łatwe, jak próbujesz wmówić. I nie ma tu nic do tego, że ja to wiem. Problemem jest to, że ktoś będzie tego używał nie wiedząc.

I jeszcze powrócę: serio zarzucasz mi, że nie tłumaczę, podczas gdy sam wrzucasz gotowca…? Serio?

Chętnie posłucham/przeczytam bo naprawdę chętnie się dowiem może źle to sobie wyobrażam

Nie, dawanie ludziom gotowców opartych na złych praktykach, to nie jest ani pomoc, ani wytłumaczenie czegokolwiek. I przypomnę tylko, że w co 3 moim poście na tym forum znalazłbyś linki do materiałów piętnujących te złe praktyki i pokazujących lepsze alternatywy, np. link do artykułu porneLa o atrybutach [on…].

Ogólnie akurat znam twoje zdanie na temat serwisu i nawet kiedyś odwiedziłem twoją stronę żeby się dowiedzieć i zacząłem czytać co tam jest napisane i co.... od dawna tam już nie byłem może moja wiedza nie jest tak rozległa a może po prostu nie masz daru tłumaczenia...

Wiesz co usłyszy taki "geniusz" w pracy? "GTFO" i tyle. Po to stworzono dobre praktyki, żeby je stosować, a nie podważać, "bo tak". Dobre praktyki podważa się wyłącznie wtedy, gdy ma się ku temu naprawdę solidne podstawy. "Na przekór" zaś to po prostu głupota albo szczenięce zachowanie.

Zapominasz że nie wszyscy piszą dla pracy ... a twoje podejście akurat do mnie powoduje że nie staram się ciebie posłuchać, ale dodatkowo mnie odpycha ... nazwij to uporem, głupotą, zawiścią czy jak tam epitet znajdziesz, ale tak jest a nie taka jest rola nauczyciela, moderatora który powinien zachęcać, podpowiadać, pomagać

komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.)

Ogólnie akurat znam twoje zdanie na temat serwisu i nawet kiedyś odwiedziłem twoją stronę żeby się dowiedzieć i zacząłem czytać co tam jest napisane i co.... od dawna tam już nie byłem może moja wiedza nie jest tak rozległa a może po prostu nie masz daru tłumaczenia...

Bo przecież porównanie informacji na W3S i MDN + zawartości specyfikacji jest tak subiektywne i zależne od daru tłumaczenia…

Zapominasz że nie wszyscy piszą dla pracy ... a twoje podejście akurat do mnie powoduje że nie staram się ciebie posłuchać, ale dodatkowo mnie odpycha ... nazwij to uporem, głupotą, zawiścią czy jak tam epitet znajdziesz, ale tak jest a nie taka jest rola nauczyciela, moderatora który powinien zachęcać, podpowiadać, pomagać

Sorry, ale jak chcesz się bawić, to nie wciskaj ludziom praktyk ogólnie uważanych za złe jako coś, czego się używa na co dzień czy jako podstaw. Po prostu nie. Możesz się tak bawić samemu, ale nie dawaj takich rzeczy ludziom, którzy dopiero w to wchodzą.

Ale przecież i tak nie posłuchasz, bo masz problem ze mną, a nie ze złymi praktykami. I wiesz co? Zwisa mi to, ale nie zdziw się, gdy za każdym razem będę piętnował Twoje odpowiedzi za to, że przeczą temu, co środowisko webdevu wypracowało przez lata.

Chętnie posłucham/przeczytam bo naprawdę chętnie się dowiem może źle to sobie wyobrażam

Wszystko jest opisane w specyfikacji HTML5. W skrócie: każdy atrybut tego typu jest przepuszczany przez konstruktor Function, żeby uzyskać funkcję, której pierwszym argumentem jest właśnie event. Wygląda to mniej więcej tak:

var eventHandler = new Function( event, "alert( 'Nacisnąłeś A' );" );

Ostatecznie dostaniemy funkcję typu:

function eventListener( event ) {
    alert( 'Nacisnąłeś A' );
}

Pociąga to za sobą jednak bardzo poważne konsekwencje, np. fakt, że wszystkie tak zdefiniowane funkcje są deklarowane w globalnym scope – czyli z założenia łamią podstawową regułę pisania dobrego kodu JS (nic nie powinno wypływać do globalnego scope) i wymusza pisanie bardzo dziwnego kodu JS. Nie dość, że wszystkie funkcje w takich handlerach de facto muszą być globalne, to dodatkowo nie mają ustawionego domyślnie this na element, który wywołał zdarzenie, a event trzeba bezpośrednio przekazać – nie jest domyślnie nigdzie dalej przekazywane. addEventListener jest pozbawiony wszystkich tych wad + pozwala na o wiele więcej (zabawy z fazami zdarzenia czy handlerami obiektowymi, odpinanie zdarzeń, przypinianie wielu listenerów naraz…).

Biorąc to wszystko pod uwagę, dogłębne zrozumienie konceptu inline'owych event handlerów jest o wiele trudniejsze niż zrozumienie tego samego na poziomie samego JS-a, a równocześnie… nie wnosi to nic ciekawego.

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Ale przecież i tak nie posłuchasz, bo masz problem ze mną, a nie ze złymi praktykami.

Nie mam problemu z tobą tylko z twoim podejściem do innych na koniec poprzedniego komentarza wreszcie dałeś rade pomóc mi zrozumieć coś nowego a może źle zrozumianego a może po prostu uzupełniłeś moją wiedze ... po prostu ok i to jest komentarz!!

I wiesz co? Zwisa mi to, ale nie zdziw się, gdy za każdym razem będę piętnował Twoje odpowiedzi za to, że przeczą temu, co środowisko webdevu wypracowało przez lata.

W tym jest właśnie problem cała prawda może gdybyś nie piętnował tylko pomagał, wyjaśniał itd.

Sorry, ale jak chcesz się bawić, to nie wciskaj ludziom praktyk ogólnie uważanych za złe jako coś, czego się używa na co dzień czy jako podstaw. Po prostu nie. Możesz się tak bawić samemu, ale nie dawaj takich rzeczy ludziom, którzy dopiero w to wchodzą.

Masz rację może nie jestem mistrzem, ale pomagam jak mogę nigdy nie wciskam nic nikomu czasem żeby znaleźć sam rozwiązanie siedzę i kombinuje przez kilka godz. a jak ktoś prosi w tym o wyjaśnienie odpowiadam jak ja to rozumie i staram się to jak najlepiej opisać, czy nie na tym to polega? Bo wbrew pozorom dokumentacja na początku jest bardzo ciężko strawna...

komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.)

W tym jest właśnie problem cała prawda może gdybyś nie piętnował tylko pomagał, wyjaśniał itd.

No lol, po prostu lol. Zawsze podaję wyjaśnienie, odsyłam do odpowiednich materiałów (i to, wbrew pozorom, najczęściej nie do dokumentacji). I co z tego, skoro powiesz, że nie umiem tłumaczyć…? No po prostu machnąć rękami i mieć to gdzieś.

a jak ktoś prosi w tym o wyjaśnienie odpowiadam jak ja to rozumie i staram się to jak najlepiej opisać, czy nie na tym to polega?

Dlatego też zawsze tłumaczę, dlaczego Twój sposób nie jest najlepszy. Bo na tym to polega.

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

No lol, po prostu lol. Zawsze podaję wyjaśnienie, odsyłam do odpowiednich materiałów (i to, wbrew pozorom, najczęściej nie do dokumentacji). I co z tego, skoro powiesz, że nie umiem tłumaczyć…? No po prostu machnąć rękami i mieć to gdzieś.

To ty określiłeś że ' będziesz piętnował' nic nie napisałeś o wyjaśnieniu oraz tłumaczeniu?

Dlatego też zawsze tłumaczę, dlaczego Twój sposób nie jest najlepszy. Bo na tym to polega.

Wiem, wiem ale się uczę i każdy krok jaki staram się zrobić staram się zrobić najlepiej jak potrafię

komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.)

To ty określiłeś że ' będziesz piętnował' nic nie napisałeś o wyjaśnieniu oraz tłumaczeniu?

Polecam na przyszłość odnosić się do całego kontekstu wypowiedzi, bo z niego wynika czemu będę piętnował. Z mojej strony EOT.

komentarz 27 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

P.S.

keyCode Read only

Unsigned long (int)

A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.

Warning: This attribute is deprecated; you should use key instead, if available.

komentarz 27 lutego 2017 przez Comandeer Guru (601,590 p.)

Ale Ty szukasz dziury w całym :D Jak już mówiłem, nie ma sensu stosować key na chwilę obecną, bo tym samym odcinamy sobie wspieranie Safari bez żadnego sensownego powodu. Zresztą ciężko zdeprecjonować coś, co jest używane wszędzie. Inna rzecz, że trudno zdeprecjonować coś, co… nigdy nie było ustandaryzowane. Jak można przeczytać w specyfikacji UI Events:

These features were never formally specified and the current browser implementations vary in significant ways.

komentarz 28 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Ok chciałem już zakończyć ten temat ale.... nurtuje mnie pytanie:

Skoro w3schools to samo zło i złe praktyki, w MDN pl są aktualnie na bodajże HTML 4.xx a tak rozchwalony i wspaniały MDN ang. okazuje się znowu klapą to gdzie szukać tej super prawdy co i jak.....?

P.S. Możesz być dumny z siebie zacząłem przeglądać dokumentacje :)

komentarz 28 lutego 2017 przez Comandeer Guru (601,590 p.)

Czasami jedynym źródłem prawdy jest doświadczenie i studium konkretnego przypadku.

komentarz 28 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Czyli jak w życiu ... jakieś tam przepisy są ale zazwyczaj nijak się mają do rzeczywistości więc robisz jak .... po swojemu i liczysz się z ewentualnymi konsekwencjami ;)

komentarz 3 marca 2017 przez Comandeer Guru (601,590 p.)

@hoktaur wcale nie da się skorelować nagłego downvote'u mojej odpowiedzi z Twoją osobą, no po prostu

IMPOSSIBRU!

komentarz 3 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Właśnie przydała by się funkcjonalność w forum gdzie by dało radę podejrzeć (w formie popup'u) komu się podobało a komu nie ... szkoda może ktoś kiedyś to dopisze

odpowiedź 26 lutego 2017 przez Comandeer Guru (601,590 p.)

Podglądnij kod http://keycode.info/

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Patrz:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

przecież jak ktoś pierwszy raz widzi kod JS to się wystraszy....

1	komentarz 26 lutego 2017 przez Comandeer Guru (601,590 p.) Też mogę wejść na fejsa, wziąć pierwszy losowy kod JS, niemający nic wspólnego z tematem, i udowadniać, że to niezrozumiałe…