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

HTMLページ内にインラインJavaScriptを記述する方法

インラインJavaScriptとは

HTMLでJavaScriptを使用する場合、一般的には以下の2つの方法が用いられます。

  • <script>〜</script>タグ内にコードを直接記述する
  • 外部JavaScriptファイルを読み込む

しかし、これら以外にも、HTMLページ内にJavaScriptのコードを直接埋め込む「インラインJavaScript」という方法が存在します。

HTMLページ内にインラインJavaScriptを記述する方法

イベント属性に直接コードを記述する

通常、HTMLのイベント属性（onClickなど）は、<script>タグ内など別の場所で定義された関数を呼び出す形で使用されます。しかし、イベント属性の値として、JavaScriptのコードを直接記述することも可能です。

以下の例では、リンクをクリックすると「Hello World」というアラートが表示されます。

<p>
    <a href="#" onClick="alert('Hello World');">
        クリック
    </a>
</p>

注意点

注意：インラインJavaScriptの記述は、コーディング規約の観点から推奨されていないため、実際の開発では避けるべきとされています。HTMLとJavaScriptが混在することでコードの可読性や保守性が低下するため、関数を<script>タグ内や外部ファイルに定義し、イベント属性から呼び出す方法が推奨されます。

  1. JavaScriptでWebページをリダイレクトする方法をわかりやすく解説

    Webページを閲覧していると、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ移動させられたという経験はありませんか？これは「ページリダイレクト（転送）」と呼ばれる仕組みが働いているためです。JavaScriptを使えば、クライアント側でページリダイレクトを非常に簡単に実装できます。サイト訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現可能です。サンプルコード：ボタンクリックでトップページへリダイレクト以下のコードを実行すると、JavaScriptを使ってHTMLページをリダイレクトする方法を実際に確

  2. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo