目录
知识点概述
1 JS的函数
1.1 函数的创建方式
-
声明式:解析器会先读取函数声明，并使其在执行任何代码之前可以访问；
function fn(x,y){
return x + y;
}-
匿名式:必须等到解析器执行到它所在的代码行才会真正被解释执行；
var fn=function(x,y){
return x + y ;
}-
Function 构造函数:从技术角度讲，这是一个函数表达式。一般不推荐用这种方法定义函数，因为这种语法会导致解析两次代码（第一次是解析常规ECMAScript代码，第二次是解析传入构造函数中的字符串），从而影响性能；
//new Function(arg1,arg2...,body)
var sum = new Function('x','y','return x + y ;')
sum(1,2) //3【案例】：分别基于JS函数三种创建方式，完成数据求和操作
1、创建day03-js静态工程
2、创建demo1.html页面，定义三种JS函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS三种函数定义方式</title>
<script type="application/javascript">
//声明式函数
function sum1(x,y){
return x + y;
};
//匿名式函数定义
var sum2=function (x,y) {
return x + y ;
}
//函数构造器
var sum3=new Function('x','y','return x + y ;');
//函数调用
var num1 =sum1(1,2);
var num2 =sum2(3,4);
var num3 =sum3(4,5);
//结果打印在浏览器控制台
console.log(num1);
console.log(num2);
console.log(num3);
</script>
</head>
<body>
</body>
</html>3、效果展示
2 JS的对象
2.1 String对象
字符串是 JavaScript 的一种基本的数据类型。string需要注意的是，JavaScript 的字符串是不可变的，String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。 字符串对象常用方法和创建方式介绍：
1. concat 拼接;
2. charAt:返回指定索引处的字符；
3. charCodeAt(0)返回指定字符的码值 (ASII码表);
4. indexOf(ch) 指定字符的位置 如果没有返回-1;
5. substring截取字符串 start:开始的索引值. end:结束的索引值 包括开始不包括结束 ;
字符串创建方式
1. 构造方法 new String（参数）；
2. 直接使用 var s= "hello";
【案例】：案例演示字符串对象常用方法
1、创建demo2.html页面
2、编写JS代码，调用字符串常用方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字符串对象</title>
<script type="text/javascript">
var s1= new String("hello");
var s2= "world";
//拼接字符串
console.log(s1.concat(s2));
//返回指定索引处的字符
console.log(s1.charAt(0));
//返回指定字符的码值 (ASII码表)
console.log(s1.charCodeAt(0));
//指定字符的位置 如果没有返回-1
console.log(s1.indexOf("h"));
//截取字符串 start:开始的索引值. end:结束的索引值 包括开始不包括结束
console.log(s1.substring(0,2));
</script>
</head>
<body>
</body>
</html>3、效果展示
2.2 Date对象
日期对象常用方法:
1. 将日期格式化：date.toLocaleString();
2. 得到年月日：date.toLocaleDateString();
3. 得到时分秒：date.toLocaleTimeString();
4. 得到年：date.getFullYear();
5. 得到月：date.getMonth();
6. 得到天：date.getDate();
7. 得到时：date.getHours();
8. 得到分：date.getMinutes();
9. 得到秒：date.getSeconds();
【案例】：案例演示日期对象常用方法
1、创建demo3.html页面
2、编写JS代码，调用日期对象常用方法
var date = new Date();
document.write(date);
document.write("<br>")
//格式化
document.write(date.toLocaleString())
//年月日
document.write("<br>")
document.write(date.toLocaleDateString())
document.write("<br>")
//时分秒
document.write(date.toLocaleTimeString())
var y = date.getFullYear();
var M = date.getMonth();
var d = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
document.write("<br>")
var str = y+"-"+(M+1)+"-"+d+" "+h+":"+m+":"+s;
document.write(str);3、效果展示
2.3 Math对象
Math对象常用方法:
1. 向上舍入（取整）：ceil(num);
2. 向下舍入（取整）：floor(num);
3. 四舍五入：round(num);
4. 次幂：pow(x,y);
5. 随机数：random();
【案例】：JS代码演示数学对象（Math）常用方法
1、定义demo4.html页面
2、JS演示数学对象方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Math数学对象</title>
<script>
//求绝对值
console.log(Math.abs(-1));
//向上取整
console.log(Math.ceil(3.2));
//向下取整
console.log(Math.floor(4.8));
//四舍五入
console.log(Math.round(4.2));
console.log(Math.round(4.9));
//获取随机数
console.log(Math.random());
</script>
</head>
<body>
</body>
</html>3、效果展示
2.4 Array对象
Array数组对象常用方法:
1. concat(数组名)方法：数组的连接;
2. join(str)：根据指定的字符分割数组;
3. push(arr):向数组末尾添加元素，返回数组的新的长度;
4. pop()：表示删除数组中最后一个元素，返回删除的那个元素;
5. reverse():颠倒数组中的元素的顺序;
【案例】：JS代码演示Array对象常用方法
1、定义demo5.html
2、编写JS代码，演示Array对象常用方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Array对象</title>
<script>
var arr1 = ["马玉","马毅","马云","马化腾"];
var arr2 = ["姚晨","姚明","姚笛","摇一摇"];
//数组的连接
document.write(arr1.concat(arr2));
document.write("<br>");
//根据指定的字符分割数组
document.write(arr1.join("❤"));
//向数组末尾添加元素，返回数组的新的长度
arr1.push("马冬梅");
document.write("<br>");
document.write(arr1);
//删除数组中最后一个元素，返回删除的那个元素
arr1.pop();
arr1.pop();
document.write("<br>");
document.write(arr1);
document.write("<br>");
//颠倒数组中的元素的顺序
document.write(arr1.reverse());
</script>
</head>
<body>
</body>
</html>3、效果展示
3 全局函数
3.1 全局变量和局部变量
全局变量：在JavaScript标签里定义一个变量，在js部分有效。
局部变量：在方法里面定义，只有在方法里面使用有效。
【案例】：代码演示全局变量和局部变量作用范围
1、定义demo6.html页面
2、编写JS代码，演示JS变量作用访问
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS全局变量&局部变量</title>
<script>
var a=10;
console.log("方法外输出："+a);
function show1(){
var b =20;
console.log("方法内输出："+a);
console.log("show方法里展示："+b);
}
show1();
console.log("show方法外展示："+b);//这行报错，错误原因b未定义
</script>
<script>
console.log("另一个标签输出："+a); // 出结果；还是a的值；
console.log("另一个标签展示展示："+b);//这行报错，错误原因b未定义
</script>
</head>
<body>
</body>
</html>3、效果展示
3.2 全局函数的使用
-
eval():将JavaScript字符串当作脚本来执行。
【案例】：演示eval处理字符串脚本
1、定义demo7.html
2、编写JS代码，演示eval处理字符串脚本
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>eval函数</title>
<script>
var str = "alert(1)";
eval(str);
</script>
</head>
<body>
</body>
</html>3、效果展示
-
parseInt(String,radix):将字符串转换成整数的值
【案例】：将字符串“100”转为数值类型
1、定义demo8.html页面
2、编写JS代码，将字符串“100”转为数值类型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>parseInt函数</title>
<script>
var a = "100";
document.write(a+":"+typeof(a));
document.write("<br/>");
//将字符串转为number类型
var b = parseInt(a);
document.write(b+":"+typeof(b));
</script>
</head>
<body>
</body>
</html>3、效果展示
-
isNaN(value):检测某个值是不是非数字。
【案例】：使用isNaN函数判断一个值是否是非数字
1、定义demo9.html页面
2、编写JS代码，使用isNaN函数判断一个值是否是非数字
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>isNaN函数</title>
<script>
//判断非一个数字 不是数字返回true
var c = "10hjhjj";
var d = isNaN(c);
alert(d);
</script>
</head>
<body>
</body>
</html>3、效果展示
小结：
1. 全局变量&局部变量
全局变量：在JavaScript标签里定义一个变量，在js部分有效。
局部变量：在方法里面定义，只有在方法里面使用有效。
2. 全局函数
eval():将JavaScript字符串当作脚本来执行
parseInt(String,radix):将字符串转换成整数的值
isNaN(value):检测某个值是不是非数字
encodeURI(uri):将字符串编码
decodeURI(uri)::将字符串解码
4 JS事件
JS事件是可以被JavaScript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息。
创建的事件有：
-
用户点击页面上的某项内容
-
鼠标经过特定的元素
-
用户按下键盘的某个按键
-
用户滚动窗口或改变窗口大小
-
页面元素加载完成或加载失败
4.1 点击事件
鼠标点击某个对象就是点击事件
【案例】：使用鼠标单击按钮，弹出“你好”
1、定义demo11.html
2、编写JS代码触发点击事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击事件</title>
</head>
<body>
<input type="button" value="点击" onclick="fun()">
<script type="text/javascript">
function fun() {
alert("你好");
}
</script>
</body>
</html>3、效果展示
4.2 改变事件
用户改变域的内容触发的事件就是改变事件。例如：用户切换了下拉选项
【案例】：定义下拉框，获取用户改变后的值
1、定义demo12.html页面
2、定义下拉框，绑定改变事件，获取用户切换下拉选项后的值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>改变事件</title>
</head>
<body>
<select name="education" id="edu" onchange="change()">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select>
<script type="text/javascript">
//改变事件
function change() {
//说明：document.getElementById("edu")作用：获取页面id="edu"的元素
console.log(document.getElementById("edu").value);
}
</script>
</body>
</html>
4.3 失去焦点事件
元素失去焦点时触发的事件 例如：用户鼠标离开表单输入框后触发的事件，就是失去焦点事件
【案例】：演示用户鼠标离开输入框，弹框展示“离开了输入框”
1、定义demo13.html页面
2、编写JS代码，演示失去焦点事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>失去焦点</title>
</head>
<body>
<!-- 失去焦点 -->
<input type="text" onblur="fun()">
<script type="text/javascript">
function fun() {
alert("离开了输入框")
}
</script>
</body>
</html>3、效果展示
【设计与开发更贴合案例】 例如；用户名校验
4.4 提交表单事件
当表单提交按钮被点击时，触发的事件就是提交表单事件
【案例】：演示通过表单提交事件，禁止表单提交操作
1、定义demo14.html页面
2、编写JS代码，实现禁止表单提交操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单提交事件</title>
</head>
<body>
<!--提交表单事件
调用带返回值的方法
返回值为boolean
true：表示表单可以提交
false：表示表单不可以提交 -->
<form action="demo01.html" method="get" onsubmit="return fun()">
姓名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
//设置返回值false，表示表单不可以提交
function fun(){
return false;
}
</script>
</body>
</html>
小结：
1. onclick 点击事件
2. onchange 内容变化事件（常结合对输入字段的验证来使用）
3. onblur 元素失去焦点事件
4. onsubmit 提交表单事件
补充：
5. onload 用户进入某个页面的时候触发
6. onmouseover 鼠标移动到HTML元素上方的事件
7. onmouseout 鼠标移出HTML元素上方的事件
8. onfocus 元素获取焦点事件
5 BOM核心对象Window
Window对象：代表一个浏览器窗口
创建：
是由浏览器直接创建，直接使用即可 例如：window.alert();
或者： alert();（可以省略，默认给的有window）
属性：
self返回对当前窗口的引用。等价于 Window 属性。
案例： window.self.alert("hello");
opener返回对创建此窗口的窗口的引用。
5.1 与弹出框有关的方法
-
alert():显示带有一段消息和一个确认按钮的警告框，之前一直在使用，此处不再演示。
-
confirm(参数) :显示带有一段消息以及确认按钮和取消按钮的对话框。 confirm里面的字符串参数就是窗口的提示信息；他有返回值true或者false 。
【案例】：使用confirm演示确认删除数据前的提示功能
1、定义demo15.html页面
2、使用confirm演示“您确认要删除吗”，并接受打印返回值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>confirm确认提示框</title>
</head>
<body>
<button onclick="fun()">删除</button>
<script>
function fun() {
var isDelete = confirm("您确定要删除吗");
console.log(isDelete);
}
</script>
</body>
</html>
-
prompt():显示可提示用户输入的对话框【了解】。
//第一个参数：提示信息；第二个参数：默认值；又返回值，且类型为String;
//输入什么返回什么；
prompt("请输入姓名：","roy");// 无返回值；
var a =prompt("请输入行数：","3");//接收返回值；
alert(a); var aa=parseInt(a)
alert(typeof(aa)); 5.2 与打开关闭有关的方法
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
通过API知道这个方法有四个参数：
1. window.open("URL打开窗口的地址","名称","窗口的特点宽高",可选布尔值);
一般就用两个参数（参数1，空，参数3），第四个不用；
2. 这里的window对象可以省略，但是建议不省略。因为一会儿学习的DOM也有open方法；
3. window.open()空参表示打开一个空白的窗口；
【案例】：定义一个按钮，点击按钮打开一个新窗口
1、定义demo16.html页面
2、定义一个按钮，点击按钮打开一个新窗口
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>window对象open方法</title>
<script type="text/javascript">
function open1(){
window.open("demo1.html","","width=500,height=200");
}
</script>
</head>
<body>
<input type="button" value="打开新窗口" onclick="open1()" />
</body>
</html>
5.3 与定时器有关的方法
-
interval：间隔执行。
setInterval("js代码",时间) 按照指定的周期（以毫秒计）来调用函数或计算表达式。此方法有一个返回值ID；clearInterval(ID) 取消由 setInterval()设置的计时器。参数必须是setInterval()方法的返回值。
【案例】：设置一个计时器实现倒计时秒杀功能；
1、定义demo17.html页面
2、定义计时器完成案例效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>setInterval计时器</title>
<script type="text/javascript">
var ID;
//页面加载完成后执行的事件
window.onload=function () {
ID = setInterval("count()",1000); // 时间以毫秒为单位
};
var num=5;
function count() {
//document.getElementById根据id获取页面元素，innerText为元素动态赋值
document.getElementById("ms").innerText=num;
num=num-1;
if(num<0){
//当倒计时到0秒后，停止定时器
clearInterval(ID);
}
}
</script>
</head>
<body>
还有<span id="ms">5</span>秒开启秒杀
</body>
</html> 
-
setTimeout("要执行的代码或者函数",时间) 在指定的毫秒数后调用函数或计算表达式。但是只执行一次； 此方法有一个返回值ID；clearTimeout(ID) 取消由 setTimeout() 方法设置的计时器。参数为setTimeOut()方法的返回值。
小结：
window对象
1. 与弹框有关的方法
alert 提示框
confirm 警告框
prompt 输入框
2. 与打开关闭有关的方法
open 打开窗口
close 关闭窗口
3. 与定时器有关的方法
setInterval 周期性执行定时器
setTimeout 一次性执行定时器
6 核心DOM模型
6.1 Document文档对象
Document对象：每一个载入浏览器的HTML文档都会成为一个Document对象，有了这个对象我们就可以操作这个Html文档里的各个标签、属性、文本等等了。
Document文档常用方法
1. write();向浏览器输出内容，之前用过了，不再演示效果
2. getElementById();返回带有指定id的一个对象；非常重要，每个人必须会
3. getElementsByClassName() 基于class属性名获取页面元素
4. getElementsByName();返回带有指定名称的数组，切记返回的是数组；根据name属性获取标签对象;
5. getElementsByTagName();返回带有指定标签名的集合；切记是数组
6.2 操作Element对象的属性
元素对象（element对象）
常见的属性操作方法
1. 获取属性里面的值: getAttribute("属性名称");
2. 设置属性值: setAttribute("属性名称","属性值");
3. 删除属性: removeAttribute("属性名称");
小结：
document获取元素常用方法
1. getElementById();返回带有指定id的一个对象；非常重要，每个人必须会
2. getElementsByClassName() 基于class属性名获取页面元素
3. etElementsByName();返回带有指定名称的数组，切记返回的是数组；根据name属性获取标签对象;
3. getElementsByTagName();返回带有指定标签名的集合；切记是数组
element元素属性常用方法
1. 获取属性里面的值: getAttribute("属性名称");
2. 设置属性值: setAttribute("属性名称","属性值");
3. 删除属性: removeAttribute("属性名称");
1584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
