回顾
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>
