JavaScript 系列博客（一）

来源:https://www.cnblogs.com/zuanzuan/archive/2018/12/17/10134041.html
-Advertisement-
Play Games

JavaScript 系列博客（一） 前言 本系列博客為記錄學習 JavaScript 的學習筆記，會從基礎開始慢慢探索 js。今天的學習筆記主要為 js 引入、定義變數以及 JavaScript 中數據類型和數據類型之間的轉換。 引入 JavaScript 什麼是JavaScript 語言？ Ja ...


JavaScript 系列博客（一）

前言

本系列博客為記錄學習 JavaScript 的學習筆記，會從基礎開始慢慢探索 js。今天的學習筆記主要為 js 引入、定義變數以及 JavaScript 中數據類型和數據類型之間的轉換。

引入 JavaScript

什麼是JavaScript 語言？

JavaScript 是一種輕量級的腳本語言。所謂的‘’腳本語言‘’，指的是它不具備開發操作系統的能力，而是只用來編寫相關應用程式的‘’腳本‘’，使用場景最多的是瀏覽器中。

JavaScript 也是一種嵌入式語言。本身的核心語法不算很多，只能用來做一些數學和邏輯運算。JavaScript 本身不提供任何與 I/O相關的介面，都要靠宿主環境提供，所以 JavaScript 只適合嵌入更大型的應用程式環境，去調用宿主環境提供的介面。比如和瀏覽器的交互。

從語法角度看，JavaScript 語言是一種‘’對象模型‘’語言（Object Models）。各種宿主環境通過這個模型，描述自己的功能和操作介面，還支持其他編程範式（比如函數式編程）。

JavaScript 的核心語法非常精簡，只包括兩個部分：基本的語法構造（比如操作符、控制結構、語句）和標準庫（一系列的具體對象類型，比如 Array、Date 等）。除此之外，各種宿主環境提供額外的介面（即只能在該環境使用的介面），以便 JavaScript 調用。以瀏覽器為例，他提供個額外介面分為三大類。

  1. 瀏覽器控制類：操作瀏覽器
  2. DOM 類：操作網頁的各種元素
  3. Web 類：實現互聯網的各種功能

如果宿主環境是伺服器，則會提供各種操作系統的介面，比如文件操作介面，網路通信介面等。

JavaScript 與 Java的關係

其實我很早就知道 JavaScript 和 Java 了，開始也很納悶它們之間的關係，這裡詳細介紹一下。

JavaScript 的基本語法和對象體系，是模仿 Java 設計的。但是JavaScript 沒有採用 Java 的靜態 類型。正是因為 JavaScript與 Java 有很大的相似性，所以這門語言從一開始的 LiveScript 改名為 JavaScript。基本上，JavaScript 這個名字的原意是‘’很像 Java的腳本語言‘’。

JavaScript 語言的函數是一種獨立的數據類型，以及採用基於原型對象的繼承鏈。這是它與 Java 語法最大的兩點區別。JavaScript 語法比 Java 要自由的多。（約束少了，問題也會多起來）。

除此之外，Java 語言需要編譯，而 JavaScript 語言則是運行時由解釋器直接執行。

JavaScript 與 ECMAScript 的關係

1996年8月，微軟模仿 JavaScript 開發了一種相近的語言，取名為JScript（JavaScript 是 Netscape 的註冊商標，微軟不能用），首先內置於IE 3.0。Netscape 公司面臨喪失瀏覽器腳本語言的主導權的局面。

1996年11月，Netscape 公司決定將 JavaScript 提交給國際標準化組織 ECMA（European Computer Manufacturers Association），希望 JavaScript 能夠成為國際標準，以此抵抗微軟。ECMA 的39號技術委員會（Technical Committee 39）負責制定和審核這個標準，成員由業內的大公司派出的工程師組成，目前共25個人。該委員會定期開會，所有的郵件討論和會議記錄，都是公開的。

1997年7月，ECMA 組織發佈262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，並將這種語言稱為 ECMAScript。這個版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript，一方面是由於商標的關係，Java 是 Sun 公司的商標，根據一份授權協議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 已經被 Netscape 公司註冊為商標，另一方面也是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利於保證這門語言的開放性和中立性。因此，ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現。在日常場合，這兩個詞是可以互換的。

ECMAScript 只用來標準化 JavaScript 這種語言的基本語法結構，與部署環境相關的標準都由其他標準規定，比如 DOM 的標準就是由 W3C組織（World Wide Web Consortium）制定的。

ECMA-262 標準後來也被另一個國際標準化組織 ISO（International Organization for Standardization）批准，標準號是 ISO-16262。

在 HTML 中引入 js

在之前學習 css 中有三種引入 css 的方式，那麼也有三種引入 js 的方式。

  • 行間式
<div id="ddd" onmouseover="this.style.color ='red'" onmouseleave="this.style.color = 'blue'">這是行間式 js 的 div</div>

特點：

  1. 行間式代碼塊書寫在一個個全局事件名屬性中，沒有 script 這樣的一個全局屬性；
  2. 在某一個標簽的某一個事件屬性值中，出現的 this 代表該標簽；
  3. 該標簽對象 this 可以訪問該標簽的任意全局屬性。
  • 內聯式
<script>
    ddd.style.backgroundColor = 'pink'
</script>

特點：

  1. 可以通過標簽的 id（唯一標識），在 js 代碼塊中訪問到該標簽（js 選擇器）；
  2. js 代碼塊中語法採用的是小駝峰命名法，屬性的值都是用字元串形式進行複製；
  3. js 屬於解釋型語言，載入順序會影響執行結構。
  • 外聯式
<script src="js/01.js">
    // 被屏蔽掉的代碼塊
    ddd.style.fontSize = '100px';
</script>

特點：

  1. 通過 script 標簽的 src 數據連接外部 js 文件；
  2. 使用外聯的 script（擁有 src 屬性）標簽，會屏蔽掉標簽內部的 js 代碼塊；
  3. 在 js 的任意地方，均有 this對象，this 對象不指向任何標簽時，指向的是 window 對象。

在 js 中定義變數

四種定義變數的方式

語法: 關鍵詞 變數名 = 變數值

num = 10; // 省略關鍵詞, 定義的為全局變數, 在任何位置定義, 在任何位置都可以訪問, 但不建議使用
var num = 10; // var關鍵詞, 無塊級作用域, 定義在塊級作用域中的變數, 外界也可以訪問
let num = 20; // let關鍵詞, 有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問
const NUM = 30; // const關鍵詞,有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問, 且變數的值不能再被二次修改, 所以為常量

/* 產生塊級作用域的方式
{
    直接書寫
}
if語句可以產生
while語句可以產生
for語句也可以產生
*/

// 函數可以產生局部作用域, 除了定義在局部作用域中的全局變數(沒有關鍵字的變數聲明), 外界可以訪問, 其他定義方式, 外界都不可以訪問
// ES5 | ES6
// 是ECMAScript兩個語法版本, ES6是ES5之後的一個版本, 但是對ES5向下相容, ES6中支持ES5語法

命名規範

// 命名規範
// 變數命名規範
// 可以由哪些組成: 字母, 數字, _, $, 中文(一般不考慮)
// 可以以什麼開頭: 字母, _, $, 中文
// 不能出現什麼: 關鍵字, 保留字
// 提倡什麼書寫規範: 小駝峰, 支持_連接語法
好的 = "真好";
console.log(好的);

數據類型

值類型

  • number 類型
var num = 10;
    // 類型, 值
    console.log(typeof(num), num)
    // 判斷方式
    console.log(typeof num == 'number');

    num = 3.14;
    console.log(typeof(num), num);
  • string類型
var str = '單引號字元串';
    console.log(typeof(str), str);
    str = "雙引號字元串";
    console.log(typeof(str), str);
  • boolean 類型
var res = true;
    console.log(typeof(res), res);
    res = false;
    console.log(typeof(res), res);
  • undefined 類型
console.log(typeof(abc), abc);
    var abc = undefined;
    console.log(typeof(abc), abc);

引用類型

  • function 類型
var fn = function (a, b) { return a + b; };
    console.log(typeof(fn), fn);
  • object 類型（類字典方式來使用）
var obj = {
        name: 'egon',
        age: 78
    };
    console.log(typeof(obj), obj);
    console.log(obj instanceof Object);

其他形式對象

  • null 類型
var xyz = null;
    console.log(typeof(xyz), xyz);  // object null
    console.log(xyz instanceof Object);  // false => Null類型

具體的對象類型

  • Array 類型
var a = new Array(1, 2, 3, 4, 5);
    console.log(a, typeof a);
    // 判斷方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof Array);
  • Date 類型
var a = new Date();
    console.log(a, typeof a);
    // 判斷方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof Date);
  • RegExp 類型
var a = new RegExp('a');
    a = /[abc]/;
    console.log(a, typeof a);
    // 判斷方式
    console.log(typeof a == 'object');
    console.log(a instanceof Object);
    console.log(a instanceof RegExp)

    // 使用正則
    console.log('abc'.match(a))

數據類型之間的轉換

  • number 與 boolean 類型
// boolean類型的true就是數字1, false就是數字0
    console.log((true + true) * 10 * false)
    // number 中 0, NaN 可以直接當false來使用, 其他的都可以當true來使用
  • string,boolean 轉換為 number
var a = '10'; // => 10
    a = '3.14';  // => 3.14
    a = '3.14.15';  // => NaN
    var b = true;

    var n1 = Number(a);
    console.log(n1)
    var n2 = Number(b);
    console.log(n2)

    a = '3.14.15';  // 3.14
    a = 'a3.14';  // NaN
    console.log(parseFloat(a));

    a = '3.94.15';  // 3
    console.log(parseInt(a));

    // 體現弱語言類型
    a = '10';
    var res = +a; // number 10
    console.log(typeof(res), res)
  • number,string 轉換為 boolean
// 在分支或迴圈判斷中, 系統會將數字與字元串類型自動轉換為布爾類型
    // 不在判斷中, 如何轉換
    console.log(Boolean(""));
    console.log(Boolean(0));
    console.log(Boolean(NaN));
    console.log(Boolean(null));

    console.log(Boolean("1"));
    console.log(Boolean(-100));
  • number,boolean 轉換為 string
console.log(String(true));
    console.log(String(1));

    var a = 123;
    console.log(a.toString());
    console.log(123..toString());
    console.log(3.14.toString());

    var c = 123 + "";
    console.log(typeof c, c);

    // 用例
    var z1 = 2 + +"5";  // 7
    z1 = 2 + "5"; // "25"
    // z1 = 2 ++"5";  // 語法錯誤 ++連在一起是 ++語法(瞭解)
    var z2 = "5" - 2;  // 3
    console.log(z1, z2);

    // 補充
    // NaN與NaN不相等

總結

一.JS三個組成部分

  • ES: ECMAScript語法
  • DOM: document對象模型 => 通過js代碼與頁面文檔(出現在body中的所有可視化標簽)進行交互
  • BOM: borwser對象模型 => 通過js代碼與瀏覽器自帶功能進行交互

二.引入方式

  • 行間式
出現在標簽中的全局事件屬性中
this代表該標簽, 可以訪問全局屬性, 再訪問具體操作對象(eg: this.style.color = "red")
  • 內聯式
出現在script腳本標簽中
可以通過標簽的id唯一標識,在js代碼塊中操作頁面標簽
js採用的是小駝峰命名規範, 屬於解釋性語言(由上至下依次解釋執行)
  • 外聯式
通過script標簽的src屬性鏈接外部js文件, 鏈接後, script標簽本身內部的js代碼塊將會被屏蔽
在任何位置都可以使用this對象,當this對象不指向任意一個標簽時,代表的是window對象
  • js具體出現的位置
head標簽的底部: 依賴性js庫
body標簽的底部(body與html結束標簽的之間): 功能性js腳本

三.變數的定義

四種定義變數的方式
語法: 關鍵詞 變數名 = 變數值

num = 10; // 省略關鍵詞, 定義的為全局變數, 在任何位置定義, 在任何位置都可以訪問, 但不建議使用
var num = 10; // var關鍵詞, 無塊級作用域, 定義在塊級作用域中的變數, 外界也可以訪問
let num = 20; // let關鍵詞, 有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問
const NUM = 30; // const關鍵詞,有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問, 且變數的值不能再被二次修改, 所以為常量

/* 產生塊級作用域的方式
{
    直接書寫
}
if語句可以產生
while語句可以產生
for語句也可以產生
*/

// 函數可以產生局部作用域, 除了定義在局部作用域中的全局變數(沒有關鍵字的變數聲明), 外界可以訪問, 其他定義方式, 外界都不可以訪問
// ES5 | ES6
// 是ECMAScript兩個語法版本, ES6是ES5之後的一個版本, 但是對ES5向下相容, ES6中支持ES5語法
// 命名規範
// 變數命名規範
// 可以由哪些組成: 字母, 數字, _, $, 中文(一般不考慮)
// 可以以什麼開頭: 字母, _, $, 中文
// 不能出現什麼: 關鍵字, 保留字
// 提倡什麼書寫規範: 小駝峰, 支持_連接語法
好的 = "真好";
console.log(好的);

四.三種彈出框

// 普通彈出框
// alert("你丫真帥!!!");

// 輸入框: 以字元串形式接收用戶輸入內容
// var info = prompt("請輸入內容:");
// console.log(info)

// 確認框: 根據用戶選擇確認或取消, 得到 true | false 兩個布爾結果
// var res = confirm("你是豬嗎?");
// console.log(res)

五.數據類型

// 值類型
var a = 10;  // Number 10
var a = 'abc';  // String abc
var a = true;  // Boolean true
var a = undefined  // undefined undefined
// 引用類型
var a = function(){}  // function f(){}
var a = {}  // Object {}
var a = null  // Null null

// 其他Object具體體現
Array | Date | RegExp

六.值類型的類型轉換

// 1.通過類型聲明轉換
Number() | String() | Boolean()

// 2.方法(函數)
parseInt('10') | parseFloat('3.14')
123..toString()

// 3.隱式轉換
+'10' => 10
'' + 10 => '10'

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • oracle查詢用戶的許可權
    DBA_* 描述的是資料庫中的所有對象 ALL_* 描述的是當前用戶有訪問許可權的所有對象 USER_* 描述的是當前用戶所擁有的所有對象 查看所有用戶： select * from dba_users; >顯示所有用戶的詳細信息 select * from all_users; >顯示用戶及用戶id ...
  • 從零學習Fluter(九):正式使用flutter進入商業開發
    從零學習Fluter(九):正式使用flutter進入商業開發 ...
  • Android之選擇本地圖片
    pass ...
  • 淺談AndroidGPU過度繪製、GPU呈現模式分析及相關優化
    在真機設備下有一個開發者選項，這個大家都知道，我們最常用的就打開'USB調試'功能，方便真機調試。 在這開發者選項中還有個選項，'調試GPU過度繪製' 這裡選擇第二個選項'顯示過度繪製區域' 可以看到針對該界面 每一個控制項周邊都有一塊顏色區域 顏色對應： 原色：沒有過度繪製 藍色：1 次過度繪製 綠 ...
  • vue.js中compted與model的區別
    在p便簽內寫的{{reversemessage}}方法，若js里對應的函數為computed則不需要加上括弧 若js里對應的函數為model則應該將{{reversemessage}}改為{{reversemessage()}} 兩者在緩存方式上也有區別，利用computed計算屬性是將 rever ...
  • 【讀書筆記】Web-JavaScript-JavaScript 條件語句
    一，效果圖。 二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript 條件語句</title> </head> <body> <p>如果時間早於20:00,會獲得問候“Good day”.</p> <b ...
  • jqGrid 常用 總結 -1
    這篇文章是因為，我們在做的後臺項目，裡面有大量的表格統計，這個不可能自己手寫，所以其中的表格使用的是jqgrid。 這個插件其實使用起來還是不錯的，裡面有很多的功能很贊。這篇博客就是自己的的一個記錄，也是對以後項目的一個參考。因為有一些代碼總是記不住。 首先就是引入這個插件所需要的js和css了，這 ...
  • 一些安全相關的HTTP header
    1.Strict Transport Security HTTP Strict Transport Security，簡稱為HSTS。 作用：允許一個HTTPS網站，要求瀏覽器總是通過HTTPS訪問它。 includeSubDomains，可選，用於指定是否作用於子功能變數名稱 支持HSTS的瀏覽器遇到這個 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類