変数の置き換え
JavaScriptで定義した変数の値は、後から置き換えることができます。
置き換える場合は、変数名='置き換えたい文字'という書き方をします。
今回は、buidingName変数の値を住宅から事務所ビルに置き換えています。
住宅は文字列データのため、' 'で囲み、buildingは変数ですのでそのまま記入しています。
let buildingName='住宅';
console.log(buildingName);
buildingName='事務所ビル';
console.log(buildingName);
buildingName変数のように、変数や関数に付けられた名前のことを識別子といいます。
識別子は、1buildinNameのような先頭に数字を使うことはできません。
$buildingNameや_buildinNameは可能です。
テンプレート文字列
文字列と変数で定義した値を連結するコードをテンプレート文字列を用いて記述していきたいと思います。
例えば、以下のコードでは、${変数名}と記述することで、テンプレート文字列の中に、buildingName変数の値、カフェを埋め込んでいます。
const buildingName='カフェ';
const goal=`朝8時、${buildingName}集合`;
console.log(goal);
これにより、コンソールには、朝8時、カフェ集合と表示されます。
変数で定義した値を埋め込む方法には、その他にも' 'などで囲んだ文字列データに+記号を利用して変数の値をくっつけるという方法がありますが、こちらの方が利用しやすくなっています。
関数
関数は、行う処理は同じであるが、関数中身の一部内容だけを変えたいという場合に利用します。
関数には、引数と戻り値というキーワードがあります。
引数は、引数の値に応じて関数の中身を変えたい部分に利用します。
そのためには、関数に引数を渡す必要があり、関数名(引数）のように記述します。
関数を呼び出す時は、具体的な数値などを引数として渡すことで、様々な処理結果の関数を呼び出すことでできます。
また関数を処理した結果、何らかの値を得たい時は、returnというキーワードを用いて戻り値を得ます。
戻り値は、関数を呼び出すことで利用することができます。
プロパティの値は変数に代入できる
プロパティの値は、変数に代入することができます。
このことを利用して、同じオブジェクトの中にあるnameプロパティの値にアクセスする場合は、${this.name}と記述することができます。
引数は関数内部で変数として使える
引数は、関数内部で変数として使えます。
例えば、オブジェクトの中のgreetメソッドの引数をfriendとした場合、関数の処理のコードの中で、${friend}と記入することで、引数を変数として扱い、その値を呼び出すことができます。
jQuety cssメソッド
jQueryでもcssメソッドの引数にオブジェクトを渡すことで、マウスが乗った部分の色を変えるなどの変化をつけることができます。
記述方法としては、マウスが乗った時の色とマウスが乗るというイベントを{ }で囲んでオブジェクト単位とすることで、マウスが乗った時の処理を変数に代入することができます。
最終的には、onメソッドを利用してマウスが乗った部分の色を変化させます。
onメソッドの第一引数にマウスが乗るmouseenterという文字列を渡して、第二引数として上記で定義したアロー関数などを代入した変数を渡します。
イベントではonメソッドを使う
以下のようなコードがあるとします。
$('.child').on('cllick',()=>{
デバッガツールで確認すると、$('.child').onが一固まりとなり、name:”on "と表示されます。
name:”on "、つまりonプロパティのメソッドを呼び出していると解釈できます。
onメソッドには、イベントの種類と、イベントが発生した時に呼び出される関数を渡すことができます。
実際に関数を渡そうとするとコードが長くなるため、アロー関数などで記述した関数を変数に代入しておきます。
これにより、変数をonメソッドに渡すことができるため、コードを短くすることができます。
【プログラミング 】
プログラミング学習は、独学では、学習が継続できない、エラーの原因が見つけられないなど多くの行き詰まりがあります。
第一歩はスクール学習を始め、その上で書籍、周りにある情報を組み合わせた方がいいと気づかされます。
以下参考に、まずはメンターへの無料相談からでも開始することができます。
【英語で学ぶプログラミング】
Change the color of the clicked text【jQuery】
【書籍】
