前端開發JavaScript入門——JavaScript介紹&基本數據類型

来源:https://www.cnblogs.com/KLExTt/archive/2019/08/22/11390412.html
-Advertisement-
Play Games

JavaScript 誕生於1995年，它的出現主要是用於處理網頁中的 前端驗證。 • 所謂的前端驗證，就是指檢查用戶輸入的內容是否符合一定的 規則。 • 比如：用戶名的長度，密碼的長度，郵箱的格式等。 JavaScript是由網景公司發明，起初命名為LiveScript，後來由 於SUN公司的介入 ...


　　　　　　　　　　　　　　JavaScript

　　誕生於1995年，它的出現主要是用於處理網頁中的 前端驗證。 • 所謂的前端驗證，就是指檢查用戶輸入的內容是否符合一定的 規則。 • 比如：用戶名的長度，密碼的長度，郵箱的格式等。

　　JavaScript是由網景公司發明，起初命名為LiveScript，後來由 於SUN公司的介入更名為了JavaScript。1996年微軟公司在其最新的IE3瀏覽器中引入了自己對 JavaScript的實現JScript。於是在市面上存在兩個版本的JavaScript，一個網景公司的 JavaScript和微軟的JScript。 • 為了確保不同的瀏覽器上運行的JavaScript標準一致，所以幾 個公司共同定製了JS的標準名命名為ECMAScript。

　　

　　　　　　　　　　　　JavaScript實現

　　我們已經知道ECMAScript是JavaScript標準，所以一般情況下 這兩個詞我們認為是一個意思。 • 但是實際上JavaScript的含義卻要更大一些。 • 一個完整的JavaScript實現應該由以下三個部分構成：

　

　　　　　　　　　　　　　　　　編寫第一個javescript頁面

alert("");

控制瀏覽器彈出一個警告框，括弧中填警告框中內容。

document.write("")

可以向body中輸出一個內容，讓電腦在頁面中輸出一個內容。括弧中填輸出內容。

console.log("")

向控制台輸出一個內容。括弧中填輸出內容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--JS代碼需要編寫到script標簽中-->
        <script type="text/javascript">
            alert("哥，你真帥啊！！");
            document.write("看我出不出來~~~");
            console.log("你猜我在哪出來呢？");
        </script>
    </head>
    <body>
    </body>
</html>

需要註意的是：js語言的執行順序是從上到下，所以輸出順序從上到下依次輸出。

效果：

控制臺中：

　　　　　　　　　　　　　　　　　　　　　編寫位置

　　我們目前學習的JS全都是客戶端的JS，也就是說全都是需要在 瀏覽器中運行的，所以我們我們的JS代碼全都需要在網頁中編 寫。

• 我們的JS代碼需要編寫到<script>標簽中。

• 我們一般將script標簽寫到head中。（和style標簽有點像）

• 屬性： – type：預設值text/javascript可以不寫，不寫也是這個值。

– src：當需要引入一個外部的js文件時，使用該屬性指向文件的地址

編寫位置一：可以將js代碼寫在超鏈接的href屬性中，這樣當點擊超鏈接時，會執行js代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
</head>
    <body>
    <button onclick="alert('討厭，你點我幹嘛~~');">點我一下</button>
    <a href="javascript:alert('讓你點你就點！！');">你也點我一下</a>
        <a href="javascript:;">你也點我一下</a>
        
    </body>
</html>

編寫位置二：可以將js代碼編寫到script標簽。或者在script標簽引入外部編寫的js文件，外部的js文件可以在不同的頁面中同時引用，也可以利用到瀏覽器的緩存機制。（推薦使用的方式）

script標簽一旦用於引入外部文件了，就不能在編寫代碼了，即使編寫了瀏覽器也會忽略。如果需要則可以在創建一個新的script標簽用於編寫內部代碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript">
            alert("我是內部的JS代碼");
        </script>
</head> 
    <body>
</body>
</html>

　　　　　　　　　　　　　　　　　　　　JavaScript基本語法

1.JS中嚴格區分大小寫
2.JS中每一條語句以分號(;)結尾
 - 如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源，而且有些時候，瀏覽器會加錯分號，所以在開發中分號必須寫。
3.JS中會忽略多個空格和換行，所以我們可以利用空格和換行對代碼進行格式化

4.單行註釋和多行註釋

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            /*
                 多行註釋
                 JS註釋
                 多行註釋，註釋中的內容不會被執行，但是可以在源代碼中查看
                     要養成良好的編寫註釋的習慣，也可以通過註釋來對代碼進行一些簡單的調試
             */
            //單行註釋
            //alert("hello");
            //document.write("hello");
            console.log("hello"); //該語句用來在控制台輸出一個日誌
            alert("hello");                
        </script>
    </head>
    <body
    </body>
</html>

　　　　　　　　　　　　　　　　　　　　字面量和變數

字面量：都是一些不可改變的值
比如 ：1 2 3 4 5
字面量都是可以直接使用，但是我們一般都不會直接使用字面量

變數：變數可以用來保存字面量，而且變數的值是可以任意改變的
變數更加方便我們使用，所以在開發中都是通過變數去保存一個字面量，而很少直接使用字面量，可以通過變數對字面量進行描述。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //聲明變數
            //在js中使用var關鍵字來聲明一個變數
            var a;
            
            //為變數賦值
            a = 123;
            a = 456;
            a = 123124223423424;
            
            //聲明和賦值同時進行
            var b = 789;
            var c = 0;
            
            var age = 80;
            
            console.log(age);
        </script>
    </head>
    <body>
    </body>
</html>

　　　　　　　　　　　　　　　　　　　　　　　　標識符

在JS中所有的可以由我們自主命名的都可以稱為是標識符，例如：變數名、函數名、屬性名都屬於標識符。
命名一個標識符時需要遵守如下的規則：
1.標識符中可以含有字母、數字、_、$
2.標識符不能以數字開頭
3.標識符不能是ES中的關鍵字或保留字
4.標識符一般都採用駝峰命名法
- 首字母小寫，每個單詞的開頭字母大寫，其餘字母小寫。例如： helloWorld xxxYyyZzz

JS底層保存標識符時實際上是採用的Unicode編碼，
*所以理論上講，所有的utf-8中含有的內容都可以作為標識符

　　　　　　　　　　　　　　　　　　　　數據類型

在JS中一共有六種數據類型：
　　String 字元串
　　Number 數值
　　Boolean 布爾值
　　Null 空值
　　Undefined 未定義
　　Object 對象

其中String Number Boolean Null Undefined屬於基本數據類型
* 而Object屬於引用數據類型

 

　　　　　　　　　　　　　　　　　　　　　　　　String 字元串

　　在JS中字元串需要使用引號引起來，使用雙引號或單引號都可以，但是不要混著用。 引號不能嵌套，雙引號不能放雙引號，單引號不能放單引號。

　　在字元串中我們可以使用\作為轉義字元，當表示一些特殊符號時可以使用\進行轉義
　　\" 表示 "
　　\' 表示 '
　　\n 表示換行
　　\t 製表符
　　\\ 表示\

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            var str = 'hello';
            str = '我說:"今天天氣真不錯！"';
            str = "我說:\"今天\t天氣真不錯！\"";
            str = "\\\\\\";
            //輸出字面量 字元串str
            alert("str");
            //輸出變數str
            alert(str);
        </script>
    </head>
    <body>
    </body>
</html>

 

　　　　　　　　　　　　　　　　　　　　Number類型

在JS中所有的數值都是Number類型，包括整數和浮點數（小數）
JS中可以表示的數字的最大值
　　Number.MAX_VALUE
　　1.7976931348623157e+308
　　Number.MIN_VALUE(大於0的最小值)
　　5e-324

如果使用Number表示的數字超過了最大值，則會返回一個
　　Infinity 表示正無窮
　　Infinity 表示負無窮
　　使用typeof檢查Infinity也會返回number
　　NaN 是一個特殊的數字，表示Not A Number
　　使用typeof檢查一個NaN也會返回number

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">        
    //數字123
            var a = 123;
            //字元串123
            var b = "123";
            a = -Number.MAX_VALUE * Number.MAX_VALUE;
                      //返回的結果是infinity
             a = "abc" * "bcd";
                         console.log(typeof a);
            //返回的結果是a = NaN;
                       console.log(typeof infinity)；
                       //返回的結果是number
                       console.log(typeof NaN)；
                       //返回的結果是number
            /*
             * 在JS中整數的運算基本可以保證精確
             */
            var c = 1865789 + 7654321;
            /*
             * 如果使用JS進行浮點運算，可能得到一個不精確的結果
             *     所以千萬不要使用JS進行對精確度要求比較高的運算    
             */
            var c = 0.1 + 0.2;
            console.log(c);
        </script>
    </head>
    <body>
    </body>
</html>

 　　　　　　　　　　　　　　　　　　　　　　Boolean類型

布爾值只有兩個，主要用來做邏輯判斷：
true
- 表示真
false
- 表示假

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var bool = false;
            /* 
使用typeof檢查一個布爾值時，會返回boolean
             */
            console.log(typeof bool);
            console.log(bool);
        </script>
    </head>
    <body>
    </body>
</html>

　　　　　　　　　　　　　　　　　　Null和Undefined

Null（空值）類型的值只有一個，就是null。null這個值專門用來表示一個為空的對象。使用typeof檢查一個null值時，會返回object

ndefined（未定義）類型的值只有一個，就undefind。當聲明一個變數，但是並不給變數賦值時，它的值就是undefined。使用typeof檢查一個undefined時也會返回undefined。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = null;
            
            var b = undefined;
            
            console.log(typeof b);
            
        </script>
    </head>
    <body>
    </body>
</html>

　　　　　　　　　　　　　　　　　　　　　　　　　　強制類型轉換　

　　　　　　　　　　　　　　　　　　　　　轉換string類型

強制類型轉換，指將一個數據類型強制轉換為其他的數據類型。類型轉換主要指，將其他的數據類型，轉換為String Number Boolean。

方式一：將其他的數據類型轉換為String

　　調用被轉換數據類型的toString()方法，該方法不會影響到原變數，它會將轉換的結果返回。但是註意：null和undefined這兩個值沒有toString()方法，如果調用他們的方法，會報錯。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
             var a = 123;
            //調用a的toString()方法
            //調用xxx的yyy()方法，就是xxx.yyy()
            a = a.toString();
            
            a = true;
            a = a.toString();
            
            a = null;
            //a = a.toString(); //報錯
            
            a = undefined;
            //a = a.toString(); //報錯

        </script>
    </head>
    <body>
    </body>
</html>

 方式二：調用String()函數，並將被轉換的數據作為參數傳遞給函數

使用String()函數做強制類型轉換時，對於Number和Boolean實際上就是調用的toString()方法。但是對於null和undefined，就不會調用toString()方法，它會將 null 直接轉換為 "null"，將 undefined 直接轉換為 "undefined"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
　　　　　　　　　　a = 123;
            
            //調用String()函數，來將a轉換為字元串
            a = String(a);
            
            a = null;
            a = String(a);
            
            a = undefined;
            a = String(a);    
        </script>
    </head>
    <body>
    </body>
</html>

　　　　　　　　　　　　　　　　　　轉換為number

轉換方式一：
使用Number()函數
字元串 --> 數字
1.如果是純數字的字元串，則直接將其轉換為數字
2.如果字元串中有非數字的內容，則轉換為NaN
3.如果字元串是一個空串或者是一個全是空格的字元串，則轉換為0
布爾 --> 數字
true 轉成 1
false 轉成 0
null --> 數字 0
undefined --> 數字 NaN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
var a = "123";
            
            //調用Number()函數來將a轉換為Number類型
            a = Number(a);
            
            a = false;
            a = Number(a);
            
            a = null;
            a = Number(a);
            
            a = undefined;
            a = Number(a);
                    </script>
    </head>
    <body>
    </body>
</html>

 

轉換方式二：
這種方式專門用來對付字元串
parseInt() 把一個字元串轉換為一個整數
parseFloat() 把一個字元串轉換為一個浮點數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
                          a = "123567a567px";
            //調用parseInt()函數將a轉換為Number
            /*
             * parseInt()可以將一個字元串中的有效的整數內容去出來，
             *     然後轉換為Number
             */
            a = parseInt(a);
            
            /*
             * parseFloat()作用和parseInt()類似，不同的是它可以獲得有效的小數
             */
            a = "123.456.789px";
            a = parseFloat(a);
            
            /*
             * 如果對非String使用parseInt()或parseFloat()
             *     它會先將其轉換為String然後在操作
             */
            a = true;
            a = parseInt(a);
            a = 198.23;
            a = parseInt(a);
            console.log(typeof a);
            console.log(a);
        </script>
    </head>
    <body>
    </body>
</html>

 

 　　　　　　　　　　　　　　　　　　　　　　    　　其他的進位數字

　　在js中，如果需要表示16進位的數字，則需要以0x開頭。如果需要表示8進位的數字，則需要以0開頭。如果要要表示2進位的數字，則需要以0b開頭。但是不是所有的瀏覽器都支持。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
            var a = 123;
            //十六進位
            a = 0x10;
            a = 0xff;
            a = 0xCafe;
            
            //八進位數字
            a = 070;
            
            //二進位數字
            //a = 0b10;
            
            //像"070"這種字元串，有些瀏覽器會當成8進位解析，有些會當成10進位解析
            a = "070";
            
            //可以在parseInt()中傳遞一個第二個參數，來指定數字的進位
            a = parseInt(a,10);
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 強烈推薦 GitHub 上值得前端學習的開源實戰項目
    強烈推薦 GitHub 上值得前端學習的開源實戰項目。 Vue.js "vue element admin 是一個後臺前端解決方案，它基於和 element ui 實現" "基於 iView 的 Vue 2.0 管理系統模板" "基於 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應 ...
  • 有關css的相容問題
    相容性 1 頁面在不同瀏覽器中可能顯示不同 在IE6下 子級的寬度會撐開父級設置好的寬度 溫馨提示：和模型的計算一定要精確，IE瀏覽器可能顯示不同 相容性 2 在IE6中，元素浮動，如果寬度需要內容撐開， 需要給裡面的快元素 添加浮動 才可以 相容性 3 在IE6,7下，元素要通過浮動{float： ...
  • JavaScript的__proto__、prototype和繼承
    JavaScript也是可以“繼承”的！ 各位看官或是好奇，或是一知半解。什麼是prototype，__proto__，constructor、哪種繼承方式好。今天就在這交流交流。 什麼是prototype，__proto__，constructor https://blog.csdn.net/cc ...
  • BOM簡介
    BOM（瀏覽器對象模型）讓JavaScript可以和瀏覽器進行交流。 一 BOM是什麼 當我們使用瀏覽器打開一個網頁時，瀏覽器會為該頁面創建一個視窗，專門用於展示該網頁的內容。這時瀏覽器會在記憶體中創建一個對象，專門用於記錄描述該視窗的屬性和狀態變化等信息，這個對象就被稱為瀏覽器對象模型，通常我們也叫 ...
  • react學習筆記_01-jsx
    const element = <h1>Hello, world!</h1>; 首先我們看到聲明瞭一個element元素，而他的內容並非字元串或者html。 它被稱為 JSX，是一個 JavaScript 的語法擴展我們建議在 React 中配合使用 JSX，JSX 可以很好地描述 UI 應該呈現出 ...
  • CSS常見佈局
    說起佈局其實就和蓋房子的道理一樣，你首先要蓋好房子的模型（規劃好頁面的佈局），房子的雛形蓋好後就是往房子裡面佈置傢具了（在佈局裡面添加東西），這樣，房子蓋好後不論你往裡面添加什麼傢具也不能影響房子（杠精請坐下），佈局也一樣，佈局完成後，只需要在佈局的容器裡面添加更加細化的東西就行了。切忌邊寫內容邊布 ...
  • 不同瀏覽器的內核
    瀏覽器 1. shell: 外殼 2. core: 內核(JS執行引擎,渲染引擎) IE: Trident Firefox: Gecko Chrome: Webkit / Blink safari: Webkit opera: Presto / Blink ...
  • JavaScript解析機制之變數提升
    1、什麼是預解析？ 在當前作用域下，JS 運行之前，會把帶有 var 和 function 關鍵字的事先聲明，併在記憶體中安排好。（這個過程也可以理解為變數提升）然後再從上到下執行 JS 語句（預解析只會發生在通過 var 定義的變數和 function 上） 2、var 聲明的變數 使用 var 聲 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類