Function函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
Function 函数（方法）对象
创建：
1 var 方法对象 = new Function( 形参列表，方法体)； // 不推荐使用
2 function 方法名称（形参列表）｛
方法体；
｝
3 var 方法名= function(形参列表)｛
方法体；
｝
属性：
length: 代表形参的个数
方法的特点：
1 方法的定义是，形参的类型不用写，返回值类型也不写
2 方法是一个对象，如果定义名称相同的方法，则会覆盖
3 在js中，方法的调用只与方法的名称有关，和参数列表无关
4 在方法声明中有一个隐藏的内置对象，（数组） arguments ，它会封装的呢的实际参数
5 方法的调用： 方法名称（实际参数列表）
*/
//创建方式一：
var fun1 = new Function('a', "b", 'c', "alert(a);");
//调用方法
//fun1(11,2,3); //11
// 得到形参个数
//alert(fun1.length);//3
// 创建方式二：
function fun2(a,b){
alert(a*b);//20
}
//调用方法
fun2(4,5);
// 创建方式三：
var fun3 = function(a,b,c){
alert(a+b+c);//6
}
fun3(1,2,3);
//在方法声明中有一个隐藏的内置对象，（数组） arguments ，它会封装的呢的实际参数
// 定义一个循环，求任意数的和
function add(){
var sum= 0;
for(var i =0;i<arguments.length;i++){
sum+= arguments[i];
}
return sum;
}
// 调用方法
var sums =add(1,2,3,4,5);
alert(sums);//15
</script>
</body>
</html>
Array:数组对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array:数组对象</title>
</head>
<body>
<script type="text/javascript">
/*
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):
将数组中的元素按照指定的分隔符拼接为字符串
push()
向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
length:数组的长度
4. 特点：
1. JS 中，数组元素的类型可变的。
2. JS 中，数组长度可变的
*/
// 1. var arr = new Array(元素列表);
var arr1 = new Array(1, 2, 3, 4, true, "abc");
document.write(arr1 + "<br>");//1,2,3,4,true,abc
document.write(arr1[1] + "<br>");//2
document.write("<hr>");
//2. var arr = new Array(默认长度);
var arr2 = new Array(3);
document.write(arr2 + "<br>");//"
document.write("<hr>");
//3. var arr = [元素列表];
var arr3 = [ 1, 2, 3, 4, 5 ];
document.write(arr3 + "<br>");
document.write(arr3[0] + "<br>");//1
document.write(arr3[4] + "<br>");//5
document.write(arr3[9] + "<br>"); //undefined 默认值
document.write("<hr>");
//join(参数): 将数组中的元素按照指定的分隔符拼接为字符串
document.write(arr3.join(" | ") + "<br>");//1 | 2 | 3 | 4 | 5
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
arr3.push("aaa");
document.write(arr3 + "<br>"); //1,2,3,4,5,aaa
document.write(arr3.length);
</script>
</body>
</html>
Date日期对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<script type="text/javascript">
/*
Date：日期对象 1. 创建： var date = new Date();
2. 方法：
toLocaleString()：返回当前 date 对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到 1970 年 1 月
1 日 零点的毫秒值差
*/
var date = new Date();
document.write(date + "<br>");//Tue Sep 28 2021 10:02:58 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()+ "<br>"); //2021/9/28 上午10:04:14
document.write(date.getTime() + "<br>");//1632794718665
</script>
</body>
</html>
Math数学对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
Math：数学对象
1. 创建：
* 特点：Math 对象不用创建，直接使用。
Math.方法名();
2. 方法：
random():返回 0 ~ 1 之间的随机数。 含 0 不含 1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
abs(); 绝对值 正负数的绝对值都为正数
3. 属性： PI
*/
//Math.abs绝对值 正负数的绝对值都为正数
document.write(Math.abs(153) + "<br>");//153
document.write(Math.abs(-153) + "<br>");//153
//Math.ceil 向上取整
document.write(Math.ceil(153.01) + "<br>");//154
//Math.floor向下取整
document.write(Math.floor(153.9) + "<br>");//153
//Math.round 四舍五入
document.write(Math.round(153.4) + "<br>");//153
// Math .random() 随机小数 0-1之间，但是，不包含1
document.write(Math.random() + "<br>");
document.write(Math.PI + "<br>"); //3.141592653589793
document.write("<hr>");
// 使用数学运算类来求 1-100之间的随机整数
for (var i = 1; i <= 10; i++) {
var num = Math.floor(Math.random() * 100) + 1;
document.write(num + "<br>");
}
</script>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
RegExp：正则表达式对象
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现 0 次或 1 次
*：表示出现 0 次或多次
+：出现 1 次或多次
{m,n}:表示 m<= 数量 <= n * m 如果缺省：
{,n}:最多 n 次 * n 如果缺省：
{m,} 最少 m 次
3. 开始结束符号 * ^:开始 * $:结束
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法1. test(参数):验证指定的字符串是否符合正则定义的规范
*/
// 1 创建正则表达式对象，并定义规则
var reg = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
//"^\\w{6,12}$" 定义的规则 是 可以是 6-12位之间的大小字母与数字
var username = "Zhangsan";
//验证上面的字符是否符合规则
var flag = reg.test(username);
var flag2 = reg2.test(username);
alert(flag);
alert(flag2);
</script>
</body>
</html>
Global
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
Global
1. 特点：全局对象，这个 Global 中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法： encodeURI():url 编码
decodeURI():url 解码
encodeURIComponent():url 编码,编码的字符更多
decodeURIComponent():url 解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字 部分转为 number
isNaN():判断一个值是否是 NaN
* NaN 六亲不认，连自己都不认。
NaN 参与的==比较全部问 false
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
3. URL 编码 XXXX = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
*/
var str = "https://www.baidu.com?wd=大数据学习";
//编码
var encode = encodeURI(str);
document.write(encode + "<br>");
//https://www.baidu.com?wd=%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%AD%A6%E4%B9%A0
//解码：
var decode = decodeURI(encode);
document.write(decode + "<br>");// https://www.baidu.com?wd=大数据学习
//编码
var encode2 = encodeURIComponent(str);
document.write(encode2 + "<br>");
//https%3A%2F%2Fwww.baidu.com%3Fwd%3D%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%AD%A6%E4%B9%A0
//decodeURIComponent()
//解码：
var decode2 = decodeURIComponent(encode2);
document.write(decode2 + "<br>");// https://www.baidu.com?wd=大数据学习
//parseInt():将字符串转为数字 逐一判断每一个字符是否是数字，直到不是数字为止
var str2 = "123abc";
document.write(parseInt(str2) + "<br>");//123
document.write(typeof (parseInt(str2)) + "<br>");//number
document.write(isNaN(parseInt(str2)) + "<br>");//false
//eval()
var jscode="alert(123)";
eval(jscode);
</script>
</body>
</html>
DOM 简单学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 简单学习</title>
</head>
<body>
<script type="text/javascript">
/*
DOM： 文档对象模型 html文档
BOM: 浏览器对象模型
DOM简单学习： 为了满足案例要求
功能： 控制html文档的内容
获取页面标签对象：Element
document.getElementById("id值")： 通过标签的的id获取标签中的对象
操作Element对象：
1 修改属性值：
1 明确获取的对象是哪一个？
2 查看API文档，找其中有哪些属性可以设置
2 修改标签体中内容
属性：innerHTML
1 获取元素对象
2 使用innerHTML属性修改标签体内容
*/
</script>
<img id="imgs" alt="图片" src="img/off.gif">
<h1 id="title">电灯泡</h1>
<script type="text/javascript">
// A修改属性值
//1 通过id属性值，获取标签对象img
var img =document.getElementById("imgs");
//提示一下，要修改图片属性
alert("我要换图片了！");
img.src="img/on.gif";
// B修改标签体中内容
var titles =document.getElementById("title");
// 修改内容
titles.innerHTML="电灯开关是否打开";
</script>
</body>
</html>
如何绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="" src="img/off.gif" onclick="fun();" id="off">
<br>
<img alt="" src="img/off.gif" id="off2">
<script type="text/javascript">
/*
如何绑定事件
1. 直接在 html 标签上，指定事件的属性(操作)，属性值就是 js 代码
1. 事件：onclick--- 单击事件
2. 通过 js 获取元素对象，指定事件属性，设置一个函数
*/
function fun() {
alert("我被点击了");
}
//根据id属性值，获取标签对象 img
var offs = document.getElementById("off2");
//给offs标签对象绑定单击事件：
offs.onclick= function(){
alert("你又点我了！");
}
</script>
</body>
</html>
BoM浏览器对象模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
BOM概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
3. Window：窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回 true
* 如果用户点击取消按钮，则方法返回 false
prompt()显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
//2 与打开和关闭有关的方法
close() 关闭浏览器窗口
谁调用我，我就关闭谁
open() 打开一个新的浏览器窗口
返回一个新的window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。 （一次性定时器）
* 参数：
1. js 代码或者方法对象
2. 毫秒值 * 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。（循环定时器）
clearInterval() 取消由 setInterval() 设置的 timeout。
*/
</script>
<input id="opens" type="button" value="打开窗口">
<input id="closes" type="button" value="关闭窗口">
<script type="text/javascript">
// 与弹框有关的方法
//alert() 显示带有一段消息和一个确认按钮的警告框。
//alert("Hello Window!");
/*
//confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
var flag = confirm("你们都成年了吗？");
if(flag){
alert("确定显示");
}else{
alert("不显示");
}
*/
/*//prompt()显示可提示用户输入的对话框
var a =prompt("请输入用户名");
alert(a);
*/
/*
//2 与打开和关闭有关的方法
// 根据id属性值来获取打开关闭按钮对象
var opens = document.getElementById("opens");
// 创建新的window对象：
var newWindow;
//给打开按钮绑定单击事件：
opens.onclick = function() {
//打开新窗口
newWindow = open("https://www.baidu.com/");
}
var closes = document.getElementById("closes");
//给关闭按钮对象绑定单击事件
closes.onclick = function() {
// 关闭新窗口
newWindow.close();
}
*/
//与定时器有关的方式
// 一次性定时器
//setTimeout("fun();", 2000);
// var id = setTimeout("fun();", 2000);
// clearTimeout(id);//取消一次性定时器
function fun() {
alert("boom~~~~~~");
}
var id2 = setInterval(fun,2000);
clearInterval(id2);
</script>
</body>
</html>
Window窗口对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window窗口对象属性</title>
</head>
<body>
<script type="text/javascript">
/*
属性： 1. 获取其他 BOM 对象：
history
location
Navigator
Screen:
*/
// 获取其他对象属性：
var w1 =window.history;
var w2 =history;
alert(w1);
alert(w2);
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
