##1. はじめに
本記事では、JavaScriptの
「"Hello World!"のプログラム作成」
について記載する。
##2. 作成手順
###1.フォルダの作成
デスクトップ上にフォルダを作成する。
フォルダ名は任意だが、今回は「JavaScript」とする。
フォルダ
エディタへの反映
フォルダ作成
HTML雛形作成
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
console.log('Hello world!');
</script>
</body>
</html>
####4.JavaScriptの外部ファイル化 [こちらの項](https://qiita.com/drafts/a7f9c817c929d9b59188/edit#1js%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%AE%E4%BD%9C%E6%88%90)で触れた件で、JSフォルダ内にJavaScriptファイルを作成し、HTMLファイルと紐付けるやり方を記載する。 #####1.JavaScriptファイルの作成 JSフォルダ内に「index.js」ファイルを作成。
index.jsの作成
scriptタグの記述
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>
index.js
console.log('Hello World!');
HTMLで記述したように、JavaScriptで記述したのと同じ結果となる。
##3. エラー解決法
JavaScriptのエラーを自力で解決する方法として、
・Google Chrome デベロッパーツールのConsoleを使ったエラーの確認
・エラーメッセージの一覧
を記載する。
###Google Chrome デベロッパーツールのConsoleを使ったエラーの確認
エラーが出ない場合は、以下のように"Hello World!"と出力される。
実際に出力命令文をタイプミスしてみる。
index.js
konsole.log('Hello World!');
すると、以下のようなエラー分が出力される。
赤枠で囲ったエラー分を訳すると、
Uncaught ReferenceError: →キャッチされていない参照エラー
konsole is not defined →konsoleは定義されていない
at index.js:1 →index.jsファイルの1行目
つまり、
index.jsファイルの1行目に記載されたkonsoleは 定義されていないのでエラー出力されてる
ということである。
ちなみに、エラー文の末尾に(anonymous)@index.js:1をクリックすると、誤記と思われる行を参照することができる。
エラーが出力された際は、このようにデベロッパーツールを参照するようにしたい。
###エラーメッセージの一覧 MDNの[JavaScript エラーリファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors)にエラー一覧が記載されているので、自力で解決しない際は積極的に参照すること。 ##4. おわりに 次項:[はじめてのJavaScript② 「演算」](https://qiita.com/Stack_up_Rising/items/18b113995fd0ece210c3)に続く。