LearnWeb04-JS01-基础webJS编写

LearnWeb04-JS01-基础webJS编写

 Updated Web / JS16 minutes read (About 2366 words)0 visits

[!summary]+
JS 除了 WEB 在现代还有很多 NodeJS 的应用也会使用 JS，这里只介绍 web 相关的 JS 代码编写的部分。

ref: mdn JS 快速入门 | 《数据结构与算法 JavaScript 描述》

Intro

JavaScript 是一门完备的动态编程语言，可以借由诸多开发者编写的大量工具，为网站提供动态交互的特性（结合浏览器应用程序接口 API）主要用到的包括：

  • 浏览器应用程序接口（API）：浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
  • 第三方 API：让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库：用来快速构建网站和应用。

HTML 引入 JS 代码

为了使得代码更清晰且好组织，本文依然使用引入外部 JS 的办法进行代码结构组织，HTML 中引入相关 JS 的方法和 CSS 的方法类似但略有不同。具体代码如下：

1
<script src="scripts/main.js" defer></script>

这一段代码可以加在 Head 部分，其中的 defer 属性，及 deferred 延迟，是为了让元素都加载完成后再加载 JS 部分代码，否则最好将 JS 的引入放在 HTML 快要结束的部分（</body> 的前一行）。避免 JS 元素对 HTML 提前进行修改导致 HTML 加载失效。

参考资料：async-defer | Medium

调试 JS 代码

JS 有几种调试 debug 的方式，按照个人现阶段的理解，可以分为两类：一是主要针对 NodeJS 类的JavaScript on the server的调试，配置起来相对简单，只需要安装好 Node 在 Vsocde 中使用 Nodejs 进行调试即可。

  1. 使用 NodeJS + VsCode 进行本地调试，也可以直接使用 node <yourjsfile>.js 执行，如果是在 Vscode 的终端中执行也会触发调试界面，非常方便。
  2. 【废弃】SpiderMonkey 中下载 JavaScript Shell 直接执行 JS 文件或者进入可交互终端。
  3. 【不常用】浏览器开发者环境中的控制台进行调试。

二则主要用于JaveScript inside the browser的调试，最常见的是：

  • 浏览器 F12 进入开发者环境中的控制台进行调试
  • VsCode + 以下两个插件：LiveServer+JavaScript Debugger（原 Debugger for Chrome） 进行调试。

顺带一提这里的JavaScript Debugger建议使用预览版本，官方插件中有指引。具体如下：

[!quota]+

  • Open the extensions view (ctrl+shift+x) and search for @builtin @id:ms-vscode.js-debug
  • Right click on the JavaScript Debugger extension and Disable it.
  • Search for @id:ms-vscode%% %%.js-debug-nightly in the extensions view.
  • Install that extension.

LiveServer 可以直接启动对应端口的进程，查看对应的最终效果，使用很简单这里不过多介绍，假设其启动的服务在 3000 端口，JavaScript Debugger 可以做以下配置。

而JavaScript Debugger使用的时候需要新建 Lauch.json，使用 launch 模式进行 debug，具体配置如下（使用 edge 进行调试）该部分参考资料：在VsCode中使用JavaScript Debugger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "launch vuejs: chrome",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}",
            // "breakOnLoad": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
  • url 为本地需要调试的项目地址
  • sourceMaps: true 开启源码映射功能，从而更好的调试源码
  • 设置源码映射路径 sourceMapPathOverrides ，上面映射了 webpack 打包后的源码文件夹到项目的 src 目录；其他需要映射的目录，可以自行添加。

替换为自己对应的路径后即可开始调试，在 Js 中打下的断点就会生效了，这里暂时没使用 Attach 模式，后续用到在研究。

了解代码调试和运行是学习语言的基础，对这些有所熟悉之后就可以开始学习和尝试编写 JS 代码了。

JS 基础语法

该部分的学习除了 MDN 的相关知识，会结合数据结构的内容来进行学。

语言的第一印象和 python 有许多相似的地方。语法上可能大差不差，在循环和其他一些变量上又有一些和 C#,CPP 相似的地方，Let’s Go

Basic Rules 基础规则

首先介绍基本的编写规则:如注释、缩进规则、变量规则等…

  • 注释：CPP 相同使用 // 和 /* */ 进行行/块注释。
  • 句尾 ; ：单行单条语句结束可以无需 ; (但为了规范和明确可以加上)，同行多个语句可以用 ; 进行语句的区分。

变量定义：(另起一个 Paragraph 表示尊重)JS 为非强类型语言(即类似 python 而非 cpp)，为动态类型语言，变量声明无需指定类型。但有以下几个注意的事项：

  • （不推荐）不带关键字的变量声明会默认为全局变量。
  • （推荐）可以使用 let 或 var 关键字定义变量。
  • （最推荐）最推荐使用 let 进行变量的声明，var 对变量定义位置的要求更低，使用 var 编写可能会方便，但是在后续维护和阅读中可能会体验很差。使用 let 然后和别的语言一样声明和使用变量。

Var 和 let 的详细差别可以参考 var与let的区别。

对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。

ARRAY 和 Python 一样可以存储多种类型在一个 Array 中，这点无需担心。

基本运算符：和大多数语言的基本运算符保持一致，这里需要特殊说明的只有相等的判断符，区别于其他语言，JS 中使用三个等号来判断相等；

1
2
if a == b:
	print("a is equal to b")
1
2
3
4
if (a === b)
{
	console.log("a is equal to b");
}

这里的函数定义和条件判断都更接近 cpp，使用{}将代码块来区分，而非单纯使用缩进。

Function 函数定义

JS 的函数关键字和 Shell 的一样只需要使用 function 即可，实际上和 CPP 也是一样的只是无需指定类型。

1
2
3
4
5
6
7
8
function multipy(a, b)
{
	let result = a + b;
	return reuslt;
}

let res = multipy(3, 5);
console.log(res);

有趣的地方在于 JS 的类也是用 function 定义的，这可能是由于一切皆为对象这个特性，所谓函数可能实际上是一个只有单个调用结构的类。并没有作区分。

为了不混淆，类的部分还是在后面单独进行描述。

Event 事件

接下来我把用于 web 开发的 javascript 用 web-js 代称用来区分服务端的 js，服务端的 js 我直接用 nodejs 代称好了。

在 web-js 中，与事件的交互应该是最为关键的一个环节了，通过浏览器和用户触发的各种事件（如点击，页面滚动，页面跳转）来触发 js 中编写的一个个行为，正是所谓赋予网页动态交互特性。

可以复习 LearnWeb00-Web入门 中 How JavaScript Works 中讲到的原生异步处理机制，此处有使用 windows 监听的。

下面引一个 MDN 中的例子做一些简单的说明：

1
2
3
document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});

👍 这里有个有趣的匿名函数写法，使用 () => {} 定义一个匿名函数，实际上也可以用下面这个完整的表达方式：

1
2
3
document.querySelector('html').addEventListener('click', function() {
	alert("别戳我");
})

此处的例子可解释为：使用 document（DOM）接口中的 querySelector 选择 html 元素添加对于 click 时间的监听，并在监听到点击行为的时候弹出别戳我的弹窗。

Selector 可以参考 HTML 部分选择器的含义去理解，具体可选择可能还是要参考 DOM API 中的说明，但是理论上应该会和 HTML 中的定义方式保持一致。

例子 2 监听图片点击事件，切换背景图片，这里有两种写法和重要的 API 函数 getAttribute 和 setAttribute。

写法一：使用图片变量的 OnClick 事件（这里说明了变量本身是会携带一些事件定义，并非只有 AddListner 一种监听）

1
2
3
4
5
6
7
8
9
10
11
ele_img.onclick = function() {
    let src = ele_img.getAttribute("src");
    if (src === "https://picture-bed-001-1310572365.cos.ap-guangzhou.myqcloud.com/3070PC/80a5366f89dfbd27ec46f669e0eac84.jpg")
    {
        ele_img.setAttribute("src", "https://picture-bed-001-1310572365.cos.ap-guangzhou.myqcloud.com/3070PC/20231005005911.png");
    }
    else
    {
        ele_img.setAttribute("src", "https://picture-bed-001-1310572365.cos.ap-guangzhou.myqcloud.com/3070PC/80a5366f89dfbd27ec46f669e0eac84.jpg");
    }
};

写法二：使用原本的事件监听方法：

1
2
3
4
5
6
7
8
9
10
11
12
ele_img.addEventListener("click", () => {
    let src = ele_img.getAttribute("src");
    if (ele_img.src === "https://picture-bed-001-1310572365.cos.ap-guangzhou.myqcloud.com/3070PC/80a5366f89dfbd27ec46f669e0eac84.jpg")
    {
        ele_img.setAttribute("src", "https://picture-bed-001-1310572365.cos.ap-guangzhou.myqcloud.com/3070PC/20231005005911.png");
    }
    else
    {
        ele_img.setAttribute("src", "https://picture-bed-001-1310572365.cos.ap-guangzhou.myqcloud.com/3070PC/80a5366f89dfbd27ec46f669e0eac84.jpg");
    }
});

写法三：将具体函数内容独立出去为ImgSwitch，这里直接调用函数名

1
ele_img.addEventListener("click", ImgSwitch);

也可放在匿名函数或者函数里：

1
2
3
ele_img.addEventListener("click", () => {
    ImgSwitch();
);

例子三 HTML 中添加 Button，CSS 对 Button 简单渲染，然后 JS 中添加输入事件，HTML 和 CSS 部分不在赘述。

button 同样可以使用 onclick 事件来监听点击。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let ele_button = document.querySelector("button");
ele_button.onclick = () => {
    addUserName();
}

function addUserName() {
    let name = prompt("请输入您的姓名：");
    let message = "欢迎您，" + name + "/";
    localStorage.setItem("name", name);
    Heading.textContent = message;
}

if (!localStorage.getItem("name")) {
    Heading.textContent = "欢迎您！";
} else {
    Heading.textContent = "欢迎您，" + localStorage.getItem("name") + "/";
}
  • 这里主要是 prompt 可以唤出一个输入框，将信息输入 name 中
  • LocalStorage 将信息存到本地的浏览器中
  • 然后最后的判断做一个初始化，如果浏览器中缓存有相关信息就直接输出，否则输入一个 default 值。

如何写入浏览器的缓存也是后续很重要的一个事情，有存储对于多次页面交互来说十分关键。

LearnWeb04-JS01-基础webJS编写

http://aikenh.cn/cn/LearnWeb04-JS01-基础webJS编写/

Author

AikenH

Posted on

2024-01-31

Updated on

2024-03-04

Licensed under

 

Like this article? Support the author with

Comments

Follow

Catalogue

Recents

×