前回に引き続きフォーム部品のまとめです。今回はプログラム側から値をセットしたり選択状態をコントロールするお話です。
前回のフォームに入力された値を取得したいという方は以下をどうぞ。
続きを読む
[JavaScript] フォーム部品に値をセットする（まとめ）
続きを読む
HTML5
続きを読む
[JavaScript] フォーム部品の入力値を取得する（まとめ）
Webサービスを作る際に必ずと言ってよいほど利用するフォーム部品ですが、ユーザーに入力された値を取得する際にお恥ずかしながら自分でもたまにど忘れすることがあるのと、新旧の情報がごっちゃになっているため脳内の整理も兼ねてまとめておきます。
フォーム部品に値をセットしたり、選択状態をコントロールしたい場合は以下をどうぞ。
[HTML5] 異なるオリジンのWebStorageの内容を取得する
WebStorage(localStorageとsessionStorage)は同一オリジン内のデータしか読み書きできません。名前空間を分けることでデータの衝突を防いだり、大切なデータを他のサイトから覗き見られることから守ってくれています。
しかしWebサービスを開発していると、サブドメイン間などでWebStorage内のデータを共有したいことがあります。そんなときに使うのが window.postMessage。指定したオリジンにだけWebStorage内のデータを渡したり、逆にデータを受け取ってWebStorage内に保存するといったドメインをまたいでの通信が可能になります。
※同一オリジンとは「スキーム(http)」「ホスト(example.com)」「ポート番号(443)」のすべてが同じ場合を言います。詳しくはこちらをどうぞ
[JavaScript] 数値がゾロ目か判定する
小ネタです。
指定された数値がゾロ目かどうかを判定する正規表現を試してみます。説明するまでも無いと思いますが「1111」「8888」など同じ数だけで構成された数値をゾロ目と言います。
結論から言うと以下の通り。
/**
* ゾロ目判定
*
* @param {number} num
* @returns {boolean}
*/
function isZorome(num){
return String(num).match(/^([0-9])\1+$/) !== null
}
正規表現の\1はキャプチャグループと呼ばれ、直前のグループがマッチした場合にそれを参照することができます。+は直前のパターンを1個以上繰り返すことを意味するため、/^([0-9])\1+$/とすることで最初の数値が最初から最後まで連続していることを示すことができます。
実際に実行すると以下のような結果になります。
console.log( isZorome(12345) ) // false
console.log( isZorome(11111) ) // true
console.log( isZorome("12345") ) // false
console.log( isZorome("11111") ) // true
console.log( isZorome("abcde") ) // false
console.log( isZorome("aaaaa") ) // false
例えば数値のみのパスワード(暗証番号)として入力された数値がゾロ目だったら警告を出すといった用途に使えるかもしれませんね。
正規表現を使わないパターン
split()で1桁ずつの数字にばらした配列に変換し、everyでチェックします。
function isZorome(value){
const num = String(value).split('')
return(
(! isNaN(num[0])) && (num.every(v => v === num[0]))
)
}
お好みの方法でどうぞ。
[HTML5] リンク先のファイルを超簡単にダウンロード指定する – download属性
なんとa要素にdownload属性を追加するだけで、ページ(ファイル)を表示するのではなく、Webブラウザにファイルを保存するかダイアログを表示させダウンロードを促すことが可能です。
<a href="foo.txt" download>foo</a>
download属性にファイル名を指定すれば、デフォルトのファイル名として利用できます。
<a href="foo.txt" download="bar.txt">foo</a>
以下から実際にお試しいただけます。
[JavaScript] オンライン・オフラインを判定する
小ネタです。
スマホを使いながら電車などで移動していると通信がプツプツ切れます。家でPCを使う場合と違って通信状況が安定しません。そんな時に活躍するのがブラウザがオンラインかどうかがわかる navigator.onLine です。
このプロパティを参照するだけでブラウザがネットワークに接続しているかチェックすることができるというわけです。
if( navigator.onLine ){
console.log('オンライン')
}
else {
console.log('オフライン')
}
WebStorageなどと組み合わせ、オフラインであればローカルにデータを一時的に保存し、オンラインになったら同期をするといった処理が実現できます。
[JavaScript] 連想配列に forEach を使用する
小ネタです。
forEachは配列用のため、連想配列(ハッシュ)には通常使うことができません。そんなときにはObject.keys()を介すことで利用が可能になります。
const hash = {
apple: 100,
banana: 130,
orange: 98
}
const result = [ ]
Object.keys(hash)
.forEach(key => { result.push(`${key}: ${hash[key]}` )})
// [ 'apple: 100', 'banana: 130', 'orange: 98' ]
console.log(result)
参考ページ
[JavaScript] 配列の値が条件を満たすか検証する – some(), every()
every()とsome()は配列内の要素をテストし、条件を満たしていれば最終的にtrue、満たしていなければfalseを返します。
/**
* 偶数チェック
*/
const list = [1, 2, 3, 4, 5]
const check = value => ((value % 2) === 0)
// テストを行う
const check1 = list.every(check) // すべて偶数か (AND)
const check2 = list.some(check) // 一つでも偶数か (OR)
// 結果表示
console.log(check1) // false
console.log(check2) // true
every()はすべての要素が条件を満たしているかどうか、some()は一つでも満たしているかの違いになります。要はeveryがANDで、someがORですね。
続きを読む
[JavaScript] 配列の全要素に処理を行い新しい配列を作成する – map()
map()を利用すると、元になった配列の要素を順番に処理していき新しい配列を生み出すことができます。mapは元になった配列を変更しません。
/**
* 2乗する
*/
const list = [1, 2, 3, 4, 5]
const newlist = list.map( value => value * value)
// [1, 4, 9, 16, 25]
console.log(newlist)
mapはよくforEachと比較されますが、forEachは戻り値を返さない特徴があります。戻り値を利用しない場合はforEachを使った方が一般的に高速に処理が行なえます。
[JavaScript] 配列からひとつの値を生成する – reduce()
reduce()は配列内の値を順番に処理していき、最終的に1つの値を生成することができます。
/**
* 配列の値をすべて足す
*/
const list = [1, 2, 3, 4, 5]
const sum = list.reduce( (prev, current) => prev + current )
// 15
console.log(sum)
returnした値が、次に処理する際のprevに入っています。returnする値は文字列や数値以外には配列やハッシュでもかまいません。初見だとちょっと理解しにくいかもしれませんねｗ
[JavaScript] 配列から特定の要素だけを取り出す – filter()
filter()は配列の要素を順番にテストしていきtrueが返された要素だけの新しい配列を返却します。
/**
* 配列から偶数だけを取り出す
*/
const list = [1, 2, 3, 4, 5]
const newlist = list.filter( value => ((value % 2) === 0) )
// [2, 4]
console.log(newlist)
- 元になった配列(list)は変更されません。
- すべて
falseになった場合は空の配列が返ります。
続きを読む
[HTML5] アドレスバーのURLを変更する – history.pushState()
SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外部からリンクを貼る際に非常に不便。
そこでHTML5から登場したWebブラウザの「履歴」を操作するHistoryAPIを利用することで、SPAにも関わらず情報が書き換わったタイミングでブラウザのアドレスバーに表示されているURLを書き換え、別のページに遷移したかのように見せることができます。
// example.com/foo から example.com/bar に変更
history.pushState({}, '', '/bar')
厳密にはpushState()を実行すると履歴が新しく追加されます。現在表示されているページの情報にURLを発行(定義)するイメージですね。
続きを読む
[HTML5] JavaScriptでtitleタグを変更する
小ネタです。
titleタグの内容を指定した文字列に変更する場合は2つの方法があります。
まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。
document.title = 'foo'
次にtitle以外の要素を変更するときと同様にquerySelector()で返却されたHTMLElementを操作する方法もあります。
document.querySelector('title').textContent = 'foo'
[HTML5] 要素をフェードアウト/フェードインする
指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。
ここでは大きく2種類の方法を取り上げます。
HTML5から登場したWeb Animation APIを利用したものと、はるか以前から利用されてきたsetInterval利用する物です。IE11を対象としないのであれば前者の方が滑らかに動いてくれるのでおすすめです。
続きを読む
[JavaScript] 文字列中の絵文字だけをHTML Entityへ変換する
Webブラウザ上で文字列中に含まれたUnicodeの絵文字だけをHTMLEntityへ変換します。
const text = '🍣がうまい😁！'; // 対象の文字列
const result = emoji2HTMLEntity(text); // 変換
console.log(result);
以下のような実行結果になります。
例えばすでに存在するMySQLのテーブルにデータがutf8で保存されており、すぐにutf8mb4に移行できないような場合に活躍するかもしれません。
