JavaScript快速入門（二）

来源:https://www.cnblogs.com/yetangjian/archive/2023/04/05/17253215.html
-Advertisement-
Play Games

文件中引入JavaScript 嵌入到HTML文件中 在body或者head中添加script標簽 <script> var age = 10; console.log(age); </script> 引入js文件 創建一個js文件 var age = 20; console.log(age); 在 ...


文件中引入JavaScript

嵌入到HTML文件中

在body或者head中添加script標簽

<script>
    var age = 10;
    console.log(age);
</script>

引入js文件

創建一個js文件

var age = 20;
console.log(age);

在html文件中src引入改文件

<body>
    <script src="./age.js"></script>
</body>

引入網路來源文件，和引入本地的js文件一樣，通過src

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</body>

 數據類型

原始數據類型：基本的數據類型（數值、字元串、布爾值）

複合數據類型：對象（一個對象可以看做是存放各種值得容器，由基礎數據類型組成）

var user = {
    "name":"ming",
    age:20,
    is_register:True
}

特殊數據類型：null和undefined

typeof可以用來判斷基礎數據類型

<body>
    <script>
        var age = 20;
        console.log(typeof age);
    </script>
</body>

算數運算符

加減乘除取餘：+ 、-、*、/、%

自增或者自減相當於當前值+1或者-1

<body>
    <script>
        var num = 20;
        console.log(++num);
        console.log(--num);
    </script>
</body>

自增自減需要註意，有兩種寫法一種運算符號在前，一種運算符號在後，兩種效果不一樣

運算符號在前是先自增再運行，運算符號在後是先運行在自增

<body>
    <script>
        var num = 20;
        console.log(++num); // 21
        var num1 = 20;
        console.log(num1++); // 20
    </script>
</body>

 賦值運算符

賦值運算符 表達式
= 賦值運算符
+= x +=y 等同於 x= x+y
-= x -=y 等同於 x = x-y
*= x *= y 等同於 x = x*y
/= x /= y 等同於 x = x/y
%= x %= y 等同於 x = x % y

比較運算符

比較運算符 描述
< 小於
> 大於
<= 小於或者等於
>= 大於或者等於
== 相等
=== 嚴格相等
!= 不相等
!== 嚴格不相等

== 和 ===區別

<body>
    <script>
        var num = 20;
        var num1 = 20;
        var num2 = "20";
        console.log(num == num1); // True
        console.log(num == num1); // True
        console.log(num == num2); // True
        console.log(num === num2);// 嚴格比較數值和類型 False
        console.log(num != num2);// False
        console.log(num !== num2);// True 類型不一致
    </script>
</body>

布爾運算符

取反運算符（！）

<body>
    <script>
        var flag = true;
        console.log(!flag);
    </script>
</body>

提示 undefind 、null、false、0、NaN、空字元串 取反都為true

且運算符（&&）

<body>
    <script>
        console.log(10<20 && 10>5); // True
    </script>
</body>

活運算符（||）

<body>
    <script>
        console.log(10>20 || 10>5); // True
    </script>
</body>

 用Switch簡化多個if...else....

swith後面跟表達式，case後面記得一定要加上break，不加上break會把後續的都執行，最後default就是以上case都不是執行

<body>
    <script>
        var day = 3;
        switch(day){
            case 0:
                console.log("今天周一");
                break;
            case 1:
                console.log("今天周二");
                break;
            case 2:
                console.log("今天周三");
                break;
            default:
                console.log("今天不是周一、二、三")
        }
    </script>
</body>

 用三目運算符來代替if...else...

<表達式>？y ：x

表達式正確返回y，錯誤則返回x

<body>
    <script>
        var num = 10;
        var result = num % 2 == 0 ? "是偶數" : "是奇數";
        console.log(result)
    </script>
</body>

 字元串

<body>
    <script>
        //字元串要麼使用單引號嵌套雙引號，要麼使用雙引號嵌套單引號
        var str1 = '我說"你好呀"';
        //如果想使用雙引號嵌套雙引號，單引號嵌套單引號或者換行就需要用到反斜杠
        var str2 = '我說\'你好呀\'';
        var str3 = "今天天氣真好，\
        我想出去玩";
        console.log(str1,str2,str3);
    </script>
</body>

用屬性length來查看字元串長度

<body>
    <script>
        var str3 = "今天天氣真好，\
        我想出去玩";
        console.log(str3.length);
    </script>
</body>

charAT查看索引位置的字元串

<body>
    <script>
        var str = "yetangjian的博客園";
        console.log(str.charAt(1)); // 查看索引1位置的字元串e
        console.log(str.charAt(str.length -1));//查看最後一位的字元園
        //如果索引不存在會列印出來空字元串
        console.log(str.charAt(-1));
        console.log(str.charAt(str.length+1));
    </script>
</body>

concat連接兩個字元串，創建新的字元串，不影響老的字元串（拼接的如果不是字元串，也會先轉為str再拼接）

同樣也可以用“+”拼接

<body>
    <script>
        var str = "yetangjian的博客園";
        var str1 = "豐富多彩呀~~";
        var result = str.concat(str1);
        document.write(result);//頁面上展示出來拼接後的
        // 可以接收多個參數拼接
        var str3 = "看的停不下來了";
        document.write(str.concat(str1,str3));
    </script>
</body>

concat和+號的區別

+號會先運算數字類型在轉，所以下方會先做1+2後再轉字元串

concat不管什麼，都會轉字元串拼接

<body>
    <script>
        var num1 = 1;
        var num2 = 2;
        var str3 = "3";
        document.write("".concat(num1,num2,str3)); // 123
        document.write(num1+num2+str3);// 33
    </script>
</body>

substring截取字元串，兩個參數，參數1開始的位置的索引，第二個參數結束位置的索引（結束索引位置不取，左閉右開）

<body>
    <script>
        var str = "yetangjian的博客園";
        // 截取博客園三個字,左閉右開
        document.write(str.substring(11,str.length));
        // 省略第二個參數，直接取到最後
        console.log(str.substring(11)); //博客園
        //在substring中參數如果是負數，直接當索引0用
    </script>
</body>

substr用法基本和substring一樣，區別是第二個參數不在是結束位置的索引，而是字元串的長度

<body>
    <script>
        var str = "yetangjian的博客園";
        var result = str.substr(11,3);//從索引位置11開始取，截取長度為3
        document.write(result);//博客園
        //如果省略第二個參數，直接取到結尾，如果第二個參數是個負數，會變為0即字元串長度為0的空字元串
        console.log(str.substr(11));//博客園
        console.log(str.substr(11,-4));//空字元串
        //如果第一個參數是負數，則從後向前計算字元位置，這個和之前的字元串不太一樣
        console.log(str.substr(-3));
    </script>
</body>

indexof查詢字元串第一次出現的位置，不存在則返回-1

<body>
    <script>
        var str = "yetangjian的博客園";
        // 判斷上述字元換中是否存在博客園
        if (str.indexOf("博客園") > -1){
            console.log("存在");
        }else{
            console.log("不存在");
        }
        // 參數2位置開始索引位置
        console.log(str.indexOf("博客園",12));//從12索引位置不存在了，所以返回-1
    </script>
</body>

trim方法去除首尾兩端的空格，包括\r \n \t都能去掉

<body>
    <script>
        var str = "   yetangjian的博客園   ";
        console.log(str);//   yetangjian的博客園   
        console.log(str.trim());//yetangjian的博客園
    </script>
</body>

split方法是按分隔符，返回一個分割出來的字元串數組

<body>
    <script>
        var str = "yetangjian|的|博客園";
        var result = str.split("|");
        console.log(result);// ["yetangjian", "的", "博客園"]
        console.log(str.split(""));//["y", "e", "t", "a", "n", "g", "j", "i", "a", "n", "|", "的", "|", "博", "客", "園"]
        //存在第二個參數可以設置獲取數組的長度
        console.log(str.split("",2));//["y", "e"]
    </script>
</body>

 數組

查詢、追加

<body>
    <script>
        var arr = [];
        arr[1] = 1 // 通過下標加入數組值
        console.log(arr)
        console.log(arr[1])//1
        console.log(arr.length)//2
    </script>
</body>

遍歷

<body>
    <script>
        var city = ["shanghai","guangzhou","beijing"]
        // for 
        for (var i=0;i<city.length;i++){
            console.log(city[i]);
        }
        //
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 細節拉滿，80 張圖帶你一步一步推演 slab 記憶體池的設計與實現
    1. 前文回顧 在之前的幾篇記憶體管理系列文章中，筆者帶大家從巨集觀角度完整地梳理了一遍 Linux 記憶體分配的整個鏈路，本文的主題依然是記憶體分配，這一次我們會從微觀的角度來探秘一下 Linux 內核中用於零散小記憶體塊分配的記憶體池 —— slab 分配器。 在本小節中，筆者還是按照以往的風格先帶大家簡單 ...
  • 虛擬機磁碟擴容（parted、lvm）
    1、虛擬化平臺虛擬機添加硬碟 系統查看添加的硬碟 [root@yumserver ~]# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 0 50G 0 disk ├─sda1 8:1 0 1G 0 part /boot └─sda2 8: ...
  • 讀SQL進階教程筆記10_HAVING下
    1. 按照現在的SQL標準來說，HAVING子句是可以單獨使用的 1.1. 就不能在SELECT子句里引用原來的表裡的列了 1.1.1. 使用常量 1.1.2. 使用聚合函數 1.2. WHERE子句用來調查集合元素的性質，而HAVING子句用來調查集合本身的性質 2. 表不是文件，記錄也沒有順序， ...
  • MySQL explain 和 profiling 詳解
    MySQL explain 和 profiling 詳解 mysql explain MySQL 的 EXPLAIN 是一個用於查詢優化的工具，它可以顯示 MySQL 資料庫如何執行查詢。它返回一組關於查詢執行計劃的信息，包括用到的索引，表的連接順序以及 MySQL 使用的查詢類型。下麵是 EXPL ...
  • MySQL四種日誌binlog/redolog/relaylog/undolog
    優質博文：IT-BLOG-CN 一、binlog binlog記錄資料庫表結構和表數據變更，比如update/delete/insert/truncate/create，它不會記錄select。存儲著每條變更的SQL語句和XID事務Id等等。binlog日誌文件如下： [[email protected] ...
  • 讀SQL進階教程筆記08_處理數列
    1. 處理有序集合也並非SQL的直接用途 1.1. SQL語言在處理數據時預設地都不考慮順序 2. 處理數據的方法有兩種 2.1. 第一種是把數據看成忽略了順序的集合 2.2. 第二種是把數據看成有序的集合 2.2.1. 首先用自連接生成起點和終點的組合 2.2.2. 其次在子查詢中描述內部的各個元 ...
  • mysql精確查年齡
    已知出生年月日，求到今天為止多少歲 select *, --如果當前月份大於出生月，年齡 = 當前年份 - 出生年 if (month(current_date())-month(substr(id_card,7,8))>0, year(current_date())-year(substr(id_ ...
  • Android Banner - ViewPager 02
    Android Banner - ViewPager 02 現在來給viewpager實現的banenr加上自動輪播 自動輪播的原理，使用handler的延遲消息來實現。 自動輪播實現如下內容 開始輪播&停止輪播 可配置輪播時長、輪播方向 通過自定義屬性來配置輪播時長，方向 感知生命周期，可見時開始 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類