ウェブサイト開発 | JavaScript チュートリアル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ウェブサイト開発 | JavaScript チュートリアル

黄舟

Feb 07, 2017 pm 05:17 PM

JavaScript は世界で最も人気のあるプログラミング言語です。この言語は HTML や Web で使用でき、サーバー、PC、ラップトップ、タブレット、スマートフォンなどの幅広いデバイスで使用できます。

JavaScript はスクリプト言語です

JavaScript は軽量プログラミング言語です。

JavaScript は、HTML ページに挿入できるプログラミングコードです。

JavaScript を HTML ページに挿入すると、最新のすべてのブラウザーで実行できます。

JavaScript: HTML 出力の作成

例

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

ログイン後にコピー

ヒント: document.write は HTML 出力でのみ使用できます。ドキュメントがロードされた後にこのメソッドを使用すると、ドキュメント全体が上書きされます。

JavaScript: イベントへの反応

例

<button type="button" onclick="alert(&#39;Welcome!&#39;)">点击这里</button>

ログイン後にコピー

alert() 関数は JavaScript では一般的には使用されませんが、コードのテストには非常に便利です。

onclick イベントは、このチュートリアルでこれから学習する多くのイベントのうちの 1 つにすぎません。

JavaScript: HTML コンテンツを変更する

JavaScript を使用して HTML コンテンツを処理することは、非常に強力な機能です。

例

x=document.getElementById("demo")  //查找元素x.innerHTML="Hello JavaScript";    //改变内容

ログイン後にコピー

document.getElementByID("some id") はよく見かけます。このメソッドは HTML DOM で定義されます。 DOM (Document Object Model) は、HTML 要素にアクセスするための公式 W3C 標準です。

JavaScript: HTML スタイルの変更

HTML 要素のスタイルを変更します。これは、HTML 属性の変更の一種です。

例

x=document.getElementById("demo")  //找到元素x.style.color="#ff0000";           //改变样式

ログイン後にコピー

JavaScript: 入力の検証

JavaScript は、ユーザー入力を検証するためによく使用されます。

实例

if isNaN(x) {alert("Not Numeric")};

ログイン後にコピー

您知道吗？

提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

JavaScript 使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的和部分中。

<script> 标签</strong></p><p>如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。</p><p><script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript：

<script>
alert("My First JavaScript");
</script>

ログイン後にコピー

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。</p><p style="margin: 0px; padding: 0px; font-weight: 400; font-size: 16px; max-width: 100%; color: rgb(62, 62, 62); font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;"><body> 中的 JavaScript</p><p>在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：</p><p style="margin: 20px 0px 0px; padding: 0px; font-size: 12px; max-width: 100%; color: rgb(62, 62, 62); font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; white-space: normal; background-color: rgb(255, 255, 255); border: 0px; box-sizing: border-box !important; word-wrap: break-word !important;">实例</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <body> . . <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script> . .

ログイン後にコピー

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

或中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的或部分中，或者同时存在于两个部分中。

通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>
<html>

<head><script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script></head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

ログイン後にコピー

中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button><script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script></body>
</html>

ログイン後にコピー

提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在

元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25：Myriseのすべてのロックを解除する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7459

15

CakePHP チュートリアル

1376

52

Steamのアカウント名の形式は何ですか

77

11

Win11 Activation Key Permanent

44

19

NYTの接続はヒントと回答です

17

17

もっと見る

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

 簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM
使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles