こんにちは－！
HTMLとCSSになれてきたみなさん
自分のサイト、いつも使ってるサイトに比べて
なんていうか質素。シンプル。機械的って思いませんか。
それはなぜか、、動きがないからです。
動きってどうやって出すんでしょう
CSSだけじゃ、まだまだ、ぎこちない。
そこでHTMLとCSSに動け！変化しろ！と命令できる者こそが、、
JavaScriptなんです。
じゃあ初めからJavaScript教えてよ！と思うかもしれませんが
HTMLがないとJavaScriptはどこを変化させればよいかわからなくなってしまいます。
HTMLはWebページを構成するテキストや画像をPCに理解できるように意味づけをする役割を担ってます。
CSSが装飾できるのも、JavaScriptが素敵な変化を加えられるのも
HTMLのおかげなんですね。
では、JavaScriptっていったいどんなやつなのか、、仲良くなっていきましょう。
用語確認
オブジェクト
JavaScriptの指示を与える対象のこと。
window.alert('Hello');
これは画面(window)に‘Hello’と表示させる文章です。
しかし基本的にこの「window」オブジェクトは省略されることがほとんどです。
プロパティ
オブジェクトのもつデータを、そのオブジェクトの「プロパティ(所有物や性質)」といいます。
対象となるオブジェクトの「現在の状態」を知ることができたり、状態を変化させることができます。例えば
alert(scrollY);
=> 330
これは現在の画面が上から330pxのところにあるという意味です。
‘scrollY’のYはY軸(縦軸)のことです。
メソッド
メソッドは動きを指示します。何個か挙げてみます。
prompt('あなたの年齢は？'); //記入を必要とする質問をする
alert('決済が完了しました。'); //一方的な通知をする
confirm('予約をキャンセルしますか？') //Yes or Noで答える質問をする
これもどんな種類があるのか調べてみましょう！
文字列を書いてみよう！
それでは実際にコードを書いてみましょう
'Hello';
「Hello」と表示されているはずです。
文字列はシングルクォーテーション('')またはダブルクォーテーション("")で囲みます。
どちらを使用しても問題ありませんが、必ずどちらかに統一させましょう。
今回はシングルクォーテーション('')を使っていきます。
また、文字列中の改行は
'Welcome\nGeekSalon'; //改行エスケープシーケンス\n
=>"Welcome
GeekSalon"
で表すことができます。
数値の計算
JavaScriptでは演算子という記号を組み合わせて四則演算などの計算をすることができます。
10 + 5; //足し算
=>15
5 - 8; //引き算
=>-3
6 * 2; //掛け算
=>12
81/9; //割り算
=>9
10 % 3; //余り
=>1
それでは先ほどの文字列との違いに注意して問題を解いてみましょう！
'3'+'3';
これは何と表示されるでしょう？予測してみてから実際に打ってみましょう。
5*(2+4)+3;
こーたさんに借金返済を迫るJavaScript
ここで問題です。こーたさんに、月500万円貸していたとします。
１年たって、あれ？いくら貸したんだっけとなったときどのように知らせましょうか。
alert('いつまでに'+500*12+'万円返してくれるんですか？');
変数について
変数とは、一時的なデータの保存場所です。
変数というハコにデータをいったん置いといて、必要な時に取り出します。
中身は記憶するデータによって変わってくるので、変数といいます。
使い方は
1.変数に名前を付ける
変数はvarキーワードで宣言する
var name;
変数には命名規則があります！これはググってみましょう。
2.変数にデータを記憶させる
3.利用する、引き出す
これだけです！
それでは手を動かしてみましょう～
チャラいJavaScript
var kawaii; //kawaiiという変数を用意
kawaii = 'Arisa'; //変数の中に'Arisa'を記憶させる
console.log(kawaii); //変数の中身を表示させる
なんと言ってくれましたか？？？笑
一方で、さくらちゃんに対してはなんというのでしょう。
kawaii = 'Sakura'; //変数の中に'Sakura'を記憶させる
console.log(kawaii);
え、、、、！
console.log(kawaii);
=> sakura
なんどやってもSakuraしかいわなくなった、、、！！
JavaScriptは最新のものしか覚えられないということがわかります。
魔法の鏡JavaScript
JavaScriptはユーザーから情報を得て、その情報を使って表示させることができます。
var message = 'kawaii'; //messageという変数の中に代入
var name = prompt('whats your name?'); //名前を聞いて変数にしまう
alert(message+name);
さてさて、「かわいいのはだぁれ？」と
=> kawaiiArisa
ええ子だ。
健康のお供JavaScript
それでは応用編に入っていきます！
BMIって知ってますか？
体重(㎏)×{身長(M)×身長(M)}で求めることができる肥満指数のことです。
この練習ではユーザーから体重と身長の情報を得てから
実際にBMIの計算をしてみたいと思います！
var weight = prompt('あなたの体重は？'); // 体重を聞いて変数に収納
var height = prompt('あなたの身長は？(ｍ)');// 身長を聞いて変数に収納
var bmi = weight/(height*height); // BMIを求める式を変数に収納
alert('あなたのBMIは'+bmi+'です。'); //警告ダイアログに表示させる
=> あなたのBMIは【ひみつ】です。
基準は
18.5未満：やせ
18.5~25未満：普通
25~30未満：肥満（1度）
30~35未満：肥満（2度）
35~40未満：肥満（3度）
40~：肥満（4度）
だそうです（wikipediaより）
食欲の秋ですなぁ
条件ごとに仕分けする
回答によっては動きを変えたいことは多々あります。
相手のでどころを探り探りという感じです。
それでは女の子が京都までの行き方を尋ねているという設定で確認していきましょう。
以下、コピペしていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/app.js">
</script>
</body>
</html>
var budget = prompt('京都までね。いくらあるの？'); //変数bugetにユーザーからの情報をしまう
budget = parseFloat(budget); //文字列を数値に変換
if (budget >= 12000) { //所持金が12000円以上の場合
alert('新幹線の切符を購入');
} else if (budget >= 4000) { //所持金が4000円以上の場合
alert('夜行バスの切符を購入');
} else { //所持金が4000円未満の場合
alert('こーたさんに連絡');
}
実際にcromeで見てみましょう！
(1)20000(2)9000(3)300 で回答してみるとどうなりましたか～！
おまけ（こんなことができるようになるよ）
file:///C:/Users/ala-n/Desktop/Geeksalon/yasashiijs/sample_js/fontbomb.html
さてさてお疲れ様でした！JavaScriptとは仲良くなれそうですか？
一回では覚えられないです！何回も見て打ってみて理解していきましょう！