JavaScript基础教学笔记（一）
i.如何写 “好” JavaScript
先来鉴赏一下这些代码：
再来一组：
从中领会到JavaScript的“好”指的是什么了吗？
·各司其职
·简单易读
·功能完善
大家都听得烂耳根的一句话：“HTML是网页的骨架、CSS是皮肉面貌、JavaScript是生机活力”，可实际操作上又有多少人真正做到如此清晰的“各司其职”呢？
是不是常常写着JS又想控制一下组件样式和位置？是不是写着html又在纠结元件的设计？
ii.JavaScript简介
有了正确的认识，下面开始正式引入JS的学习内容：
四句话介绍JS：
· JavaScript 是一种轻量级的编程语言。
· JavaScript 是可插入 HTML 页面的编程代码。
· JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
· JavaScript 很容易学习。
来写JS功能实例：
1、直接写入HTML输出流
document.write("<h1>标题</h1>"); document.write("<p>段落</p>");
可以直接写出html元素
2、对事件作出反应
<button type="button" onclick="alert('点击成功!')">按钮可点击</button>
如上，你就可以做出一个带有响应功能的按钮了。
3、改变HTML的内容
x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改变内容
如上，可以自由修改HTML内容。需要注意的是，document.getElementById("id") 这个方法可能会经常在一些教程中出现。（如本文参考了菜鸟教程），这是在HTML DOM中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
4、改变HTML图像
这其实不能算一个单独的功能，其本质上是结合了“对事件做出相应”和“改变HTML内容”。例如例如非常经典的一个灯泡动态响应：
<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
