変数2回目
前回も書きましたが、変数は躓きやすいポイントなので、
今回も変数について 説明していきます。
合わせて文字列についても説明しますので少し内容が多いですが 頑張ってくだい。
まずは変数を2つ使った場合の代入について確認です。
下記の代入の結果、aとbの値はどうなるでしょうか。
1 2 3 4 5 6 |
var a = 100; var b = "A"; a = b; document.write(a); document.write(b); |
ここでひとつ伝えておきたいことがあります。
chromeのコンソールはエンターキーを押してしまうと実行されますが
shiftを押しながらエンターキーを押すことで改行ができます。
複数行入力する場合に利用してみてください。
ちなみに正解はa,b共に「A」が入ります。
ここ、スムーズに回答できましたか?
ここから少しややこしくなるので、わからないところは今のうち
潰しておきましょう。
OKですかね。じゃあ、実際に確認してみましょう。
Chromeのコンソールの開き方は覚えていますか?
忘れた方は「2.クロームのコンソールでコードを書いてみよう。」を参考にしてください。
実行するコマンドは下記の通りです。
1行1行何が表示されるか予想して実行してみてください
1 2 3 |
alert('5+1'); alert(5+1); alert('5'+'1'); |
実行できましたか?
回答は次のようになります。
1行目:5+1
2行目:6
3行目:51
1行づつ説明していきますね。
1行目:alert(‘5+1’);
5+1が「’」シングルクォーテーションで囲まれています。
javascriptではシングル又はダブルクォーテーションで囲まれたものを
文字列として認識します。数値じゃなく、文字としてみます。
例えば「100」今あなたは「ヒャク」と読んだはずです。1が100個で100。
これは数値です。計算できます!
これをシングルクォーテーションで囲んだ場合「’100’」は(イチゼロゼロ)
これは1が100こ集まったものではなく1と0と0の文字が並んだものです。
計算には使われません!文字なので。
ちなみに、「’」シングルクォーテーションの代わりにダブルクォーテーション
「”」で囲んでも文字列として認識しますが、
HTMLでダブルクォーテーションを利用するケースが多く
間違いやすくなるので、シングルクォーテーションで文字列を表すようにしましょう。
2行目:alert(5+1)
1行目が理解できていたら答えられるはずです。
そうです、何にも括られていません。つまり数値です数値を足しています。
なので結果が6になります。
3行目:alert(‘5’+’1’)
ちょっと複雑です。
文字列の5と文字列の1を加えるとどのような結果になるか。
想像通りと思いますが、単純にくっつけるだけです。
左手に5、右手に1持って、ん!ってくっつけるだけです。PPAPです。
「+」の両側に文字列がある場合は文字列をくっつけてくれます。
これを文字列の結合と言います。
extra1:alert(5+’1′)
これはどうなりますかね。
数値の5と文字列の1を+する。
実際試してみると一目瞭然ですが、結果は51となります。
+の左右どちらかに文字列があると数値の文字列でも結合を実施します。
extra2:alert(5-‘2’)
これはどうなりますかね。
数値の5と文字列の2を減算する。
これは3が出力されます。計算されます。
-には文字列結合の機能がないので、javascript側で「’2’は数値やな」と
判断して計算してくれます。
extra3:alert(5-‘aaa’)
これはどうにもならんですね。
数値の5と文字列のaaaを減算する。
描いてて意味がわからないです。
コンピュータでもこれはNaN(Not a Number)が出力されます。
数字ではないという結果を返してきます。
文字列と数値に詳しくなったところで、変数の話に戻ります。
次のプログラムの結果がどうなるでしょうか。
1 2 3 |
var Japan = '日本' alert('Japan'); alert(Japan); |
‘Japan’は文字列なのでそのままJapanと表示されます。
‘Japan’はただの文字列なので。
一方Japanはシングルクォーテーションで囲まれてないので、コンピュータ
は何らかの意味があると考えます。今回の場合、Japanは変数として宣言されていて、
値に「日本」が入っているのでalert(Japan)は「日本」と表示されます。
もしJapanが変数と宣言されていない場合、alert(Japan)はエラーとなります。
実際にエラーを出して確認してみてください。
確認ができたら下記の変数と文字列、文字列結合のサンプルプログラム
を実行して演習問題を行いましょう。
index.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src=lec05.js></script> </head> <body> </body> </html> |
lec05.js
1 2 3 4 5 6 7 8 9 10 |
//変数に値を格納 var FirstValue = 10; var SecondValue = 90; //変数同士を加算した結果をさらに変数に格納 var Answer = FirstValue + SecondValue; //画面に表示 //+で文字列を連結することができます。 document.write(FirstValue+'と'+SecondValue+'の加算の結果は'+Answer); |
ちなみに//(スラッシュ2つで始まる行はコメント)と言います。
プログラムに関するメモを残したい場合や他の人がみたときに伝えておきたいことを
プログラムに残すときに使われます。
このコメント行はプログラムの実行時には無視されます。
まとめ
- シングルクォーテーションで囲われたものはPCでは「文字列」として認識する。
- 文字列同士を結合する場合は「+」の演算子を利用することで実現できる
- 文字列と数値を+で計算した場合は文字列が計算結果として返される。
課題
次のプログラムを実行した場合、a~dの変数にはどんな値が入っているか
考えてみてください。予想ができたら実際に実行して動作を確認してみてください。
1 2 3 4 5 |
var a, b, c, d; a = b = c = d = 100; b = 200; a = c = b - 50; |
宿題
次のプログラムがを実行した時、aとbの変数が最終的にどんな値が入っているか想像して
実行してみてください。
1 2 3 4 |
var a, b; a = 100; b = 500; a += b; |
1 COMMENT
[…] マンガテキストを追加しました。 紛らわしい、文字列と数字の扱いについて整理できるよう書いてます(^^) 第5回 変数と文字列について理解しよう […]