홈 탐색 도움말
로그인
lovecoding
/
class
10
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

js基础

e 1 년 전
커밋
e6c0d49c38
18개의 변경된 파일과 658개의 추가작업 그리고 0개의 파일을 삭제
분할 보기 변경상태 보기
  1. 28 0
      js+vue/js/js基础/1.js的引入.html
  2. 1 0
      js+vue/js/js基础/1.js的引入.js
  3. 51 0
      js+vue/js/js基础/10.例子.html
  4. 48 0
      js+vue/js/js基础/11.循环语句.html
  5. 27 0
      js+vue/js/js基础/12.break和continue.html
  6. 16 0
      js+vue/js/js基础/13.案例.html
  7. 37 0
      js+vue/js/js基础/14.函数.html
  8. 37 0
      js+vue/js/js基础/15.数组.html
  9. 62 0
      js+vue/js/js基础/16.对象.html
  10. 23 0
      js+vue/js/js基础/17.Date对象.html
  11. 28 0
      js+vue/js/js基础/2.变量.html
  12. 48 0
      js+vue/js/js基础/3.js的类型.html
  13. 49 0
      js+vue/js/js基础/4.远算符.html
  14. 36 0
      js+vue/js/js基础/5.运算.html
  15. 44 0
      js+vue/js/js基础/6.运算.html
  16. 20 0
      js+vue/js/js基础/7.三元运算符.html
  17. 26 0
      js+vue/js/js基础/8.语句.html
  18. 77 0
      js+vue/js/js基础/9.条件判断.html

+ 28 - 0
js+vue/js/js基础/1.js的引入.html
파일 보기 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        js => JavaScript 
+        弱语言类型：数据决定类型 js
 
+        强语言类型: 类型决定数据 ts
 
+        1 => 数字
 
+        "哈哈" => 字符串
 
+        引入：
 
+        1.js写在script标签中
 
+        2.外链引入
 
+
 
+     -->
 
+     <!-- <script>
 
+        window.alert("弹出了");
 
+     </script> -->
 
+     <script src="./1.js的引入.js"></script>
 
+</body>
 
+</html>

+ 1 - 0
js+vue/js/js基础/1.js的引入.js
파일 보기 

@@ -0,0 +1 @@
 
+alert("这是外面的")

+ 51 - 0
js+vue/js/js基础/10.例子.html
파일 보기 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        需求：
 
+        1.进入页面，输入月份，判断是几月并弹出该月的实际天数
 
+        2.  输入年份  判断年份是平年还是闰年并弹出结果?
 
+            判断平年（common year）和闰年（leap year）的计算方法很简答： 
+            1. 如果年份是整百年份，用年份除以400，没有余数即为闰年，有余数即为平年。
 
+            2. 如果年份不是整百年份，用年份除以4，没有余数即为闰年，有余数即为平年。 
+            说明：2096年和2104年都是闰年，但2100年是平年。
 
+     -->
 
+     <script>
 
+    var year = prompt("请输入年份");
 
+    if((year % 400 ==0) || (year % 4 == 0 && year % 100 != 0)) {
 
+        alert(year + '是闰年')
 
+    } else{
 
+        alert(year + '是平年')
 
+    }
 
+    //    var mouth = prompt("请输入月份");
 
+    //    switch(mouth) {
 
+    //     case "1":
 
+    //     case "3":
 
+    //     case "5":
 
+    //     case "7":
 
+    //     case "8":
 
+    //     case "10":
 
+    //     case "12":
 
+    //         alert("该月是31天");
 
+    //         break;
 
+    //     case 2:
 
+    //         alert("该月是28天");
 
+    //         break;
 
+    //     case 4:
 
+    //     case 6:
 
+    //     case 9:
 
+    //     case 11:
 
+    //         alert("该月是30天");
 
+    //         break;
 
+    //     default:
 
+    //         alert("您输入的月份不正确，请重新输入");
 
+    //         break;
 
+    //    }
 
+     </script>
 
+</body>
 
+</html>

+ 48 - 0
js+vue/js/js基础/11.循环语句.html
파일 보기 

@@ -0,0 +1,48 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        循环语句：
 
+            1.for循环
 
+            格式：for(初始化变量;表达式;执行语句) {
 
+                    循环的表达式
 
+                }
 
+            2.while循环
 
+            执行条件：当前执行语句必须是成立的状态
 
+            格式：while(执行的语句) {....}
 
+            3.do while循环
 
+            执行条件：无论执行语句是否成立，都会先执行一次
 
+            格式：do {....} while(执行语句)
 
+
 
+     -->
 
+    <script>
 
+    //    for(var i=0;i<5;i++) {
 
+    //     console.log(i,'i')
 
+    //    }
 
+    //    var a=0;
 
+    //    var b=5;
 
+    //    for(a;a<b;a++) {
 
+    //     console.log("这是第" + a + "次");
 
+    //    }
 
+    // for(var a=0,b=3;a<b;a++) {
 
+    //     console.log("这是第" + a + "次");
 
+    // }
 
+    // var a =6;
 
+    // while(a<=10) {
 
+    //     console.log("他是我弟" + a + "次循环");
 
+    //     a++;
 
+    //     // break;
 
+    //     // continue;
 
+    // }
 
+    var b = 3;
 
+    do{
 
+        console.log("能执行")
 
+    }while(b>5)
 
+    </script>
 
+</body>
 
+</html>

+ 27 - 0
js+vue/js/js基础/12.break和continue.html
파일 보기 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        结束循环
 
+        break:结束当前循环 对外层循环没有影响 
+        continue:结束本次循环 对外层循环没有影响
 
+     -->
 
+    <script>
 
+       for(var i=0;i<5;i++) {
 
+        for(var j=0;j<8;j++) {
 
+            if(j==6) {
 
+                // break;
 
+                continue;
 
+            }
 
+            console.log("这是第二层循环" + j);
 
+        }
 
+        console.log("这是第一层循环" + i);
 
+       }
 
+    </script>
 
+</body>
 
+</html>

+ 16 - 0
js+vue/js/js基础/13.案例.html
파일 보기 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 计算三角形面积
 
+        // 需求：进入页面输入 宽高（分开输入） 页面展示当前输入宽高的三角形面积？
 
+        // 用函数去写
 
+        
+    </script>
 
+</body>
 
+</html>

+ 37 - 0
js+vue/js/js基础/14.函数.html
파일 보기 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        函数
 
+        格式：
 
+            function 名字(形参) {执行的代码}
 
+            必须调用 
+            名字(实参)
 
+     -->
 
+    <script>
 
+        function fn1() {
 
+            // 往页面中输出内容
 
+            document.write("今天天气真好")
 
+        }
 
+        fn1();
 
+
 
+        function fn2(a) {
 
+            document.write(a*2);
 
+        }
 
+        fn2(5);
 
+
 
+        var c;
 
+        function fn3(x,y) {
 
+           c = x + y;
 
+        }
 
+        fn3(10,20)
 
+        console.log(c,'c')
 
+        // console.log(typeof(fn3));
 
+    </script>
 
+</body>
 
+</html>

+ 37 - 0
js+vue/js/js基础/15.数组.html
파일 보기 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!--  -->
 
+    <script>
 
+        // 单行注释 ctrl + /
 
+        /**
 
+         * 多行注释
 
+        */
 
+        // 1.定义数组
 
+       var arr1 = [];
 
+       var arr2 = new Array();
 
+        var arr3 = [1,2,'hahah','kfldklf'];
 
+       arr1[0] = "c";
 
+       arr1[1] = false;
 
+       arr1[2] = 4;
 
+       console.log(arr1,'1');
 
+        //如何获取数组长度
 
+        console.log(arr1.length)
 
+       console.log(arr3,'3');
 
+       console.log(arr3[2],'获取');
 
+        // 遍历数组
 
+        for(var i=0;i<arr3.length;i++){
 
+            console.log(i,'i');//0 1 2 3
 
+            document.write(arr3[i] + '<br/>')
 
+        }
 
+        
+
 
+        
+    </script>
 
+</body>
 
+</html>

+ 62 - 0
js+vue/js/js基础/16.对象.html
파일 보기 

@@ -0,0 +1,62 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        对象:引用数据类型
 
+     -->
 
+    <script>
 
+        // 1.定义对象
 
+        var obj1 = {};
 
+        console.log(obj1,'obj1');
 
+        var obj2 = {
 
+            a:1,
 
+            b:"我的"
 
+        }
 
+        console.log(obj2,'obj2');
 
+        var obj3 =  new Object();
 
+        console.log(obj3,'obj3');
 
+        // 对象.属性名 = 属性值
 
+        obj1.name = "小郑";
 
+        obj1.sex = "女"
 
+        console.log(obj1,'添加后obj1');
 
+        // 数组中定义对象
 
+        var newArr = [
 
+            {
 
+                id:1,
 
+                name:"孙悟空"
 
+            },
 
+            {
 
+                id:2,
 
+                name:"猪八戒",
 
+                love:["高老庄",'吃']
 
+            }
 
+        ]
 
+        for(var i=0;i<newArr.length;i++) {
 
+            console.log(newArr[1].love[1]);
 
+        }
 
+        //函数
 
+        // break continue return<函数>
 
+
 
+         function fn1(a,b) {
 
+           return a + b;
 
+        }
 
+        var c = fn1(3,4);
 
+        console.log(c,'c');
 
+
 
+        // 对象套函数
 
+        var obj4 = {
 
+            name:"唐僧",
 
+            age: 18,
 
+            love:function(a,b) {
 
+               return a*b
 
+            },
 
+        }
 
+        console.log(obj4.love(2,3))
 
+    </script>
 
+</body>
 
+</html>

+ 23 - 0
js+vue/js/js基础/17.Date对象.html
파일 보기 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 获取当前日期
 
+        var data = new Date();
 
+        console.log(data.getFullYear()); //获取年份
 
+        console.log(data.getMonth() + 1); //获取月份 0-11
 
+        console.log(data.getDate()); //获取日期
 
+        console.log(data.getHours()); //获取小时
 
+        console.log(data.getMinutes()); //获取分钟
 
+        console.log(data.getSeconds()); //获取秒数
 
+        console.log(data.getDay()); //获取星期
 
+        console.log(data.getMilliseconds()); //获取毫秒
 
+        console.log(data.getTime()); //获取时间戳
 
+    </script>
 
+</body>
 
+</html>

+ 28 - 0
js+vue/js/js基础/2.变量.html
파일 보기 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        定义变量：
 
+        = 赋值
 
+            声明变量：var 名字 = 数据
 
+        变量的命名规则：
 
+            1.变量的命名由英文，数字，下划线(_)及$(美元符号)组成；
 
+            2.变量的开头有英文，数字，$(美元符号)组成；
 
+            3.变量不能由关键字组成；
 
+            4.变量的命名必须严格区分大小写；
 
+     -->
 
+    <script>
 
+        var school = '东北大学1';
 
+        // 打印信息 console.log()
 
+        console.log(school);
 
+        // var new = '11';
 
+        var news = '111';
 
+        console.log(news);
 
+    </script>
 
+</body>
 
+</html>

+ 48 - 0
js+vue/js/js基础/3.js的类型.html
파일 보기 

@@ -0,0 +1,48 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        js 弱语言类型 
+        数据 => 类型
 
+        类型有什么？
 
+            1.基本数据类型:number string undefined boolean null(空的)
 
+            2.引用数据类型:Object(对象，数组，null，函数<暂时不说>)
 
+        检验类型：
 
+            typeof(校验的值)
 
+     -->
 
+     <a href=""></a>
 
+     <script>
 
+        // 基本
 
+        var a = 1; //数字类型 => number 蓝色的
 
+        console.log(a,'a的值');
 
+        console.log(typeof(a));
 
+        var b = '1';//字符串类型 => string 黑色的
 
+        console.log(b,'b的值');
 
+        console.log(typeof(b));
 
+        var c; // undefined 未定义类型
 
+        console.log(c);
 
+        console.log(typeof(c));
 
+        var d = true;//boolean 布尔值： true(真)1 ；false(假)0
 
+        console.log(d,'d');
 
+        console.log(typeof(d));
 
+        // 引用
 
+        var obj = {
 
+            a:1,
 
+            b:2
 
+        } //对象 => object 
+        console.log(obj,'obj')
 
+        console.log(typeof(obj),'obj1')
 
+        var arr = ['1','2','3']; //数组 => object
 
+        console.log(arr,'arr');
 
+        console.log(typeof(arr),'arr1');
 
+        var type = null;// null => object
 
+        console.log(type,'type')
 
+        console.log(typeof(type),'type1')
 
+     </script>
 
+</body>
 
+</html>

+ 49 - 0
js+vue/js/js基础/4.远算符.html
파일 보기 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        运算符: + - * / %(取余/取模)
 
+     -->
 
+    <script>
 
+        var a = 1;
 
+        var b = 10;
 
+        var c = 5;
 
+        var d = 21;
 
+        // 加法
 
+        console.log(a + 3);//4 number + number 加法运算
 
+        console.log(a + '90'); //190 number + string 拼接
 
+        console.log(a + true); //2 number + boolean 正常运算
 
+        console.log(a + undefined);//NaN 非法数字
 
+        console.log(a + null);// 1 number+null => number
 
+
 
+        // 减法
 
+        console.log(b - 3);//7 number - number 减法运算
 
+        console.log('90' - b); //80 number - string 正常减法运算
 
+        console.log(b - true); //9 number - boolean 正常运算
 
+        console.log(b - undefined);//NaN 非法数字
 
+        console.log(b - null);//10 number-null => number
 
+
 
+        // 乘法
 
+        console.log(c * 3);//15 number * number 乘法运算
 
+        console.log('9' * c); //45 number * string 正常运算
 
+        console.log(c * true); //5 number * boolean 正常运算
 
+        console.log(c * undefined);//NaN 非法数字
 
+        console.log(c * null);//0 number*null => 0
 
+
 
+        // 除法
 
+        console.log(d / 3);//7 number * number 除法运算
 
+        console.log(d / '3'); //7 number * string 正常运算
 
+        console.log(d / false); //Infinity number * boolean 正常运算
 
+        console.log(d / undefined);//NaN 非法数字
 
+        console.log(d / null);//Infinity number*null => Infinity
 
+
 
+        // ！important > 内联 > id ...
 
+        // +infinity    1000   100
 
+    </script>
 
+</body>
 
+</html>

+ 36 - 0
js+vue/js/js基础/5.运算.html
파일 보기 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        var a =5;
 
+        var b;
 
+
 
+        // 先赋值 后自增
 
+        b = a++;
 
+        console.log(a,'a');//6
 
+        console.log(b,'b');//5
 
+
 
+        // 先自增 后赋值
 
+        b = ++a;
 
+        console.log(a,'a');//7
 
+        console.log(b,'b');//7 
+
 
+        // 先赋值 后自减
 
+        b = a--;
 
+        console.log(a,'a');//6
 
+        console.log(b,'b');//7
 
+
 
+        // 先自减 后赋值
 
+        b = --a;
 
+        console.log(a,'a');//5
 
+        console.log(b,'b');//5 
+
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
js+vue/js/js基础/6.运算.html
파일 보기 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        关系运算符：
 
+        > = < <= >= 
+        逻辑运算符：
 
+            1.和 &&:都为真时才为真，一方为假则为假
 
+            2.或 ||:一方为真则为真,都为假时才为假
 
+            3.非  ！：返回的是否定值 相反值
 
+     -->
 
+    <script>
 
+        /**
 
+         *  = 赋值
 
+         *  == 强制转换 相等
 
+         *  === 完全相等
 
+        */
 
+
 
+        var a = 21;
 
+        var b = a;
 
+        console.log(b);
 
+        if(a === '21') {
 
+            console.log("成功")
 
+        }
 
+
 
+        console.log(2<3 || 5<4); // true
 
+        console.log(2>3 || 5<4); // false
 
+
 
+
 
+        
+        console.log(2<3 && 5<4); // false
 
+        console.log(2<3 && 5>4); // true
 
+
 
+            console.log(5!=2);//true
 
+        console.log(5!=5);//false
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 20 - 0
js+vue/js/js基础/7.三元运算符.html
파일 보기 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        三元运算/三目运算：
 
+            结构：
 
+                条件?'条件成立返回的值':'条件不成立返回的值'
 
+
 
+     -->
 
+    <script>
 
+        var a = 20;
 
+        console.log(a>5?'真真':"假假");
 
+    </script>
 
+</body>
 
+</html>

+ 26 - 0
js+vue/js/js基础/8.语句.html
파일 보기 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 语句：变量 + 条件 + 代码块
 
+        // {} 代码块
 
+        // var obj = {
 
+
 
+        // }
 
+        // 全局变量 => 全局作用域
 
+        var a = 2;
 
+        function fn() {
 
+            // 局部变量 => 局部作用域
 
+            var a = 1;
 
+            console.log(a,'a1')
 
+        }
 
+        fn();
 
+            console.log(a,'a2')//报错
 
+    </script>
 
+</body>
 
+</html>

+ 77 - 0
js+vue/js/js基础/9.条件判断.html
파일 보기 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        条件判断语句：2中
 
+        1.if判断
 
+        格式：
 
+            if（条件表达式） {
 
+                满足条件后所执行的语句
 
+            } else if(条件表达式) {
 
+                满足条件后所执行的语句
 
+            } else if(条件表达式) {
 
+                满足条件后所执行的语句
 
+            }
 
+             else {
 
+                不满足条件的语句
 
+            }
 
+        2.switch
 
+        格式：
 
+            switch(条件语句){
 
+                case 值：
 
+                    执行语句
 
+                    break;
 
+                case 值：
 
+                    执行语句
 
+                    break;
 
+                case 值：
 
+                    执行语句
 
+                    break;
 
+                case 值：
 
+                    执行语句
 
+                    break;
 
+                case 值：
 
+                    执行语句
 
+                    break;
 
+                ..........
 
+                default：
 
+                    默认执行语句
 
+                    break;
 
+            }
 
+     -->
 
+    <script>
 
+        var a = '23';
 
+        if(a < 17) {
 
+            console.log("这是一个" + a + "岁的孩子")
 
+        } else if( 17<a < 130) {
 
+            console.log("这是一个" + a + "岁的青年")
 
+        } else {
 
+            console.log("这是一个" + a + "岁的人")
 
+        }
 
+        var b=15;
 
+        // alert("111");//警告框
 
+        // confirm("haha")确认框
 
+        // prompt("输入啊");输入框
 
+        switch(b) {
 
+            case 1:
 
+                console.log("这是个为数");
 
+                break;
 
+            case 10:
 
+                console.log("这是十为数");
 
+                break;
 
+            case 100:
 
+                console.log("这是百为数");
 
+                break;
 
+            default:
 
+                console.log("不在取值范围内");
 
+                break;
 
+            
+        }
 
+    </script>
 
+</body>
 
+</html>