JavaScript基础

「PlanA」

于 2024-09-26 09:41:26 发布

阅读量664

点赞数 19

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_77599154/article/details/142316207

版权

JavaScript简介

JavaScript是什么？

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用

网页特效 (监听用户的一些行为让网页作出对应的反馈)

– 表单验证 (针对表单数据的合法性进行判断)

– 数据交互 (获取后台的数据, 渲染到前端)

– 服务端编程 (node.js)

JavaScript的组成

Ø ECMAScript:

        规定了js基础语法核心知识。

        比如：变量、分支语句、循环语句、对象等等

Ø Web APIs :

        DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

        BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JavaScript常用查找文档网站：MDN

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

JavaScript 书写位置

内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

外部JavaScript

代码写在以.js结尾的文件里

语法： 通过script标签，引入到html页面中。

内联JavaScript

代码写在标签内部

注意

.script标签中间无需写代码，否则会被忽略！

2.外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好的习惯。

JavaScript 注释

单行注释

符号： //

作用： //右边这一行的代码会被忽略

快捷键： ctrl+/

块注释

符号： /**/

作用： 在/*和*/之间的所有内容都会被忽略

快捷键： shift+alt+A

JavaScript结束符

作用： 使用英文的;代表语句结束

实际情况： 实际开发中，可写可不写,浏览器(JavaScript引擎)可以自动推断语句的结束位置

现状： 在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符

约定： 为了风格统一，结束符要么每句都写，要么每句都不写

JavaScript输入输出语法

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出语法

输入语法

JavaScript 代码执行顺序：

1. 按HTML文档流顺序执行JavaScript代码

2. alert() 和 prompt() 它们会跳过页面渲染先被执行

JavaScript变量

变量

白话：变量就是一个装东西的盒子。

通俗：变量是计算机中用来存储数据 的“ 容器 ”，它可以让计算机变得有记忆

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

变量的基本使用

1. 声明变量

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：

let 变量名

2. 变量赋值

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

注意：是通过变量名来获得变量里面的数据

3. 更新变量

注意： let 不允许多次声明一个变量。

4. 声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

语法： 多个变量中间用逗号隔开。

5.变量命名规则与规范

规则： 必须遵守，不遵守报错 (法律层面)

规范： 建议，不遵守不会报错，但不符合业内通识（道德层面）

1. 规则：

不能用关键字

     关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

     只能用下划线、字母、数字、$组成，且数字不能开头

   字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范：

        起名要有意义

        遵守小驼峰命名法

        第一个单词首字母小写，后面每个单词首字母大写。例：userName

变量拓展-let和var的区别

et 和 var 区别：

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。

var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。

let 为了解决 var 的一些问题。

var 声明:

Ø 可以先使用在声明 (不合理)

Ø var 声明过的变量可以重复声明(不合理)

Ø 比如变量提升、全局变量、没有块级作用域等等

结论：

var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

数组

数组的基本使用

常量

概念： 使用 const 声明的变量称为“常量”。

使用场景： 当某个变量永远 不会改变 的时候，就可以使用 const 来声明，而不是let。

命名规范： 和变量一致

常量使用

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

小技巧： 不需要重新赋值的数据使用const

JavaScript数据类型

数据类型 – 数字类型（Number）

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

Java是强数据类型例如 int a = 3 必须是整数

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

数学运算符也叫 算术运算符 ，主要包括加、减、乘、除、取余（求模）。

+：求和

-：求差

*：求积

/：求商

%：取模（取余数）

开发中经常作为某个数字是否被整除

数据类型–字符串类型（string）

通过单引号（''）、双引号（""）或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

1.无论单引号或是双引号必须成对使用

2.单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

3.必要时可以使用转义符\，输出单引号或双引号

字符串拼接：

场景：+运算符可以实现字符串的拼接。

口诀：数字相加，字符相连

数据类型 – 布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

数据类型 – 未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

数据类型 – null（空类型）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

        undefined 表示没有赋值

        null 表示赋值了，但是内容为空

控制台输出语句和检测数据类型

类型转换

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

小技巧：

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。

为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

自己写代码告诉系统该转成什么类型

转换为数字型

Number(数据)

        转成数字类型

        如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

        NaN也是number类型的数据，代表非数字

parseInt(数据)

        只保留整数

parseFloat(数据)

         可以保留小数

转换为字符型:

String(数据)

变量.toString(进制)

JavaScript运算符

赋值运算符

赋值运算符：对变量进行赋值的运算符

已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器

其他赋值运算符：

        +=

         -=

        *=

        /=

        %=

使用这些运算符可以在对变量赋值时进行快速操作

一元运算符

自增：

        符号：++

        作用：让变量的值 +1

自减：

        符号：--

        作用：让变量的值 -1

比较运算符

字符串比较，是比较的字符对应的ASCII码

        从左往右依次比较

        如果第一位一样再比较第二位，以此类推

        NaN不等于任何值，包括它本身

逻辑运算符

运算符优先级

JavaScript语句

分支语句

If分支语句

三元运算符

switch 语句

循环语句

while 循环

for循环语法

JavaScript数组

操作数组

数组本质是数据集合,操作数据无非就是增删改查语法

增加

删除

JavaScript函数

function，是被设计为执行特定任务的代码块。函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的

函数使用

函数的声明语法：

函数名命名规范

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

函数的调用语法

函数传参

声明语法

匿名函数

没有名字的函数, 无法直接使用。

函数表达式

立即执行函数

JavaScript对象

对象（object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合

对象声明语法

对象有属性和方法组成

属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…

方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔

多个属性之间使用英文 , 分隔

对象使用

对象本质是无序的数据集合, 操作数据无非就是增删改查语法：

属性-查

语法：对象名.属性

属性-查的另外一种写法

我们可以采取：对象[‘属性’] 方式，单引号和双引号都可以

属性-改

语法：对象名.属性 = 新值

属性-增

对象名.新属性 = 新值

属性-删

delete 对象名.属性

对象中的方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用 : 分隔

多个属性之间使用英文 , 分隔

方法是依附在对象中的函数

方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

遍历对象

for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名，由于 k 是变量, 所以必须使用 [ ] 语法解析。

k 是获得对象的 属性名 ， 对象名[k] 是获得 属性值

内置对象

内置对象-Math

介绍： Math对象是JavaScript提供的一个“数学”对象

作用： 提供了一系列做数学运算的方法

Math对象包含的方法有：

random：生成0-1之间的随机数（包含0不包括1）

ceil：向上取整

floor：向下取整

max：找最大数

min：找最小数

pow：幂运算

abs：绝对值