JavaScript day6
知识点回顾
js作用
操作 html + css
动态渲染数据
数据类型：number / string / boolean / null / undefined
判断数据类型 typeof
转换
转字符串 String() +
转数字 Number() +/-/*///% Math.round() Math.floor () Math.ceil()
parseInt()
在把小数转为整数的时候 == Math.floor()
还可以取出字符串里面的小数（字符串里面的第一位数字开始，到第一个非数字结束）
parseFloat() 取小数
判断
if switch
循环
嵌套
while for
break ，continue
死循环
函数
系统函数 ， 自定义函数
封装性，复用性，调用性
函数的封装
语法 function name(形参1,形参2,...) {}
提取形参
是否需要返回值
注释！！！！！！！！！！！！
调用
形参(函数声明)，实参(函数调用)
return
var obj = document.getElementById('id') ;
console.log(obj);
var obj2 ;
console.log(obj2);
obj.value = '666'
obj.onclick = function () { }
var a = Math.round('124') ;
console.log(a);
var n = Math.round('24px') ;
console.log(n);
// 提取到第一个非数字为止的整数
var m = parseInt('.24.5px2') ;
console.log(m); // NaN
var m = parseInt('0.24.5px2') ;
console.log(m); // 0
var m = parseInt('24.5px2') ;
console.log(m); // 24
var m = parseInt(24.5) ;
console.log(m); // 24
var m = parseFloat('24.5px') ;
console.log(m); // 24.5
关于参数的问题
函数在调用的时候，必须按照要求传参
实参和实参不对等 --- 不报错
实参多了或者少了 函数不报错
说明书
功能
参数
返回值
function calc(a,b,c,d) {
switch(a) {
case '+' : return b + c ;
case '-' : return b - c ;
}
}
// 传参有问题
var res = calc('+',1,2) ;
console.log(res);
关于return
return
给函数一个返回值
会提前结束整个函数
判断一个数是不是质数
思考：
参数和返回值
参数：给我一个数
返回值：我告诉你是不是
function isZhi(n) {
for(var i = 2 ; i < n ; i++) {
if(n % i === 0) {
return false ;
}
}
return true ;
}
判断闰年
输入框判断是不是闰年
function isRun(inpId , btnId) {
var oInp = document.getElementById(inpId);
var oBtn = document.getElementById(btnId) ;
oBtn.onclick = function () {
var y = oInp.value ;
// if(y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
// // alert(y + '是闰年')
// return true
// } else {
// return false
// }
// if(y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
// return true
// }
// return false
// 报错 return 只能返回一个值
// (y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) ? return true : return false ;
return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ? true : false ;
}
}
isRun('inp1' , 'btn1')
function isRun(y) {
return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ? true : false ;
}
var oInp = document.getElementById('inp1');
var oBtn = document.getElementById('btn1') ;
oBtn.onclick = function () {
var y = oInp.value ;
var res = isRun(y) ;
if(res) {
alert('不是')
}
else {
alert('是')
}
}
var n = parseInt(Math.random() * (10000 - 1000)) + 1000 ;
console.log(n);
var res = isRun(n) ;
console.log(res);
年月日的判断
function isRun(y) {
return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ? true : false ;
}
判断年月日是否合法
思考：参数，返回值
function isDate(y , m , d) {
// 判断年
if(y >= 1000 && y <= 2000 && y % 1 === 0) {
// 月
if( m >= 1 && m <= 12 && m % 1 === 0)
// 日期
var maxDay = 31 ;
if(m == 4 || m == 6 || m == 9 || m == 11) {
maxDay = 30
}
else if(m == 2) {
if(isRun(y)) {
maxDay = 29
} else {
maxDay = 28
}
}
if(d >= 1 && d <= maxDay && d % 1 === 0) {
return true
}
return '日期必须在1-' + maxDay + '之间'
}
return '月必须在1-12之间'
}
return '年必须在1000-2000之间'
}
function isDate(y , m , d) {
var res = '' ;
// 判断年
if(y >= 1000 && y <= 200
res += '年正确,'
}
else {
res += '年不正确,'
}
// 月
if( m >= 1 && m <= 12 &&
res += '月正确,'
}
else {
res += '月不正确,'
}
// 日期
var maxDay = 31 ;
if(m == 4 || m == 6 || m
maxDay = 30
}
else if(m == 2) {
if(isRun(y)) {
maxDay = 29
} else {
maxDay = 28
}
}
if(d >= 1 && d <= maxDay
res += '日期正确'
}
else {
res += '日期不正确'
}
return res
}
年对，月不对，日期对 字符串
return 的作用
条件取反
true / false
function isDate(y , m , d) {
// 年份不正确，结果就是不对
if(y < 1000 || y > 2000 || y % 1 !== 0) {
return false
}
if(m < 1 || m > 12 || m % 1 !== 0) {
return false
}
// 日期
var maxDay = 31 ;
if(m == 4 || m == 6 || m == 9 || m == 11) {
maxDay = 30
}
else if(m == 2) {
if(isRun(y)) {
maxDay = 29
} else {
maxDay = 28
}
}
if(d < 1 || d > maxDay || d % 1 !== 0) {
return false
}
return true
}
练习
随机四位数字验证码
编写一个函数sum(n)
// 当传入n为偶数时，调用函数求1/2 + 1/4 + ... + 1/n
// 当传入n为奇数时，调用函数求1 + 1/3 + ... + 1/n
求两个数的最大公约数
随机数字验证码
// 娶不到最大值
function rand(min , max) {
return parseInt(Math.random() * (max - min) + min)
}
function get(id) {
return document.getElementById(id)
}
// 随机四位数字验证码
// 方法1：生成一个四位数 1000 - 10000
var n = rand(1000 , 10000) ;
console.log(n); // 缺点：第一个数不可能是0 (不影响功能的实现)
方法二：
随机从0-10之间取一个
var n1 = rand(0,10) ;
var n2 = rand(0,10) ;
var n3 = rand(0,10) ;
var n4 = rand(0,10) ;
var res = '' + n1 + n2 + n3 + n4 ;
console.log(res);
var res = '';
for(var i = 0; i < 4 ; i++) {
var n = rand(0,10) ;
res += n ;
}
console.log(res);
// 参数，返回值
function randCode(x) {
x = x || 4 ;
var res = '';
for(var i = 0; i < x ; i++) {
var n = rand(0,10) ;
res += n ;
}
// console.log(res);
return res
}
// 页面打开的时候，就要显示验证码
// var result = randCode(8);
// get('inp').value = result;
get('inp').value = randCode(8)
get('btn').onclick = function () {
// var result = randCode(8);
// get('inp').value = result;
get('inp').value = randCode()
}
短路赋值
// 或 见真即真
// 与 见假即假
// 短路赋值
var n = 1 || 2 ; // n = (1 || 2) // n = 1
console.log(n);
var n = 0 || 3 ; // n = (0 || 3) // n = 3
console.log(n);
var n = 1 && 2 ; // n = (1 && 2) // n = 2
var n = 0 && 3 ; // n = (0 && 3) // n = 0
n = 0 || n = 3
m = 5 ;
if(m = 2) {
alert(2)
}
else if(m = 3) {
alert(3)
}
console.log(m);
function sum(a , b) {
a = a || 0 ;
b = b || 0 ;
console.log(a,b);
return a + b
}
var res = sum(1);
console.log(res);
求和
编写一个函数sum(n)
当传入n为偶数时，调用函数求1/2 + 1/4 + ... + 1/n
当传入n为奇数时，调用函数求1 + 1/3 + ... + 1/n
function sum(n) {
// n为奇数 。。。
if(n % 2) {
var res = 0 ;
for(var i = 1 ; i <= n ; i += 2) {
res += 1 / i
}
return res
}
// n为偶数 。。。
else {
var res2 = 0 ;
for(var j = 2 ; j <= n ; j += 2) {
res2 += 1 / j ;
}
return res2
}
}
分析代码如上，发现奇数或者偶数的求和就是初始值不一样
function sum(n) {
// var k = n % 2 ? 1 : 2 ;
var k = 2 ;
if(n%2) k = 1
var res = 0 ;
for(var i = k ; i <= n ; i += 2) {
res += 1 / i ;
}
return res
}
var r = sum(4) ;
console.log(r);
最大公约数
// 8 12
// 8 % 2 12 % 2 2
// 8 % 3 不是
// 8 % 4 12 % 4 4
var max = 0 ;
for(var i = 1 ; i <= 8 ; i++) {
if(8 % i === 0 && 12 % i === 0) {
max = i ;
}
}
console.log(max);
function gcd(a,b) {
var max = 0 ;
// for(var i = 1 ; i < a > b ? b : a ; i++)
for(var i = 1 ; i <= Math.min(a , b) ; i++) {
if(a % i === 0 && b % i === 0) {
max = i ;
}
}
console.log(max);
}
gcd(60,24)
// 8 12
// 8 % 8 12 % 8
// 8 % 7
// 8 % 6
// 8 % 5
// 8 % 4 12 % 4 4
function gcd(a,b) {
var max = 0 ;
for(var i = Math.min(a , b) ; i >= 1 ; i--) {
if(a % i === 0 && b % i === 0) {
// return i
max = i ;
break ;
}
}
return max
}
作用域
变量是有作用域
全局作用域 -- 全局变量
在函数外面声明的变量
没有var 的变量
局部作用域 -- 局部变量
在函数内部声明的变量
变量可以重复的声明
变量可以不声明，直接赋值
当函数内部的变量名和外部的变量相同时，优先使用自己的 --- 同名不同人
var a = 4 ;
console.log(a); // 4
var a = 5 ; // 5
b = 6 ;
console.log(b);
function fn() {
// 变量是在函数内部声明的，只能在函数内部使用
var c = 9 ;
console.log(c);
// 没有var,此变量默认为全局变量
d = 10 ;
var b = 20 ;
console.log(b); // 20
}
fn()
// console.log(c); // 报错 c是局部变量
console.log(d);
console.log(b); // 6
形参
// var a ;
// console.log(a); // undefined 变量已经声明，但是没有赋值
// 形参
// 本质上就是一个局部变量
function fn(a) {
console.log(a);
}
// fn()
fn(2)
console.log(a);
函数嵌套函数
// 变量的作用域
// 优先找自己的，自己找不到就找向上一级查找，一直找到script为止，一直找不到就报错
var a = 20 ;
function fn3() {
console.log(a);
}
function fn() {
// 属于fn的局部变量
var a = 10 ;
// fn2也属于fn的一部分 , 找到最近的变量
function fn2() {
var a = 5 ;
// fn2可以访问到fn的变量
console.log(a);
}
fn2()
}
fn()
js预编译
js代码的执行分两个阶段
预编译阶段
首先会找到所有的var声明的变量
找到所有的具名函数
代码执行阶段
你看到的代码
console.log(a); // undefined
var a = 10 ;
console.log(a); // 10
实际上js的解析
var a ;
console.log(a);
a = 10 ;
console.log(a);
你看到的
fn() ;
function fn() {
console.log(666);
}
实际上的js解析
function fn() {
console.log(666);
}
fn()
面试题
你看到的代码
console.log(a);
var a = 10 ;
a()
function a() {
console.log(3);
var b = 4 ;
}
console.log(b);
var b = 5 ;
console.log(b);
console.log(a);
var a ;
var b ;
function a() {
// 在函数内部也有预编译
var b ;
console.log(3);
b = 4 ;
}
console.log(a); // f
a = 10 ;
a() ; // a is not a function
console.log(b); // undefined
b = 5 ;
console.log(b); // 5
console.log(a); // 10
function a() {
console.log(3);
}
console.log(a); //
a = 1;
console.log(a); //
function a() {
console.log(2);
}
console.log(a); //
a = 3;
console.log(a); //
function a() {
console.log(3);
}
console.log(a); //
// 1 找var
// 2 找函数
function a() {
console.log(3);
}
console.log(a);
a = 1 ;
console.log(a);
console.log(a);
a = 3 ;
console.log(a);
console.log(a);
a()
声明函数的方法
// 函数的声明方式
// 具名函数 --- 有名字 存在预编译的问题
// 赋值式函数 不存在预编译的问题
// 变量
// 数据类型：基本数据类型(5) + 引用数据类型()
fn()
fn2() // 报错
function fn() {
console.log(666);
}
// 赋值式函数
var fn2 = function () {
console.log(777);
}
fn2()
console.log(typeof fn2); // function
var fn2 ;
function fn() {
console.log(666);
}
fn()
fn2() // 报错了
fn2 = function () {
console.log(777);
}
fn2()
匿名函数
// 匿名函数的自调用 -- 一次性的函数
~function (n) {
console.log(n);
}(666)
系统函数
// alert() // 没有返回值
// // 有输入框的弹窗
// var res = prompt('请输入你的名字');
// console.log(res);
// // 确定弹窗
// var res = confirm('确定要删除我吗'); // 返回布尔值
// console.log(res);
console.log(1 + '2'); // 12
console.log('1 + 2');
// eval() 能计算的时候，就计算,不能计算时，直接报错
// console.log(eval('1 + 2a'));
function calc(a , b , f) {
return eval(a + f + b)
}
var res = calc(1,2,'+');
console.log(res);
递归函数
// 递归：传递与回归 ， 自己调用自己
// function fn() {
// fn()
// }
// fn() // 死递归
// 1+2+3+4+...+100 ;
// 方法1 循环求和
// 1+2=3
// 3+3=6
// 6+4=10
// 1+2+3+4+...+100 ;
// 100 + (前面99个数的和)
// 99 + (前面98个数的和)
// 98 +
// ...
// 2 + (前面一个数的求和)
function sum(n) {
if(n == 1){
return 1
}
return n + sum(n-1)
}
sum(5)
// 5 + sum(4)
// 4 + sum(3)
// 3 + sum(2)
// 2 + sum(1)
// 1
// 1*2*3*4*...*10
// 10*jc(9)
// 9*jc(8)
function jc(n) {
if(n == 1) {
return 1
}
return n * jc(n - 1)
}
斐波拉切数列
// 斐波拉切数列 1 1 2 3 5 8 13 21 34 ...
// 求第n个数是多少 (n-1) + (n-2)
function fb(n) {
// if(n == 1) {
// return 1
// }
// if(n == 2) {
// return 1
// }
if(n == 1 || n == 2) {
return 1
}
return fb(n - 1) + fb(n - 2)
}
console.log(fb(6));
归求和
// 编写一个函数sum(n)
// 当传入n为偶数时，调用函数求1/2 + 1/4 + ... + 1/n
// 当传入n为奇数时，调用函数求1 + 1/3 + ... + 1/n
// 不管奇数偶数，计算都是1/n+第n-2个数的和
// 1 / n + sum(n - 2)
function sum(n) {
if(n == 1) {
return 1
}
if(n == 2)
return 1 / 2
}
return 1 / n + sum(n - 2)
}
console.log(sum(5));
今天的学习内容总结结束
主要内容
随机数字验证码 --- 短路赋值
判断日期
作用域！！！！！！
递归 --- 断点
作业思考
最大公约数 --- 循环求余数
最大公约数 --- 欧几里得算法 -- 递归实现
随机产生0-100之间的数，多少次才会抓到0 -- 递归？
