//tips
//java理解
Javaの基礎部分を理解する。
Javaではブラウザを構成するオブジェクト(ウィンドウ、アドレスバー、コンソールなど)を操作したり、状態を読み取ることが可能。
先のブラウザのコンソール処理もjavaにて行っている。
オブジェクトを指定し、メソッドを実行させる。例えば、Console.log()は、consoleオブジェクトに対して()内のテキストや数値を表示させるというもの
Javaでのシングルクォート’の役割としては、テキストとして、そのままの表示で出力したい時に使用する。ダブル”でも大丈夫なよう。
シングルクォートが推奨される理由としては文字列の中にダブルクォートが含まれる場合、必ず全体はシングルクォートで囲まなければならないというルールがあるから。
Htmlに<script></script>を追加することでその中に直接javaを書くことができる。
記載場所としては一般的には</body>の直前に書かれることが多いが、<head><body>内にどこでも追加できる。
<script>を記述する際には次の行には’use strict’;を記載し、新しいjavascriptを実行するように指示する。これは古いjavaが残っている可能性があり、ミスやエラーを減らすために行う。
Htmlにjsを読み込ませる為には同一フォルダ内のjsをsrc指定してあげれば良い。
<script src="script.js"></script>
フォルダが異なる場合はパスを指定。
script src=“HTMLファイルからのパス”></script>
<script>
'use strict';
console.log('よく柿食う客だ');
</script>
Jsには下記の記載で大丈夫。
'use strict';
console.log('隣の客は');
Html側で注意することとして、javaを使用する際には必ず文字コード形式をUTF-8として指定する。これを指定していないと正しく機能しないことがあるよう。
<meta charset="UTF-8">
まだこの段階ではブラウザのコンソールへの出力なので画面の表示の書き換えは行われていない。
コンソール表示の順番として、script.jsの処理内容を先に記載し、次によく柿食う客だが表示されるようになっている。
<script src="script.js"></script>
<script>
'use strict';
console.log('よく柿食う客だ');
</script>
次はブラウザにダイアログボックスを表示させる。
<script>
'use strict';
window.alert('アプリ連携が完了しました。');
</script>
window.alert(出力したいもの、文字の場合は’が必要)
ここでのオブジェクトはwindowに変わっていることがわかる通り、オブジェクトごとに使用できるメソッドも変わるので覚えておく必要がある。
今度はHTMLの書き換えに挑戦する。
HTMLに書かれた要素を書き換える為には
・書き換えたい部分のHTMLタグとそのコンテンツを取得する
・取得したコンテンツを書き換える
の2つの段階に分かれている。
HTMLに書かれた要素をjsで取得するには複数の方法があるが、最もシンプルなのがid属性を持つ要素の取得であり、例えば、
＜p id=“choice”＞日時</p>
<script>
‘use strict’
console.log(document.getElementById(‘choice’));
</script>
のようにすることでjsの<script>内の中でidのchoiceを見つけて内容を取得できる。
Documentオブジェクトにはブラウザに表示されているHTMLやCSSを操作するための機能が多数用意されているようなのでかなり便利。
getElementByIdメソッドは()内に指定されたid名を持つ要素を全て取得する。
ここからさらに取得したdocument.getElementById(‘choice’)の内容を書き換えていきたいので、
document.getElementById(‘choice’).textContent = new Date();
こうすることで
Sat May 29 2021 13:51:51 GMT+0900 (日本標準時)
のように記述を変更できる。
この=以下の部分は’’で囲まれた普通の文字列でも問題ない。
またこのメソッドの使用で完了するものもあれば返り値を返してくるものもあり、例えばwindowオブジェクトのconfirmメソッドはダイアログを表示し、そこにOKまたはキャンセルという選択肢を表し、クリックされた方の値をtrue,falseなどで返す。
<script>
‘use strict’
if(window.confirm(‘準備はいい？’))
{
console.log(‘OK’);
}else{
console.log(‘待機’);
}
</script>
とすることで、boolと同じ役割を果たすため、押されたボタンによって処理の実行が変化する。
これを応用するとテキスト入力できるダイアログを表示して、その入力内容に応じて別のダイアログを出すことが可能になる。
<script>
‘use strict’
let answer = window.prompt(‘ヘルプを見ますか？’)
//変数answerに代入
console.log(answer);
</script>
promptメソッドはユーザがテキストを入力できるテキストフィールドがついたダイアログを表示するメソッド。
ヘルプを見ますか？のダイアログ表示とそのダイアログへの入力を行い、OKを押すと入力内容をコンソールに返すようになっている。
変数answerは現在のページが表示されている間のみ代入されたものを記録しておける。他のページに移ってしまったら初期化されてしまう。
<script>
‘use strict’
let answer = window.prompt(‘ヘルプを見ますか？’)
if(answer===‘yes’){
window.alert(‘オブジェクトをクリックしてください’);
}
</script>
このようにすると最初のダイアログでyesを入力した場合に、次のダイアログを表示させることができる。
Jsの場合は左右を比較する場合===イコール3つ使用が一般的。==にするとできるだけtrueになるように試行錯誤するプロセスが入るので厳密な比較というよりは部分一致に近いニュアンス。
