JavaScript 知识扫盲

JavaScript 知识扫盲

  • 写在前面
  • 一、JavaScript 写入形式
  • 二、常用输入输出
  • 三、JS 是动态类型语言
  • 四、运算符
  • 五、数组
    • 1、数组创建
    • 2、获取和修改数组元素
    • 3、新增元素
    • 4、删除元素
  • 六、函数
  • 七、对象
    • 1、对象的创建
    • 2、属性方法的使用
  • 八、JavaScript 和 Java 对比
  • 九、事件
    • 1、常见事件
    • 2、事件三要素
  • 十、DOM 元素
  • 拓展：开发者工具介绍

写在前面

JavaScript 这门语言，看似和Java有着某种亲缘关系，实则不然，它和Java的关系就像雷锋和雷峰塔，八竿子也打不着，而之所以叫这个名字，可以认为纯属是为了蹭Java语言的热度。当时JS 的创始人仅用 10 天时间完成 了对它的设计，正是由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript 写出来的程序混乱不堪。这也正是我们在写JS代码中，会常常出现的“各种莫名其妙的对”以及“各种莫名其妙的错”。当然一切的一切都不能否定它是用户和服务器交互的桥梁。

本篇文章，笔者不会细扣JS语法，本着求同存异的思想进行学习。语言是相通的，你会发现当你在学过了几门语言后，上手JS其实就变得得心应手了。

参考文档MDN

一、JavaScript 写入形式

1、行内式

<button type="button" onclick="alert('Hello world')">第一个JS程序</button>

2、内嵌式

<script type="text/javascript">document.write("Hello world");
</script>

注意：通常情况下会将内嵌式写到 body 标签结束之前，能够确保页面内容已经加载完毕，避免出现 JavaScript 依赖的元素找不到的情况。

3、外部式

<script src="jquery-3.7.0.min.js" type="text/javascript" charset="utf-8"></script>

外部式通常写在 head 标签内部，通常是工具 JS（不会有操作当前页面的信息控件）。

二、常用输入输出

  1. 向网页中输出内容 document.write();
  2. 向控制台输出内容 console.log();
  3. 弹出警告窗口 window.alert();
  4. 弹出确定和取消的按钮 window.confirm();
  5. 弹出输入框 window.prompt();

注：window 可以省略.

三、JS 是动态类型语言

对于像 C, C++, Java, Go 等语言是静态类型语言。即一个变量在创建的时候类型就确定了，不能在运行时发生
改变，而动态类型语言例如 Python、JavaScript 中的变量是程序运行过程中才确定的(运行到 = 语句才会确定类型)，且随着程序运行, 变量的类型可能会发生改变：

var a = 123;  // number-数字类型
a = "hello";  // string-字符串类型
a = true;	  // boolean-布尔类型
a = null;	  // 表示空值
a = undefined;// 表示未定义

这里注意一点：在 JS 中求字符串长度使用的是 length 属性而非 length() 方法，这点不同于Java语言。

var a = 'hello';
console.log(a.length); // 输出5

四、运算符

在JS中的运算符绝大部分都和Java语言相同，例如算术运算符、赋值运算符 & 复合赋值运算符、自增自减运算符、逻辑运算符、位运算符、移位运算符以上这些运算符的用法都和Java语言完全相同，这里就不过多赘述了。下面我着重介绍 比较运算符：

  • <
  • >
  • <=
  • >=
  • == 比较相等(会进行隐式类型转换)
  • !=
  • === 比较相等(不会进行隐式类型转换)
  • !==

JS中的比较运算符，绝大多数都和Java语言相同， 这里重点要说说的是==和===，可以认为==在进行比较时只关心内容不关心类型，只要内容相同即认为相等；===再进行比较时既关心内容又关心类型，只有内容和类型都完全相同才认为相等。!=、!==也是同理。

alert(123 == "123");  // 输出 true
alert(123 === "123"); // 输出 false

五、数组

这里就省去条件语句、循环语句 因为这些语句的语法和 Java 阶段基本一致，这里就不做过多介绍了，下面直接介绍JS中的数组部分。

1、数组创建

方式1：使用 new 关键字创建

// Array 的 A 要大写
var arr = new Array();

方式2：使用字面量方式创建 [常用]

var arr = [];
var arr2 = [1, 2, 'haha', false];

注意：由于JS是动态类型语言的特点，所以JS 的数组并不要求元素是相同类型。

2、获取和修改数组元素

使用下标的方式访问数组元素：

var arr = [1,2,3,4,5];
console.log(arr[3]);  // 获取元素4
console.log(arr[10]); // Js中越界不报错，得到undefined// 可直接使用下标加赋值的方式修改元素
arr[1] = 999;

3、新增元素

1、通过修改 length 新增。相当于在末尾新增元素，新增的元素默认值为 undefined。

2、通过 下标 新增。如果下标超出范围赋值元素，则会给指定位置插入新元素。

3、使用 push 进行追加元素。如 arr.push(值)。

4、删除元素

1、使用 splice 方法删除元素。例如：

var arr = [1,2,3,4];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[1, 2, 4]

2、使用 pop() 进行尾删并返回删除元素。例如：

var arr = [1,2,3,4];
var del = arr.pop();
console.log(del)
console.log(arr);
//结果
4
[1,2,3]

3、使用 shift() 方法进行头删并返回删除元素。例如：

var arr = [1,2,3,4];
var del = arr.shift();
console.log(del)
console.log(arr);
//结果
1
[2,3,4]

六、函数

1、普通函数

function test() {//函数体...//返回值...
}
//调用
test();

2、匿名函数

var test = function() {//函数体...//返回值...
}
//调用
test();

七、对象

1、对象的创建

掌握以下一种常用方法：

var a = {};  // 创建了一个空的对象
var animal = {name: '大黄',color: "黄色",weight: 25,eat: function() {console.log(name+"吃饭");},run:function() {console.log(name+"奔跑");}
};

2、属性方法的使用

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(animal.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(animal['weight']);
// 3. 调用方法, 别忘记加上 () 
animal.eat();
animal.run();

说明：

  1. 使用 {} 创建对象
  2. 属性和方法使用键值对的形式来组织.
  3. 键值对之间使用 , 分割。最后一个属性后面的 , 可有可无
  4. 键和值之间使用 : 分割
  5. 方法的值是一个匿名函数

八、JavaScript 和 Java 对比

  1. JavaScript 没有 “类” 的概念。对象其实就是 “属性” + “方法” 。
  2. JavaScript 对象不区分 “属性” 和 “方法”。
  3. JavaScript 对象没有 private / public 等访问控制机制。
  4. JavaScript 对象没有 “继承”。
  5. JavaScript 没有 “多态”。

九、事件

JS 要构建动态页面，就需要感知到用户的行为。用户对于页面的一些操作(点击、选择、修改等) 操作都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作。

1、常见事件

以下列举了一些常用事件，详情请参考：HTML DOM 事件

  1. onkeydown：按钮被按下
  2. onkeypress：按钮按下没有弹起
  3. onkeyup：按钮弹起
  4. onmousedown：鼠标按下
  5. onmouseup：鼠标松开
  6. onclick：单击事件
  7. ondbclick：双击事件
  8. onmouseover：鼠标移入事件
  9. onmouseout：鼠标移出事件
  10. onmousemove：鼠标移动事件
  11. onblur：失去焦点事件
  12. onfocus：获取焦点事件
  13. onsubmit：当表单提交事件为 true 时触发

2、事件三要素

  1. 事件源: 哪个元素触发的
  2. 事件类型: 是点击, 选中, 还是修改?
  3. 事件处理程序: 进一步如何处理. 往往是一个回调函数

十、DOM 元素

DOM（Document Object Model 文档对象模型）是指用于表示和操作HTML、XML等文档结构的编程接口。它提供了一种以层次结构方式来访问和操作文档中各个元素的方法。可以使用JavaScript动态地查询和修改文档中的元素和内容、更改它们的样式、添加、删除或移动节点等。同时我们还可以借助jQuery简化编写JavaScript代码的过程，使得开发者可以更高效地操作和修改HTML文档，并实现丰富的交互和动态效果。

这部分内容重在实践，将一万遍不如亲手做一遍，我会结合 HTML、CSS 并使用 JS 操作 DOM 元素，具体内容 下期 会以小项目的方式进行展现。

拓展：开发者工具介绍

浏览器开发者工具是开发人员用于调试例如JS代码的重要工具，下图展示了开发者工具中一些常用的模块：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/78950.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Kubernetes(k8s)上搭建nacos集群

Kubernetes(k8s)上搭建nacos集群

Kubernetes上搭建nacos集群 环境准备Kubernetes准备数据库准备 部署nacos集群官方镜像地址创建configmap创建部署文件根据yaml资源清单文件部署nacos 环境准备 Kubernetes准备 你需要准备一个Kubernetes集群&#xff0c;如图我的集群已经准备完毕&#xff1a; 数据库准备 …
阅读更多...
【蓝桥杯选拔赛真题60】Scratch旋转风车 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

【蓝桥杯选拔赛真题60】Scratch旋转风车 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch旋转风车 一、题目要求 编程实现 二、案例分析 1、角色分析
阅读更多...
【脑机接口论文与代码】 基于自适应FBCCA的脑机接口控制机械臂

【脑机接口论文与代码】 基于自适应FBCCA的脑机接口控制机械臂

Brain-Controlled Robotic Arm Based on Adaptive FBCCA 基于自适应FBCCA的脑机接口控制机械臂论文下载&#xff1a;算法程序下载&#xff1a;摘要1 项目介绍2 方法2.1CCA算法2.2FBCCA 算法2.3自适应FBCCA算法 3数据获取4结果4.1脑地形图4.2频谱图4.3准确率 5结论 基于自适应FB…
阅读更多...
Spring底层的核心原理解析

Spring底层的核心原理解析

这篇文章大致讲解一下spring的整个执行流程&#xff0c;也就是在我们脑子里面建立一个笼统的概念 spring如何创建一个容器呢 容器里面是对象 上面就是利用AnnotationConfigApplicationContext这个对象&#xff0c;然后传入了一个配置类的字节码对象给我们创建一个Spring容器&am…
阅读更多...
Hyper-V 安装 CentOS (二)

Hyper-V 安装 CentOS (二)

总目录 https://preparedata.blog.csdn.net/article/details/132877836 文章目录 总目录一、Hyper-V 创建centos的虚拟机实例二、虚拟机安装Centos ISO镜像三、重启后&#xff0c;进入系统 一、Hyper-V 创建centos的虚拟机实例 网络连接先不选择&#xff0c;后面文章专门配置网…
阅读更多...
【软考】系统架构设计师 - 知识扩展 - “区块链技术“

【软考】系统架构设计师 - 知识扩展 - “区块链技术“

目录 一 简介&#x1f451; 1 比特币❤️ 2 区块链的特点❤️ 3 共识算法❤️ 二 练习题&#x1f451; 三 扩展&#x1f451; 1 哈希算法❤️ 2 哈希指针❤️ 3 UTXO❤️ 4 参考资料❤️ 一 简介&#x1f451; 1 比特币❤️ 比特币底层采用了区块链技术。 比特币交易…
阅读更多...
03目标检测-传统方法与深度学习算法对比

03目标检测-传统方法与深度学习算法对比

目录 一、目标学习的检测方法变迁及对比 二、深度学习目标检测算法基本流程 三、传统目标检测算法VS深度学习目标检测算法 一、目标学习的检测方法变迁及对比 “目标检测“是当前计算机视觉和机器学习领域的研究热点。从Viola-Jones Detector、DPM等冷兵器时代的智…
阅读更多...
【数据结构】二叉树的链式结构

【数据结构】二叉树的链式结构

【数据结构】二叉树的链式存储结构 二叉树的存储结构 typedef int BTDataType; // 二叉树的结构 typedef struct BinaryTreeNode {BTDataType data; // 树的值struct BinaryTreeNode *left; // 左孩子struct BinaryTreeNode *right;// 右孩子 } BinaryTreeNode;二…
阅读更多...
EXCEL如何把一个单元格内的文本和数字分开？例如：龚龚15565 = 龚龚 15565

EXCEL如何把一个单元格内的文本和数字分开？例如：龚龚15565 = 龚龚 15565

使用工具&#xff1a;WPS 举例&#xff1a; EXCEL如何把一个单元格内的文本和数字批量分开&#xff1f;不使用数据分列。 第一步、将第二行数据冻结 第二步、在B1、C1单元格输入需要分开的示例 第三步、点击选中B1单元格&#xff0c;输入快捷键【CTRLE】进行填充。B2单元格也是…
阅读更多...
【AIGC】图片生成的原理与应用

【AIGC】图片生成的原理与应用

前言 近两年 AI 发展非常迅速&#xff0c;其中的 AI 绘画也越来越火爆&#xff0c;AI 绘画在很多应用领域有巨大的潜力&#xff0c;AI 甚至能模仿各种著名艺术家的风格进行绘画。 目前比较有名商业化的 AI 绘画软件有 Midjourney、DALLE2、以及百度出品的文心一格&#xff1a;…
阅读更多...
MinGW-W64 下载、安装与配置（支持最新版的GCC，目前 GCC 13.2.0）VSCode配置c/c++环境 彻底删除vscode（包括插件及配置！）

MinGW-W64 下载、安装与配置（支持最新版的GCC，目前 GCC 13.2.0）VSCode配置c/c++环境 彻底删除vscode（包括插件及配置！）

目录 一、简介 二、下载 1 旧版安装&#xff08;8.1.0&#xff09; 从 sourceforge.net 下载 2 新版安装(本次采用较新版本~~~) 从 github 下载 从 镜像站点 下载 自己编译 三、安装与配置 1. 在线安装&#xff08;这里仅作参考了解&#xff09; 2. 离线安装&…
阅读更多...
异步FIFO设计的仿真与综合技术（3）

异步FIFO设计的仿真与综合技术（3）

概述 本文主体翻译自C. E. Cummings and S. Design, “Simulation and Synthesis Techniques for Asynchronous FIFO Design 一文&#xff0c;添加了笔者的个人理解与注释&#xff0c;文中蓝色部分为笔者注或意译。前文链接&#xff1a; 异步FIFO设计的仿真与综合技术&#xf…
阅读更多...
自动化测试(五)：自动化测试框架的搭建和基于yaml热加载的测试用例的设计

自动化测试(五)：自动化测试框架的搭建和基于yaml热加载的测试用例的设计

该部分是对自动化测试专栏前四篇的一个补充&#xff0c;本次参考以下文章实现一个完整的谷歌翻译接口自动化测试:   [1]【python小脚本】Yaml配置文件动态加载   [2]【python做接口测试的学习记录day8——pytest自动化测试框架之热加载和断言封装】 目标&#xff1a;框架封…
阅读更多...
新增动态排序图、桑基图、AntV组合图，DataEase开源数据可视化分析平台v1.18.10发布

新增动态排序图、桑基图、AntV组合图，DataEase开源数据可视化分析平台v1.18.10发布

2023年9月14日&#xff0c;DataEase开源数据可视化分析平台正式发布v1.18.10版本。 这一版本的功能升级包括&#xff1a;数据集方面&#xff0c;对字段管理的后台保存做了相关优化&#xff0c;降低了资源消耗&#xff1b;仪表板方面&#xff0c;对联动、查询结果以及过滤组件等…
阅读更多...
系统架构：软件工程速成

系统架构：软件工程速成

文章目录 参考概述软件工程概述软件过程 可行性分析可行性分析概述数据流图数据字典 需求分析需求分析概述ER图状态转换图 参考 软件工程速成(期末考研复试软考)均适用. 支持4K 概述 软件工程概述 定义&#xff1a;采用工程的概念、原理、技术和方法来开发与维护软件。 三…
阅读更多...
GET，POST,DELETE,PUT参数传递的形式

GET，POST,DELETE,PUT参数传递的形式

一.get请求参数在地址后面进行拼接 1.代码&#xff1a; <template><div class""><button click"fn">点击</button></div> </template><script> import axios from "axios"; //安装完之后&#xff0…
阅读更多...
MFC中嵌入显示opencv窗口

MFC中嵌入显示opencv窗口

在MFC窗体中建立一个Picture Control控件，用于显示opencv窗口 在属性中设置图片控件的资源ID为IDC_PIC1 主要的思路： 使用GetWindowRect可以获取图片控件的区域 使用cv::resizeWindow可以设置opencv窗口的大小，适合图片控件的大小 使用cvGetWindowHandle函数可以获取到ope…
阅读更多...
OpenCV(四十二):Harris角点检测

OpenCV(四十二):Harris角点检测

1.Harris角点介绍 什么是角点&#xff1f; 角点指的是两条边的交点&#xff0c;图中红色圈起来的点就是角点。 Harris角点检测原理&#xff1a;首先定义一个矩形区域&#xff0c;然后将这个矩形区域放置在我的图像中&#xff0c;求取这个区域内所有的像素值之和&#xff0c;之…
阅读更多...
麒麟v10安装mysql（ARM架构）

麒麟v10安装mysql（ARM架构）

下载MYSQL安装包 华为开源镜像站_软件开发服务_华为云 上面的选择一个下载 或者用命令下载 wget https://repo.huaweicloud.com/kunpeng/yum/el/7/aarch64/Packages/database/mysql-5.7.27-1.el7.aarch64.rpm 检查是否已经安装MySQL rpm -qa | grep mysql将包卸载掉 rpm -…
阅读更多...
图论第三天|130. 被围绕的区域、417. 太平洋大西洋水流问题、827. 最大人工岛

图论第三天|130. 被围绕的区域、417. 太平洋大西洋水流问题、827. 最大人工岛

130. 被围绕的区域 文档讲解 &#xff1a;代码随想录 - 130. 被围绕的区域 状态&#xff1a;开始学习。 思路&#xff1a; 步骤一&#xff1a; 深搜或者广搜将地图周边的 ‘O’ 全部改成 ’A’&#xff0c;如图所示&#xff1a; 步骤二&#xff1a; 再遍历地图&#xff0c;将 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023