Script 标签

创建时间:2019.02.19 修改时间:2019.05.19

JavaScript 网页脚本语言,使 HTML 页面具有更强的交互性。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

JavaScript 语句包含在 <script> 标签内:

也可以通过 <script> 元素的 src 属性指向外部脚本文件:

注: 外部脚本不能包含 <script> 标签。

向浏览器输出内容

<script>
document.write("Hello World!");
</script>

效果如下:

注: 以上 document.write 直接写入 HTML 文档输出流中,如果在文档加载后调用它,会覆盖整个文档。

事件响应,弹出对话框

<button type="button" onclick="alert(' 欢迎 !')"> 点我 !</button>

onclick 表示“点击”事件。alert() 为 JavaScript“弹出对话框”函数。

事件响应,动态更新内容

<script>
function myFunction1()
{
	document.getElementById("demo1").innerHTML="Hello JavaScript!";
}
function myFunction1a()
{
	document.getElementById("demo1").innerHTML=Date();
}
</script>
<p id="demo1">JavaScript 可以触发事件,就像按钮点击。</p>
<button type="button" onclick="myFunction1()"> 点我 </button>
<button type="button" onclick="myFunction1a()"> 显示日期 </button>

效果如下:

JavaScript 可以触发事件,就像按钮点击。

事件响应,动态更新样式

<script>
function myFunction2()
{
	x=document.getElementById("demo2") //  找到元素 
	x.style.color="#ff0000";          //  改变样式 
}
</script>
<p id="demo2">JavaScript 能改变 HTML 元素的样式。</p>
<button type="button" onclick="myFunction2()"> 点我 </button>

效果如下:

JavaScript 能改变 HTML 元素的样式。

<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。

<script>
document.write("Hello World!")
</script>
<noscript> 抱歉,你的浏览器不支持 JavaScript!</noscript>

事件响应,动态改变图像

<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 id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

其中自定义的 changeImage() 函数用三目运算更简洁:

function changeImage()
{
    element = document.getElementById('myimage')
    element.src = element.src.match("bulbon")?"/images/pic_bulboff.gif":"/images/pic_bulbon.gif";
}

效果如下:

点击灯泡就可以打开或关闭这盏灯。

验证用户输入

<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")=="")
	{
		alert(" 不是数字 ");
	}
}
</script>
<p> 请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()"> 点击这里 </button>

注: 因为如果输入空格或连续的空格 isNaN 判别不出来,所以添加正则 x.replace(/(^\s*)|(\s*$)/g,"")=="" 来判断。

效果如下:

请输入数字。如果输入值不是数字,浏览器会弹出提示框。