- 1.使用JavaScript改变HTML文档内容 ```

使用JavaScript改变HTML文档内容

JavaScript can change HTML content.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589186808954) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589186819414) - 2.使用JavaScript改变HTML属性 ```

JavaScript能做什么？

JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source) attribute of an image.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589187143077) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589187165759) - 3.script标签 - 旧的JavaScript示例可能使用type属性：script type ="text/javascript"。类型属性不是必需的。 JavaScript是HTML中的默认脚本语言。 - JavaScript代码放置在中 ```

A Web Page

A Paragraph

``` - 4。当按钮点击时，调用function代码。 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589187752240) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589187583943) - 5.JavaScript代码放置在中 ```

A Web Page

A Paragraph

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589187791775) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589187676037) - 6.可以在HTML文档中放置任意多的JavaScript代码。 JavaScript代码可以放置在HTML页面的body或head部分中，或同时放置在这两者中。 - 代码可以放在外置文件中 ``` function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } ``` -7.外置javascript代码也可以放在body或head中。执行方式和代码放置在script标签中是一样的。 -外置脚本中不能包含script标签。 -将脚本放在外部文件中具有一些优点： 1. 有序列表它将HTML和代码分开 2.它使HTML和JavaScript易于阅读和维护 3.缓存的JavaScript文件可以加快页面加载速度 -8. 外部引用 ``` ``` - 使用innerHTML ```

My First Web Page

My First Paragraph

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589188497180) -9. 使用 document.write() ```

My First Web Page

My first paragraph.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589188576170) *文档加载后，使用document.write()方法会删除文档所有内容。 document.write()仅用于代码测试* - 另一种： ```

My First Web Page

My first paragraph.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589188681838) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589188691540) -10. window.alert() ```

My First Web Page

My first paragraph.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589188760572) -11. console.log() ```

JavaScript console.log() 方法

按下 F12 查看控制台信息。

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200511-1589189654918) **完整代码效果：**

使用JavaScript改变HTML文档内容

JavaScript can change HTML content.

JavaScript能做什么？

JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source) attribute of an image.

A Web Page

A Paragraph

A Web Page

A Paragraph

My First Web Page

My First Paragraph

My First Web Page

My first paragraph.

My First Web Page

My first paragraph.

JavaScript console.log() 方法

按下 F12 查看控制台信息。

“Web开发基础”实验报告