回顧
1. css概述
作用：美化網頁
2. css基礎語法（看懂）
html引入css
1）行內樣式
2）內部樣式
3）外部樣式：<link/>
書寫規範
選擇器{樣式名:樣式值;}
基本選擇器
標籤{css樣式}
.class{css樣式}
#id{css樣式}
擴展選擇器
並集
後代
父子
屬性
3. css常用樣式
文字和字體
背景
顯示
浮動
盒子模型
4. 案例：黑馬旅遊網註冊頁面
手動搭建html表格和form表單，通過class選擇引入css樣式
5. js概述
作用：頁面交互
這哥們是瀏覽器可以直接解釋運行的弱類型腳本語言
6. js基礎語法
html引入js
1）內部腳本
2）外部腳本
js變量聲明
let 聲明變量
const 聲明常量
js數據類型
基本：
1）number
2）string
3）boolean
4）undefined
引用：
new
JS基礎
今日目標
1. js基礎語法
2. js函數（方法）
3. js事件【重點】
與用戶產生交互
4. js內置對象
一 JavaScript基礎語法【記住不同點】
1.1 JS運算符
js與java的運算符一樣，什麼算數運算符、賦值運算符、邏輯運算符等等，不需要死記硬背，寫程序會用就行：
1. 算數運算符
+ - * / % ++ --
2. 賦值運算符
= += -= *= /=
3. 比較運算符
> < ==(===) !=(!==)
4. 邏輯運算符
&& || !
5. 三元（目）運算符
條件表達式？爲真:爲假
關注js與java區別的運算符
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-JS運算符</title>
</head>
<body>
<script>
// 算數運算符
// 在js中數值可與字符串進行數學運算，底層實現隱式轉換
let a = 10; // number
let b = '4'; // string
console.log(a + b); // 104 字符串拼接
console.log(a - b); // 6
console.log(a * b); // 40
console.log(a / b); // 2.5 保留小數位
// 比較運算符
let c = '10'; // string
console.log(a == c); // true 比較的是內容
console.log(a === c); // false 比較類型+內容
// != 比較的是內容
// !== 比較類型+內容
</script>
</body>
</html>
1.2 JS流程控制
高級語言中的三種基本結構：順序、分支、循環
① 條件判斷
1. if判斷
if (條件表達式) {
代碼塊;
} else if(條件表達式) {
代碼塊;
} else {
代碼塊;
}
2. switch判斷
switch(條件表達式){
case 滿足條件1 :
代碼塊 break;
case 滿足條件2 :
代碼塊 break;
default:
默認代碼塊;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-條件判斷</title>
</head>
<body>
<script>
/*
條件表達式
1）布爾型
2）數值型：非0爲真
3）字符串：非空串爲真
4）變量：null 和 undefined 都爲假
*/
let flag = true;
flag = 15;
flag = " ";
flag = null;
flag;
if(flag){
console.log("滿足條件");
}else{
console.log("不滿足條件");
}
</script>
</body>
</html>
② 循環語句
1. 普通for循環
for(let i= 0; i<10; i++){
需要執行的代碼;
}
2. 增強for循環
for(let obj of array){
需要執行的代碼;
}
3. 索引for循環
for(let index in array){
需要執行的代碼;
}
4. while循環
while (條件表達式) {
需要執行的代碼;
}
5. do..while循環
do{
需要執行的代碼;
}while(條件表達式);
6. break和continue
break: 跳出整個循環
continue：跳出本次循環
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-循環語句</title>
</head>
<body>
<script>
let arr = ['陳一發','張琪格','馮提莫'];
// 普通for
for(let i = 0 ; i <arr.length; i++){
console.log(arr[i]);
}
// 增強for
for(let ele of arr){
console.log(ele);
}
// 索引for
for(let index in arr){
console.log(index);
console.log(arr[index]);
}
</script>
</body>
</html>
二 JS函數【方法】
功能：js函數用於執行特定功能的代碼塊，爲了方便理解也可以稱爲js方法
2.1 普通函數【重點】
語法
function 函數名(參數列表){
函數體;
[return 返回值;] // 中括號意思表示內容可以省略....
}
js不支持方法重載，重名的會被覆蓋…
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-普通函數</title>
</head>
<body>
<script>
// 二個數求和
function sum(a, b) {
// console.log(a + b); 無返回值
return a + b;
}
// 三個數求和
// NaN：not a number 這不是一個數
// js是弱類型語言，不支持方法重載，重名的方法會覆蓋
// js函數定義的參數個數，可以與實際調用的參數個數不同....
function sum(a, b, c) {
// js函數體內置 arguments [] 數組對象，獲取實際調用者的參數值
console.log(arguments);
console.log(arguments[3]); // 可以獲取第四個參數
return a + b + c;
}
// 我確實不知道傳遞一個參數.... 可變參數本質就是一個數組...
function sum(... args){
console.log(args);
}
// 調用方法
let resut = sum(5,6,7,8);
// console.log(resut);
</script>
</body>
</html>
2.2 匿名函數
通常與事件結合使用，咱們現在先來看一下語法。。。。
function (參數列表){
函數體;
[return 返回值;] // 中括號意思表示內容可以省略....
}
2.3 案例：輪播圖
需求
一共5張圖片，實現每過3秒中切換一張圖片的效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-案例：輪播圖</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<!--
輪播圖
預習:
DOM知識點：document.getElementById(id屬性值) 獲得指定id的標籤對象
setInterval(函數,間隔時間) 每隔固定間隔時間(毫秒)執行一次函數
-->
<div>
<img id="myImg" src="../img/0.jpg" width="500px">
</div>
<script>
// 通過dom獲取img標籤的js對象
let img = document.getElementById("myImg");
console.log(img);
console.log(img.src); // 獲得img標籤的src屬性值
// 圖片編號
let num = 1;
// 定義一個修改圖片的方法
function change() {
img.src = '../img/' + num + '.jpg'
if (num == 4) {
num = 0
} else {
num++;
}
}
// 每間隔三秒，觸發此方法
setInterval('change()', 3000);
// 每間隔一秒，向控制檯輸出一句話
// '' 相當於 script 標籤
// setInterval('console.log("你好啊");',1000);
</script>
</body>
</html>
三 JS事件【重點】
功能：JS可以監聽用戶的行爲,並調用函數來完成用戶交互功能.
3.1 常用事件
1. 點擊事件：
1. onclick：單擊事件
2. ondblclick：雙擊事件
2. 焦點事件
1. onblur：失去焦點
2. onfocus:元素獲得焦點。
3. 加載事件：
1. onload：頁面加載完成後立即發生。
4. 鼠標事件：
1. onmousedown 鼠標按鈕被按下。
2. onmouseup 鼠標按鍵被鬆開。
3. onmousemove 鼠標被移動。
4. onmouseover 鼠標移到某元素之上。
5. onmouseout 鼠標從某元素移開。
5. 鍵盤事件：
1. onkeydown 某個鍵盤按鍵被按下。
2. onkeyup 某個鍵盤按鍵被鬆開。
3. onkeypress 某個鍵盤按鍵被按下並鬆開。
6. 改變事件
1. onchange 域的內容被改變。
7. 表單事件：
1. onsubmit 提交按鈕被點擊。
3.2 事件綁定
將事件與html標籤進行綁定，實現交互功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-事件綁定</title>
</head>
<body>
<input type="button" value="普通函數" onclick="show()"> <br>
<input type="button" value="匿名函數" id="myBtn"> <br>
<script>
// 單擊事件
// 普通函數 此種方案有耦合性....
function show() {
alert('我是普通函數觸發的事件...')
}
// 匿名函數
// 通過dom技術獲得按鈕標籤的js對象
/* let myBtn = document.getElementById('myBtn');
myBtn.οnclick=function () {
alert('我是匿名函數觸發的事件...')
}*/
document.getElementById('myBtn').onclick=function () { // 鏈式編程...
alert('我是匿名函數觸發的事件...');
}
</script>
</body>
</html>
3.3 案例：頁面交互
需求
給頁面表單控件綁定對應事件，實現交互功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-案例：頁面交互</title>
</head>
<body>
<!--
常用事件
1. onload 頁面加載完成
2. onfocus 獲取焦點
3. onblur 失去焦點
4. onchange 表單控件的值改變時
5. onclick 鼠標單擊
-->
姓名 <input type="text" id="userName" ><br/>
學歷
<select name="edu" id="edu">
<option value="0">請選擇</option>
<option value="1">本科</option>
<option value="2">大專</option>
</select>
<br/>
<button id="btn" >按鈕</button>
<script >
// js代碼的執行自上而下...(順序結構)
//1. onload 頁面加載完成後，觸發的事件
window.onload=function () {
console.log("頁面加載完成.....") // 這哥們放到哪，都是最後執行.....
}
console.log("哈哈，我是外部的內容")
//2. onfocus 獲取焦點
// this 當前對象
document.getElementById('userName').onfocus=function () {
// document.getElementById('userName').value='獲得焦點';
this.value='獲得焦點';
}
//3. onblur 失去焦點
document.getElementById('userName').onblur=function () {
this.value='失去焦點';
}
//4. onchange 表單控件的值改變時
document.getElementById('edu').onchange=function () {
alert(this.value) // 獲得當前選中的某一個具體的value值
}
//5. onclick 鼠標雙擊
document.getElementById('btn').ondblclick=function () {
alert('我是雙擊事件...')
}
</script>
</body>
</html>
四 JS常用內置對象【知道】
4.1 String 對象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-字符串</title>
</head>
<body>
<!--
1. 構造字符串對象可以使用
雙引號,單引號,反引號
2. 字符串常用方法
substring(startIndex,endIndex) 提取字符串中兩個指定的索引號之間的字符。 包頭不包尾
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
split() 把字符串分割爲字符串數組。
trim() 去掉首尾空格
-->
<script type="text/javascript">
// ------------ 1. 構造字符串對象可以使用 雙引號,單引號,反引號
// 雙引號
let str1 = "我是字符串";
console.log(str1);
// 單引號
let str2 = '我是字符串';
console.log(str2);
// 反引號（重音符） 簡化字符串的拼接
let str3 = `我是字符串`;
console.log(str3);
// 女性角色：只要998，保證讓你xxxx
let num = 998;
let cishu = 3;
let str4 = '只要'+998+'，保證讓你xxx';
let str5 = `只要 ${num}，保證讓你xx , ${cishu}`;
console.log(str5);
// ------------ 2. 字符串常用方法
// substring
let str = '我愛我的祖國';
console.log(str.substring(4, 6));
</script>
</body>
</html>
4.2 Array 對象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11-數組</title>
</head>
<body>
<!--
數組
查詢手冊完成:
1. 創建數組
let array = [元素1，元素2，元素3]; -- 推薦
let array = new Array(元素1，元素2，元素3);
特點：數組元素的類型任意，數組的長度任意，當做java的list集合
2. 數組常用方法
concat() 連接兩個或更多的數組，並返回結果。
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
pop() 刪除並返回數組的最後一個元素
join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
與 字符串.split()切割爲數組 方法相反
sort() 對數組的元素進行排序
-->
<script>
//1. 創建數組
let arr1 = ['詹姆斯·高斯林','布蘭登·艾奇','未來的你們',true];
console.log(arr1);
let arr2 = new Array('賈克斯',5,new Date());
console.log(arr2);
//2. 數組合並
let concatArr = arr1.concat(arr2);
console.log(concatArr);
//3. 添加元素
concatArr.push('我是新元素');
console.log(concatArr);
//4. 刪除元素
concatArr.pop();
console.log(concatArr);
//5. 數組元素拼接爲字符串
console.log(concatArr.join('-'));
//6. 排序數組元素
let arr3 = [3,1,7,5];
console.log(arr3.sort()); // 升序
console.log(arr3.sort().reverse()); //降序
// 指定sort() 排序規則
console.log(arr3.sort(function(a,b){return a-b})); // 升序
console.log(arr3.sort(function(a,b){return b-a})); // 降序
</script>
</body>
</html>
3.4 Date 對象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12-日期</title>
</head>
<body>
<!--
日期
let date = new Date();
-->
<script>
let date = new Date();
console.log(date);
console.log(date.toLocaleString()); // 轉換爲本地日期格式的字符串
console.log(date.getFullYear()); // 年 四位
console.log(date.getMonth()+1);// 月 範圍：0~11
console.log(date.getDate()); // 日
console.log(date.getTime()); // 1970年~今毫秒值
</script>
</body>
</html>
4.4 Math 對象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-數學</title>
</head>
<body>
<body>
<!--
數學運算
查詢手冊完成
1. 四捨五入 round()
2. 向下取整 floor()
3. 向上取整 ceil()
4. 產生隨機數 random() ：返回 [0,1) 之間的隨機數。 [0,1) 左閉右開區間,包含0不包含1 （含頭不含尾）
-->
<script >
let n = 1234.567;
//1. 四捨五入取整
console.log(Math.round(n));
//2. 向下取整
console.log(Math.floor(n));
//3. 向上取整
//4. 產生隨機數
console.log(Math.random());
//5. 產生 [1,100]的隨機整數
console.log(Math.floor(Math.random() * 100+1));
</script>
</body>
</html>
4.5 全局函數
我們不需要通過任何對象，可以直接調用的就稱爲全局函數
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14-全局函數</title>
</head>
<body>
<!--
全局函數
1. 字符串轉爲數字
parseInt() 解析一個字符串並返回一個整數。
parseFloat() 解析一個字符串並返回一個浮點數。
特點：從第一個字符開始轉換，遇到非數值字符停止轉換....
NaN not a number 這不是一個數 （這哥們六親不認）
isNaN() 判斷一個字符串 如果不是數值返回true 否則返回false
2. 對字符串編碼和解碼
encodeURI() 把字符串編碼爲 URI。
decodeURI() 解碼某個編碼的 URI 。
3. 把字符串當做js表達式來執行
eval() 計算 JavaScript 字符串，並把它作爲腳本代碼來執行。
-->
<script >
// 1. 字符串轉爲數字
let str = '1314.1234';
console.log(parseInt(str)); // 1314
console.log(parseFloat(str)); // 1314.1234
console.log(NaN == NaN ? '相等' : '不等');
console.log(isNaN(str));
// 2. 對字符串編碼和解碼
let name = "明天下午二點偷襲珍珠港";
let encodeStr = encodeURI(name);// 編碼
console.log(encodeStr);
console.log(decodeURI(encodeStr));// 解碼
// 3. 把字符串當做js表達式來執行
eval('alert(1)'); // 將字符串識別爲js的一個腳本片段
</script>
</body>
</html>
