Html5で新しくなったこと

はじめに

HTML5は、次世代のHTMLであり、HTML、XHTML、HTML DOMの新しい標準となるものです。

はじめに

HTML5は、W3CとWHATWGの共同作業によって生まれたものです。

HTML5で制定されたルールの一部をご紹介します。

• 新機能は、HTML、CSS、DOM、JavaScriptをベースとしたものであるべきです。
• 外部プラグイン（Flashなど）の必要性の低減
• エラー処理の改善
• スクリプトを置き換えるためのより多くのマークアップ
• HTML5はデバイス非依存であるべき
開発プロセスを透明化する

ブラウザ対応

Chrome、Firefox、Safari、Operaの最新版はHTML5の一部の機能をサポートし、Internet Explorer 9はHTML5の一部の機能をサポートする予定です。最新バージョンのChrome、Firefox、Safari、Operaは、一部のHTML5機能をサポートしています。Internet Explorer 9は一部のHTML5機能をサポートし、IEまたはChromium（Chromeのエンジニアリングまたは実験バージョン）をベースとするMaxthon、360、Sogou、QQ、Cheetahもサポートする予定です。

新機能

HTML5で追加された興味深い新機能をいくつか紹介します。

1. セマンティックタグ header footer nav aside section meau template article audio video canvas etc.

2. webStorageのストレージ機構 sessionStorageとlocalStorage

• webStorageです。HTML5を使用すると、ユーザーのブラウジングデータをローカルに保存することができます。以前は、ローカルストレージはクッキーを使用していましたが、ウェブストレージはより安全で高速である必要があり、データはサーバーに保存されず、ユーザーがサイト上のデータを要求するためにのみ使用されます。また、サイトのパフォーマンスに影響を与えることなく、大量のデータを保存することが可能である。データはキーと値のペアとして存在し、ウェブページ上のデータはそのページからのアクセスのみが許可されます。
  

      Web StorageはさらにsessionStorageとlocalStorageの2種類に分けられ、この2つはStorageのインスタンスである。sessionStorageはセッションのデータを保存し、ブラウザを閉じて無くなり、localStorageはクライアントのローカルにデータを保存することは、文字通りの意味から明らかです。そのAPIは以下のメソッドを提供する。

setItem (key, value) -- Save the data, store the information as a key-value pair.

getItem (key) -- Get the data, pass in the key value to get the corresponding value.

removeItem (key) -- Remove individual data, remove the corresponding information according to the key value.

clear () -- remove all data

key (index) -- Get the key of an index

• localStorage：時間制限のないデータストレージ
  

      localStorageのライフサイクルは永続的です。localStorageを使用してデータを保存した場合、ブラウザを閉じても、上記のように積極的に削除しない限り、データは消えません。 localStorageには、データのレコード数を確認するためのlengthプロパティがあります。これは以下のように使用します。

var storage = null; // determine if the browser supports localStorage
    if(window.localStorage){
        storage.setItem("name", "Rick"); //call the setItem method to store the data
            alert(storage.getItem("name")); //call getItem method, popup box shows name as Rick
            storage.removeItem("name"); //call the removeItem method to remove the data
            alert(storage.getItem("name")); //call getItem method, popup box shows name as null
    }

• sessionStorage: セッションのデータストレージ
  

      sessionStorageのライフサイクルは、ブラウザが閉じられるまでです。sessionStorageもlengthプロパティを持ち、基本的な判断や使い方はlocalStorageと同じです。以下の点に注意が必要である。
     (1) ページを更新しても、データが消えることはありません。
     (2) 現在のページで開かれたリンクのみが、sessionStorageのデータにアクセスできます。
     (3) window.openでページを開き、localtion.hrefメソッドを変更すると、sessionStorageの内部データにアクセスできるようになります。

history.go(-1) // go back one page 
history.go(1) // go one page forward 
history.go(2) // go two pages forward 

go()メソッドに文字列の引数を渡すこともできます。その場合、ブラウザは履歴の中でその文字列を含む最初の場所にジャンプします ----- 前進することも後退することもできます。どの位置が一番近いかによります。履歴にその文字列が含まれていない場合、このメソッドは何もしません。

history.go('wrox.com') // Go to the most recent wrox.com page

go( )の代わりに、back( )とforward( )という2つの省略記法を使用することもできます。どちらもブラウザの「戻る」「進む」ボタンを模倣したメソッドです。

history.back() // go back one page
history.forward() // go forward one page

4. 新しいフォーム要素 入力 datalist datetime date month week time color number email address range tel url search etc.

5. 再生用マルチメディア、ビデオ、オーディオ要素

6, 描画用キャンバス

以上、Html5に追加された新機能の詳細をご紹介しましたが、Html5の新機能については、Script Houseの他の関連記事にもご注目ください!