【前端基础篇】JavaScript基础介绍

devtools/2024/10/18 6:04:46/

文章目录

  • 前言
  • 初始JavaScript
    • JavaScript是什么
    • 发展历史
    • JavaScript和HTML和CSS之间的关系
    • JavaScript的运行过程
    • JavaScript的组成
  • JavaScript的书写形式
    • 行内式
    • 内嵌式
    • 外部式
    • 注释
  • 输入输出
  • 基础语法
    • 变量
      • 数据类型
    • 运算符
  • JavaScript对象
    • 对象
    • new关键字
  • 常用对象
    • 数组
    • 创建数组
    • 数组操作
    • 函数
      • 语法格式
      • 参数个数
      • 函数表达式
  • 写在最后

前言

在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔😘

以及在看本篇之前最好有HTML与CSS的基础

  • 【html" title=前端>前端基础篇】HTML零基础速通
  • 【html" title=前端>前端基础篇】CSS基础速通万字介绍（上篇）
  • 【html" title=前端>前端基础篇】CSS基础速通万字介绍（下篇）

初始JavaScript

JavaScript是什么

JavaScript (简称 JS)

  • 是世界上最流行的编程语言之一

  • 是一个脚本语言, 通过解释器运行

  • 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了.

当前 JavaScript 已经成为了一个通用的编程语言

JavaScript 的能做的事情:

  • 网页开发(更复杂的特效和用户交互)

  • 网页游戏开发

  • 服务器开发(node.js)

  • 桌面程序开发(Electron, VSCode 就是这么来的)

  • 手机 app 开发

发展历史

JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)

曾经的布兰登

在这里插入图片描述

发明 JavaScript 之后的布兰登

在这里插入图片描述

1995 年, 用 10 天时间完成 JS 的设计 (由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript 写出来的程序混乱不堪)

最初在网景公司, 命名为 LiveScript

一般认为，当时 Netscape 之所以将 LiveScript 命名为 JavaScript，是因为 Java 是当时最流行的编程语言，带有 “Java” 的名字有助于这门新生语言的传播。

其实 Java 和 JavaScript 之间的语法风格相去甚远

在这里插入图片描述

JavaScript和HTML和CSS之间的关系

在这里插入图片描述

  • HTML: 网页的结构(骨)
  • CSS: 网页的表现(皮)
  • JavaScript: 网页的行为(魂)

在这里插入图片描述

JavaScript的运行过程

  • 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
  • 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
  • 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
  • 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

在这里插入图片描述

浏览器分成渲染引擎 + JS 引擎.

  • 渲染引擎: 解析 html + CSS, 俗称 “内核”

  • JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8

JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行.

JavaScript的组成

  • ECMAScript(简称 ES): JavaScript 语法

  • DOM: 页面文档对象模型, 对页面中的元素进行操作

  • BOM: 浏览器对象模型, 对浏览器窗口进行操作

光有 JS 语法, 只能写一些基础的逻辑流程.

但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么久需要 DOM API 和 BOM API.

这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API,就不太需要关注 DOM 和 BOM

重要概念: ECMAScript

这是一套 “标准”, 无论是啥样的 JS 引擎都要遵守这个标准来实现.

JavaScript的书写形式

行内式

直接嵌入到 html 元素内部

css"><input type="button" value="点我一下" οnclick="alert('haha')">

注意, JS 中字符串常量可以使用单引号表示, 也可以使用双引号表示.

HTML 中推荐使用双引号, JS 中推荐使用单引号.

内嵌式

写到 script 标签中

html" title=javascript>javascript"><script>alert("haha");
</script>

外部式

写到单独的 .js 文件中

css">.html
<script src="hello.js"></script>.js
alert("hehe");

注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).

适合代码多的情况.

在这里插入图片描述

注释

单行注释 // [建议使用]

多行注释 /* */

html" title=javascript>javascript">// 我是单行注释
/*我是多行注释我是多行注释我是多行注释
*/

多行注释不能嵌套

输入输出

输入: prompt

弹出一个输入框

输出: alert

弹出一个警示对话框, 输出结果

console.log

在控制台打印一个日志(供程序员看)

html" title=javascript>javascript">// 弹出一个输入框
prompt("请输入您的姓名:");
// 弹出一个输出框
alert("hello");
// 向控制台输出日志
console.log("这是一条日志");

重要概念: .

console 是一个 js 中的 “对象”

. 表示取对象中的某个属性或者方法. 可以直观理解成 “的”

console.log 就可以理解成: 使用 “控制台” 对象 “的” log 方法.

基础语法

变量

创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式

关键字解释示例
var早期JS中声明变量的关键字, 作⽤域在该语句的函数内var name = ‘zhangsan’;
letES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块let name = ‘zhangsan’;
const声明常量的，声明后不能修改const name = ‘zhangsan’;

注意事项:

  1. JavaScript 是⼀⻔动态弱类型语⾔，⽐如:
html" title=javascript>javascript">//随着程序的运⾏, 变量的类型可能会发⽣改变.(动态)
var a = 10; // 数字
a = "hehe";//自动类型转换：弱类型语言会自动将一种类型转换为另一种类型以适应操作。例如，在 JavaScript 中，如果你将一个字符串与一个数字相加，JavaScript 会自动将数字转换为字符串，然后进行字符串连接。
let result = "5" + 2; // 结果是 "52"

  1. 变量名命名规则:

    a. 组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）

    b. 数字不能开头

    c. 建议使⽤驼峰命名

数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引⽤类型，具体有如下类型

数据类型描述
number数字. 不区分整数和⼩数
string字符串类型.字符串字⾯值需要使⽤引号引起来, 单引号双引号均可
boolean布尔类型. true 真, false 假
undefined表⽰变量未初始化. 只有唯⼀的值 undefined.
null初始化为唯一的值，空值

这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

注意*:

null 和 undefined 都表示取值非法的情况, 但是侧重点不同.

null 表示当前的值为空. (相当于有一个空的盒子)

undefined 表示当前的变量未定义. (相当于连盒子都没有)

注意：

特殊的数字值

  • Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

  • -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

  • NaN: 表示当前的结果不是一个数字.

运算符

有了C或java的基础，这些都是相似的

包括分支循环等语句，这里就不多赘述了

在这里插入图片描述

代码⽰例:

html" title=javascript>javascript"><script>var age = 20;
var age1 = "20";
var age2 = 20;
console.log(age == age1);//true, ⽐较值
console.log(age === age1);//false, 类型不⼀样
console.log(age == age2);//true, 值和类型都⼀样
</script>

JavaScript对象

Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。

对象

在JS中,字符串,数值,数组,函数都是对象. 每个对象中包含若⼲的属性和⽅法.

  • 属性:事物的特征.
  • ⽅法:事物的⾏为. JavaScript的对象和Java的对象概念上基本⼀致.只是具体的语法表项形式差别较⼤.
  1. 使⽤字⾯量创建对象[常⽤]
html" title=javascript>javascript">var a = {}; // 创建了⼀个空的对象 
var student = {name: 'xiaoming',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};
  • 使⽤{}创建对象
  • **属性和⽅法使⽤键值对的形式来组织. **
  • 键值对之间使⽤,分割.最后⼀个属性后⾯的,可有可⽆
  • 键和值之间使⽤:分割.
  • ⽅法的值是⼀个匿名函数

使⽤对象的属性和⽅法:

html" title=javascript>javascript">// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的" 
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号 
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 ()  
student.sayHello();
  1. 使⽤new Object创建对象
html" title=javascript>javascript">var student = new Object(); // 和创建数组类似 
student.name = "xiaoming";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
  1. 使用构造函数创建对象
html" title=javascript>javascript">function 构造函数名(形参) {this.属性 = 值;this.⽅法 = function...
}
var obj = new 构造函数名(实参);

注意:

  • 在构造函数内部使⽤this关键字来表⽰当前正在构建的对象.
  • 构造函数的函数名⾸字⺟⼀般是⼤写的.
  • 构造函数的函数名可以是名词.
  • 构造函数不需要return
  • 创建对象的时候必须使⽤new关键字.

this相当于"我"

this相当于"我" 使⽤构造函数重新创建猫咪对象:

html" title=javascript>javascript">function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound); // 别忘了作⽤域的链式访问规则 }
}
var mimi = new Cat('咪咪', '中华⽥园喵', '喵');
var xiaohei = new Cat('⼩⿊', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '⾦渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

new关键字

理解 new 关键字

new 的执行过程:

  1. 先在内存中创建一个空的对象 { }
  2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
  3. 执行构造函数的代码, 给对象创建属性和方法
  4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)

参考：

new - JavaScript | MDN (mozilla.org)

常用对象

数组

创建数组

  1. 使⽤ new 关键字创建
html" title=javascript>javascript"> // Array 的 A 要⼤写var arr = new Array();
  1. 使⽤字⾯量⽅式创建 [常⽤]
html" title=javascript>javascript">var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

注意: JS 的数组不要求元素是相同类型.

这⼀点和 C, C++, Java 等静态类型的语⾔差别很⼤. 但是 Python, PHP 等动态类型语⾔也是如此.

数组操作

  1. 读: 使⽤下标的⽅式访问数组元素(从 0 开始)

  2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素

  3. 改: 通过下标修改

  4. 删: 使⽤ splice ⽅法删除元素

html" title=javascript>javascript"><script>var arr = [1, 2, 'haha', false];//读取数组 console.log(arr[0]); //1//添加数组元素 arr[4] = "add"console.log(arr[4]);//addconsole.log(arr.length);//5, 获取数组的⻓度 //修改数组元素 arr[4] = "update"console.log(arr[4]);//update//删除数组元素 arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元素个数console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined console.log(arr.length);//4, 获取数组的⻓度 
</script>

注意:

  1. 如果下标超出范围读取元素,则结果为undefined

  2. 不要给数组名直接赋值,此时数组中的所有元素都没了.

    相当于本来arr是⼀个数组,重新赋值后变成字符串了.

html" title=javascript>javascript">var arr = ['⼩猪佩奇', '⼩猪乔治', '⼩⽺苏西'];
arr = '⼩猫凯迪';

函数

语法格式

html" title=javascript>javascript">// 创建函数/函数声明/函数定义 
function 函数名(形参列表) {函数体return 返回值;
}
// 函数调⽤ 
函数名(实参列表) // 不考虑返回值 
返回值 = 函数名(实参列表) // 考虑返回值
  • 函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.
  • 调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.可以借助调试器来观察.
  • 函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)

参数个数

实参和形参之间的个数可以不匹配.但是实际开发⼀般要求形参和实参个数要匹配

  1. 如果实参个数⽐形参个数多,则多出的参数不参与函数运算
  2. 如果实参个数⽐形参个数少,则此时多出来的形参值为undefined

JS的函数传参⽐较灵活,这⼀点和其他语⾔差别较⼤.事实上这种灵活性往往不是好事.

函数表达式

另外⼀种函数的定义⽅式

html" title=javascript>javascript">var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function

此时形如function() { } 这样的写法定义了⼀个匿名函数,然后将这个匿名函数⽤⼀个变量来表 ⽰. 后⾯就可以通过这个add变量来调⽤函数了.

JS中函数是⼀等公⺠,可以⽤变量保存,也可以作为其他函数的参数或者返回值.

写在最后

本篇简单介绍了JavaScript的基础概念语法和一些常用对象等，在之后的博客会介绍DOM和BOM等内容，敬请期待喔😘

以上就是关于【html" title=前端>前端基础篇】JavaScript基础介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️

在这里插入图片描述


http://www.ppmy.cn/devtools/99324.html

相关文章

在ubuntu22.04上部署RagFlow一个深度文档理解的开源 RAG

在ubuntu22.04上部署RagFlow一个深度文档理解的开源 RAG

RAGFlow 是一个基于深度文档理解的开源 RAG&#xff08;Retrieval-Augmented Generation&#xff09;引擎。它为任何规模的企业提供简化的 RAG 工作流程&#xff0c;结合 LLM&#xff08;大型语言模型&#xff09;以提供真实的问答功能&#xff0c;并由来自各种复杂格式数据的有…
阅读更多...
【嵌入式开发之网络编程】TCP端口和UDP端口

【嵌入式开发之网络编程】TCP端口和UDP端口

目录 网络端口的定义及作用 运输层的作用 运输层的两个主要协议 用户数据报协议UDP (User Datagram Protocol) 传输控制协议TCP (Transmission Control Protocol) 运输层的端口及分类 按照端口号分类 按照协议类型分类 BSD端口 网络端口的定义及作用 在网络技术中…
阅读更多...
（第三期）书生大模型实战营——OpenXLab部署InternLM2实践——上传模型

（第三期）书生大模型实战营——OpenXLab部署InternLM2实践——上传模型

OpenXLab 部署 InternLM2 实践指南 上传模型 初始化git设置 # install git sudo apt-get update sudo apt-get install git# install git lfs sudo apt-get update sudo apt-get install git-lfs# use git install lfs git lfs installOpenXLab 使用你在平台的用户名作为 Git…
阅读更多...
设计模式-结构型模式（第五章）

设计模式-结构型模式（第五章）

目录 5、结构型模式 5.1 代理模式 5.1.1 概述 5.1.2 结构 5.1.3 静态代理 5.1.4 JDK动态代理 5.1.4 JDK动态代理 5.1.5 CGLIB动态代理 5.1.6 三种代理的对比 5.1.7 优缺点 5.1.8 使用场景 5.2 适配器模式 5.2.1 概述 5.2.2 结构 5.2.3 类适配器模式 5.2.4 对象适…
阅读更多...
R语言function快速掌握-自定义函数

R语言function快速掌握-自定义函数

R语言在生物学中运用的比较多的还是吊包然后使用内置函数进行一次性工作&#xff0c;但是生物信息与计算生物学领域确实低估和忽视了R语言在循环和自定义函数方面的优势。 在R语言中&#xff0c;function 是一个核心概念&#xff0c;它允许用户创建可重用的代码块来执行特定的…
阅读更多...
怎么打包git提交版本

怎么打包git提交版本

Git 将指定的提交版本到现在的文件导出为zip/tar包 在本文中&#xff0c;我们将介绍如何使用 Git 来将指定的提交版本到现在的文件导出为 zip 或 tar 包。Git 是一个分布式版本控制系统&#xff0c;它可以帮助我们记录和管理项目的历史变更&#xff0c;包括文件的新增、修改和删…
阅读更多...
Windows-Server-2016/2019绕过WindowsDefender

Windows-Server-2016/2019绕过WindowsDefender

当获得了一个webshell的时候&#xff0c;下一步要反弹个shell回来 在尝试了https://github.com/trustedsec/unicorn独角兽失败之后&#xff0c;找到了一篇使用golang将shellcode注入到内存的文章 Bypassing Antivirus with Golang - Gopher it! | JUMPSEC LABS GitHub - brimst…
阅读更多...
读软件开发安全之道：概念、设计与实施07密码学（上）

读软件开发安全之道：概念、设计与实施07密码学（上）

1. 加密工具 1.1. 加密工具之所以没有得到充分使用&#xff0c;就是因为人们往往认为密码学是一个准入门槛极高的专业领域 1.2. 如今的加密学大部分都源自纯数学&#xff0c;所以只要能够正确使用&#xff0c;加密学确实行之有效 1.2.1. 不代表这些算法本身确实无法破解&…
阅读更多...
最新文章

Copyright @ 2022~2023