JavaScriptを使って[0]を付けて行数を合わせる

[0]を付けて行数を合わせる

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>

013

解説

「var add = function(num, digit){」　→　このファンクションはパラメータを２つ受け取ります。最初のパラメータnumが実際に桁数を整形する数、2番目のdigitが桁数を指定してます。

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

「 var numString = String(num);」　→　そこでStringは()内のパラメータとして渡されたデータを文字列データに変換します。

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

while文にて、numStringが「13」のとき（かつ、digitが3のとき）、条件式の評価結果は3桁より少ないのでtrueになります。なので13の手前に'0'が連結されます。

曲目リストに番号をつける

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

01. THIS HOUSE IS NOT FOR SALE

02. LIVING WITH THE GHOST

03. KNOCKOUT

04. LABOR OF LOVE

05. BORN AGAIN TOMORROW

06. ROLLER COASTER

07. NEW YEAR DAY

08. THE DEVIL IN THE TEMPLE

09. SCARS ON THIS GUITER

10. GOD BLESS THIS MESS

11. REUNION

12. COME ON UP TO OUR HOUSE

解説

「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円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

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

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