飛耳長目

Javascript

JavaScript とは

Netscape Communications 社が開発したプログラミング言語で、同社の Netscape Navigator 2.0 で初めてサポートされ、Microsoft 社の Internet Explorer 3.0 でも同様の機能がサポートされた。 JavaScript を用いることにより、ブラウザで表示するウェブページの上で、時刻を表示したり、パスワードを認証したり、画像をポップアップ表示したりできる。
Javascript例文集

Javaとの関係

JavaScript は元々 LiveScript という名前で開発されていたが、Sun Microsystems 社が開発した Java が流行しはじめたことや、Netscape 社と Sun 社が技術提携したこともあり、JavaScript と名前を変えた。両方ともC言語を祖先として生まれ、記述も似ているが、まったく別物である。

DHTML(ダイナミックHTML)

DHTMLは Internet Explorer 4.0 や Netscape Communicator 4.0 でサポートされた技術で、JavaScript、スタイルシート、レイヤ、フィルタ、ダイナミックフォントなどの技術の総称。両社が独自に開発したため、中身はいろいろと異なるが、JavaScript は両社に共通するダイナミックHTMLの中核となる技術で、Webで頻繁に使われるようになった。

参照サイト

 

Bookmark

IEお気に入りに追加する

<script LANGUAGE="JavaScript">
if ((navigator.appName == "Microsoft Internet Explorer") 
&& (parseInt(navigator.appVersion) >= 4)) 
{ 
var url="http://sites.agorian.com/"; 
var title="ΣSNS飛耳長目"; 
document.write('<A HREF="javascript:window.external.AddFavorite(url,title);"'); 
document.write('<small>Bookmark ΣSNS飛耳長目!</small><br></a>');} 
else { 
var msg = "<b>Bookmark ΣSNS飛耳長目!</b>"; 
if(navigator.appName == "Netscape") msg += " <b> - press(Ctrl-D) on your keyboard.</b>"; 
document.write(msg); 
} 
</script>

※Mozilla FirefoxやGoogle Chromeの場合はキーボードから Ctrl+D を入力する。>

Document

◆文書の書き込み document.write(msg [, msg...])

◆最新更新時刻 document.lastModified

◆リンク元URL document.referrer

◆色・背景色  ・document.bgColor  ・document.fgColor  ・document.linkColor  ・document.alinkColor  ・document.vlinkColor 色の値を指定して、背景色を変更する。

Interactive

<script type="text/javascript" src="./script/popup/popup.js"></script>

Tooltip

 リンクにマウスを重ねると 説明?が表示される。説明の書式は #help_tooltip で指定する。

<a class="tooltip" title="説明内容” href=#">説明</a>

 

Popup

1. 写真をポップアップ表示。sample1

<a class="popup" href="url">写真</a>

 

2. ウェブページをポップアップ表示。 sample2 標準サイズ 800x500

<a class="popup" href="url">標準サイズ</a>

 

3.ウィンドウサイズをrelで指定する。sample3 表示サイズ 600x400

<a class="popup" rel="width:600;height:400" href="url">指定サイズ</a>

 

4. YouTubeビデオを表示 sample4 520x420

class="popup flash" rel="width:520;height:420"

 

5. ページ内のID属性のセクションを表示 〔例〕#header

※onclickで開くとき 

sample
<a onclick="window.open(this.href,'popup','resizable=yes,location=no,menubar=no, scrollbars=no,status=no,toolbar=no,fullscreen=yes,dependent=no,width=400,height=300, top=10,left=10,status'); return false" href="http://agorian.com/img/test.jpg">sample</a>

 

Toggle

1. 属性にclass="toggle"と書くと次のパラグラフがトグル表示

Next ここがトグル表示される

Prev ここがトグル表示される

3. IDが 001 のパラグラフをトグル表示 sample5 id=001を表示
<A href="#001" class="toggle id">001を表示</A>
<P id="001">ここが表示</P>

ここが id="001" と書いた部分

その他

1.#headerにジャンプする。<a class="jump" href="#header">header</a>

2.ul class="rotate"のリスト項目が順番に表示される。sample

 

リストを順に表示

2.ul class="rotate"のリスト項目が順番に表示される。

  • 最初のテキスト
  • 二番目のテキスト
  • 終わりのテキスト

※リストタイプを空白にしたいときは、 style="list-style-type: none" を書く。

  • 最初のテキスト
  • 二番目のテキスト
  • 終わりのテキスト

Tabs

※ログイン状態ではスクリプト競合があるため動作しない。Input formatはAdminで作成する。

数字でみる日本の高齢化

  • 人口の変化
  • 資産運用状況
  • 世界の高齢化

タブで表示を切り替えるスクリプトの例です。簡単なチュートリアルやヘルプを記述するのに便利である。

タブ部分とスクリプトの記述

<div class="tabs small">
<h3>数字でみる日本の高齢化</h3>
<ul>					
<li id="myTabs_0" class="current"><span class="hrefClone">人口の変化</span></li>
<li id="myTabs_1" class=""><span class="hrefClone">資産運用状況</span></li>
<li id="myTabs_2"class=""><span class="hrefClone">世界の高齢化</span></li>
</ul>
<script>
DOC_Tabs.addTabGroup("myTabs", "", "standard", "", "", "");
DOC_Tabs.addTab("myTabs_0", "tab1");
DOC_Tabs.addTab("myTabs_1", "tab2");
DOC_Tabs.addTab("myTabs_2", "tab3");
DOC_Tabs.init("myTabs");
</script>
</div>

テンプレート

  • タブ1
  • タブ2
  • タブ3
タブ1の内容

Toggle Menu

自営サイトやブログに関心を持って自作を始めてから10年になる。眠ったままの古いブログが散在する。オープンソースを使ったサイト制作などの実験場として作った「デジタル移民の冒険」も新規記事投稿は数ヶ月に一回くらいの頻度になった。デザインは7年前と同じだ。「飛耳長目」はメモ代わりに使っているが、これもデザインは4年前から変わっていない。Movable Typeを使ったブログは十数件あるが放置した状態だ。

それでもまた新しいデザインのサイトを作ってみようかという気が起こる。困った性分かも知れない。きっかけは旅先で知り合った人たちに撮った写真・動画、旅日記をお見せするサイトの必要性を感じたことだ。aagorian.comやelmblog.comをお教えするが、どこに何が掲載されているかは分からない。そのときの気分であっちこっちに書くから、本人も「さて、どこに書いたのだろう?」と探す羽目になる。 「青春18ぶらり旅」と題したサイトを作って、旅の写真・動画・日記を整理しようとしている。これまでも何度か試みたのだが…。

今回はちょっと本気になって取り組もうと思っている。昨年だったか、TripAdvisorというサイトで訪問した世界の都市を設定したら数百箇所に及んだこの三年間の日本だけでも100箇所を超えているだろう。これらを整理するためには、自分でも分かるようなメニュー体系をつくり、それをウェブで実現しないといけない。 手作りは非効率的なのでブログツール、メニューや動画再生のスクリプトなどを活用しないといけない。「そういえば昔こんなツールがあったな?」と思い出して探すが見つからなかったり、見つかっても使い方、カストマイズ方法を忘れていたり、ブラウザ(HTML/CSS)互換がなくなって動かなかったりする。日頃からの掃除・整頓・整理を怠っているからだ。

前置きが長く、愚痴をこぼすことになったが、ここで引用したトグルメニューのスクリプトも使いこなす勉強をしなおした。HTML/CSS/Scriptが相互に絡み、しかもブラウザ間の整合性や互換性をとるのに一苦労だ。一番の問題は、ほかのブラウザでは正常に表示されるのに、IE9だけが動かなかったりレイアウトが乱れたりすることだ。加えて、この1~2年、ChromeやFirefoxでも問題が発生することが目立つようになった。

動いていたのがある日突然動かないことに気づくことがある。ブラウザが自動アップデートするからいつバージョンが変わって動かなくなったのかを特定するのに時間がかかる。Chromeは自分でダウンロードしバージョンアップすることができない。勝手にバージョンアップされる仕組みなので問題が発生すると復旧が厄介だ。

最近はHTML5/CSS3対応、古いスクリプトやオープンソースなどの改版が多いので、日頃から意識していないとある日突然動かなかったリすることがあるので要注意だ。ブラウザ互換、アクセシビリティの確保には苦労する。ブラウザ機能・互換の比較を整理しておかないと余計な時間を取られる。

〔例1〕2005年6月作成 (リンクは適当で切れていたりする) http://agorian.com/script/menu/toggle.html

〔例2〕2005年5月作成(元のスクリプトは2004年3月) http://agorian.com/script/menu/halomenu/index.html

〔例3〕2006年5月作成 http://agorian.com/script/menu/halomenu/original/index.html

〔例4〕2012年9月作成開始(例1のCascading Menuをカストマイズ) http://agorian.com/trip/index2.htm

onContextMenu

マウスの右ボタンが押された時に発生するイベント。イベントからの戻り値がfalseの場合、コンテキストメニューは表示されない。ただし、Mac版Internet Explorer 5、Operaは、このイベントには対応していないため、右クリックするとコンテキストメニューが表示される。 

〔例〕 Sample Code

<script type="text/javascript"><!--
window.onload = function() {
document.oncontextmenu = function(){
document.getElementById("result").innerHTML = "ここに書いたテキストがid="result"の位置に表示される。";
return false;
}
}
// --></script>
<h1>ページ上で右ボタンをクリック</h1>
<div id="result" style="width:300px;color:red;border:solid 1px red;">ここに表示</div>

 

ページ上で右ボタンをクリック

ここに表示される。

画像をダウンロードできないようにするときに利用できるが、あまり意味はない。

ページレイアウト

過去に作成したWebサイトのCSSは、WordpressやMovable Typeのテーマを参考にした。これらは汎用ブログツールなので複雑かつサイズが大きい。そのためカストマイズに苦労した。

手作りページのCSSはシンプルにして、後で手直しがしやすくするほうが良い。最近になって、display:table; を利用すると二段、三段のページ・レイアウトを簡単に作れることを知った。

〔例〕 固定-可変ー固定のレイアウト http://agorian.com/style/sample/layout.html

Left_Bar

display : table ;

横幅が、固定100px-可変ー固定200px の三段組みレイアウトの例を示す。
IE8でもサポート(2008/4)された。

CSS

#body {
	width: 100%;
	display: table;
}
#Left_Bar, #content, #Right_Bar {
	display: table-cell;
}
#Left_Bar {
	width: 100px;
	background-color: gray;
}
#content {
	background-color: white; padding:10px;
}
#Right_Bar {
	width: 200px;
	background-color: silver;
}

HTML

<div id="pagebody">
	<div id="Left_Bar">Left_Bar</div>
	<div id="content">content</div>
	<div id="Right_Bar">Right_Bar</div>

</div>

Right_Bar

中級

文字サイズ変更

中高年向きのSNSで見た文字サイズ変更ボタンを学習して作った。三種類のCSSを作ってスクリプトを使って切り替える。原理が分かれば比較的容易に実現できる。ただし、いまはほとんどのブラウザで文字サイズもイメージも同時に変更できるので、このスクリプトは時代遅れかも知れない。

文字サイズの変更はこちら

※現在はブラウザの一機能になっている。拡大 Ctrl+ 縮小 Ctrl- 標準 Ctrl0

写真スライド

snanail2.18

XPの時代に見つけたフリーソフトsnanailを改変したスクリプト。HTMLに書くだけで、写真のスライドショーを表示できる。写真ファイル名をスクリプトの中に直接書く。写真枚数number、表示間隔dekay、繰返し回数timesなどを設定する。好みに応じて開始・停止ボタンや前後の写真ボタンを付けられる。一枚ずつ順に表示することもできる。

開いたときに開始するときは、BODYタグの属性に onLoad="animate(); を書く。

※本ページの記事先頭に<body onLoad="animate();">を書いた。文法違反なので記事を編集すると自動的に削除される。

文字サイズ変更

中高年向きのSNSで見た文字サイズ変更ボタンを学習して作った。三種類のCSSを作ってスクリプトを使って切り替える。原理が分かれば比較的容易に実現できる。現在はほとんどのPCブラウザ/スマホで文字サイズもイメージも同時に変更できる。

文字サイズの変更はこちら

※現在はPCブラウザの一機能になっている。拡大 Ctrl+ 縮小 Ctrl- 標準 Ctrl0

※CSSを切り替えるスクリプトなので、Webページのデザインをユーザが選べる機能に転用できる。

現在時刻を表示

new Date

年月日

曜日

時刻

Javascriptファイルを呼び出す

<script type="text/javascript" src="script.js"></script>

自動ジャンプ

指定したURLに自動的に移動させる場合、下記のようなMETAコードを使う。
URLを変更したときに使うと便利である。

〔例〕 5秒後にstart.htmlに移動する

<meta http-equiv="refresh" content="5; url=start.html">
©2006 Sigma Social Network