忍者ブログ

そうだったのかブログ

初心者がゲームつくりに、プログラミングに、悪戦苦闘するブログ。

【Javascript】たのしいalert()【初心者目線】


こんにちは。

javascript初心者の管理人ほしなとおるです。

自分達のホームページとかを、見た目で少しでも変な表示を減らして楽しめるものにするために、悪戦苦闘することになるわけです。

そうして学んだこととか遊んだこととかを残そうというわけです。

今回はalert()です。


alert()って

フリーのHTMLエディタで打ってます。
ジャバスクリプトをは、<head></head>の間か、<body></body>の間に記述すればいいらしいです。
でも、HTMLは上から順番に読み込まれて実行されるらしいので、読み込みが全部終わってからスクリプトを実行したほうがエラーが少ないだろうということで、<body></body>の最後に持ってくるほうがいいとか、記事がありました。なるほど。

さて、<script></script>の中に、alert( ); を記述すれば、アラート表示の完成です。
素晴らしい。

カッコ内にいれた数字とか文字とか変数とかが表示されるわけです。



alertは何に使うのか
わたしには、よくわかりません(笑)
でも、スクリプトのエラーチェックにいいみたいです。

javascriptは書いた上から順番に処理が実行される。
エラーを起こした処理の下は実行されない。

ということで、あちこちにalertを仕込んでおけば...

実行されないalertの上にエラーがあるというわけですね!
これがなるほど便利でした!とっても!

他にも、文字列と数字とか、変数と変数の計算とか、結果がうまくいってるのかな?というときに、alert表示させて確認する。とかやってました。

エラーが起きても、計算が変でも、なんか…静かなんですよね…。エラー表示がされないというか。そしらぬふりでだま~っている。そんな感じ。ただ「期待通りに動かない」だけ、という感想。




alertに変数をいれてみる

var とつければ、後に続く文字列が変数になるみたい。(正しくはきちんと検索してね!)

今回はvar strとして、strという名前の変数を多用します。

早速そこに文字列を入れます。文字列はダブルクォーテーションで囲みます。

alert(str);

と記述。そしてブラウザに読み込ませます。アラートが表示されました。簡単って素晴らしい。

…では、alert( "str" ); としたら?(ダブルクォーテーションでstrを囲んでみた)


変数strの中身ではなく、文字列strとして扱われました。strと表示されてます。

文字列扱いだと見た目のまんまに表示されるんですね。

まてまて、知ってるぞ知ってるぞ。

シングルクォーテーション(’)で文字列を囲んでいるjavascriptのブログ記事もあることを。

 

・・・どっちでもいいみたい。普通に表示されたし。

すると?

ダブルクォーテーションとシングルクォーテーションのちゃんぽんは?

alertは沈黙しました。

エラーですよね。絶対。だから、動かないんですよね?ね?


変数を足してみる、つなげてみる…引いてみる(!?)
alertだけの話ではない気もしますが。
変数を足してみます、プラス記号で。
文字列の場合は、つながります。
 
しっかりつながりました。

…疑問発生。引けるのかな?文字列。

引けませんでした。
しかし、alertは表示されました(!)

そして表示されたのはNaN。

…NaNって何?

ならば、ついでに文字列の入った変数の掛け算もやってみる。

結果は、NaNでした。
エラーじゃないってことかな…。


NaNのことを調べてみた
詳細は、詳しくビシッと説明してくれる記事を読みましょう!

ふわっと書くと…
・NaNは、Not-a-Number の略である。
・非数という、特殊な値である。仲間にundefinedとかnullとかがいるそうで。
・結果がおかしくなる計算をすると、NaNという値になる。

…えーっと。値が得られている。それなりに正しく処理されてるからエラーではない。
だからalertが動いている…んだよね?

そもそも文字列から文字列を引く、というのが計算としておかしい、ということか?

「りんご」から「り」を引いたら「んご」になる…ってのは、こりゃだめか。



変数の計算とかを思いつく限りやってみる
じゃあ、せめて文字列をいっぱいくっつけてみる。

くっつきました。
alertにも正しく表示されました。


数字が入った変数の計算と表示
変数に数字をいれてみました。(最初にやっときなさい!)

str1に5を。
str2に21を。
str1+str2をalertに表示させれば…。

26 が表示されました。

当然っぽいといえば当然っぽいですが、なるほど便利な感じです。


文字と数字をごちゃまぜにしたら?
変数に数字+文字を入れました。
それを二つ用意して、alert表示しました。

そうしたら、全部見たまんま表示されてます。
どうやら文字が混じると、全部文字として扱われるということかも。


数字と文字が入った変数で、引いてみる
変数 = 文字 + 数字 ならば。
変数 - 文字 = 数字 にならないだろうか?
引いてみよう。

結果はNaNが表示されました。

…文字が混じっちゃえば、引くなどということはできないのでしょうね。(初心者だから)



諦めずに引いてみる
まてまて。
変数 = 文字列 となってるなら。
alert( 変数 ー 文字列 ); とすれば。
結果は、ゼロとかヌルとか、なんかNaNでないものが表示されるのではないだろうか!?

…。
NaNでした。

いやいや、ならばいっそのこと。
変数 = 文字列 だから。
alert( 変数 ー 変数 ); とすれば。
ゼロとかヌルとか、NaNでないものが表示されるのではないでしょうか!?

…NaNでした。



どんな文字でも表示されるだろうか?
alertに表示できる文字とか、表示できない文字はあるのか?
そんな広大な疑問は、解決できませんから(笑)

まず全角の記号を並べてみました。
変数に !”#$%&’()=~|「空 白」 と入れてalertで表示させます。

ちゃんと表示されました。

次に半角の記号。
!"#$%&'()=~|[ku ha ku] と変数に入れてalertで表示させようとしました。
が、結果してアラートが表示されませんでした。(画面写真はないが)

んで、ダブルクォーテーションが半角もじとして表示されるか、試しました。
str=””””; 
としたら、こうなりました。

エラーですね。これは全くもって、エラーなわけです。

これは後でエスケープ文字として解決することになります。


同じ変数を繰り返し使って表示する
変数strに「飛んで」という文字列をいれます。
それをalertで5回足して表示します。

問題なくつながりました。
足すのはイイですね。


小数点以下の表示はどうなんだろう?
シンプルに、10 ÷ 3 の答えを表示します。

小数点以下第16位まで表示されました。
頑張りますね。


大きい数字はどう表示されるんだろう?
とりあえず、適当におっきい数字を変数にいれました。
いくつになるんだ?
・・・無量大数を超えてる?よくわかんないけど、大きいからいいか。
で、alert表示させてみると…。

何か、電卓で見たことがあるような、eがついた数字が表示されました。
よかったよかった(意味が分かってない)


長い文字列を表示させてみる
alertの表示枠って小さいような気もします。
長い文を表示させて、枠をはみださせることはできるのでしょうか。


…枠が広がってますね。
いくらでも表示させる気かな?

もっと文章を長くしてみると?

おっ!
アラート表示枠にスクロールバーが!
ぜーんぶ表示させるみたいです!頑張る頑張る!


エスケープ文字
前述した、文字列にそのままでは使えない半角文字がありました。
ダブルクォーテーションで囲まれたダブルクォーテーションとか。
(シングルクォーテーションで囲めば可能だって?なるほど、そうか!)
そういう文字を、表示させるのがエスケープ文字というようです。
改行もできるみたいです。

\n が改行。バックスラッシュn、ですね。
¥円マークで表示されることもあるんですけど・・・。今はまだ謎です。

検索したブログ記事にあったエスケープ文字をふんだんに使った例がこちら。

…。
うん。
改行は、使い勝手よさそうですね。あとは ” と ’ とか。
フォームフィード文字ってなんだ?タブ文字というのも謎。

特殊な記号ということでいいのかな?そのうち調べてみます。



おわりに

エラーチェックと計算結果の確認に、とても便利な機能だと感じます。
普通にconsoleに何かの表示をさせる記事を見ますが…。
consoleって、どこですか(汗)
という初心者。
alertは探さなくても出てくれるので、ありがたいなあ。と思います。

エラーチェックに使う機能ってだけじゃないんですよね?きっと。
ほんとは何に使うんだろう…。

そんなわけで、今回はここまでです。
ではでは。

参考記事
【JavaScript入門】今さら聞けない!NaNの使い方と判定方法まとめ
とほほのJavaScriptリファレンス 文字列(String)


拍手[0回]

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

トラックバック

プロフィール



HN:
ほしなとおる
性別:
男性
自己紹介:
PCで創作活動してます。
作画ツールはFireAlpaca、GIMP。
最近UNITYをお勉強中。

フリーエリア

P R