JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHello World!を表示する方法｜基本のプログラムの書き方

JavaScriptの基本的な実装方法

JavaScriptは、<script>〜</script>タグの中に記述されたJavaScriptステートメントによって実装します。

<script>タグはWebページ内のどこにでも配置できますが、一般的には<head>タグ内に記述することが推奨されています。

「Hello World!」を出力するサンプルコード

ここでは、「Hello World!」という文字列を出力する簡単な例を紹介します。サンプルコードの前後には、JavaScriptコードを囲むHTMLコメント（<!-- と //-->）が付けられています。

これは、JavaScriptに対応していない古いブラウザで、コードがそのまま画面にテキストとして表示されてしまうのを防ぐための工夫です。コメントは「//-->」で終わります。

先頭の「//」はJavaScriptにおける1行コメントを意味します。これを付けることで、ブラウザがHTMLコメントの終了部分をJavaScriptのコードとして誤って読み込むのを防いでいます。

続いて呼び出しているのがdocument.write関数です。この関数は、指定した文字列をHTMLドキュメントに書き出す（ページ上に出力する）役割を持ちます。

<html>
   <body>
      <script>
         <!--
            document.write("Hello World!")
         //-->
      </script>
   </body>
</html>

補足：現代のJavaScriptでの書き方

なお、JavaScript非対応ブラウザへの配慮としてコードをHTMLコメントで囲む手法は、現在ではほとんど使われていません。現代の主要なブラウザはすべてJavaScriptに対応しているため、通常は次のようにシンプルに記述します。

<script>
  document.write("Hello World!");
</script>

また、動作確認やデバッグの際には、ページに直接出力するdocument.writeではなく、開発者ツールのコンソールに文字列を表示できるconsole.log()を使うのが一般的です。

<script>
  console.log("Hello World!");
</script>
  1. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">  

  2. 【React Native入門】Hello Worldを表示するプログラムの作り方を解説

    React Nativeの開発環境構築が完了すると、プロジェクトのApp.jsには、あらかじめ以下のようなデフォルトコードが用意されています。import React from react; import { StyleSheet, Text, View } from react-native; export default class App extends React.Component {     render() {         return (  &n