Python（四十）JavaScript进阶
Python（四十）JavaScript进阶
这篇文章主要涉及的内容是JS中的内置对象（Math对象以及日期对象）、定时器的使用、以及JS的函数与JS的异常。
1. JS的内置对象
JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用。
1.1. Math对象
Math对象是一个处理数学相关的对象，可以用来执行与数学相关的内容。
console.log(Math.sqrt(9));：算术平方根：9的算术平方根
console.log(Math.pow(4, 2));： 幂运算：4的2次方，x的y次方
console.log(Math.abs(-6));：绝对值
console.log(Math.ceil(5.6));：向上取整
document.write(Math.ceil(5.6))：在界面中打印
console.log(Math.floor(5.6));：向下取整
console.log(Math.round(9.8));：四舍五入
console.log(Math.random());：随机数：0-1
console.log(Math.round(Math.random()*100));：随机数：0-100
console.log(Math.random() * 30 + 20);：生成20到50的随机数
console.log(Math.max(1, 50, 40, 22, 3));：最大值
console.log(Math.min(1,50,40,22,3));：最小值
1.2. 日期对象
日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉。
console.log(time.getFullYear());：年
console.log(time.getMonth());：月，老外的月份是从0开始，而中国是从1开始。
console.log(time.getDate());：日
console.log(time.getDay());：星期几
console.log(time.getHours());：得到时
console.log(time.getMinutes());：得到分
console.log(time.getSeconds());：得到秒
console.log(time.getTime());：得到时间戳，1970年到现在的ms数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Built in object of JS</title>
</head>
<body>
<!--Math对象-->
<script>
console.log(Math.sqrt(9)); // 算术平方根：9的算术平方根
console.log(Math.pow(4, 2)); // 幂运算：4的2次方，x的y次方
console.log(Math.abs(-6)); // 绝对值
console.log(Math.ceil(5.6)); // 向上取整
// document.write(Math.ceil(5.6)) // 在界面中打印
console.log(Math.floor(5.6)); // 向下取整
console.log(Math.round(9.8)); // 四舍五入
console.log(Math.random()); // 随机数：0-1
console.log(Math.round(Math.random()*100));
console.log(Math.random() * 30 + 20); // 生成20到50的随机数
console.log(Math.max(1, 50, 40, 22, 3)); // 最大值
console.log(Math.min(1,50,40,22,3)); // 最小值
</script>
<!--time对象-->
<script>
var time=new Date()
console.log(time.getFullYear()); // 年
console.log(time.getMonth()); // 月，外国的月份是从0开始，而中国是从1开始。
console.log(time.getDate()); // 日
console.log(time.getDay()); // 星期几
console.log(time.getHours()); // 得到时
console.log(time.getMinutes()); // 得到分
console.log(time.getSeconds()); // 得到秒
console.log(time.getTime()); // 得到时间戳，1970年到现在的ms数
</script>
</body>
</html>
2. JS的Window对象
2.1. Window对象
Window对象是所有客户端JS特性和API的主要接入点。它表示web浏览器的一个窗口或窗体，并且可以用标识符window来引用。
2.2. Window属性和方法
Window对象定义了一些属性和方法，比如alert()方法以及非常重要的document属性。
2.3. 定时器
定时器是Window中的一个方法，可以用来实现一些定时操作。
var timer1 = setTimeout(function (){console.log('花')},2000)：设置一个定时器timer1，过2000ms打印花，只打印一次。
var timer2 = setInterval(function (){console.log('草')},2000)：设置一个定时器timer2，每过2000ms打印草，打印多次。
clearTimeout(timer1)：清除定时器timer1
clearTimeout(timer2)：清除定时器timer2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS window object</title>
</head>
<body>
<script>
// 在指定时间后只执行一次
var timer1 = setTimeout(function (){
console.log('花')
},2000) //2000是ms，过2秒钟打印花，只打印1次
// 以指定时间为周期，执行多次
var timer2 = setInterval(function (){
console.log('草')
},2000) //2000是ms，每过2秒钟打印草，打印多次
// 清除定时器
clearTimeout(timer1)
clearTimeout(timer2)
</script>
<button>点击我跳转页面</button>
<button>点击我关闭</button>
<script>
var btn = document.getElementsByTagName("button")
btn[0].onclick=function (){
// window.location.href = 'https://www.baidu.com/' // 在当前页面跳转
window.open("https://www.baidu.com/") // 新建一个页面去跳转，类似_blank
}
btn[1].onclick=function (){
window.close()
}
</script>
</body>
</html>
3. JS的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS function</title>
</head>
<body>
<!--函数的分类-->
<script>
// 有名函数，名字就是function之后，小括号之前
function func(){
console.log(5);
}
func()
// 匿名函数，没有名字的，触发事件就会调用。
document.onclick = function (){
console.log(6);
}
</script>
<!--函数的传参-->
<script>
function func(x){ // x是形参
console.log(x);
}
func(5) // 5是实参
function fun(x,y){
console.log(arguments); // 不定长参数
for (let i=0;i<arguments.length;i++){
console.log(arguments[i])
}
}
fun(5,6,7,8,9)
</script>
<!--函数的返回值-->
<button>点击我跳转页面</button>
<script>
// 功能性函数没有返回值，得到的结果是undefined
var a=alert(666)
console.log(a);
var b=console.log(777)
console.log(b);
// 返回性函数，会返回结果
var btn=document.getElementsByTagName('button')[0]
console.log(btn)
// 自定义函数 有返回值打印出来的内容就是返回的内容 没有返回值打印就是undefined
function func(x,y){
console.log(x+y)
return x+y // return 返回值，和python一样，结束这个函数，后面的代码不执行。
console.log(5)
}
func(8,9)
var fun=func(6,7)
console.log(fun)
func(fun,6)
</script>
<!--JS作用域-->
<script>
var a=10 // 全局变量
function fun(){
var a=20 // 局部变量 函数作用域 外面不能调用，也不影响外面的
// a = 20 // 没有用var声明，则会自动成为全局变量，只能改变外面（父）变量的值
function func(){
var a = 30 // 局部变量 函数作用域 外面不能调用，也不影响外面的
// a = 30 // 没有用var声明，则会自动成为全局变量，只能改变外一级（父）变量的值。
}
func()
alert(a)
}
alert(a)
fun()
alert(a)
{
var a = 10 // 全局变量的作用域是全局的，网页的所有脚本和函数都可以访问。
}
console.log(a)
{
let a = 10 // 局部变量就是块级作用域，只能在函数内部访问
}
console.log(a) // 打印undefined
</script>
<!--JS函数表达式-->
<script>
// 函数自调用，在function前写+、-、！、~、（）、可以让匿名函数立即执行
~function (){
console.log(5);
}()
// 这个最常用
(function (){
console.log(4)
}())
</script>
</body>
</html>
4. JS异常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS exception</title>
</head>
<body>
<!--JS exception-->
<script>
function func(){
// var a=10
try{
console.log(a);
}
catch(e){
alert("错误类型"+e.name+"错误信息"+e.message)
}
finally {
alert("执行结束")
}
}
func()
function func(){
var a=10
try{
if (a<10) throw 'a太小了'
if (a==10) throw 'a刚刚好'
if (a>10) throw 'a太大了'
}
catch (e){
alert(e)
}
finally {
alert('执行结束')
}
}
func()
</script>
</body>
</html>
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
