JavaScript学习笔记(2)

学习JavaScript的第二天!(当晚外出,故博文今日补发)

继续昨天的JavaScript的输出:

直接写入HTML的输出流

1
document.write("<h1>这是一个大标题<h1>")

对事件的反应

使用的是alert()函数,在JavaScript中不常用,但是对于代码测试来说非常方便。

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

改变HTML的内容

1
2
3
4
5
function zzzain()
{
x=document.getElementById("demo"); //查找元素
x.innerHTML="这是改变后的文字"; //改变内容
}
1
<p id="demo">这是改变前的文字</p>
1
<button type="button" onclick="zzzain()">我是按钮的名字</button>

改变HTML的图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
1
2
3
<img id="myimage" onclick="changeImage()" src="images/pic_bulboff.gif" width="100" height="180">

<p>点击灯泡就可以打开或关闭这盏灯</p>

通过元素ID检索到元素,然后封装成一个函数进行操作。

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.gif

代码也可以简写成如下:

1
2
3
4
function changeImage(){
var s = document.getElementById('myimage');
s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}

或者如下:

1
2
3
4
5
6
7
<script>
function changeImage(s){
s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

改变HTML元素样式

1
2
3
4
5
6
7
8
9
10
11
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

验证输入

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

此代码仅作为非严格验证(没有验证空格)

本文标题:JavaScript学习笔记(2)

文章作者:zzzain46

发布时间:2020年01月14日 - 15:01

最后更新:2020年01月15日 - 17:01

原始链接:https://www.52debug.cn/posts/8bda1d54.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果你觉得我的文章对你有用,请随意打赏!
0%