- 概要
- 実際にやってみる
- 解説する
- ぐんたかが結婚するスクリプトスマホ版も作ったよ!
- 実行してみる(iPhone版でやった場合)
- ●とりあえずこのページを開いて、下のバーの真ん中のボタンをタップ
- ●左下の「ブックマークを追加」をタップ
- ●右上の保存ボタンを押す
- ●ブックマークページを開いて右下の編集をタップ
- ●赤い印がつくので、「javascriptでぐんたかを結婚させる」のブックマークをタップ
- ●「javascriptでぐんたかを結婚させる」の下のURL部分をタップ
- ●このページのスマホ用ぐんたかを結婚させるスクリプトをコピーする
- ●さっきのブックマーク編集のURLの場所に貼り付けて、右下の完了をタップ
- ●ここも右下の完了をタップ
- ●保存したブックマークをタップする
- ●ぐんたかが結婚するプログラムが実行されたのでダイアログが出てくる
- ●適当な名前を入力してOK
- ●高嶋ちゃんとぐんちゃんが結婚する!
- 実行してみる(iPhone版でやった場合)
概要
初心者にも一番ハードルが低い言語ってなんだろうと思ったんだけどやっぱり今の時代javascript(という名前のプログラミング言語)が手軽かなーと思ったのでjavascriptの動かし方をなんとなく書こうと思ったけどそれだけじゃ面白くないからjavascriptでぐんたかを結婚させるよ!
javascriptでぐんたかを結婚させるからには式場(実行環境)を用意しないといけないけど、今回は式はjavascriptで上げるわけだから、javascriptが動く式場を用意しよう。
実際のところ、ぐんたかがjavascriptで挙式できればいいわけだからjavascriptさえ動けば場所はどこでもいいはずなんだけど、今回はその場でjavascriptが実行できて「次は何を書けばいいよ」みたいなこともおしえてくれる便利な機能がついたGoogleChromeを式場に使おうと思うよ。
なのでこのページをパソコンで開いてる人はGoogle Choromeをインストールしてこのページでも開こう。
式場にfire foxを使ってもいいけど今このパソコンにはchoromeしかインストールされてないからchoromeで説明するよ!
ちなみにiphoneならjs anywareでもこのプログラムは動かせるよ。インストールしてjsタブをクリックして貼り付けてなんかやると実行できたはず。
androidの開発環境は見つけられなかったごめん。探せばあるかも。
でも、スマホでぐんたかの結婚式(のjavascript)を実行するだけなら、ブックマーク機能でこのページをブックマークして、URLを編集してスクリプトを貼り付けて保存。それからURLを変更したブックマークをタップすれば実行できると思う。
たしかこういうURLでjavascriptを実行する機能はブックマークレットとかいう名前がついてるよ。
いいからスマホ版やりかた教えろよ! という場合はこちら
実際にやってみる
これは実行すると名前を入力するウィンドウが出てきて、名前を入力すると「あなたの名前は(入力した名前)です!」と言ってくるだけのプログラムだよ。
いきなりぐんたかの結婚式っぽくなくてごめんね! そのうちぐんたか感あふれるプログラムにするよ!
var name = window.prompt("あなたの名前を入力してください", ""); hello(name); function hello(name){ alert('あなたの名前は' + name + 'です!'); }
choromeを開いて右クリックして「検証」をおして、開発環境を開くよ
右下かどこかに「console」っていうタブがあるからそれをクリックしよう
>記号のところにコピーしたコードを貼り付けるよ。
でも貼り付けるボタンはないから[Ctrl]キーと[V]キーを同時に押すと貼り付けられるよ(macだとcmdキーとVキーかな…)
無事貼り付けられたら[Enter]キーを押そう、そうすると名前を入力するウィンドウが出てくる
適当に名前を入力してOKを押すと
解説する
さっき書いたjavascriptというやつ、これはもともとンターネットのサイトとかに動きをつけるために使ってる言語だよ。
サイトを見るためには普通はGoogle Choromeとか、safariとかIEとかのブラウザ(サイトを見るためのソフトの名前)を使うんだけど、こういったブラウザにはjavascriptの動きを解釈して「こういう表現ですよ」って見せてくれる機能がついてるんだよ。
だから消えるボタンとかマウスを動かすとついてくるキャラクターとかそういうのはたいていjavascriptがやってるよ。(今回はそこまでやらないよ!)
あとこのブログのゆゆゆ年表に最近検索機能をつけたけど、これもjavascriptでやってるよ。
こうやってブラウザにこういう表現やってくれ! って頼むために書くのがjavascriptだよ。
だからこのjavascriptに「ぐんたかを結婚させてくれ!」って頼むとぐんたかが結婚できる寸法だよ!
さっきのコードでブラウザにどんな表現をするよう何を頼んでるのか見てみよう。
まず1行目、これは二つにわかれるよ
var name = window.prompt("あなたの名前を入力してください", "");
name っていう箱を用意してください、中身は = の右側のものを入れてください
var name =
入力ウィンドウを表示してください(タイトルは”あなたの名前を入力してください”,初期値は””空にしてください);
window.prompt("あなたの名前を入力してください", "");
“”は「中に文字が入っていません」という意味で、空文字というよ
この入力されたものがnameの中に入るよ、先程のキャプチャだと「NOARTS_NET」という文字がはいったはずだよ!
ちなみに;(セミコロン)はこの行はここで終わります、という意味だよ!
あとこのnameの箱の中に何が入っているか知りたいときはconsoleにログを出力するよ
consoleに.ログを書いて(内容はnameの中身);
console.log(name);
この場合のconsoleはGoogle Choromeの開発ツールのconsoleのことだよ!
これを書くとプログラムがこの[console.log(name);]を通ったときにnameの中身がconsoleに書かれるよ!
余裕があったら下記のような形で書き加えて実行してみよう!
var name = window.prompt("あなたの名前を入力してください", ""); console.log(name);
2行目、これはひとつのことを表してるよ
helloという動作の塊を実行してください(halloにはnameの中身を渡します);
hello(name);
という意味だよ。
3行目から5行目、これはいくつかの内容にわかれるよ
これはhelloという動作の塊と、その動作の塊がなにをするかを表しているよ
function hello(name){ alert('あなたの名前は' + name + 'です!'); }
まず、3行目の部分
動作の塊を作ってください helloという名前で(受け取った箱にはnameという名前をつけてこの塊の中で使います){という文字から、動作の中身が始まります
function hello(name){
という意味だよ
そして4行目の部分
アラートを出してください、表示する文字は(’あなたの名前は’ をくっつけて nameの箱の中身を くっつくけて ’です’ );
alert('あなたの名前は' + name + 'です!');
そして5行目の部分
}という記号までが、実行する動作の塊です。ここからあとは実行しないでください
}
という意味になるよ! たった五行なのにえらい大変だね!!
ざっくりどう動くかわかったところでぐんたかを結婚させるプログラムを貼るよ!
javascriptでぐんたかを結婚させる
これが例のぐんちゃんと高嶋さんが結婚するプログラムだ!
よく見ると人道的にすごくひどいことをしているよ!
var chikage = window.prompt("高嶋さんと結婚する相手を入力してください", ""); gunntaka(chikage); function gunntaka(name){ //ここで強制的にぐんちゃんの名前をいれると『高嶋さんと結婚する相手を入力してください』の箇所で何を入力しても高嶋さんはぐんちゃんと結婚するよ、あとこの「//」はコメントがここからはじまりますよという意味で、コメントはこういうふうに何をかいても怒られない場所のこと(普通はプログラムの動作の内容とかをメモするよ) name = 'ぐんちゃん'; alert('高嶋さんは' + name + 'と結婚しました!'); }
実行してみる
consoleに貼り付ける
enterキーを押すとダイアログが出てくるので適当な名前を入力
ぐんちゃんと結婚した高嶋さん
ぐんたかが結婚するスクリプトスマホ版も作ったよ!
これを実行するとスマホでもぐんたかが結婚するよ!
もし実行するなら先に下記のコード(プログラムの文字)をコピーしておこう!
javascript:var chikage=window.prompt("高嶋さんと結婚する相手を入力してください","");gunntaka(chikage);function gunntaka(name){name='ぐんちゃん';alert('高嶋さんは'+name+'と結婚しました!');}
実行してみる(iPhone版でやった場合)
●とりあえずこのページを開いて、下のバーの真ん中のボタンをタップ
●左下の「ブックマークを追加」をタップ
●右上の保存ボタンを押す
●ブックマークページを開いて右下の編集をタップ
●赤い印がつくので、「javascriptでぐんたかを結婚させる」のブックマークをタップ
●「javascriptでぐんたかを結婚させる」の下のURL部分をタップ
●このページのスマホ用ぐんたかを結婚させるスクリプトをコピーする
●さっきのブックマーク編集のURLの場所に貼り付けて、右下の完了をタップ
●ここも右下の完了をタップ
●保存したブックマークをタップする
●ぐんたかが結婚するプログラムが実行されたのでダイアログが出てくる
●適当な名前を入力してOK
●高嶋ちゃんとぐんちゃんが結婚する!
おしまい。
改造してみんなゆうみもとかうたみととか結婚させればいいと思う。