JavaScript 01

JavaScript介紹
變數
資料型別
型別轉換
Javascript訂單案例(完整代碼)

一.JavaScript 介紹

簡介:
JavaScript （是什么？）
是一門運行在客戶端（瀏覽器）的編程語言，實作人機互動效果，

書寫位置:

內部

<script>
        alert('直接寫里面')
</script> -->

外部

<script src="./my.js">建.js引入</script>

行內

    <button onclick="alert('點擊后顯示')">用onclick</button>

書寫的位置盡量寫到檔案末尾 body前面

注釋:

單行注釋
? 符號：//
? 作用：//右邊這一行的代碼會被忽略
? 快捷鍵：ctrl + /
塊注釋
? 符號：/* /
? 作用：在/ 和 */ 之間的所有內容都會被忽略
? 快捷鍵：shift + alt + A

結束符:
? 結束符是？
? 英文狀態分號；
? 結束符可以省略嗎？
? 可以
? 但為了風格統一，要寫結束符就每句都寫，要么每句都不寫

輸入和輸出語法:
輸出語法:

<script>
        // 網頁輸出
        document.write('頁面輸出的內容')
        // 頁面彈出
        alert('頁面彈出警告對話框')
        // 控制臺輸出console
        console.log('控制臺列印') 
</script>

輸入語法:

// 輸入陳述句prompt
        prompt('請輸入你想輸入的')

字面量:
在計算機科學中，字面量（literal）是在計算機中描述事/物.
? 我們工資是：1000 此時 1000 就是數字字面量
? ‘程式員’ 字串字面量
? [] 陣列字面量 {} 物件字面量等等

二.變數

變數是什么:

白話：變數就是一個裝東西的盒子，
通俗：變數是計算機中用來存盤資料的“容器”

宣告變數和賦值變數：

let age = 18

注意： let 不允許多次宣告一個變數
比如

 // 一個變數(如age)不能多次宣告l
    let age = 18
    let age = 19

但是可以一次宣告多個變數

// 一次可以宣告多個變數(age.name)
    let age = 18,name = 小龍人

變數的本質:
記憶體：計算機中存盤資料的地方，相當于一個空間
變數：是程式在記憶體中申請的一塊用來存放資料的小空間
在這里插入圖片描述
變數命名規則與規范:

規則：必須遵守，不遵守報錯
規范：建議，不遵守不會報錯，但不符合業內通識

規則：
? 不能用關鍵字
? 關鍵字：有特殊含義的字符，JavaScript 內置的一些英語詞匯，例如：let、var、if、for等
? 只能用下劃線、字母、數字、$組成，且數字不能開頭
? 字母嚴格區分大小寫，如 Age 和 age 是不同的變數
規范：
? 起名要有意義
? 遵守小駝峰命名法
? 第一個單詞首字母小寫，后面每個單詞首字母大寫，例：userName

講一下陣列變數:

陣列(Array):可以按順序保存多個資料的變數
宣告語法:

let name = ['馬超', '李信', '夏洛特','...','資料n']

陣列中的下標編號從0開始
取值語法:

// 取值語法:陣列名[下標]
  alert(name[0])  //馬超

三.資料型別

JS 資料型別整體分為兩大類：

資料型別

? 基本資料型別
number 數字型: 正數、負數、小數等
string 字串型: 通過單引號（ ‘’）、雙引號（ “”）或反引號( ` )包裹的資料
boolean 布爾型:true 和 false
undefined 未定義型:只宣告變數，不賦值
null 空型別:null 表示值為空

? 參考資料型別
object 物件
function 函式
array 陣列

檢測資料型別

<script>
        //宣告賦值
        let name = ('小龍人')
        // 通過 typeof 關鍵字檢測資料型別
        // console.log控制臺輸出
        console.log(typeof(name))
</script>

四.型別轉換

? 隱式轉換
某些運算子被執行時，系統內部自動將資料型別進行轉換，這種轉換稱為隱式轉換，
規則：
? + 號兩邊只要有一個是字串，都會把另外一個轉成字串
? 除了+以外的算術運算子比如 - * / 等都會把資料轉成數字型別

? 顯式轉換
自己寫代碼告訴系統該轉成什么型別
轉換為字符型:
? String(資料)
? 變數.toString(進制)

轉換為布爾型:
? Boolean(資料)
? 字串型別：空字串會轉成false 其他的都會被轉換成true
? 數字型別：0與NaN會轉換成 false 其他的都會被轉換成true
? undefined型別：會被轉換成false
? null 型別：會被轉換成false

轉換為數字型
? Number(資料)
? 轉成數字型別
? 如果字串內容里有非數字，轉換失敗時結果為 NaN（Not a Number）即不是一個數字
? NaN也是number型別的資料，代表非數字
? parseInt(資料)
? 只保留整數
? parseFloat(資料)
? 可以保留小數

五.Javascript訂單案例(完整代碼)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <script>
        // 宣告引數
        let price = prompt('請輸入商品價格:')
        let num = prompt('商品數量:')
        let add = prompt('識訓地址:')
        let total = price * num

        // 渲染表格,填充資料 
        // 俺直接在表格里把樣式寫了
        document.write(`
        <table border="1" width="600" height="100" align="center" rules="all">
        <caption><h2>訂單付款確認頁面</h2></caption>
        <tr>
            <th>商品名稱</th>
            <th>商品價格</th>
            <th>商品數量</th>
            <th>總價</th>
            <th>識訓地址</th>
        </tr>
        <tr align="center">
            <td>小米手機青春PLAUS</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${add}</td>
        </tr>
        </table>
        `)
    </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374803.html

標籤：其他

上一篇：Vue3 新增 API 使用