cre8cre8
AskMe♥

cre8cre8なJavaScript入門
~はじめてのJavaScriptで文字を装飾しよう~

HTMLはちょっと知っているけど、JavaScriptはわからない…でも、学びたい…
そう思われる入門者向けにJavaScript解説記事を書いてみました。
どうせ勉強するなら楽しみながら学びましょう!

それでは、王道の "Hello World" を表示してみましょう。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <p id="output"></p>
8
9    <script>
10      document.getElementById('output').innerHTML = 'Hello World';
11    </script>
12  </body>
13</html>

Hello World と表示されたら成功です。おめでとうございます。
記念すべきJavaScript第一歩目です。
document やら getElementById やら書いていることがよくわからなくても
一旦飛ばしてください。ちゃんと後の記事で解説いたします。
とりあえず、こう書けばHello Worldと表示されることをまずは覚えましょう。

それでは、どんどん進みまして、次に文字の色を赤色に変更してみましょう!
<script></script> の中身を追加してくださいね。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <p id="output"></p>
8
9    <script>
10      document.getElementById('output').innerHTML = 'Hello World';
11      document.getElementById('output').style.color = '#ff0000';
12    </script>
13  </body>
14</html>

文字色が赤色になりましたか?
こちらも先ほどと同じで、今はこのように書けば色が変わるんだと覚えてください。
思ったより簡単ですか?難しかったら遠慮なく言ってくださいね。


*余談ですが、 #ff0000 の部分は色のコードですので、ここの値を変更すると 好きな色に変更することができます。
例えば、 #00ff00 は緑色になります。RGBで調べて好きな色に設定してみましょう。

それでは次に、JavaScriptでフォントサイズ(文字の大きさ)を変更してみましょう。
少し詳しい方はお気づきかもしれませんが、
レイアウト関連の変更はだいたい style.xxx で変更できます。(xxxは変更するレイアウト名)
なので、フォントサイズの場合は、 style.fontSize でフォントサイズを変更できます。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <p id="output"></p>
8
9    <script>
10      document.getElementById('output').innerHTML = 'Hello World';
11      document.getElementById('output').style.color = '#ff0000';
12      document.getElementById('output').style.fontSize = '40px';
13    </script>
14  </body>
15</html>

大きくなりましたか?大きくならなかった場合は、打ち間違えがないかチェックしてみましょう。
さて、最後に document.getElementById('output') が3回も出てきて打つのがめんどくさくないですか?
便利でいい方法があるのです。

1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <p id="output"></p>
8
9    <script>
10      var output = document.getElementById('output');
11      output.innerHTML = 'Hello World';
12      output.style.color = '#ff0000';
13      output.style.fontSize = '40px';
14    </script>
15  </body>
16</html>

この便利な方法は変数といいます。
少し解説すると、値をメモリに保持して参照したり変更したりできる機能です。
小難しい話なので、今はとりあえずこうすれば何度も長ったらしく書かなくてよくなると覚えてください。
最初から全部理解しようとすると、なかなか進まなくて挫折しちゃいますので、
まずはこう書けば、こう動くんだという大まかな理解でどんどん進んでいきましょう。

次の記事はクリックすると何かが動く王道JavaScriptを学んでいきましょう。

≪ 前の記事
Pythonのリスト(配列)で、文字列の日付(日時)を基準にソートしようとしたときの、備忘録
次の記事 ≫
cre8cre8なJavaScript入門
~クリックしたらなんか動くようにしよう~

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事