概要
JavaScriptの役割とJSの主なアウトプットについての記事です。
JSできること
JSでできることは以下になります。
①ユーザーが入力した情報を含むWebページ上の情報を読み取る。
②ユーザーからのアクションによって処理を呼び出す。
③Webページを書き換える。
③Webページに動きを与える。
④情報をもとにブラウザのストレージに記録する。*ストレージとはデータを保存する場所のことです。
JS出力までの流れ
インプットからアウトプットまで
①イベントの発生(ユーザがクリックしたとき、もしくはスライドしたときなど)
②インプット(HTML/CSSから情報を読み取る)
③加工(イベントに伴う処理、情報からの計算など)
④アウトプット(HTML/CSSを書き換える、処理に伴う結果を出力する)
大事なポイント
JSを書くときに最低限必要になるのは3つです。このポイントを押さえながら、コードを書いていくことをおすすめします。
①HTML/CSSの情報を読み取る
②その情報をもとに加工
③HTML/CSSを書き換える
具体的な書き換え
①タグに書き込まれたテキストの書き換え
②要素の追加、削除
③タグ属性を書き換える
（例）
index.html
<img src="image.png" >
srcが属性値、image.pngが属性値になります。
③CSSの値の変更
（例）テキストの色、背景画像の変更
具体的な情報の読み取り
①郵便番号の読み取り
②入力文字数の読み取り
③ブラウザの開かれた時間
アウトプットの場所
JSの主なアウトプットは以下のようになります。
①コンソールにアウトプット
②ダイアログボックス
③HTML/CSSへのアウトプット
出力してみよう
では、早速出力していきましょう。
index.js
console.log('HELLO!');
ブラウザのコンソールタブにHELLOと出力されました！
このconsoleからオブジェクトが始まっています。
オブジェクト
<<誰々は何何をどうしなさい>>
①console ▶オブジェクト
(history,document,location,windowなど)
オブジェクトはJSが指示を出す相手になります.つまり誰にの部分になります。
②('HELLO!') ▶パラメータ
指示に必要な情報になります。何々をに当たります。
ちなみに'',""どちらでも良いです。
index.js
console.log("It's OK");
しかし、このように文章中に'シングルクォーテーションが入る場合などはダブルクオーテーションにしないとエラーの原因になります。
使い分けましょう。
カッコ内にも種類があります。
index.js
console.log('あいうえお'); //文字列 あいうえお
console.log('3+2'); //文字列3+2
console.log(3+2); //数式5
と表示されます。
③log('HELLO!') ▶メソッド
オブジェクトにさせたいことです。どうしなさいに当たります。
()内のテキスト、数式の計算をさせます。
文字と文字列
あ▶文字
あいうえお▶文字列
文字列結合といいます
index.js
console.log('チョコ' + 2 + '枚'); // チョコ2枚
↧