前端開發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
  • 移動開發（一）：使用.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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類