N予備校の「プログラミング入門 Webアプリ」を受講しています。
今回は第1章17節「診断機能の組み込み」と18節「ツイート機能の開発」です。
機能追加
```javascript //診断ボタン押下時の処理 assessmentButton.onclick = () => { //ユーザー名取得 const userName = userNameInput.value; if(userName.length === 0){
//空欄なら処理を終了
return;
}
//診断結果取得
const assessmentResult = assessment(userName);
//診断結果の表示
createAssessment(resultDivided, assessmentResult);
//ツイートボタンの表示
createAssessment(tweetDivided, assessmentResult);
}
//Enter押下でも処理を実行する
userNameInput.onkeydown = event =>{
if(event.key === 'Enter'){
assessmentButton.onclick();
}
}
/**
-
指定した要素の子要素を全て削除する
-
@param {string} element HTMLの要素
/
function removeAllChildren(element){
//既に診断結果がある場合
while(element.firstChild){
//子要素がある限り削除
element.removeChild(element.firstChild);
}
}
/* -
診断結果を表示するためのタグを追加する処理
-
@param {HTML Element} HTML要素
-
@param {String} 診断結果
*/
function createAssessment(element, result){
//子要素の削除処理
removeAllChildren(element);
//診断結果表示
if(element === resultDivided){
//タイトル
const header = document.createElement('h3');
header.innerText = '診断結果';
//結果表示エリアに追加
element.appendChild(header);
//診断結果 作成
const paragraph = document.createElement('p');paragraph.innerText = result; //結果表示エリアに追加 element.appendChild(paragraph);}else{
//アンカータグ
const anchor = document.createElement('a');
//href の内容
//URIエンコード
const uriJp = encodeURI('あなたのいいところ');
const hrefValue ='https://twitter.com/intent/tweet?button_hashtag='+ uriJp +'&ref_src=twsrc%5Etfw';
//アンカータグ 各種設定
anchor.setAttribute('href', hrefValue);
anchor.className ='twitter-hashtag-button'
//anchor.setAttribute('class', 'twitter-hashtag-button');
anchor.setAttribute('data-text', result);
anchor.innerText = 'Tweet #あなたのいいところ';
//アンカータグの追加
element.appendChild(anchor);
//scriptタグ作成
const script = document.createElement('script');
//src の設定
const src = 'https://platform.twitter.com/widgets.js';
script.setAttribute('src', src);
//Scriptタグの追加
element.appendChild(script);
}
}
共通部分はできるだけまとめたかったけど、あんまり綺麗にできなかった気がする。
<h2>覚えておきたいこと</h2>
:::note
1. アロー関数
2. ガード句
3. URIエンコード
4. onkeydownイベント
:::
<h3>アロー関数</h3>
今まで見かけたことのある記述の謎が解けた。
```javascript
assessmentButton.onclick = () => {}
assessmentButton.onclick = function(){}
同じことらしい。
functionあったほうが個人的にはわかりやすいけれど。
ガード句
```javascript if(userName.length === 0){ //空欄なら処理を終了 return; } ```URIエンコード
URIのクエリに半角英数字以外が入ると文字化けが起きたりする。encodeURIComponent 関数で 文字列を URI エンコードされたものへ変換
decodeURIComponent 関数で URI エンコードされた文字列から元のものへ復元
onkeydown
```javascript //Enter押下でも処理を実行する userNameInput.onkeydown = event =>{ if(event.key === 'Enter'){ assessmentButton.onclick(); } }userNameInput.onkeydown = function(event){
}
ここにもアロー関数が。
<h2>次回に向けて</h2>
第一章の講義は次回で終わりみたいです。
といってもGitHubの登録とか使い方みたいな感じなので、記事にするかどうかはわかりません。
練習問題やりつつ、次章へって感じでしょうか。