技術とか戦略とか

SIerで証券レガシーシステムを8年いじってからSESに転職した普通の文系SEによる技術ブログ。

JavaScriptでHelloWorld(ブラウザ上に文字表示)

JavaScriptCUIでも実行できますが、GUIで使うケースの方が多いので、GUIでHelloWorldを書いてみました。
JavaScriptのHelloWorldはログに出力したりポップアップ表示したりするものが多いですが、ブラウザ上に出力した方がJavaScriptっぽい気がするので、ブラウザ上に表示するサンプルを提示します。
 
【サンプルコード1】
・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>
 
【結果1】
・Sample.htmlをChromeで開いた結果

 f:id:akira2kun:20200927170034j:plain

---------------------------
 
サンプルコード1のようにJavaScriptはHTML内に書くことができますが、サンプルコード2のようにJavaScriptを別ファイルにするケースの方が多いと思いますので、別ファイルにするサンプルも提示します。
 
【サンプルコード2】
・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による出力";
}
 
【結果2】
結果1と同じため割愛