スキップしてメイン コンテンツに移動

投稿

ラベル(javascript)が付いた投稿を表示しています

javascripのinputイベントについて

日常の開発で、<input type="text">DOMのテキスト変更があった場合、よく changeベントを使っていた。ある開発のきっかけで、inputイベントを知った。 changeベントと比べると、inputイベントのほうがリアルタイム的にイベントが 発生するため、使いやすい。 詳細をみてみよう。 change イベントは”要素の変更が終わったときにトリガされます。”と定義されているが、 わかりにくい。例えば、<input type="text">の要素があるとして、この要素に「12345」の 文字を入力しようとする、①1を入力し終わったときに、イベントがくるのか、それとも②12345を 入力し終わったときなのか?正直よくわからないが、②という人がいるでしょう!どっちも違う。 正しいのが、要素に変更を加え、その要素からカーソルが外れた場合に、トリガーされる。 では、inputイベントについてみてみよ。 inputイベントは”要素の値が変更されるたびにトリガされます。”と定義されている。 これがわかりやすい。つまり、要素の値を変更した場合、即時にイベントが来る。 change イベントとinputイベントを使い分けて、 リアルタイム性を求めない場合、change イベントを使う。 テキストを変更して、そのテキストをプレビューしたいといったリアルタイム性を求める機能なら、 inputイベントを使ったほうがいいでしょう。

javascriptで配列の要素を削除するには、deleteを使っていい?

結論から、言うと、やめたほうがいい。 下記の例で見てみよう。 例) var arrayNum = []; console.log(arrayNum) ⇒この時点は、配列が空になっている。 つまり、[]。 arrayNum.push('a'); console.log(arrayNum); ⇒この時点は、['a']。 delete arrayNum[0]; console.log(arrayNum); ⇒この時点だと、[undefined × 1]、 なんと、undefinedの要素が入ってしまった。 spliceでやってみよ。 arrayNum.push('a'); arrayNum.splice(0, 1); console.log(arrayNum); ⇒ちゃんと、期待した結果になった。 []。 やはり、配列の要素を削除するには、spliceを使おう。

javascriptでオブジェクトが空かどうかをどう調べばいい?

javascriptでは、配列が空かどうかを調べるには、 array.length === 0で判断すればいいですが、 objectは、どうすればいい? 例) var hoge = {     fuga: 1,     moga: 2, }; console.log(Object.keys(hoge).length === 0); 結果が、trueなら、空と判断できるわけ。 以上。

javascriptで時間を表示してみる

javascriptで時間を取得する際に、いろいろめんどなので、下記にまとめてみた。 ■現在の時間 -------- // 現在の時間 var jikan = new Date(); // 時・分・秒を取得する var hour = ('00' + jikan.getHours()).slice(-2); var minute = ('00' + jikan.getMinutes()).slice(-2); var second = ('00' + jikan.getSeconds()).slice(-2); // 現在の日時 var nowTime = hour + '' + minute + '' + second; ■30秒後の時間 -------- // 30秒後の時間 jikan.setSeconds(jikan.getSeconds() + 30); // 時・分・秒を取得する var hour = ('00' + jikan.getHours()).slice(-2); var minute = ('00' + jikan.getMinutes()).slice(-2); var second = ('00' + jikan.getSeconds()).slice(-2); // 現在の日時 var nowTime = hour + '' + minute + '' + second;