まずは、今回作成したプロフィールを見てみてください！
https://elma-yo.github.io/
付けた機能のイメージ
今回はプロフィールで書いたJavaScriptのコードを紹介します。
使用したJavaScriptの機能は、２つあります。
- 写真にマウスホバーすると、tittle属性内の補助的な情報を表示します。
- プロフ写真をクリックすると、写真と自己紹介の文章を切り替えます。
▼ プロフィールを開くとの画面です。
▼ 写真にマウスホバーすると、tittle属性内の補助的な情報を表示します。
▼ プロフ写真をクリックすると、写真と自己紹介の文章を切り替えます。
JavaScripの構文
'use strict'
{
document.getElementById('twitter').title = "Twitter";
document.getElementById('qiita').title = "Qiita";
document.getElementById('github').title = "GitHub";
const img = document.getElementById('trigger');
const target = document.getElementById('target');
const cTarget = document.getElementById('c-target');
let state = true;
function hideCTarget () {
cTarget.style.display = "none";
}
hideCTarget();
img.addEventListener('click', () => {
if (state === true) {
target.style.display = "none";
cTarget.style.display = "block";
img.src = "img2.jpg";
state = false;
} else {
cTarget.style.display = "none";
target.style.display = "block";
img.src = "img1.png";
state = true;
}
});
}
HTMLとCSSのコードは、以下のGit Hubのページで見えます。
https://github.com/elma-yo/elma-yo.github.io
コードの説明
以下は、今回付けた２つJavaScriptの機能に分けて、区切りで分かりやすく説明します。
ホバーすると、title属性内の補助的な情報を表示
document.getElementById('twitter').title = "Twitter";
document.getElementById('qiita').title = "Qiita";
document.getElementById('github').title = "GitHub";
-
document オブジェクト
JavaScriptのプログラム上でdocumentオブジェクトを使えば、HTML要素の情報を取得することや新しい要素を追加することができます。 -
getElementById メソッド
getElementByIdは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。
英語でgetElementByIdとを分析すると、「get」、「Element」、「By」、「Id」４つの言葉に分けられます。「get」とは取得です。「Element」とはエレメント・要素です。「By」とは経由です。「Id」とはアイディー・識別ためのものです。
いわゆる、 getElementById('idName')の意味はidName（idの名前はHTMLでの要素に自由に付けていい）に経由して、この要素を取得 という意味です。 -
title属性
要素について補助的な情報を与えるものです。
例えば、下の画像で右側の歯車みたいなアイコンにマウスホバーすると、下に「設定」と表示しているグレイのブロックが出てきます。それはtitle属性を付けていることです。
-
まとめ
document.getElementById('twitter').title = "Twitter";
このコードの意味は、documentオブジェクトを通して、twitterというidを取得して、Twitterというtitle属性の内容を付けることです。 -
おまけ
JavaScriptでのプログラミングは、CSSのように「-」ハイフンを使えることではありません。例えば、class-listというコードはハイフンがあるので、JavaScritで使えばエラーが出てしまいます。
そのため、二つ単語がある場合、二つ目の単語の頭文字は大文字にすればいいです。例えば、classListとはオッケーです。
アイテムをクリックすると、内容を切り替えます
変数を作る
const img = document.getElementById('trigger');
const target = document.getElementById('target');
const cTarget = document.getElementById('c-target');
let state = true;
-
変数宣言の型の使い分け
よく見える変数宣言の型は「var」、「let」、「const」３種類です。
「var」はJavaScriptのバージョンES6を更新した前の型ので、使用する時は注意しなかったら、エラーが出る可能性があります。そのため、一般的に「let」、「const」２つだけ使っています。
「let」と「const」の簡単な使い分けは、再代入・再宣言ができるかどうかとのことです。「let」は再代入・再宣言ができます。「const」はできません。 (詳しい説明はこの記事の最後の参考文献に見てください。) -
Idを取得ために、変数を作る
HTMLでの３つId（trigger, target, c-target）を取得ために、変数imgと変数target、変数cTargetを作りました。この３つの変数は再代入・再宣言をしないので、 const との型を使いました。 -
状態を定義するために、変数を作る
後でのイベントの状態を定義するために、変数stateを作りました。また、この変数stateは、ブーリアン型(boolean)の true と false ２つ状態を変更するので、変数宣言の型は「let」を使いました。
function(関数)を作る
Javascriptのコード
function hideCTarget () {
cTarget.style.display = "none";
}
hideCTarget();
一部のHTMLのコード
<p id="target">
台湾出身の留学生です。<br>
現在は神戸情報大学院大学(KIC)の院生です。<br>
未経験ですが、Webエンジニアを目指して頑張っています。<br>
よろしくお願いします！
</p>
<p id="c-target">
・2022年4月からKICというICTに関する大学院に入りました。<br>
・2022年6月末からプログラミング言語を勉強し始めました。<br>
・勉強したプログラミング言語: <br>
 HTML, CSS, JavaScript, MySQL, PHP, Git, C。
</p>
プロフィールのページを開いたら、id="target"との文章だけ表示したいので、最初は__id="c-target"の文章を隠しなければいけないのです。そのために__、hideCTargetという関数を作りました.
関数中の「 cTarget.style.display = "none"; 」とのコードの意味は 変数cTargetに対して、要素を隠す(display = "none")とのスタイル(style)を追加する ことです。
最後はこの 関数を実行する ために、「 hideCTarget(); 」とのコードを書きました。
クリックするとのイベントを作る
1 img.addEventListener('click', () => {
2 if (state === true) {
3 target.style.display = "none";
4 cTarget.style.display = "block";
5 img.src = "img2.jpg";
6 state = false;
7 } else {
8 cTarget.style.display = "none";
9 target.style.display = "block";
10 img.src = "img1.png";
11 state = true;
12 }
13 });
-
addEventListenerとは
addEventListener() とは、JavaScriptからさまざまなイベント処理を実行することができるメソッドです。
英語でaddEventListenerとを分析すると、「add」、「Event」、「Listener」３つの言葉があります。「add」とは追加です。「Event」とはイベントです。「Listener」とはリスナー・聞き手ですが、ここでの意味は追跡器です。いわゆる、 対象要素に対して、イベントの追跡器を追加する ことです。
今回書いたコードは「 img.addEventListener('click', (){}); 」との意味は、 変数imgとの要素に対して、click（クリック）とのイベントを追加して、このイベントが起きたら、追跡する ことです。 -
if条件文を作る
ここのif条件文のためは、条件はtrue（真）の時にclickすると写真と文章は変更するのし、条件はfalse（偽）の時clickすると写真と文章は最初の状態に戻すことです。 -
if...else...文のコードを説明する
2行目：もし変数stateの状態はtrueの時、後ろの命令を実行することです。
3行目：変数targetに対して「非表示」とのスタイルを追加することです。
4行目：変数cTargetに対して「表示」とのスタイルを追加することです。
5行目：変数imgに対して「img2.jpg」との写真を付け替えることです。
6行目：変数stateに対して「false」に書き入れることです。
7行目：もし変数stateの状態はtrueではない（false）時、後ろの命令を実行することです。
8行目：変数cTargetに対して「非表示」とのスタイルを追加することです。
9行目：変数targetに対して「表示」とのスタイルを追加することです。
10行目：変数imgに対して「img1.png」との写真を付け替えることです。
11行目：変数stateに対して「true」に書き入れることです。
いわゆる、7~11行目のためは、もう１回クリックすると最初の状態に戻すことです。
以上のように、コードを区切るして理解すると、JavaScriptの初心者でも自分のプロフィールでJSのコードを実装できますよ！
最初にJavaScriptを触った時、ルールやコードは多くて理解できないなーという声が出るかもしれませんが、練習すれば・チャレンジすれば、誰でもできますよ！
ちなみに、私もJavaScriptの初心者です。一週間だけの勉強で、以上のJsのコードと記事ができました！
おまけですが、今回は「ドットインストール」の動画で勉強しました。おすすめです！