12-2 js基礎

時間 2019-11-29

原文原文鏈接

一數據類型html

 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

三經常使用內置對象dom

  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

四運算符ide

賦值運算符函數

算數運算符spa

比較運算符3d

實例：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

五流程控制htm

實例：對象

  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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。