文章目录
- 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+" ");
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)
