前面學習了html與css，接下來學習JS（JavaScript與Java無關）。
web標準（網頁標準）分為3個部分：
1.html主要負責網頁的結構（頁面的元素和內容）
2.css主要負責網頁的表現（元素的外觀，位置等頁面樣式）
3.js主要負責網頁的行為（交互效果 ）
JavaScript是跨平臺，腳本語言（不用編譯，直接運行的語言）
JS主要負責控制網頁的行為，實現網頁的交互效果。
JS的組成（3個部分）
1.ECMAScript：規定了JS基礎語法的核心知識，包含：變量，數據類型，流程控制，函數，對象。
2.BOM：瀏覽器對象模型，用于操作瀏覽器，如：頁面彈窗，地址欄操作。
3.DOM：文檔對象模型，用于操作html文檔，改變標簽內容，改變標簽樣式。
JS的核心語法
1.JS的引入方法
（1）使用內部腳本：將JS代碼定義在html頁面中。
? ? ? ? JS代碼位于<script>? </script>標簽之間
? ? ? ? 在html文件中，可在任意地方，放置任意的<script>? </script>標簽
建議在html文件中，將<script>? </script>標簽放置在<body>的最下方
示例：
<body>
????????..........
? ? ? ? .........
????????<script>?
????????????????alert（‘hello world’）//彈出一個提示欄，顯示hello world
????????</script>
</body>
（2）使用外部腳本：新建text.js文件
? ? ? ? 在text.js文件中寫入 alert（‘hello world’）//彈出一個提示欄
? ? ? ? 在html文件中，引用js文件。<script src=“js/text.js”> </script>
示例：
在text.js文件
alert（‘hello world’）
在html文件中
<body>
????????..........
? ? ? ? .........
???????<script src=“js/text.js”> </script>
</body>
2.JS的基礎語法
（1）聲明變量
? ? ? ? JS中使用let聲明變量，JS是若類型語言，同一變量可存放不同類型的值。
<body>
????????..........
? ? ? ? .........
????????<script>?
? ? ? ? ? ? ? ? let a=20;
? ? ? ? ? ? ? ? a="hello";
????????????????alert（a）//彈出一個提示欄，顯示hello
? ? ? ? ? ? ? ? const PI=3.14;//使用const定義變量，定義后變量不可改變
? ? ? ? ? ? ? ? PI=3.2；//報錯
????????</script>
</body>
（2）數據類型
????????JS的數據類型分為兩種：基本數據類型和引用數據類型(對象)。
????????基本數據類型有5種，number（數字類型，包含整數，浮點數。NaN），boolear（布爾類型，只有true和false），null（為空），undefined（未初始化），string（字符串類型,推薦使用‘ ’單引號）。
? ? ? ? 使用typeof可獲取變量的數據類型。
<body>
????????..........
? ? ? ? .........
????????<script>?
? ? ? ? ? ? ? ? let name='Tom';
????????????????let age=20;
? ? ? ? ? ? ? ? console.log('你好，我是'+name+',我今年'+age+'歲了。')
????????????????console.log(`你好，我是${name},我今年${age}歲了。`)//可使用` `反引號，對字符串進行拼接，使用${ }。
? ? ? ? ? ? ? ? alert(typeof name); //獲取變量name的數據類型，為string（字符串）。
????????</script>
</body>
? ? ?
?（3）函數 function
? ? ? ? 函數：執行特定任務的代碼塊，方便程序的封裝復用。
JS中函數的定義
function My(參數1，參數2){
? ? ? ? ..............
}示例：
<body>
????????..........
? ? ? ? .........
????????<script>?
? ? ? ? ? ? ? ??function add(a，b){
? ? ? ? ????????????????return a+b;
????????????????}? ? ? ? ? ? ? ? let result=add(10,20);
????????????????console.log(result)
????????</script>
</body>
特殊的函數：匿名函數
方法1：
? ? ? ? let add=function（a，b）{
? ? ? ? ? ? ? ? return a+b；
????????}方法2：
????????let add=（a，b）=>{
? ? ? ? ? ? ? ? return a+b；
????????}
?（4）自定義對象
定義格式
let user={
????????name='Tom'，
????????age=20，
? ? ? ? gender=‘男’，
? ? ? ? ? ? ? ? sing：function（）{
????????????????????????alert(‘我的名字是’+this.name);
????????????????}
}
調用格式：
console.log(user.name);
user.sing();
?（5）json
json用于數據載體，用來存儲數據。
特點：層次分明，結構簡單
JS對象
{
? ? ? ? name=“Tom”,
? ? ? ? age=20,
????????gender="男"
}
json文本
{
? ? ? ? "name"=“Tom”,
? ? ? ? "age"=20,
????????"gender"="男"
}
JS對象->json文本 使用JSON.stringify()進行轉換
json文本->JS對象 使用JSON.parse()進行轉換
示例1
let person={
? ? ? ? name=“Tom”,
? ? ? ? age=20,
????????gender="男"
}
alert(person)? ? ? ? //彈出框，只能彈出[Object,Object,Object]
alert(JSON.stringify(person))? //彈出框，彈出{"name"=“Tom”,"age"=20,"gender"="男"}
示例2
let personJ='{"name"=“Tom”,"age"=20,"gender"="男"}'
alert(JSON.parse(personJ).name)? ?//彈出Tom
JS的事件監聽
? ? ? ? 事件：HTML事件是發生在HTML元素上的事情。如：按鈕被點擊，鼠標移動到元素上，按下鍵盤的按鈕。
? ? ? ? 事件監聽：JavaScript可以在事件1-觸發時，就立即調用一個函數，做出響應，被稱為“事件綁定”或“注冊事件”。
? ? ? ? 事件源：.addEventListener('事件類型'，事件觸發時執行的函數)
1.事件源：哪個元素觸發事件，就獲取哪個元素
2.事件類型：觸發事件的類型。如：鼠標點擊 click
3.事件觸發時，執行的函數
示例1
<body>
????????..........
? ? ? ? .........
? ? ? ? <input id="bin" type="button" value="點擊一下">
????????<script>?
? ? ? ? ? ? ? ? document.querySelector('#bin').addEventListener('click',()=>{
? ? ? ? ? ? ? ? ? ? ? ? alert('測試')；? ?
? ? ? ? ? ? ? ? })
????????</script>
</body>
示例二
鼠標移動，表格背景顏色改變
<body>
????????..........
? ? ? ? .........
????????<script>?
? ? ? ? ? ? ? ? let trs=document.querySelectorAll('br');? ? ? ? //獲取所有tr標簽元素
? ? ? ? ? ? ? ? for(let i=0;i<trs.length;i++){
? ? ? ? ? ? ? ? ? ? ? ? trs[i].addEventListener('moluseenter'.function(){? //鼠標進入
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.style.backgroundColor='#f2e2e2';????????//將顏色改為粉色
????????????????????????});
????????????????????????
????????????????????????trs[i].addEventListener('moluseleave'.function(){? ?//鼠標離開
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.style.backgroundColor='#fff';????????//將顏色恢復為白色
????????????????????????});
????????????????}
????????</script>
</body>
JS常見事件
1.鼠標事件
? ? ? ? click 鼠標單擊
????????moluseenter 鼠標進入
????????moluseleave 鼠標離開
2.鍵盤事件
? ? ? ? keydown 按鍵按下
? ? ? ? keyup 鍵盤抬起????????
3.焦點事件
? ? ? ? focus 聚焦組件
? ? ? ? blur 離焦組件
4.表單事件
? ? ? ? input 用戶輸入
? ? ? ? submit 表單提交觸發
![[藍橋杯]約瑟夫環](http://pic.xiahunao.cn/[藍橋杯]約瑟夫環)
)
