基礎 JS
用戶體驗：JS在用戶體驗方面功不可沒；
在真正的學習JS的過程之中，並沒有什麼炫酷的效果。
JAVASCRIPT：雷峯塔，nodejs做服務器
JAVA：雷鋒，做服務器
語言很弱小，平臺很強大。
變量：
Js裏面的變量是弱類型，聲明的時候不需要指定類型；
嚴格區分大小寫。
變量的聲明：
var聲明變量， let聲明變量；const聲明靜態變量；
變量的類型：
基礎類型：基礎類型裏面的數據是不能修改的
數字、字符串、布爾(true, false)、null、undefined
Undefined:聲明的變量沒有賦值，
聲明的函數沒有返回值，
訪問對象不存在的屬性，
訪問數組不存在的元素
Null：一切皆爲對象(Object)，萬物皆空。
引用類型：值可以直接修改
數組：本質就是對象；
對象：使用大括號，類（抽象）和對象（實例化）的關係；
JSON：也是對象類型
函數
構造函數：
函數名稱首字母大寫（推薦）；
事件
Js就是搞事情的；
事件三要素：
事件源：你操作的對象
事件:發生的動作
事件處理函數：具體要幹什麼，並實現什麼效果
事件：開燈
事件源：開關
事件：點擊
事件處理函數：接通火線
語法結構：
事件源.事件 = function（）{
具體的js代碼
}
獲取元素：
document.querySelector(‘選擇器’)
document.querySelectorAll(‘選擇器’)
定時器：
setTimeout
setInterval
雙色球搖獎：
1.六個紅球，一個藍球；
2.紅球取值範圍1-33，並且不能重複；
3.藍球取值範圍1-16,不存在重複問題。
4.搖獎的時候多個數字不斷的變換，最後確定一個；
代碼：
JS變量類型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>變量類型</title>
</head>
<body>
<script>
var a = 100;
var $A = 200;
console.log(a);
console.log($A);
// 獲取數據類型
console.log(typeof a);
var str = 'abc';
var name = '張3';
console.log(str, name);
console.log(typeof name);
var z;
console.log(z);
console.log(typeof null);
</script>
</body>
</html>
數組：
<script>
console.log(Math);
var arr = new Array(1,2,3,4,5);
console.log(arr);
// 數組元素的增刪改查
arr.push(6,7,8);//在最後
console.log(arr);
arr.unshift(0);//在開始位置
console.log(arr);
// 刪除元素
console.log(arr.pop());
console.log(arr);
console.log(arr.shift());
console.log(arr);
//萬能的
// arr.splice(start, count, n1, n2, n3);
var array = [100, 200, 300, 400, 500];
array.splice(2, 0, 'a', 'b');
console.log(array);
</script>
隨機抽取學生：
<script>
function rand(min, max){
return min + Math.round(Math.random()*(max-min));
}
// 隨機一個名字 顯示在指定位置
document.getElementById('btn').onclick = function(){
var students = [
{name:'孫1',gender:'女', age:18},
{name:'何2',gender:'女', age:18},
{name:'蔣3',gender:'男', age:18},
{name:'毛四',gender:'男', age:18},
{name:'康5',gender:'男', age:18}
];
var num = 0;
var sid = setInterval(function(){
var ind = rand(0, students.length-1);
var name = students[ind].name;
// 修改內容
document.getElementById('student').innerHTML = name;
num++;
console.log(num);
// 執行5次
(num == 5) && clearInterval(sid);
}, 103);
}
</script>
定時器：
<script>
setTimeout(function(){
console.log(1);
}, 3000);
setInterval(function(){
console.log(100);
}, 87);
</script>