JavaScript描述的是网页的行为,可以直接改变HTML而改变网页的内容,或者提供和用户的交互。
js写在哪里
①直接写入HTML
JavaScript可以写在HTML的script双标签里,一般把这个双标签放在HEAD头里:
<!DOCTYPE HTML>
<HTML>
<!-- script标签一般写在HEAD标签里 -->
<HEAD>
<meta charset="utf-8">
<!-- 这里type可以省略,默认就是JavaScript -->
<script type="text/javascript">
alert("你好!");//在JavaScript里注释又变成了双斜杠
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
②写入.js文件
js还可以单独写到一个.js文件里,然后在HTML的script双标签里用src指定其位置,如下面是myjs.js内容:
alert("你好!");
然后在.html文件里:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8">
<script src=".\myjs.js"></script>
</HEAD>
<BODY>
</BODY>
</HTML>
③在浏览器控制台执行
js可以在浏览器控制台console直接执行,这样可以方便学习,在谷歌浏览器F12就可以打开控制台:
如果不加分号也可以,不过浏览器在执行js代码时会自己加上,廖老师指出为了避免这个自动化过程出现歧义,还是应当养成加分号的习惯。
一些比较短的代码在这里写感觉非常方便,不然还要刷新浏览器页面。
显示数据
①警告框
window.alert("警告框");
这个就是刚才那个alert方法。
②改变HTML内容以显示
document.getElementById()方法获取指定id的HTML标签对象,然后为其innerHTML属性赋新的值就可以改变这个标签了。为了能切实获得这个标签,script标签应该在这个要操作的标签之后,所以干脆把HEAD标签放在BODY标签后面好了:
document.getElementById("ok").innerHTML="修改后的内容";
<!DOCTYPE HTML>
<HTML>
<BODY>
<p id="ok">我是ok</p>
</BODY>
<HEAD>
<meta charset="utf-8">
<script src=".\myjs.js"></script>
</HEAD>
</HTML>
另外,document.write()可以把内容直接追加到页面上,但如果在文档已完成加载后执行document.write(),整个 HTML 页面将被覆盖(可以在已经加载好的页面打开控制台,然后用用一下这个函数试一下)。
③写到控制台
console.log方法可以把信息写到浏览器控制台,如:
console.log("okok");
可以在控制台看到okok字样,这个主要是用来方便调试的。
变量
js里用var来声明变量,用等号赋值后才能使用:
var x,y;
undefined
y;
undefined
y=10;
10
y;
10
或者在声明时候就为其初始化:
var k=100;
undefined
k;
100
runoob教程里把固定的值称为字面量,可以用不同类型的字面量去初始化不同类型的数据。除了数字字面量外,还有如字符串(String)字面量:
var x="小贤是";
undefined
x;
"小贤是"
表达式字面量(js里这样去理解表达式好新奇):
var y=10;
undefined
var x=y*5; //表达式字面量
undefined
x;
50
数组(Array)字面量(这里的数组好像python的list):
var x=[1,2.3,"牛逼"];
undefined
x;
[1, 2.3, "牛逼"]
对象(Object)字面量(看起来好像python的字典,键值对里键不能重复,正如对象的属性不必重复,而键对应着一个值,正如对象的属性的值,这个js里的理解也很新奇):
var x={"性别":"男","职业":"年龄":20};
undefined
x;
Object {性别: "男", 职业: , 年龄: 20}
函数
在js里函数也被视为一种字面量,函数是能被重复使用的js代码,用function关键字去定义一个函数:
function myfun(a,b){return a*b};
undefined
myfun("ok",2);
NaN
myfun(3,2);
6
这里NaN表示Not a Number,而且当不能计算结果的时候也会返回一个NaN。
关于NaN,廖老师指出了用==或者===比较时,NaN这个值和谁都不相等,包括它自己:
NaN==6;
false
NaN==NaN;
false
NaN===6;
false
NaN===NaN;
false
如果要去判断一个东西的值是NaN,只能用isNaN()函数传入这个值来判断:
isNaN(NaN);
true
关于js里的==和===,廖老师指出了==是会自动转换数据类型再做比较的,而===不会,所以一般都是用===来作比较,不然会出现一些莫名其妙的不相等却被比较成了相等的情况:
true==1;
true
true==7;
false
true===1;
false