2014年2月15日土曜日

html5の必須入力欄のスタイル定義

cssを使用してhtml5で追加された必須入力欄(required属性が設定されいる項目)のスタイルを定義する方法

required擬似クラスに対してスタイル定義をすることで、required属性が設定された入力欄のスタイルを変更出来る。
    input:required {
      background-color: lightcoral;
    }

[html5]日付・時間系の入力欄

日付

input type="date"で日付入力欄になる

<input type="date" >

出力例


時間

input type="time"で時間入力欄になる

<input type="time" >

出力例


年月

input type="month"で時間入力欄になる

<input type="month" >

出力例

2014年2月9日日曜日

[CoffeeScript]オブジェクトのプロパティを一覧表示

オブジェクトのプロパティの値をCoffeeScriptで一覧表示する方法。

CoffeeScriptでは、「for of」を使ってプロパティ数分ループを行って処理をする。
JavaScriptの場合は、「for in」なので微妙に違いがあって間違えやすい気がする。

コード例

for key, value of 変数名で、オブジェクトの全プロパティに対して処理が出来る。
hoge =
  k1: 'v1'
  k2: 'v2'

for key, value of hoge
  console.log key, ' = ', value

class Hoge
  prop1: 'prop1'
  prop2: 'prop2'

for key, value of new Hoge()
  console.log key, ' = ', value

実行結果

オブジェクト、インスタンスともにプロパティ名とプロパティの値が出力される。
k1  =  v1
k2  =  v2
prop1  =  prop1
prop2  =  prop2