JavaScript

概述：

• 解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
• 解释器称为JavaScript引擎，作为浏览器的一部分。
• 用来给HTML网页增加动态功能，定义网页的行为。

JavaScript包含三部分：

• ECMAScript语法
• 文档对象模型（DOM Document Object Model）
• 浏览器对象模型（BOM Browser Object Model）

在html中使用JS的三种方式：

    <h1>javascript三种使用方式</h1>
    <ul>
      <li>1.在script标签中编写js：放在网页中任何位置，推荐网页的最后</li>
      <li>2.在独立js文件中编写: 网页需要使用script标签关联js文件。</li>
      <li>3.在标签的事件属性中编写: 要写事件属性</li>
    </ul>
    <input
      type="button"
      value="普通按钮"
      onclick="alert('欢迎使用javascript')"
    />
    <!--注意：关联外部js文件，必须要写script的结束标签。-->
    <script src="js/myjs.js" type="text/javascript"></script>

    <script type="text/javascript">
      //单行注释
      /*多行注释*/
      // hello world
      //第一种写法:弹出提示窗口
      //alert("helloworld");
      //第二种写法:文档中输出helloworld
      //document.write("helloworld javascript");
      //第三种写法:在控制台输出helloworld
      console.log("helloworld javascript");
    </script>

变量：内存中的一块存储空间。

JS中变量都用var关键字来声明，var是variable的缩写。

注意：var num = 100;

• var是声明关键字，num是变量名
• 语句以分号结尾；分号可省略

命名规范：

• 包含字母、数字、下划线和美元符号
• 不能以数字开头
• 变量名不能是关键字
• 区分大小写

JavaScript注释有两种：

• // 单行注释
• /* 多行注释 */

    <h1>javascript变量的使用</h1>
    <ul>
      <li>1 使用var(variable)关键字声明变量</li>
      <li>2 弱类型语言，声明变量时不需要指定类型，赋值时决定类型,可以变化</li>
      <li>
        3 var是声明关键字，num是变量名，语句以分号结尾；分号可省略,推荐编写
      </li>
    </ul>
    <h2>变量命名规范：</h2>
    <ul>
      <li>包含字母、数字、下划线和美元符号。</li>
      <li>不能以数字开头。</li>
      <li>变量名不能是关键字。</li>
      <li>区分大小写</li>
    </ul>

    <script type="text/javascript">
      //声明变量
      var num;
      //赋值
      num = 100;
      //声明同时赋值
      var stuName = "灿灿"; //字符串使用双引号或单引号
      var address = "北京昌平";
      num = "helloword";
      var abc = 100;

      //使用变量
      document.write("num:" + num + "<br/>");
      document.write("stuName:" + stuName + "<br/>");
      document.write("address:" + address + "<br/>");
      document.write("abc:" + abc + "<br/>");

[wppay]

• 基本类型: number,string,boolean,undefined,null
  • string类型可用双引号或单引号表示
  • 使用typeof运算符检测一个变量的类型
    • 使用方式：typeof(变量名) 或 typeof 变量名
• 引用类型: Object、Array、String、Date、Number等等
  • Object表示任何对象
  • 创建数组时可不用指定长度

    <script type="text/javascript">
      //number
      var age = 20;
      //string
      var username = "张三";
      //boolean
      var flag = true;
      //undefined
      var address;
      //null
      var email = null;
      document.write("====================基本类型====================");
      document.write("<br/>");
      document.write("age:" + age + "---" + typeof age);
      document.write("<br/>");
      document.write("username:" + username + "---" + typeof username);
      document.write("<br/>");
      document.write("flag:" + flag + "---" + typeof flag);
      document.write("<br/>");
      document.write("address:" + address + "---" + typeof address);
      document.write("<br/>");
      document.write("email:" + email + "---" + typeof email);
      document.write("<br/>");
    </script>

Object

    <script>
      //引用类型
      document.write("=====================引用类型 ===================");
      document.write("<br/>");
      var obj = new Object();
      var date = new Date();
      document.write(
        "obj:" + obj + "----" + typeof obj + "-------" + (obj instanceof Object)
      );
      document.write("<br/>");
      document.write("date:" + date + "----" + typeof date);

      //创建人对象
      var person = new Object();
      //动态添加属性和方法(函数)
      person.name = "灿灿";
      person.age = 20;
      person.address = "上海";
      person.show = function () {
        alert(this.name + "..." + this.age + "..." + this.address);
      };
      person.show();

      //推荐json表示法创建对象
      var person2 = { name: "李四", age: 20, address: "广州" };
      alert(person2.name + "..." + person2.age + "..." + person2.address);

      /*像java一样创建类 了解*/
      function Animal() {
        //属性
        this.breed;
        this.age;
        this.sex;
        //方法 （函数
        this.show = function () {
          alert(this.breed + "----" + this.age + "----" + this.sex);
        };
      }

      var dog = new Object();
      dog.breed = "哈士奇";
      dog.age = 2;
      dog.sex = "公";
      dog.show = function () {
        alert(this.breed + "----" + this.age + "----" + this.sex);
      };
      dog.show();
    </script>

Array：数组

    <script>
      // 1.new对象的方式创建数组
      var arr = new Array();
      arr[0] = 15;
      arr[1] = 20;
      document.write(arr.length + "<br/>");
      document.write(typeof arr + "<br/>");
      for (var i = 0; i < arr.length; i++) {
        document.write(arr[i] + "&nbsp");
      }
      document.write("<br/>");
      for (var i in arr) {
        document.write(i + "&nbsp");
      }
      document.write("<br/>");

      //2.其他方式添加移除元素
      arr.push(100);
      document.write("push之后：" + arr.length);
      document.write("<br/>");
      arr.pop();
      document.write("pop之后：" + arr.length);
      document.write("<br/>");

      // 3.Array不仅可以做数组也可以做Map
      var hashmap = new Array();
      hashmap["cn"] = "中国";
      hashmap["uk"] = "英国";
      hashmap.kor = "韩国";
      // 当作hsahmap时长度为0
      document.write(hashmap.length + "<br/>");
      for (var i in hashmap) {
        document.write(hashmap[i]);
      }
      document.write("<br/>");

      // 4.使用JSON表示法创建数组 JavaScript Object Notation
      var arr2 = [12, 3, 432, 3.5];
      document.write(arr2.length);
      document.write("<br/>");
      // 在数组中创建对象
      var arr3 = [
        { name: "lz", age: 20 },
        { name: "wl", age: 40 },
      ];
      for (let i = 0; i < arr3.length; i++) {
        document.write(arr3[i].name + "  " + arr3[i].age + " ");
      }
    </script>

String：字符串

    <script>
      // 1.基本使用
      var username = "张三";
      var address = new String("北京");
      document.write(typeof username);
      document.write("<br/>");
      document.write(typeof address);

      var str1 = "hello";
      var str2 = "hello";
      document.write(str1 == str2);
      document.write("<br/>");
      var str3 = new String("hello");
      var str4 = new String("hello");
      document.write(str3 == str4);
      document.write("<br/>");
      document.write(str1 == str3);
      document.write("<br/>");

      // 2.常用的方法 更多方法看菜鸟教程等
      document.write(str1.charAt(0));
      document.write("<br/>");
      document.write(str1.substring(0, 3));
    </script>

算术运算符：+ 、- 、* 、/ 、% 、++、--

      // 2.5
      document.write(5 / 2);
      document.write("<br/>");
      // 1
      document.write(5 % 2);

赋值运算符：= 、+=、-=、*=、/=、%=

逻辑运算符：&&、||、！

关系运算符：==、!=、<、<=、>、>=、===

• ===全等于（值和类型完全相同）

三目运算符：布尔表达式? 结果1 : 结果2;

分支结构：if

    <script>
      /* if */
      var score = 99;
      if (score >= 90) {
        document.write("优秀");
      } else {
        document.write("加油");
      }
      document.write("<br/>");
      //  判断条件可以为：布尔值、变量
      //  如果判断条件为变量时，当变量值为0、null、undefined、
      //  NaN、false表示false不打印，其他情况为true
      //  使用的变量必须先进行声明，不声明会报错
      if (score) {
        document.write("成绩为：" + score);
      }
      document.write("<br/>");
      var obj = new Object();
      if (obj.haha) {
        //undefined
        document.write(obj.haha);
      }
      document.write("<br/>");
    </script>

分支结构：switch

    <!-- switch_case -->
    <script>
      var count = 1;
      switch (count) {
        case 1:
          document.write("1");
          break;
        case 2:
          document.write("2");
      }
    </script>

    for循环 while循环 do_while循环
    <script>
      for (let i = 0; i < 100; i++) {
        var str = "你好";
        let str2 = "hello world";
        document.write(i + " ");
      }
      document.write(i);
      document.write(str);
      document.write(window.i);
      document.write(window.str);
      // var作用范围全局
      // let作用范围当前大括号内
    </script>

break与continue:

• break用于结束循环、switch。
• continue用于结束本次循环、继续下—次循环。

概念：封装特定任务功能的代码块，使用function关键字定义函数。

  <!-- 1.概念：封装特定任务功能的代码块
            使用function关键字定义函数
       -->
    <script>
      function show() {
        for (let i = 1; i <= 9; i++) {
          for (let j = 0; j <= i; j++) {
            document.write(j + "*" + i + "=" + i * j);
          }
          document.write("<br/>");
        }
      }
      // 2.调用函数
      show();
      // 2.2 自执行匿名函数
      (function () {
        document.write("自执行匿名函数");
      })();
      //2.3 事件调用
    </script>
    <input type="button" onclick="show()" />

    <!-- 3.定义带参数带返回值的 -->
    <script>
      function add(n1, n2) {
        return n1 + n2;
      }
      var num = add(1, 2);
      document.write(num);
    </script>

    <input type="button" onclick="alert('你好')" value="alert" />
    <input type="button" onclick="confirm('确认删除吗')" value="confirm" />
    <input type="button" onclick="prompt('请输入内容')" value="prompt" />

    <script>
      //isNaN()判断这个数字是否不是一个数字
      //       不是返回 true ,是返回false
      document.write(parseInt("123"));
      document.write(parseFloat("12.22"));
      document.write(isNaN("qwe"));
    </script>

<body onload="pageload()">
    <!-- 
      onclick:当点击网页元素时执行
      onchange:当内容改变
      onsubmit:表单提交时执行
      onload:当页码加载完毕执行(只能添加到body里面)
      onfocus:获取焦点时执行
      onblur:失去焦点时执行
      onmouseover:鼠标移动到上面时
      onmouseout：鼠标移出上面时
      onmousemove:鼠标再元素中移动时执行
      以下未写案例
      onkeypress:键盘按下弹起时执行
      onkeydown:键盘按下时执行
      onkeyup:按下键盘弹起时执行
     -->
    <form action="" method="POST" onsubmit="return check()">
      用户名:<input
        id="username"
        type="text"
        name="usernaem"
        onchange="change1(this)"
        onfocus="focus1(this)"
        onblur="blur1(this)"
      /><br />
      <input type="submit" value="提交" />
    </form>
    <script>
      function check() {
        var username = document.getElementById("username").value;
        if (username == null || username.trim().length == 0) {
          alert("请输入用户名");
          return false;
        }
      }
      function change1(obj) {
        alert(obj.value);
      }
      function focus1(obj) {
        obj.style.backgroundColor = "yellow";
      }
      function blur1(obj) {
        obj.style.backgroundColor = "#00ffff";
      }
    </script>

    <!--onmouseover  onmouseout -->
    <div
      style="width: 200px; height: 100px; background-color: #00ffff"
      onmouseover="over(this)"
      onmouseout="out(this)"
    ></div>
    <script>
      function over(obj) {
        // 修改div的背景颜色
        obj.style.backgroundColor = "red";
      }
      function out(obj) {
        obj.style.backgroundColor = "#00ffff";
      }
    </script>

    <!-- onloaad 只能写在body里面 -->
    <script>
      function pageload() {
        alert("页面加载完毕");
      }
    </script>
  </body>

概述：

• 通过HTML DOM，可访问HTML 文档的所有元素。
• 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

  <body>
    <ul class="class1">
      <li id="demo">内容</li>
      <li id="demo2">内容2</li>
      <li id="demo3">内容3</li>
    </ul>
    <script>
      //第一步：先查找到元素(3种方式)
      // 方式1：依据元素的id
      var demo1 = document.getElementById("demo");
      console.log(demo1);
      console.log(demo1.innerHTML); //打印内容
      console.log(demo1.nodeType); //元素节点是1，属性节点是2，文本节点是3，注释节点是8
      // 方式2：依据标签名称
      var demo2 = document.getElementsByTagName("li");
      console.log(demo2);
      for (let i = 0; i < demo2.length; i++) {
        console.log(demo2[i].innerHTML);
      }
      // 方式3：依据class样式名称
      var demo3 = document.getElementsByClassName("class1");
      console.log(demo3);
      for (let i = 0; i < demo3.length; i++) {
        console.log(demo3[i].innerHTML);
      }
    </script>
  </body>

  <body>
    <p id="demo1" style="background-color: aqua">内<span>容</span></p>
    <input type="button" value="修改1" onclick="modify()" />
    <input type="button" value="修改2" onclick="modify2()" />
    <input id="input1" type="text" value="默认" />
    <img src="/1.png" id="img1" alt="为空" />
    <script>
      // 1.获取内容
      var demo1 = document.getElementById("demo1");
      // 1.1 只获取内容不获取标签
      console.log(demo1.innerHTML);
      // 1.2 如果内容中有标签也可以获取到
      console.log(demo1.innerText);

      // 2.设置内容
      // 2.1 innerHTML :只设置内容不设置标签
      function modify() {
        var demo1 = document.getElementById("demo1");
        demo1.innerHTML = "<span>修改后的内容</span>";
      }
      // 2.2 innerText ：标签也会设置上
      function modify2() {
        var demo1 = document.getElementById("demo1");
        demo1.innerText = "<span>修改后的内容</span>";
      }

      // 3.获取标签属性
      // 3.1 直接写属性
      console.log(demo1.id);
      console.log(demo1.style);
      // 3.2 通过方法获取
      console.log(demo1.getAttribute("id").id);

      //4.设置标签属性
      demo1.style.backgroundColor = "red";
      demo1.setAttribute("style", "background-color:green");

      //5.设置input的value值
      var demo1 = document.getElementById("input1");
      demo1.value = "修改后的内容";

      //6.让img在刷新页面是一直请求
      var demo1 = document.getElementById("img1");
      demo1.setAttribute("src", "/1.png?n=" + Math.random());
    </script>
  </body>

  <body>
    <style>
      #demo {
        background-color: aqua;
        width: 100px;
        height: 100px;
      }
    </style>
    <div id="demo">你好</div>
    <input type="button" value="获取样式" onclick="click1()" />
    <input type="button" value="设置样式" onclick="click2()" />

    <script>
      function click1() {
        var i = document.getElementById("demo");
        alert(getCss(i, "width"));
      }
      function click2() {
        var p2 = document.getElementById("demo");
        p2.style.fontSize = "22px";
        p2.style.backgroundColor = "orange";
      }
      //   为了兼容性考虑设置通用属性
      function getCss(obj, attr) {
        //chrome safira
        if (window.getComputedStyle) {
          return window.getComputedStyle(obj)[attr];
        } else if (window.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return null;
        }
      }
    </script>
  </body>

<body>
    <h1>JavaScriptDOM操作4：设置js事件</h1>
    <input id="btn1" type="button" value="按钮1" />
    <input id="btn2" type="button" value="按钮2" />
    <input id="username" type="text" name="username" />
    <div id="div1" style="background-color: skyblue; width: 200px; height: 200px;">
        <div id="div2" style="background-color: brown; width: 100px; height: 100px;"></div>
    </div>
    <script type="text/javascript">
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var username = document.getElementById("username");
    // 设置onclick事件
    
    // 情况1：第二个click会覆盖第一个click
/*    btn1.onclick = function() {
        alert("恭喜你，中奖了1");
    }

    btn1.onclick = function() {
        alert("恭喜你，中奖了2");
    }*/

      btn2.ondblclick = function() {
          alert("双击加关注");
      }
      //页面加载完毕执行
      window.onload = function() {
          alert("页面加载完毕了...");
      }
      //点击输入框时修改样式
      username.onfocus = function() {
          this.style.backgroundColor = "orange";
      }


      // 添加监听事件，让事件不会被覆盖
      // 冒泡：点击事件从里到外
      // 捕获：点击事件从外到里
      function f1() {
          alert("恭喜你，中奖了1");
      }

      function f2() {
          alert("恭喜你，中奖了2");
      }
      //使用事件监听的方式添加事件
      btn1.addEventListener("click", f1);
      btn1.addEventListener("click", f2);
      // 移除监听事件
      //btn1.removeEventListener("click", f1);

      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      div1.addEventListener("click", function() {
          alert("div1");
      }, true);//默认为冒泡，设置true为捕获
      div2.addEventListener("click", function() {
          alert("div2");
      }, true);
    </script>
</body>

<body>
    <h1>javascriptDOM操作1：创建和删除元素</h1>
    <div id="box">
        <span id="myspan">这是一个神奇的网站</span>
    </div>
    <input type="button" value="创建元素" onclick="click1()" />
    <input type="button" value="删除元素" onclick="click2()" />
    <script type="text/javascript">
    function click1() {
        //1 创建img标签
        var myimg = document.createElement("img");
        //2 设置属性
        myimg.src = "img/003.jpg";
        //3 添加网页中
        //3.1 追加
        //	var box=document.getElementById("box");
        //	box.appendChild(myimg);
        //3.2 插入
        var box = document.getElementById("box");
        var myspan = document.getElementById("myspan");
        box.insertBefore(myimg, myspan);

    }

    function click2() {
        var box = document.getElementById("box");
        //直接删除父元素
        //box.remove();
        //删除孩子节点
        //	var myspan=document.getElementById("myspan");
        //	box.removeChild(myspan);

        //清空box中孩子节点
        var count = box.children.length;
        for (var i = 0; i < count; i++) {
            box.removeChild(box.children[0]);
        }

    }
    </script>
</body>

概述：

• 浏览器对象模型(Browser Object Model) 使JavaScript 有能力与浏览器"对话"。
• 现代浏览器实现了和JavaScript 交互性方面的相同方法和属性，因此常被认为是
  BOM的方法和属性。

概述：

• 所有浏览器都支持window对象，它表示浏览器窗口。
• JavaScript 全局对象、函数以及变量均自动成为window 对象的成员。

属性：

• window.innerHeight：内部高度，不包括滚动条和工具栏。
• window.innerWidth：内部宽度，不包括滚动条和工具栏。

方法：

• open()：打开新的窗口。
• close()：关闭窗口。

    <script>
      window.document.getElementById("id");
      //window.alert("text");

      // 变量的分类：全局变量和局部变量
      // 全局变量定义在函数外部 作用全局 都会自动成为window的属性
      // 局部变量定义在函数内部 作用函数
      var num = 100;
      //alert(window.num);
      function show() {
        var num = 200;
        alert(num);
      }

      //   window对象的使用
      //   浏览器的内部高度和宽度
      //   alert(window.innerHeight);
      //   alert(window.innerWidth);

      // window对象中与BOM有关的方法
      // 打开窗口
      var newwin = window.open("http://www.baidu.com", "_blank");
      // 关闭当前窗口
      window.close();
      // 关闭打开的窗口
      newwin.close();
    </script>

• 表示当前屏幕对象。
• 属性：
  • screen.availWidth：可用的屏幕宽度
  • screen.availHeight：可用的屏幕高度

    <script>
      // 固定不变 屏幕的大小
      // 获取宽度和高度
      alert(window.screen.availWidth);
      alert(window.screen.availHeight);
    </script>

概述：

• location 对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。

属性：

方法：reload()重新加载页面。

    <script>
      //   location对象的使用
      //   当前浏览器打开的域名
      console.log(window.location.href);
      //  主机名或域名
      console.log(window.location.hostname);
      // 协议
      console.log(window.location.protocol);
      // 端口号
      console.log(window.location.port);
      // 方法：重新加载页面
      //window.location.reload();
    </script>

概述：

• 包含用户在浏览器窗口中访问过的URL。

属性：

• length：返回浏览器历史列表中的URL 数量。

方法：

    <script>
      //属性：显示历史对象的记录 (当前页面后退前进有几个)
      console.log(window.history.length);
      //方法：
      //后退一个页面
      window.history.back();
      //前进一个页面
      window.history.forward();
      //加载到具体的页面
      window.history.go(2);
    </script>

概述：

• navigator对象包含有关浏览器的信息。

属性：

    <script>
      //   获取浏览器的信息
      console.log(window.navigator.appName);
      console.log(window.navigator.appVersion);
      console.log(window.navigator.appCodeName);
      console.log(window.navigator.platform);
      console.log(window.navigator.userAgent);
    </script>

    <script>
      // 显示当前时间
      var date = new Date();
      console.log(date);

      // 定时器函数
      // 1.周期执行
      var tid = setInterval(() => {
        var date = new Date();
        console.log(date);
      }, 1000);
      // 清除周期执行
      clearInterval(tid);

      // 2.在固定时间之后执行一次调用函数
      var tid2 = setTimeout(() => {
        location = "/index.html";
      }, 3000);
      // 清除固定时间执行
      clearTimeout(tid2);
    </script>

[/wppay]