2007年08月29日
特定要素に包含要素を追加する
タグをタグで囲みたいというわけです続きを読む
2007年08月06日
2007年07月24日
RegExpで正規表現
javascriptで正規表現にオブジェクトを参照する際にはRegExpでオブジェクト化する必要がある。続きを読む
2007年07月02日
onloadイベントでonclickイベントを追加する方法
onloadイベントでonclickイベントを追加する方法続きを読む
2007年06月23日
現在実行されているイベントの情報を取得
現在実行されているイベントの情報を取得続きを読む
2007年06月18日
2007年06月05日
クロスブラウザなfirstChild
ブラウザにより改行をnodeと解釈したりしなかったりと仕様がまちまちなので、firstChildなんかはかなり使いにくい。そこでクロスブラウザなfirstChildの記述方法続きを読む
2007年05月22日
Prototype.js news scroller
Prototype.js news scrollerが公開されてたのでPrototypeLessにしてみた。続きを読む
2007年05月19日
文字列.toLowerCase()
文字列.toLowerCase()文字列.toLowerCase()の続きを読む
2007年04月30日
2007年04月18日
2006年06月15日
文字コードの指定
script要素のcharset属性でsrc属性で参照しているページの文字コードを指定できます。
2006年04月07日
javascriptとcssで角丸を表現する方法
webサイト作成の際に手間になってくる角丸での表現ですが
画像を使わずにCSSのみで表現する方法があります。
Browser View
でもこれだけでは芸がありません。
javascriptを使ってソースの中に余分なタグを極力書かないようにして
CSSで角丸を表現する方法がNifty Cornersで公開されています。
//角丸を付けたいdiv
//追加するjavascript
//追加するCSS
つまりjavascriptファイルやcssファイルを外部化している場合
ソースコードのdivにidを付けるだけで角丸が実現できます。
すごく便利です。
是非普、及してほしいものです。
画像を使わずにCSSのみで表現する方法があります。
<div style="background:red;color:white;width:200px;">
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
<p style="padding:2px;">
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
</p>
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
</div>
2006/4/8 IEで正しく表示されないバグを修正(赤字が修正部分)
Browser View
本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文
でもこれだけでは芸がありません。
javascriptを使ってソースの中に余分なタグを極力書かないようにして
CSSで角丸を表現する方法がNifty Cornersで公開されています。
//角丸を付けたいdiv
<div id="nifty">
<p>
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
<p>
</div>
//追加するjavascript
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
Rounded("div#nifty","red","whte"); //Rounded(要素名, 背景色, 前景色)
</script>
//追加するCSS
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
つまりjavascriptファイルやcssファイルを外部化している場合
ソースコードのdivにidを付けるだけで角丸が実現できます。
すごく便利です。
是非普、及してほしいものです。
2005年11月23日
try 〜 catch
例外が発生したときにそれを捕まえて処理することができます。
var x = 0;
try {
alert(x.x.x);
}
catch(e) {
alert(e.number & 0xffff); //5007
alert(e.description); //'x.x'はオブジェクトではありません。
}
本来は alert(x.x.x); のところで 『'x.x'はオブジェクトではありません。』 といったエラーメッセージが出てそこでプログラムが止まってしまいますが、 try 〜 catch を使うと try {…} の中でエラーが出た場合、 catch に飛びます。 エラーが出なかった場合は catch 以下は無視されます。
catch の引数はエラーオブジェクトで、 エラーの内容を表しています。
number プロパティはエラーナンバーを表していて、 エラーの種類を識別できます。 description プロパティはエラーメッセージです。
エラーオブジェクトは次のように作成できます。
e = new Error(number, description);
var x = 0;
try {
alert(x.x.x);
}
catch(e) {
alert(e.number & 0xffff); //5007
alert(e.description); //'x.x'はオブジェクトではありません。
}
本来は alert(x.x.x); のところで 『'x.x'はオブジェクトではありません。』 といったエラーメッセージが出てそこでプログラムが止まってしまいますが、 try 〜 catch を使うと try {…} の中でエラーが出た場合、 catch に飛びます。 エラーが出なかった場合は catch 以下は無視されます。
catch の引数はエラーオブジェクトで、 エラーの内容を表しています。
number プロパティはエラーナンバーを表していて、 エラーの種類を識別できます。 description プロパティはエラーメッセージです。
エラーオブジェクトは次のように作成できます。
e = new Error(number, description);
2005年08月30日
window.onloadについて
window.onloadは一ページで一度しか使用できません。
2回以上使用した場合最初に使用した物について認識されません。
(ちなみにエラーも出ません)
これで3時間悩んだorz
トリップスウェブ初めて気づく安定した格安レンタルサーバー
人気のWEBクリエイターblogはここ
2回以上使用した場合最初に使用した物について認識されません。
(ちなみにエラーも出ません)
これで3時間悩んだorz
トリップスウェブ初めて気づく安定した格安レンタルサーバー
人気のWEBクリエイターblogはここ
2005年08月06日
空欄チェック
javascript入力フォームなどにある空欄チェックです。
【スクリプト部分】
【html部分】
これは結構ユーザビリティを考慮したチェックなんで是非お試しあれ
レンタルサーバのプレミアエクスビット、大容量・高品質の500メガ1995円。サポート第一主義のレンタルサーバーです。
人気のWEBクリエイターblogはここ
【スクリプト部分】
function FormCheck(){
with (document.form1){
if(text.value==''){
alert('フォームが入力されておりません');
text.focus();
return false;
}
}
}
with (document.form1){
if(text.value==''){
alert('フォームが入力されておりません');
text.focus();
return false;
}
}
}
【html部分】
<form name="form1" action="next.page" method="POST" onSubmit='return FormCheck();'>
<input type="text" name="text"><br>
<inut type="submit" value="送信">
</form>
<input type="text" name="text"><br>
<inut type="submit" value="送信">
</form>
これは結構ユーザビリティを考慮したチェックなんで是非お試しあれ
レンタルサーバのプレミアエクスビット、大容量・高品質の500メガ1995円。サポート第一主義のレンタルサーバーです。
人気のWEBクリエイターblogはここ