JavaScript从入门到入土例题加代码手把手教程

初识JavaScript:
        前端三要素:HTMl(结构):超文本语言，决定网页的结构和内容
                 CSS(表现):层叠样式表，决定网页的表现样式
JavaScript(行为):是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为

什么是JavaScript:JavaScript是一门世界上最流行的脚本语言

    引用Javascript的两种方式
    第一种内部标签使用
    <!--script内写java script代码-->
    <script>
        alert('Hello word');
    </script>
    <!--script注意必须成对出现-->

    第二种创建javascript文件使用 外部引用
     <script src="创建javascript的路径></script>

    数据类型: 数值，文本，图形，音频，视频
     javascript不区分小数和整数 统一都用number表示

     undefined   未定义
     null 空的
     对象是{}
     数组是[]
      严格要求建议在写js代码的时候都把这个加上
      'use strict':严格检查模式，预防js随意性导致产生的一些问题
      注意: 'use strict' 尽量放在js代码的第一行

 字符串：1.正常字符我们使用单引号或者双引号进行包裹
        2.注意转义字符\
        3.多行字符编写使用  `在这个符号中间编写`
   模板字符串:在java中连接符是+但是在javascript中连接符是$
   字符串长度:console.log(scr.length)
   javascript字符串具有不可变性
   大小写转换
   scr.toUppercase() 转换大写 注意这个是个方法
    scr.toLowercase() 转换小写 注意这个是个方法

    数组：  var arr = [1, 2, 3, 4]
          长度：arr.length
         注意可以给arr中的值以下标的方式进行再次赋值 数组的大小也是可变的
         如果赋值过小元素就会丢失
         数组中字符串的1和数字1是不同的
       数组中可以截取的方法：slice：截取array的一部分，返回一个新的数组
       类似于string中的substring
       push()可以在数组最后面添加元素
       pop()是弹出尾部元素，也就是删除尾部元素

       unshift()可以在数组最前面添加元素
        shift()是弹出头部元素，也就是删除头部元素
        sort()排序
        reveres() 元素翻转
       concat()拼接 注意concat没有修改数组中的值，只是返回了一个新的数组
       join()拼接字符 打印拼接数组使用特定的数组进行打印

                    定义了一个a对象他有两个属性
       对象的定义:var a={
                         name:"王志飞",
                         age: 3
                     }
                 var 对象名字{
                            属性名:属性值,
                            属性名:属性值,
                            属性名:属性值
                            注意最后一个不用加逗号
                 }
        js中对象，{...}表示一个对象，都是以键值对描述属性
            多个属性之间使用逗号隔开最后一个属性不用添加逗号

    对象赋值：直接a.name="志飞";
    使用一个不存在的对象属性，不会报错

    动态删除一个属性：通过delete删除属性
    delete a.name;
    true

    动态添加属性: 直接通过对象名.新属性的名:新属性值就可以直接添加到对象中
    a.haha："haha"
    haha

    判断某个值是否在这个对象中:xxx in xxx!

    流程控制：
    if判断else

    循环:

    var a = 1;
               while (a < 100) {
                   a = a+1;
                   console.log(a)
               }

       for (let i = 0; i < 100; i++) {
                console.log(i)
            }

         避免以下的流氓循环，多处用在让你关不掉的广告
     while (true){
                 alert(a)
             }

       var map = new Map([['tom', 100], ['shabi', 99], ['zhaosi', 60]]);
             var tom = map.get('tom'); //通过k获得value
             map.set('awdaw',9999)
             console.log(tom)

        var set = new Set([3,1,1,1,1]); //具有去重的特性
              set.add(5)//添加元素
              set.delete(3)//删除元素

       输出数组中的所有元素
           var array = [3, 4, 5];
               for (var x of array) {
                   console.log(x)
               }
       数组数组的所有下标
       var array = [3, 4, 5];
                      for (var x in array) {
                          console.log(x)
                      }

        输出数组的所有下标以及元素以及长度
          var array = [3, 4, 5];
          console.info(array)
        这个方法同样适用遍历map


  函数: 定义函数
       function abs(x) {
                  if (x>=0){
                      return x;
                  }
                  else {
                      return -x;
                  }
              }

       调用函数: abs(10)返回10
       调用函数: abs(-10)返回10

       定义异常
       function abs(x) {
                   if (typeof x!=='awd'){
                       throw "123456"
                   }
                   }
      获取除了第一个第二个值之外的参数方法
      function aaa(a, b, ...rest) {
              console.log("a=>" + a)
              console.log("b=>" + b)
              console.log(rest);
         注意 rest 参数只能写在最后面

     变量的作用域 函数内部可以访问外部的参数，但是函数外部不能访问内部的
     javascript 函数查找变量是从自身的变量开始，也就是从内到外查找
     假设外部变量存在和内部变量重名的内部变量会把外部变量屏蔽掉
     写javascript代码时候养成先定义在声明最后调用

     javascript实际上只有一个全局作用域，任何变量(函数也可以作为变量),
     假设没有在函数的作用域范围内找到，就会向外查找，如果在全局变量都没有找到就会报错
     报一个引用异常的错误
  还是规范:由于我们的所有的全局变量都会绑定在Window上面，如果有不同的js文件，
            使用了相同的全局变量就会引起冲突
        怎么能减少冲突呢?
        设置一个全局变量，然后把之前帮当在Window上面的都绑定在这个上面就会的到有效的解决
        也就是把自己的代码全部放入自己定义的唯一空间中 降低全局命名冲突的问题

    方法的定义:方法就是把函数放在对象里面，对象只有两个东西属性和方法
    注意调用方法必须要带上括号 调用属性不用
    this是无法主动调用的，他默认就是谁调用他就指向谁
    typeof:加上值可以返回他的属性类型

 JSON:是一种轻量级的数据交换格式
    简介和清晰的层次结构使得JSON成为理想的数据交换语言
    易于人阅读和编写，同时也利于机器解析和生成，并有效的提升网络传输效率

    在javascript中一切皆为对象，任何支持js的类型都可以用json来表示
    格式：所有的对象都用{}
         所有的数组都用[]
         所有的键值对都是用 key:value

    代码
      var a = {
             name: "前端",
             age: 1,
             sex: "男"
         }
         //对象转换成JSON字符串
         var s = JSON.stringify(a);
         //JSON字符串转换成对象
         var parse = JSON.parse('{"name":"志飞","age":3,"sex":"男"}');

   面向对象: 类:模板 对象：具体实例

   class创建与使用
       class Student {
           constructor(name) {
               this.name = name;
           }

           hello() {
               alert('Hello')
               console.log()
           }
       }

       var xiaoming = new Student("小明");
       xiaoming.hello()


    操作BOX对象：
        也就是BOX:浏览器对象模型
        javascript的诞生就是为了能让他在浏览器中运行

    操作DOM对象(重点):
        核心:浏览器的网页就是一个Dom树形结构
            1.更新Dom节点
            2.遍历Dom节点:得到Dom节点
            3.删除Dom节点
            4.添加Dom节点
       要操作Dom节点就要先获得这个Dom节点

      获得Dom节点代码
      <div id="father">
          <h1>
              标题1
          </h1>
          <p1 id="p1"></p1>
          <p class="p2">p2</p>

      </div>
 <script>
          // 对应css选择器
          var h1 = document.getElementsByTagName("h1");
          var p1 = document.getElementById('p1');
          var p2 = document.getElementsByClassName('p2');
          var father = document.getElementById('father');
          //   var children = father.children; 获取父节点下的所有子节点
          var children = father.children;
      </script>

      更新Dom节点
            id1.innerText='456'修改文本的值
            id1.innerHTML='<strong>123</>strong>'可以解析HTML文本
       操作Dom节点
            首先注意-改为驼峰命名
      删除节点:删除节点的步骤:先获取父节点，在通过父节点删除自己
            father.removeChild(father.children[0])通过下标删除第0个元素

      插入节点:我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加元素了，
                但是这个Dom节点已经存在元素了，我们就不能这么干了

         创建一个p标签实现插入
<body>
<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
    <script>
        var js = document.getElementById('js');//已经存在的节点
        var list = document.getElementById('list');
        //通过js创建一个新的节点
        var newp = document.createElement('p');//创建一个p标签
        newp.id='newp'
        newp.innerText='飞飞'
        list.appendChild(newp)
    </script>

</body>


插入节点之往某个属性前方插入代码
<body>
<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var ee = document.getElementById('ee');
    var se = document.getElementById('se');
    var js = document.getElementById('js');
    var me = document.getElementById('me');
    var list = document.getElementById('list');
    // newNode新节点和 targetNode目标节点
    //list就是要包含的节点insertBefore(newNode,targetNode)

    //注意如果想把ee插入到js前面不能直接交换他们的位置因为js位置处于第0个元素
    //但是可以先把js放在me前面再把se放在me前面就会形成ee到第一个并且到js前面
    list.insertBefore(js, me);
    list.insertBefore(se, me);

</script>

</body>


操作表单(验证):表单是什么form DOM树
        1.文本框  text
        2.密码框  password
        3.下拉框  <select>
        4.单选框  radio
        5.多选框 checkbox
        6.隐藏域 hidden
        表单的目的:提交信息
    操作表单代码:<body>

           <form action="post">
               <p><span>用户名:</span><input type="text"  id="username"></p>
               <p><span>性别:</span> <input type="radio" name="sex" value="man" id="boy">男
                   <input type="radio" name="sex" value="woman" id="girl">女
               </p>

           </form>
           <script>//得到输入框的值
           var id = document.getElementById('username');
           var boy = document.getElementById('boy');
           var girl = document.getElementById('girl');

           //对于单选框和多选框boy.value 'man' 只能取到当前的值
           //         boy.checked
           //         false 判断选项是否是男

                   // girl.checked='true'
                   // 'true'    这个是赋值

           //第一步是得到输入框的值
           // id.value
           // '12312121你好'
           //这一步是修改输入框的值
           // id.value = '456'
           // '456'
           </script>
           </body>


   :
    javascript
    jQuery库:里面存有大量的javascript函数
        首先要获取jQuery

    事件:键盘事件，鼠标事件，其他事件


    例题鼠标移动获取鼠标坐标+代码:
    <head>
        <meta charset="UTF-8">
        <title>ff</title>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <style>
            #divMove {
                width: 800px;
                height: 500px;
                background: yellow;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
    mouse: <span id="mouseMove"> </span>
    <!--获取鼠标的移动轨迹-->
    <div id="divMove">
        在这里移动鼠标试试

    </div>
    <script>
        //当网页加载完毕之后，相应的事件
        $(function () {
            $('#divMove').mousemove(function (e) {
                $('#divMove ').text('x:'+e.pageX+'y'+e.pageY)
            })
        });
    </script>
    </body>

        操作Dom  <head>
                   <meta charset="UTF-8">
                   <title>123</title>
                   <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
               </head>
               <body>
               <ul id="text-ul">
                   <li class="js">Javascript</li>
                   <li name="java">JavaSe</li>
               </ul>
               <script>
               //注意这个text里面有参数就是设置值没有参数就是获取值
                   $('#text-ul li[class="js"]').text();

               </script>
               </body>
               //补充下边是直接修改颜色
               $('#text-ul li[name="java"]').css('color','red')