JavaScript高级程序设计学习笔记----初识JavaScript

阿伍.

已于 2022-09-18 07:49:48 修改

阅读量1.1k

点赞数 7

分类专栏： JS 整套学习笔记文章标签： javascript html 前端

于 2022-09-15 18:06:13 首次发布

本文链接：https://blog.csdn.net/m0_71673753/article/details/126870555

版权

JS 整套学习笔记专栏收录该内容

9 篇文章 4 订阅

订阅专栏

一、JavaScript概述

1.JavaScript 介绍：

简称JS，是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

2.JavaScript 组成：

核心语法 - ECMAScript (ES5-ES6) 规范了JavaScript的基本语法
浏览器对象模型 -BOM Browser Object Model，提供了一系列操作浏览器的方法
文档对象模型 -DOM，Document Object Model ，提供了一系列操作的文档的方法。

3.<script>标签位置

现代web应用程序将js代码放在<body>元素中页面内容的最后面

当header中同时有js脚本和外链css时，js脚本最好放外链css后面。因为如果脚本的内容是获取元素的样式，宽高等css控制的属性，浏览器是需要计算的，也就依赖于css。浏览器无法感知脚本内容到底是什么，为避免样式获取错误，因而只好等前面的所有样式下载完后，再执行js。如果css下载时间很长的话，js也无法正常运行，导致html无法正常解析出来

4.使用方式

1.内嵌式

2.外链式

3.行内式

JS使用外部文件具有：
1.方便维护
2.缓存：浏览器会缓存所有的外部文件，意味着当多个页面需要同一个文件时，可以直接在缓存中提取
3.适应未来

建议使用外链式书写JS代码

5.与Java关系

6.JavaScript 输入和输出语句

alert("")；普通的网页弹框
console.log()；控制台输出，多用于代码调试
document.write(" "）

二、JavaScript扩展（建议初学者暂时跳过一下内容）

7.<script>元素

1.在使用行内JavaScript代码时，代码中不能出现字符串</script>(如"</script>")

浏览器解析时会当成结束的</script>，只需要在"/"前加入转义字符"\"即可("<\ /script>")即可

2.js的内嵌和外联可以同时出现在同一个HTML页面中，但是使用了src属性的<script>元素，元素内就不能再有js 代码

3.在HTML中不能省略结束标签，但是在XHTML中可以（这里可以看到编译器报错）

8.推迟-异步执行脚本

1.推迟执行脚本：

表示脚本立即下载但是会延迟到整个页面解析完毕后再运行，通常用于在<head>中引用外部js 脚本文件的<script>元素，所以只对外部文件才有效。

按照他们的出现顺序，第一个推迟的脚本文件会在第二个推迟执行的脚本文件之前执行，但是在实际中不一定总会按照出产顺序执行，所以html中最好只包含一个这样的脚本。

对于XHTML文档，指定async属性应该写成defer="defer"

2.异步执行脚本：

表示脚步文件一旦加载完成就会立即执行，也只对外部文件才有效，区别在于async的脚本并不能保证按照他们的出场顺序执行，即推迟的脚本文件之间没有依赖关系。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器的行为由async属性决定。使用async也会告诉页面你不会使用document.write。所以不推荐使用这种方法

对于XHTML文档，指定defer属性应该写成async="async"

9.动态加载脚本的4钟方法

1、直接document.write

2、动态改变已有script的src属性

3、动态创建script元素

这三种方法都是异步执行的，在加载这些脚本的同时，主页面的脚本继续运行。

如果用以上的方法，那下面的代码将得不到预期的效果。
例如：

上述代码执行后 a.js 的 alert 执行并弹出消息，但是主页面产生了错误，没有弹出对话框。原因是 'str' 未定义，为什么呢？因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候，可以用下面的第四种方法。

4.用XMLHTTP取得要脚本的内容，再创建 Script 对象

新手小白，这里我也还搞不懂，求大神指导

10.Xhtml中的变化

1.在Xhtml使用<script>元素必须指定type(属性)=text/javascript，html中对这个则可有可无。

且HTML在解析script元素时会应用特殊规则，Xhtml则没有这些规则，这就意味着一些特殊字符在Xhtml中无法识别。

以下代码虽然在HTML中可以识别，但是在XHTML中无法识别，这里a<b在XHTML中会把（<）解析为一个标签的开始

解决办法：

（1）把所有的小于号(<)替换成相应的HTML实体形式（<)但是这种写法好像不能在HTML的 script标签中出现

（2）所有的代码包含到CDATA块中

CDATA：

XML 文档中的所有文本均会被解析器解析。

只有 CDATA 区段中的文本会被解析器忽略。

因为我传入的参数为1，2，这里在控制台输出了a小于b

这里的用到的//（JavaScript中的注释)是在不支持CDATA块的非XHTML兼容浏览器中才使用的，兼容XHTML的浏览器则不需要

11.noscript元素

不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代，用来定义在脚本未被执行时的替代内容（文本），即JS脚本代码不可用时，执行<noscript>中的内容，可用时noscript元素内的内容不显示

当浏览器无法解析JS代码时，浏览器会显示noscript中的内容，如果浏览器支持，那么用户永远也看不见它

12.文档模式

这个概念是通过使用文档类型 doctype 切换实现的，最终的两种渲染模式是混杂模式（quirks mode）和标准模式（standards mode）。这两种模式主要影响css内容的呈现，在某些情况下也会JavaScript的解释执行。之后IE又提出一种准标准模式（almost standards mode），这种模式下的浏览器特性有很多都是符合标准，但也不尽然，不标准的地方体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。标准模式和准标准模式非常接近，在检测文档模式时也不会发现什么不同，这里在提到标准模式时，指的是除混杂模式之外的其他模式。

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式，不同浏览器在这种模式下行为差异很大，如果不使用某些hack技术，跨浏览器的行为根本没有一致性可言。

我们往往爱追求高大上的页面效果却忽略了最为基础的文档模式，没有文档模式的指挥，怎能得来高大上的页面效果！！