JavaScript学习（1） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js代码
        console.log(1 + 1)
        // 申明变量 var
        var x  // 申明未赋值：默认值为undefined(None)
        console.log("x",x)
        x = 100
        console.log("x",x)
        // 申明并赋值
        var y = 100
        console.log("y",y)
        // 一行赋多值
        var a = 1, b = "zhangsan"
        console.log("a",a)
        console.log("b",b)
        // 求长度
        console.log("b",b.length)
        // 大写小写
        console.log(b.toUpperCase())
        console.log(b.toLowerCase())
        // 索引
        console.log(b[3])
        console.log(b.indexOf("a"))
        // 切片,顾头不顾尾
        console.log(b.slice(1,4))
        console.log(b.slice(-4,-1))  
        console.log(b.slice(3))  // 从序号为3一直取到最后
        var s2 = "上海 北京 武汉"
        console.log(s2.split(" "))  // 拆分 ["上海", "北京", "武汉"]
        
        str = "hello world"
        console.log(str.substr(2,3))  // 从序号为2开始取，取3个

        var password = "   hello w   "
        console.log(password.trim())  // 去除两端空格
        // 布尔类型
        var t = true
        console.log(t, typeof t)
        console.log(2 > 3)  // false
        console.log(2 == "2")  // true 会将字符串转换为数字
        console.log(2 === "2")  // false 三个等号表示全等，不进行数据类型转换

        var box1 = "一共100个人"
        ret = parseInt(box1)
        console.log(ret, typeof ret)  // NaN(Not a Number) "number"
        var box2 = "100个人"
        ret1 = parseInt(box2)
        console.log(ret1, typeof ret1)  // 100 "number"

        var num = 100
        console.log(num.toString(), typeof num.toString())

        // 零值
        /*
        字符串的零值为空""
        数字的零值为0
        布尔的零值为false
        数组、字典没有零值
        */

        var box2 = 1 + "200"
        console.log(box2)   // 1200  按照字符串拼接，类型为string
        var box3 = 1 - "200"
        console.log(box3)  // -199 按照科学计算，类型为number

        var x = 1
        // x += 1
        ret1 = x++  // 先赋值再计算
        ret2 = ++x  // 先计算再赋值
        console.log(x)  // 3
        console.log("ret1", ret1)  // 1
        console.log("ret2", ret2)  // 3

        //逻辑运算符
        /*
        &&   并且  and    两边的运算结果为true,最终结果才是true
        ||   或者  or     两边的运算结果为false,最终结果才是false
        !    非    not    运算符的结果如果是true,则最终结果是false ,反之亦然.
        */
       var age = 17
       console.log(age > 18?"成年":"未成年")  // 相当于if，else判断age是否大于18，大于就输出成年，否则未成年
       
       // if语句
       var score = 78
       if (score > 90){
           console.log("成绩优秀")
       }else if(score > 80){
           console.log("成绩良好")
       }else if(score > 60){
           console.log("成绩及格")
       }else{
           console.log("成绩不几个")
       }

       // switch分支
       var week = 3
       switch(week){
           case 1:console.log("星期1");break
           case 2:console.log("星期2");break
           case 3:console.log("星期3");break
           case 4:console.log("星期4");break
           case 5:console.log("星期5");break
           case 6:console.log("星期6");break
           case 0:console.log("星期7");break
           default:console.log("非法输入")
       }
       // 循环语句
       /*
       while循环：
       while(表达式){
           循环语句
       }

       for循环：
       for (初始变量;条件判断;步进语句){
           循环语句
       }
       */
      var count = 1
      while (count <= 100){
          if (count === 88){
              count++
              continue  // 退出档次循环
          }
          console.log(count)
          count++
      }

      // 三要素for循环
      var s = 0
      for (var i = 1; i <= 100; i ++){
          console.log(i)
          s += i
      }
      console.log(s)

      // 遍历for循环
      var lst = [1,2,3,4,5,6,7,8,9]
      for (var i in lst){
          console.log(lst[i])
      }

    //   random = Math.round(Math.random() * 10)
    //   console.log(random)
    //   var time = 3
    //   while (time > 0){
    //       var ret = prompt("请输入数字：","默认值")
    //       console.log(ret)
    //       if (time ===1 && ret != random){
    //           console.log("都没才对，继续努力！")
    //       }else{
    //             if (ret > random){
    //                 console.log("太大了")
    //             }else if (ret < random){
    //                 console.log("太小了")
    //             }else{
    //                 console.log("恭喜您，猜对了！")
    //                 break
    //             }
    //         }
    //         time--
    //     }

        var arr = [1,2,3,4,5]
        console.log(arr.push(6))  //在数组最后追加元素
        console.log(arr.pop())  // 在数组结尾删除元素
        console.log(arr.shift())  // 删除第一个元素
        console.log(arr.unshift(100))  // 在最前面添加元素
        console.log(arr.reverse())  // 倒排元素
        console.log(arr.sort())  // 默认按照字符串排序

        arr.sort(function(a,b){
            return a - b
        })  // 按照数字大小排序，需要借用函数
        console.log(arr)

        // Splice方法
        console.log(arr.splice(2,2))  // 从序号为2开始删除总共删除2个元素
        console.log(arr)
        arr.splice(1,0,6,7,8)  // 当删除元素个数为0时，为添加元素，从需要为1的位置开始插入，插入元素6.7.8
        console.log(arr)
        arr.splice(2,2,77,88)  // 从索引为2的地方，替换2个元素为77，88
        console.log(arr)

        var arr1 = [1,2,3]
        var arr2 = [4,5,6]
        var ret = arr1.concat(arr2)
        console.log(ret)  // 拼接数组，arr1不变

        // join方法
        var arr3 = ["上海", "北京", "武汉"]
        var s = arr3.join(",")  // 以，作为分隔符，拼接成字符串
        console.log(s)

        // object对象
        var obj = new Object()
        obj.name = "yuan"
        obj.age = 12
        console.log(obj, typeof obj)

        var obj2 = {
            "name":"yuan",
            "age":22
        }
        console.log(obj2, typeof obj2)

        console.log(obj2.name)
        console.log(obj2["name"])

        for (var k in obj){  // 遍历对象元素
            console.log(obj[k])
        }

        var res = '[{"title":"西游记","price":100},{"title":"水浒传","price":200},{"title":"三国演义","price":300}]'
        var data = JSON.parse(res)  // 反序列化
        console.log(data)
        for (index in data){
            book = data[index]
            console.log(book.title,book.price)
        }

        console.log(JSON.stringify(obj2))  // 序列化 {"name":"yuan","age":22}

        var now = new Date()
        console.log(now, typeof now)  // Sat Jul 10 2021 15:18:33 GMT+0800 (中国标准时间) "object"
        console.log(now.toLocaleString())  // 2021/7/10下午3:18:33

        var date = new Date("2004-3-20 11:12")
        console.log(date.toLocaleString())  // 2004/3/20上午11:12:00
        console.log(date.getFullYear())  // 2004
        console.log(date.getMonth())  // 2（月份从0-11）
        console.log(date.getDate())  // 20（日）
        console.log(date.getDay())  // 2(获取星期几)

        var date2 = new Date(50000000000)
        console.log(date2.toLocaleString())  // 1971/8/3上午12:53:20
        console.log(date2.toUTCString())  // Mon, 02 Aug 1971 16:53:20 GMT

        // Math对象
        console.log(Math.abs(-1.2))  // 1.2 绝对值
        console.log(Math.ceil(3.14))  // 4 向上取整
        console.log(Math.floor(3.14))  // 3 向下取整
        console.log(Math.round(3.94))  // 4 四舍五入
        console.log(Math.max(3.94,2,3,4,5,6))  // 6 最大值
        console.log(Math.random())  // 0-1之间随机值

        // 函数
        /*
        申明函数：
        function 函数名(参数,..){
            函数体
        }

        调用函数：
        foo()
        */
       function foo(){
           console.log("foo...")
       }
       foo()

       function add(x,y){
        console.log(x + y)
       }
       add(1,2)

       function add2(){  // 不定义参数的时候，将所传的所有参数作为数组赋值给arguments
           var s = 0
           for (var i in arguments){
               s += arguments[i]
           }
           console.log(s)
       }

       add2(2,3,4,5,6)

       function foo(){
           var x1 = 10  // 申明一个局部变量
           x2 = 20  // 申请一个全局变量
       }

       function bar(){
           console.log("**",x2)  // 20 可以打印
           // console.log("**",x1)  // 报错：x1 is not defined
           
       }
       foo()

       var ID = window.setInterval(bar,1000)  // 每隔1s调用一次bar函数
       console.log(ID)
       window.clearInterval(ID)  // 取消定时器

       var ID = window.setTimeout(bar,1000)  // 1s后调用bar函数

       function show(){
           //获取时间字符串
            var now = new Date()
            console.log(now.toLocaleString())
           // 查找input标签对象
            var ele = document.getElementById("i1")
           //将时间字符串赋值给input的value属性
            ele.value = now.toLocaleString()

       }

       var timeid
       function start(){
           if (timeid===undefined){  // 当等于undefined的时候才执行每秒调用show
                show()
                // 每隔1s执行一次show函数
                timeid = setInterval(show,1000)
           }
           
       }

       function end(){
           clearInterval(timeid)
           timeid = undefined  // 停止循环定时器之后，将timeid重置为undefined，以便下一次点击start函数能匹配上
          
       }

    </script>
    <!-- 引入方式2 -->
    <script src="demo.js"></script>
</head>
<body>
<input type="text" value="" id="i1">
<input type="button" value="开始" onclick="start()">
<input type="button" value="结束" onclick="end()">
</body>
</html>

 

posted on 2021-07-10 17:08  torotoise512  阅读(19)  评论(0)    收藏  举报