JavaScript
JS 浏览器脚本语言，最初的目的就是用来对表单数据进行前台的校验以提高用户的上网体验，随着不断的发展，JS可以做出许多网页特效，让用户的上网体验更加好。
入门使用
JS怎么跟HTML结合
JS代码是由浏览器的内核中JS引擎进行解析的
浏览器内核：渲染引擎，用来渲染HTML标签，CSS图像等页面元素
JS引擎，用来解析执行JS代码实现页面的动态效果
JS和HTML的结合方式：
1.内部方式：提供一对script标签 JS代码就写在script标签内部
这对script标签可以放在HTML页面的任意地方，放在页面上面和下面是有区别的，现在先放在head标签 之间。
2.将script代码单独写在一个文件中，然后可以让页面来引用，这样写能够提高JS代码的复用性，也是我们开发的首选方 式。
JS中的语法
Java中的数据类型：基本数据类型和引用数据类型
基本数据类型：四类八种
整数型：byte short int long
小数型：float double
字符型：char
布尔型：Boolean
JS：原始数据类型和引用类型
JS中的原始数据类型：number string boolean null undefined
number：小数和整数
string：字符和字符串 可以使用'' 和 "" 引起来
boolean：true和false
null:对象的占位符
undefined：未定义
Java中定义变量的语法：数据类型 变量名=值 例：int num=100；
JS中定义变量的语法：JS是一门弱类型语言，对数据类型的区分不是很严谨，所以定义变量时，统一使用var关键字来定 义变量。没有给变量赋值，那他的原始数据类型就是undefined 例：var num=100； var n=2.2； var a="aaa"；
我们可以通过一个运算符 typeof 来获取变量的原始数据类型。
定义常量 es6中引入了一个关键字 const： const c=100；
在 es6 中还有一个关键字可以定义变量 let
{
var vv=200;
//let 可以缩小变量的作用域
let bb=20;
alert(vv);
alert(bb);
}
alert(vv);
alert(bb);
语句：if for while do switch... 这些语句的语法和Java是一样的
打印九九乘法表：<script type="text/javascript">
var u=0;
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
u=i*j;
document.write(j+"*"+i+"="+u+" ")
}
document.write("<br>")
}
</script>
JS中的运算符：
一元运算符：++ -- +(正) -(负)
JS中数据类型的自动转换：当给一个数据时，跟运算符想要的值不一样时，这个时候这个运算符就会尝 试去转换这个数据。
//+ 正号 想要的是一个数值类型。
var num = +100;
var num2 = +"100";
alert(num2+10);
alert(num2);
//字符串，转换数字，根据字面上来转换，如果能转换成数字，就转换成数字，如果转换不过来，就 转换成NaN(不是数字的数字)
var n=2*"100";
alert(n)
//布尔类型转换数字:true 转成1 false转成0
var n2=10*false;
alert(n2);
//空串转换成数字，转成0
var n3=2*'';
alert(n3);
比较运算符：* > < >= <= !=
//NaN: 不是数字的数字
var f = NaN == NaN; //NaN参与比较运算结果都是false 除了!=号
alert(f);
var f1 = NaN != NaN; //true
alert(f1);
var f2 = NaN > 100;
alert(f2);
//字符串比较
//采用字典顺序来比较，返回的是布尔类型，字典顺序比不出来就用长度比较。
var v="abc"=="abc";
alert(v);
// == 和 === 的区别
//== 会发生自动类型转换。
var f="100"==100;
alert(f);
//===：先比较数据类型是否一致，如果类型不一致就只直接false;
var f2="100"===100;
alert(f2);
逻辑运算符：&& || !
var b = "";
//字符串转换布尔：非空串转换成true 空串转换成false
alert(!b);
if (b) {
alert("真的")
} else {
alert("假的")
}
//数字类型转换布尔：0转成false 非0都转换成true;
var num = 0;
if (num) {
alert("真的1")
} else {
alert("假的1")
}
//NaN转换布尔，转换成false
if (NaN) {
alert("真的2")
} else {
alert("假的2")
}
if (2*"abc") {
alert("真的3")
} else {
alert("假的3")
}
//undefined转换成布尔，转换成false
if (undefined) {
alert("真的4")
} else {
alert("假的4")
}
var vv;
if (vv) {
alert("真的5")
} else {
alert("假的5")
}
//对象转换布尔，转成true;
var obj=new Object();
obj=null; //null 转换布尔转换成false;
if (obj) {
alert("真的6")
} else {
alert("假的6")
}
算数运算符：+ - * / %
只要有NaN参与数学运算，结果都为NaN
函数
函数：类似于Java中的方法，对一段功能逻辑的封装，以实现重复调用
定义函数的三种方式：
方式1：//括号里面：（参数列表，函数体）
var show=new Function("a","b","alert(a+b)");
show(10,20);
方式2：
var test=function(){
//方法体
alert("这是一个函数");
}
//调用
test();
test();
方式3：
function hehe(){
alert("定义函数的一种方式");
}
hehe();
//定义形参，不用写数据类型，var都不需要写。
function show(a,b){
alert(a);
alert(b);
var sum=a+b;
//如果你要返回结果，直接使用retunr返回即可。
return sum;
}
var result=show(20,30);
alert(result);
//函数传参的特点。
//JS中调用函数时,实参,你可以传也可以不传,传多传少都不会报错.
var s=show();
alert(s);//NaN
var s2=show(500);
alert(s2);//NaN
var v=show(20,30,60);
alert(v);//50
<script type="text/javascript">
var test = function(a, b, c) {
return a + b + c;
}
//JS中函数其实可以看做我们Java中的方法，那函数同时也是函数对象。
//alert(typeof test);
//函数有个属性，可以获取形参的个数
var len = test.length;
alert(len);
//函数有一个内置属性 arguments 是一个数组，可以获取所有传过来的实参。
var show = function(a, b, c) {
//arguments 是一个数组，可以获取所有传过来的实参。
var one = arguments[0];
var two = arguments[1];
var three = arguments[2];
return one + two + three;
}
var vv = show(20, 30, 40);
alert(vv);
</script>
自调用函数：
var sum=(function show(a,b){
return a+b;
}(200,300));
alert(sum);
void运算符：
<script type="text/javascript">
function show(a){
alert("show函数调用了"+a);
}
</script>
</head>
<body>
<!-- a标签的两个功能，可以点击，二来可以跳转页面 -->
<a href="http://www.baidu.com">进入百度</a>
<!-- 我想保留a标签的点击功能，但是，不要让他跳转页面 可以给个#号-->
<a href="#">进入百度</a>
<!-- 我想保留a标签的点击功能，但是，不要让他跳转页面 可以使用void-->
<a href="javascript:void(0)">进入百度</a>
<!--我想保留a标签的点击功能，但是，不要让他跳转页面 而且在点击时可以执行一个函数-->
<a href="javascript:void(show(100))">进入百度</a>
<!-- JS的内联的写法 -->
<a href="javascript:alert('abc')">进入百度</a>
</body>
JS内置对象
// String 对象
// String 对象用于处理文本（字符串）。
// 创建 String 对象的语法：
// new String(s);
// String(s);
//创建String对象 方式1
//当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
var s = new String("abc"); //创建出一个String的对象
//方式2
//当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
var s2 = String("你好"); //返回的是一个原始的字符串
alert(typeof s); //object
alert(typeof s2); //string
//最简便的定义字符串的方式
var str="hehehehhe";
//length属性可以获取字符串的长度
var len="hehehehhe".length;
//方法：
/* charAt() 返回在指定位置的字符。 1 3
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
indexOf() 检索字符串。 检索不到就返回 -1
replace() 替换与正则表达式匹配的子串。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
substr() 从起始索引号提取字符串中 指定数目的字符。 1 4
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。 1 3
toUpperCase() 把字符串转换为大写。
trim() 去除两端空格
trimLeft() 去除左端空格
trimRight() 去除右端空格.
*/
反转字符串：
var str="abcdefg"
var s=''
for(i=1;i<=str.length;i++){
var a=str.charAt(str.length-i)
s+=a
}
alert(s)
// Number对象
var s="100";
//把字符串的100转换成数字的100;
//s=+"100";
s=s*1; //乘个1最简单。
//alert(s+20);
// Number 对象
// Number 对象是原始数值的包装对象。
// 创建 Number 对象的语法：
// var myNum=new Number(value);
// var myNum=Number(value);参数
// 参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。
// 返回值
// 当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果 不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数 值，并且返回这个值（如果转换失败，则返回 NaN）。
//跟Java中 Integer Double 很像
var n=new Number(100);
var n1=new Number("100");
alert(n+n1);
var n2=new Number(3.14);
var n3=new Number("3.14444");
alert(n2+n3);
var n5=Number("200abc");//转换不过来，就转换成NaN
alert(n5);
//属性：
//MAX_VALUE 可表示的最大的数。 1.7976931348623157 x 10308。
//MIN_VALUE 可表示的最小的数。 5 x 10-324。
alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);
//方法：保留小数点后面的位数
// toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
var n7=new Number(3.1449999994444999999944444444444444);
//保留小数点后面几位，返回的是字符串类型
var str2= n7.toFixed(4);
alert(str2);
//Date对象
// Date 对象
// Date 对象用于处理日期和时间。
// 创建 Date 对象的语法：
// var myDate=new Date()
var myDate=new Date();
var year=myDate.getFullYear();
var m=myDate.getMonth();
var d=myDate.getDate();
var h=myDate.getHours();
var mm=myDate.getMinutes();
var ss=myDate.getSeconds();
alert(year);
alert(m);
alert(d);
alert(h);
alert(mm);
alert(ss);
var dateStr=year+"年"+m+"月"+d+"日 "+h+"时"+mm+"分"+ss+"秒";
alert(dateStr);
//格式化日期。
var s=myDate.toDateString();
var s2=myDate.toTimeString();
var s3=myDate.toLocaleString();
alert(s);
alert(s2);
alert(s3);
//使用第三方js文件来处理日期
var dateStr=moment().format('YYYY-MM-DD HH:mm:ss');
document.write("<h1>"+dateStr+"</h1>");
//把毫米值，转换成年月日时分秒
var date=new Date();
//获取从 1970 到现在所间隔的毫秒值
var time=date.getTime();
//alert(time);
//把毫秒值，格式化成日期字符串。
var dateStr2=moment(time).format('YYYY-MM-DD HH:mm:ss');
document.write("<h1>"+dateStr2+"</h1>");
//把日期字符串转换成毫秒值 unix()
var a=moment('2019-08-22 12:30:23').unix()
//1566448223
alert(a);
//把日期字符串，转换成moent对象。
var now = '2017-12-12 00:00:00';
var moment = moment(now,'YYYY-MM-DD HH:mm:ss');
//然后就可以调用moment中的方法
//加一天：moment.add(1,'d');
var vv=moment.add(1,'d');
alert(vv);
//这个月第一天：moment.startOf('month');
var vv2=moment.startOf('month');
//Math对象
// Math 对象
// Math 对象用于执行数学任务。
// 使用 Math 的属性和方法的语法：
// var pi_value=Math.PI;
// var sqrt_value=Math.sqrt(15);
//属性PI
var pi_value=Math.PI;
/* Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数
var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向上取整 */
//我想要获取 1---100之间的随机整数。
//Java中的做法： int num= (int)(Math.random()*100+1) ;
for(let i=1;i<=1000;i++){
var num= Math.random()*100+1;
num=Math.floor(num);
document.write(num);
document.write("<br>");
}
//随机一个四位验证码
var str= "asajdfnasiofhoahfuioahfnioasjf"
for(let i=1;i<=4;i++){
var index=Math.floor(Math.random()*str.length)
var a=str.charAt(index)
document.write(a)
}
//全局对象
//全局对象中的方法，直接调用即可。
//isNaN() 检查某个值是否是数字。
alert(NaN==NaN); //用 == 判别不出来，因为永远是false
//可以使用方法来判别NaN
var v=isNaN(NaN);
alert(v);
var v2=isNaN(25*"abc");
alert(v2);
//把一个字符串转换成数字。
var n=+"100";
var n2="100"*1;
var n3=Number("100")
//可以使用方法来转换。
//从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
var n4=parseInt("100");
var n5=parseFloat("3.14");
alert(n4+n5);
//decodeURIComponent() 解码一个编码的 URI 组件。 1 5.5
//encodeURIComponent() 把字符串编码为 URI 组件。
//浏览器地址栏会对其中的中文进行URL的编码
var str = "http://127.0.0.1:8848/20201002-JS- %E4%B8%8B%E5%8D%88/12.%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1.html"
//对中文进行URL编码
var v = encodeURIComponent("张三");
alert(v);
//进行解码
var name=decodeURIComponent(v);
alert(name);
//数组对象
//JS中的数组对象 Array
//JS中的数组的特点
//1.数组的长度是可变的
//2.数组中可以存储多种数据类型的元素
//3.JS中的数组，更像Java中的list集合
//创建对象的方式
//方式1：可以不用指定数组长度
var arr=new Array();
arr[0]=20;
alert(arr[0]);
alert(arr[6]); 取不到元素就是undefined
//方式2：可以指定数组的长度，但是超过了指定长度也不影响，没有数组角标越界一说
var arr1=new Array(3);
//方式3：创建数组的同时就可以给数组添加元素
var arr2=new Array(1,"abc",true,false,3.2);
//方式4：简写方式 使用中括号
var arr3=[100,200,300,400]
//数组对象中的常用方法
//添加元素
//var arr=[];
var arr=new Array();
//arr[0]=20; 通过角标来添加元素。
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var len=arr.push(20,30,40);
len=arr.push("abc");
alert(arr);
alert(len);
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
arr.unshift(100,200);
alert(arr);
//拼接数组
//concat() 连接两个或更多的数组，并返回一个新的数组。
var arr2=[20,30,40];
var arr3=[200,300,400];
var newArr=arr2.concat(arr3);
alert(arr2);
alert(arr3);
alert(newArr);
//join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
//把数组中的元素转换成字符串。
var str=newArr.join("-");//"20-30-40-200-300-400"
alert(str);
str=newArr.join("");
alert(str);//"203040200300400"
//pop() 删除并返回数组的最后一个元素
var arr4=[200,300,400,500,600];
var ele=arr4.pop();
alert(arr4);
alert(ele);
//shift() 删除并返回数组的第一个元素
var ele2=arr4.shift();
alert(arr4);
alert(ele2);
//splice() 删除元素，并向数组添加新元素。
var arr=[200,300,400,500,600];
arr.splice(1); //从1索引处开始，删除后面的所有元素。
arr.splice(1,1); //从1索引处开始，删除1个元素 这个删除几个你自己指定。
//arr.splice(1,1,3.25); //从1索引处开始，删除一个元素，并把3.25这个元素替换到这个1索引处。
//从1索引处开始，删除一个元素，并把3.25,true,20000,300000这多个个元素替换到这个1索引处。
arr.splice(1,1,3.25,true,20000,300000);
alert(arr);
//reverse() 颠倒数组中元素的顺序。
arr.reverse();
alert(arr);
//slice() 从某个已有的数组返回选定的元素
//根据起始索引和终止索引截取数组中的元素，放到一个新数组中
var arr2=[200,300,400,500,600];
var newArr=arr2.slice(1,4); //含头不含尾
//排序
alert(newArr);
var arr = [21, 1, 52, 6, 35, 84];
arr.sort(); //默认是按照字典顺序排的，没有按照元素的大小来排序。
alert(arr);
var arr2 = [21, 1, 52, 6, 35, 84];
//如果你要按照元素的大小来排序，得传入一个比较函数。
var bjq = function(a, b) {
return a - b; //正 负 0
}
/*
匿名函数，可以作为参数传递。
function(a,b){
return a-b; //正 负 0
} */
//arr2.sort(bjq);
//直接传入匿名函数。
arr2.sort(function(a, b) {
return a - b; //正 负 0
})
alert(arr2);
//二维数组
//定义二维数组
var arr = new Array();
var arr1 = new Array(20, 30, 40);
var arr2 = new Array(200, 300, 400);
var arr3 = new Array(2000, 3000, 4000);
//arr 这个时候，就是二维数组。
arr.push(arr1, arr2, arr3);
arr[0]=arr1;
arr[1]=arr2;
arr[2]=arr3;
//遍历二维数组。
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
alert(arr[i][j]);
}
}
//定义二维数组的简便语法。
var maxArr = new Array([20,30],[1,2],[3,5]);
for (var i = 0; i < maxArr.length; i++) {
for (var j = 0; j < maxArr[i].length; j++) {
alert(maxArr[i][j]);
}
}
//定义二维数组的简便语法。
var maxArr2=[[20,30],[1,2],[3,5]];
for (var i = 0; i < maxArr2.length; i++) {
for (var j = 0; j < maxArr2[i].length; j++) {
alert(maxArr2[i][j]);
}
}
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
