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

我想靜靜刁民發表於2019-02-07

其實前端就是 一共三步驟 : 1、獲取資料,2、處理資料 3、展示資料

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

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

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

電腦 基本介紹:

軟體共分為兩類: 系統軟體, 應用軟體

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

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 age  console.log(age) //undefined
	不宣告 不賦值 直接使用 console.log(age) //報錯
	不宣告 只賦值 age = 10 console.log(age) //10 不推薦這樣寫
複製程式碼
<script>
	var  num = 10
	console.log(num);
	num = 20;
	console.log(num);
</script>

變數內部值的更改
    一個變數被重複賦值後它原有的值會被覆蓋,以最後一次賦值的值為準
複製程式碼
/*
語法擴充套件 宣告多個變數
    var  num1,num2,num3;
	num1 = 10'
*/
   	var  num1,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); //列印那個值

var  str = '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 顯示  1  false顯示 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
         var  a =  10;
	 ++a;  //11
	 var b =  ++a + 2;  //14
	 console.log(b) //14
	 
小練習 :demo 2
	var  c = 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 )複製程式碼

相關文章