JavaScript学习笔记（1）

引用外部文件中的js文件：<script src="Path"></script>

和html文件相同，路径从index.html所在的根目录起。

输出

• window.alert() 弹出警告框，警告框的样式由浏览器决定。

• decument.write()将内容写入到html文档中

  如果要修改html的值：decument.write("id")="修改后的值"，其中id是html文件中元素的id属性。

• innerHTML 写入到html元素

• console.log() 写入控制台

变量

如果不使用下列关键字声明变量而是直接赋值，则该变量将会成为window的属性。

特别的，在对象中声明成员变量不需要使用下列关键字。

• var varname

  通常使用var来声明一个变量并赋值，具有函数级作用域。

  使用var声明的变量会提升（Hoisting），即声明语句提前到作用域的最前面执行，但赋值部分不会提升。

  如果在赋值（包括初始化）前调用该变量，则它的值将是undefined（未定义/空）。

  如果两次声明同名变量，且第一次进行了赋值，第二次没有，该变量会保留第一次声明的值

• 使用let声明一个可变量，使用const声明一个不可变量，具有块级作用域，即向上的最近一个{}中的内容。

数据类型

和python类似，js的变量类型是动态的，在声明变量并初始化后，可以再给它赋一个完全不同类型的值。

声明新变量时，可以用new绑定其类型：var v=new String。

• 值类型

  字符串、数字、布尔、空（null）、未定义（undefined）；

  未定义是变量在没有初始化时的默认值，空值则是显式声明，有意置空。

• 引用类型

  对象、数组、函数、正则（RegExp)和日期。

函数

声明函数使用关键字function，写法和其他编程语言类似：

function myFunction(parameter1,parameter2,...){//the function's logic.
}

特别的，对象中的函数被称为方法(method)，有特殊的声明语法：

functionName:function(parameter1,parameter2,...){//the function's logic.
}

事件

事件是用户在网页上的操作，通常作为属性存在。

常用事件：HTML DOM 事件对象 | 菜鸟教程

如果需要在外部js文件为特定元素绑定事件监听和回调函数，可以使用decument.getElementById("id")和其他类似的方法获取对应元素，并通过obj.addEventListener()方法绑定回调函数。

例如，现在html文件中有以下内容：

<button id="myButton">Test Text</button>

要在外部js文件中绑定回调函数，使该按键被点击时弹出窗口，应该有如下代码：

// 等待页面加载完成
window.onload = function() {let button = document.getElementById("myButton");button.addEventListener("click", function() {alert("This is test text.");});
};

如果用户在页面加载完成前就尝试以某种方法访问元素，则浏览器会报错，原因是无法找到指定元素。因此必须在页面完成加载后再绑定回调函数。

除此之外，有一种更简单的方式进行绑定：

window.onload = function() {let button = document.getElementById("myButton");// 通过赋值的方式为元素绑定点击事件button.onclick = function() {window.alert("This is test text.");};
};

这样做的缺点是，如果先前onclick已经绑定了一个回调函数，现在就会覆盖原有的。这是使用obj.addEventListener()进行绑定的一个优势：它是追加（Add）的绑定。