1、概念：
是一門客戶端的腳本語言，每一個瀏覽器都有JavaScript的解析引擎
*腳本語言：不需要編譯，直接可以被瀏覽器解析執行
2、功能：
可以增強用戶和 html 的交互過程，可以控制html元素，增強用戶體驗
3、JavaScript的發展史：
1. 1992年，Nombase公司，開發出第一門客戶端腳本語言，專門用於表單的校驗，命名爲：C—,後更名爲：ScriptEase
2. 1995年 , Netscape ( 網景)公司，開發出一門客戶端腳本語言：LiveScript。後來，請SUN公司專家，修改LiveScript,命名JavaScript
3. 1996年，微軟借鑑（ChaoXi）JavaScript開發出JSscript
4. 1997年，ECMA（歐洲計算機制造商協會）,ECMAScript，就是所有客戶端腳本語言的標準
*JavaScript == ECMAScript + JavaScript （BOM + DOM）
4、ECMAScript
*客戶端腳本語言標準
1.基本語法
1.與html結合方式
1.內部JS
* 定義<script>標籤,標籤體內就是js代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
內部JS
外部JS
-->
<script>
alert("hello world!");
</script>
<script src="../js01/a.js"></script>
</head>
<body>
</body>
</html>
2.外部JS
*定義<script>標籤，通過 src 屬性引用外部 js 文件
2.註釋
單行注註釋：//
多行註釋：/*註釋*/
3.數據類型
1.number：數字。整數/小數/NAN（not a number：不是一個數字的數字類型）
2.string：字符串。字符串 “abc” “a” ‘abc’
3. boolean：true 和 false
4.null：一個對象爲空的佔位符
5.undefined ：未定義。如果一個變量沒有給初始化值，則會被賦值爲undefined
4.變量
*變量：一小塊存儲數據的內存空間
*Java語言是強類型語言，而JavaScript是弱類型語言
*強類型：在開闢變量存儲空間時候，定義了空間將來存儲的數據的數據類型，只能存儲固定類型的數據
*弱類型：在開闢變量存儲空間的時候，不定義空間將要存儲數據的數據類型，可以存任意類型數據
5.運算符
1.一元運算符：只有一個運算數的運算符（++ ,—,+（正號），-（負號））
*在JS中如果運算數不是運算符所要求的類型，那麼JS引擎會自動將運算數進行轉換，string轉number按照字面值轉換，如果字面值不是數字，則轉爲NaN
2.算術運算符：（+，-，*，/…）
3.賦值運算符：（=，+=，-=...）
4.比較運算符：（<,>,<=,>=,==,===(全等於:在比較之前先判斷類型)）
5.邏輯運算符：（&&，||，！）
*其他類型轉boolean (1.number：0或NaN爲假，其他爲真 ，2.string：除了空字符串””爲false 其他都爲true ，3.null && undefined都是false ，4.對象：所有對象都爲true)
6.三元運算符：（？：）
7.特殊語法：
1.語句一行只有一個，可不加分號（不建議）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = 3
alert(3)
</script>
</head>
<body>
</body>
</html>
2.變量定義使用 var 也可以不使用（用：局部變量；不用：全局變量）
6.流程控制語句
1. if…else
2. switch
*在Java中，switch可以接收的數據類型(byte,short,int,long,enum,String)
*js中可以接收任意數據類型
switch(){
case()
//…
break;
default
break;
}
2.基本對象
1.Function：函數（方法對象）
1.創建：
1.var fun = new Function(形參列表，方法體)；
2.function 方法名稱（形參列表）{
// 方法體
}
3.var 方法名 = function(形參列表){
// 方法體
}
2.方法
3.屬性
4.特點
1.方法定義時，形參類型不用寫
2.方法是一個對象，同名方法會覆蓋
3.在JS中，方法的調用只和方法的名稱有關，和參數列表無關
4.在方法聲明中有一個隱藏的內置對象（數組），arguments,封裝所有的實際參數
5.調用：
方法名稱（實際參數列表）；
/*
Function：函數（方法對象）
1.創建：
1.var fun = new Function(形參列表，方法體)；
2.function 方法名稱（形參列表）{
// 方法體
}
3.var 方法名 = function(形參列表){
// 方法體
}
2.方法
3.屬性
4.特點
1.方法定義時，形參類型不用寫
2.方法是一個對象，同名方法會覆蓋
3.在JS中，方法的調用只和方法的名稱有關，和參數列表無關
4.在方法聲明中有一個隱藏的內置對象（數組），arguments,封裝所有的實際參數
5.調用：
方法名稱（實際參數列表）；
*/
// 創建方式1
/*var fun1 = new Function("a","b","alert(a);");
// 調用方法
fun1(3,4);*/
// 創建方式2
/*function fun2(a,b){
alert(a+b);
}
// 調用方法
fun2(3,4);*/
// 創建方式3
// var fun3 = function(a,b){
// alert(a * b);
// }
// // 調用方法
// fun3(3,4);
/*
*求兩數之和
*/
// function fun3(a, b){
// alert(a + b);
// }
// fun3(5,6);
/**
* 求任意數之和
*/
function fun4(){
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
return sum;
}
var sum = fun4(1,2,3,4,5);
alert(sum);
2.Array：數組對象
1.創建：
1.var arr = new Array(元素列表)；
2.var arr = new Array(默認長度)；
3.var arr = [元素列表]；
2.方法
1.join：將數組中的元素按指定的分隔符拼裝成字符串
3.屬性
1.length：數組的長度
4.特點
1.JS中元素類型是可變的，長度是可變的
var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [1,2,3,4];
var arr4 = new Array;
document.write(arr1 + "
");
document.write(arr2 + "
");
document.write(arr3 + "
");
document.write(arr4 + "
");
3. Math:數學
1.創建：
1.Math對象不用創建，直接使用：Math.方法名（）
2.方法：
1.random()：返回0～1之間的隨機數（含0不含1）
2.ceil()：對數進行向上舍入
3.floor()：對數進行向下舍入
4.round():對數進行四捨五入
3.屬性：
1.PI
/*
取1～100的隨機整數
*/
var a = (Math.floor(Math.random()*100)+1)
document.write(a)
4. RegExp：正則表達式對象
1.正則表達式：定義字符串組成規則
1.單個字符：[]
如：[a][ab][a-zA-Z0-9]
特殊符號代表特殊含義的單個字符：
\d：單個字符[0-9]
\w：單個字符[a-zA-Z0-9]、
2.量詞符號：
?：出現0次或1次
*：出現0次或多次
+：出現1次或多次
{m,n}:m<=數量<=n({m,}{,n})
3.開始結束符號
1.^：開始
2.$：結束
2.正則表達式對象
1.創建
1.var reg = new RegExp("正則表達式");
2.var reg = /正則表達式/;
2.方法
1.test(參數)：驗證指定字符串是否符合正則表達式定義
var reg1 = new RegExp("^\\w{6,12}$");
// var reg2 = /\w{6,12}/
// alert(reg1);
// alert(reg2);
var name = "zhangsan";
//驗證
var flag = reg1.test(name);
alert(flag);
DOM簡單學習：
*功能：控制html文檔的內容
*代碼：獲取頁面標籤（元素）對象Element
Document.getElementById(“id值”)：通過元素的id獲取元素對象
*操作Element對象
1.修改屬性值
1.明確獲取的對象是哪一個？
2.查看API文檔：找其中有哪些屬性可以設置
2.修改標籤體內容
*innerHTML
##事件的簡單學習
*概念：某些組件被執行了某些操作後，觸發某些代碼的執行
*如何綁定事件
1.直接在html標籤上，指定事件的屬性（操作），屬性值就是JS代碼
*事件：onclick---單擊事件
2.通過js獲取元素對象，指定事件屬性，設置一個函數。
#BOM：瀏覽器對象模型
1.概念：將瀏覽器的各個部分封裝成對象
2.組成：
Window：窗口對象
1.創建
2.方法
1、與彈出框有關的方法
1.alert()顯示帶有一段信息和一個確定按鈕的警告框
2.confirm()顯示帶有一段信息以及確認按鈕和取消按鈕的對話框
* 如果用戶點擊確定按鈕，方法返回true
* 如果用戶點擊取消按鈕，方法返回false
3.prompt()顯示可提示用戶輸入的對話框
*返回值：用戶輸入的信息
2、與打開和關閉有關的方法
1.open()打開窗口
2.close()關閉窗口（誰調用我我關誰）
3、與定時器有關的方法
1.setTimeout()在指定的毫秒數後調用函數或計算表達式
*參數：
1.js代碼或計算表達式
2.時間
2.clearTimeout()取消由setTimeout()方法設置的timeout
3.setInterval()按照指定的週期（毫秒計）來調用函數或計算表達式
4.clearInterVal()取消setInterval()設置的
3.屬性
4.特點
* Window對象不用創建可以直接使用：Window.方法名()
* Window引用可以省略 方法名()
*/
// window.alert("hahaha!");
// alert("hahahaha!");
//var flag = confirm("您確定要離開嗎？");
//alert(flag);
// if(flag){
// //退出操作
// }else{
// //提示:手別抖
// alert("手別抖！")
// }
//var message = prompt("請輸入用戶名");
//alert("輸入的用戶名："+message);
<body>
<!-- <input id="openBtn" type="button" value="打開新窗口" />
<input id="closeBtn" type="button" value="關閉新窗口" />-->
<script>
// //打開新窗口
// var button01 = document.getElementById("openBtn");
// var newwin01;
// var fun01 = function() {
// newwin01 = open("https://www.baidu.com");
// }
// button01.onclick = fun01;
// //關閉新窗口
// var button02 = document.getElementById("closeBtn");
// var fun02 = function() {
// newwin01.close();
// }
// button02.onclick = fun02;
//一次性定時器
function fun01(){
alert("boom~")
}
var id = setTimeout(fun01,3000);
clearTimeout(id);
//循環定時器
//setInterval(fun01,2000);
</script>
</body>
輪播圖：
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<script>
//1.修改src屬性
var number = 1;
function fun01(){
number ++;
if(number > 3){
number = 1;
}
//獲取img對象
var img = document.getElementById("img");
img.src = "../img/banner_"+ number +".jpg";
}
//2.設置定時器
setInterval(fun01,3000);
</script>
</head>
<body>
<img id="img" src="../img/banner_1.jpg" width="100%">
</body>
</html>
Navigator：瀏覽器對象
*Screen：屏幕對象
*History：歷史記錄對象
*Location：地址欄對象
1.創建（獲取）
1.window.location
2.location
2.方法
reload()：重新加載當前頁面，刷新
3.屬性
href
<html>
<head>
<meta charset="utf-8">
<title>location對象</title>
</head>
<body>
<input type="button" id="btn" value="刷新" />
<script>
//reload方法,定義一個按鈕,點擊按鈕刷新當前頁面
//1.獲取按鈕
var btn = document.getElementById("btn");
//2.綁定單擊事件
btn.onclick = function(){
//3.刷新頁面
location.reload();
}
//獲取href
var href = location.href;
alert(href);
</script>
</body>
</html>
自動跳轉：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自動跳轉</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
<script>
/**
* 分析：
* 1.顯示頁面效果
* 2.倒計時讀秒
* 2.1定義一個方法，獲取span標籤，修改spam標籤內容，時間
* 2.2定義一個定時器，一秒一次
*/
</script>
</head>
<body>
<p>
<span id="time">5</span>秒之後自動跳轉至首頁...
</p>
<script>
function showTime(){
var time = document.getElementById("time");
time.innerHTML--;
if(time.innerHTML == 1){
location.href = "https://www.baidu.com";
}
}
setInterval(showTime,1000);
</script>
</body>
</html>
##DOM：Document Object Model 文本對象模型
將標記語言文檔的各個組成部分，封裝成對象，可以使用這些對象，對標記語言文檔進行CURD操作
*W3C DOM標準被分爲3個不同的部分：
1.核心DOM--針對任何結構化文檔的標準模型
Document：文檔對象
Element：元素對象
Attribute：屬性對象
Text：文本對象
Comment：註釋對象
Node：節點對象，其他5個父對象
2.XML DOM--針對 XML 文檔的標準模型
3.HTML DOM--針對 HTML 文檔的標準模型