(一)javascript和html联系起来
(1)可以直接将Javascript写在html中
(2)一般采用
<script src="aa.js"></script>
将js独立为一个文件,上面这行代码可以放在head中或者是body中。
(二)用js打印数据的4中方法
(1)innerHTML
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>This is a heading.</h1>
<p id="test">Test</p>
<script src="script.js"></script>
</body>
</html>
// script.js
document.getElementById('test').innerHTML=9+8;
注意:在html中将script放在body的最后面是因为没有用到函数调用,而代码的加载是顺序执行的,如果将script放在p的前面,会出现下面的错误提醒:
(2)document.write()
注:document.write()用于打印调试比较方便。
直接将上面代码的js内容改为:
document.write("Hello World!");
显示的结果为:
注:如果是在html完全加载之后使用document.write(),则会清空html所有的内容,然后显示document.write()的内容,如下面的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>This is a heading.</h1>
<p id="test">Test</p>
<button onclick="document.write('Hello World!')">Try it</button>
</body>
</html>
(3)console.log()
console.log也是用于调试的一种有效方法。
F12,重新运行即可看到要显示的内容在console中打印输出。
// script.js
console.log("Hello World!");
(4)window.alert()
注:window.alert()主要用于提醒,也可以用于调试。
// script.js
window.alert("Welcome");
显示的结果为:
(三)js的语法
(1)js是大小写敏感的
不能够将var写成Var或者是VAR
(2)js中的变量
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>This is a heading.</h1>
<p id="test">Test</p>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("test").innerHTML = "Joe" + 2 + "Tim";
显示的效果为:
(3)注释
html的注释用<!-- -->
css的注释用/**/
js的注释用//或者是/**/
(4)js中变量的使用
// script.js
var x, y,z;
x = 1;
y = 2;
z = x + y;
document.getElementById("test").innerHTML = "Hello"+z;
// 显示的结果为: Hello3
(5)良好的编程习惯
在运算符号比如(+、-、*、/、=等)的两侧加上空格。
(四)函数
函数使得js的代码以block的形式组织起来。
要注意编程风格,每一个函数的行数不要过多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="script.js"></script>
</head>
<body>
<p id="demo">this is a test.</p>
<p id="test">click the button to see what happens.</p>
<button onclick="myfunction()">Click here</button>
</body>
</html>
/*
* @Author: Lin
* @Date: 2017-07-16 18:20:18
* @Last Modified by: Lin
* @Last Modified time: 2017-07-16 18:23:50
*/
function myfunction() {
document.getElementById("demo").innerHTML="change happens here";
document.getElementById("test").innerHTML="change also happens here";
}
显示的结果为: