1 JavaScript 简介

1. JavaScript 简介

JavaScript：直接写入 HTML 输出流

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

这个就是在一面上显示这两个，这个是用js的方式输出到页面

JavaScript：对事件的反应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="alert('欢迎!')">点我!</button>
	</body>
</html>

JavaScript：改变 HTML 内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<p id="demo">
			JavaScript 能改变 HTML 元素的内容。
		</p>
		
		<button type="button" onclick="myfunction()">点我!</button>
		
		<script>
			function myfunction(){
				x=document.getElementById("demo");
				x.innerHTML="Hello JavaScript!";
			}
		</script>
	</body>
</html>

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

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

JavaScript：改变 HTML 样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="color: aqua;" id="demo">hello</p>
		<button type="button" onclick="myfunction()">点我</button>
	<script>
		function myfunction(){
			x=document.getElementById("demo")  //找到元素 
			x.style.color="#ff0000";           //改变样式
		}
	</script>
	</body>
	
</html>

image
image

JavaScript：验证输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="" name="" id="demo" value="" />
		<button type="button" onclick="myfunction()">点击</button>
		<script>
			function myfunction(){
				var x=document.getElementById("demo").value;
					if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
						alert("不是数字");
					}
			}
		</script>
	</body>
	
</html>
posted @ 2024-11-14 10:01  lipu123  阅读(13)  评论(0)    收藏  举报