JavaScript 知识扫盲

news2024/10/7 17:27:47

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.coloradmin.cn/o/1011332.html

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

相关文章

【MySQL系列】MySQL数据库索引详解

【MySQL系列】MySQL数据库索引详解

目录 一、为什么要用索引&#xff1f; 二、什么是索引&#xff1f; 三、MySQL索引使用场景 四、索引的原理 五、MySQL的存储引擎 六、索引的数据结构 七、索引如何使用 八、实际使用示例 九、优缺点、使用建议和注意事项 十、为什么Mysql不选择Hash索引&#xff1f; …
阅读更多...
k8s集群中流水线部署微服务

k8s集群中流水线部署微服务

k8s集群中流水线发布微服务 一、流水线部署微服务部署流程 二、微服务发布流程 pipeline {agent {node {label maven}}parameters {string(name: PROJECT_VERSION, defaultValue: v1.0, description: )string(name: PROJECT_NAME, defaultValue: , description: )}environment…
阅读更多...
json转换

json转换

json转html {"DS": [{"PROVINCE": "陕西省","ADMIN_CODE_CHN": "610600","STATION_ID_C": "53845","LON": "109.4497","V31001_S": 10,"V31001_X": 0},{&quo…
阅读更多...
【前端知识】+new Date()是什么？

【前端知识】+new Date()是什么？

一、new Date()的使用 new Date()是JavaScript中用于获取当前日期和时间的内置函数。它返回一个表示当前日期和时间的Date对象。如下所示&#xff1a; 通过Date.prototype可以查看Date对象的所有方法&#xff1a; constructor: ƒ Date() getDate: ƒ getDate() getDay: ƒ …
阅读更多...
学习笔记|IO中断|中断号大于31|中断优先级|简易中央门禁|STC32G单片机视频开发教程（冲哥）|第十六集：IO中断

学习笔记|IO中断|中断号大于31|中断优先级|简易中央门禁|STC32G单片机视频开发教程（冲哥）|第十六集：IO中断

文章目录 1.什么是IO中断?2.IO中断的用法13.1.3 端口中断模式配置寄存器(PxIM0&#xff0c;PxIM1)13.1.1 端口中断使能寄存器&#xff08;PxINTE)13.1.2端口中断标志寄存器(PxINTF)13.2 范例程序3.1.编写P35口的IO中断实现&#xff1a; 3.中断优先级的设置3.1 为什么会出现数码…
阅读更多...
C++ 算法学习 之 vector assign

C++ 算法学习 之 vector assign

参考c官方手册 vector::assign是C标准模板库中的一个函数&#xff0c;它的主要功能是给vector容器重新赋值。具体来说&#xff0c;vector::assign函数会删除vector中的所有元素&#xff0c;并根据用户提供的参数重新填充。 这个函数有三种形式&#xff1a; template <cla…
阅读更多...
基于SpringBoot蜗牛兼职网的设计与实现【附PPT|万字文档(LW)和搭建文档】

基于SpringBoot蜗牛兼职网的设计与实现【附PPT|万字文档(LW)和搭建文档】

主要功能 前台界面&#xff1a; ①首页、兼职信息推荐、查看更多等 ②职位申请、申请日期、上传简历、点击下载简历、留言反馈等 ③个人中心、上传图片、更新信息等 后台登录&#xff1a; ①用户登录&#xff1a; 个人中心、修改密码、个人信息、职位申请管理 ②企业登录&…
阅读更多...
基于STM32+华为云IOT设计的智能衣柜

基于STM32+华为云IOT设计的智能衣柜

一、项目介绍 随着智能家居的发展&#xff0c;人们对于家居设备的智能化和远程控制需求越来越高。智能衣柜作为智能家居的一部分&#xff0c;可以提供衣物存储和保护的功能&#xff0c;并通过传感器和互联网技术实现对衣柜内部环境的监测和控制&#xff0c;为用户提供更好的使…
阅读更多...
Map面试常见问题

Map面试常见问题

Map的特点有哪些&#xff1f; Java中的Map是一种接口&#xff0c;它表示一种将键映射到值的对象。Map的特点主要有以下几点&#xff1a; 键的唯一性&#xff1a;每个键在Map中只能出现一次&#xff0c;不能重复。不保证键的顺序&#xff1a;Map不保证键的插入顺序或者遍历顺序…
阅读更多...
MFC 如何启用/禁用菜单（返灰/不可点击状态）

MFC 如何启用/禁用菜单（返灰/不可点击状态）

1、为页面&#xff08;窗口&#xff09;添加一个菜单栏和子菜单 2、在XXDlg.h文件中定义一个菜单栏变量和bool变量 CMenu m_Menu; //菜单变量 bool m_EnableMenu;//菜单栏中某个子菜单禁用/启用&#xff08;变灰&#xff09;的控制变量3、在OnInitDialog函数中进行初始化&…
阅读更多...
智囊AI-基于 ChatGPT 的 AI 工具产品 你的私人AI助手

智囊AI-基于 ChatGPT 的 AI 工具产品 你的私人AI助手

智囊AI是一款基于 ChatGPT 的 AI 工具产品&#xff0c;主打免费、智能、方便&#xff0c;可以在此雇佣各种各样的免费智囊进行对话、自己创造和分享智囊、共享有趣有用的对话等。不过使用需要注册登录&#xff0c;可以使用自己的openai key或者使用网站提供的api key&#xff0…
阅读更多...
【2023年11月第四版教材】第13章《资源管理》（第一部分）

【2023年11月第四版教材】第13章《资源管理》（第一部分）

第13章《资源管理》&#xff08;第一部分&#xff09; 1 章节说明2 管理基础2.1 术语2.2 项目经理的权力有5种来源2.3 优秀团 队的建设5个阶段2.4 激励理论2.4.1 马斯洛需求层次理论2.4.2 赫茨伯格双因素理论&#xff1a;★★★ 2.4.3 X理论&#xff08;不好&#xff09;步丫理…
阅读更多...
Postman使用_参数设置和获取

Postman使用_参数设置和获取

文章目录 参数引用内置动态参数手动添加参数脚本设置参数脚本获取参数 参数就像变量一样&#xff0c;它可以是固定的值&#xff0c;也可以是变化的值&#xff0c;比如&#xff1a;会根据一些条件或其他参数进行变化。我们如果要使用该参数就需要引用它。 参数引用 引用动态参数…
阅读更多...
使用凌鲨订阅技术资讯

使用凌鲨订阅技术资讯

许多软件研发人员都通过业界资讯媒体和大牛的博客来获取信息。这些渠道提供了最新的行业动态、技术进展和趋势&#xff0c;对开拓视野、保持技术敏锐度和了解业界发展具有重要作用。一些知名的业界资讯媒体和大牛博客&#xff0c;它们在业界有着很高的影响力&#xff0c;为研发…
阅读更多...
IDEA2023中使用SpringBoot整合Lombok全过程及详细用法

IDEA2023中使用SpringBoot整合Lombok全过程及详细用法

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;CSDN实力新星&#xff0c;后端开发两年经验&#xff0c;曾担任甲方技术代表&#xff0c;业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开…
阅读更多...
在TensorFlow中使用GAN生成图像

在TensorFlow中使用GAN生成图像

一、说明 本文详细论述&#xff0c;如何在tensorflow下&#xff0c;在mnist数据集合上进行GAN实现。包括&#xff1a;框架建立、数据集读出、生成器、鉴别器、代价函数、优化等具体步骤的代码实现。 二、GAN框架介绍 生成器&#xff1a;此组件负责生成新图像。鉴别器&#xf…
阅读更多...
OPC DCOM快速配置

OPC DCOM快速配置

目录 1 老系统配置 1.1 移除Windows 安全 1.2 建立相互能识别的用户账号 1.3 配置系统宽泛的DCOM设置 1.4 配置Server的特殊DCOM设置 1.5 恢复Windows安全 1 老系统配置 远程OPC访问必须在服务器和客户端两端配置DCOM。本文讲述如何正确配置 DCOM 的步骤并保证安全。 新…
阅读更多...
classification_report

classification_report

文章目录 classification_report混淆矩阵精确率(精准率)&#xff0c;召回率&#xff0c;F1值精确率召回率F1值精确率、召回率和F1值的应用 参考文献 classification_report 假设使用sklearn.metrics.classification_report生成的分类图像如下图所示&#xff1a; 列名&#xf…
阅读更多...
大模型对外提供应用的三种服务方式及示例

大模型对外提供应用的三种服务方式及示例

最近在研究Llama大模型的本地化部署和应用测试过程中&#xff0c;为了给大家提供更多的应用方式&#xff0c;研究了如何利用python快速搭建各种应用访问服务&#xff0c;一般来说&#xff0c;我们开发完成的软件模块为了体现价值&#xff0c;都需要对外提供服务&#xff0c;最原…
阅读更多...
C++ PrimerPlus 复习 第一章 命令编译链接文件 make文件

C++ PrimerPlus 复习 第一章 命令编译链接文件 make文件

第一章 命令编译链接文件 C 有什么呢&#xff1f;C 源代码文件后缀运行C过程可执行代码&#xff1a;编译语法&#xff1a;makeMakefile 基础语法编写完make只要和将要编译的文件放一起就行 然后在该目录使用make命令&#xff0c;就将自动运行&#xff1b;基础的Makefile版本 现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023