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

開発環境

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

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

12-4.

ブロックを見えなくする方法としては、

1. width, heightを0、overflow属性をhiddenに設定して境界からはみ出す内容を切り取る。
2. ブロック全体をクリップする。
3. display属性をnone設定にする。
4. visibility属性をhiddenに設定する。

がある。(ただし若干ブロックを見えなくする際若干挙動が違うものがある。

var d0 = document.getElementById("d0"); // 方法1 d0.style.width = 0; d0.style.height = 0; d0.style.overflow = "hidden"; // 方法2 d0.style.position = "absolute"; d0.style.clip = "rect(0px,0px,0px,0px)"; // 方法3 d0.style.display = "none"; // 方法4 d0.style.visibility = "hidden"; // 元に戻す d0.style.width = "auto"; d0.style.height = "auto"; d0.style.position = ""; d0.style.clip = "auto"; d0.style.display = ""; d0.style.visibility = "visible";

<div id="d0">見えなくするブロック</div>

 

12章はCSSやウェブページへのスタイルシートの適用方法について知識を前提としているということなので、CSSの基本を理解するために、『CSS完全ガイド 第2版』(Eric A. Meyer著、株式会社クイープ訳、オライリー・ジャパン、2005年、ISBN978-4-87311-232-9)を入手、あわせて読み始める。

 

また、『初めてのJavaScript』も数回繰り返してこなしてきたので、応用して楽しむために『Google Maps Hacks 第2版―地図検索サービスをもっと活用するテクニック』 リッチ・ギブソン+スカイラー・アール著、武舎広幸+福地太郎+武舎るみ、オライリー・ジャパン、2007、ISBN978-4-87311-341-8訳も入手。

基礎を繰り返すために『初めてのJavaScript』の練習問題を1日1問以上は解きつつも、その合間にGoogle Maps APIを利用していろいろと遊んで楽しむ計画！