一:編程基礎

編程語言（了解）

編程：就是讓計算機為解決某個問題而使用某種程式設計語言撰寫程式代碼，并最終得到結果的程序，

從事編程的人員：就是我們程式員(程式猿)計算機是指任何能夠執行代碼的設備：ATM機智能手機醫療檢測器械人臉識別收銀系統，

計算機語言

計算機語言：計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞資訊的媒介，

計算機語言：機器語言匯編語言高級語言

計算機最終執行的都是機器語言，是由 0和1組成的二進制數,二進制是機器語言的基礎，

編程語言：匯編語言高級語言

高級語言所編制的程式不能被計算機識別，必須通過轉換才能被執行，此時需要一個翻譯器，

翻譯器可以將我們所撰寫的源代碼轉換為機器語言，

總結：

計算機可以幫助人類解決某些問題
程式員利用編程語言撰寫程式發出指令控制計算機來實作這些任務
編程語言有機器語言、匯編語言、高級語言
高級語言需要一個翻譯器轉換為計算機識別的機器語言
編程語言是主動的有很強的邏輯性

初始JavaScript

JavaScript語言創造者:布蘭登·艾奇.

JavaScript 是世界上最流行的語言之一，是一種運行在客戶端的腳本語言（Script 是腳本的意思）

腳本語言：不需要編譯，運行程序中由 js 解釋器( js 引擎）逐行來進行解釋并執行

現在也可以基于 Node.js 技術進行服務器端編程

JavaScript 的作用

表單驗證網頁特效服務端開發(node.js) 桌面應用 app 游戲開發等，

HTML/CSS/JS 的關系：

HTML/CSS是標記語言--描述類語言，

JS 腳本語言--編程類語言--編程語言

瀏覽器執行 JS

瀏覽器分成兩部分：渲染引擎和 JS 引擎

JS 引擎：也稱為 JS 解釋器，用來讀取網頁中的JavaScript代碼，對其處理后運行，比如 chrome 瀏覽器的 V8

瀏覽器本身并不會執行js代碼，而是通過內置 JS 引擎來執行代碼，js引擎執行代碼時逐行解釋每一句源代碼，然后再由計算機去執行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執行，

JS 的組成

ECMAScript(規定了js的基礎語法)
DOM 檔案物件模型主要是提供一些操作HTML檔案的工具
BOM 瀏覽器物件模型主要是提供一些操作瀏覽器的工具

js書寫位置

三種書寫位置：行內式內嵌式外鏈式

在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號，

行內式

我們可以將JS代碼寫在標簽里面，事件屬性很多 onclick

 <!-- 1 行內式 直接把js代碼寫到標簽內部-->
<button οnclick="alert('愛你么么噠')">點我</button>

內嵌式

需要在html代碼中新建一個<script></script>標簽，最好將這個標簽寫在<body>結束標簽的前面

<script> 
      
     alert('風里雨里下班等你')

 </script>

外鏈式

需要將js代碼放在一個js檔案中，檔案的擴展名必須以.js結尾檔案，需要在html標簽中使用script標簽引入，通過script標簽的src屬性來引入

第一步：新建一個以.js結尾的檔案

第二步：通過script標簽的src屬性來引入

<script src="./index.js"></script>

注意：

一個html檔案可以引入多個js檔案
一對script標簽一次只能實作一種書寫方式

js注釋

單行注釋 ctrl+/
```
// 注釋的內容
```
多行注釋默認的快捷鍵 shift + alt + a，vscode中可以修改為：ctrl + shift + /

vscode → 首選項按鈕 → 鍵盤快捷方式 → 查找原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認
```
/*
 注釋的內容
*/
```

js 輸入輸出陳述句

// 輸出陳述句

prompt() 它會向瀏覽器上彈出一個輸入的對話框用的不多
```
 // 輸入陳述句
prompt('請輸入您的年齡')
```
輸出陳述句

alert(‘內容’) 向瀏覽器中彈出一個警告的提示框使用的比較少

console.log('內容') 向瀏覽器的開發者工具中的console選項卡輸出內容 log

document.write('輸出的內容') 向body標簽里面輸出內容可以是html標簽
```
 // 輸出陳述句
alert('我是彈出來的')
console.log('我是控制臺輸出的');
 //document 檔案  write：寫入
document.write('輸出內容')
document.write('<h1>標題標簽</h1>')
```

陳述句結束符(補充)

js一行中如果只寫一條陳述句，在陳述句的末尾可以加分號也可以不加分號，建議不加

如果一行中寫了多條陳述句，每一條陳述句的末尾需要加分號，如果不加就會報錯，

幾乎沒有一行中寫多條JS陳述句的代碼

alert('hello') alert('world');// 報錯
alert('hello');alert('world');// 正確

js-變數（重要）

變數概念

大白話：變數就是用來裝東西的盒子，

通俗：變數是用于存放資料的容器，可以通過變數獲取資料，也可以修改資料，

本質：變數是程式在記憶體中申請的一塊用來存放資料的空間

變數的使用

宣告變數
變數賦值

創建變數

第一種方式：

先宣告變數，然后再賦值

var age; // 宣告變數
age = 18; // 給變數名age賦值

第二種方式：

在宣告變數的同時賦值，直接賦值稱之為變數的初始化

var age = 20;// 變數初始化

創建變數一定要加var關鍵字

使用變數

比如輸出變數

變數案例彈出用戶名

使用變數來保存用戶輸入的資料

<script>
// 用戶輸入姓名保存到data這個變數中
var data = prompt("請輸入您的姓名:")
// 將變數的值輸入到瀏覽里面
alert(data)
</script>

變數語法擴展

變數語法擴展-更新變數
一個變數被重新復賦值后，它原有的值就會被覆寫，變數值將以最后一次賦的值為準，

 //更新變數 
   var uname = '張三'
    console.log(uname);
    uname = '李四'
    console.log(uname);

變數語法擴展-宣告多個變數
同時宣告多個變數時，只需要寫一個 var，多個變數名之間使用英文逗號隔開，

 var uname = '張三',
  age = 18,
  address = '木葉村'
 console.log(uname,age,address);

宣告變數的注意點

      // 只宣告不賦值
      var age
      console.log(age); // undefined
      // 不宣告 不賦值 直接使用
      console.log(MyName); //  MyName is not defined 未定義
      // 不宣告 只賦值
      uname = '張三'
      console.log(uname);// 但是在js的嚴格模式下會報錯，

js的嚴格模式(補充)

// 使用嚴格格式   加了 'use strict' 使用es6以上的js  如果沒有 es5
        'use strict'
        uname = '張三'
        console.log(uname) // 報錯  uname is not defined
        // 大家定義變數時一定要記得加var

變數命名規范

由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
嚴格區分大小寫，var app; 和 var App; 是兩個變數
不能以數字開頭， 18age 是錯誤的
不能是關鍵字、保留字，例如：var、for、while
變數名必須有意義， MMD BBD nl → age
遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫， myFirstName
推薦翻譯網站：有道愛詞霸

報錯

如果上一行有錯誤，下面的代碼都不會被執行

 console.log(MyName);// 報錯  uname is not defined 會影響下面代碼的執行
 var uname = '張三'
 console.log(uname);

交換2個變數的值

// 交換2給變數的值
/* 1.1 先創建2個變數 */
var apple1 = '青蘋果'// 左手
var apple2 = '紅蘋果'// 右手
/* 1.2 宣告一個臨時變數為空 */
var temp // 板凳
/* 1.3 先將左手的蘋果給temp變數此時左手就空出來 */
temp = apple1
/* 1.4 把右手的蘋果給到左手此時右手就空出來 */
apple1 = apple2
/* 1.5 把板凳上的蘋果給到右手 */
apple2 = temp
console.log(apple1);// 紅蘋果
console.log(apple2);// 青蘋果
console.log(apple1,apple2); //可以同時列印多個變數，變數之間用逗號隔開，

資料型別(重要)

車在現實生活都有分類，貨車，客車，

資料：有數字，有中文等等，方便JS語言對其進行管理，

但是JS是一門弱型別的腳本語言，

弱型別：在宣告變數的時候不需要先規定這個變數的型別是什么，但是我們JS的變數也是有型別，只不過它的型別是由變數的值來決定的，

強型別：在宣告變數的時候一定要先規定這個變數的是什么型別學習成本要高一些

強型別的語言它的效率高，弱型別的語言它的效率低，JS的內置的決議器它要判斷我們宣告的變數是什么型別

JS 把資料型別分為兩類：

簡單資料型別（Number,String,Boolean,Undefined,Null）
復雜資料型別（object)

基本資料型別：一個變數只能保存一個值

復雜資料型別：一個變數可以保存多個值

基本資料型別：Number、String 、Boolean、undefined、null

數字型 Number

變數的值包含：數字、NaN

JavaScript中數值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

數字型三個特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN

Infinity ，代表無窮大，大于任何數值Infinity

代表無窮小，小于任何數值NaN

Not a number，代表一個非數值

typeof

作用：用于檢測一個變數的資料型別

// var num = 10
var num1 = NaN
// 檢測num這個變數的型別
var res = typeof num1
// 輸出res變數的值
console.log(res);

isNaN()

用來判斷一個變數是否為非數字的型別，回傳 true 或者 false

var number = 10;
console.log(isNaN(number)); // false
var number1 = "三國演義";
console.log(isNaN(number1)); // true

字串 String

字串型可以是引號中的任意文本，其語法為雙引號 "" 和單引號''，但是推薦大家使用單引號，

只要變數的值用引號(單引號和雙引號)包裹起來的那么這個變數就是字串，不管引號里面是什么，

var str = '1234';
console.log(typeof res);// String型別

注意：字串型別就要=需要加引號，如果不加就會報錯，

var str1 = 我派大星; // 報錯，沒使用引號，會被認為是js代碼，但js沒有這些語法

字串引號嵌套

JS 可以用單引號嵌套雙引號，或者用雙引號嵌套單引號 (外雙內單，外單內雙)

如果是一個單引號定義的變數，在這個字串里面如果還想要出來引號那么記得寫在雙引號

如果是一個雙引號定義的變數，在這個字串里面如果還想要出來引號那么記得寫在單引號

// 字串引號嵌套
var str = '<h1 style="color:red">我是一個高\n富帥</h1>'
document.write(str);

字串轉義

轉義符都是 \ 開頭的

常用的是：\n (換行符) \t (tab縮進)

獲取字串長度

語法：

變數名.length

 // 獲取字串長度 語法 str.length   
       //var str = 'javascript' 
         var str = '天才派大星' 
         var len = str.length; 
         console.log(len);

字串拼接

字串拼接使用 + 來進行拼接

多個字串之間可以使用 + 進行拼接，其拼接方式為字串 + 任何型別 = 拼接之后的新字串

字串與變數名要進行拼接的話只能使用 +

如果 + 號有一邊是字串型別的資料那么就會執行字串拼接的功能

如果 + 號兩邊都是number型別的資料就是執行加法運算

// 字串拼接
        console.log('關公' + '舞大刀'); //'關公舞大刀'
        // + 號兩邊都是number型別的資料就是執行 加法運算
        console.log(12 + 13); // 25 
        // + 號有一邊是字串型別的資料 那么就會執行 字串拼接的功能
        console.log('12' + 13); // '1213'

+ 號總結口訣：數值相加，字符相連

字串拼接加強

變數是不能添加引號的，因為加引號的變數會變成字串

js字串型別的資料我們使用單引號或者是雙引號定義的字串變數如果字串里面出現了變數名，那么這個變數名是不會被決議的，

var age = 18
var str = '派大星今年age歲了'
// 字串里面出現了變數名，那么這個變數名是不會被決議的
console.log(str); // 派大星今年age歲了

如果想要在字串決議變數那么就要使用字串拼接，

var age = 18
var str1 = '派大星今年' +age+'歲了'
console.log(str1);

擴展-模板字串(es6)

通過變數拼接，會很容易出錯，尤其是在遇到單引號和雙引號同時出現的場景，而使用模板字串語法就不會出現上述問題，

模板字串在宣告字串的時候采用的是反引號 `` esc鍵下面的那個鍵

模板字串中不在使用加號進行拼接，可以直接嵌入變數，只需要將變數寫在${}之中

// 模板字串 ``
// 模板字串中不在使用加號進行拼接，可以直接嵌入變數，只需要將變數寫在`${}`之中
var age = 18
var str = `金波老師今年${age}歲了`
console.log(str);

擴展-模板字串案例

var username = '葫蘆娃'
var age = 18
var sex = '男'
var height = 183
var str =
`
<table>
<tr>
<th>姓名</th><th>年齡</th><th>性別</th><th>身高</th>
</tr>
<tr style="text-align:center">
<td>${username}</td>
<td>${age}</td>
<td>${sex}</td>
<td>${height}</td>
</tr>
</table>
`
document.write(str)

樣式代碼：

table {
width: 800px;
margin: 0 auto;
border: 1px solid red;
border-collapse: collapse;
}

tr,
td,
th {
border: 1px solid red;
}

顯示年齡案例

// 1. 需要有一個輸入對話框
var age = prompt('請輸入您的年齡：')
// 2. 需要構建一個字串將資料進行拼接完了以后資料顯示出來
var res = `今年${age}歲了`
document.write(res)

Boolean 型別

布爾型別，它表示真與假布爾型別變數的值只有兩個： true 和 false

true的值為1 false的值為0

// 定義布爾型別變數
var flag = true;
console.log(typeof flag);

undefined型別

未定義的資料型別

如何得到未定義的資料型別

宣告一個變數沒有賦值，直接使用
宣告一個變數將變數的值賦值為 undefined

// 如何得到未定義的資料型別
/* 1. 宣告一個變數沒有賦值，直接使用 */
var username
console.log(typeof username); // undefined
// 2. 宣告一個變數將變數的值賦值為 undefined
var age = undefined
console.log(typeof age); // undefined

null

空資料型別

如何得到空資料型別

將一個變數的值賦值null

我們通過 typeof來檢測null型別發現得到居然是object型別？？？

var v1 = null
console.log(typeof v1); // 結果是：object
// typeof來檢測null型別發現得到居然是`object`型別？？

原因：為什么 typeof 運算子對于 null 值會回傳 "Object"，這實際上是 JavaScript 最初實作中的一個錯誤，也是 JavaScript歷史遺留下來的語言設計缺陷，然后被 ECMAScript 沿用了，現在，null 被認為是物件的占位符，從而解釋了這一矛盾，但從技術上來說，它仍然是原始值，曾有一個 ECMAScript 的修復提案，但是該提案被無情的否決了，并且永遠不會被修復，

mdn說明：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Operators/typeof

基本資料型別總結：

Number(數字型) String(字串) Boolean(布爾) Undefined(未定義) Null(空)

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

標籤：其他

上一篇：Vue后端程式員極速入門

下一篇：Node.js跨域解決方案，讓你吃透（媽媽級教學）

JS基礎 -- 大復習(階段一)