JavaScript ( 概要一覧 | 詳細一覧 )

JavaScriptの文字コードには気をつけろ！

060608

こんにちは、なかわけです。

昨日からこのMTにあるJavaScriptを設置しているんですが全然動いてくれません。

それで、サンプルをずっと眺めていても違うところがまったくなくて設定通りで、「どこが違うのかなー」と悩んでいました。

でさっきやっと見つけました。

文字コード！！

HTMLの文字コードと一致しないと動かないんですね、JavaScriptって。

初めて知りました・・・。

でも、ブラウザ（IE）のエラーのヒントがかなり不親切ですよ。

「ある変数に値が入ってません」みたいなエラーでそのまわりのコードをずっと調べてしまったよ。

あとリンクする側のHTMLには、こうやって書けばいいみたい。
<script type="text/javascript" src="ファイル名.js" charset="文字コード"> </script>

まあ、今となっては勉強になったからいいんですけどね。

それはそうと、「スプーの絵描き歌」が存亡の危機です。NHKがかなり警戒しているみたいです（当たり前ですが）。

はいだしょうこおねえさん、もう一回書いてくれないかな。っていうかアレを新しいキャラクタとしてしまえばいいと思うんだけど。どうだろう。

日時: 2006年6月 8日 03:10 固定リンク | コメント (0)

関連アイテム

 

<textarea>をクリックすると内容が選択されるJavascript

070201

こんにちは、なかわけです。

最近見かけたちょっと親切なJavascript。自分のために覚書き。

サイトでソースコードをコピーしてもらいたいときにテキストエリアを使用しますが、そのまま使ってしまうとそのテキストエリアに入力できてしまったり、テキストを選択するときにドラッグしないといけませんよね。
今日紹介するのは（といってもなかわけが発見したわけじゃないけど）、テキストエリアをクリックするとテキストが選択できちゃうサンプルです。

▼下の<textarea>をクリックするとテキストが選択できちゃうサンプル




初めてみたときに、お！と思いました。実際どう書くかは下のソースコードをコピーして参考にしてください。といいつつもう使ってみたり。

▼サンプルソースコード

あ～こういうの見つけると、いいサイト作りたいって思う・・・。Javascriptってめんどくさいけど楽しい。

日時: 2007年2月 1日 03:22 固定リンク | コメント (0)

関連アイテム

 

Javascriptの読まれるタイミングと実行のタイミング

070211

こんにちは、なかわけです。

昨日、仕事で発見した（というか仲間と話してて見つけた）Javascriptの話。

まずなかわけは、とあるページを制作していてチェックボックスにチェックを入れた後にページを更新するとチェックが残っていることに気が付きました。そのとき作っていたページの仕様上チェックが残っているのがまずかったので、更新したときにはチェックが外れるようにしようとJavascriptを書きました。

最初に書いたのは下のような感じ・・・

▼HTML側

<html>
<head>
...
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
...
</head>
<body>
...
<input type="checkbox" id="CheckBox">
...

▼外部Javascriptファイル

document.getElementById("CheckBox").checked = false;

簡単な解説をしますと、htmlファイルが外部のJavascriptファイルと読み込んでいて、そのJavascriptファイルには、htmlファイルに書いてあるチェックボックスをfalse（外せ！）と書いていたんですが、うまく動きませんでした。
その後近くの仲間となんでかね？と話していながら解決した書き方がしたみたいな感じ・・・

▼HTML側

<html>
<head>
...
<script type="text/javascript" language="JavaScript" src="file.js"> </script>
...
</head>
<body onLoad="CheckBoxFalse()">
...
<input type="checkbox" id="CheckBox">
...

▼外部Javascriptファイル

function CheckBoxFalse() {
   document.getElementById("CheckBox").checked = false;
}

要はどういうことかというと、ソースが読み込まれる順番だったんですね。
最初に書いた書き方だと、

htmlファイルを読み込み
　↓
Javascriptファイルを読み込み（チェックボックスを外せ！）
　↓
<body>読み込み
　↓
チェックボックスを表示

これだとチェックボックスがまだ表示される前にチェックボックスを外せ！と処理されてしまいます。ばかですね、なかわけって。後の書き方だと、

htmlファイルを読み込み
　↓
Javascriptファイルを読み込み（チェックボックスを外せ！っていう命令があるよ）
　↓
<body>読み込み（と同時にチェックボックスを外せ！命令を実行してね）
　↓
チェックボックスを表示（と同時にチェックボックスを外す）

となり、意図した通りに動いてくれます。気づけば当たり前のことだし、こうしてまとめて書いてるとまぬけな自分が悲しい・・・。

プログラムは上から下に処理されるんだっつーの!!

日時: 2007年2月11日 02:32 固定リンク | コメント (0)

関連アイテム

 

長いURLを強制改行（折り返し）するJavascript

070228

こんにちは、なかわけです。

今日は仕事中にすごいいい情報を手に入れました。今日1日の価値はかなり高いです。

ウェブデザイナーのほとんどの人が悩んだことがあるんじゃないでしょうか。長いURLを表示したときにレイアウトが崩れてしまう症状。ほぼ全てのブラウザでレイアウトを崩す長いURLですが、今日イチバンいいと思われる回避策を発見しました。

行う作業はIE用の処理とそれ以外のブラウザ（Gecko系）用の処理の2つです。

まず、IE用の処理としてIE独自のCSSプロパティ word-break を設定します。html全体もしくは適応箇所に

word-break:break-all;

を設定すれば、親要素の幅内で自動的に改行（折り返し）してくれます。（IE独自のCSSプロパティというところがシャクな気がしますがこれがもっとも簡単安定したものと思います）

次にGecko系用の処理ですが、これがすごい！サーバにアップしてリンクするだけでできちゃうJavascriptがあったんです。書いてくれた人に感謝。サンプルも公開されてます。詳しい分かりやすい説明は小粋空間さんのページに紹介されてますので簡単に説明しますが、url_breaker_plus.user.jsというJavascriptファイルをダウンロード、自分のサーバにアップロードして適応したいページの<html>の直前に

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

と挿入するだけ。とても簡単。

ただ1点うまくケースを発見しました。それは、長いURLが<table>内に含まれるときにこのJavascriptが無効化されてしまいます。たぶん、table要素が特殊なためJavascriptでうまく処理されないものと思われます。
なかわけが考えた対処法としましては、長いURLの親要素の<td>に

display:block;
とスタイルをつけてあげればうまく処理されます。

この今日の発見によりいままで悩んでたレイアウト崩れが全て解決されました。あーうれし。あー今日はもう満足。

日時: 2007年2月28日 02:40 固定リンク | コメント (0)

関連アイテム

 

PHPからJSONを作成してAjaxでRequest

080229

こんにちは、なかわけです。

きょうは、仕事でAjaxをがんばってみました。
やってみたことは以下の内容です。

1.AjaxでPHPにアクセス
2.PHPは配列のデータをJSON形式に出力
3.戻ってきたJSON形式のデータをJavascriptのeval()で扱える形式に変換
4.innerHTMLなどでHTMLを更新

そもそもなかわけがAjaxなんか書けるわけがなく、
以下のサイトを参考にさせてもらいました。
■【PHP TIPS】 20. PHPからJSON作成を扱う

JSONなんて表記法も初めて知りましたし、勉強になった。
Ajaxておもしれ。
日時: 2008年2月29日 20:31 固定リンク | コメント (0)

タグ:

関連アイテム

 

JavaScriptのカレンダーライブラリ「Yahho Calendar」

080305

こんにちは、なかわけです。

今日も仕事でJavaScriptをがんばってみました。
実際そんなにがんばるところはなかったですが。

まず、以下のことがしたかったです。

テキストフィールドをクリックしたときに、
カレンダーがポンッとポップアップで表示されて
（ポップアップウィンドウではなくレイヤーとして表示されて）、
そのカレンダーの日付をクリックすると
その日付がテキストフィールドに自動的に入力されてる。

でも、まあやりたいことそのままのライブラリなんてないだろうから
複数のライブラリを組み合わせて作るかな、と思ってたら
ほぼそのままのライブラリがありました。

Yahho Calendarというそうです。
（はじめスペルミスかと思ったｗ）
米Yahoo!のYUI（Yahoo! User Interface Library）を利用している
ところからこの名がついたそうな。

使い方も作者のページに親切に書いてあります。
参考にさせてもらいました。ありがとうございました

■YUIカレンダーを日本語化＆ポップアップ対応＆祝日も表示 - Yahho Calendar
ゼロと無限の間に：Sandbox

日時: 2008年3月 5日 00:13 固定リンク | コメント (0)

タグ:

関連アイテム

 

IEでsetAttribute()とremoveAttribute()がうまく動かない問題

080306

こんにちは、なかわけです。

今日もまた仕事中に困って、解決した問題の話です。

Javascriptで要素（タグ）に属性を設定したり削除したりするときに、
setAttribute()やremoveAttribute()を使用します。

以下はclass属性をセットしたいときの例です。

var element = document.getElementById("hoge");
element.setAttribute("class", "foo");

でも、これではIEではうまく動作しません。
IEの場合は、

var element = document.getElementById("hoge");
element.setAttribute("className", "foo");

と書かなくてはいけません。
これはバグではなく仕様だそうです。


それから、次は、removeAttribute()で属性を削除する例です。
id属性がhogeのタグについているonClick属性を削除する場合です。

var element = document.getElementById("hoge");
element.removeAttribute("onClick");
しかし、これだとまたまたIEではうまく動作しません。

ariyasaccaさんのサイトには、IEでは仕様が違うため、
まず、setAttribute()で新しく関数を設定し、それをさらにremoveAttribute()で
削除するという方法を紹介されてました。

でも、なかわけが試してみたところIE7でうまく動きませんでした。
結局、removeAttribute()ではJavascriptを動作させる属性は削除できないみたいでした。
しょうがないので以下のような方法でやり過ごすことにしました。

setAttribute("onclick", new Function(""));

要するに、何もしない関数を設定するという方法。
これだと、クリックしても何も起きないので、
見た目上onClickは削除されたように見えます。

しかも、かなり重要なことを発見しました。
属性名を小文字で書かないとうまく動かない！！（IE7で確認）

setAttribute("onClick", new Function(""));

ではダメなのです。うまく処理されません。

setAttribute("onclick", new Function(""));

今日はこれに気づくまでに1時間かかりました。
これもIEの仕様なんでしょうね。
あ～あ、今日も勉強になった・・・。

日時: 2008年3月 6日 23:15 固定リンク | コメント (2)

タグ:

関連アイテム

 

カレンダー

2013年5月
Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

最近のエントリー

カテゴリー

月別アーカイブ

クリエイティブ・コモンズ

このブログは、次のライセンスで保護されています。

クリエイティブ・コモンズ・ライセンス

詳しくはクリエイティブ・コモンズ・ライセンスのサイトをご覧ください。

Googleの画像広告