わかりやすいJavaScript！-1 試してみよう

JavaScriptは簡単に使うことができるプログラミング言語です。今現在インターネットが繋がって、いろんなページを見ることができるパソコンであればまず使えます。

テキストエディタと呼ばれる文字が打ち込むことができるソフトとSafariやEdgeなどのブラウザがあれば使いことができます。

さらにいうとブラウザ一つあれば、JavaScriptが使えてすぐに状態をプレビューできるサイトもたくさんあるので試すために環境構築もしなくてもすぐに始められるのも良いところです。

では実際に動かしてみましょう。環境構築のいらないすぐに試すことができるサイトで動かしてみましょう。

便利なWebサービスJSbinを使ってやっていきます。

必要な画面を表示・非表示を切り替えなが使うことができます。（左上のバツを押せば上部分のブルーの範囲を消すことができます）

デフォルトではHTMLとOutputが表示されています。

まず簡単にJavaScriptのみ使いたいのでJavaScript、Outputのみの画面にしてJavaScriptのタブにコードを書いて実行してみます。

const new_element = document.createElement('div')
new_element.style.backgroundColor = "#add8e6 ";
new_element.style.width = "200px";
new_element.textContent = 'Hello'
document.body.appendChild(new_element)

左側にJavaScriptのコード、実行された結果が右側に表示されています。

コードの内容を分解します。

新しいエレメント、表示場所を作ります。・・・　HTMLを作ります。

const new_element = document.createElement('div')

スタイルを決めます。　・・・　CSSを作ります。

new_element.style.backgroundColor = "#add8e6 "
new_element.style.width = "200px";

"div"の場所を作ったところに"Hello"と文字を入れます。

new_element.textContent = 'Hello'

そして今まで作ったものを適応させて表示できるようにします。

document.body.appendChild(new_element)

参考

テキストの追加。3種類の方法。

【JavaScriptの基本】要素にテキストを追加する方法 – ワードプレステーマTCD