作业讲解
第1题:
用户输入一个数字,然后判断这个数字能否被5、6整除的情况,根据情况弹出下面4种警告框:
比如30
比如15
比如18
比如14
<body> <input type="text" name="" id=""><button>点击</button> </body> <script> let input = document.querySelector("input") let btn = document.querySelector("button") btn.onclick = function () { let val = parseInt(input.value) if (val % 5 == 0 && val % 6 == 0) { alert("这个数字能同时被5和6整除") } else if (val % 5 == 0) { alert("这个数字能被5") } else if (val % 6 == 0) { alert("这个数字能被6整除") } else { alert("这个数字不能被5整除,也不能被6整除") } } </script>
第2题:
用户输入一个数字,然后再输入一个数字。然后弹出警告框:
比如用户输入3、147,都是奇数
比如用户输入6、171,不一样
注意,我们并不关心他们“都为奇数”、“都为偶数”,只是关心奇偶性一致的情况
<body> <div>第一个数字<input type="text" name="" id="first"></div> <div>第二个数字<input type="text" id="second"></div> <button>点击</button> </body> <script> let firstInput = document.querySelector("#first") let secondInput = document.querySelector("#second") let btn = document.querySelector("button") btn.onclick = function () { let first = parseInt(firstInput.value); let second = parseInt(secondInput.value); if (first % 2 == second % 2) { alert("两个数字奇偶性相同") } else { alert("两个数字奇偶性不同") } } </script>
第3题:
用户输入一个年份,判断这个年是否是闰年。
判断闰年条件:
① 整百年 数除以400,无余为闰,有余不闰。
② 非整百年 数除以4,无余为闰,有余不闰;
比如:
2000年,整百数年,就要用②公式,除以400,无余数,所以是闰年。
1900年,整百年数,就要用②公式,除以400,有余数,所以不是闰年。
2100不是
……
2016
2012
2008
2004
2000
……
……
1904
1900不是
自己把中文判断条件转为计算机语言。
<body> <div><input type="text" name="" id=""><button>点击</button></div> </body> <script> let input = document.querySelector("input") let button = document.querySelector("button") button.onclick = function () { let val = parseInt(input.value) if (val % 100 == 0) { //整百年 if (val % 400 == 0) { alert("是闰年") } else { alert("不是闰年") } } else { //非整百年 if (val % 4 == 0) { alert("是闰年") } else { alert("不是闰年") } } } </script>
第4题:
某个公司要给员工发年终奖,为了奖励老员工,所以工作时间越长,发的越多,规则如下:
工作满0年 发月薪的1倍月薪年终奖,如果月薪大于8000,那么就是发1.2倍
工作满1年 发月薪的1.5倍月薪年终奖,如果月薪大于10000,那么就是发1.7倍
工作满2年,甚至更多 发月薪的3倍月薪年终奖,如果月薪大于12000,那么就是发3.2倍
用JS编写程序,让用户输入工作了几年,可以输入0,然后输入月薪。然后算年终奖。
<body> <div>工作年数:<input type="text" id="year"></div> <div>月薪:<input type="text" name="" id="salary"></div> <button>点击</button> </body> <script> let year = document.querySelector("#year") let salary = document.querySelector("#salary") let button = document.querySelector("button") button.onclick = function () { year = year.value; salary = salary.value; if (year <= 1) { if(salary<=8000){ alert("年终奖:"+salary) }else{ alert("年终奖:"+salary*1.2) } } else if (year > 1 && year <= 2) { } else { } } </script>
二进制、八进制和十六进制
js作用域(scope)
-
全局作用域
-
局部作用域(块级作用域) {}
for循环
white循环
if嵌套
函数 var定义一个变量,在外面的全局作用域下,不可以访问
数据类型
-
基础数据类型:
string,number,boolean, undefined , null
-
复杂数据类型
Object Array Date RegExp
类型检测
-
typeof
- 对于基本类型,除 null 以外,均可以返回正确的结果。
- 对于引用类型,除 function 以外,一律返回 object 类型。
- 对于 null ,返回 object 类型。
- 对于 function 返回 function 类型
-
instanceof 判断是否是某个构造函数的实例
不能检测简单数据类型
只能检测复杂数据类型
console.log("数字", 10 instanceof Number) console.log("布尔", true instanceof Boolean) console.log("字符串", "" instanceof String) console.log("对象", {} instanceof Object) console.log("函数", function(){} instanceof Function) console.log("数组", [] instanceof Array)
-
constructor 判断构造函数
console.log("数字", (10).constructor == Number) console.log("字符串", ('你好').constructor == String) console.log("布尔", (true).constructor == Boolean) console.log("对象", ({}).constructor == Object) console.log("数组", ([]).constructor == Array) console.log("函数", (function () { }).constructor == Function)
-
toString
Object.prototype 原型对象 __proto__ 原型 console.log("数字",Object.prototype.toString.call(1)) console.log("字符串",Object.prototype.toString.call("")) console.log("布尔",Object.prototype.toString.call(true)) console.log("对象",Object.prototype.toString.call({})) console.log("数组",Object.prototype.toString.call([])) console.log("函数",Object.prototype.toString.call(function(){}))
构造函数、原型对象和实例化对象的关系
function Demo() { } let obj = new Demo() // console.log(Demo.prototype) //构造函数的原型对象 // console.log(obj.__proto__) //实例化对象的原型 // console.log(Demo.prototype == obj.__proto__) console.log(Demo.prototype.constructor)
类型转换
显式类型转换
- 转换为字符串:toString() 或 String()
- 转换为数值:Number("100ab")、parseInt("121abc121")、parseFloat()
- 转换为布尔值:Boolean()
- 转换为对象:Object()
隐式类型转换
-
减号、乘号、除号、取模...
减号、乘号、除号、取模等操作符是比较单纯的操作符。 这些操作符会尝试将他们的操作数转换为数字(使用
Number()
),如果操作数没法转换为数字的话,他们的结果就是NaN
-
大于、小于、大于等于、小于等于
当两个操作数均是字符串的时候,它会执行大家熟悉的字符串比较,即从左到右依次比较每一个字符的ASCII码,若出现符合操作符的情况,则返回
true
,否则返回false
。 无法将操作数转换为数字的情况下总是返回false
。 -
==、!=
这两个运算符在大部分上面都是与(一)相同的,不同的是:
- 字符串 op 字符串:不会进行类型转换,直接比较。
- 对象 op 对象:引用都指向同一个对象才为
true
。
-
加号(+)
当没有特别指定的时候参考(一),比如对象+对象等,但有如下几种例外情况:
- 字符串 + 字符串:进行字符串拼接操作。
- 字符串 + 其他:将其他转换为字符串,并进行拼接操作。
运算符
-
四则运算符 + - * / %
-
逻辑运算法 && || !
条件控制
-
if和三目运算符
-
switch的使用
this的指向
函数类型
-
普通函数
function demo(){ }
-
匿名函数 window
let fn=function(){}
-
立即执行函数
(function(){ })()
-
回调函数
将函数作为参数传递给其他函数,在外部函数中调用它
function print(callback) { callback(); }
创建回调函数
const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000); setInterval(message,1000)
-
箭头函数 ES6
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
var obj = { uname: "张三", age: 21 } function fn() { console.log(this,"外层函数") return () => { console.log(this,"箭头函数") } }
let result = fn.call(obj) result()
判断this指向 ```js var age=100; var obj = { age: 20, say: () => { alert(this.age) } } obj.say()
this指向总结
函数类型 | this的指向 |
---|---|
普通函数 | 指向window |
匿名函数 | 指向window |
立即执行函数 | window |
回调函数 | window |
箭头函数 | 函数定义位置的上下文this |
对象下的函数 | 谁调用,指向谁 |
dom回调 | 绑定事件的对象 |
递归
闭包
-
闭包的定义
有权访问另一个函数作用域中变量的函数
简单理解:一个作用域可以访问另一个函数内部的变量
-
闭包的原理
-
闭包的使用场景