前端零基礎 JS 教學第一天 01 - day 變數與資料型別

JavaScript · 發表 2019-02-07 18:38:04

摘要：本人記錄使用的工具是xmind 要是不會的小夥伴可以百度下很簡單每天的課程下面都會有實戰案例的演示Demo 學習目標：掌握基礎程式設計語法訓練程式思維（用程式碼實現業務的思維）複製程式碼電腦基本介紹：軟體共分為兩類：系統軟體，應用軟體 ...

本人記錄使用的工具是xmind 要是不會的小夥伴可以百度下很簡單每天的課程下面都會有實戰案例的演示Demo

學習目標：

掌握基礎程式設計語法
訓練程式思維（用程式碼實現業務的思維）
複製程式碼

電腦基本介紹：

軟體共分為兩類：系統軟體，應用軟體

應用軟體：放到系統軟體裡面去執行

cpu 相當於人的大腦

記憶體：變數放在記憶體中是供電使用所以很快，斷電後不能儲存資料讀寫速度快 4g 8g 16g

硬碟：屬於外部儲存，永久儲存資料，斷點依然儲存讀寫速度慢

1gb = 1024mb

1tb = 1024gb

關於編輯器vscode 的幾個知識視口與 ie

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- 移動端視口-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 讓我們的ie 瀏覽器用 edge 模式顯示-->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>
視口與相容後面會講到
複製程式碼

js語言介紹

js是執行在客戶端的語言指令碼語言script 指令碼語言：不需要編譯，執行過程中由直譯器逐行來進行解釋的

瀏覽器核心分成兩部分渲染引擎和 js 引擎，由於js 引擎越來越獨立，核心就傾向於指渲染引擎

渲染引擎：用來解析HTML,CSS俗稱核心，

重要

JavaScript語法 
 DOM 文件物件模型 可以對頁面上的各種元素進行操作大小位置顏色等
 BOM 瀏覽器物件模型 可以操作視窗，比如彈窗，控制瀏覽器跳轉獲取解析度
複製程式碼

js 創始人布蘭登。艾克 10天建立了 js

程式語言分為解釋型語言和編譯型語言

js 是解釋型語言 java是編譯型語言

js 基礎語法

理解： 
掌握js 三種書寫位置和註釋 
能用自己的話解釋變數與資料型別概念
能說出常見的資料型別
算數運算子和自增自減

三種輸入框方法是帶括號的 
alert()方法
console.log()方法
prompt()方法
複製程式碼

js 也是有三種寫法的行內外鏈內嵌

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
/*內嵌樣式 */
<script>
alert('你好嗎')
</script>

/*外鏈樣式謹記 script 裡面不能填寫內容*/
<script type="text/javascript" src=""></script>
</head>
<body>
/*行內式寫法，行內使用雙引號,使用中文需要新增單引號,原則是外雙內單*/
<input type="button" value="點選一下" onclick="alert(1)">
<input type="button" value="點選一下" onclick="alert('你好')">
</body>
</html>
複製程式碼

// 註釋 單行註釋
/*多行註釋*/
複製程式碼

變數

變數的目的：一次宣告，多次呼叫，非常方便

什麼是變數：
通俗：變數就是一個裝東西的盒子
概念：變數是用於存放資料的容器，裡面的資料我們可以多次使用，甚至資料可以修改
本質：變數是程式在記憶體 中申請的一塊用來存放資料的空間


變數的使用：
變數的使用分為2步
1、宣告變數，變數的名字用來區分每個存放的容器
2、賦值 先宣告在賦值 使用var 用來宣告變數 variable 變數的意思

//1、宣告var num變數宣告 
//2、賦值var num = 10;變數的初始化 宣告+ 賦值
var num= 10 ； 
var num 賦值 10等號是 賦值
複製程式碼

以前是 1+1=2

現在在計算機裡面計算是先算右面再算左面 2 = 1 + 1

變數使用注意點：
只宣告不賦值var ageconsole.log(age) //undefined
不宣告 不賦值 直接使用 console.log(age) //報錯
不宣告 只賦值 age = 10 console.log(age) //10 不推薦這樣寫
複製程式碼

<script>
varnum = 10
console.log(num);
num = 20;
console.log(num);
</script>

變數內部值的更改
一個變數被重複賦值後它原有的值會被覆蓋，以最後一次賦值的值為準
複製程式碼

/*
語法擴充套件 宣告多個變數
varnum1,num2,num3;
num1 = 10'
*/
varnum1,num2,num3;
// num1 = num2 = num3 = 10;值相同的情況下 

/* 值不同的情況下 第一種寫法
num1 = 10;
num2 = 20;
num3 = 30;
*/

/* 值不同的情況下 第二種寫法 一個 var進行宣告 使用逗號隔開， 最後以分號結束
var num1 = 10,
num2 = 20,
num3 = 30;
*/
複製程式碼

變數命名規則和規範

規則 必須準守， 不遵守的話js引擎發現並報錯
由字母 A-Za-z 數字 0-9 下劃線(_)美元符號($)組成如 var usrAge num01 _name
** 區分大小寫 強調：js 嚴格區分大小寫 var app 和 VAR APP 是兩個變數
**不能以數字開頭
**不能是關鍵字，保留字和程式碼符號 列如 var，for while&

 規範 建議遵守，不遵守的話js引擎也不會報錯
 規範相當於人類社會的道德
 變數名必須有意義
 遵守駝峰命名法，首字母小寫，後面單詞的首字母需要大寫 userName userPassword
複製程式碼

練習案例重點 **

交換兩個變數的值(實現思路：使用一個臨時變數用來做中間儲存)

var num1 = 'num1的值10';
var num2 = 'num2的值20';

var num3 = num1;
var num1 = num2;
var num2 = num3;

console.log(num1,num2);
//console.log(num1);

輸出之後就會發現變數已經被交換,因為使用了三方的變數進行儲存交換

複製程式碼

重點變數小結

1、變數是記憶體裡的一塊空間，用來儲存資料，變數就是一個小盒子儲存資料,方便我們以後使用裡面的資料，呼叫，修改，
2、我們使用變數的時候，一定要宣告變數，並且賦值，一次儲存多次使用
3、變數名儘量要規範，見名知意 
複製程式碼

資料型別介紹

1、什麼是資料型別？
 答案：所有變數都具有資料型別，以決定能夠儲存那種資料，比如'名字' 和年齡 18 這些資料型別是不一樣的
 
2、變數屬於那種資料型別？
 答案：在程式碼執行時，由js引擎根據 = 右邊 變數值的資料型別 來判斷
 
var num = 10; //這是數值型
var str = '你好'; //這是一個字元型

//數值的最大值 
console.log(Number.MAX_VALUE);
//數值的最小值
console.log(Number.MIN_VALUE);

//無窮大
console.log(Infinity);
//無窮小
console.log(-Infinity);
//不是一個數字 not a Number 非數字都是 nan
console.log(NaN);

isNaN()不是數值，返回true 是數值型別的返回 false
var age = 'asd';
var isage = isNaN(age);
console.log(isage); 這裡不是一個數字返回 true 
console.log(isNaN(age));
複製程式碼

布林型

var flag = true;//正確真
var flag = false; //錯誤的 假
複製程式碼

拼接字串

在html中屬性是寬高

var str = 'abc';
console.log(str.length);// 3
在js 中想要知道一個屬性長度需要加上長度，length，謹記 空格也算一個空字元長度。


在ajax中資料互動，我們把資料傳到後臺，後臺返還給我們 拼接字元

console.log(1+1); //數值相加 
console.log('你好' + '嗎'); //字元相連
console.log('你好' + 18); //只要有字元就會相連 打印出： 你好18
複製程式碼

輸入年齡的案例

var age = prompt('請輸入你的年齡');
alert('你填的是多少'+ age +'歲'); 


步驟：
1、頁面開啟會彈出一個輸入框
2、使用者輸入年齡，我們儲存這個年齡資料
prompt('請輸入您的年齡');使用者點選確定後儲存至，點選取消返回空值
3、彈出提示框提示多少歲了
複製程式碼

NaN 不是一個數字

console.log(11 + NaN)

除了一個字串，任何數字加上NaN都是NaN

總結 + 口訣

數值相加 字元相連 NaN除了字元都是NaN

Number : js中的數值型別變數 可以儲存 整型數值 和浮點型數值 

String ： 字串用單引號 雙引號都可以 ，但是前段開發統一規範使用單引號 var usrName = '字串值';
多個字串可以用 + 號相拼接
length 屬性獲取字串長度
轉義符

Boolean: 布林值 用true和false

Undefined: 聲明後未賦值的變數的預設值

Null : 空物件 

可以用typeof 獲取資料型別

chrome瀏覽器字串顯示黑色 ，數值型別藍色，布林值也是藍色undefined 和null是灰色的
複製程式碼

變數的資料型別共五種

var num = 10;
var str = 'nihao';
var flag = true;
var de = undefined;
var nu = null;//空 打印出物件 bug 
var obj = new Object();

下面是typeof 的兩種寫法

console.log(typeof num);
console.log(typeof(num));


console.log(typeof str);
console.log(typeof(str));


console.log(typeof flag);
console.log(typeof(flag));


console.log(typeof de);
console.log(typeof(de));


console.log(typeof nu); //打印出 obj是bug
console.log(typeof(nu));


console.log(typeof obj);
console.log(typeof(obj));
複製程式碼

資料型別轉換重要轉換成字元型

就是把一種資料型別的變數轉換成另外一種資料型別 
 通過呼叫系統函式進行型別轉換，主要分3 類 ： 轉 字串，轉數值，轉布林 

方式 說明
 轉換為字串 
 toString() to 是去的意思把變數轉換成字串
 String()強制轉換把特殊值轉成字串
 加號拼接字串把字串拼接 的結果都是字串

var num = 19;
// var str = num.toString();
var str = num.toString(2); //裡面書寫了2數值程式設計了2進位制
console.log(str);

使用String 進行轉換
console.log(String(10));

使用加號進行拼接的方法
console.log(110 + '');

使用減法進行隱式轉換
console.log(19 - '18');

使用方法：區別
XX.toString()String()包含在裡面+ 加號進行拼接，-使用減號進行隱式轉換
複製程式碼

資料型別轉換重要轉換成數字型別

表單獲取過來的資料預設是字串，我們需要轉換為數值型

方式  說明

parseInt()函式將String 型別引數轉成整數重點
parseFloat()函式將String 型別引數轉成浮點數重點
Number()強制轉換函式 將String 型別引數轉成浮點數 重點


var str = '18';
console.log(typeof str);//這裡判斷是什麼型別 這裡是String 型別

var num = parseInt(str);//使用 parseInt 進行轉換 
console.log(typeof num);//這裡在控制檯輸出看看到底列印的是什麼型別 Number 型別
console.log(num); //列印那個值

varstr = '189';
console.log(parseFloat(str)); //顯示數值型別的 189

console.log(parseInt(12.91)); //取整這裡顯示的是12後面的小數會捨去

console.log(parseFloat(12.91));//小數函式 不會四捨五入

console.log(Number(12.9));// 顯示12.9

console.log(Number(true));//true 顯示1false顯示 0
console.log(Number(false)); //0
console.log(Number(null)); //0 
console.log(Number(undefined)); // NaN Not a Number不是一個數字
console.log(Number(''));//0


console.log(parseInt('12abc')) //會顯示數值12

console.log(parseFloat('abc12'))//會顯示NaN

弱資料型別的特點 - * / 都可以做隱式轉換
console.log( 2 * '4');
利用js 的弱型別的特點，只進行了算數運算，實現了字串到數字的型別轉換，不推薦
複製程式碼

轉換為布林值 Boolean

Boolean 函式一共五中情況下會為false 代表空否定的值會被轉換為false 有五種類： "" ,0 NaN, null undefined

謹記這五種型別是假的 其餘的都是true 真的 
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(null));
console.log(Boolean(NaN));
console.log(Boolean(undefined));

擴充套件內容：!!有興趣的可以列印看一下兩個!!是布林值的意思，一個布林值是取反
console.log(!! null);
console.log(!! undefined);
複製程式碼

運算子加，減，乘，除，取，餘=(取模型)

運算子 描述 例項
+加 1+2 =3
-減2-1 =1
*乘2 * 5 = 10 
/除6 / 2 = 3
%餘9 % 2 = 1
複製程式碼

取餘用來判斷能否被整除，他的餘數是0

一元運算子正，負，!取反，還有++ 和 -- 也是一元

前置運算
++ 和-- 既可以放在變數的前面，也可以放在變數的後面
++ num 前自增，先自加後運算

謹記當++num自己在單獨的一行的時候無論前置與後置加加 都會自加1

var num = 1;
// num = num + 1;
++num;//每次自己增加1和上面的相等
++num;//實際開發中 單獨使用++ 
console.log(num); //等於2

前置++
var num = 5;
console.log(++num + 10); //16 
前置加加 先 自加 後運算

後置++
var num = 5；
console.log(num++ + 10) // 15 
num++ 後置加加:先原值運算 後自加

 總結 ：
++ 和 -- 運算子的目的可以簡化程式碼的編寫，讓變數的值 + 1 或者 -1；
單獨使用時，執行結果相同
與其他程式碼聯用時，執行結果會不同
後置：先原值運算 後置加
前置：先自加後運算

開發時：大多使用後置自增/減，並且程式碼獨佔一行
開發時:不要和其他程式碼聯用--會降低程式碼的可讀性



小練習 是練習 前置與後置加加的 
：demo 1
vara =10;
 ++a;//11
 var b =++a + 2;//14
 console.log(b) //14
 
小練習 ：demo 2
varc = 10;
c++; //11
var d = c++ + 2;
console.log(d)//13 
複製程式碼

實戰案例的Demo

案例1：
計算年齡彈出一個框，輸入我們的出生年份，能計算出我們的年齡

var num = Number(prompt('請輸入您的年齡'));
var age = 2019 - num;
alert('您的年齡是'+ age);
console.log(age);


步驟：
1、彈出框輸入出生年份prompt
prompt('請輸入您的出生年份');
2、得到這個值，並且儲存起來
var year = prompt('請輸入您的出生年份');
這裡的year 拿過來的是字元型的
3、用今年減去剛才得到的年份，就能算出來
var result = 2019 - year;
這裡使用2019 減去 使用了隱式轉換 數值型 
4、彈出得到年齡的框
alert('您的年齡是'+result)
複製程式碼

案例2：

計算兩個數的值，使用者輸入第一個值，技術彈出輸入第二個值，最後彈出結果

案例：轉換
var number1 = Number(prompt('請輸入第一個值'));
var number2 = Number(prompt('請輸入第二個值'));

var result = number1 + number2;
alert('您輸入的結果是' + result);


步驟： 
1、先彈出第一個輸入框，使用者輸入第一個值
var num1 = prompt('請輸入第一個值');
2、在彈出第二個框，使用者提示輸入第二個值
var num2 = prompt('請輸入第二個值');
3、我們把這兩個值進行相加 (有坑字元型 字元相連 需要轉換數值型)
var result = parserFloat(num1)+parseFloat(num2);
4、彈出結果
alert('列印結果是' + result);
複製程式碼

練習題三：一次詢問年齡並且獲取使用者姓名，年齡，性別，打印出來，並且換行

var name = prompt('請輸入您的姓名');
var age = prompt('請輸入您的年齡');
var sex = prompt('請輸入您的性別'); 

console.log(name + age + sex);

alert(name + '\n' +age + '\n' + sex )複製程式碼

前端零基礎 JS 教學 第一天 01 - day 變數與資料型別

關於編輯器vscode 的幾個知識 視口 與 ie

js語言介紹

重要

程式語言分為 解釋型語言和編譯型語言