JavaScript

#编程语言/前端 #编程语言/前端

1 原理

  • 运行在客户端浏览器，不需要服务端资源

2 用途

  • 网页中比较复杂的交互，比如提示用户输入错误，点展开列表、输入文字时自动联想……

3 基本语法

3.1 说明

  • 大小写敏感
  • 空格无意义（与 Python 不同）
  • 建议以分号结尾
  • 注释

    • 行注释：

      1
      // 我是行注释

    • 块注释:

      1
      2
      3
      /*
      我是注释
      */

3.2 变量

不需要显示地声明类型，但需要用 var 定义变量。

1
2
3
4
5
var foo = null;
var foo = true;
var foo = 5;
var foo = "five";
var foo = [5, "five", "5"];

3.3 操作

布尔操作

  • == 等于
  • != 不等于
  • === 类型相同
  • !== 类型不同

  • , >=, <, <= 大于、大于等于、小于、小于等于

数值操作

  • ++ 加 1
  • -- 减 1
  • += 当前值加

逻辑运算

  • && 逻辑与
  • || 逻辑或
  • ! 逻辑非

3.4 条件

1
2
3
4
5
if( true ) {
    // Do something.
} else {
    // Do somethine.
}

3.5 循环

1
2
3
4
5
6
7
8
for( var i = 0; i < 2; i++ ) {
	// Do something.
}

var items = ["abc", "def", "g12"];
for( var i = 0; i < items.length; i++ ) {
    // Do something.
}

3.6 函数

3.6.1 系统函数

跳出对话框：

  • alert() 跳出警告
  • confirm() 确认框
  • prompt() 可接受输入信息的提示框

3.6.2 自定义函数

1
2
3
function addNumbers(a,b) {
    return a + b;
}

3.6.3 调用函数

1
addNumbers(3,4)

4 操作 HTML

4.1 浏览器

浏览器的常用属性和方法见下表：

Property/method Description
event Represents the state of an event
history Contains the URLs the user has visited within a browser window
location Gives read/write access to the URI in the address bar
status Sets or returns the text in the status bar of the window
alert() Displays an alert box with a specified message and an OK button
close() Closes the current window
confirm() Displays a dialog box with a specified message and an OK and a Cancel button
focus() Sets focus on the current window

更多方法，请见：MDN Web Docs

4.2 事件

在发生某个事件时调用函数，常见事件殚表如下：

Event handler Event description
onblur An element loses focus.
onchange The content of a form field changes.
onclick The mouse clicks an object.
onerror An error occurs when the document or an image loads.
onfocus An element gets focus.
onkeydown A key on the keyboard is pressed.
onkeypress A key on the keyboard is pressed or held down.
onkeyup A key on the keyboard is released.
onload A page or an image is finished loading.
onmousedown A mouse button is pressed.
onmousemove The mouse is moved.
onmouseout The mouse is moved off an element.
onmouseover The mouse is moved over an element.
onmouseup A mouse button is released.
onsubmit The submit button is clicked in a form.

可使用三种方法连接事件和函数：

在属性中设置

1
<body onclick="myFunction();">

连结方法与元素

1
2
3
4
5
window.onclick = myFunction; 
// 或者
window.onclick = function() {
    // Do Somethine.
};

使用 addEventListener()

1
2
3
4
5
window.addEventListener("click", myFunction); 
// 或者
window.addEventListener("click", function(e) {
    // Do Something.
});

4.3 JS 操作 DOM

4.3.1 DOM 简介

DOM 是操作 HTML 或 XML 的接口，通过它可以访问元素及其属性，以及对元素增删改查，可将其看作节点树。

4.3.2 访问节点

  • document.getElementsByTagName()
  • document.getElementById()
  • document.getElementsByClassName()
  • document.getElementById()
  • document.querySelectorAll()
  • xxx.getAttribute()

4.3.3 操作节点

  • xxx.setAttribute()
  • xxx.getElementById()
  • xxx.style.xxx

4.3.4 增删元素

  • document.createElement()
  • document.createTextNode()
  • xxx.appendChild()
  • xxx.insertBefore()
  • xxx.replaceChild()
  • xxx.removeChild()

4.4 网页定时器

4.4.1 一段时间后运行

window.setTimeout(code,millisec);

如 5s 后显示 refresh 框

1
setTimeout('refresh()',5000);

4.4.2 每隔一段时间运行

window.setInterval(code,millisec);

4.4.3 清除定时器

clearTimeout()

clearInterval()

1
2
var test1 = setTimeout('refresh()',5000);
clearTimeout(test1);

4.5 综合示例

1
2
3
4
5
6
7
8
9
longestWord( strings ) {
    var longest = strings[0];
    for( i = 1; i < strings.length; i++ ) {
        if ( strings[i].length > longest.length ) {
            longest = strings[i];    
        }
	}
    return longest;
}

按钮点击时获取按钮属性值

1
2
3
4
5
6
7
<button onclick="edit(this)" value="abcdefg">编</button>
<script>
	function edit(element) {
		value = element.getAttribute('value')
		alert("edit"+value);
	};
</script>

5 书写位置

5.1 写在行内

1
<input type="button" value="按钮" onclick="alert('Hello World')" />

5.2 写在 script 标签中

1
2
3
<script>
alert('Hello,world!');
</script>

理论上可以放在 html 的任意位置，但一般放在 head 中，或者在 body 的最后，更建议写在 body 最后，这样运行速度快，且 JS 码较长时不影响阅读；如果其中涉及显示效果，建议放在 head 中。

5.3 写在 html 以外的 js 代码中

1
<script src="my_script.js"></script>

（该 js 可供多个 html 使用）

6 存储

6.1 JS 全局变量

6.1.1 方法

  • window.aa = 'xxx'
  • 在函数以外用 var 声明变量
  • 在函数内部不使用 var 声明的变量

6.1.2 参考

JS 声明全局变量的三种方式

6.2 本地存储

6.2.1 全局变量与 window.localstorage 区别

localStorage，有 5M 的限制，不受刷新页面的控制，长久保存。

如果刷新页面后仍想保留用 localstorage，否则用全局变量即可。

6.2.2 注意

注意 localStorage 只能存字符串，如果想保存字典等结构，最好用 JSON.stringify 转成 json，再保存；使用时再用 JSON.parse 转回来。

6.2.3 参考

localStorage使用总结

7 调试

7.1 Debug 方法

  • 弹框
1
alert("xxxx")
  • 在浏览器控制台显示信息（F12+ 控制台）
1
console.log("xxxx")

7.2 测试代码块的错误

try {

//可能会导致错误的代码

} catch (error) {

//在错误发生时怎么处理

}

8 程序结构设计

8.1 js 与 html 分离

8.1.1 原则

  • 如果只有少量 js 不需要分离
  • js 上百行，整个 html 大几百行后，就可以考虑分离
  • 分离时，除了 head 中包含.js 文件的引用，以及在合适的地方添加类似 window.onload 的关联手段触发 JavaScript 代码的执行之外，其他形式的 JavaScript 混入 HTML 应该都可以避免。
  • 引出后 js 文件方便复用
  • 如果内容较多，可以分成多个 js；也可以从逻辑方面，把相关内容整理成一个 js
  • 需要注意引用时有依赖关系的都需要引进来
  • 再进一步，最好能把功能函数和界面元素完全分开

8.1.2 JS 文件写法

  • 把 js 代码从 html 移入 js 文件，去掉 script 标签，直接写函数
  • 在 html 的 header 中引入形如：
1
<script src="xxx.js"></script>
  • 代码可完全不变，模板等也可以 js 中继续使用

8.2 模块化

文件太长，或者实现多个组件时，常常把每个组件写成一个 js，即模块，用 export 导出模块，其它 js 文件用到它时用 import 导入模块。

例如：

1
2
3
4
5
6
7
8
// 导出 export.js
export function square(x) {
    return x * x;
}

// 引用
import { square } from './export';
console.log(square(11)); // 121

8.3 何时使用异步 await 和 async

  • 不使用 await 调用 async 函数：当不使用 await 调用 async 函数时，程序不会等待该函数完成，而是立即继续执行后续代码。这是因为 async 函数总是返回一个 Promise。
  • 使用 await 调用 async 函数：当使用 await 调用 async 函数时，程序会等待该函数完成，然后再继续执行后续代码。

9 问题与解答

9.1 问题一

  • 问题：
    • script 中 ‘$' 开头的函数没见在哪儿调用
  • 解答：
    • 在程序开始运行时调用

9.2 问题二

  • 问题：
    • ES6 是什么?
  • 解答：
    • ES6：ECMAScript6，是新版本 JavaScript 语言的标准,它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

9.3 问题三

  • 问题：
    • =>怎么用？
  • 解答：
    • ES6 中新增的箭头操作符=> 简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，
1
2
3
4
5
(a) => {alert(a)}  
// 相当于 
function(a) {
	alert(a)
}

9.4 问题四

  • 问题：
    • 如何用 map 方式访问字典
  • 解答：
1
2
3
4
Object.entries(mydic).map(([key, value]) => (
    console.log(key);
    console.log(value);   
))

9.5 问题五

9.6 问题六

  • 问题
    • 如何在 javascript 中使用 import 引入其它 js
  • 解答
    • 方法一：在 html 文件中使用 link 方式引入 js 文件
    • 方法二：包含 js 程序段时加 type='module'。这样 js 程序被认为是一个模块，从而可以在程序段中引入其它模块。

9.7 问题七

  • 问题
    • 如何引入 css 文件
  • 解答
    • 可利用模块的相对路径
1
import 'bootstrap/dist/css/bootstrap.min.css';

9.8 问题八

  • 问题
    • 如何跳转到其它
  • 解答
    • window.open(' 地址 ')

10 参考

MSN Web DOCS

select onChange事件

javascript操作SELECT中option大全

页面加载时自动执行（加载）js的几种方法

JavaScript 运算符