您的位置：首页 > Web前端 > JavaScript

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

2016-12-06 15:12 393 查看

第一章学习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)将"<"替换为"<"
(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必须知道的事儿

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