2007年07月05日

スコープの件

こんなにしてました。
function hoe() {
....
for (var i = 0; i < 10; i++) {
...
}
...
}

しかしこれはこれと同じだったのです。
function hoe() {
var i;
....
for (i = 0; i < 10; i++) {
...
}
...
}

これはJavaScriptにブロックスコープがないからだそうです。
なんか勝手に
for (var i; ...

としておけば、安心だと思い込んでいました。

がっかり&うっかりです。
posted by ほえ at 22:45| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年06月15日

関数の定義と関数式

関数の定義のつもりでいても、しばしば関数式になっています。

if (0) {
function hoe() {
alert('hoe!');
}
}

これは関数式です。
ステートメントの中にあるので関数式になってしまいます。


function hoe() {
function hoehoe() {
alert('hoehoe!);
}
}

このhoehoeは関数の定義です。

var x = function hoe() {}
これは関数式です。


IEだときっと、
if (0) {
function hoe() {
alert('hoe!');
}
}

では、関数hoeは定義されてしまうのでしょう。
定義されないようにするには、
if (0) {
var hoe = function () {
alert('hoe!');
}
}

というように、関数式を使えばよいそうです。


むむ?こんだけ?
タグ:java
posted by ほえ at 14:26| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年06月12日

関数を作る件 おまけ

Windows版Safariのβが出たそうなので、昨日のをやってみました。

Mac版のSafariは殆ど触った事がなかったので、昨日「Safariではどうなんだろう?」なんて思っていたところに、グッド・タイミングでした。
トゥギャザーしようぜ!って感じで。

さっそく躓きました。
どうも日本語が苦手なようで、デスクトップに置いたhtmlファイルは
「Safari is missing important resources and should be reinstalled.」
といって、読み込んでくれません。

D:\とかに置けば大丈夫なようです。
で、
var hoehoe = function hoe() {alert('hoe!')};
hoehoe();
try {
hoe();
} catch (e) {
alert(e);
}

なんてすると、
「ReferenceError: Can't find variable: hoe」
だそうです。

もうひとつ、
var a = 'a';
if (a == 'a') {
function hoe() {
alert('hoe!');
}
} else {
function hoehoe() {
alert('hoehoe!');
}
}
hoe();
try {
hoehoe();
} catch (e) {
alert(e);
}

とやると、
「ReferenceError: Can't find variable: hoe」
だそうです。

なるー。
posted by ほえ at 10:02| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年06月11日

関数を作る件

JavaScriptで関数を作るには3つの方法がありまして…。

まずひとつめは、functionを定義するもの。
function hoe() {
alert('hoe!');
}


ふたつめは、function演算子をつかうもの。
var hoe = function() {alert('hoe!)};


みっつめは、Functionオブジェクトのコンストラクタをつかうもの。
var hoe = new Function("alert('hoe!')");


どの方法を使っても、作成されるものは一緒です。

が、使い方で違いがあります。
・関数名は変更できません。
function hoe(){
alert('hoe!');
}

のように「定義」した場合、関数名は変更できません。

・変数に入れた場合、別の変数に入れたりできます。
var hoe = function(){alert('hoe!')}
var hoehoe = hoe;
hoehoe();

と別の変数に入れることができます。
こんなにしても、別にいいです。
var hoehoe = function hoe(){alert('hoe!')}

変数hoehoeと、hoe(これは何?)とは無関係です。

この場合、IEだと
hoehoe();
はもちろん、
hoe();
でも'hoe!'と表示されます。
FireFoxだとhoe()の所で、エラーになります。

こんなのも。
var hoehoe = function hoe(){alert('hoe!')}
alert(hoe); //<-FireFoxではエラー。IEではOK。

なんか微妙な感じですね。
えーと。Operaではエラーになりますね。

・Functionオブジェクトのコンストラクタを使うと、関数が使用されるたびに評価されるので効率が悪いそうです。できるだけ使わないようにしましょう。

・function演算子を使うと式の中で関数を作成できます。
何度も出てきてますが、
var hoe = function() {alert('hoe!')}

って事ですね。

・if分の中で関数を作成したりしなかったりできます。
よくわかりませんね。こういう事です。
var a = 'a';
if (a == 'a') {
function hoe() {
alert('hoe!');
}
} else {
function hoehoe() {
alert('hoehoe!');
}
}

hoe();

…これ、IEだとhoe();もhoehoe();も実行できちゃいます。
FireFoxだとhoehoe();はエラーです。もちろんhoe();はOKです。
えーと。Operaでもhoehoe();が実行できます。ますますややこしい事に…。

・関数を定義すると、その定義より前でも関数が使えます。
hoe();
function hoe() {
alert('hoe!');
}

function演算子やFunctionコンストラクタのではダメです。

・関数の中で、定義した関数、またはfunction演算子で作成した関数はクロージャになります。なので周りの環境を引き継いでいます。
function hoe(a) {
return new Function("b", "alert(a)");
}
var b = hoe('hoe!');
b(); //エラー a is not defined

ではダメですね。

globalな変数は使えますが…
var global_var = 'global hoe!';
function hoe2(a) {
return new Function("b", "alert(global_var)");
}
var c = hoe2('hoe!');
c();

⇒global hoe!


つぎは、関数の定義と関数式について書きます。
posted by ほえ at 23:20| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年06月10日

クロージャの件

関数の中に関数を作成することができます。
この内側の関数には、すぐ外側の関数からしかアクセスできません。
そしてこの内側の関数は、外側の関数の引数や変数を引き継ぐことができます。

内側の関数は外側の関数に対してプライベートです。
そしてこれはクロージャを形作ります。

外側の関数の変数や引数を"継承"する事ができます。
言い換えると、内側の関数は外側の関数のスコープを含んでいます。
って何の事でしょうか?

function hoe(a) {
function hoehoe(b) {
alert(a + ':' + b);
}
return hoehoe;
}

var func_hoehoe = hoe(10);
func_hoehoe(100);
func_hoehoe(1000);
func_hoehoe(10000);

とすると、
⇒10:100
⇒10:1000
⇒10:10000
となるのです。

関数hoe()は、引数aを受け取って、hoehoe()という関数をreturnしています。
関数hoehoe()は、bという引数を受け取って、aとbを':'で繋いで文字列を作成して、alert()で表示しています。
このaは外側の関数hoe()の引数のaの事です。hoe(10)で呼び出されているので10になります。
var func_hoehoe = hoe(10);
として、関数hoe(10)の戻りを変数func_hoehoeに割り当てています。

func_hoehoe(100);
はつまり、hoehoe(100)となるわけです。func_hoehoeは変数名なのに()を付けるってなんだか変ですね。

でもいいんです。
function xxx(a) {
alert('xxxです!' + a);
}
alert(xxx);

とすると、表示されるダイアログには
「function xxx() {
alert('xxxです' + a);
}」

と表示されるのですから。

無名関数を括弧でくくって、後ろに括弧を付ければ
(function() {alert('わおわおー!')})();

その場で実行されるのですから。
⇒わおわおー!
JavaScriptの括弧というのはそういうものなのに違いありません。


さて、func_hoehoeに割り当てられたhoe(10)の戻りは
function hoehoe(b) {
alert(10 + ':' + b);
}

となっています。
この「aが10に置き換えられた状態」でfunc_hoehoeに割り当てられていますから、このままです。


つまり、
var func_hoehoe = function hoehoe(b) {
alert(100 + ':' + b);
}

な訳です。
で、
func_hoehoe(100);
⇒10:100
func_hoehoe(1000);
⇒10:1000
func_hoehoe(10000);
⇒10:10000
になるのは、当たり前すぎですか。


なんだかよくわかった気がします。

タグ:javascript
posted by ほえ at 18:40| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2007年06月05日

getElementsByTagnameで何が帰ってくるの?の件

指定したタグを取得する
getElementsByTagName(tagname)
で帰ってくるのは何?

tagnameは大文字。P,A,INPUT,TD...

paragraphs = document.getElementsByTagName("P");
alert(paragraphs[0].nodeName);

<p name="bb" id="bbb">あいうえお</p>

⇒P

nodeNameって?elementのnameとは違うの??
nodeNameは

W3CのDocument Object Model Coreによると、"interface Node"があり、"interface Element : Node"があります。
つまり、elementはnodeを継承しているのですね。

インターフェースelementのnodeNameは、element.tagNameになります。
ほかのnodeのnodeNameが何かはこちら

nameは、次のelementのnameアトリビュートです。
anchor,
applet,
form,
frame,
iframe,
image,
input,
map,
meta,
object,
option,
param,
select,
textarea。
ここに書いてありました。DOM Coreではなくて、その拡張であるDOM HTMLで定義?されているようです。何の事でしょうか?

IEでは<p>もnameを持っていたりします。何でも持ってるのか?

alert(paragraphs[0].name);

にすると、
⇒bb(IE)
⇒undefined(Firefox)
となるのでした。
タグ:javascript
posted by ほえ at 20:04| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

getElementsByNameで困った件

指定したnameで要素を取得するには
getElementsByName(name)
nameはアトリビュートnameの値。
Firefoxでは[object HTMLCollection]が帰ってきます。

を使います。

…のはずが、IEではIDを見に行ってしまいます。

funciton hoe() {
paragraph = document.getElementsByName("aiueo");
alert(paragraph.length);
}

<p name="aiueo" id="aiueo1">あいうえお</p>


⇒0(IE)
⇒1(Firefox)

なんてこった!いきなり躓いた。
タグ:javascript
posted by ほえ at 19:54| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年11月20日

NodeListとfor inの件

javascriptでは
for(i in arr){
alert(i.value);
}
なんて、for inを使いますが、フォームの処理をしたい時に
for(i in document.forms['form1']){
alert(i.value);
}
としたくなりますが、思ったとおりになりません。

これは
for(i = 0; i < document.forms['form1'].length; i++){
alert(document.forms['form1'][i].value);
}
としないとダメなのです。

document.forms['form1']で得られるNodeListが配列じゃないから、というのを読んだのですが、本当でしょうか?

でも、とにかくダメなのです。
posted by ほえ at 19:17| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年11月10日

フォーム名とjavascriptの関数名が同じ時の件

こんなにして書いたらエラーになっちゃいました。


<html>
<head>
<script type="text/javascript">
function fff(){
alert('ok');
}
</script>
</head>
<body>
<form name="fff" method="post">
<input type="button" name="test" value="ng?" onclick="fff();">
</form>
</body>
</html>


「fff is not function」といわれてしまいます。
これは<a>タグのonclick()でもダメです。URL記述なら大丈夫。


<a href="javascript:fff();">hoe</a>


どうしてもという時は、もう一個関数をはさみましょう。


<html>
<head>
<script type="text/javascript">
function fff(){
alert('ok');
}

function ggg(){
fff();
}
</script>
</head>
<body>
<form name="fff" method="post">
<input type="button" name="test" value="ng?" onclick="ggg();">
</form>
</body>
</html>


どうなんでしょう。
posted by ほえ at 16:44| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年11月09日

trueなの?の件

つまらない事ですが、

if("true"){
alert("true!")
}else{
alert("false!");
}

はtrue!ですが、

if(true == "true"){
alert("true!");
}else{
alert("false!");
}

はfalse!です。

こんな時にあれ?なんて思ったりしたので。

<script tepe="text/javascript">
function okdesuka(){
if(document.fff.flg.value == true){
alert("true!");
}
}
</script>

<form name="fff" onsubmit="okdesuka(); return false;">
<input type="hidden" name="flg" value="true">
<input type="submit">
</form>

posted by ほえ at 15:23| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年08月21日

parseInt()の件

parseInt("001");
は1になります。
parseInt("002");
は2になります。
parseInt("003");
は3になります。
parseInt("004");
は4になります。
parseInt("005");
は5になります。
parseInt("006");
は6になります。
parseInt("007");
は7になります。
parseInt("008");
は0になります。
parseInt("009");
は0になります。
parseInt("010");
は8になります。

先頭に"0"が付く文字列は8進数だと思われてしまいます。
8進数に8や9はありませんから、0になるんですね?と思ったら、
parseInt("08");
はNaNになります。

Number()を使うか、0を減算した方がよさそうです。
Number("008")
"008" - 0


posted by ほえ at 16:35| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年08月15日

DOM0

JavaScriptでframeを扱いたいと思い、いろいろ調べていたのですが、どうもよくわからないので、ますます調べる事に…。
iframeのhtmlから、外側にある別のiframeのsrc(location?)を書き換えたいので、昔の書き方?だと普通に
window.parent.frames("outsideiframe").location="./tobe.html"
とかすれば良さげです。
新しい書き方?だと、DOMを使って操作するハズですね?しかし、このwindow.parentがDOMにないのです。
えーと、DOM Level 1は、コアとHTMLとあって、確かにgetElementById("id")なんかはHTMLの部分にありました。でも、frameの外側に関することは全然ないんですよぉ。どーなってんのー?と思った訳です。
Mozilla Developer CenterのJavaScriptとかDOMのところを読んでいくと、どうやらDOM0というものがあるらしいということがわかりました。
  • IE4.0とNetscape4.0が争っていたころの常識的なインターフェース。

  • いくつかのブラウザでサポートされているけれどもW3CのDOMでは定義されていないインターフェース。

だそうです。
そもそもDOMはインターフェースなのですね。で、それを何かが実装すると。JavaScriptであったり、XMLパーサーであったり。
英語ですが、The DOM and JavaScriptを読むとわかりやすかったです。
MozillaではDOM0はこちら

frame関係とか、いずれなくなるのかも?というもの(あいまいな表現;)ばかりかと思っていたら、window.onloadとか結構これがないとみたいなものもDOM0なのでした。DOM0も使っていっていいって事なんですね?
※window.onloadに関連してDOMContentLoadedというイベントがあると書いてありました。ただ、eventを見てもDOMContentLoadedなんて書いてないし??と検索してみたらなにやらundocumentedな隠し要素的なものらしいです。こんな使い方するみたいです。「ppBlog1.5」さん。へー。

DOMがインターフェースだと思って、仕様書を読むと、なんだかインターフェースというものの意味もわかりますね。翻訳はこちら、 「どら猫本舗」さん
posted by ほえ at 12:43| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2006年07月28日

変数

変数の評価はこんなです。

if(a){ // <-ここでエラー
alert(a);
}

var a;
if(a){
alert(a); //ここには来ません。
}

var a;
alert(a); // undefined

var a;
if(a != undefined){
alert(a); //ここには来ません。
}

var a = 0;
if(a){
alert(a); //ここにはきません。
}

var a = 1;
if(a){
alert(a); // 1
}

var a = 'abc';
if(a){
alert(a); // abc
}

var a = '';
if(a){
alert(a); //ここにはきません。
}

var a = '';
if(a == undefined){
alert(a); //ここにはきません。
}
posted by ほえ at 13:02| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。