1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 10 11 <script type="text/javascript"> 12 /* 13 js代码写在这 14 哈哈 15 */ 16 alert('i love you~ zhao li ying~');//以弹出框的形式输出内容（数据） 17 18 console.log("i love you~ zhao li ying~ two");//以控制台日志的形式输出内容 19 20 document.write('i love you~ zhao li ying~ three');//把内容作为网页内容去显示 21 22 </script> 23 </body> 24 </html>
js书写位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--行内样式（内敛样式）--> 7 <!--内嵌样式--> 8 <!--外链样式--> 9 <style> 10 #box{ 11 width: 300px; 12 height: 300px; 13 background-color: hotpink; 14 } 15 </style> 16 </head> 17 <body> 18 <!--第一种js写法 内敛写法--> 19 <!-- 20 1、内敛js比较局限，只能在事件属性当中去用 21 2、内敛js和内敛css一样，代码的分离性最差，可读性不强 22 --> 23 <!--<div id="box" onclick="alert('i love you~ yangmi~')"></div>--> 24 25 <!--<script type="text/javascript"> 26 //第二种js的内嵌写法 27 //教学过程当中用的比较多，但最终我们都会把js写成外链写法 28 /* 29 js代码写在这 30 哈哈 31 */ 32 alert('i love you~ zhao li ying~');//以弹出框的形式输出内容（数据） 33 34 console.log("i love you~ zhao li ying~ two");//以控制台日志的形式输出内容 35 36 document.write('i love you~ zhao li ying~ three');//把内容作为网页内容去显示 37 38 </script>--> 39 40 <!--外链js写法--> 41 <script src="./js/index.js" type="text/javascript" charset="utf-8"> 42 console.log('haha'); 外链的script标签中间不能写代码，写了也没用 43 44 45 </script> 46 47 </body> 48 </html>
变量定义的方式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //定义变量 10 // 1、先定义，后赋值 11 var a;//var（定义）了一个变量，取名叫a 12 a = 100;//赋值，和数学的=不一样，它是把=右边的值（数据）存储到=左边的变量（容器）当中 13 a = 200; 14 a = 1000; 15 16 // 1 = 2; 17 18 console.log(a);//console.log函数作用就是用来打印数据的，如果是变量，会从变量当中拿到数据打印； 19 20 21 // 2、定义的同时赋值,和第一种本质是一样的 22 var b = 200; 23 console.log(b); 24 25 26 // 3、特殊，不带var也可以定义一个变量 27 // c;//这样写是错的，因为c当中去获取值得时候，c是没有定义的，没有定义去使用就会报错 28 c = 300;//如果不带var去定义变量，那么这个变量必须赋值，不赋值就报错； 29 console.log(c); 30 31 //注意：带var定义的变量和不带var定义的变量，目前可以理解是一样的，但是他们是有区别的 32 //所以，我们以后定义变量的时候，都带var 33 34 35 //console.log(400)函数，理解成一个工具，它专门用来打印括号当中的数据（值） 36 //括号当中有值就可以打印， 37 //变量里面也是有值的，所以括号里面也可以写一变量，只不过写变量，打印的时候麻烦， 38 //因为这个函数，得先从变量当中去拿到里面存的值，然后再打印； 39 40 41 42 43 //我需要一次性定义多个变量 44 var d = 10,e = 20; //完全等价于 var d = 10; var e = 20; 45 var f = g = 30;//完全等价于 var f = 30; g = 30;(后面的g不带var) 46 47 48 49 50 51 52 53 54 55 </script> 56 </body> 57 </html>
变量命名规范
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 var a = 100;//对的 11 12 // var if = 200;//错的 13 // var 2b = 200; 错的 14 // var h-c = 100; 错的 15 //变量名字要符合标识符规则 16 //1、变量名由 数字 字母 下划线 以及$组成 17 //2、变量名不能由数字开头 18 //3、不能和关键字及保留字同名 19 20 21 //注意： 22 //变量严格区分大小写 A 和 a 不一样 23 //变量以后我们要见名思意 ，定义一个变量存储人名 var personName; 24 //特别注意，变量禁止写拼音，不会的单词，去查，也不能写拼音 25 26 27 //变量名字的写法一般有三种 28 //1、大驼峰写法： 29 // var PersonName; 所有的单词首字母都大写，但是我们前端用的比较少，也会用（特定情况） 30 //2、小驼峰写法： 31 // var personName; 只有第一个单词的首字母小写，其余单词首字母大写，前端主打用法 32 //3、下划线写法： 33 // var person_name; 这个写法，我们用的比较少，后端用的比较多 34 35 36 37 </script> 38 </body> 39 </html>
交换两个变量的值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //交换两个变量的值；(整数) 10 var a = 100; 11 var b = 200; 12 console.log(a,b); 13 //1、借助第三方变量实现 14 // var c; 15 // c = a;// =出现 右侧一定是一个有值的东西（值，变量），左侧一定是一个变量 16 //// console.log(a);//赋值操作，把a的值赋值给c之后，a的值仍然存在，不是说就没有了； 17 // a = b; 18 //// console.log(a);// 200 19 // b = c; 20 // console.log(a,b); 21 22 23 24 //2、不用第三方变量，求和实现 25 a = a + b; // a = 100 + 200 a = 300 26 b = a - b; // b = 300 - 200 b = 100 27 a = a - b; // a = 300 - 100 a = 200 28 29 console.log(a,b); 30 31 32 33 </script> 34 </body> 35 </html>
基本数据类型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //1、数字 Number 10 var num = 100; 11 num = 1.23; 12 13 //了解就好，根本不用 14 num = 0b10;//2进制数字，前面加0b 15 num = 0o10;//8进制数字，前面加0o 可以简写把o去掉 16 num = 0x10;//16进制数字，前面加0x 17 //了解就好 18 num = 1.23e3;//科学计数法 1.23*1000 19 console.log(num); 20 21 22 //2、字符串 String 23 //用引号包含的东西就是字符串，单双引号都可以,其实就是文本内容 24 var str = 'ilijhsfdgying'; 25 str = '100'; 26 str = "jshdgakda1286341asjdgakd我爱你赵丽颖"; 27 28 str = ' ';//空白串 29 str = '';//空串 30 str = "it's a dog";//假设字符串内外都有引号，切记内外交叉使用 31 console.log(str); 32 33 34 //3、布尔值 Boolean 35 //只有两个值，要么是真 要么是假 36 var bool = true;//真 37 bool = false;//假 38 console.log(bool); 39 40 41 42 //4、undefined 43 //这个undefined是一个基本数据类型，这个类型当中只有一个值，也叫undefined 44 //怎么拿到undefined,定义变量不赋值，这个变量的值就是undefined 45 46 var und;//定义变量，没有赋值，就是undefined 47 console.log(und); 48 49 50 //5、null 51 //这个null是一个基本数据类型，这个类型当中只有一个值，也叫null 52 //怎么拿到null,定义变量赋值为null,才能拿到null 53 54 var nul = null;// 经常用来初始化一个对象或者删除一个对象去用； 55 console.log(nul); 56 57 58 59 </script> 60 </body> 61 </html>
判断基本数据类型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var a = 100;//'number' 类型名的小写字符串形式 10 // console.log(a); 11 a = 'zhaoliying';//'string' 类型名的小写字符串形式 12 a = true;//'boolean' 类型名的小写字符串形式 13 // console.log(typeof a); 14 15 16 var b;//'undefined' 类型名的小写字符串形式 17 18 b = null;//'object' 为什么？因为小布当年犯下的错 （设计缺陷） 19 console.log(typeof b); 20 21 22 23 //typeof判断一个值是什么类型 24 //后面可能直接就是一个值 typeof 100 25 //后面也可能是一个变量，不过要先从变量里面拿值，然后再去判断 typeof a 26 27 28 //typeof后面一个值，返回的结果最终是这个值得类型名的小写字符串形式 29 //但是null这个值特殊： 30 // 1、null返回的是object 由于设计缺陷造成的 31 // 2、null本来就是在初始化对象和删除对象才要使用，归为object 32 33 34 console.log( typeof typeof 100);//'string' 35 36 37 38 </script> 39 </body> 40 </html>
算数运算符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //运算符是没有意义的 10 //表达式是有意义的 11 //与其说在讲运算符，不如说我们在讲表达式 12 13 //算术运算符和表达式 14 // + - * /(拿商除不尽算小数) %（求余数，除不尽拿余数） 15 16 var a = 100; 17 var b = 200; 18 console.log(a + b); 19 console.log(a - b); 20 console.log(a * b); 21 console.log(a / b); 22 console.log(a % b); 23 24 //用来求余数的 25 //% 作用比较大，三个场合用的比较多 26 //1、可以判断一个数能否被另一个数整除（两个数求余，余数为0一定能整除） 27 //2、可以求一个数字，各个位上的数 28 // 678 百位 678 / 100 ==> 6.78 ==>(取整) ==》6 29 // 十位 678 /10 % 10 === > (取整) 30 // 个位 678 % 10 ===> 31 32 //3、可以求一个范围内的数 33 //任何的一个数对5求余，余数一定落在 0-4范围之内 34 //任何的一个数对100求余，余数一定落在 0-99范围之内 35 console.log(237465127486%5);// 0 - 4 36 console.log(237465127486%99 + 1);//1 - 99 37 38 </script> 39 </body> 40 </html>
自增和自减
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //自增自减运算符 10 // ++ -- 11 // ++ -- 是让一个变量自增1或者自减1 12 // 它们只能和变量组成表达式 不能和常量 不能写1++ 13 // 口诀 对于 表达式（a++ ++a）来说 14 //1、 ++在后， 先赋值（先把变量a的值，赋值给表达式a++）后++(然后偷摸滴让变量a加1) 15 //2、 ++在前， 先++（先让变量a的值加1） 后赋值（然后再把变量的值赋值给表达式++a）; 16 17 18 // var a = 10; 19 //1、 20 // a++;// a++ 和 a 是不一样的 a++是表达式 a是变量 21 // ++a; 22 // console.log(a);//11 23 24 25 //2、 26 // console.log(++a); 27 28 29 //3、 30 31 // a--; 32 // --a; 33 // console.log(a);//9 34 35 36 //4、 37 // console.log(--a); 38 39 40 41 42 //练习
43 var a = 2; 44 var b = 3; 45 var c = a + b++; // a 2 b++ 3 c 5 b 4 46 c= ++a + b++; // ++a 3 b++ 4 c 7 a 3 b 5 47 c = a + b--; // a 3 b-- 5 c 8 b 4 48 49 console.log(a,b,c);
var a = 7;
var b = 9;
var c = a + b++; // a 7 b++ 9 b 10 c 16
c = ++a + b++;// ++a 8 a 8 b++ 10 b 11 c 18
c = b + a++; // b 11 a++ 8 a 9 c 19
c = ++a + b++;// ++a 10 a 10 b++ 11 b 12 c 21
c = --a + b;// --a 9 b 12 a 9 c 21
c = a + b--;// a 9 b-- 12 b 11 c 21
console.log(a,b,c);
50 51 </script> 52 </body> 53 </html>
赋值运算
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 // = 10 // = 和数学里面的= 不同 数学里的=有相等的意思，但是js=就是赋值的意思 11 // = 它是把=右侧的值赋值给=左侧的变量（右侧一定是有值的东西 100 a a+b） 12 // = 的左侧现在 只能是变量，后期=左侧还可以是对象的属性 13 14 var a = 10; 15 var b = 20; 16 // a = b; 17 // console.log(a); //打印a的值 18 // console.log(a + b); //打印a + b这个表达式的值 19 // console.log(a = a + b);//不是打印a的值也不是打印a+b的值，而是打印整体表达式的值； 20 21 22 //复合赋值运算符 23 // += -= *= /= %= 24 a += b;// 完全等价于 a = a + b; 25 26 27 </script> 28 </body> 29 </html>
条件运算符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //条件运算符： 10 // > 大于 < 小于 11 // >=大于或等于 <= 小于或等于 12 // ==相等 != 不相等 13 // ===全等于 !==不全等于 14 //任何运算符其实都是为了去探索这个运算符组成的表达式的值； 15 //条件表达式最终的结果一定是布尔值；****** 16 // >= 其实就是大于或者等于的意思 17 18 var a = 10; 19 var b = 20; 20 // var a = 10,b = 20 21 22 console.log(a > b); 23 console.log(a < b); 24 console.log(a >= b); 25 console.log(a <= b); 26 console.log(a == b); 27 console.log(a != b); 28 29 </script> 30 </body> 31 </html>
逻辑运算符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //逻辑运算符： &&与（并且） ||或（或者） ! 非（取反） 10 //一般的情况： 都是用在多个条件表达式的连接 11 // && 一假则假 12 // || 一真则真 13 // ！ 非真即假，非假即真 14 //假设颜值 0 - 100表示 15 //假设金钱 50w 上下 16 var handsome = 60; 17 var money = 100000; 18 console.log(handsome >= 50 && money >= 500000); 19 console.log(handsome >= 50 || money >= 500000); 20 console.log(!(handsome >= 50 || money >= 500000)); 21 22 //二般情况：如果不是条件表达式，一般情况的口诀就不适用了 23 //特殊情况：我们要遵循以下口诀：这个口诀是通用的，一般情况也能用 24 //如果逻辑表达式是&&：******** 25 //&& ： 前面的值如果为真，则取后面的值，作为整个表达式的值； 26 // 前面的值如果为假，则取前面的值，作为整个表达式的值，后面的东西不执行 27 //如果逻辑表达式是||： 28 //|| : 前面的值如果为真，则取前面的值，作为整个表达式的值，后面的东西不执行 29 // 前面的值如果为假，则取后面的值，作为整个表达式的值 30 //如果逻辑表达式是!： 31 //！：以后碰到它，首先感叹号要先运算，其次感叹号要求它的后面必须是一个布尔值， 32 //如果不是布尔值，先转化为布尔值， 33 //最后再取反 34 35 //1 36 // var a = 10; 37 // a = 0; 38 // var b = 'zhaoliying'; 39 // console.log(a && b);//对于数字，非0即为真 40 41 //2 42 // var a = 0.5; 43 // a = 0; 44 // var b = 2; 45 // console.log(a && b++); 46 // console.log(b); 47 48 //3、 49 // var str = 'i love you~'; 50 // str = ''; 51 // var c = 10; 52 // console.log(str || ++c);//对于字符串，非空(空串)即为真 53 // console.log(c); 54 55 56 //4、 57 console.log(!'zhaoliying'); 58 console.log(!6); 59 console.log(!0); 60 console.log(!''); 61 </script> 62 63 </body> 64 </html>
三元运算符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //所有语言当中只要出现三目运算符 就是?: 10 //由这个运算符组成的表达式，我们叫做三元表达式或者问号冒号表达式 11 // 12 //三元表达式执行过程： 13 // 先看问号？前面的值，如果值为真，则取冒号：前面的值作为整个表达式的值，冒号：后面的不执行： 14 // 前面的值，如果值为假，则取冒号：后面的值作为整个表达式的值，冒号：前面的不执行； 15 16 //1、 17 // var a = 10; 18 // var b = 20; 19 // console.log(a + b > 50 ? a++ : ++b);//21 20 // console.log(a,b); 21 22 //2、 23 // var a = 100; 24 // var b = 200; 25 // console.log('heihei'?a+b++:b--);//300 a 100 b201 26 // console.log(a,b);//100 201 27 28 29 //3、 30 var str = '666'; 31 var a = 0; 32 var c = (a && str)? str : (a++ && str); 33 // var c = 0?str:0 34 console.log(c,a); 35 36 </script> 37 </body> 38 </html>
强制类型转换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //数据的强制类型转换 其实就是想把数据转化为我们想要的数据类型 10 //Number() String() Boolean() 11 12 //1、把其它的数据类型转化为数字 就用到Number(); 13 // var num = 1;//数字转数字还是数字，没必要 14 //1-1 字符串转数字 15 var str = 'zhaoliying';//NaN 16 //NaN (not a number) 本意：不是一个数字，但是它又是数字类型 17 //当转化不了数字的时候，而最终又必须是数字类型，结果就是NaN 18 //NaN 是属于数字类型，代表不是一个数字 19 20 str = 'iaufdw1273651sjhahdskjh15324案件还打算';//NaN 21 str = '12563 ';//12563 22 str = '123sdjhgdakjd';//NaN 23 str = '';//0 24 str = '123456 ';//0 25 // var result = Number(str);//强制把字符串转化为数字，赋值给result 26 // console.log(result); 27 // console.log(Number(str));//和上面两行出来的结果是一样； 28 29 //1-2 布尔值转数字 30 var bool = true;//1 31 bool = false;//0 32 // console.log(Number(bool)); 33 34 //1-3 undefined转数字 35 var und; 36 // console.log(Number(und)); 37 38 //1-4 null转数字 39 var nul = null; 40 // console.log(Number(nul)); 41 42 //总结 43 // 字符串转数字： 44 //1、整体去看，如果是一个数字（前后有空白无所谓，中间不行），那么就转化为这个数字 45 //2、整体去看，如果不是数字，那么转化为NaN 46 //3、空串和空白串转化为0 47 48 // 布尔值转数字 true就是1 false就是0 49 // undefined转数字 出来就是NaN 50 // null 转数字 出来就是0 51 52 53 54 //2、把其它的数据转字符串 55 // 任何的数据转字符串，直接加引号； 56 57 var a = 1;// '1' 58 a = true; //'true' 59 a = null;//'null' 60 // console.log(String(a)); 61 //总结：其它数据转字符串，直接给数据添加引号，就变成对应转化的字符串 62 63 64 //3、把其它数据转化布尔值 65 //3-1、数字转布尔 66 var num = 0; 67 num = 0.01; 68 num = NaN; 69 // console.log(Boolean(num)); 70 //3-2、字符串转布尔 71 //3-3、undefined和null转布尔 72 var und; 73 var nul = null; 74 console.log(Boolean(und)); 75 console.log(Boolean(nul)); 76 77 78 //总结：数字转布尔： 除了0和NaN是false以外，其余都是true 79 // 字符串转布尔:非空即为真(除了空字符串是false以外,其余都是true) 80 // undefined和null转布尔值都是false 81 82 83 84 85 // 86 // Number(NaN)//NaN 87 // Number('')//0 88 // Number('123zhaoliying')//NaN 89 // Number('heihei')//NaN 90 // Number(' 123.6')//123.6 91 // Number(null)//0 92 // console.log(String(NaN)); 93 94 Boolean(0.01);//true 95 Boolean(0);//false 96 Boolean(' ');//true 97 Boolean('');//false 98 Boolean(undefined);//false 99 Boolean(null);//false 100 Boolean(NaN);//fasle 101 102 </script> 103 </body> 104 </html>
数据类型隐式转换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //数据类型的强制转换，也叫数据类型的显式转换， 10 //显式转换的意思就是你自己在使用那三个函数转化数据 11 12 //数据类型的隐式转换，我们看不到使用那三个方法，但是最后还发生了数据转换 13 //数据类型的隐式转换式我们核心，面试题出的很多，但是后期我们用的很少 14 //隐式转换通常发生在数据之间的 运算 比较 和 判等的时候 15 16 console.log(1 + 1); 17 console.log(1 + '10');//‘110’ 18 console.log(1 + true);//2 19 console.log(1 + undefined);//NaN 20 console.log('i love you~' + 1314); 21 22 console.log(10 > '11');//fasle 23 console.log('1234' > '13');//false 24 // '0'字符编码是48 'a'编码是97 'A'编码是65 25 26 27 //数据之间的运算和比较 28 //1、先看是不是 +法运算 29 //2、如果是 + 法运算，看两边有没有字符串，如果有就是拼接字符串 30 31 //3、如果不是 + 法，看看是不是比较大小（> < >= <=） 32 //4、如果是比较大小，看看两边是否同时是字符串，如果同时是字符串，比较的是字符串的Unicode码 33 34 //5、其余情况，所有的数据全部转数字 35 36 37 //数据之间的判等 38 //1、先看两边是不是同种数据类型，如果是直接看两边一样不一样，一样就相等，不一样就不等， 39 //2、如果是不同的数据类型，那么需要将两边同时转数字，然后再去判等 40 //3、特殊情况：如果碰到了null有特殊情况发生 41 // null 和 0 不相等 42 // null 和 '' 不相等 43 // null 和 false 不相等 44 // null 和 undefined 相等 45 console.log(null == null);//true 46 console.log(1 == '1');//true 47 console.log(undefined == undefined);//true 48 console.log(null == 0);//false 49 console.log(null == false);//fasle 50 console.log(null == '');//false 51 console.log(null == undefined);//true 52 53 54 //NaN的总结：一句话 NaN 六亲不认 55 //NaN和任意的数运算的结果都是NaN 56 //NaN和任意的数比较的结果都是false 57 //NaN和任意的数判等的结果都是不相等（包括它自己） 58 59 console.log(1 + NaN);//NaN 60 console.log(1 > NaN);//false 61 console.log(NaN > 1);//false 62 console.log(NaN + NaN);//NaN 63 console.log(NaN == NaN);//false 64 65 66 67 68 69 </script> 70 </body> 71 </html>
数据类型手动转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //数据类型的手动转换，其实本质上是从字符串当中去提取数字（和数据的强制转化隐式转换不一样） //如果给的不是字符串，那么会转化为字符串，然后再提取 //parseInt() 从字符串当中提取整数 //parseFloat() 从字符串当中提取小数 //两个方法要求字符串中数字字符必须在前面，才能提 var str = 'audaiusd123';//NaN str = ' 123sjygakdj';//123 str = ' 12.34uaysgda'; str = ' 12.34.56sdasdggada' console.log(parseInt(str)); console.log(parseFloat(str)); // parseInt(678/10%10) </script> </body> </html>