基本格式已省略,直接列出代码部分
1.js基本交互示例
<!-- <script>中可省略type="text/javascript" -->
<body>
<p>
<strong>javascript</strong>
</p>
<!-- 在html输出javascript -->
<script type="text/javascript">
document.write("<h1>this is a heading</h1>")
document.write("<p>this is a footing</p>")
</script>
<!-- 对html事件做出反应 -->
<button type="button" onclick="alert('welcome!')">click</button>
<!-- 改变html内容 -->
<p id="demo1">old</p>
<script type="text/javascript">
function myFun1()
{
x=document.getElementById("demo1"); //找到元素
x.innerHTML="new"; //改变元素
}
</script>
<button type="button" onclick="myFun1()">click</button>
<br />
<!-- 改变html图像 -->
<script type="text/javascript">
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("比较图片名"))
{
element.src="图片完整位置";
}
else
{
element.src="图片完整位置";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="图片完整位置">
<!-- 改变html样式 -->
<p id="demo2">javascript</p>
<script type="text/javascript">
function myFun2()
{
x=document.getElementById("demo2") //找到元素
x.style.color="#ff0000"; //改变样式
}
</script>
<button type="button" onclick="myFun2()">click</button>
<!-- 验证输入 -->
<p>please input number!</p>
<input id="demo3" type="text">
<script type="text/javascript">
function myFun3()
{
var x=document.getElementById("demo3").value;
<!-- 是否是数字 -->
if (x=="" || isNaN(x))
{
alert("not numeric");
}
}
</script>
<button type="button" onclick="myFun3()">click</button>
</body>
2.语句格式点要
<body>
<!--
js语句通过{}代码块进行组合,
块的作用是使语句序列一起执行
-->
<!--
js对大小写敏感,这个要注意
-->
<!--
js会忽略多余的空格,所以可以适当添加空格,提高可读性
-->
<!--
在文本字符串中使用反斜杠对代码进行换行
例:
document.write("hello \
world!")
错误示例:
document.write \
("hello world!")
-->
</body>