JavaScript概述
JavaScript简介
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了
javaScript的发展史
- **起源：**上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
- **动手：**有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
- **竞争：**看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
- 标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。
JavaScript的功能
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript特点
-
js源码不需要编译，浏览器可以直接解释运行
-
js是弱类型语言，js变量声明不需要指明类型
现代js https://zh.javascript.info/
JavaScript组成
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素（标签） |
JavaScript基础语法
HTML引入JS
内部js
定义script标签，标签体内容就是js代码
<script>
</script>
注意事项
<script>标签可以写在任意位置，推荐写在<body>的尾部。浏览器在执行时，是从下往下依次执行！
外部js
定义
<script src="js/文件名.js"></script>
总结：
- script标签不能自闭合
- 如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码
JS三种输出数据方式
浏览器弹框输出字符
<script>
alert('浏览器弹框输出字符');
</script>
输出html内容到页面
<script>
document.write('输出html内容到页面');
</script>
输出到浏览器控制台
<script>
console.log('输出到浏览器控制台');
</script>
3.3 JS注释
单行注释
// 注释内容
多行注释
/*注释内容*/
JS变量声明
java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。
js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。
-
语法
-
代码演示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> // 使用let关键字 定义字符串 let str1 = "你好JS!"; // 使用var关键字 定义字符串 var str2 = "你好JavaScript!"; console.log(str1); console.log(str2); // 定义整数 let num = 1314; console.log(num); // 定义浮点数 let score = 99.9; console.log(score); // 定义boolean类型 let flag = true; console.log(flag); // 定义常量 const PI = 3.1415926; // 常量定义之后值不能改变 // PI = 1; console.log(PI); // 定义变量a并末赋值，能不能使用? let a; console.log(a); // undefined 表示变量末定义类型 </script> </head> <body> </body> </html>
注意事项
- ECMAScript6之前定义变量使用
var但是会有很多坑，所以ECMAScript6之后开始推出let声明变量，const声明常量 - 在js中，末赋值的变量，也是可以使用的，但是这个值是
undefined,末定义的变量
JS数据类型
js与java一样，数据类型分为基本数据类型(原始数据类型) 和 引用数据类型
| 属性 | 描述 |
|---|---|
| number | 数字类型,不区别整数和小数 |
| string | 字符串类型，不区别单双串 |
| boolean | true/false |
| object | 对象(function、null) |
| undefined | 未定义 |
类型判断
typeof 判断数据类型
语法： typeof 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 使用let关键字 定义字符串
let str1 = "你好JS!";
let str2 = 'a';
console.log(typeof str1);
console.log(typeof str2);
// 定义整数
let num1 = 1314;
let num2 = 13.14;
console.log(typeof num1);
console.log(typeof num2);
// 定义boolean类型
let flag = true;
console.log(typeof flag);
// 末定义类型
let a;
console.log(typeof a);
// 引用数据类型
let obj = new Object();
console.log(typeof obj);
</script>
</head>
<body>
</body>
</html>
JS运算符
JavaScript中的运算符和大多数编程语言中的运算符都接近，只有个别运算符因其灵活性而带来了些许不同
| 运算符 | 说明 |
|---|---|
| 算数运算符 | +、 - 、 *、 / 、 % 、 ++ 、 -- |
| 赋值运算符 | = 、 += 、-= 、 *= 、 /= 、 %= |
| 比较运算符 | > 、 >= 、 < 、 <= 、 == 、 ===(全等于,仅js) 、 != |
| 逻辑运算符 | && 、 ` |
| 三元运算符 | 关系表达式 ? 值1 : 值2; |
算数运算符
在js中数值可与字符串进行数学运算，底层实现隐式转换。
<script type="text/javascript">
let str = "10";
let num = 20;
console.log(str + num); // 1020
console.log(str - num); // -10
console.log(str * num); // 200
console.log(str / num); // 0.5
</script>
输出结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C360ZUOr-1688992827810)(assets/image-20210127161617134.png)]
注意事项:
var a = 3;
var b = 4;
var c = "一燕";
alert(a/b);//js相除可以得到小数
alert(typeof(a+c)); // number类与字符串类型相加，字符串拼接
var d = 6;
var f = '4';
alert(d+f);//拼接的64
var a1 = 3;
var a2 = "4";
alert(a1-a2);//1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型
var b1 = 3;
var b2 = "abc";
alert(b1-b2); //NaN not a number ;
//如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0
var bo1 = true;
var bo2 = false;
alert(a+bo1);//4
alert(a+bo2);//3
比较运算符
== 、 ===(全等于)之间的区别？
== : 只比较内容是否相同 根本不比较数据类型
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
<script type="text/javascript">
let num = 100;
let str = "100";
console.log(num == str); // true
console.log(num === str);// false
</script>
三元运算符
/*
三(目)元运算符？
格式： 表达式 ？ 结果1 ： 结果2 ；
如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回
*/
//定义一个变量为3
let a = 3;
//定义一个变量为4
let b = 4;
//页面输出
document.write(a>b ? a : b);
js特有转换
/*
三(目)元运算符？
格式： 表达式 ？ 结果1 ： 结果2 ；
如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回
*/
//定义一个变量为3
let a = 3;
//定义一个变量为4
let b = 4;
let c = 0;
//页面输出
document.write( (a>b ? a : b) );
document.write("<hr>");
//在js中表达式不必满足boolean 无意义--》false
//如果满足的 非0 ,非空，非null， 非undefined 为true
//如果满足的 是0 ，为空，是null , 是undefined 为false
document.write( (c ? a : b) );
JS流程控制语句
js与java一样，也有三个流程控制语句： 顺序结构 选择结构 循环结构
选择结构
-
if结构
<script type="text/javascript"> if (条件表达式) { 代码块; } else if(条件表达式){ 代码块; } else { 代码块; } </script> -
注意事项
JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。
JS中对各种数据类型作为布尔值有以下特点：
类型 用法 boolean true为真、false为假 number 非0为true string 除了空字符串(“”)，其他都是true null&undefined 都是false 对象 所有对象都为true 总结： 无意义的数据都为false 反之都为true
<script type="text/javascript"> let obj = new Object(); //if...elseif...else //if(true){ //if(""){//string只有空字符为假 //if(0){number只有0为假 //if(false){//booleanfalse为假true为真 //if(null){//objectnull为假 //if(undefined){//undefined永为假 // if("undefined") { // 这不是undefined类型，而是字符串，内容是undefined if(obj) { // 对象 console.log("满足条件"); } else { console.log("不满足条件"); } </script> -
switch结构
<script type="text/javascript"> var score = 90;//定义一个变量 /* parseInt 取整的一个函数（方法） */ /* 注意事项： 1、switch表达式一定会先找case,找到后一定要给break 2、switch给位置没有关系，跟case有关 3、如果找到后没有break，可以继续执行，直到找到break或都程序结束 */ switch(parseInt(score/10)){ case 10: case 9: alert("学霸"); // break; default: alert("学渣"); // break; case 8: alert("优秀"); // break; case 7: alert("还行"); break; } </script> -
注意事项
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7) * switch(变量): case 值: * 在JS中,switch语句可以接受任意的原始数据类型
循环结构
-
for循环
-
普通for循环
for(let 初始化语句; 条件表达式; 条件控制语句){ 循环体; } -
增强for循环
for(let 变量名 of 对象){ 需要执行的代码; } -
索引for循环 是js特有
for(let 变量 in 对象){ 需要执行的代码; } -
代码演示
<script type="text/javascript"> // 定义数组 let arr = ["张三","李四","王五"]; console.log("普通for循环"); for (let i = 0 ; i < arr.length ; i++) { console.log(arr[i]); } console.log("for of循环"); // for of循环 for (let e of arr) { console.log(e); } console.log("forin循环"); // for in循环 for (let index in arr) { console.log(arr[index]); } </script> -
forof 与 forin之间的区别
- forin可以遍历对象,forof不能遍历对象
- forin遍历出数组中的索引,forof遍历出数组中的元素
-
-
while循环
<script> /* for一般用在某一个范围中循环 while一般用在一个确定范围中循环 for中的var i = 1;这个只能在for循环中使用 while中的var i = 1; 可以全局中使用 */ for(let i = 1; i <= 10; i++){ document.write(i); document.write("<br>"); } // document.write(i); document.write("<hr>"); let y = 1; while( y <= 10){ document.write(y); document.write("<br>"); y++; } // document.write(y); document.write("<hr>"); //1 ~ 100 求和 let sum = 0; let num = 1; while(num <= 100){ sum += num; num++; } document.write(sum); </script> -
doWhile循环
do…while循环就不再单独演示，跟java中的do…while循环用法是一致的！
<script> //定义了一个变量 let a = 1; do{ //循环体，至少执行一次 document.write(a) a++; }while(a <= 10);//循环判断条件 </script> -
循环总结
while 和Java一样 do while 和Java一样 重点掌握: 普通for 与 java一样 forin：遍历出数组的索引 遍历出对象中的属性名key forof: 遍历数组中的元素
JS函数(方法)
js函数是执行特定功能的代码块.也可以称为js方法。与java中的方法的功能是一样的。
语法
function 函数名(参数列表){
函数体;
[return 返回值;]
}
函数的第一种定义方式
<script type="text/javascript">
//1.无参无返回值的方法
function demo(){
let a = 3;
let b = 4;
alert(a+b);
}
//方法必须调用，不调用不执行
demo();
//2.有参无返回值的方法
function demo2(a,b){
alert(a+b);
}
demo2(4,6);
//3.无参有返回值的方法
function demo3(){
return 4+4;
}
let sum = demo3();
alert(sum);
//4.有参有返回值的方法
function demo4(a , b , c){
return a+b+c;
}
let d = demo4(2,3,4);
alert(d);
/*
到底什么是方法呢？
就是完成某一个功能的代码块
如何写一个方法？
写方法要考虑参数列表
是否要返回给调用者，如果要返回就必须给一个关键字 return
【1、考虑参数列表，2、考虑返回值】
如何调用一个方法？
确定方法名，以及方法参数列表
如果有return，必须要接受方法返回的结果
【1、考虑参数列表，2、考虑返回值】
*/
</script>
函数的第二种定义方式
<script>
/*
比较复杂，只需要了解，开发很少使用
*/
var demo = new function("a,b", "alert(a+b)");
demo(4,4);
</script>
3.匿名函数
<script>
/* 匿名函数: 了解 */
var demo = function(){
alert(77);
}
demo();
</script>
如何绑定一个函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo(){
alert("我是小面包，你是谁啊？");
}
</script>
</head>
<body>
<input type="button" value="你点我啊小饼干" onclick="demo()" />
</body>
</html>
如何获取标签中的内容
<script>
function demo(){
//获取p标签
var pid = document.getElementById("pid");
//获取p标签中的内容
// alert(pid.innerHTML);
//修改标签中的内容
pid.innerHTML = "祝贺中国共产党成立100周年";
/**
* 1、拿到要获取内容的标签
* 2、跟获取的标签，再【获取内容】对象名.innerHTML 【修改内容】对象名.innerHTML = "修改内容"
*/
}
</script>
</head>
<body>
<p id="pid">社会主义核心价值观</p>
<!-- 绑定单击事件（一个动作） -->
<button onclick="demo()">修改内容</button>
</body>
JS函数注意事项
-
方法定义时，形参的类型不用写,返回值类型可写可不写
-
如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
-
在JS中，方法的调用只与方法的名称有关，和参数列表无关
-
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
-
JS函数中也可以有匿名函数
匿名函数经常会跟事件进行结合着使用
function(参数列表){ 函数体; [return 返回值;] }校验手机号
<script> function demo(){ var spanid = document.getElementById("spanid"); //获取输入框 var phid = document.getElementById("phid"); //获取输入框中的内容 var p_value = phid.value; //13140008888 //定义手机号规则 var regExp = new RegExp("^1[356789]\\d{9}$"); //拿用户输入手机号和定义手机号规则比较 if(regExp.test(p_value)){ // alert("手机号正确"); spanid.innerHTML=""; }else{ // alert("手机号不正确"); spanid.innerHTML="手机号必须满足11位数字！"; } } </script> </head> <body> <form action="#" method="post"> 手机号：<input type="text" name="phonenum" id="phid"/><span style="color: red;" id="spanid"></span> <input type="button" value="测试手机号" onclick="demo()" /> </form> <!-- 编程思想：把你想干的事情，通过代码实现 1、用户页面书写 2、获取用户输入的内容 3、根据用户输入的内容进行判断（是否满足手机的规则） 4、如果满足手机的规则直接提交到后台 5、如果不满足手机的规则，提示用户手机号不正确 --> </body>正则表达式
RegExp对象，正则对象，正则表达式的书写规则和Java也一致： . 当前可以是任意字符 ? 表示零次或一次 * 表示零次或多次 + 表示一次或多次 () 对某个存在的正则进行分组 组的使用 \组号 $组号 {} 当前的规则可以出现的次数 {2} 正好 2次 {m,} 最少m次 {m,n} 最少m次 最多n [] 当前位置上可以是中括号中某个字符 [abc] [^abc] [a-zA-Z][0-9] \\d 当前位置上可以数字 \\w 当前位置上可以是字母 数字 下划线 \b 单词边界 hello world ^ 行开始 $ 行结尾window.onload
<script> //页面加载时触发 window.onload = function(){ //获取按钮 var _id = document.getElementById("inputid"); //对象名.事件名 _id.onclick = function(){ //获取标签中的内容 var id2 = document.getElementById("id2"); //弹出 alert(id2.innerHTML); } } </script> </head> <body> <p id="id2">轻轻的你走了，那就走吧！！！</p> <input id="inputid" type="button" value="你点我啊"/>
JS常用内置对象
String对象
创建对象
有三种方式: 单引号(‘’) 、双引号(“”) 、反引号(``)
<script type="text/javascript">
//双引号字符串
let s1 = "双引号字符串";
//单引号
let s2 = '单引号字符串';
//反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.
let s3 = `反引号字符串`;
let n = 3547;
let s5 =`你的验证码是：${n}`;
console.log(s5);//你的验证码是：3547
</script>
常用方法
| 方法 | 说明 |
|---|---|
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| replace() | 替换与正则表达式匹配的子串。 |
| charAt() | 返回在指定位置的字符。 |
| trim() | 移除字符串首尾空白 |
| split(delimiter) | 把字符串分割为子字符串数组;分割为数组 |
<script>
let s1 = "我是中国人,我爱我的祖国";
/*
截取
第一个参数：开始的位置
第二个参数：结束的位置，包左不包右
*/
console.info(s1.substring(6,9));//我爱我
/* 字符串分割为数组 */
let s2 ="a,b,c,d";
console.info(s2.split(","));// ["a", "b", "c", "d"]
let s3 = "Yi Yan";
console.info(s3.toUpperCase());// 大写
console.info(s3.toLowerCase());// 小写
let s4 =" yi yani ";
console.info(s4.trim());//去掉首尾空格
let s5 = "我爱一燕";
console.info(s5.replace("一燕","肉丝"));//我爱肉丝
console.info(s5.charAt(3));//燕
</script>
Array对象
创建数组
-
格式一 【推荐】
let 数组名 = [元素1,元素2,元素3…];
<script> //数组中元素类型是随便写 let arr = [11,22,33,44,"55"]; //长度 // alert(arr.length); //指定获取数组中的元素 // alert(arr[4]); //通过脚标修改元素 arr[2] = 99; arr[3] = "hello"; //遍历一 for(let i = 0; i< arr.length; i++){ document.write(arr[i]); document.write("<br>"); } //遍历二 for(let a in arr){ document.write(arr[a]+","); } </script> -
格式二
let 数组名 = new Array(元素1,元素2,元素3…);
<script> //如果给出多个参数，表示的是数组的元素 let arr = new Array(11,22,"hello",'88',true); //长度 alert(arr.length); //获取 alert(arr[2]); //如果给的参数所number类型，并且只有一个，表示是长度 let arr = new Array(11); alert(arr.length); //如果给的参数所number类型，是一个小数，无法表示长度 let arr = new Array(3.14);//Invalid array length alert(arr.length); //如果给的参数字符中类型，并且是一个，表示元素 let arr = new Array("11"); alert(arr.length); //遍历 for(let i in arr){ document.write(arr[i]); } </script>
常用方法
| 方法 | 说明 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度 |
| join(参数) | 将数组中的元素按照指定的分隔符拼接为字符串 |
<script type="text/javascript">
// 格式一创建数组
let arr1 = ["张三","李四","王五",true];
// 格式二 创建数组
let arr2 = new Array("古力娜扎","玛尔扎哈",12.3,false);
// arr1 和 arr2 合为一个数组
let newArray = arr1.concat(arr2);
console.log(newArray);
// push: 添加一个新的元素
let len = arr2.push("新元素");
console.log(arr2);
console.log(len);
// join：按照一定的格式拼接字符串
let strArray = arr2.join("=");
console.log(strArray);
</script>
数组的属性
| 属性 | 说明 |
|---|---|
length | 获取数组的长度 |
数组的特点
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
Math对象
创建对象
Math对象不用创建，直接使用。 Math.方法名();
常用方法
| 方法 | 说明 |
|---|---|
| round(x) | 把数四舍五入为最接近的整数。 |
| floor(x) | 向下取整 |
| ceil(x) | 向上取整 |
| random() | 随机数，返回 0 ~ 1 之间的随机数。 含0不含1 |
<script>
let round = Math.round(3.14);//3
let ceil = Math.ceil(3.14);//4
let floor = Math.floor(3.14);//3
let random = Math.random();
// 获取1~100之间的随机整数
let randomNumber = Math.floor((Math.random() * 100)) + 1;
</script>
Math属性
| 属性 | 说明 |
|---|---|
PI | 圆周率 |
Date对象
创建对象
var date = new Date();
常用方法
| 方法 | 说明 |
|---|---|
| toLocaleString() | 返回当前date对象对应的时间本地字符串格式 |
| getTime() | 获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差 |
| getFullYear() | 获取年 |
| getMonth() | 获取月 |
| getHours() | 获取时 |
| getMinutes() | 获取分 |
| getDate() | 获取日 |
| getSeconds() | 获取秒 |
<script>
console.info(d);//Fri Jul 02 2021 17:23:09 GMT+0800 (中国标准时间)
console.info(d.toLocaleString()); //2021/7/2 下午5:23:19
console.info(d.toLocaleDateString());//2021/7/2
console.info(d.toLocaleTimeString());//下午5:23:19
console.info('获取年:'+d.getFullYear());//获取年
console.info('获取月:'+d.getMonth());//获取月
console.info('获取日:'+d.getDate());//获取日
console.info('获取小时:'+d.getHours());//获取小时
console.info('获取分:'+d.getMinutes());//获取分
console.info('获取秒:'+d.getSeconds());//获取秒
console.info('获取毫秒:'+d.getTime());获取毫秒
</script>
全局函数
什么是全局函数
全局函数不需要对象就可以直接调用: 方法名();
常用全局函数
-
字符串与number之间的转换
方法 说明 parseInt() 将字符串解析成一个整数。 parseFloat() 将字符串解析成一个浮点数。 isNaN() 判断是否是一个NaN类型的数据 <script> console.log(parseInt("123.456"));//123 console.log(parseInt("12abc3.456"));//12 console.log(parseFloat("123.456"));//123.456 console.log(parseFloat("123.45abc6"));//123.45 console.log(parseInt("abc123"));//NaN : not a number 不是一个数字 console.log(isNaN("abc123"));//true </script>
注意事项
NaN 六亲不认，连自己都不认。
如果要判断是否是一个NaN类型的数据，使用isNaN()
-
字符编码
方法 说明 encodeURI() 把字符串编码为 URI decodeURI() 解码某个编码的 URI <script> let name = "明下午两点偷袭珍珠"; let encodeName = encodeURI(name);//编码 //%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A2%AD% E7%8F%8D%E7%8F%A0 console.log(encodeName); // 对数据进行解码 let resultStr = decodeURI(encodeName);//解码 console.log(resultStr);//明下午两点偷袭珍珠 </script> -
普通字符串解析js代码
方法 说明 eval() 接受一个js字符串,校验字符串中的内容是不是js代码(脚本)，如果是js代码就执行，如果不是就不执行 eval("abc");//不执行 eval("var a = 3; var b = 4; alert(a+b);");//执行URL 和 URI
https://www.baidu.com/a/fdks/kdjs
http:// 网络传输协议
www 万维网
.baidu.com 域名
/a/fdks/kdjs 资源路径（资源：一个文件，一个程序，图片，视频，，，）
URL: 统一资源定位符 https://www.baidu.com
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
