サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
www.din.or.jp/~hagi3
◆解説 このスクリプトは TRタグの display属性制御による一覧表のフィルタ処理の例です 多くの候補の絞り込みは、データベースより CGI を通して行うのが一般的ですが 候補数が多くない場合は CGI 経由にすると効率的ではない場合があります このような場合にはスクリプトで表示制御する方が楽かもしれません ■JavaScript function tblfilter(nm,key){ if(!document.getElementsByTagName) return; var trs = document.getElementById(nm).rows; for(var i=0; i<trs.length; i++){ var tr = trs[i]; if(!tr.title || tr.title=='') continue; var found=0; if(key == '')
What's new in IE5 ~ Internet Explorer 5 の食えない事情 ~ ここでは、'99年3月に正式リリースを迎えた Internet Explorer 5.0 の 素晴らしい機能の一端を紹介します。 ← ウソ f(^^; IE5.0 は今まで重かったレンダリング機能が軽くなったとか、 「ラジオ」などの新機能が面白いとかいわれますが、 DHTML 作成の上での機能や性能はどう影響するか興味のあるところです。 現実問題として、軽く触ってみたところかなり大きな影響がありそうなので、 「Style Sheet の落し穴」や「怪談! Cross Browser」で追記することはやめて、 「What's new in IE 5」として独立させることにしました。 とは言っても、自分のマシンに IE5 をインストールする危険は 当分冒さないように考えているので、網羅的に確認す
◆解説 これはスタイルの制御を利用した階層メニューです folder1 ~ folder3の文字またはアイコンをクリックすると 下のリンク部分の表示・非表示が切り替わります ■JavaScript この文字はカスタマイズ項目です // クラス名の定義 subpane_class = 'sub_pane'; // 折りたたみ領域 folder_class = 'folder'; // フォルダ icon_class = 'icon'; // フォルダアイコン // アイコンの定義 imgs = new Array( 'OPEN.gif', // 開いている状態 'CLOSED.gif' // 閉じている状態 ); // display スタイルの定義 displays = new Array( 'block', // 開いている状態 'none' // 閉じている状態 ); // フォルダ状
Perl の特徴の1つに同じ処理を色々な記法で実現できることが挙げられるでしょう。 然し、どのような記述をしても全く同じでしょうか? 分かり易さ、保守性、メモリ消費量などは書き方によって変わってくると思います。 ここでは、Perl の実行性能についてこだわってみようと思います。 測定マシン PC本体 富士通 FMV DESK POWER S CPU Pentium 100MHz メモリ 48MB OS Windows95( 4.00.950a ) Perl のバージョン Win32 port Copyright (c) 1995-1996 Microsoft Corporation. All rights reserved. Developed by ActiveWare Internet Corp., http://www.ActiveWare.com Perl for Win32 Bu
Cross Browser のための DHTML スクロールウィンドウ 外部ファイル( HTML )をページ内に表示する場合、 IE なら IFRAME タグを使用すれば良いのですが、 NN4 では DIV( Layer )タグになります。 また、IFRAME を使用すると指定したサイズ以上のドキュメントの場合は スクロールバーが表示されますが表示位置が指定領域内であるためになかなかうまくできません。 それに、味も素っ気もないスクロールバーのデザインをページに合わせて変えることもできません。 一方、NN4 ではスクロールバーすら表示しないため、両方で通用するページを作成することは 結構難しい問題にもなります。 これらの問題に対するクロスブラウザ的解決は自作スクロールウィンドウです。 f(^^; 上のサンプルは「ライブラリ集」の「外部参照レイア」関連関数と「汎用イベントハンドラ」、 「スライ
2019年09月 22日 コンテンツ一部閉鎖 2008年10月 5日 「JavaScript Tip集」~ 「MDS Project」更新 2005年 8月14日 「亜剌比亜風空想譚 ~ ディマシュクのウード弾き」更新 2004年 7月11日 「きんとさんのお気楽ゴクラクのーと」~ 「緑陰の町」追加 2004年 6月 6日 「きんとさんのぷらいべーとるーむ」~ 「いただきもの」更新 「きんとのお気に入り!」よりPick up♪ たんばらラベンダーパークへ日帰り旅行 ダンナとの夏休み旅行を潰してしまい、それでも私はどこかへ行きたいと かねてから見たいと思っていたラベンダーを見にいくことにしました。 もうちょっと早い時期だと河口湖で見られたんだけど、結局忙しくて、この時期に。 今は玉原高原がちょうど見頃です。 ・・・→続きはこちら きんとさんの随時更新記事 ◆ 「きんとのお気に入り!」に好きな
if(window.opera){ // Opera 用のコード } else if(navigator.appName == 'Konqueror'){ // Konqueror 用のコード } else if(navigator.appName == 'Microsoft Internet Explorer'){ // IE 用のコード } else if(navigator.userAgent.indexOf('Safari') != -1){ // Safari 用のコード } else if(navigator.userAgent.indexOf('Firebird') != -1){ // Firebird 用のコード } else if(navigator.userAgent.indexOf('Netscape') != -1){ // Netscape 6,7 用のコード
<body> <h2><a href="contents.htm" onClick="location.replace('contents.htm');">目 次</a></h2> </body>
Mac の食えない野郎ども ~ Mac版 IE5 の傾向と対策 ~ Mac版 IE4.5 は知る人ぞ知る JavaScript 泣かせのアブナイブラウザですが、 IE5 はどうかと言うと IE4.5 の多くの致命的バグを修正したブラウザです... が、同じくらい多くのいただけない仕掛けを作り込んだブラウザでもあります。 そこで、ここではスクリプトの動作上致命的になりやすい IE5 の問題の紹介と、 できればその対策を採り上げたいと思います。 ** ここで挙げている内容は、たまたま Mac を借りた時に調べたことを基にしています。 ですから、この項目は実際と異なってしまっているものもあるかもしれません。 #> 間違っているからといって、確認することすらできません(笑)。 #> Mac欲しいなぁ~、誰かくれないかなぁ... f(^^; 目 次 ■ IE5.12 のバージョン う~む、まさかね~
◆イベントハンドリング HTML4.0 では殆ど全てのタグにイベントが指定できます。 そのため、W3C DOM Level 2 ではイベントは大雑把に言って EventTarget と Event と呼ばれる独立したオブジェクトで管理されます。 この EventTarget は全ての Node 及び Node のサブクラスのオブジェクトに 実装されていることになっています。 #> 回りくどい表現ですが、これはチョット胡散臭い気がするので... #> 特に TextNode あたりなんか... ( 調査中ですけどね ^^; ) #> M18(と NN6正版)からは WindowEventOwner なんてのもあります。 f(^^; イベントハンドリングを行う方法としては、 W3C HTML4.0 で規定されているタグ内で記述する方法 と W3C DOM Level 2 で規定されているスクリ
◆解説 これは外部スタイルシートを切り替えるサンプルです 上のリンクをクリックすると該当のスタイルシートに切り替えます このスクリプトは以下の通りです ■JavaScript function replace_css(id,url){ if(!document.getElementById) return false; var element = document.getElementById(id); if(!element || !element.cloneNode) return false; var new_node = element.cloneNode(true); new_node.href = url; element.parentNode.replaceChild(new_node,element); return true; }
DHTML用ライブラリ集 ここでは、CrossBrowser用スクリプトを作成する上で、 基本的な情報の取得や設定を行うためのワンライナ的なスクリプト ( 要は数行の関数 )を紹介します ◆ ここで挙げている関数群は全て Windows98版 IE6, NN4, Mozilla で動作確認していますが、 その他のバージョンおよびプラットフォームでは確認していません # 但し、Opera(Win, Linux), Safari(Mac), Konqueror(Linux) の最新版でも # ほとんどの機能は動作するようにしてあるつもりです もし、動作上の問題あるいは記述ミスなどを発見された方は、 ご面倒でもご連絡下さると喜びますf(^^; // version of library LCB_version = 3.1; // _mac : true = macintosh, false =
◆ドキュメントの出力 HTML のロード中にスクリプトで HTML を出力する場合は従来どおり document.write を使用することができますが、 onLoad 後に HTML の一部を変更するような場合には IE のように insertAdjacentHTML や NN4 のようなレイアに document.write を使用する方法は使えません。 ここでは onLoad 後に HTML の一部を変更する方法について 研究してみましょう W3C DOM Level 1 な方法 「ECMAScript Binding」の「オブジェクトの生成」でも言及したのですが、 W3C DOM でオブジェクトを生成するには createElement や createTextNode などの関数を駆使する必要があります。 これは従来の NN や IE での方法とは異なり、直感的に HTML を作
上のサンプルは各レイアに onmouseover/out イベントをハンドリングしたり、 onmousedown/move/up イベントによりレイアのドラッグ操作やクリック監視を行う例です。 「マウスオーバ監視」を登録すると2つのレイアに onmouseover/out を設定し、 レイア上にマウスがのると、そのレイアを最前面にします。 「ドラッグ監視」を登録すると各レイアでドラッグ操作でレイアを移動し、 クリック操作で「クリック状態」欄のテキスト入力域にメッセージを表示します。 以下は汎用イベントハンドラ用オブジェクトのコードです。 <script language="JavaScript1.2"><!-- _grabObj = null; // 占有中のオブジェクト // イベント制御オブジェクト function EventCtrl(div){ this.div = div; th
Cross Browser のための DHTML StyleSheet の落し穴 ~ DHTML の食えない事情 ~ HTML はドキュメントの表現に関する仕様の割りには充分に明確な仕様でないらしく、 同じ CSSP の仕様に従っているといってもブラウザ毎に実際の表現が微妙に異なります。 そこで、ここでは Microsoft Internet Explorer と Netscape Navigator の HTML、 特に DHTML で必須とも言えるスタイルシートに関して、 実際に遭遇した両者の微妙な(時には全く異なる)表示について 不思議に思ったこと・Cross Browser DHTML 実現の障害になった記述を記すことにします。 目 次 ■StyleSheet のよくやる間違い こんな間違いをするとアセります ■StyleSheet のやってはいけないこと こんな記述をすると悲し
CGIからメールを送信する手法は非常に多くのサイトや図書で公開されていますが、 これほど、不十分な情報の多い項目も珍しいでしょう :-p それは、「こんなこともできる」という Perl言語の紹介であったり、 「日本語?そんなもんは知らん!オレはアメリカ人だ」まで、 いろいろな理由が有りそうですが... 私も書物やWebページを参考にして、結構ハマりました 一般に紹介されているものは次のようなものでしょう #!/usr/bin/perl # sendmail のパスはサーバにより異なる $sendmail = '/usr/lib/sendmail'; $to = 'You@YourDomain'; if(open(MAIL,"| $sendmail $to")){ print MAIL <<END_OF_MAIL; From: I@MyDomain Subject: Test mail Th
◆はじめに Mozilla も正版がリリースされた(2002年 6月)ので、ここで食えない事情でも... と思ったのですが、 Mozilla は現在(2002年)約90日のペースでバージョンアップをしている関係上、 「食えない事情」はすぐに陳腐化してしまう恐れがあります(笑) そこで、Mozilla に関する食えない事情は Bugzilla や Bugzilla-jp にでも任せておくことにして、 ここでは Mozilla に関するあまり知られていない( と言うか、知られていなそうな ) Tip を 紹介することにしました 対象とする Tip は基本的には JavaScript を中心としますが、 CSS や HTML に関するものもありますし、Mozilla のバージョンによっては 動かないものがあったり廃棄されたものがあるかもしれませんので怒らないでくださいね~ f(^^; ◆スタイル
JavaScript の食えない事情 JavaScript は Netscape社 が Navigator で最初に実装し、 Microsoft社が JScript という名称で Internet Explorer に実装しています。 Microsoft社は JavaScript の仕様を標準化団体 ECMA による ECMA262 に準拠する言語として位置付け、 Internet Explorer の機能を扱える各種機能( 主に ActiveX 及び VBScript ) 追加を行なっています。 JavaScript は ホームページにダイナミックな動きを演出する上で、 簡単に実現できる手段を提供しているわけですが、 2つのブラウザの品質の面で混乱を引き起こしていて、 JavaScript を使う上で安易に全ての機能を使えない事情があるのが現実です。 結論を言えば、現状では JavaSc
Fade In Fade Out 'color' property: This property describes the foreground color of an element's text content. ◆解説 これは文字のフェード効果のサンプルです Fade Inの文字をクリックすると文字が浮き出てきます 本来ならフェード効果は透明度を変更したいところですが、 残念ながら透明度( opacity )は W3C CSS2 では定義されていないためブラウザ依存となります そのため、このサンプルは style の colorプロパティを変更して行っています スクリプトは技術的には簡単なものになりますので、 ここでは多少の応用ができるように汎用化したコードで示します ■JavaScript(汎用部分) // ステップ制御オブジェクト function Stepper(idn,do
Cross Browser のための DHTML スライダオブジェクト 数値などを直感的に入力できるものとしてスライダがあります。 スライダは直接文字列を入力しないので、 文字種や入力値の範囲などのチェックが不要になる利点もあります。 そこで、「汎用イベントハンドラ」を使用したスライダオブジェクトを紹介しましょう。 値: 上のサンプルは、2つの横スライダと1つの縦スライダで、 それぞれ 0 ~ 100、 0 ~ -100、-100 ~ 100 の範囲の数値を示すことができます。 スライダの操作は両端の矢印ボタンを操作すれば 5づつ増減し、 スライダをドラッグ操作すれば 0.5 または 1 単位の精度で値を設定することができます。 以下は Sliderオブジェクトのコードです。 <script language="JavaScript1.2"><!-- // Slider オブジェクト( 関
Form を使用して入力を行う場合には入力ミスや操作ミスはつきものです。 当然、入力ミスはチェックするのですがサーバ側の CGI で入力チェックを行うと、 回線の状況やサーバ側の負荷状況により、ユーザに結構な精神的負担を伴うことになるので、 なるべくクライアント側でチェックしてあげたいものです。 そこで、JavaScript の登場となるのですが、 Form の入力チェックは通常以下の項目になるのではないでしょうか。 必須項目の入力の有無 入力されたデータのフォーマットや桁数のチェック 半角仮名文字が使用されていないことなどの文字コードのチェック 全角文字を半角英数字などに変換する文字の自動変換 然し、JavaScript でチェックできるものには限度があります。 上記項目の中で、「文字コードのチェック」と「文字の自動変換」は JavaScript で記述するには結構無理があり、完全に行う
タイトルは月並みですが、1) 実用的 2) ブラウザのバージョンに関係なく動くことを目標に作成した JavaScript Tip集と IE 及び NN どちらでも動作する Cross Browser DHTML の Tip集のページです
このページを最初にブックマークしてみませんか?
『www.din.or.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く