1.JavaScript:直接写入 HTML 输出流
//<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。
//<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<html>
<head>
<meta charset="utf-8">
//utf-8是一种字符编码,除此之外在国内网站常用的还有GB2312和GBK。GB2312和GBK主要用于汉字编码,utf-8是国际编码,实用性比较强。
<title>输出流实例</title>
</head>
<body>
<p>
//Javascript中是没有提供<p>这个标签的。在html中提供了<p>标签,代表一个段落。
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
//<h1>,代表标题,字体最大加粗。<h2>字体大小中等,加粗。
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>
2.javaScript button的设置,事件的响应(弹框)
<html>
<head>
<meta charset="utf-8">
<title>自学JavaScript</title>
</head>
<body>
<h1> JavaScript button的设置</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>
源代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学</title>
</head>
<body>
<h1> JavaScript</h1>
<p id="demo">//在这里给段落设置了编号
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function change()//声明功能change
{
x=document.getElementById("demo"); // 通过标号找到元素,这里的x也可被其他字符代替。
x.innerHTML="Hello JavaScript!"; // 改变内容
x.style.color="#ff0000"; // 改变样式,字体改为红色
}
</script>
<button type="button" onclick="change()">点击这里</button>
</body>
</html>
4.验证输入
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">//输入文本,定义为text,并给了序号demo
<script>
function myFunction()
{
x=document.getElementById("demo").value;//通过序号获得文本中的内容
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
5.输出当前时间函数Date()
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<h1>输出当前时间</h1>
<script>
function time(){
document.write(Date());
}
</script>
<button type="button" onclick="time()">获取时间</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var carname1="Volvo XC60";
var carname2='Volvo XC60';
var answer1='It\'s alright';
var answer2="He is called \"Johnny\"";
var answer3='He is called "Johnny"';
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
</body>
</html>
8.关于对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var person=
//定义一个对象
{
firstname : "John",//属性之间用逗号分隔
lastname : "Doe",
id : 5566
};
document.write(person.lastname + "<br>");
document.write(person["id"] + "<br>");
//对于对象有两种寻址方式
</script>
</body>
</html>
对象也可以定义一个方法,并作为其属性储存。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() //在对象中定义方法
{
return person.firstName + " " + person.lastName;
}
};
document.write(person.fullName());//调用对象中的方法
</script>
</body>
</html>