您的位置：首页 > Web前端 > JavaScript

【JavaScript学习笔记】1：js的书写,显示数据,变量,函数

2018-02-07 00:30 796 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航