Challenge programming

JavaScript

[0]を付けて行数を合わせる　| Add [0] to match the number of lines

HTML、Javascript <body>

<script>
var add = function(num, digit){
var numString = String(num);
while(numString.length < digit){
numString = '0' + numString;
}
return numString;
}
console.log(add(13,3));
document.write(add(13,3));
</script>
</body>


解説

「var add = function(num, digit){」　→　このファンクションはパラメータを２つ受け取ります。最初のパラメータnumが実際に桁数を整形する数、2番目のdigitが桁数を指定してます。| This function takes two parameters. The first parameter num specifies the number that actually formats the number of digits, and the second digit specifies the number of digits.

numに代入されたのが例えば「1」で、digitが「2」だとします。ファンクションの機能としては「1」を「01」リターンする必要が出てきます。桁数を合わせるため数値を文字列に変換して[01]と表す必要が出てきます。

「 var numString = String(num);」　→　そこでStringは()内のパラメータとして渡されたデータを文字列データに変換します。| String converts the data passed as a parameter in () to string data.

「 numString = '0' + numString;」で文字列連結で「0」を付けています。

while文にて、numStringが「13」のとき（かつ、digitが3のとき）、条件式の評価結果は3桁より少ないのでtrueになります。なので13の手前に'0'が連結されます。| In the while statement, when numString is "13" (and digit is 3), the evaluation result of the conditional expression is less than 3 digits, so it is true. So '0' is concatenated before 13.

曲目リストに番号をつける | Number the song list

HTML <section>
<h2>BON JOVI | THIS HOUSE IS NOT FOR SALE</h2>
<div id="list"></div>
</section>
JavaScript var addZero = function(num, digit){
var numString = String(num);
while(numString.length < digit){
numString = '0' + numString;
}
return numString;
}

var songs = [
'THIS HOUSE IS NOT FOR SALE',
'LIVING WITH THE GHOST',
'KNOCKOUT',
'LABOR OF LOVE',
'BORN AGAIN TOMORROW',
'ROLLER COASTER',
'NEW YEAR DAY',
'THE DEVIL IN THE TEMPLE',
'SCARS ON THIS GUITER',
'GOD BLESS THIS MESS',
'REUNION',
'COME ON UP TO OUR HOUSE'
];
for(var i = 0; i < songs.length; i++){
var paragraph = document.createElement('p');
paragraph.textContent = addZero(i + 1,2) + '. ' + songs[i];
document.getElementById('list').appendChild(paragraph)
}

BON JOVI | THIS HOUSE IS NOT FOR SALE

解説

「for(var i = 0; i < songs.length; i++){」　→　for文による繰り返しです。

「var paragraph = document.createElement('p');」　→　配列songsの項目数分<p>を生成してます。

「paragraph.textContent = addZero(i + 1,2) + '. ' + songs[i];」　→　そしてそれをテキストコンテンツとして桁数整理された番号と、配列データを文字列連結して表示しています。

「document.getElementById('list').appendChild(paragraph)」→　そして最後にid'list'を取得し、子要素を追加しています。appendChildは、特定の親要素の中に要素を追加するためのメソッドです。要素を指定し、その要素の子要素として、HTMLタグを追加することができます。




この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。


私は人から丁寧に教わりたい、という人にはこちらもどうぞ。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

ぺージの先頭に戻る(Return to top of page)


©2020年9月 Challenge programming

プライバシーポリシー