第一章学习JavaScript必须知道的事儿_使用jquery软件开发程序员第一章javascript基础-CSDN博客

本文链接：https://blog.csdn.net/zengyonglan/article/details/53487179

第一章学习JavaScript必须知道的事儿

知识点：调用js代码、js标签特性、js引入方式、js引入位置、js调试

1.1.<script>标签用于定义客户端脚本语言。

这里写图片描述

1.2<script>标签定义
有五个属性：
(1)type:必需 表示脚本语言的MIME类型 MIME类型由两部分组成：媒介类型/子类型。在javascript中使用"text/JavaScript",在非ie中，还可以使用"application/JavaScript"。为了保证最大兼容性，建议用"text/JavaScript"。
(2)language:用来规定脚本语言，不赞成使用。
(3)charset:可选 规定引用外部文件的字符编码格式。如果外部文件与主文件中的编码不同，就会用这个属性，默认字符编码是ISO-8859-1。一般浏览器会忽略这个属性，故开发人员不使用。
(4)src:可选 规定被包含的外部url文件
(5)defer:可选 规定脚本是否延迟到文档被完全载入或显示后再执行。

这里写图片描述

1.3两种嵌入js代码的方式
(1)嵌入式，即直接在页面中包含js代码

    <script type="text/javascript">
        alert("我是javascript代码");
    </script>

(2)外链式，即包含外部文件。注意，它还可以引用外部域的文件。
优点：易维护，能缓存，适应未来

<script type="text/javascript" src="demo.js"></script>

解决多个<script>代码放在<head>导致的只有等所有脚本加载完毕，才能够呈现页面内容的问题。方法有2：
1.将外部脚本引用放在body元素最后面；
2.增加defer属性(脚本延迟加载)，但是一些浏览器中并不支持。

这里写图片描述

1.4 xhtml与html 对js解析的不同之处
xhtml:可扩展超文本标记语言，编写规范要比html严格得多。
“<”号被认为是开始标记，后面不能跟空格。故有些代码不能被xhtml解析：

    <script type="text/javascript">
        function demojs(){
            if (x<y) {
                alert(x小于y);
            }
        }
    </script>

解决方案有二：

(1)将"<"替换为"&lt;"
(2)利用特殊注解 "//<![CDATA["与"//]]>"的组合。

<script type="text/javascript">
    //<![CDATA[
        function demojs(){
            if (x<y) {
                alert(x小于y);
            }
        }
    //]]>
    </script>

这里写图片描述

1.5如何使用

<body>
    <script type="text/javascript" src="demo1.js"></script>
    <script type="text/javascript" src="demo2.js"></script>
    <noscript>
        <p>此页面不支持(禁用)js,请更换浏览器或启用对脚本的支持。</p>
    </noscript>
</body>

这里写图片描述

1.6调试工具
多数浏览器按F12即可开启调试。
在IE中，调试很简单，不需要安装，只要引用一段代码js代码即可。如下：

<script type="text/JavaScript" src="https://getfirebug.com/firebug-lite.JavaScript"></script>

js调试器：
设置断点、监控变量、查看堆栈等。
设置断点有两种方法：
(1)单击sources选项，在想要设置的行单击一下即可。
(2)通过在代码中添加debugger来设置断点，如下：

    <script type="text/javascript">
        function test(){
            //代码略
            debugger
        }
    </script>

控制台
可以查看变量的值，也可以执行js代码。只要异步调用console.log(),就可以输出想要的日志。

console.log("我是日志");
console.log(3,4,{1:"one"});
//console.warn()和console.error()是警告级别
console.warn("一个警告");
console.error("一个错误");

这里写图片描述

也可以这样写

try{
//可能会报错的代码块
}catch(e){
console.error("错误",e);
}

控制台其他比较有用的函数。
(1)堆栈函数console.trace(),可以查看指定函数的调用关系。

(2)clear()函数，用来清除控制台中的log。

(3)dir()函数，输出对象中的所有属性，如：

dir({test:1,test2:2});

这里写图片描述

(4)values()函数，以数组的形式打印出对象中的所有属性值。

values({"demo1":111,"demo2":222,"demo3":333})

这里写图片描述

(5)keys()与values()是一对，会以数组方式打印对象中所有键(名字)，如：

keys({"demo":1,"deom2":2});

这里写图片描述

注意：console.log()不是所有浏览器都支持，如IE的低版本就不支持。

这里写图片描述

1.7HTTP分析
通过调试工具可以查看web在执行什么网络请求，包括网络请求的时间、请求的方式、地址等。
蓝色代表DOMContentLoaded触发时间，即DOM加载完成的时间。
橙色(红色)代表load事件触发的时间。
绿色代表页面首次渲染的线，可以使用更底层的工具捕获。
这里写图片描述

单击某个请求，会看到请求的详细信息。如下：
这里写图片描述

这里写图片描述

1.8性能检测
调试工具中，profile可以精确地检测程序的性能。
写法简单：在想统计的代码外层添加profile代码即可。如下：

console.profile();
//要统计的代码
var a = 10;
console.log(a);
alert(a);
console.profileEnd();

当浏览器遇到profileEnd()时，就会将统计结果生成报表显示出来，或者在浏览器中使用Profile的record特性查看。如图所示：
这里写图片描述

这里写图片描述

使用控制台函数console.time()与console.timeEnd(),也可以实现同样的效果，当执行到console.timeEnd()时，后台把程序的执行时间(以毫秒为单位)发送到控制台，使用控制台的API,将结果加入到测试代码中，就可以在整体上把控代码的性能。如下：

console.time("times");
//要统计的代码
var a = 10;
console.log(a);
alert(a);
console.timeEnd("timeEnd");

这里写图片描述

第一章 学习JavaScript必须知道的事儿

第一章学习JavaScript必须知道的事儿