JavaScript

最新推荐文章于 2024-11-02 12:42:04 发布

宅博士小陈

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量1k

点赞数 12

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_86102746/article/details/142617384

版权

一，什么是JavaScript

1 应用场景

JavaScript用来做前端页面校验
JavaScript可以实现网页的一些动画效果，例如：轮播图

2 JavaScript介绍

JavaScript 是一门跨平台、基于对象的脚本语言，来控制网页行为的，它能使网页可交互。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于1997 年成为 ECMA 标准。ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015年)。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript语言不需要编译，直接由各大浏览器解析运行。学习
JavaScript语言不需要单独安装软件，只需要浏览器即可。

3 JavaScript特点
脚本语言
浏览器分成两部分：渲染引擎和JS引擎。渲染引擎:用来解析HTML和
CSS,俗称内核，例如chrome浏览器的blink。JS引擎：也称为JS解释
器。用来读取网页中的JS代码，对其处理后运行，例如chrome浏览
器的V8。浏览器本身并不会执行JS代码，而是通过内置JavaScript引
擎(解释器)来执行JS代码。JS引擎执行执行代码时逐行解释每一行源
码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归
为脚本语言，会逐行解释执行。
弱类型
JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收
任何类型的数据，并且会在程序执行过程中根据上下文自动转换类
型。

4 JavaScript的组成

组成部分	作用
ECMAScript	构成了JavaScript核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素（标签）

二.JavaScript引入方式

1 内部脚本

将 JS代码定义在HTML页面中，JavaScript 代码必须位于标签之间。
在 HTML 文档中可以在任意地方，放置任意数量的。一般把脚本置于元素的底部，可改善显示速度，因为脚本执行
会拖慢显示。

2 .外部脚本

将 JS代码定义在外部 JS文件中，通过标签引入到 HTML页面中
标签要么用于定义内部脚本，要么用于引入外部js文件，不能混用
标签不能自闭合

三.JavaScript基础语法

1. JavaScript的书写语法

区分大小写
每行结尾的分号可有可无
注释：单行注释：// 注释内容，多行注释：/* 注释内容 */

2. JavaScript的三种输出方式

弹出警告框：window.alert("hello JS ~");
输出数据到页面： document.write("hello JS ~");
输出到浏览器控制台：console.log("hello JS ~");

3 JavaScript定义变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
ES 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字在的代码块内有效，且不允许重复声明
ES6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

4 JavaScript数据类型

原始类型:

number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined

引用类型:

就是对象。Object Date 等

使用 typeof 运算符可以获取数据类型

5 JavaScript运算符

一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? 值1 : 值2；

6 JavaScript全局函数

其他类型转换为数字：parseInt(数值)，将参数数值转换为整数，从左向右解析，遇到非数值就停止解析.如果字面值不是数字，则转为NaN。
布尔类型转换为整数：Number()，true 转为1，false 转为0
其他类型转为 boolean：Boolean(value)

number：0和NaN转为false，其他的数字转为true
string：空字符串转为false，其他字符串转为true
null:转为false
undefined：转为false

在JavaScript中有全局函数概念：不归属任何对象，即可以理解为不需要任何对象就可以调用的函数；注意：所有的全局函数都可以使用浏览器窗口对象调用，即window对象调用，但可以省略不写。

7 JavaScript流程控制语句

if switch for while do…while

8 JavaScript函数(重点)

1 方式一

定义：JavaScript 函数通过 function 关键词进行定义

形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即

调用：函数名称(实际参数列表);

let result = add(2,3);
<!DOCTYPE html>

定义格式

var functionName = function (参数列表){
要执行的代码
}
var add = function (a,b) {
return a + b;
}

调用：JavaScript中，函数调用可以传递任意个数参数

let result = add(1,2,3);

注意事项

匿名函数还可以作为另一个函数的参数传递
在JavaScript中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名
在JavaScript中调用无参函数可以传递实参；调用有参函数可以不传递实参.数据没有丢失会放到js的一个内置数组对象中arguments

三.JavaScript对象

1 数组对象Array

定义格式一

le't arr=new Array(元素1,元素2...);
var myCars=new Array("Saab","Volvo","BMW");

定义格式二

ar arr=[元素1,元素2...];
var myCars=["Saab","Volvo","BMW"];

常见属常见属性和函数

push()：像数组的末尾添加一个或更多元素，并反回新的长度。

正则对象RegExp

直接量：注意不要加引号

var reg = /^正则表达式符号$/;

创建RegExp对象

var reg = new RegExp("^正则表达式符号$");

方法:

test(str)：判断指定字符串是否符合规则，返回 true或 false

语法:

^：表示开始 $：表示结束
[]:代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.:代表任意单个字符，除了换行和行结束符
\w:代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
\d:代表数字字符：相当于 [0-9]
量词：+:至少一个 *:零个或多个 ?:零个或一个
{x}:x个 {m,}:至少m个 {m,n}:至少m个，最多n个
只能输入数字: ^[0-9]*$

6到16位的数字: ^\d{6,16}$
字母开头6-16位: ^[a-zA-Z][a-zA-Z0-9]{5,15}$

需求：使用正则表达式验证指定的字符串是否满足长度是6