前端系统化学习【JS篇】:（一）浏览器与初识Javascript

前言

• 细阅此文章大概需要 $\color{red}{8分钟}$左右
• 本篇中$\color{red}{简要讲述}$了：
  1. 常见的浏览器内核
  2. 浏览器的控制台
  3. 代码调试（debugger）
  4. 在浏览器控制台中打印【引用数据类型的结果】时的一些问题
  5. JavaScript概述
  6. JavaScript的组成部分
  7. JavaScript简单调试的两种方式
  8. JavaScript的导入方式
• 如果有任何问题都可以留言给我，我看到了就会回复，如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和大家共同学习、进步。
• 下一篇会尽快更新，已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
• 如果觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家！

---

深入了解浏览器

常见的浏览器内核

1. webkit内核（v8引擎）
   • 谷歌chrome
   • Safari
   • opera >=v14
   • 国产浏览器
   • 手机浏览器
   • ....
2. Gecko
   • 火狐FireFox
3. presto
   • Opera < v14
4. Trident
   • IE
   • IE EDGE 开始使用双内核（其中包含chrome迷你）

---

浏览器的控制台（Chrome）（f12/fn+f12）

• Elements： 查看结构样式，可以修改这些内容
• Console： 查看输出结果和报错信息，是js调试的利器
• Source: 查看项目源码
• NetWork: 查看当前网站所有资源的请求信息（包括和服务器传输的HTTP报文信息）、加载时间（根据加载时间进行项目优化）
• Application： 查看当前网站的数据存储和资源文件（针对此处可以做音视频防盗）

---

代码调试（debugger）

• 在代码前加 debugger; 在执行时会进入debug模式，通过加断点来运行程序
• f10 逐过程，
• f11 逐语句执行，一行行代码执行

---

在浏览器控制台中打印【引用数据类型的结果】时的一些问题

• 若是 访问引用数据类型，得出并打印某引用数据类型的结果
  • 则在展开这个结果之前，略所方式查看的是当时的结果
  • 而一旦展开这个结果，永远展示的是堆中最新的数据

---

JavaScript

• js是轻量级的弱脚本动态编程语言，是面向对象的编程语言

---

JavaScript的组成部分

1. ECMAScript JavaScript的核心语法
2. DOM:document object Model文档对象模型，提供各种操作页面中的元素的api（方法、属性）
3. BOM：browser object Model 浏览器对象模型，提供各种操作浏览器的api（方法、属性）

---

JavaScript简单调试的两种方式

在控制台输出

1. console.log/dir/table....在控制台输出

   • console也是一个【内置对象】，其中提供了好多方法
     • log： 正常输出
     • dir： 输出一个对象的详细键值对信息
     • table： 把一个多维JSON数组在控制台按照表格的方式呈现出来
       • 多维数组：几维数组就看数组当中嵌套了几级

              //如
              [12,13]//一维数组
              [12,[12]]//二维数组
              [12,[{xxx:xxx}]]//三维数组
              //二维及以上都称为多维数组
       

       • 多维对象：几维对象就看对象当中嵌套了几级

              //如
              {name:xxx}//一维对象
              {name:xxx,[12,23]}//二维对象
              {name:{name:{name:function(){}}},[12,13]}//三维对象
              //二维及以上都称为多维对象
       

               let a = 10;
               let b = [{id:1,name:'张三'},{id:2,name:'李四'}];
               //1. console.log/dir/table....在控制台输出
               console.log(a);//数字类型10
               console.dir(a);//字符串类型10
               console.table(b);//表格形式展现数据
       

在浏览器弹窗

• alert/confirm/prompt

  • 弹窗的三种方式输出的【结果都必然经过toString转换为字符串】

      alert(1);//=>'1'
  

  • 【弹窗的三种方式会阻断JS代码的执行】，只有当窗口关掉，JS才会继续执行

      for(let i = 1;i<=5;i++){
              alert(i);
              console.log('哈哈');
          }  
  

• confirm: 确定和取消【选择型弹窗】

          confirm('确定干啥嘛？');
  

• prompt: 确定和取消【选择型弹窗】不同的是多出一个文本框

          prompt('确定干啥嘛？写出原因');       
  

document.write【没人用了】

• 输出的结果是字符串，写入并覆盖掉页面的全部内容，

---

JavaScript的导入方式

1. 行内式

    <!-- 行内式 -->
    <div class="box" onclick="alert(10); console.log(20);">box</div>

2. 内嵌式

    <div id="box">box</div>
    <!-- 内嵌式 -->
    <script>
        var box = document.getElementById("box");
        box.onclick=function(){
            alert(10);
            console.log(20);
        }
    </script>

• Script标签的位置

  • 最好把script标签放在body的末尾位置
    • 可以放在页面的任何位置，因为js一般是用来操作结构的，如果结构没加载出来，js无法执行就获取不到，所以一般涉及到操作结构的，都建议放在body末尾
  • 也可以放在前面的【三种情况】
    1. 不涉及操作结构
    2. window.onload=function(){把js代码放在这里}
       • 【利用事件，当页面中的结构和内容都加载完成，才执行这里的代码】

        <script>
            window.onload=function(){
                var box = document.getElementById("box");
                box.onclick=function(){
                    alert(10);
                    console.log(20);
                }
            }
        </script>
        <div id="box">box</div>
    

    3. $(document).reday(function(){})【jQuery】
       • 与window.onload的区别是
         1. reday是当dom结构加载完成就可以执行，而onload是所有的dom结构以及内容都加载完成才能执行，所以reday一定比window.onload早先触发，
         2. reday在页面中可以用多次，而window.onload只能用一次【因为一个是dom零级事件绑定，另一个是dom二级事件绑定】

3. 外链式

• 将js代码写在一个单独的js文件中，然后将该文件引入

    <div id="box">box</div>
    <!-- 外链式 -->
    <script src="1.js"></script>

    /* 1.js文件 */
    var box = document.getelementById("box");
    box.onclick=function(){
        alert(10);
        conaole.log(20);
    }

---