其實前端就是 一共三步驟 : 1、獲取資料,2、處理資料 3、展示資料
本人記錄使用的工具是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 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 )複製程式碼