JavaScriptでHelloWorldをブラウザに表示する方法

JavaScriptはCUIでも実行できますが、GUIで使うケースの方が多いので、GUIでHelloWorldを書いてみました。
JavaScriptのHelloWorldはログに出力したりポップアップ表示したりするものが多いですが、ブラウザ上に出力した方がJavaScriptっぽい気がするので、ブラウザ上に表示するサンプルを提示します。

【サンプルコード１】

・Sample.html

＜!DOCTYPE html＞
＜html lang="ja"＞
  ＜head＞
    ＜!-- charsetがutf-8なので、このファイルもutf-8で保存する必要がある --＞
    ＜meta charset="utf-8"＞
    ＜title＞Sample＜/title＞
  ＜/head＞
  ＜body＞
    ＜script＞
      // window.onloadでロード時に実行される
      window.onload = function(){
        // documentはブラウザに読み込まれたウェブページを表す
        // getElementByIdでHTML上で使うidを参照する
        // innerHTMLではHTML要素の内容を書き変える
        document.getElementById("sample").innerHTML
          = "Hello World!＜br＞↑JavaScriptによる出力";
      }
    ＜/script＞
    ＜p id="sample"＞＜/p＞
  ＜/body＞
＜/html＞

【結果１】

・Sample.htmlをChromeで開いた結果

サンプルコード１のようにJavaScriptはHTML内に書くことができますが、サンプルコード２のようにJavaScriptを別ファイルにするケースの方が多いと思いますので、別ファイルにするサンプルも提示します。

【サンプルコード２】

・Sample.html

＜!DOCTYPE html＞
＜html lang="ja"＞
  ＜head＞
    ＜meta charset="utf-8"＞
    ＜title＞Sample＜/title＞
  ＜/head＞
  ＜body＞
    ＜!-- src属性で外部のスクリプトを指定できる --＞
    ＜script src="Sample.js"＞＜/script＞
    ＜p id="sample"＞＜/p＞
  ＜/body＞
＜/html＞

・Sample.js

window.onload = function(){
  document.getElementById("sample").innerHTML
    = "Hello World!＜br＞↑JavaScriptによる出力";
}

【結果２】

結果１と同じため割愛

いかがでしたでしょうか。

JavaScriptは広く使われている言語であり、面談時点でJavaScriptのスキルを求められない現場でもJavaScriptを使うことがあります。
他言語に精通している技術者であっても、JavaScriptには慣れておいた方が無難だと思います。