javascript基础(1)
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>