本文只介绍 js 的作用，编写位置，常用的功能，作为了解
1、什么是JavaScript: 它是一中脚本语言，轻量级，可以写在html页面的编程语言。简单，功能强大。和 Java 语言没有任何关系。
2、js代码写在<script></script>标签中
3、js代码的书写位置：可以写在<head>或<body>中，一般都写在<head>中或者<body>的最后边，不写在<body>的页面代码中，不好看。也可以写在外部文件中，可以重复使用。
4、js的作用：直接输出HTML输入流、对触发的事件做出反应、更改页面样式、更改图片、更改页面内容、输入验证
5、js的输出：
（1）、document.write():在html文档中输入内容。如果在页面加载完成后再触发此方法，里边的内容就会覆盖整个页面
（2）、window.alert():弹框显示内容
（3）、innerHTML :向html元素中输入内容
（4）、console.log():在浏览器控制台输出内容
6、示例：
（1）、直接输出Html输入流
在<head>中写js代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> document.write("hello world!!!"); </script> </head> <body> </body> </html>
在<body>中写js代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <script> document.write("hello world!!!"); </script> </body> </html>
注：以下示例都是在<head>中
（2）、对触发的事件做出反应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function dianji(){ document.getElementById("next").innerHTML="惟有饮者留其名"; } </script> </head> <body> <p>古来圣贤皆寂寞</p> <p id="next">下一句？？？</p> <button type="button" onclick="dianji()">点一下</button> </body> </html>
（3）、对HTML元素的内容进行改变
如（2）
（4）、对HTML样式进行改变
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function dianji(){ document.getElementById("next").style.color="yellow"; } </script> </head> <body> <p>古来圣贤皆寂寞</p> <p id="next" style="color:red">下一句？？？</p> <button type="button" onclick="dianji()">点一下</button> </body> </html>
（5）、对图形进行改变
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function dianji(){ var img=document.getElementById("img"); if(img.src.match("img1")){ img.src="img/1.webp" }else{ img.src="img/img1.jpg"; } } </script> </head> <body> <p>古来圣贤皆寂寞</p> <img id="img" src="img/img1.jpg" width="200px" height="200px"/> <button type="button" onclick="dianji()">点一下</button> </body> </html>
（6）、进行输入验证
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function dianji(){ var x=document.getElementById("input").value; <!-- isNaN()判断值是否为字符，如果为字符返回true --> if(x==""||isNaN(x)){ alert("正确"); } } </script> </head> <body> <p>古来圣贤皆寂寞</p> <input id="input"></input>输入下一句</br> <button type="button" onclick="dianji()">点一下,判对错</button> </body> </html>