前言
本文将会介绍javaScript的全局函数,内置对象;内置对象包括Date对象,string对象,Math对象,Array对象,正则表达式;后面两个对象(Array对象,正则表达式)将会在下篇文章中更新,其中也会插入一些与之相关的内容。
一、全局函数
说明:javaScript中定义一些函数,可以直接使用。
函数名 | 具体描述 |
---|---|
isNaN() | 判断给定的变量的值是否是number类型,true表示不是 (空字符串也返回false) |
eval() | 计算JavaScript字符串,并把它作为脚本代码执行 |
parseInt() ,parseFloat() | 转换字符串为number类型 |
encodeURIComponent() | 把字符串编码为URI组件(解决中文乱码) |
escape() | 对字符串进行编码(unescape()为解码) |
代码如下:(示例)
1.isNaN()函数代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
年龄: <input id = "age" /><button id = "btn0">检查输入的年龄是否合理</button>
<script>
// var f = "";
// console.log(isNaN(f)); //测试变量为空字符串的类型
// var n = "1332fa" ;
// console.log(isNaN(n));
var btn = document.getElementById("btn0") ;
//console.log(btn) ; //检查是否获取到标签对象
btn.onclick = function(){
//1.获取年龄文本框的内容
let age = document.getElementById("age").value ;
//判断是否填写了
if(age.trim() == ""){
alert("抱歉,年龄必须填写") ;
return ;
}
//判断
if(isNaN(age)){
alert("年龄不合法,必须是数字") ;
return ;
}
//说明用户填写的是数字:假定年龄必须在0~100之间
if(age < 0 || age > 100){
alert("年龄填写错误,必须在0~100之间") ;
return ;
}
//说明年龄合法
alert("你的年龄是:" + age) ;
} ;
</script>
</body>
</html>
2.eval()作用:
(1)将String类型的转化为number类型
var n = "123674" ;
console.log(typeof(n))
console.log(typeof(eval(n)))
(2)执行字符串(将每个数据转化为数字类型(number),再进行运算)
console.log("5" + "3")
console.log("5+3")
console.log("--",eval("5") + eval('3'))
console.log("==",eval('5-5'))
console.log("---",eval("1+2-41"))
console.log(">:" ,eval("ab + cd")) //没法执行
结果显示:
(3)将一个json格式的字符串转换为json对象
var p = {name:'王华',sex:'男',address:'北京'};
console.log(typeof(p));
console.log(p.name,p.sex,p.address);
二、内置对象
1.Date对象:获取时间对象的部分属性:getxxx
内容:(1)创建当前的时间对象,比如:var p = new Date();
(2)获取日期对象的部分属性(Date对象的方法),比如:getYear(),getFullYear(),getDate(),getDay()等。
代码如下(示例):
//1.创建当前的时间对象
var p = new Date() ;
// console.log(p.toString()) //打印时区,日期,星期。。。
// console.log(p.toLocaleString()) //将日期字符串转换为本地的表示方式
//2.获取日期对象的部分属性
console.log(p.getYear()) ; //从1990年1月1日开始计算
console.log(p.getFullYear()) //从1970年1月1日00:00:00开始计算
console.log(p.getMonth() + 1) ; //月从0开始算
console.log(p.getDate()) //月中的某天
console.log(p.getDay()) //周中的某天
2.String对象
(1)字符串常用的方法
:
方法名 | 具体描述 |
---|---|
charAt() | 返回在指定位置的字符 |
indexOf() | 返回某个指定的字符串在字符串中首次出现的位置 |
lastIndexOf() | 从向前搜索字符串,并从起始位置开始计算返回字符串最后出现的位置 |
repeat() | 复制字符串指定次数,并将它们连接在一起返回 |
replace() | 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串。 |
slice() | 提取字符串的片段,并返回此片段 |
split() | 根据指定的字符串拆分字符串为数组 |
startsWith() | 查看字符串是否给定的字符串开头 |
substr() | 从指定的索引开始提取指定长度的字符 |
substring() | 提取两个指定索引号的字符 |
toLowerCase() | 将字符串转化为小写 |
toUpperCase() | 将字符串转化为大写 |
trim() | 去掉字符串两边的空格 |
代码如下(部分示例):
//1. charAt : 返回指定索引处的字符
let s = "中国上海好美呀"
console.log(s.charAt(0))
//2.indexOf: 返回字符串中指定字符串的索引,没有返回-1,有则返回索引
console.log(s.indexOf('国'))
console.log(s.indexOf("西安"))
//3.判断字符串是否以指定的字符或者字符串结尾
console.log(s.endsWith("中国"),s1.endsWith("呀"))
(2)String对象对HTML的封装方法
封装方法 | 描述 |
---|---|
anchor() | 创建HTML锚 |
big() | 用大字号显示字符串 |
blink() | 显示闪动字符串 |
fontcolor() | 使用指定的颜色来显示字符串 |
fontsize() | 使用指定的尺寸来显示字符串 |
sub() | 把字符串显示为下标 |
sup() | 把字符串显示为上标 |
代码如下:(部分示例)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
var n = 12 ;
function fun(){
//1.获取p标签对象
var p = document.getElementById("p")
//2.获取p标签的主体文本
var txt = p.innerHTML ;
//3.改变大小
p.innerHTML = txt.big().big();
}
function fun1(){
n = n + 30 ;
//1.获取p标签对象
var p = document.getElementById("p")
// //2.获取p标签的主体文本
// var txt = p.innerHTML ;
// var f = txt.fontsize(n) ;
// console.log(f)
// p.innerHTML = f
p.style.fontSize = n + "px" ;
}
</script>
<body>
<p id = "p">爱丽丝</p>
<button onclick="fun()">变大一</button>
<button onclick="fun1()">变大二</button>
</body>
</html>
3.Math对象
概念:MAth对象用于执行数学任务,且它不是对象的类,所以没有构造函数Math()
方法:abs(x):返回x的绝对值
ceil(x):对数进行上舍入
floor(x):对x进行下舍入
random():返回0~1之间的随机数
round(x):四舍五入
代码如下:(示例)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
//1.随机获取一个0~1之间的小数
// console.log(Math.random())
//2.获取小于等于给定数的最大整数
// console.log(Math.floor(3.4)) ;
//3.获取大于等于给定数的最小整数
// console.log(Math.ceil(3.4))
//4.四舍五入
console.log(Math.round(2.4))
console.log(Math.round(3.5))
</script>
<body>
</body>
</html>
3.innerHTML属性和innerText属性
(补充)
innerHTML:表示开始标签和结束标签之间的HTML代码
innerText:表示开始标签和结束标签之间的文本(不包括标签)
注意:以上两个属性必须应用在有开始标签和结束标签的元素