12-2 js基础-CSDN博客

一数据类型

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>数据类型</title>
 6 </head>
 7 <body>
 8 <script>
 9 
10     var a=123;
11     console.log(typeof a);
12     //string
13     var b='123';
14     console.log(typeof b);
15     //boolean
16     var c=false;
17     console.log(typeof c);
18     //null
19     var d=null;
20     console.log(d);
21     //undefined未定义
22      var d1;
23      console.log(typeof d1)
24 
25 </script>
26 
27 </body>
28 </html>

View Code

二数据类型转换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>数据类型转换</title>
 6 </head>
 7 <body>
 8 <script>
 9     //隐式转换
10     // var n1=123;
11     // var n2='123';
12     // var n3=n1+n2;
13     // console.log(typeof n3);//字符串类型
14     //强制类型转换
15     // var str1=String(n1);
16     // console.log(str1,typeof str1);//强制转换成字符串
17     // var num=234;
18     // console.log(num.toString());//转成字符串
19     //将字符串类型转换成数值类型
20     // var stringNum='789.12113kjk';
21     // var num2=Number(stringNum);
22     // console.log(num2,typeof num2);//NaN "number"
23     // console.log(parseInt(stringNum));//789 只保留整数部分
24     // console.log(parseFloat(stringNum));//789.123 保留数字部分
25     //转换成boolean类型
26     var b1='123';
27     var b2=0;
28     var b3=-123;
29     var b4=Infinity;
30     console.log(typeof b1);
31     console.log(typeof b2);
32     console.log(typeof b3);
33     console.log(typeof b4);//number
34     console.log(typeof b5);//mumber
35     console.log(typeof b7);//object
36     console.log(Boolean(b7));//false
37 
38     console.log(Boolean(b4));//true
39     //下面三个都是为false
40     var b5 = NaN;
41 
42     var b6; //undefined
43     var b7 = null;
44 
45 
46 </script>
47 
48 </body>
49 </html>

View Code

三常用内置对象

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>常用内置对象</title>
  6 </head>
  7 <body>
  8 <script>
  9     //---------- 数组array创建---------------------------------
 10     // var arr=[1,2,3];
 11     // console.log(arr);
 12     // 数组赋值
 13     // arr[0]=1234;
 14     // arr[1]='呵呵';
 15     // arr[2]='嘿嘿';
 16     // -----数组的常用方法------
 17     // concat合并数组
 18     //         var north = ['北京','山东','天津'];
 19     //         var south = ['东莞','深圳','上海'];
 20     //         var newCity = north.concat(south);
 21     //         console.log(newCity); // ["北京", "山东", "天津", "东莞", "深圳", "上海"]
 22     // join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串
 23             // var score = [98,78,76,100,0];
 24             // var str = score.join('|');
 25             // console.log(str);//98|78|76|100|0
 26     // 将数组转换成字符串 toString()
 27     //         var score = [98,78,76,100,0];
 28             //toString() 直接转换为字符串  每个元素之间使用逗号隔开
 29             // var str = score.toString();
 30             // console.log(str);//98,78,76,100,0
 31      // slice(start,end); 返回数组的一段，顾头不顾尾
 32             // var list= ['1','2','3','4'];  //list不能写成name,不知道是什么原因
 33             // var newArr  = list.slice(1,3);
 34             // console.log(newArr);
 35 
 36 
 37     // pop 移除数组的最后一个元素
 38             // var arr = ['张三','李四','王文','赵六'];
 39             // var newArr  = arr.pop();
 40             // console.log(arr);//["张三", "李四"，"王文"]
 41 
 42     // push() 向数组最后添加一个元素
 43             // var arr = ['张三','李四','王文','赵六'];
 44             // var newArr  = arr.push('张三丰');
 45             // console.log(arr);//["张三", "李四", "王文", "赵六", "张三丰"]
 46 
 47     // ---reverse()翻转数组------
 48             // var arr1 = ['张三','李四','王文','赵六'];
 49             // arr1.reverse();
 50             // console.log(arr1);//["赵六", "王文", "李四", "张三"]
 51 
 52     // sort对数组排序
 53             // var names = ['alex','xiaoma','tanhuang','abngel'];
 54             // names.sort();
 55             // console.log(names);// ["abngel", "alex", "tanhuang", "xiaoma"]
 56 
 57     //isarray()判断是否是数组
 58             // var arr1 = ['张三','李四','王文','赵六'];
 59             // console.log(Array.isArray(arr1)); //true
 60             //
 61             // var a=3;
 62             // console.log(Array.isArray(a)); //false
 63     // --------------字符串----------------------
 64     // chartAt() 返回指定索引的位置的字符
 65             // var str='alex';
 66             // var charset=str.charAt(3);
 67             // console.log(charset);
 68     // concat 返回字符串值，表示两个或多个字符串的拼接
 69             var str1 = 'al';
 70             var str2  = 'ex';
 71             console.log(str1.concat(str2,str2));//alexex
 72      // replace(a,b) 将字符串a替换成字符串b
 73             //  var a = '1234567755';
 74             // var newStr = a.replace("4567","****");//把4567替换成****
 75             // console.log(newStr);//123****755
 76     // indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样
 77             // var str = 'alex';
 78             // console.log(str.indexOf('e'));//2
 79             // console.log(str.indexOf('p'));//-1
 80     // slice(start，end) 左闭右开 分割字符串
 81             var aa='你是谁';
 82             console.log(aa.slice(1,2));//是
 83     // split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度
 84     //         var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
 85     //         console.log(str.split('a',2));
 86     // substr(statr,end) 左闭右开，可以显示从那到哪，顾头不顾尾
 87     //         var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
 88     //         console.log(str.substr(0,6));//我的天呢
 89     //  toLowerCase()转小写
 90     //             var str = 'XIAOMAGE';
 91     //             console.log(str.toLowerCase());//xiaomage
 92     // toUpperCase()转大写
 93     //             var str4 = 'xiaomage';
 94     //             console.log(str4.toUpperCase());
 95     // 数字转换字符串
 96     //     var num = 132.32522;
 97     //     var numStr = num.toString();
 98     //     console.log(typeof numStr);//string
 99     // 四舍五入
100     //     var newNum = num.toFixed(2);
101     //     console.log(newNum);
102 
103     // #####################data日期对象##############################
104     var mydate=new Date();
105     console.log(mydate); //Tue Jul 10 2018 15:58:05 GMT+0800 (中国标准时间)
106     console.log(mydate.getDate());//获取当前日期具体是哪天
107     //返回本地时间
108             console.log(mydate.toLocaleDateString());//2018/7/10
109     console.log(mydate.getFullYear());//只获取年份
110     console.log(mydate.getMonth()+1);//获取当前月份，必须加1
111 
112     // ################math内置对象##############
113     //  Math.ceil() 向上取整，'天花板函数'
114             var x = 1.234;
115             //天花板函数  表示大于等于 x，并且与它最接近的整数是2
116             var a = Math.ceil(x);
117             console.log(a);//2
118     // Math.floor 向下取整，'地板函数'
119             var y = 1.234;
120             // 小于等于 x，并且与它最接近的整数 1
121             var b = Math.floor(y);
122             console.log(b);//1
123     // 求两个数的最大值和最小值
124             console.log(Math.max(2,5));//5
125             console.log(Math.min(2,5));//2
126     // 随机数 Math.random()
127             var ran = Math.random();
128             console.log(ran);//0.3176434165181341
129     // 求100-200之间的随机数
130              //min+Math.random()*(max-min)公式背过
131             console.log(Math.floor(100+Math.random()*(100)));
132 
133 
134 </script>
135 
136 
137 </body>
138 </html>

View Code

四运算符

赋值运算符

算数运算符

比较运算符

实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运算符</title>
 6 </head>
 7 <body>
 8 <script>
 9     // 赋值运算符
10     // var x=12;
11     // var y=5;
12     // // x+=y;
13     // // x=x+y;
14     // x=x*y;
15     // console.log(x)
16     // 算数运算符
17     // var a=5,b=2;
18     // var c =a+b;
19     // console.log(c)
20     // var x=a++;
21     // console.log(x);//5
22     // console.log(a);//6
23     // var d=a--;
24     // console.log(d);//5
25     // console.log(a);//4
26     // 比较运算符
27     // var x=5;
28     // console.log(x==='5');//false
29     // var a1='1';
30     // var a2='2';
31     // console.log(a1+a2);//12
32     // var n1=133;
33     // var str1=String(n1);
34     // console.log(typeof str1);//字符串
35     var  stringNum = '1233.33yudasdiusaudsaugd';
36     var num2=Number(stringNum);
37     console.log(num2);//NaN
38     console.log(parseInt(stringNum));//1233
39     console.log(parseFloat(stringNum));//1233.33
40 
41 
42 
43 
44 
45 
46 </script>
47 
48 </body>
49 </html>

View Code

五流程控制

实例：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>流程控制</title>
  6 </head>
  7 <body>
  8 <script>
  9 //     判断语句
 10 //     var ji=20;
 11 //     if(ji>20){
 12 //         console.log('吃鸡成功')
 13 //     }
 14 //     else if(ji=20){
 15 //         console.log('差一点吃到')
 16 //     }
 17 //     else{
 18 //         console.log('吃鸡失败')
 19 //     }
 20 //     逻辑与和逻辑或
 21 //     sum=300;
 22 //     math=99;
 23 //     // &&两个条件都要满足
 24 //     if(sum>400 && math>90){
 25 //         console.log('录取成功')
 26 //     }
 27 //     else{
 28 //         console.log('高考失利')
 29 //     }
 30 //     // ||或只满足一个条件即可
 31 //
 32 //     if(sum>400 ||math>90){
 33 //         console.log('录取成功')
 34 //     }
 35 //     else{
 36 //         console.log('高考失利')
 37 //     }
 38 //     switch语法
 39 //     var gameScore = 'good';
 40 //
 41 //     switch(gameScore){
 42 //
 43 //     //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，
 44 //     // 那么直到该程序遇到下一个break停止
 45 //         case 'good':
 46 //         console.log('玩的很好');
 47 //         //break表示退出
 48 //         break;
 49 //         case  'better':
 50 //         console.log('玩的老牛逼了');
 51 //         break;
 52 //         case 'best':
 53 //         console.log('恭喜你 吃鸡成功');
 54 //         break;
 55 //
 56 //         default:
 57 //         console.log('很遗憾');
 58 //
 59 // }
 60 //     while循环
 61 //     var i =1;
 62 //     while(i<=9){
 63 //         console.log(i);
 64 //         i=i+1;
 65 //     }
 66 //     打印出1-100内的偶数
 67 //     var a=0;
 68 //     while (a<100){
 69 //         a=a+1;
 70 //         if (a%2==0){
 71 //             console.log(a);
 72 //         }
 73 //     }
 74 //     do while语法 不管有没有满足while中的条件do里面的代码都会走一次
 75 //     var i=13;
 76 //     do{
 77 //         console.log(i);
 78 //         i++
 79 //     }while (i<10)
 80 //
 81 //     for 循环
 82 //     for (var i=1;i<10;i++){
 83 //         console.log(i)
 84 //     }
 85 //     for (var i=1;i<100;i++){
 86 //         if (i%2==0){
 87 //             console.log(i)
 88 //             document.write(i)
 89 //         }
 90 //         document.write('<br>')
 91 //     }
 92 //     #求1-100直接的之和
 93 //     var sum=0;
 94 //     for (var j=1;j<=100;j++){
 95 //         sum=sum+j;
 96 //     }
 97 //     console.log(sum)
 98 //
 99 //     双重for循环
100 //     for(var i=1;i<=3;i++){
101 //         for (var j=0;j<6;j++){
102 //             document.write('*')
103 //         }
104 //         document.write('<br>')
105 //     }
106 </script>
107 
108 
109 </body>
110 </html>

View Code

六函数和伪数组arguments

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>函数</title>
 6 </head>
 7 <body>
 8 <script>
 9     sayHello();     //调用函数 .js调用的时候顺序可以随便写
10     //定义函数：
11     function sayHello(){
12         console.log("hello world");
13     }
14 
15     // 函数的形参和实参
16     //         sum(3,4);//7
17     //         sum("3",4);//34
18     //         sum("Hello","World");//helloworld
19     //
20     //         //函数：求和
21     //         function sum(a, b) {
22     //             console.log(a + b);
23     //         }
24     // 函数的返回值
25     //         function sum(a,b) {
26     //             return a+b;
27     //         }
28     //         console.log(sum(3,0));
29     //#########伪数组arguments############
30         //     arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。
31         // （1）返回函数实参的个数：arguments.length
32         //     fn(2,4);
33         //     fn(2,4,6);
34         //     fn(2,4,6,8);
35         //
36         //     function fn(a,b,c) {
37         //         // console.log(arguments);
38         //         console.log(fn.length);         //获取形参的个数
39         //         console.log(arguments.length);  //获取实参的个数
40         //
41         //         console.log("----------------");
42         //     }
43 
44     // arguments可以修改元素，但不能改变数组的长短
45     //             fn(2,4);
46     //             fn(2,4,6);
47     //             fn(2,4,6,8);
48     //
49     //             function fn(a,b) {
50     //                 console.log(arguments)
51     //                 arguments[0] = 99;  //将实参的第一个数改为99
52     //                 // arguments.push(8);  //此方法不通过，因为无法增加元素
53     //             }
54 
55     // 清空数组的几种方式
56     //         var array = [1,2,3,4,5,6];
57     //         console.log(array);
58     //
59     //         // array.splice(0);      //方式1：删除数组中所有项目
60     //         // array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
61     //          array = [];           //方式3：推荐
62 
63     // function add() {
64     //     console.log(arguments);
65     //     for(var i=0; i<arguments.length;i++){
66     //         console.log(arguments[i]);
67     //     }
68     // }
69     // add('1',2,3);
70     console.log(window);
71         console.log(document);
72         console.log(document.documentElement);
73         console.log(document.body);
74 
75 </script>
76 
77 </body>
78 </html>