JS基礎①

概要

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枚