day04-JavaScript01

来源:https://www.cnblogs.com/liyuelian/archive/2022/10/30/16842119.html
-Advertisement-
Play Games

JavaScript01 官方文檔 http://www.w3school.com.cn/js/index.asp 基本說明： JavaScript能改變html內容，能改變html屬性，能改變html樣式（css），能完成頁面的數據驗證。 例子 <!DOCTYPE html> <html lang ...


JavaScript01

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js開關燈</title>
</head>
<body>
<h2>JavaScript 能做什麼？</h2>
<p>JavaScript 能夠改變 HTML 屬性值。</p>
<p>在本例中，JavaScript 改變了圖像的 src 屬性值。</p>
<button onclick="document.getElementById('myImage').src='../imgs/eg_bulbon.gif'">開 燈</button>
<img id="myImage" border="0" src="../imgs/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='../imgs/eg_bulboff.gif'">關 燈</button>
</body>
</html>

image-20221030165559802 image-20221030165617791

1.JavaScript特點

  1. JavaScript是一種解釋性的腳本語言，c、c++等語言先編譯後執行，而JavaScript是在程式的運行過程中逐行進行解釋
  2. JavaScript是一種基於對象的腳本語言，可以創建對象，也能使用現有的對象
  3. JavaScript是弱類型的，對變數的數據類型不做嚴格的要求，變數的數據類型在運行過程中可以變化

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript是弱類型的</title>
    <!--    1.js代碼可以寫在script標簽中
            2.type="text/javascript" 表示這個腳本（script）類型是JavaScript
            3.type="text/javascript" 可以不寫，但是建議寫上
            4.js語句可以不寫分號; 建議寫上
            5.var
     -->
    <script type="text/javascript">
        var age = 10;
        //輸出alert() 使用彈框方式
        //輸出 console.log() 在調試視窗輸出
        console.log("age=" + age);
        // 輸出變數的類型可以使用typeof
        console.log(typeof age);
        age = "北京";
        console.log("age=" + age);
        console.log(typeof age);
    </script>
</head>
<body>
</body>
</html>
image-20221030172012262

2.JavaScript快速入門

  • 使用方式1：script標簽寫js代碼
  • 使用方式2：使用script標簽引入js文件

註：兩種使用方式不能混用，如果混用了就只有引用的js文件生效

使用方式1：script標簽寫js代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script標簽中寫JS代碼</title>
    <!--    1.可以在head和body嵌入 script
            2.執行順序是從上到下
            3.建議放在head中
    -->
    <script type="text/javascript">
        //在head內使用script寫js
        console.log("ok");
    </script>
</head>
<body>
<script type="text/javascript">
    //在body內使用script寫js
    console.log("hi");
</script>
</body>
</html>
image-20221030173039367

使用方式2：使用script標簽引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用script標簽引入js文件</title>
    <script type="text/javascript" src="myjs.js"></script>
</head>
<body>
</body>
</html>

alert("今日天氣降溫了");
image-20221030173439694

例子：兩種使用方式不能混用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兩種使用方式不能混用</title>
    <!-- 如果兩種方式都用了：
            1.不會報錯
            2.只有一個生效，引入的js文件生效
    -->
    <script type="text/javascript" src="myjs.js">
        alert("你好，今天天氣怎麼樣？")
    </script>
</head>
<body>
</body>
</html>

alert("今日天氣降溫了");
image-20221030174317627

3.查看js錯誤信息

  • 執行js，火狐瀏覽器如何查看錯誤信息

    進入到調試器（ctrl+shift+i或者f12）就可以看到錯誤提示

    image-20221030175258426

    點擊控制台右邊的error信息就可以定位錯誤

    image-20221030175402987

  • 執行js，Chrome瀏覽器如何查看錯誤信息

    進入到調試器（快捷鍵同上），到控制台查看錯誤信息，error信息即可定位錯誤位置

    image-20221030175742771 image-20221030175751271

4.JavaScript變數

  • JavaScript變數表示存儲數據的容器

    與代數一樣，JavaScript 變數可用於存放值（比如 x=5）和表達式（比如 z=x+y）

    變數可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）

  • 變數必須以字母開頭

  • 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）

  • 變數名稱對大小寫敏感（y 和 Y 是不同的變數）

JavaScript 語句和 JavaScript 變數都對大小寫敏感

  • 聲明（創建）JavaScript變數

    在 JavaScript 中創建變數通常稱為"聲明"變數。

    我們使用 var 關鍵詞來聲明變數(但是不使用var聲明也不會報錯，建議使用var)

5.JavaScript數據類型

  • 數據類型介紹

    JavaScript常用的數據類型如下:

    • 數值類型 number
    • 字元串類型 string
    • 對象類型 object
    • 布爾類型 boolean
    • 函數類型 function

  • 特殊值

    • undefined 變數未賦初始值時，預設undefined
    • null 空值
    • NaN Not a Number 非數值

  • 數據類型註意事項

    String字元串可以雙括弧括起來，也可以單括弧括起來

例子：特殊值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數據類型-特殊值</title>
    <script type="text/javascript">
        //1.typeof()是JavaScript語言提供的一個函數
        //2.返回變數的數據類型
        // 3.3個特殊值，undefined：沒有複製就使用 null：空值  NaN：不能識別類型
        var email;//特殊值undefined
        console.log("email=" + email);//undefined
        var address = null;
        console.log("address=" + address);//nul
        console.log(10 * "abc");//NaN
    </script>
</head>
<body>

</body>
</html>
image-20221030182450774

6.運算符(常用)

JavaScript 運算符 (w3school.com.cn)

6.1算術運算符

  1. 算術運算符用於執行變數與或值之間的算術運算

  2. y等於5，下麵的表格解釋類這些算術運算符

    image-20221030183303818

6.2賦值運算符

  1. 賦值運算符用於給JavaScript變數賦值

  2. 給定x=10和y=5，下麵的表格解釋了賦值運算符

    image-20221030183214606

6.3關係運算符

  1. 關係（比較）運算符在邏輯語句中使用，以測定變數或值是否相等

  2. 給定x=5，下麵的表格解釋了比較運算符

    image-20221030183351541

例子：關係運算符之全等 ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關係運算符</title>
</head>
<body>
<script type="text/javascript">
    var a = 1000;//number
    var b = "1000";//string
    console.log(a == b);//true
    console.log(a === b);//false
</script>
</body>
</html>
image-20221030184753485

6.4邏輯運算符

  1. 邏輯運算符用於測定變數或值之間的邏輯

  2. 給定x=6以及y=3，下表解釋了邏輯運算符

    image-20221030184959024
  • 邏輯運算符註意事項和細節

  1. 在JavaScript語言中，所有的變數，都可以作為一個boolean類型的變數去使用

  2. 0，null，undefined，""(空串)都認為是false

  3. &&且運算有兩種情況：（即&&返回值是遵守短路與的機制）

    • 當表達式全為真時，返回最後一個表達式的值
    • 當表達式中，有一個為假的時候，返回第一個為假的表達式的值

  4. ||或運算，有兩種情況：（即||返回值是遵守短路或的機制）

    • 當表達式全為假的時候，返回最後一個表達式的值
    • 只要有一個表達式為真，就會返回第一個為真的表達式

  5. &&運算和||運算有短路現象

    短路現象：當這個&&||運算有確定結果後，後面的表達式不再執行

例子：邏輯運算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邏輯運算符註意事項和使用細節</title>
    <script type="text/javascript">
        //1. 在JavaScript語言中，所有的變數，都可以作為一個boolean類型的變數去使用
        //語法比較鬆散
        var name = "貓貓";
        var age = 900;
        var n = null;
        if (!n) {
            alert("你好你好你好你好你好...")
        }

        //2. 0，null，undefined，""(空串)都認為是false
        if (!(100 * "aaa")) {
            alert("hi~~~")
        }

        //3. &&且運算有兩種情況：（即&&返回值是遵守短路與的機制）
        // - 當表達式全為真時，返回最後一個表達式的值
        // - 當表達式中，有一個為假的時候，返回第一個為假的表達式的值
        var res1 = "education" && 600;
        alert("res1=" + res1);//600
        var res2 = null && 600;
        alert("res2=" + res2);//null

        //4. ||或運算，有兩種情況：（即||返回值是遵守短路或的機制）
        // - 當表達式全為假的時候，返回最後一個表達式的值
        // - 只要有一個表達式為真，就會返回第一個為真的表達式
        var res3 = null || 600;
        alert("res3=" + res3);//600
        var res4 = "你好" || 600;
        alert("res4=" + res4);//你好

        //5. &&運算和||運算有短路現象
        //短路現象：當這個&&||運算有確定結果後，後面的表達式不再執行
        var n1 = 1;
        var n2 = 3;
        //var res5 = n1++ || n2++;
        //alert("n1=" + n1 + " n2=" + n2);//n1=2 n2=3
        var res6 = (n1++ > 100) || n2++;
        alert("n1=" + n1 + " n2=" + n2);////n1=2 n2=4
    </script>
</head>
<body>

</body>
</html>

6.5條件運算符

JavaScript還可以使用類似 Java的三元運算符

如果條件表達式為true，就返回第一個表達式的值；如果表達式為false，就返回第二個表達式的值

例子：條件運算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件運算符</title>
</head>
<body>
<script type="text/javascript">
    var res = (100 > 1) ? "kkkk" : 300;
    alert(res);//kkkk
</script>
</body>
</html>

7.數組

7.1數組定義

在JavaScript中，數組的定義有四種方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組定義</title>
    <script type="text/javascript">
        //數組定義方式一：
        var cars1 = ["Audi", "BMW", "Volvo", 100, null];//在JavaScript中，數組的數據類型可以不一致
        console.log("cars1=" + cars1);//cars1=Audi,BMW,Volvo,100,
        //可以通過下標索引來訪問具體的元素(索引從0開始)
        console.log(cars1[0]);//Audi
        console.log(cars1[3]);//100

        //數組定義方式二：
        var cars2 = [];//空數組
        //再添加數據
        cars2[0] = "奧迪";
        cars2[1] = "賓士";
        cars2[2] = "寶馬";
        cars2[3] = 100;
        console.log("cars2=" + cars2);//cars2=奧迪,賓士,寶馬,100
        //如果該元素不存在，就返回undefined
        console.log("cars2[100]=" + cars2[100]);//cars2[100]=undefined

        //數組定義方式三：
        var cars3 = new Array("Audi", "BMW", "Volvo");
        console.log("cars3=" + cars3);//cars3=Audi,BMW,Volvo

        //數組定義方式四：
        var cars4 = new Array();
        console.log(typeof cars4);//object
        cars4[0] = "法拉利";
        cars4[1] = "保時捷";
        cars4[0] = "ZZ";//替換
        cars4[2] = "YY";////因為在創建的時候沒有定義數組的大小，因此要擴容直接在數組裡面添加數據即可
        cars4[8] = "紅旗";//擴容，如果跳過了下標賦值，那麼沒有賦值的元素都為undefined
        console.log("cars4[5]=" + typeof cars4[5]);//cars4[5]=undefined
        console.log("cars4=" + cars4);//cars4=ZZ,保時捷,YY,,,,,,紅旗
    </script>
</head>
<body>

</body>
</html>
image-20221030195954451

7.2數組遍歷

數組的類型是Object對象，具有length等屬性，因此也能像 java一樣，使用 for迴圈進行遍歷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組遍歷</title>
    <script type="text/javascript">
        var cars = ["Audi", "BMW", "Volvo", 100, 1.1,true];
        //遍歷
        console.log("數組的長度="+cars.length);
        for (var i = 0; i < cars.length; i++) {
            console.log(cars[i]);//log方法會自動換行
        }
    </script>
</head>
<body>

</body>
</html>
image-20221030200804235
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java 線程池之ThreadPoolExecutor學習總結
    前提 java version "1.8.0_25" 池簡述 軟體開發活動中，我們經常會聽到資料庫連接池、記憶體池、線程池等各種“池”概念，這些“池”到底是什麼東西呢？程式的世界里，我們可以將池簡單的理解為一種容器類數據結構，比如列表。程式處理信息的過程中，可能會依賴某些資源或者對象(暫且統一稱之為對 ...
  • 淺談PHP設計模式的責任鏈模式
    概念： 責任鏈模式又叫做職責鏈模式，是屬於行為型的一種。 責任鏈模式分為兩種： 第一種像工廠流水線，目的就讓每一個環節都進行處理。 第二種像層層審批，如果其中一個對象無法處理，調用下一個對象來進行處理，如果一旦能處理，鏈式就此停止，以此類推，第二種為了程式的健壯性，至少得需要一個兜底的模塊，防止穿透 ...
  • 什麼是JAVA記憶體模型
    前言 在併發編程中，當多個線程同時訪問同一個共用的可變變數時，會產生不確定的結果，所以要編寫線程安全的代碼，其本質上是對這些可變的共用變數的訪問操作進行管理。導致這種不確定結果的原因就是可見性、有序性和原子性問題，Java 為解決可見性和有序性問題引入了 Java 記憶體模型，使用互斥方案（其核心實現 ...
  • Feign
    前言 最近在調研 小米開放平臺 API 的能力，發現能力支持的實在有點少，沒辦法只能另闢蹊徑去逆向 Consule UI 的能力。 逆向工程最重要解決的就是“認證”。有沒有辦法自動登錄鑒權，或者使用一個長久可靠、可續期的 token，直接決定了該 Consule UI 是否可逆向。 逆向工程-認證 ...
  • JVM（一）-記憶體結構
    我們都知道，我們寫的Java程式需要先經過編譯，生成了.class文件（位元組碼文件）。然而，電腦並不能直接解釋.class文件裡面的內容，這時候就需要一個能載入、解釋.class文件並且能按.class文件里的內容進行處理的一個東西--JVM。 JVM，就是Java虛擬機。它是一種規範，有針對不同 ...
  • 【HDLBits刷題筆記】10 Counters
    Count15 module top_module ( input clk, input reset, // Synchronous active-high reset output [3:0] q); always@(posedge clk) begin if(reset) q <= 4'd0; ...
  • 學習筆記——連接資料庫的搭建環境、BeanUtils
    2022-10-30 連接資料庫的搭建環境 一、搭建環境 ①導入jar包（資料庫驅動包、資料庫連接池、DBUtils） jar包有：commons-dbutils-1.4.jar、 druid-1.0.9.jar 、mysql-connector-java-8.0.19.jar。 方式：在創建的“W ...
  • Spring Boot入坑-1-入坑準備&Spring簡介
    本篇文章，將從 0 淺入，從什麼是哈希表講起，然後再說 Java 是怎樣實現哈希表的。整個梳理過程，將通過源碼這個第一手的資料進行梳理分析，吸收知識、解決疑問，一步一步進行梳理，如果你是對 HashMap 懵懵懂懂的同學，那麼歡迎跟著我的節奏一起來梳理！全文1萬2000多字，歡迎慢慢食用！ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類