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

文章目录

前言
初始JavaScript
JavaScript的书写形式
- 行内式
- 内嵌式
- 外部式
- 注释
输入输出
基础语法
JavaScript对象
- 对象
- new关键字
常用对象
写在最后

前言

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

以及在看本篇之前最好有HTML与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 标签中

javascript 复制代码

<script>
    alert("haha");
</script>

外部式

写到单独的 .js 文件中

css 复制代码

.html
<script src="hello.js"></script>

.js
alert("hehe");

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

适合代码多的情况.

注释

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

多行注释 /* */

javascript 复制代码

// 我是单行注释
/*
   我是多行注释
   我是多行注释
   我是多行注释
*/

多行注释不能嵌套

输入输出

输入 : prompt

弹出一个输入框

输出 : alert

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

console.log

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

javascript 复制代码

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

重要概念: .

console 是一个 js 中的 "对象"

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

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

基础语法

变量

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

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

注意事项:

JavaScript 是⼀⻔动态弱类型语⾔，⽐如:

javascript 复制代码

//随着程序的运⾏, 变量的类型可能会发⽣改变.(动态)
var a = 10; // 数字
a = "hehe";

//自动类型转换：弱类型语言会自动将一种类型转换为另一种类型以适应操作。例如，在 JavaScript 中，如果你将一个字符串与一个数字相加，JavaScript 会自动将数字转换为字符串，然后进行字符串连接。
let result = "5" + 2; // 结果是 "52"

变量名命名规则:

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的基础，这些都是相似的

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

代码⽰例:

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的对象概念上基本⼀致.只是具体的语法表项形式差别较⼤.

使⽤字⾯量创建对象[常⽤]

javascript 复制代码

var a = {}; // 创建了⼀个空的对象 
var student = {
 name: 'xiaoming',
 height: 175,
 weight: 170,
 sayHello: function() {
 console.log("hello");
 }
};

使⽤{}创建对象
**属性和⽅法使⽤键值对的形式来组织. **
键值对之间使⽤,分割.最后⼀个属性后⾯的,可有可⽆
键和值之间使⽤:分割.
⽅法的值是⼀个匿名函数

使⽤对象的属性和⽅法:

javascript 复制代码

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

使⽤new Object创建对象

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();

使用构造函数创建对象

javascript 复制代码

function 构造函数名(形参) {
 this.属性 = 值;
 this.⽅法 = function...
}
var obj = new 构造函数名(实参);

注意:

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

this相当于"我"

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

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 的执行过程:

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

参考：

new - JavaScript | MDN (mozilla.org)

常用对象

数组

创建数组

使⽤ new 关键字创建

javascript 复制代码

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

使⽤字⾯量⽅式创建 [常⽤]

javascript 复制代码

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

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

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

数组操作

读: 使⽤下标的⽅式访问数组元素(从 0 开始)
增: 通过下标新增, 或者使⽤ push 进⾏追加元素
改: 通过下标修改
删: 使⽤ splice ⽅法删除元素

javascript 复制代码

<script>
    var arr = [1, 2, 'haha', false];
    //读取数组 
    console.log(arr[0]); //1
    //添加数组元素 
    arr[4] = "add"
    console.log(arr[4]);//add
    console.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>

注意:

如果下标超出范围读取元素,则结果为undefined
不要给数组名直接赋值,此时数组中的所有元素都没了.

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

javascript 复制代码

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

函数

语法格式

javascript 复制代码

// 创建函数/函数声明/函数定义 
function 函数名(形参列表) {
 函数体
 return 返回值;
}
// 函数调⽤ 
函数名(实参列表) // 不考虑返回值 
返回值 = 函数名(实参列表) // 考虑返回值

函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.
调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.可以借助调试器来观察.
函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)

参数个数

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

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

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

函数表达式

另外⼀种函数的定义⽅式

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等内容，敬请期待喔😘

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