0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

最近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を使ったプログラミングの勉強が始まる・・・

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?