JavaScript

円落下の JavaScript 版

obelisk.hatenablog.comここの JavaScript 版です。ボタンをクリックしてみて下さい。 function circleFall(width, height) { var w = window.open("", null, "width=" + width + ",height=" + height); w.focus(); w.document.open(); var st = ` Canvas `;…

ライフゲームの CoffeeScript 版

前回「コンウェイのライフゲーム」を Ruby でシンプルに実装しましたが、今回その CoffeeScript 版です。ここで実行できるのがいいでしょう? 「実行」を押すとセルがランダムに生成されます。セルの数: コード。HTML。 <form> セルの数:<input type="text" name="num" size="4" value="170"> <input type="button" value="実行" onclick="start(this.form)"> <input type="button" value="クリア" onclick="clear();"> </form>…

JavaScript で i 番目のボタンが押された時に処理をする方法

ここを読んでいて、(本文とはあまり関係がないけれど)では i 番目のボタンが押されたときに i を使って処理をするには、どうしたらよいかと考えた。ただし、HTML の中に onclick を書いて処理したくない(全部ちがう関数名にしないといけないので)。これ…

Ruby でプロトタイプベースのOOPは可能か

オブジェクト指向JavaScriptの原則作者: Nicholas C. Zakas,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2014/06/18メディア: 単行本(ソフトカバー)この商品を含むブログ (4件) を見る JavaScript では以下のように書けます。 var person = { n…

Ruby の lambda は第一級オブジェクト(だと思う)

JavaScript の関数は第一級オブジェクト(第一級関数)だとよく言われますね。変数に代入できるし、関数の引数にすることができるし、関数の戻り値にすることもできます。以下のとおりです。 function a() { console.log("Hello!"); } function f(x) { x(); …

円を動かしてビリヤードの玉のように跳ね返らせる

こちらです。遊んでみて下さい。HTML はここのとほぼ同じです(読み込む JavaScript のURL を変えるだけ)。円は完全弾性衝突をします。

HTML5 の Canvas でしょうもないものを作った(その2)

こちら。今度は円が動きます。続編はこちらです。

はてなブログでリンクを別ウィンドウで開くようにする

はてなダイアリーのように、はてなブログでもリンクを別ウィンドウで開けるようにしてみました(日記の中でだけ有効です)。[デザイン]→[カスタマイズ]→[フッタ]の HTML を記述する部分に、以下のコードを貼り付けて下さい。 <script type="text/javascript"> var ndlist = document.querySe…

HTML5 の Canvas でしょうもないものを作った

こちら。前回のエントリと同じものを、HTML5 の Canvas で作ってみました。マウスでクリックしたところに円を描きます。ランダムな色がちょっとキレイかな。

JavaScript には sleep や wait がない

皆んな困っています。押すと 5秒後に色が変わります。5秒待つというだけで、厳密な sleep関数ではありません。また、後処理はすべて関数 f() の中で行う必要があります。sleep(5000) function put20150923b() {window.setTimeout(f20150923, 5000);} functio…

JavaScript で(サムネイル)画像を画面の好きな位置に表示する

変数 url は画像の URL です。位置は (100, 50)、サムネイル画像の横幅は 200px です。 画像をクリックすると画像を原寸大で別ウィンドウに表示します。HTML <div id="pic"></div> JavaScript var nd = document.getElementById("pic"); var url = "http://hoge.jpg" //画像URL d…

window.document のプロパティを列挙

for (var x in window.document) { console.log(x); } 表示 知らないのが沢山ある…(古い仕様が残っているのもあるみたい。document.clear とか)。上のは別に window.document に限らないことは、云うまでもありません。色々応用できます。※参考 『開眼! Ja…

サイドバーのスライドショーを作ってみる

サイドバーに小さなスライドショーのスペースを作ってみました。クリックすると大画面のスライドショーのページに飛びます。 そこでハマったことですが、JavaScript で画像の大きさを設定したい場合、僕の持っている『JavaScriptリファレンス 第6版』では、 …

JavaScript の CSS 操作について

JavaScript で CSS の操作をするとき、CSS で p {color: red;} のように全ての p について色を変えるようなことはできないのだな。しかし、順番を指定した document.getElementsByTagName("p")[0].style.backgroundColor = "khaki"; のようなことはできる。 …

URL内の javascript:

JavaScript の式を入れて下さい <a href='javascript: var e = ""; r = ""; do { e = prompt("Expression: " + e + "\n" + r + "\n", r); try { r = "Result: " + eval(e); } catch(ex) { r = ex; } } while (e); void 0; '> JavaScript の式を入れて下さい </a> 参考:『JavaScript 第6版』p.346

JavaScript でヒルベルト曲線を描く

Ruby/Tk のプログラム(参照)を移植しました。次数: 1234 56 function main20150305() { var canvas = document.getElementById('myCanvas'); field = canvas.getContext('2d'); var n = fm.dim.value; //次数 field.clearRect(0, 0, 400, 400); var width…

ブラウザ情報の表示

function show20150304() { var html = ""; var myAppName = navigator.appName; html += "アプリケーション名:" + myAppName + ""; html += "バージョン名:" + navigator.appVersion + ""; html += "コード名:" + navigator.appCodeName + ""; html += "…

プロトタイプ継承(メモ)

JavaScript のオブジェクト指向がいまひとつよくわからないので。まず、クラス定義のようなもの。 //クラス定義相当 function MyClass(x,y) { //フィールド相当 this.x = x; this.y = y; //メソッド相当 this.show = function() { print(this.x , this.y); }…

JavaScriptでCSSの操作

<script type="text/javascript"> function changeStyle(elem, color){ elem.style.backgroundColor = color; } </script> <div onmouseover="changeStyle(this, 'Yellow')" onmouseout="changeStyle(this, 'White')"> マウスを乗せると背景色が変わります。</div> function changeStyle(elem, color){ elem.style.backgroundColor = color; }…

JavaScriptでこんなゲームが作れるとは!

daishi_hmrという方の作られた、シューティングゲームです。これ、JavaScriptで書かれているそうです。すごい…。なお、ブラウザはChrome推奨だそうです。

リテラルを使って値を生成

対の二行のうち、下はリテラルを使っています。上下とも同じ意味です。 var myObject = new Object(); var myObjectLiteral = {}; console.log(myObject.constructor, myObjectLiteral.constructor); var myArray = new Array('foo','bar'); var myArrayLite…

オブジェクトのコピー

オブジェクトのコピーは、正確にはオブジェクトが存在するアドレスのコピーになる。よって、下の出力は同じになる。 var myObject = {}; var copyOfMyObject = myObject; myObject.foo = 'bar'; console.log(myObject, copyOfMyObject); var myObject = {}; …

ユーザー定義のコンストラクタ関数

ひな形だけ先に造っておいて、あとで中身を代入します。Personオブジェクトが、インスタンス化されているわけです。 var Person = function(living, age, gender){ this.living = living; this.age = age; this.gender = gender; this.getGender = function(…

JavaScriptによる時計

時計です。ボタンを押すと止まります。setIntervalを使って、1000ミリ秒ごとに書き換えています。 window.onload = function() { timer = window.setInterval( function() { var dat = new Date(); document.getElementById('result').innerHTML = dat.toLoc…

HTML5のcanvasを使ってみる

download /* canvas要素のノードオブジェクト */ var canvas = document.getElementById('myCanvas'); draw(); document.getElementById("dwl").href = canvas.toDataURL(); function draw() { /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ …

jsdo.itというサイト

jsdo.it(参照)という、とても面白いサイトがある。JavaScriptとHTMLとCSSで作ったプログラムを、投稿できるサイトである。へえ、JavaScriptでこんなことができるのだ、という驚きがある。コードも公開されているので、JavaScriptの勉強にもすごくなる。ひ…

JavaScriptで画面のサイズを表示してみる

はてなブログではJavaScriptが使えるので、超初心者がちょっと遊んでみます。下に出ている数字は、あなたのPCの画面サイズを表しています。僕の場合は、1366×768になっています。 var x = screen.width; var y = screen.height; document.write("width="+x+"…