web-前端——Javascript的知识速学

JavaScript的环境搭建

开发环境：webstorm、hbulider
运行环境：chrome浏览器

代码

知识1

JavaScript的几种写法
1
2

3
4.实现数据再页面中显示

5 prompt弹出框
5.定义变量

 // var a =1;全局变量
         // var a =1;
         // alert(typeof (a))
        // const定义常量
        const pi = 3.12
        console.log(pi)
        为此我们一般使用let

6.实现简易算法
（也同样适用于逻辑运算符&&,||,!，和比较运算符<,>,=)

6.判断语句

parseInt//数据类型转换为整型，但不包括字符串
parsefloat//书局类型转换为浮点类型

知识2

JavaScript的作用：

1.数据校验
2.网页特性
3.数据交互
4.后端编程（Node）

知识3

JavaScript提供的对话框
1.警告框：alert（字符串）
2.确定框：windows

知识4

函数：
function函数名称【形参列表】{
//函数体
//return 返回值；
}
函数名称【实参列表】

// function  show(msg,name) {
        //     alert(`我叫${name},${msg}`)
        //
        // }
        // show("123","2334")

        // function add(x,y) {
        //     return x+y;
        //
        //
        // }
        // let a = add(2,3)
        // alert(a)
    //    匿名函数
       let a=  function () {
           alert("匿名函数")

        }
        function aa(a,10) 

知识5

数组Array

一定注意：js数组，不是java中数组的概念，类似与java中linklist，底层是使用一个双向链表结构的

// //如何定义数组
        // let arr = new Array()
        // console.log(arr)
        // arr.push(10)
        // arr.push(100)
        // arr.push(1000)
        // //可以使用下标的方式赋值
        // arr[4]=1000;
        // console.log(arr)
        // arr[10]= '123'
        //定义的时候，给定大小
        // let arr2 = new Array(10);
        // arr2.push(100)
        // console.log(arr2)
        //可以在创建数组的时候，给定值
        // let arr3 = new Array(1,2,3,"1223","22","233");
        // console.log(arr3)
        //也可以这么干
        // let arr4 = [1,2,3]
        // console.log(arr4)
        //数组的遍历
        // let arr = new Array(1,2,3,4)
        // for (let i =0;i<arr.length;++i) {
        //     console.log(arr[i])
        // }
        //*注意: JavaScript中使用for in结构数组迭代时，迭代出的每一个值是下标*如果迭代的是对象，则迭代出的是对象的属性
       //
        function say() {
            alert(this.age)
        }
        let obj = new Object();
        obj.name = "123"
        obj['age'] = 16;
        obj.say = say;//函数对象
        for (p in obj) {
            console.log(p)
        }

补充·：

//es6的数组方式
        let arr3 = new Array(1,2,3,"1223","22","233");
        for (i of arr3) {
            console.log(i)
        }
        arr3.forEach(function (item,key) {
            console.log(item,key)
        })

知识6

字符串

 //1.字符串的创建,若数据的特点，由值来决定变量的类型
        // let s ="this is a string"
        // console.info(typeof (s))

        //2.JavaScript提供内置类，STring,这边是创建了一个对象
        // let s = new String("this is a string")
        // console.log(typeof s)
        //3.不要使用new关键字
        let s =String('abc')
        // console.info(s)
        //获取字符串的长度
        // console.log(s.length)
        // console.info(s[0])
        // console.log(s.substr(0,1))
        console.info(s.toUpperCase())//大写转换
        console.info(s.toLowerCase())//小写

        //遍历字符串
        // for (i in s) {
        //     console.info(s[i])
        // }

Math函数的使用

 console.log(Math.E)
        console.log(Math.PI )//圆周率
        //ceil向上取整数，floor向下取整数
        console.log(Math.ceil(5.6))
        console.log(Math.ceil(5.06))
        console.log(Math.floor(5.06))
        console.log(Math.floor(5.06))
        console.log(Math.max(5,9))
        console.log(Math.random()*10)//取随机数，会是小数，所以可以用parseInt来取整数

        console.log(Math.round(5.06))//四舍五入

setInterval的使用

  function msg() {
            alert("3秒后，我弹出来了")
        }
        setInterval(msg,3000);
          // clearInterval(timer)//清除数据

BOM和DOM编程：

由js提供了一套对应的API，让开发者可以通过这套API实现实现对浏览器的各种操作（打开，关闭，刷新，重置）

windows对象

其中移动浏览器的js不适用与谷歌，只适用与IE

 <button onclick="closeWin();">点击关闭浏览器</button>
    <button onclick="moveWin();">移动浏览器</button>
    <button onclick="moveWin2();">移动浏览器</button>
    <button onclick="openWin();">打开一个新的窗口</button>

    <button onclick="goTop();" style="position: fixed; right: 30px; bottom: 30px;">回到顶部</button>

<script>
//    console.info(this)

    function goTop() {
        window.scrollTo(0, 0);//跳转
    }
    
    function closeWin() {
        if (window.confirm("确定要关闭浏览器吗？")) {
            window.close();
        }
    }
    
    function moveWin() {
        window.moveTo(100, 200);
    }
    
    function moveWin2() {
        window.moveBy(100, 200);
    }
    
    function openWin() {
//        window.open("http://www.baidu.com", "_blank", "toolbar=yes")
        window.open("http://www.baidu.com", "_blank");
    }

history对象（windows的子对象,主要负责浏览器的历史记录）

    // 代表页面被打开的次数
    console.log(window.history.length);

    function myBack() {
//            history.back();
      // go函数
      /**
       *  如果参数是0，表示不跳转
       *  如果是正数，则表示前进，数字是多少，表示前进几步
       *  负数则反之，表示后退
       */
      history.go(-1);
    }

    function forward() {
      history.forward();
      // history.go(1);
    }
  </script>
</head>
<body>
<button onclick="forward();">前进</button>
<button onclick="myBack();">后退</button>
<a href="test.html">下一个页面</a>
</body>

获取屏幕长宽

console.log(screen.height)
        console.log(screen.width)

        console.log(screen.availWidth)
        console.log(screen.availHeight) // 有效高度 去除了底部任务栏的高度

获取电脑信息（navigator）

// 获取了内核信息

    console.info(window.navigator.platform)
    console.info(navigator.platform) // 返回浏览器的代码名

    console.info(window.navigator.cookieEnabled) // 返回指明浏览器中是否启用 cookie 的布尔值
    console.info(window.navigator.appVersion) // 返回浏览器的平台和版本信息
    console.info(window.navigator.appCodeName) // 返回浏览器的代码名 Mozilla
    // 借助谷歌地图进行经纬度的定位
    //    console.info(window.navigator.geolocation)

    // 用户代理对象
    //    console.info(navigator.userAgent)

location对象

 // 刷新页面
    //    setTimeout(function () {
    //        window.location.reload();
    //    }, 5000);

 // 常见的属性
    console.info(location.href)   /*拿到网址*/
    console.info(location.protocol) /*协议*/
    console.info(location.port)/*端口*/
    console.info(location.hostname)/*主机*/
    console.info(location.host)/*主机加端口*/
    console.info(location.pathname)/*url*/
    console.info(location.hash)/**/
    console.info(location.search)/*为了获取网址问好后面的代码，目的是为了页面刷新*/

    function openWin() {
        window.location.href = "http://www.baidu.com";
    }

    function openWin2() {
       window.location.href.replace("04.location对象.html", "01.history对象.html")
    }

document对象

  // 1、直接使用id操作标签，绝对禁止使用
    //        console.log(box)
    //        box.innerHTML = "我修改了这个内容";

    // 2、document.getElementById 通过id来获取DOM对象
    //        let box = document.getElementById("box");
    //        console.log(box);

    // 3、使用class类名称获取一组标签
    // 通过className获取的是一组标签，是一个类似于数组的集合
    // 所以如果要操作里面的DOM对象，则需要取出来（下标）处理
    //        let boxs = document.getElementsByClassName("box");
    //        console.info(boxs)
    //        boxs[4].innerHTML = "我修改了这个内容";

    // 4、通过标签名称获取需要的标签组
    //        var divs = document.getElementsByTagName("div");
    //        console.info(divs);

    // 5、通过name属性获取DOM对象
    // 通常是表单标签需要使用的
    //        var boxs = document.getElementsByName("box");
    //        console.info(boxs);
    //        boxs[0].checked = true;


    // 6、ES5 同时两个新的API
    // querySelector只能获取一个DOM对象，因此一般使用的id
    //        let box = document.querySelector("#box");
    //        let box = document.querySelector(".box");
    //        console.info(box)
    //        box.innerHTML = `<h1>这个标签</h1>`

    // let boxs = document.querySelectorAll(".box");
    // console.info(boxs)
    // for (box of boxs){
    //     box.innerHTML = `<h1>这个标签</h1>`;
    // }

DOM属性的操作

 let box = document.getElementById("box");
  //        box.title = "这个是我新的标题";
  //        box.style.color = "red";

  //        box["title"] = "数组方式设置的"

  // getAttribute  setAttribute()
  var s = box.getAttribute("aa");
  console.info(s)
  // class建议通过className
  //        box.className = "box";
  // 不建议使用下面这种
  //        box.setAttribute("class", "box");

DOM事件获取数据，以及如何更改数据

<style type="text/css">
        #show {
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div style="width: 300px;" id="show" onclick="scale()">这个是一个div</div>
<script>
    var _show = document.getElementById("show");
    // 1、第一种方式：DOM对象.style.样式 这种方式，只能获取行内样式
    //只能获取样式中的宽度，不能获取高度，应为高度设置的属于行内样式
    console.log(_show.style.width);
    console.log(_show.style.height);
    // 2、第二种方式，w3c规定获取样式值的方式
    console.log(getComputedStyle(_show).height)
    console.info(getComputedStyle(_show).width)
    function scale() {
        var _show = document.getElementById("show");
        // 获取宽和高，这边获取的数据是带有“px”的
        var h = getComputedStyle(_show).height;
        var w = getComputedStyle(_show).width;
        console.info(h, w)
        // 因为有单位，是字符串，需要先去掉，运算完成后，在拼接单位
        _show.style.height = parseInt(h) + 10 + "px";
        _show.style.width = parseInt(w) + 10 + "px";
        // 获取宽和高，只能获取行内样式
        //offset是为了获取纯数据，不带像素的，相当于取值
        console.log(_show.offsetHeight, _show.offsetWidth)
        console.log(_show.clientHeight, _show.clientWidth)
        _show.style.height = _show.offsetHeight + 10 + "px";
        _show.style.width = _show.offsetWidth + 10 + "px";
    }
</script>

实现抽奖案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎抽奖</title>
    <style>
        .box {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            text-align: center;
        }

        .box > div {
            width: 300px;
            height: 300px;
            background-color: #4c8174;
            border-radius: 50%;
            margin: auto;
            line-height: 300px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            /*margin-top: 50px;*/
        }

        .box > a {
            text-decoration: none;
            font-size: 20px;
            display: inline-block;
            background-image: linear-gradient(to right, skyblue, #4c8174);
            width: 200px;
            height: 50px;
            border-radius: 20px;
            line-height: 50px;
            color: white;
            margin: 30px;
        }

        .bg-red {
            background-color: red !important;
            /*important设置权重让他优先使用*/
        }

        .bg-primary {
            background-color: #8A2BE2 !important;
        }

        .bg-success {
            background-color: green !important;
        }
    </style>
</head>
<body>
<div class="box">
    <div id="content">奖品</div>
    <a href="#" id="start" onclick="run();">开始抽奖</a>
</div>

<script !src="">
    /*原理是开始抽奖的时候会进行random随机商品的跳转，停止抽奖的时候random函数不在使用*/
    // 定义一个数组
    const goods = ["iphone13 MAX", "宝马5", "电脑一台", "笔记本", "笔", "路由器", "java课程优惠券", "娃娃", "牛肉面一碗", "国庆7日游"];

    let flag = true;/*boolean值的控制*/
    let content = document.getElementById("content");
    let start = document.querySelector("#start");
    let timer;/*设置全局变量让下面的函数能使用这个变量*/
    let index;
    function run() {
        if (flag) {
            flag = false;
            start.innerText = "停止抽奖";
            // content.className = "bg-red";
            content.style.background = "yellow"
            //设置循环函数，将商品随机抽取
            timer = window.setInterval(function () {
                index = Math.floor(Math.random() * goods.length);/*随机取一个值，并且向下取整数*/
                let g = goods[index];/*通过下标来获取每个奖品的数据*/

                    content.textContent = g;/*函数获取商品数据*/
               

            }, 10);
        } else {
            flag = true;
            start.innerText = "开始抽奖";
            content.className = "bg-primary";/*获取数据䣌样式*/
            window.clearInterval(timer);
        }
    }
</script>
</body>
</html>

事件（event）

事件的三元素：事件源，事件对象，事件处理函数
Js是如何处理事件的方式
1.直接使用onxxx绑定的事件，常规情况下，this关键字指向windows对象
2.如果要处理复杂的事件，建议通过对象绑定方式，第一步获取DOM对象
dom对象.xxx = func
this表示的是事件对象本身
好处：1.实现三层分离，html和js之间断开直接的绑定关系
2.可以直接获取事件对象

3.事件监听
指定事件流的流动方式（冒泡流、捕获流）