超初心者向け　書き方表示方法

プログラミングがはじめての場合はhtmlやJavaScriptのコードを書いても表示の仕方がわからないかもしれませんね。そこで今回は実際にJavaScriptのコードを書いてブラウザで表示する方法を学習しましょう。入門中の入門です。

書いて保存する

JavaScriptは実際webサーバーにアップロードして使うものですが、アップロードするまえに必ずローカル上でテストします。また学習するときはいちいちアップロードするのは大変なのでローカルで書いていきます。ただはじめてプログラミングする場合はどうやってブラウザに表示するのかわからない場合があると思うので書き方と保存方法からスタートしますね

JavaScriptを書く

メモ帳に下記のコードを書いてみてください。まだJavaScriptの学習はしてませんので意味はわからなくても大丈夫です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>表示してみよう</title>
</head>
<body>
<p>表示してみる</p>
<script>
document.currentScript.insertAdjacentHTML("beforebegin", "<p>JavaScript</p>");
</script>
</body>
</html>

記述するだけだと表示されませんので次に保存します。

保存する

サーバーにアップロードすることを踏まえて上記で書いたメモ帳を保存するには少し工夫が必要です

サーバーにアップロードすることを前提とした保存方法はサーバーと同じディレクトリの階層を作っておいてそこにhtmlファイルを保存する。

学習のときはそんな厳密にしなくても大丈夫ですよ～

 

実際に保存してみてくださいね

上記のhtmlファイルを保存するのにCドライブの直下に「test-h1」を作ってその下に「test」を作ります。その中にファイル名を「test.html」にして保存してください。拡張子は「.html」ですよ。

 


既定のブラウザがクロームの方は上のアイコン、エッジを既定にしてる方は下のアイコンのようになります。ファイヤーフォックスやサファリを既定にしてる場合はそのアイコンになります。

実行してみる

表示されたアイコンをダブルクリックすると対応したブラウザが起動してプログラムが実行されます。

エッジで表示しましたが、こんな風に文字が表示されたらおっけーです。

 

はじめてプログラミングをする場合はhtmlファイルもわからないかもしれませんね。でも心配はいりません、結構簡単なのでなれればすぐにできるようになります。

メモ帳を使って記述しましたが、仕組みがわかったらなるべくJavaScriptを記述する専用のアプリ（エディタという）を使ってください。

当サイトではVSCodeをエディタとしておススメしています。

＞＞＞VSCodeはこちら

 

このページはこれでおしまいです。

お疲れ様でした！

INDEX
ホーム