HTML
JavaScript

JavaScriptから始めるプログラミング(HTMLでHello Worldを表示させるまで)

最近JavaScriptを改めて触ったらできることが多く、自分が0からプログラミングの勉強をするなら

JSが手軽に弄れて楽なんじゃないかなーと思ったから記事を書く


あんた誰

めちゃくちゃ昔のEcmaScriptを弄る仕事をしている人

変数宣言はvarのみ!

だからJavaScriptはよくわかりまてん

これから勉強していきます


なぜJavaScriptから始めるのか

GoogleChromeや、Firefoxと言ったブラウザさえあればすぐに開発環境が整えられる為

環境構築で無駄な時間を使わなくてもいいしデバッグが容易にできる

また、ES6からはclassにも対応しており、もし他の言語を始めたときにもすんなり入っていける

んじゃね?って思ったから


どうやって書くの

一番簡単な書き方としてはGoogleChromeやらFireFoxやらを起動して、(Internet Explorer?知らない子ですね・・・)

F12を押してConsoleタブをクリック

その後


console


alert("Hello World")

打つとポップアップが表示される

ね?簡単でしょ?

まぁこれじゃ味気ないので・・・HTML形式でそれっぽく書いてみる。


おすすめのエディタ

流石にメモ帳で書くのは見づらいので、おすすめのエディタを紹介

最近はVisual Studio Codeを使っています。

設定方法はこちら

設定方法と言っても動かすだけなら設定しなくても大丈夫なはず・・・


HTMLでHello Worldを表示させる

HTML上でJavascriptを動かすには二種類ある(もっとあったらごめん)

・ HTMLに直接記載する

・ 外部からJavascriptを読み込む

今回はHTMLに直接書く

まずはHTML5のテンプレート記載

文字コードは今回UTF-8で


HelloWorld.html

<!DOCTYPE html>

<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

勉強していくとそのうち出てくるけどHTMLは上から読み込まれていくから

javascriptはBody部分に書く

見たいな事が書かれている記事が出てくる。

なんやねんそれ・・・ってなるだろうけどつまりこういうこと


HelloWorld.html

<!DOCTYPE html>

<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script language="javascript">
alert("Hello World");
</script>
</body>
</html>

scriptタグ自体は色々なところで宣言できるし実行できるけど、

ページの描画処理以外でJavaScriptを読み込ませると、今はどうでもいい処理まで走ってしまう為

ブラウザ側での描画までが遅くなってしまうという理由からこいう事が書かれている。

うまくJavaScriptが動かなかったりしたときはこの辺の原因もあるかもなので、覚えておくと得。

まぁそれはそれとして、ファイルを保存してからファイルをブラウザで開くと、

Consoleで実行した時と同じようにalertがでる。

さぁここからJavaScriptを使ったプログラミングの勉強が始まる・・・