カテゴリー: JavaScript

【JS】FormDataと戯れる

こんにちは、しきゆらです。

今日は、JavaScriptでフォームのデータを簡単に取得したり、XMLHttpRequestなどで送信しやすいFormDataオブジェクトに触れたら便利だったので、メモしておきます。

 

formタグのデータをJSで取得し、それに追加して他のデータを送りたい場合などはよくあると思います。

そんな時は、formの中にhiddenでinput要素を配置するとか、方法はいくつかあると思います。

でも、HTML的にはhiddenの要素は意味がないので、データの扱いはJSだけで完結していたいですよね。(個人的な意見です)

 

そこで使えるのがFormDataというもの。

formタグの中身をそのままkey, valueの組み合わせで表現できる魔法のようなオブジェクトです。

参考:FormData – MDN

簡単な使い方をまとめておきます。

 

Continue reading “【JS】FormDataと戯れる”

【HTML/JS】NodeListはArrayにあらず

こんにちは、しきゆらです。

今回は、NodeListなどのArrayっぽいオブジェクトの扱いについてメモしておきます。

 

DOMを扱うとよく現れるNodeListなど、Arrayっぽくあるものがちょくちょくあります。

Arrayに似ているけど、concatとかArrayの便利メソッドは使えません。

このArrayっぽいものをArrayに直す方法です。

[].sliceはどのブラウザでも動くようです。

IEを無視すれば、以下のものでも良さそうです。

 

今回のことは、ほとんどMDNに書いてあることでした。

意外と見えていないんだなぁと。

以下のあたりを見ました。

参考

 

 

今回はここまで。

おわり

[HTML]formをエンターで送信したい

こんにちは、しきゆらです。

急に暑くなってきた今日この頃、いかがお過ごしでしょうか。

 

今回は、HTMLのお話です。

 

HTMLのformタグで、エンターを押した時に送信したい、という場面になりました。

しかも、送信する部分に関してはJSでコードを書いていました。

例としては、以下のような感じ。

ユーザ名IDを入力してもらい、ボタンを押すと入力された情報をサーバへ送りログイン処理を行う、というもの。

これを、エンターを押した時も同じように処理してほしい、というのが今回の話。

 

サーバサイドのスクリプトも自分で書いていたので、HTMLのsubmitに合わせてデータを取得できるようにすればいいんですが、面倒だったのでlogin関数でなんとかできないかな、と思っていました。

結論としては、formタグに「onsubmit=”return login();”」と書き込んで、

login関数で 「return false;」とすれば解決でした。

onsubmitは、onclickのように関数名を渡せばいいんだと思っていましたが、違うようですね。

onsubmitは、関数等の処理を返す必要があるようです。

 

ただ関数がreturnすればいいのではなく、その値をさらにリターンするイメージですかね。

参考:onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法 – 小粋空間

 

また、テキストボックスの数によっても挙動が異なるようです。

参考:【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 – SOFTELメモ

 

知らないことがたくさんありますね。

今回はここまで。

おわり。

【HTML/JS】要素のテンプレートを作る

こんにちは、しきゆらです

タイトル通り要素のテンプレートを作るためのタグの存在を知ったためメモしていきます

 

これまでは、特定のタグをテンプレートとして利用するときは

CSSでdisplay:noneとかをかけて見えなくしておいた要素をelement.cloneNode()で複製していくスタイルでした

 

そんな中、HTML5から追加された(?)templateタグというものを見つけました

これの使い方や、他の方法との速度の差などをまとめていきます

 

Continue reading “【HTML/JS】要素のテンプレートを作る”

【JS/Electron】MacにElectronを導入する

こんにちは、しきゆらです

今回はMac上にElectronを導入していきます

Electronとは、簡単に言えばChromeの中身であるChromiumを使ってデスクトップアプリを作ることができるフレームワークのことで
Webの技術(HTML/CSS,JavaScript)を使ってアプリを作ることができます
テキストエディタのAtomのために作られたもので、現在はみんなが使えるように公開されています
Atomもちろん、VS CodeやPC版のSlackなどもElectronを使って作られているようです
手順等は続きから

Continue reading “【JS/Electron】MacにElectronを導入する”

【JavaScript】JS高速化計画 イベント編

こんにちは、しきゆらです

大層なタイトルをつけましたが、続くかどうかはわかりませんね

あと、内容がお行儀がいいかどうかも保証できませんよっと

 

さて、本題

JSに速度を求めている今日この頃

最近は、少しでも速くなる方法があるのならば、それを使おうと思っています

 

ということで、今回はJSでよく使うであろう

DOMにイベントリスナーを追加する部分を見てみます

 

調べてみると、イベントリスナーを追加するときには

  • addEventListener
  • onXXX

がよく使われていて

両者には違いがあるということはよく書かれています

 

でも、速度の違いは・・・?

ということで簡単なコードを使って検証して見ました

詳しくは、続きから
Continue reading “【JavaScript】JS高速化計画 イベント編”

【JavaScript】JSを高速化するいくつかの方法

こんにちは、しきゆらです
最近はRubyよりもJSを書いている時間の方が長いです
JSであれこれやっていると、どうしても表示に時間がかかったり
途中でフリーズした?と思うくらい固まってしまうことが増えてきます
(書き方が悪いだけ・・・?)
その問題を解決する際の手がかりとして、いくつか実践してみたことがあるので
それをメモしておきます

Continue reading “【JavaScript】JSを高速化するいくつかの方法”

【HTML・JavaScript】入力をリアルタイムに取得する

こんにちは、しきゆらです

今回は、inputやtextarea等でユーザの入力をリアルタイムに取得する方法をメモ

 

入力されたことを取得するイベントトリガー(?)としてchangeは知ってましたが

これは入力されたあと、フォーカスが外れた時に発火するため

入力された時点で何かしたい時には使えませんでした

 

その中で、リアルタイムに入力を取得するためのトリガーとしてinputというものがあることを知りました

参考:JavaScript:テキスト入力関連のイベント、onChange,onInput,onKeyUp – hacknote

これを利用すれば、例えば入力がある時だけボタンをクリックできるようにするときなど二利用できると思います

 

これを利用せず、頑張ってJSで自分で作るときはきっとこんな感じになるのでは・・・?

今回はこれだけ
おわり

【JavaScript】配列の中に要素を含んでいるかを調べる

こんにちは、しきゆらです

今回は、JSの配列の中に指定した要素があるかどうかを調べる方法をメモしておきます

 

RubyではArrayの中に指定した要素が含まれているかを調べるinclude?というメソッドがありますが

JavaScriptではこのようなメソッドはないようです

 

調べてみると、指定した要素が配列内にあるとき、その要素の添え字を返すindexOfというメソッドが代わりとして利用できそうです

Array.prototype.indexOf() – MDN

配列内に指定した要素があれば、その添え字を

ない場合は-1を返すメソッドです

 

これを利用すれば、indexOf(“hoge”) >= 0の時とすることで

配列の中に要素がある時にtrueを返すようにできます

 

今回はこれだけ

おわり

【JavaScript】Canvasで使う色の指定を一定幅で行う

こんにちは、しきゆらです

タイトルは何を言っているのかわからないかもしれません・・・(語彙力、説明力?不足)

例えば、色を3段階とか10段階とかのような方法で指定する方法を思いついたのでメモ

 

Processingという言語では、色を一定の幅ごとに変化するように指定することができます

colorModeという関数を用いて、RGBからHSLに変更し、合わせて色の幅を指定することで

上記のようなことができます

 

これをJSでも使いたい!

でもどうすれば・・・

と思って調べてみたら、方法を思いついたのでメモ

Continue reading “【JavaScript】Canvasで使う色の指定を一定幅で行う”