JavaScript
XHTMLだとFirefoxじゃ動かないことを知った…。 HTMLだといけるんだけど、なんでだこれ。例えば <html> <head> <title>innerHTML</title> <script type="text/javascript"> <!-- function inner(){ test.innerHTML = "インナー"; } // --> </script> </head> <body onLoad="inner()"> </body></html>
id属性で指定したdivボックスのスタイルシートのプロパティにアクセスするには、例えば位置座標を変えたいって時には document.getElementById("id名").style.left = X座標; document.getElementById("id名").style.top = Y座標;という具合に「getElementByI…
例えばマウスオーバーさせたときにJavaScriptで画像を入れ替える場合は <img src="sample1.jpg" onMouseOver="this.src='sample2.jpg'">とかすればいいわけだけど、「sample2.jpg」はマウスオーバーした時に読み込まれるから、パッと画像が切り替わらないかもしれないね。という時にやっておきたいのが画像の先読みという…
画像のサイズを変えるには document.images["画像の名前"].width = 画像の幅; document.images["画像の名前"].height = 画像の高さ;という指定をしてやる。例えば、画像をクリックするたびに10ピクセルづつ大きくなるような、使用用途がなさそうなものを作る…
って確かまだやってなかったかな。 一応検索かけて出なかったので、まだだったと思います。 キーイベントって onKeydown : キーが押された onKeypress : キーが押されたまま onKeyup : キーが離された とかあたり。例えばbodyに <body onKeydown="alert('何かキーを押したね')">としてやれば、キーボードの</body>…
2冊目になると、1冊目で覚えたものは書くこともないなぁと思っていたのですが、ブラウザを判別するというものがあり、これは前になかったのでメモしておこうかと思います。というのも、1冊目のマウスイベントの時とかはIEで動いたけど、Firefoxでは動かなか…
リンクテキストにマウスを重ねたときにテキストカラーを変えるのはCSSでよくやるもので、このサイトでも「濃い目のレッド→ピンク」に変わるようにしています。これはCSSで a { color: #c03; } a:hover { color: #f06; }というように :hover を後に付けて指定…
昨日で1冊終わって、2冊目に突入といきたいところです。 2冊目といっても1ヶ月前に1冊目と同時に買っていたものです。 一応紹介すると速効!図解プログラミング JavaScript作者: 古籏一浩出版社/メーカー: 毎日コミュニケーションズ発売日: 2003/09メディア: …
ちょうど1ヶ月なんと1ヶ月もかかってしまいましたね。たぶん普通に読むだけなら数日で終わったのだろうけど、こうやってひとつひとつ理解しながらブログに書き込んでいくとすごく時間がかかるものです。 でもおかげで浅く広くJavaScriptが理解できたのではな…
ゲーム作りつづきのつづき。ということで、前々回、前回のをまとめる。 まずはtop.html <html> <head> <title>もぐらたたき</title> </head> <body> <iframe src="data.html" width="600" height="400" scrolling="no"></iframe> </body> </html>これは前々回のと同じ。 そしてdata.html <html> <head> <title>データ部分</title> <script type="text/javascript"> var i; //もぐらをたたいた回数 va…</head></html>
ゲーム作りつづき。 ランダムに座標を作り、そこに「もぐら」画像を表示させる(関数move) function move() { if(j=="10") { owari(); } else { mogura.style.left = Math.floor(Math.random()*590); mogura.style.top = Math.floor(Math.random()*390); j++;…
前回のクッキーのあれが僕の中では未解決なんだけど、先にいくとしよう。6章が終わって、いよいよ7章に入りました。 いよいよというのは、この章が最終章だからです。 最後は簡単なゲームを作るということで、じっくりいきたいですね。本では「ねずみたたき…
6-6は「マルチメディアを使った処理」という項目で、それほどJavaScriptの雰囲気でもなかったし、IEあたりでのみ実装されているような「Filter」の話だったりしたので読み飛ばし。で、6-7のクッキーの項。 相手のコンピュータにファイルの情報を保存したりす…
JavaScriptでウィンドウを操作するというよくあること。 名前もそのまま「window」オブジェクト。 ウィンドウの位置を右にxピクセル、下にyピクセル動かす window.moveBy(x,y)本ではこの後、ボタンを押してウィンドウを隠し(画面からハミ出させ)、2秒後に戻…
それではラップタイムを表示できるというストップウォッチをやってみる。 とりあえずコード。 <html> <head> <script type="text/javascript"> i=0; //表示される秒数 cou=0; //何回目のラップか(スプリットを押した回数) split = new Array("0"); //ラップのときの秒数(スプリットを押した時の秒数) fun</head></html>…
JavaScriptで時間を操るものはけっこうあるように思う。 僕ももいよいよというわけだ。 このタイマーを設定するメソッドは2つあるようで。 setTimeoutメソッド タイマー名 = setTimeout(実行する命令, タイマーの周期)こいつは設定した時間がきた時に、1度だ…
この配列ってのもよく聞くね。 変数ってのは箱をイメージした感じだったけど、配列というのは、その箱がたくさん並んでいるイメージらしい。 ここで配列を使うための「Array」オブジェクトが登場する。 配列名 = new Array(配列0に代入するデータ, 配列1に代…
つづきというか、前回は自分でやってただけなので。この本ではonmousemoveイベントを使って、HTML上に仮想のウィンドウをドラックして移動できるものを作ってしまおうという。これはハイレベル。 この仮想ウィンドウには幅や高さがあるのがネックで、つまり…
JavaScriptでマウスイベントとかいうと、やっぱりあのマウスストーカーが思い浮かぶ。 そう、あのちょこまかうるさいヤツだ。 この本の例としては <div id="box1"></div>というかんじでdivボックスを作って、「onmousemove」イベント発生時にマウスの座標を box1.style.left = eve…
6章になりました。この章は応用編です。 だいぶこの本も後半に入ってきたということです。JavaScriptではフォームの処理がよく行われます。 例えばボタンを押したときに起こるイベントは <button onclick="beam()">ビーム</button>みたく関数beamを呼び出す。あと、テキストボックスの値を利用…
お盆休みから帰ってきました。さっそく再開です。いきなり「正規表現」という難しい言葉が出てくる。 意味は「ある文字列(表現・式)を定まった形式で表現する」とあるけど、よく理解できないので、やりながら考えていこう。この正規表現を使ったもので代表的…
HTMLでは普通CSSで文字の装飾を行うけど、それをJavaScriptでっていう。 基本的なCSSは分かるので、ここは流し読みで一応メモ。 JavaScriptを使った文字列の処理 .bold() : 太字に .italics() : 斜体に .strike() : 打ち消し線をつける .sup() : 上付き文字 …
昨日やった「Math.random」を使ってのおみくじ、条件の振り分けは本に載ってたとおり「if構文」を使ったけど、これって「switch構文」でもいけるねなんて思って、ちょっと試しにやってみた。 if構文での振り分け (昨日やったのと同じ) function omikuji() { …
今回は計算式みたいなのをやるので、いよいよプログラミングっぽくなってきたよ。 この計算に関するオブジェクトで「Mathオブジェクト」というのが出てきた。 Mathオブジェクト Math.round(値): 小数第一位を四捨五入 Math.floor(値): 小数点以下を切り捨て …
こいつはブラウザ上にでる警告みたいなやつね。 ここでは3種類のダイアログが載っている。 alert alert ("それでも男ですか！"); confirm 変数A = confirm ("寒い時代だと思わんか？");OKなら「A=true」、キャンセルなら「A=false」。 prompt 変数A = prompt…
マウスやキーボードに何かした時の情報がいわゆる入力。 逆に出力はその結果どうなったかを画面に表示させること。 まぁこの辺は分かる。出力には、JavaScriptから直接出力させるものと、HTMLを通して出力させるものがあるようで JavaScriptから直接出力 doc…
という難しい話・・・。あれっ？実践じゃないね・・・。 でも大切なことなのです。メモメモ。 windowオブジェクト っていうのは、ウィンドウに関するオブジェクトの最上位に位置するもの・・・です。 その中にはこんなものがある。 location: 現在のページの…
いよいよ実践の章。 最初の方はJavaScriptの記述ルール。一応メモる。 文字列は「"」「'」で囲む。(通常「"」の中で「'」を使う) 行の終わりには「;」をつける。 「//」の後の文字列はコメント扱い。数行にわたるコメントは「/*」「*/」で挟む。 この辺はさ…
は省略。 なぜっていうと、この章はJavaScriptを扱うためのHTMLの超基礎知識だったので。 僕は一応(X)HTMLとCSSの基本的なとこは分かるんです。 というわけなんで、さっさと5章にいっちゃおう。
3章の最後は「switch構文」だ。 1対1の条件で分けていたif構文とは違い、このswitch構文というのは複数の可能性のある条件で分けることができるらしく。 それだけだと自分でも分からないので switch構文の書き方 switch (条件) { case '場合1': 処理A; case …
