JavaScriptはHTML内に直接書くこともできる(外部ファイルじゃなく)
<script></script>で囲ったなかは、治外法権になり、完全にプログラムのモードになる。
htmlの記述をしてもエラーになる。
オブジェクトはプロパティやメソッドを持っている。
指示の書き方:
オブジェクト. メソッド()
オブジェクト. プロパティ=値
ドットの後は半角スペース空ける。
メソッドの後には何をするかの「パラメーター」が要る。
logメソッド:
何か書き出すためのメソッド
test1.html
<script>
console. log('Hello World!');
</script>
→保存
→chromeのconsoleで確認
→Hello World!
じゃあ、これはどうなるでしょう。
<script>
console. log(1+1);
</script>
プログラムのパーサー(解釈して実行するエンジン)の癖がこれでわかる。
丸括弧の中身の方が先にパースされたことがわかる。
書き出せ、というlogの命令よりも先に、
括弧の中の1+1が優先されて計算された。
→
括弧があると先にパースされる。かっこのなかの括弧ならさらに先にパースされる。
test1.html
style.css
chromeのconsole
HTML内に<script>要素を置くとき:
<body>のしっぽに置くようにする
→なぜか
→全部読み込みがおわっていないのに実行しようとするとバグる。
→だから、</body> (bodyの閉じタグ) のすぐ上に記述する。
<script src="app.js"></script>
</body>
新規作成
→app.js
console. log('ok');
→保存
→再読み込みすると、chromeのconsoleでokと表示される。
<まとめ>
consoleというのはオブジェクトですよ。
メソッドを使うときはかならず丸括弧を書く。
必要があれば丸括弧のなかにパラメーターを書く。
JavaScriptが考える最上位の「オブジェクト」はウィンドウオブジェクト。
それを使ってみましょう。
app.js
window. alert('ok?');
このメッセージボックスはあまり実際には使わないが、実験にはよく使う。
alert(アラート):
注意喚起するメソッド。
似たものが3つある。
alert:OKしかでない(戻り値がない。警告のみ)
confirm:ok or cancelボタンが出る(コンファームは戻り値がある)
window. confirm('ねむい?');
メソッドを実行すると戻り値がある。
OK押したの?キャンセル押したの?という結果が実は戻ってきている。
console. log(window. confirm('ねむい?'));
→
chromeのconsoleにtrueかfalseで戻り値が表示される。
(window. confirm('ねむい?'));が実行された後に、その値(戻り値)があるので(okボタンを押したのでtrueか、キャンセルボタンを押したのでfalseか)、その戻り値をconsole. log(コンソールに表示してね)という意味のコードになる。
【これからの授業】
ネイティブコードは最初のほうだけにして、
あえてジェイクエリーで翻訳しながら(シンプルなやりかたで)JavaScriptをやっていきましょう。
もともとネイティブなJavaScriptにない処理が、ジェイクエリーで新しくつくられたメソッドで、1行で実行できたりする。
それを組み合わせることで、面倒な処理をかなり簡単に記述することができる。
ジェイクエリーはオープンソースのライブラリーである。
色見本をプログラムで自作していきましょう。
プログラムはこの3つのパターンしかない:
逐次実行
条件分岐
繰り返し(ループ処理)