什么是JavaScrip：
JavaScript 是一种高级编程语言，主要用于网页开发。它是一种动态、弱类型的语言，可以在客户端（浏览器）中运行，并与 HTML 和 CSS 一起用于创建交互式网页。JavaScript 可以添加动态功能，例如表单验证、页面元素操作、动画效果等。它还可以与服务器端的后端语言（如PHP、Java等）进行交互，从而实现更复杂的功能。
如何使用JavaScrip：
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
最简单的hello world案例：
<!DOCTYPE html>
<html><head></head><body><script>alert("Hello World");</script></body>
</html>浏览器打开就会弹出hello world弹窗
其中alert是JavaScript中的一个弹窗函数，用来显示一条消息框给用户，通常用于给用户提供一些提示或警告信息。alert函数接受一个字符串作为参数，该字符串将显示在弹窗中。用户需要点击确认按钮才能关闭弹窗。
或者直接用JavaScrip输出网页内容，以下内容会输出一个h1格式的helloworld标题和一个段落样式的hello world文字如
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>hello world</h1>");
document.write("<p>hello world</p>");
</script></body>
</html>其中document.write是JavaScript中的一个方法，用于向HTML文档中插入内容。它可以将任意的文本、HTML代码或JavaScript代码输出到页面上，可以在页面加载时动态地生成内容。
当使用document.write方法时，它会将要输出的内容直接写入到当前页面的位置。如果在页面加载完毕后再使用document.write方法，它会覆盖整个页面的内容。
但是需要注意的是，使用document.write方法会直接修改页面的内容，可能会导致一些意外的结果。因此，在实际开发中，更推荐使用DOM操作来插入内容到页面上。
或者通过点击改变HTML内容，实现简单交互：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function changedemo()
{x=document.getElementById("demo"); // 找到id等于demo的元素x.innerHTML="Hello world!"; // 改变内容
}
</script>
<button type="button" onclick="changedemo()">点击这里</button></body>
</html>在点击按钮之后就会把id等于“demo”的元素里面的内容改成hello world
document.getElementById是JavaScript中的一个方法，用于通过元素的id来获取对应的元素对象。通过document.getElementById方法，可以在HTML文档中查找具有指定id的元素，并返回该元素的引用。这个方法非常常用，可以用来操作和修改HTML元素的属性、样式、内容等。使用方法很简单，只需要调用document.getElementById，并传入要查找的元素的id作为参数。如果找到匹配的元素，就会返回该元素的引用；如果没有找到匹配的元素，则返回null。
需要注意的是，每个HTML文档中的元素id应该是唯一的，否则可能会出现预期之外的结果。另外，使用document.getElementById方法只能获取到第一个匹配的元素，如果有多个具有相同id的元素，只会返回第一个。如果需要获取多个元素，可以使用其他的选择器方法，如document.getElementsByClassName或document.querySelectorAll等。
简单交互案例灯泡开和关：
先去下载两张一样的但是图片颜色不一样的灯泡图片并保存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><script>
function changeImage()
{element=document.getElementById('Light_bulb')if (element.src.match("turn_on")){element.src="turn_off.png";}else{element.src="turn_on.png";}
}
</script>
<img id="Light_bulb" onclick="changeImage()" src="turn_on.png" width="180" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>我的图片是保存在和代码文件同一层级，所以路径就直接写图片名，如果图片是单独保存的要注意自己路径是否有错
其中以上实例中代码 element.src.match("turn_on") 的作用意思是：检索 <img id="Light_bulb" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 turn_on 这个字符串，如果存在字符串 turn_on，图片 src 更新为 turn_off.png，若匹配不到 turn_on 字符串，src 则更新为 turn_on.png
浏览器打开点击灯泡图片即可实现灯泡开关灯
如上所示，如果你需要改变元素中的某些内容，可以使用
document.getElementById通过元素的id来获取对应的元素对象。
然后通过document.getElementById方法，在HTML文档中查找具有指定id的元素，并返回该元素的引用。如改变颜色样式可写为
document.getElementById（"xxx"）.style.color="#xxxxx"
注意：
HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。
)
)
![[排序算法]4. 图解堆排序及其代码实现](http://pic.xiahunao.cn/[排序算法]4. 图解堆排序及其代码实现)
)
