搜尋
首頁web前端js教程JavaScript入門系列之知識點總結_javascript技巧

JavaScript一種直譯式腳本語言,是一種動態類型、弱型別、基於原型的語言,內建支援型別。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來為HTML網頁增加動態功能。

一、準備工作:

1.為什麼要學習JavaScript

所有的主流瀏覽器都只是Javascript

大部分網頁都使用Javascript

它可以讓網頁呈現各種動態效果

易學

2、如何插入JS

<script>標籤要成對出現,並把JavaScript程式碼寫在<script></script>之間。


4、JS在頁中的位置

javascript作為一種腳本語言可以放在html頁面中任何位置,我們通常放在網頁的head或body部分。但是瀏覽器解釋html時是先後順序的,所以前面的script就先執行。例如進行頁面顯示初始化的js必須放在head裡面,因為初始化都要求提前進行(如給頁面body設定css等);而如果是透過事件呼叫執行的function那麼對位置沒什麼要求的。

5、語句與符號

每一句JavaScript程式碼格式: 語句;

6、註解方法

單行註釋,在註釋內容前加符號 “//”。

多行註解以"/*"開始,以"*/"結束。

7、變數

定義變數使用關鍵字var,語法如下:

var 變數名

變數名可以任意取名,但要遵循命名規則:

1.變數名稱必須使用字母或底線(_)開始。

2.變數名稱必須使用英文字母、數字、底線(_)組成。

3.變數名稱不能使用JavaScript關鍵字與JavaScript保留字。

8、判斷語句(if...else)

文法:

if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

9、函數

function 函数名()
{
函数代码;
}

説明:

1. function キーワードは関数を定義します。

2.「関数名」は関数に付ける名前です。

3. 「関数コード」を特定の関数を完了するコードに置き換えます。

関数呼び出し:

関数を定義した後は、自動的に実行することはできないため、関数を呼び出す必要がある場合は、必要な場所に関数を直接記述するだけです

2. よく使用される対話方法

1. 出力内容(document.write)

document.write() を使用すると、コンテンツを HTML 出力ストリームに直接書き込むことができます。簡単に言うと、コンテンツをWebページ上に直接出力することです。

1つ目のタイプ: 出力内容を""で囲み、""内の内容をそのまま出力します。

2 番目のタイプ: 変数を介してコンテンツを出力

3 番目のタイプ: 複数のコンテンツを出力し、コンテンツを + 記号で接続します。

4 番目の方法: HTML タグを出力し、タグを "" で囲みます。

2. 警告(警告メッセージダイアログボックス)

小さなウィンドウにメッセージ テキストが表示されます (アラートはメッセージ ダイアログ ボックス ([OK] ボタンを含む) を表示します):alert (文字列または変数);

注:


1. ダイアログボックスの「OK」ボタンをクリックするまでは、他の操作を行うことはできません。


2. メッセージ ダイアログ ボックスは通常、プログラムのデバッグに使用できます。


3. アラート出力コンテンツ。document.write と同様の文字列または変数にすることができます。

3. 確認(メッセージ確認ダイアログ)

ダイアログ ボックス ([OK] ボタンと [キャンセル] ボタンを含む) をポップアップします。確認(str);


パラメータの説明:


str: メッセージダイアログボックスに表示されるテキスト


戻り値: ブール値


戻り値:


ユーザーが「OK」ボタンをクリックすると、true を返します


ユーザーが「キャンセル」ボタンをクリックすると、false を返します


注: 戻り値を使用して、ユーザーがどのボタンをクリックしたかを判断できます

注: メッセージ ダイアログ ボックスは排他的です。つまり、ユーザーはダイアログ ボックス内のボタンをクリックするまで他の操作を実行できません。

4. 質問 (プロンプトメッセージダイアログボックス)

メッセージ ダイアログ ボックス (OK ボタン、キャンセル ボタン、テキスト入力ボックスを含む) をポップアップします。prompt(str1, str2);


パラメータの説明:


str1: メッセージ ダイアログ ボックスに表示されるテキスト。変更できません


str2: テキスト ボックスの内容は変更できます


戻り値:


1. [OK] ボタンをクリックすると、テキスト ボックスの内容が関数の戻り値として使用されます


2. キャンセルボタンをクリックすると null が返されます


注: ユーザーがダイアログ ボックスのボタンをクリックするまで、他の操作は実行できません。

5. 新しいウィンドウを開きます (window.open)

open() メソッドは、新しいウィンドウを開くために使用されます: window.open(, , )


パラメータの説明:


URL: ウィンドウを開くための URL またはパス。


ウィンドウ名: 開いているウィンドウの名前。


「_top」、「_blank」、「_selft」などを使用できます。


パラメータ文字列: ウィンドウパラメータを設定します。各パラメータはカンマで区切られます。 (上、左、幅、高さ、メニューバー、ツールバー、スクロールバー、ステータス)


注:


1. パラメータ間のカンマと等号の前後にスペースがある場合、その文字列は無効になります。スペースを削除するだけで正常に実行できます。


2. 実行結果にはブラウザの互換性の問題が考慮されています。

6. ウィンドウを閉じる (window.close)

window.close(); // 指定されたウィンドウを閉じます


.close();

3. DOM 操作

1. DOM について知る


ドキュメント オブジェクト モデル DOM (ドキュメント オブジェクト モデル) は、HTML ドキュメントにアクセスして処理するための標準メソッドを定義します。 DOM は HTML ドキュメントを要素としてレンダリングします。

属性とテキストのツリー構造(ノードツリー)。


1. 要素ノード: 上の図では、、、

などはすべて要素ノード、つまりラベルです。


2. テキスト ノード:
  • ...
  • 内の JavaScript、DOM、CSS、その他のテキストなど、ユーザーに表示されるコンテンツ。

    3. 属性ノード: タグのリンク属性 href="http://www.imooc.com" など。

    2. ID で要素を取得します


    document.getElementById(“id”)

    注: 取得した要素はオブジェクトです。要素を操作したい場合は、そのプロパティまたはメソッドを使用する必要があります。

    3. innerHTML 属性


    .innerHTML プロパティは、HTML 要素のコンテンツを取得または置換するために使用されます。


    Object.innerHTML


    1.Object は、document.getElementById("ID") を通じて取得された要素など、取得された要素オブジェクトです。

    2. 書き方に注意してください。innerHTML では大文字と小文字が区別されます

    4. HTML スタイルを変更する


    Object.style.property=新しいスタイル;


    注: Object は、document.getElementById("id") を通じて取得される要素など、取得される要素オブジェクトです。

    基本プロパティ テーブル (プロパティ)

    背景色/高さ/幅/色/フォント/フォントファミリー/フォントサイズ

    5. 表示と非表示 (表示属性)

    Object.style.display = 値

    注: Object は、document.getElementById("id") を通じて取得される要素など、取得される要素オブジェクトです。

    値:

    none: この要素は表示されません (非表示になります)

    ブロック: この要素はブロックレベル要素 (表示) として表示されます

    6. コントロールクラス名(className属性)

    要素のクラス属性を設定または返します

    object.className = クラス名

    1. 要素のクラス属性を取得します

    2. Web ページ内の要素の CSS スタイルを指定して、要素の外観を変更します

    陳述
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

    Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

    Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

    選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

    Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

    Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

    JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

    javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

    JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

    JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

    Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

    選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

    JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

    JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

    JavaScript,C和瀏覽器之間的關係JavaScript,C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

    引言我知道你可能會覺得奇怪,JavaScript、C 和瀏覽器之間到底有什麼關係?它們之間看似毫無關聯,但實際上,它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章,你將了解到JavaScript如何在瀏覽器中運行,C 在瀏覽器引擎中的作用,以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道,JavaScript是前端開發的核心語言,它直接在瀏覽器中運行,讓網頁變得生動有趣。你是否曾經想過,為什麼JavaScr

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱工具

    Dreamweaver Mac版

    Dreamweaver Mac版

    視覺化網頁開發工具

    SAP NetWeaver Server Adapter for Eclipse

    SAP NetWeaver Server Adapter for Eclipse

    將Eclipse與SAP NetWeaver應用伺服器整合。

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    MantisBT

    MantisBT

    Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中