<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// int num = 10; java // var num; // 这里的num 我们是不确定属于哪种数据类型的var num =10;// num 属于数字型 // js 的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的var str ='pink';// str 字符串型// js是动态语言 变量的数据类型是可以变化的var x =10;// x 是数字型
x ='pink';// x 字符串型</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1. 想要一个变量自己加1 num = num + 1 比较麻烦var num =1;
num = num +1;// ++num
num = num +1;
console.log(num);// 3// 2. 前置递增运算符 ++ 写在变量的前面var age =10;++age;// 类似于 age = age + 1
console.log(age);// 3. 先加1 后返回值var p =10;
console.log(++p +10);</script></head><body></body></html>
04-后置递增运算符
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>var num =10;
num++;// num = num + 1 ++num;
console.log(num);// 1. 前置自增和后置自增如果单独使用 效果是一样的// 2. 后置自增 口诀:先返回原值 后自加1 var age =10;
console.log(age+++10);
console.log(age);</script></head><body></body></html>
05-递增运算符练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>var a =10;++a;// ++a 11 a = 11var b =++a +2;// a = 12 ++a = 12
console.log(b);// 14var c =10;
c++;// c++ 11 c = 11var d = c+++2;// c++ = 11 c = 12
console.log(d);// 13var e =10;var f = e+++++e;// 1. e++ = 10 e = 11 2. e = 12 ++e = 12
console.log(f);// 22// 后置自增 先表达式返回原值 后面变量再自加1</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>var num =10;// num = num + 1; num++// num = num + 2; // num += 2;// num += 2;
num +=5;
console.log(num);var age =2;
age *=3;
console.log(age);</script></head><body></body></html>
11-运算符优先级
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// ++num !num 2 + 3
console.log(4>=6||'人'!='阿凡达'&&!(12*2==144)&&true)var num =10;
console.log(5== num /2&&(2+2* num).toString()==='22');
console.log('-------------------');var a =3>5&&2<7&&3==4;
console.log(a);var b =3<=4||3>1||3!=2;
console.log(b);var c =2==="2";
console.log(c);var d =!c || b && a;
console.log(d);</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 循环的目的:可以重复执行某些代码
console.log('媳妇我错了');
console.log('媳妇我错了');
console.log('媳妇我错了');
console.log('---------------------');for(var i =1; i <=1000; i++){
console.log('媳妇我错了');}</script></head><body></body></html>
02-for循环
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1. for 重复执行某些代码, 通常跟计数有关系// 2. for 语法结构// for (初始化变量; 条件表达式; 操作表达式) {// // 循环体// }// 3. 初始化变量 就是用var 声明的一个普通变量, 通常用于作为计数器使用 // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)// 6. 代码体验 我们重复打印100局 你好for(var i =1; i <=100; i++){
console.log('你好吗');}</script></head><body></body></html>
03-for循环执行过程(1)
04-for循环重复相同代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// for 循环可以执行相同的代码for(var i =1; i <=10; i++){
console.log('媳妇我错了');}// 我们可以让用户控制输出的次数var num =prompt('请您输入次数');for(var i =1; i <= num; i++){
console.log('媳妇我错了');}</script></head><body></body></html>
05-for循环重复不同的代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// for 循环可以重复执行不同的代码 因为我们有计数器变量 i 的存在 i每次循环值都会变化// 我们想要输出1个人 1~100岁// for (var i = 1; i <= 100; i++) {// console.log('这个人今年' + i + '岁了');// }for(var i =1; i <=100; i++){if(i ==1){
console.log('这个人今年1岁了,他出生了');}elseif(i ==100){
console.log('这个人今年100岁了,他死了');}else{
console.log('这个人今年'+ i +'岁了');}}</script></head><body></body></html>
06-for循环重复某些操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// for 循环重复执行某些操作 比如说我们做了100次加法运算// 求 1~100 之间的整数累加和// 需要循环100次,我们需要一个计数器 i // 我们需要一个存储结果的变量 sum ,但是初始值一定是 0// 核心算法:1 + 2 + 3 + 4 .... ,sum = sum + i;var sum =0;// 求和 的变量for(var i =1; i <=100; i++){// sum = sum + i;
sum += i;}
console.log(sum);</script></head><body></body></html>
07-for循环案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1. 求1-100之间所有数的平均值 需要一个 sum 和的变量 还需要一个平均值 average 变量var sum =0;var average =0;for(var i =1; i <=100; i++){
sum = sum + i;}
average = sum /100;
console.log(average);// 2. 求1-100之间所有偶数和奇数的和 我们需要一个偶数的和变量 even 还需要一个奇数 oddvar even =0;var odd =0;for(var i =1; i <=100; i++){if(i %2==0){
even = even + i;}else{
odd = odd + i;}}
console.log('1~100 之间所有的偶数和是'+ even);
console.log('1~100 之间所有的奇数和是'+ odd);// 3. 求1-100之间所有能被3整除的数字的和 var result =0;for(var i =1; i <=100; i++){if(i %3==0){// result = result + i;
result += i;}}
console.log('1~100之间能够被3整数的数字的和是:'+ result);</script></head><body></body></html>
08-求学生成绩案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 弹出输入框输入总的班级人数(num)// 依次输入学生的成绩( 保存起来 score), 此时我们需要用到// for 循环, 弹出的次数跟班级总人数有关系 条件表达式 i <= num// 进行业务处理: 计算成绩。 先求总成绩( sum), 之后求平均成绩( average)// 弹出结果var num =prompt('请输入班级的总人数:');// num 总的班级人数var sum =0;// 求和的变量var average =0;// 求平均值的变量for(var i =1; i <= num; i++){var score =prompt('请您输入第'+ i +'个学生成绩');// 因为从prompt取过来的数据是 字符串型的需要转换为数字型
sum = sum +parseFloat(score);}
average = sum / num;alert('班级总的成绩是'+ sum);alert('班级平均分是:'+ average);</script></head><body></body></html>
09-一行打印五个星星
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 一行打印五个星星 // console.log('★★★★★');// for (var i = 1; i <= 5; i++) {// console.log('★');// }// var str = '';// for (var i = 1; i <= 5; i++) {// str = str + '★';// }// console.log(str);var num =prompt('请输入星星的个数');var str ='';for(var i =1; i <= num; i++){
str = str +'★'}
console.log(str);</script></head><body></body></html>
10-双重for循环
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1. 双重for循环 语法结构// for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {// for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {// // 执行语句;// }// }// 2. 我们可以把里面的循环看做是外层循环的语句// 3. 外层循环循环一次, 里面的循环执行全部// 4. 代码验证for(var i =1; i <=3; i++){
console.log('这是外层循环第'+ i +'次');for(var j =1; j <=3; j++){
console.log('这是里层的循环第'+ j +'次');}}</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1. 求 1~100的累加和var sum =0;for(var i =1; i <=100; i++){
sum += i;}
console.log(sum);// 2. 求 10~50的累加和var sum =0;for(var i =10; i <=50; i++){
sum += i;}
console.log(sum);// 3. 函数就是封装了一段可以被重复执行调用的代码块 目的: 就是让大量代码重复使用functiongetSum(num1, num2){var sum =0;for(var i = num1; i <= num2; i++){
sum += i;}
console.log(sum);}getSum(1,100);getSum(10,50);getSum(1,1000);</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 利用函数判断闰年
function isRunYear(year){// 如果是闰年我们返回 true 否则 返回 false var flag =false;if(year %4==0&& year %100!=0|| year %400==0){
flag =true;}return flag;}
console.log(isRunYear(2000));
console.log(isRunYear(1999));</script></head><body></body></html>
06-函数是可以相互调用的
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 函数是可以相互调用的// function fn1() {// console.log(11);// fn2(); // 在fn1 函数里面调用了 fn2 函数// }// fn1();// function fn2() {// console.log(22);// }
function fn1(){
console.log(111);fn2();
console.log('fn1');}
function fn2(){
console.log(222);
console.log('fn2');}fn1();</script></head><body></body></html>
07-输出年份的2月份天数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 用户输入年份,输出当前年份2月份的天数
function backDay(){var year =prompt('请您输入年份:');if(isRunYear(year)){// 调用函数需要加小括号alert('当前年份是闰年2月份有29天');}else{alert('当前年份是平年2月份有28天');}}backDay();// 判断是否为闰年的函数
function isRunYear(year){// 如果是闰年我们返回 true 否则 返回 false var flag =false;if(year %4==0&& year %100!=0|| year %400==0){
flag =true;}return flag;}</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// js中没有块级作用域 js的作用域: 全局作用域 局部作用域 现阶段我们js 没有 块级作用域// 我们js 也是在 es6 的时候新增的块级作用域// 块级作用域 {} if {} for {}// java // if(xx) {// int num = 10;// }// 外面的是不能调用num的if(3<5){var num =10;}
console.log(num);</script></head><body></body></html>
12-作用域链
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 作用域链 : 内部函数访问外部函数的变量,采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则var num =10;
function fn(){// 外部函数var num =20;
function fun(){// 内部函数
console.log(num);}fun();}fn();</script></head><body></body></html>
13-作用域链案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 案例1 : 结果是几?
function f1(){var num =123;
function f2(){var num =0;
console.log(num);// 站在目标出发,一层一层的往外查找}f2();}var num =456;f1();// 案例2 :结果是几?var a =1;
function fn1(){var a =2;var b ='22';fn2();
function fn2(){var a =3;fn3();
function fn3(){var a =4;
console.log(a);//a的值 ?
console.log(b);//b的值 ?}}}fn1();</script></head><body></body></html>
14-预解析
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1问
console.log(num);// 2问
console.log(num);// undefined 坑 1var num =10;// 相当于执行了以下代码// var num;// console.log(num);// num = 10;// 3问
function fn(){
console.log(11);}fn();// 4问fun();// 报错 坑2 var fun =function(){
console.log(22);}// 函数表达式 调用必须写在函数表达式的下面// 相当于执行了以下代码// var fun;// fun();// fun = function() {// console.log(22);// }// 1. 我们js引擎运行js 分为两步: 预解析 代码执行// (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面// (2). 代码执行 按照代码书写的顺序从上往下执行// 2. 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)// (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作// (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数</script></head><body></body></html>
15-预解析案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 预解析案例// 案例1// var num = 10;// fun();// function fun() {// console.log(num);// var num = 20;// }// // 相当于执行了以下操作// // var num;// // function fun() {// // var num;// // console.log(num);// // num = 20;// // }// // num = 10;// // fun();// // 案例2// var num = 10;// function fn() {// console.log(num);// var num = 20;// console.log(num);// }// fn();// // 相当于以下代码// // var num;// // function fn() {// // var num;// // console.log(num);// // num = 20;// // console.log(num);// // }// // num = 10;// // fn();// // 案例3// var a = 18;// f1();// function f1() {// var b = 9;// console.log(a);// console.log(b);// var a = '123';// }// 相当于以下代码// var a;// function f1() {// var b;// var a;// b = 9;// console.log(a);// console.log(b);// a = '123';// }// a = 18;// f1();// 案例4f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){var a = b = c =9;
console.log(a);
console.log(b);
console.log(c);}// 以下代码// function f1() {// var a;// a = b = c = 9;// // 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看// // 集体声明 var a = 9, b = 9, c = 9;// console.log(a);// console.log(b);// console.log(c);// }// f1();// console.log(c);// console.log(b);// console.log(a);</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 遍历对象 var obj ={
name:'pink老师',
age:18,
sex:'男',
fn:function(){}}// console.log(obj.name);// console.log(obj.age);// console.log(obj.sex);// for in 遍历我们的对象// for (变量 in 对象) {// }for(var k in obj){
console.log(k);// k 变量 输出 得到的是 属性名
console.log(obj[k]);// obj[k] 得到是 属性值}// 我们使用 for in 里面的变量 我们喜欢写 k 或者 key</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 格式化日期 时分秒var date =newDate();
console.log(date.getHours());// 时
console.log(date.getMinutes());// 分
console.log(date.getSeconds());// 秒// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer(){var time =newDate();var h = time.getHours();
h = h <10?'0'+ h : h;var m = time.getMinutes();
m = m <10?'0'+ m : m;var s = time.getSeconds();
s = s <10?'0'+ s : s;return h +':'+ m +':'+ s;}
console.log(getTimer());</script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 倒计时效果// 1.核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。// 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。// 3.把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)// 转换公式如下: // d = parseInt(总秒数/ 60/60 /24); // 计算天数// h = parseInt(总秒数/ 60/60 %24) // 计算小时// m = parseInt(总秒数 /60 %60 ); // 计算分数// s = parseInt(总秒数%60); // 计算当前秒数
function countDown(time){var nowTime =+newDate();// 返回的是当前时间总的毫秒数var inputTime =+newDate(time);// 返回的是用户输入时间总的毫秒数var times =(inputTime - nowTime)/1000;// times是剩余时间总的秒数 var d =parseInt(times /60/60/24);// 天
d = d <10?'0'+ d : d;var h =parseInt(times /60/60%24);//时
h = h <10?'0'+ h : h;var m =parseInt(times /60%60);// 分
m = m <10?'0'+ m : m;var s =parseInt(times %60);// 当前的秒
s = s <10?'0'+ s : s;return d +'天'+ h +'时'+ m +'分'+ s +'秒';}
console.log(countDown('2019-5-118:00:00'));var date =newDate();
console.log(date);</script></head><body></body></html>
11-创建数组的两种方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 创建数组的两种方式// 1. 利用数组字面量var arr =[1,2,3];
console.log(arr[0]);// 2. 利用new Array()// var arr1 = new Array(); // 创建了一个空的数组// var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素 var arr1 =newArray(2,3);// 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);</script></head><body></body></html>