这是我参与「第四届青训营」笔记创作活动的第1天。
第一次使用新的笔记工具，还有一丝莫名的小激动
(～￣▽￣)～

我将主要聚焦于JS的基础语法和理解，写一篇学习笔记，用以加深印象，也欢迎大家来交流

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">

JavaScript基础 | 青训营笔记