1、可以用来写入HTML输出
<script>
document.write("<h1>This is a heading</h1>");//标题的字比较大
document.write("<p>This is a paragraph.</p>");
</script>
2、对事件做出反应(onclick事件)
<body>
<button type="button" onclick="alert('Welcome!')">点击这里</button>
</body> //创建一个button按钮,上面有文字"点击这里"
//点击按钮后弹出一个框，显示"Welcome"
3、改变 HTML 内容
<body> <h1>我的第一段 JavaScript</h1> <p id="demo"> //创建一个元素
JavaScript 能改变 HTML 元素的内容。
</p> <script>
function myFunction() //函数名
{
x=document.getElementById("demo"); // 通过ID名找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script> <button type="button" onclick="myFunction()">点击这里</button>//点击按钮后触发事件 </body>
4、改变 HTML 图像(动态地改变 HTML <image> 的来源 (src))
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')//找到对象
if (element.src.match("bulbon"))//如果该对象的图片来源名为bullon 则改变图片来源
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script> <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">//创建一个对象(暗灯泡) 有onclick事件 点击图片即触发事件 <p>点击灯泡来点亮或熄灭这盏灯</p> </body>
5、改变 HTML 样式
<body> <h1>我的第一段 JavaScript</h1> <p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p> <script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式(颜色大小等)
}
</script> <button type="button" onclick="myFunction()">点击这里</button> </body>
6、验证输入
<body> <h1>我的第一段 JavaScript</h1> <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> <input id="demo" type="text"> //创建id为"demo"的可输入文本对象 <script>
function myFunction()
{
var x=document.getElementById("demo").value;//接收对象，x为输入的值
if(x==""||isNaN(x))//isNaN(x) 若x不是数字 返回真
{
alert("Not Numeric");//弹框
}
}
</script> <button type="button" onclick="myFunction()">点击这里</button> </body>