概述
- JavaScript = ECMAScript + JavaScript特有的东西(BOM + DOM)
- ECMAScript:客户端脚本语言,是欧洲计算机制造商协会ECMA,制定的标准,统一了所有客户端脚本语言的编码方式
- BOM:Browser Object Model,浏览器对象模型,将浏览器的各个组成部分封装成对象。
- DOM:Document Object Model,文档对象模型,将标记语言文档的各个组成部分,封装成对象,使用这些对象,对标记语言文档进行 CRUD 动态操作
基本语法
-
内部JS,在HTML页面任何位置,定义,但是定义的位置会影响执行顺序
-
外部JS,在外部定义个 .js 文件,通过以下命令引入
<!-- 名字是自己定义的 --> <script src="Learn.js"></script>
注意:上述的 JS 都得定义在 标签中
数据类型
- 原始数据类型
- number:数字、整数、小数、NaN(Not a number 一个不是数字的数字类型)
- string:字符串
- boolean:布尔类型,true 和 false
- null:一个对象为空的占位符
- undefined:未定义类型,一个变量没有给初始值,则默认赋值为 undefined
- 引用数据类型
- 对象(Object):可以包含多个键值对,也可以包含函数作为其中的方法
- 数组(Array):特殊类型的对象
- 函数(Function):可以被赋值给变量,也可以作为参数传递给其他函数
- 日期(Date):用于处理日期和时间
- 正则表达式(RegExp):处理字符串的模式匹配
变量
-
语法
var 变量名 = 初始化值;
-
注意
- java 是强类型语言,强类型语言开辟变量空间时,定义了空间未来存储的数据类型。
- JavaScript 是弱类型语言,弱类型语言开辟变量空间时,不定义了空间未来存储的数据类型,可以存放任意类型的数据。
- null 运算后得到的是 Object 类型
运算符
-
概述:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
-
类型转换
- string 转 number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
- boolean 转 number:true转为1,false转为0
- number 转 boolean:0或NaN为假,其他为真
- string 转 boolean:除了空字符串(“”),其他都是true
- null undefined 转 boolean:都是false
- 对象 转 boolean:所有非空对象都为true,空对象为 false
-
比较运算符
- “===”:全等于
类型相同:直接比较 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止 类型不同:先进行类型转换,再比较 ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false -
分支结构
- JavaScript 可以接受所有原始数据类型
-
var 关键字在函数中
- 用 var 定义的变量是局部变量
- 不用 var 定义的变量是全局变量(不太建议)
注意:以上写的只是和 Java 中有区别的一些特性,其他和Java中一致
基本对象
Function(函数)
-
概述:这个函数就是一个对象
-
创建函数格式
// 格式一 function 方法名称(形式参数列表){方法体 } // 格式二 var 方法名 = function(形式参数列表){方法体 }
-
方法调用格式
// 实际参数列表,根据自己需要的个数填写 方法名称(实际参数列表);// 例如:下述调用的都是一个 add() 方法 add(1,2); add(1,2,3); add(true,1);
-
方法(函数)的特点
- 方法定义时,形参的类型不写、返回值类型也不写
- 方法是一个对象,如果定义名称相同的方法,会覆盖之前的同名方法
- 在JavaScript中,方法的调用只和方法的名称有关和参数列表无关
- 在方法声明中有一个隐藏的内置对象(数组)-arguments 封装所有实参
-
示例代码
<script>/* 方法的定义:不写形参、不写返回值类型 */function add(){// 定义一个求和变量 sumvar sum = 0;for(var i = 0; i < arguments.length; ++i){sum += arguments[i];}return sum;} /* 方法的调用:只和方法名有关,实参自己随意写 */var sum = add(1,2,3,4,5);/* 弹出 */alert(sum); </script>
Array(数组)
-
概述:这是一个数组对象
-
数组特点
- 数组元素的类型是可变的
- 数组长度是可变的
-
创建数组格式
// 格式一 var arr = new Array(元素列表); // 格式二 var arr = new Array(默认长度); // 格式三 var arr = [元素列表];
-
常用方法和属性
方法和属性(带括号是方法,不带括号是属性) 作用 length 计算数组的长度 join(参数) 将数组中的元素按照指定的分隔符拼接为字符串 push() 向数组的末尾添加一个或更多元素,并返回新的长度 -
示例代码
<script>// 格式一:定义一个数组alert("arr1数组:");var arr1 = new Array(1,2,3,4);for(var i = 0; i < arr1.length; ++i){alert(arr1[i]);}alert("arr2数组:");// 格式二:定义一个数组var arr2 = new Array(2);/* 数组末尾添加 */let len = arr2.push(9,8);/* 输出数组新的长度 4,前两个都是未定义 */alert(len);for(var i = 0; i < arr2.length; ++i){alert(arr2[i]);}// 格式三:定义一个数组alert("arr3数组:");var arr3 = [1,true,'a','cd'];let s = arr3.join("-");alert(s); </script>
Date(日期)
-
概述:日期对象
-
创建格式
var date = new Date();
-
常用方法
方法 作用 toLocalString() 返回当前 date 对象对应的时间 本地字符串格式 getTime() 获取毫秒值,返回当前对象描述的时间到 1970.1.1 号零点的毫秒值差 -
示例代码
<script>// 创建日期对象var date = new Date();// 调用方法let time = date.toLocaleDateString();// 弹出当前年月日alert(time);// 获取时间差let time1 = date.getTime();// 弹出毫秒差alert(time1); </script>
RegExp(正则表达式)
-
概述:正则表达式对象,定义字符串的组成规则
-
格式
- 单个字符:[]
- 例如:[a]、[ab]、[a-z]、[A-Z]、[0-9]
- 特殊符号代表特殊含义的单个字符
- \d:单个数字字符 [0-9]
- \w:单个单词字符 [a-z A-Z 0-9 _ ]
- 量词符号
- ?:表示出现 0 次或者 1次
- *: 表示出现 0 次或者 多次
- +: 表示出现 1 次或者 多次
- {m,n}:表示 m <= 数量 <= n
- m 如果缺省,{,n} 最多 n 次
- n 如果缺省,{m,}最少 m 次
- 开始结束符号
- ^:开始符号
- $:结束符号
- 单个字符:[]
-
正则对象创建格式
// 格式一 var reg = new RegExp("正则表达式"); // 格式二 var reg = /正则表达式/;
-
常用方法
方法 作用 test(参数) 验证指定的字符串是否符合正则定义的规范 -
示例代码
<script>// 创建 正则表达式对象,规则是:匹配长度为 6到12 个字符的数字字母下划线var reg = new RegExp("^\\w{6,12}$");// var reg = /^\w{6,12}$/;let a = reg.test("123_anc");let b = reg.test("an");alert(a);alert(b); </script>
Global(全局)
-
概述:全局对象,Global 中封装的方法不需要对象就可以直接调用
-
调用格式
方法名();
-
常用方法
方法 作用 注意 encodeURI() url 编码 decodeURI() url 解码 encodeURIComponent() url 编码 编码的字符更多 decodeURIComponent() url 解码 parseInt() 将字符串转为数字 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为 number isNaN() 判断一个值是否是 NaN NaN 六亲不认,连自己都不认,NaN参与的 == 比较全为 false eval() JavaScript字符串,并把它作为脚本代码来执行 并不太建议使用 -
示例代码
<script>/* 将特殊字符转为相应的编码格式,空格转换为 %20 */var url = "https://www.example.com/search?q=" + encodeURIComponent("JavaScript Tutorial");alert(url);/* 解码 */let durl = decodeURIComponent(url);alert(durl);/* 转换为数字 */var s = "123a4";let number = parseInt(s);alert(number);/* 判断 */var a = "abc";let b = isNaN(a);alert(b); </script>