この記事では、javascript に関する関連知識を提供し、JavaScript の 3 つの導入方法 (インライン、埋め込みスタイル、外部スタイル) とその使用方法を詳しく紹介します。一緒に見てみましょう。みんなが助けてくれることを願っています。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
1 . 業界内 導入方法
行内に記述し、各タグ内で個別に設定
開始タグのevent属性でjs関数を参照
(1) は、タグのイベント属性 (on で始まる属性) のうち、onclick [on イベント タイプ] などに記述されます。
推奨: HTML の場合は二重引用符、HTML の場合は一重引用符を使用します。 js
例:
<input>
注: インライン導入、JS には重みを増やす概念がないため、一般的には使用されません [基本的には使用されません ]
##例は次のとおりです:
<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法01开始-->
<!--当鼠标点击图片时跳出弹窗显示1223-->
<div class="img">
单击事件：
<img src="/static/imghwm/default1.png" data-src="images/001.jpg" class="lazy" onclick="alert(1223)" alt="JavaScriptの詳しい入門：3つの導入方法" ></img>
</div>
<!--js内联写法01结束-->
</body>
</html>出力結果:
scriptタグ内に記述する
内部参照：scriptタグ内にjsコードを記述することで
#を使用します##script タグはページのどこにでも記述できます#script タグは通常、本文の最後または本文の後に使用されます
- #(1) はどこにでも記述できます; head 上のスクリプトを参照する必要がある場合は、head に配置し、それ以外の場合は、head に配置するとブラウザのレンダリングに影響を与える可能性があるため、下部に配置します。 。
<script>
alert('Hello World!');
</script>注: 通常、自分で演習を作成するときは、面倒で js ファイルをセットアップしたくない場合に使用します [練習用 ]通常は自分で行いますプロジェクトは一番下に配置されますが、読み込み順序には影響せず、CSS ファイルと区別でき、ブラウザのレンダリングにも影響しません。他の場所に配置する場合は、 onload を使用して
例は次のとおりです:<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法02开始-->
<div class="img">
单击事件：
<img src="/static/imghwm/default1.png" data-src="images/002.jpg" class="lazy" id='yuansu' alt="JavaScriptの詳しい入門：3つの導入方法" ></img>
</div>
<!--js内联写法02结束-->
</body>
<script>
//js代码
//找到XX元素，一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
alert(1);
}
//触发事件
</script>
</html>出力結果:
# 3. 外部導入方法
スクリプトタグ内にsrcを使用して外部ファイルを導入します
ステップ:
独立した js ファイルを作成する
- ページ内の script タグを通じて参照
- #(1) スクリプト内に外部 JS ファイルを導入するコードを記述することはできません。
-
( 2) HTML ページのコード構造を使用して、HTML ページの外側で複数の JS コードを分離します。これは美しく便利です。ファイルの再利用のため
<script></script>
注: インライン スタイルと同様に、スタイルを下部と先頭に配置するかどうかは、ケースバイケースで検討する必要があります [
頻繁に使用される
]
href の代わりに src を使用します。例は次のとおりです。
js コードを次のように書き込みます。 .js ファイルを開き、次のように HTML で .html ファイルの内容を参照します。
<html>
<title>js样式外联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<div class="img">
外联写法--单击事件：
<img src="/static/imghwm/default1.png" data-src="images/003.jpg" class="lazy" id='yuansu' alt="JavaScriptの詳しい入門：3つの導入方法" ></img>
</div>
</body>
<script src='js/index.js'></script>
</html>.js ファイルの内容は次のとおりです:
//js代码
//找到XX元素，一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
var str="hello world !!!";
alert(str);
}出力結果:
#[関連する推奨事項:
JavaScript ビデオ チュートリアル、
Web フロントエンド]
以上がJavaScriptの詳しい入門：3つの導入方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AMJavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AMJavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AMJavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AMPythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。
JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AMJavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。
クォーツでタスクが開始される前に通知を送信する方法は？Apr 04, 2025 pm 09:24 PMQuartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...
JavaScriptでは、コンストラクターのプロトタイプチェーンで関数のパラメーターを取得する方法は？Apr 04, 2025 pm 09:21 PMJavaScriptプログラミング、プロトタイプチェーンの関数パラメーターの理解と操作のJavaScriptのプロトタイプチェーンの関数のパラメーターを取得する方法は、一般的で重要なタスクです...
WeChat MiniプログラムWebViewでVUE.JSダイナミックスタイルの変位が失敗した理由は何ですか？Apr 04, 2025 pm 09:18 PMWeChatアプレットWeb-ViewでVue.jsを使用する動的スタイルの変位障害がvue.jsを使用している理由の分析...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7456
15137552