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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類