JavaScript基础（ECMAScript）学习

2023-08-30 09:46:10

文章目录

1.JavaScript概念
2.JavaScript的功能
3.JavaScript发展史
4.JavaScript = ECMAScript + BOM+DOM
5.ECMAScript：客户端脚本语言的标准
5.1基本语法
5.1.1与HTML结合的方式
5.1.2注释
5.1.3数据类型
5.1.4 变量
5.1.5 运算符
5.1.6 自动类型转换
5.1.7 流程控制语句
5.1.8 JS特殊语法
5.1.9 九九乘法表设计练习
5.2 基本对象
5.2.1 Function：函数（方法）对象
5.2.2 Array：数组对象
5.2.3 Boolean
5.2.4 Date ：日期对象
5.2.5 数学对象
5.2.6 Number
5.2.7 String
5.2.8 RegExp:正则表达式对象
5.2.9 lobal：全局对象

1.JavaScript概念

JavaScript是一门客户端脚本语言

运行在客户端浏览器，每一个浏览器都有JavaScript解释引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行

2.JavaScript的功能

可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些动态元素，增强用户体验

3.JavaScript发展史

1992年，Nombase 公司，开发出第一门客户端脚本语言，专门用于表单的校验，可以防止用户非法数据的提交，增强用户的体验。命名为：C – ，但这门语言当时并没有多少人使用。后来更名为：ScriptEase。
1995年，Netscape (网景)公司，借鉴了 C-- 语言的思想，开发了一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家，修改 LiveScript，命名为 JavaScript。
1996年，微软抄袭 JavaScript 开发出 JScript 语言。
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。

4.JavaScript = ECMAScript + BOM+DOM

5.ECMAScript：客户端脚本语言的标准

5.1基本语法

5.1.1与HTML结合的方式

内部js：在 html 中定义，标签体内容就是 js 代码
外部js:在外部写js文件，html页面通过script的src属性引入路径

5.1.2注释

1.单行注释：

//单行注释

2.多行注释：

/*
	多行注释内容 
*/

5.1.3数据类型

1.原始数据类型

number:数字。（整数/小数/NAN（一个不是数字的数字类型））

// 整数
var num1 = 1;
// 小数
var num2 = 1.5;
// NaN
var num3 = NaN;

String：字符串 “abc” , ‘abc’

var str1 = "abc";
var str2 = 'def';

boolean: true or false

var flag1 = true;
var flag2 = false;

null:一个对象为空的占位符

var obj = null;

undefined：未定义。如果一个变量没有给定初始值，则会默认赋值为undefined

var obj1 = undefined;
// 等效于下面这条语句
var obj2;

注意：null == undefined 会返回 true，因为它们是类似的值；但 null === undefined 会返回false，因为它们是不同类型的值。

document.write((undefined == null)+"<br>");// true
document.write((undefined === null)+"<br>");// flase

2.引用数据类型：变量

5.1.4 变量

变量：一小块存储数据的内存空间
Java是强类型语言，JavaScript语言是弱类型语言
语法：

var 变量名 = 变量值;

typeof 运算符：获取变量的类型

typeof(变量名)

注意：null 获取变量的类型是 object

5.1.5 运算符

1.一元运算符：只有一个运算数的运算符

++ ， - - ， + （正号）， -（负号）

var b = +"123";
alert(typeof(b));//b是number类型，进行了强制类型转换

2.算术运算符

+， - ， * ， / ， %

3.赋值运算符

= ，+= ，-=

4.比较运算符

< ， > ，>= ， <= ， == ， ===（全等于）

5.逻辑运算符

&& , || , !

6.三元运算符

？：

variablename=(condition)?value1:value2;

判断 condition 的值，如果是 true 则取值 value1，如果是 false 则取值 value2

5.1.6 自动类型转换

在 JS 中，如果运算数不是运算符所要求的类型，那么 JS 引擎会自动的将运算数进行类型转换。

1.string 转 number

如果字面值是数字，按照字面值转换。如果字面值不是数字，则转为NaN

var a = +"123";
var b = +"abc";
document.write(a+"<br>");// 123
document.write(b+"<br>");// NaN

2.boolean 转 number

true 转为 1，false 转为 0

var flag1 = +true;
var flag2 = +false;
document.write(flag1+"<br>");// 1
document.write(flag2+"<br>");// 0

3.null 转 number

var obj1 = +null;
document.write(obj1+"<br>");// 0

4.undefined 转 number

var obj2 = +undefined;
document.write(obj2+"<br>");// NaN

5.其他类型转 boolean：
     1.number： 0 或 NaN 为 false，其他为 true
     2.string：除了空字符串("")，其他都是 true
     3.null & undefined：都是 false
     4.对象：所有对象都为 true

var obj1 = "abc";
if(obj1.length > 0){
	alert(123);
}
//js中可以这样定义，简化书写。可以防止空指针异常
if(obj1){
	alert(123);
}

var obj2 = new Date();
if(obj2 != null){
	alert(124);
}
//js中可以这样定义，简化书写。
if(obj2){
	alert(124);
}

5.1.7 流程控制语句

1.if…else…
2.switch（在 JS 中,switch 语句可以接受任意的原始数据类型）
3.while
4.do…while
5.for

5.1.8 JS特殊语法

1.语句以;结尾，如果一行只有一条语句;可以不写，但是不推荐
2.变量的定义使用var关键字，也可以不用

用：定义的是局部变量
不用：定义的是全局变量

5.1.9 九九乘法表设计练习

1.效果图

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin: auto;
        }
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table>");
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for (var j = 1; j <= i ; j++) {
                document.write("<td>");
                document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>
    
</body>
</html>

5.2 基本对象

5.2.1 Function：函数（方法）对象

1.创建：

构造函数定义（不推荐使用）

var myFunction = new Function("a","b","return a*b");
var x = myFunction(2,4);

函数表达式定义

var myFunction = function (a,b) {
    return a*b;
};
var x = myFunction(2,4);

函数声明定义

function myFuction(a,b) {
	return a*b;
}
var x = myFuction(2,4);

2.方法

3.属性：
arguments.length：返回形参的个数

4.特点

函数定义时，形参的类型和返回值类型都可以不写
定义名称、参数相同的函数，会覆盖前面那个函数

function myFuction(a,b) {
    return a;
}
function myFuction(a,b) {
    return a*b;
}
document.write(myFuction(3,4));// 12

函数的调用只与函数的名称有关，实参和形参不一样也能执行

function myFuction(a,b) {
    return a;
}
var w = myFuction();// undefined
var x = myFuction(2);// 2
var y= myFuction(2,3);// 2
var z = myFuction(2,3,4);// 2

在函数声明中有一个隐藏的内置对象（数组）arguments，封装所有的实际参数。（求任意个数数的和）

// 求任意个数的数的和
function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
document.write(add(2,4,7));// 13

5.2.2 Array：数组对象

1.创建
Array内部只有一个数字表示默认长度，如Array(2)
内部两个数字，表示数组内容，如Array（1,2）

常规方式

// 不指定数组长度
var arr1 = new Array();
arr1[0] = 1;
arr1[1] = 2;
// 指定数组长度
var arr1 = new Array(2);
arr1[0] = 1;
arr1[1] = 2;

简洁方式

var arr3 = new Array(1,2);

字面方式

var arr4 = [1,2];

2.方法

join(参数)：将数组中的元素按照指定的分隔符拼接为字符串，默认为逗号，可传入参数作为分隔符。

var arr = new Array(1,2,3);
document.write(arr.join());// 1,2,3

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

var arr = new Array(1,2,3);
arr.push(4,5,6);
document.write(arr);// 1,2,3,4,5,6

3.属性

length：数组的长度

4.特点

JS 中，数组元素的类型可变的。

var arr = [1,"abc",true];

JS 中，数组长度可变的。

var arr = new Array(2);
arr[0] = 1;
arr[1] = 2;
arr[10] = 3;
document.write(arr.length);// 11

5.2.3 Boolean

5.2.4 Date ：日期对象

1.创建

var date = new Date();

2.方法

toLocaleString()：返回当前date对象对应的时间本地字符串格式

var date = new Date();
document.write(date.toLocaleString());// 2020/2/26 下午6:11:45

getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。

var date = new Date();
document.write(date.getTime()+"<br>")// 1565456951248

5.2.5 数学对象

1.创建

Math对象不用创建，直接使用。

2.方法

random()：返回 0 ~ 1 之间的随机数。（含0不含1）

document.write(Math.random());

round(x)：把数四舍五入为最接近的整数

document.write(Math.round(3.14));// 3
document.write(Math.round(-3.14));// -3

ceil(x)：对数进行上舍入。即大于该数的最小整数。

document.write(Math.ceil(3.14));// 4
document.write(Math.ceil(-3.14));// -3

floor(x)：对数进行下舍入。即小于该数的最大整数。

document.write(Math.floor(3.14));// 3
document.write(Math.floor(-3.14));// -4

3.属性

document.write(Math.PI);// 3.141592653589793

取1-100之间算计整数

var number = Math.floor((Math.random()*100))+1;
document.write(number);

5.2.6 Number

5.2.7 String

5.2.8 RegExp:正则表达式对象

1.正则表达式的概念

定义字符串的组成规则

2.正则表达式的使用

单个字符
1.[abc]：查找方括号之间的任何字符。
2.[0-9]：查找任何从 0 至 9 的数字。
3.[a-z]：查找任何从小写 a 到小写 z 的字符。
4.[A-Z]：查找任何从大写 A 到大写 Z 的字符。
5.\d：单个数字字符 0-9
6.\w：用于查找单词字符。（单词字符包括：a-z、A-Z、0-9，以及下划线, 包含 _ (下划线) 字符。）
量词符号

{m,n}：表示 m <= 数量 <= n
m 如果缺省：{,n}：最多n次
n 如果缺省：{m,}：最少m次
开始结束符号

1.^：开始
2.$：结束

3.正则表达式对象的创建

var reg = new RegExp("正则表达式");
// 或更简单的方法
var reg = /正则表达式/;

4.正则表达式对象的方法

test(参数)：验证指定的字符串是否符合正则定义的规范

5.正则表达式练习

// 要求用户名为 6-10 个单词字符
var reg = /^\w{6,10}$/;
var username1 = "ZhangSan";
var username2 = "LiSi";
var username3 = "WangWu123";
var username4 = "小明12345";
document.write(reg.test(username1)+"<br>");// true
document.write(reg.test(username2)+"<br>");// false
document.write(reg.test(username3)+"<br>");// true
document.write(reg.test(username4)+"<br>");// false

5.2.9 lobal：全局对象

1.特点

Global 中封装的方法不需要对象就可以直接调用。

2.方法

URL 编码的概念

在浏览器中访问，做数据传输时需要通过 HTTP 协议，而协议不支持中文数据，所以中文数据要发送到服务端，就需要先进行转码，转码通常采用 URL 编码。

注意：如果采用 GBK 编码，那么 1 个汉字转成 2 个字节；

如果采用 UTF-8 编码，那么 1 个汉字转成 3 个字节

1 个字节对应 1 个 % 加两个十六进制数
encodeURI()：URL 编码

var encode = encodeURI("https://www.baidu.com/s?ie=UTF-8&wd=数据结构");
document.write(encode);

结果

https://www.baidu.com/s?ie=UTF-8&wd=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

decodeURI()：URL 解码

var decode = decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84");
document.write(decode);

结果

https://www.baidu.com/s?ie=UTF-8&wd=数据结构

encodeURIComponent()：URL 编码，编码的字符更多

var encode = encodeURIComponent("https://www.baidu.com/s?ie=UTF-8&wd=数据结构");
document.write(encode);

结果

https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3DUTF-8%26wd%3D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

decodeURIComponent()：URL 解码，解码的字符更多

var decode = decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3DUTF-8%26wd%3D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84");
document.write(decode);

结果

https://www.baidu.com/s?ie=UTF-8&wd=数据结构

parseInt()：将字符串转为数字（逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number）

var str1 = "123"
var str2 = "12a3";
var str3 = "a123";
document.write(parseInt(str1)+"<br>");// 123
document.write(parseInt(str2)+"<br>");// 12
document.write(parseInt(str3)+"<br>");// NaN

isNaN()：判断一个值是否是 NaN

var a = NaN;
// NaN 参与的 == 比较全部是 false
document.write(a == NaN);// false
document.write(isNaN(a));// true

eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行。

var jscode = "alert(123)";
eval(jscode);// 执行 alert(123)

麋鹿的小羊驼发布了9 篇原创文章 · 获赞 17 · 访问量 1062 私信关注

码农公寓

文章目录

1.JavaScript概念

2.JavaScript的功能

3.JavaScript发展史

4.JavaScript = ECMAScript + BOM+DOM

5.ECMAScript：客户端脚本语言的标准

5.1基本语法

5.1.1与HTML结合的方式

5.1.2注释

5.1.3数据类型

5.1.4 变量

5.1.5 运算符

5.1.6 自动类型转换

5.1.7 流程控制语句

5.1.8 JS特殊语法

5.1.9 九九乘法表设计练习

5.2 基本对象

5.2.1 Function：函数（方法）对象

5.2.2 Array：数组对象

5.2.3 Boolean

5.2.4 Date ： 日期对象

5.2.5 数学对象

5.2.6 Number

5.2.7 String

5.2.8 RegExp:正则表达式对象

5.2.9 lobal：全局对象

相关文章

5.2.4 Date ：日期对象