从头开始学Javascript,把每一个知识点过一遍,每个案例过一遍。记录值得记的。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
下面是您将在本教程中学到的主要内容。
1.实现按钮输出当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>从头开始学javascript</title>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>这是一个显示日期的button按钮</h1>
<p id="demo">在这里显示日期</p>
<!-- 这里注意函数要加() -->
<button type="button" onclick="displayDate()">展示日期</button>
</body>
</html>
这里先跳过100Javascript多个实例
2.HTML 输出流,对事件的反应,改变 HTML 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
// 文档输出流加不加标签都可以在这里区别是p可以换行
document.write("<p>nihoa</p> ");
document.write("nihao ");
function myFunction()
{
window.alert('欢迎');//window.alert或者alert都可以
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
//onclick是众多事件的一个,而myFunction是对他的反应
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
3.改变 HTML 图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function changeImg()
{
element=document.getElementById('button');
if (element.src.match('bulbon'))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
// 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
}
</script>
</head>
<body>
<p>点击灯泡可以打开关闭灯</p>
<img id="button" onclick="changeImg()" src="pic_bulboff.gif" alt="" width="100" height="180">
</body>
</html>
值得一提的是简洁写法:
<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>
4.改变HTML的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function change()
{
// 注意这里的document只能是小写不是大写
x=document.getElementById('demo');
x.style.color="#ff0000";
}
</script>
</head>
<body>
<p id="demo">这是用于改变style的话</p>
<button onclick="change()">改变颜色</button>
</body>
</html>
5.验证输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function myFunc()
{
var x=document.getElementById('demo').value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
</head>
<body>
<p >请输入一个数字</p>
<input type="text" id="demo" >
<button type="button" onclick="myFunc()">点击这里</button>
</body>
</html>