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