当前位置：首页 > article >正文

JavaScript与客户端开发

article 2026/2/27 22:56:03

1、简介

简单的讲，JavaScript是一种脚本语言，为网站提供了一种在客户端运行程序的手段，通过它可以实现客户端数据验证、网页特效等功能。

JavaScript是一种基于对象和事件驱动（不懂啥意思，暂不管它），并有着较高安全性能的脚本语言。它能与HTML、Java脚本语言等技术融合到一起，然后能在一个Web页面中连接和控制多个对象，实现与Web客户交互的功能。

利用JavaScript所开发的客户端应用程序，是嵌入在标准的HTML语言中的（之前学XSS注入了解过），弥补了HTML语言本身的缺陷。

2、JavaScript的特点

（1）脚本语言

JavaScript 是小程序段的编程方式，直接将代码写入HTML文档，然后浏览器下载并读取时才进行编译，最后执行。

所以，查看HTML源文件就能看到其中嵌入的JavaScript源代码。

比如，我们用标签

<html＞

中间是html和js代码

包括<head> <body> 等

</html＞

这样的代码我通常是写在notepad＋＋里面，而文件是在桌面新建的文本文档更改后缀名为.html，这个就是源文件，其中notepad＋＋里的代码就是JavaScript源代码。

比如上次用phpstudy学习的XSS漏洞，其中用来测试是否存在XSS漏洞的代码串就是JavaScripe代码

以及用于攻击的根目录源代码

这些利用XSS漏洞的代码都与JavaScript有关。

这个是之前在机房写的html代码，还挺好玩的hh

从另一方面说，它属于解释性编程语言，使开发更简单和方便，而它的语法和结构与C、C＋＋、C#、Java都十分相似，不同之处在于其运行时不会出现独立的运行窗口，运行结果是借助浏览器来展示的。

比如一般简单的情况下我们会直接使用弹层的形式来进行处理，但是有的时候是一个复杂页面，需要弹窗显示，新开页面在另一个页签显示还达不到效果，所以我们需要让浏览器打开一个新的页面，并弹出来在当前页面之上，下面来看一下代码实现

const openNewWin = function () {window.open('https://www.oecom.cn','单独窗口','height=300,width=600,top=300,left=200,toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no')
}

上面的所有参数我并没有写全，下面来看一下参数的解释说明：
- window.open 弹出新窗口的命令；

- 'https://www.oecom.cn' 弹出窗口的文件名,相对路径绝对路径都可以；

- '_blank' 弹出新的独立窗口，非必须，可用空”代替，默认是’_self’；

- height=100 窗口高度；

- width=400 窗口宽度；

- top=0 窗口距离屏幕上方的象素值；

- left=0 窗口距离屏幕左侧的象素值；

- toolbar=no 是否显示工具栏，yes为显示；

- menubar=no 是否显示菜单栏（yes为显示）；

- scrollbars=no 是否显示滚动栏（yes为显示）；

- resizable=no 是否允许改变窗口大小，yes为允许；

- location=no 是否显示地址栏，yes为允许；

- status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

- alwaysLowered 窗口隐藏在所有窗口之后，（yes为允许）；

- alwaysRaised 窗口悬浮在所有窗口之上，（yes为允许）；

- depended 是否和父窗口同时关闭，（yes为允许）；

- titlebar 窗口题目栏是否可见，（yes为允许）；

- z-look 窗口打开后是否浮在所有窗口之上，（yes为允许）；

可以看到运行结果

效果的话就是一个单独的窗口了

在HTML文档中，JavaScript是采用<Script>...</Script>标签嵌入网页中的

注意：虽然Java和JavaScript中都含有Java，但它们差异很大，不要理解为精简版（因为刚开始我也是这么以为的）

（2）基于对象

这个我不是很理解，就感觉说的太专业了，这么说的

JavaScript是一种基于对象但不是完全面向对象的语言。

（3）简单性

这个也有点抽象，但还好，就是说JavaScript采用了Java的基本语句和控制流，然后简化，结构紧凑，而且它的变量类型采用弱类型，不采用严格的数据类型，简化了编程。

如

Integer x;
String y;
x=3;
y="1357";

其中x是一个整数，y是一个字符串

变量声明采用弱类型的意思就是比如这里变量在使用前不必进行声明，而是解释器在运行时再检查其数据类型，代码如下：

x=3;
y="1357";

前者说明x为数值型变量，而后者说明y为字符型变量，在前面可以没有专门的定义语句

（4）安全性

JavaScript不允许访问本地磁盘，也不能将数据保存在服务器上，不允许对网络文档进行修改和删除，只通过浏览器实现信息浏览动态交互，这样可以有效避免一些不安全操作

（5）动态性

动态改变页面内容‌：HTML页面是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这个不足，将内容动态地显示在网页中。例如，可以在用户输入特定信息后，动态显示相关的建议或信息‌。

‌动态改变网页的外观‌：JavaScript可以通过修改网页元素的CSS样式，动态地改变网页的外观。例如，可以改变元素的颜色、大小、位置等，从而提供更加丰富的交互体验‌。

‌验证表单数据‌：在表单验证中，JavaScript可以用于验证用户输入的数据。例如，在用户注册时，可以通过JavaScript验证用户名是否已存在、密码强度是否足够等，确保数据的准确性和安全性‌。

‌响应事件‌：JavaScript是基于事件的语言，可以响应用户的操作。例如，点击一个按钮弹出一个对话框、鼠标悬停时显示提示信息等，这些功能都需要JavaScript来实现‌