プログラミング学習の記録 644.1 12章(動的なページの作成)の練習問題4 『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 (Webプラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の12章(動的なページの作成), 練習問題4を解いてみる。

12-4.

2種類とはいわず、それ以上の方法を使ってブロックを見えなくする例を作ってみる。

ブロックの幅と高さを0、そしてはみ出した部分をoverflowをhiddenにして隠す方法。

コード

$('#d0').attr('style', 'width:0; height:0; overflow:hidden');

見えなくなるブロック

 

クリッピング。

コード

$('#Div1').attr('style', 'position:absolute; clip: rect(0px, 0px, 0px, 0px)');

見えなくなるブロック

 

displayプロパティをnoneに設定。

コード

$('#Div2').attr('style', 'display:none');

見えなくなるブロック

 

visibility(可視性)をhiddenに設定。

コード

$('#Div3').attr('style', 'visibility:hidden');

見えなくなるブロック

 

opacity(透明度)を0に設定。

コード

$('#Div4').attr('style', 'opacity:0');

見えなくなるブロック

 

visibilityとopacityの設定を利用する方法はレイアウトに影響せず、他の方法はレイアウトに影響するみたい。

合わせて読んでいる書籍。

1. 14章でPHPとJavaScriptを組み合わせたWebアプリケーションが登場したので『初めてのPHP & MySQL 第2版』(Micbele E. Davis、Jon A. Phillips 著、西沢 直木 訳、オライリー・ジャパン、2008年、ISBN978-4-87311-365-4)
2. JavaScriptのライブラリーを活用できるようになるために『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)
3. JavaScript、APIを使って遊ぶために『Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック』(Rich Gibson, Schuyler Erle 著、武舎 広幸、福地 太郎、武舎 るみ 訳、オライリー・ジャパン、2007年、ISBN978-4-87311-341-8)
4. HTML5について学習するために『入門 HTML5』(Mark Pilgrim 著、矢倉 眞隆 監訳、水原 文 訳、オライリー・ジャパン、2011年、ISBN978-4-87311-482-8)

PHPの学習が止まったまま(というかほとんど進んでいない)だけど、そろそろ再開しようか検討中。

前の周では少しずつjQueryを使ってみたけど、今回はもっとjQueryを活用していく計画！