前言:此Javascri基础学习笔记是需要有其他语言的基础(C/C++/Java等),与其他语言重复或类似的部分不在此学习笔记中。且仅为基础学习。
六.函数基础
<!-- 函数基础 -->
<!-- 用户登录 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function checklogin(username,password)
{
if(username==="admin"&&password==="123"){
return true;
}
else{
return false;
}
}
console.log(checklogin("123","admin"));
</script>
</body>
</html>
七.对象
<!-- 对象 -->
<!-- 对象的分类
自定义对象:封装
内置对象:(例如Date,获取当前时间)
宿主对象(document)
第三方库的对象(JQuery Vue)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var cat={
name:"TOM",
age:3,
sayName:function(){
console.log("I am "+this.name)
}
}
console.log(cat.name);
console.log(cat["age"]);
cat.name="邦邦"
cat.sayName();
</script>
</body>
</html>
八.数组
<!-- 数组 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var list1=[1,2,3,4,5]; //可以存放不同类型数据
var list2= new Array("a","b","c");
var list3=["java","c","c++"];
var list4=[1,3,6,5,2,7,9];
// var length=list1.length;
// console.log(length);
// for in遍历(i为索引)
for(var i in list1){
console.log(list1[i]);
}
// for of遍历(i为值)
for(var j of list2){
console.log(j);
}
//map方法循环
list3.map(function(value,index){
console.log(value);
});
//push方法 ,增加元素到数组中
list1.push(6);
console.log(list1);
//sort方法 排序
list4.sort();
console.log(list4);
//filter方法 过滤
var newList=list1.filter(function(item){
if(item>=3)
return item;
})
console.log(newList);
//join方法 连接数组成为字符串
var str=list2.join("");
console.log(str);
//String的split方法 字符串分为数组
var str1="2022-2-12";
var list5=str1.split("-");
console.log(list5);
// 结合数组与对象
var list6=[
{name:"张三",age=1}
{name:"李四",age=2}
{name="王五",age=3}
]
// 获取数据:list[0].name
</script>
</body>
</html>
九.内置对象
<!-- 内置对象,使用现成的功能 Math部分-->
<!-- Array 数组
Math 数学
Date 日期
RegExp 正则表达式
-->
<!-- Math.floor: 向下取整
Math.random():0-1随机数
Math.abs():绝对值
Math.sqrt():开方
Math.pow(2,4):乘方
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var number1=3.14;
var ret1 =Math.floor(number1);
var ret2 =Math.pow(2,4); //2的4次方
var number2=Math.floor(Math.random()*10+1); //0-10的随机数
console.log(number2);
var list=["Java","C","C++","Php","Javascript"];
var index=Math.floor(Math.random()*list.length);
console.log(list[index]);
</script>
</body>
</html>
<!-- 内置对象 Date部分 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var d=new Date();
// var year =d.getFullYear();
// var month=d.getMonth(); //0-11月
// var date=d.getDate();
// var day=d.getDay(); //获取星期
// var hours=d.getHours();
// var minutes=d.getMinutes();
// var seconds=d.getSeconds();
var ret =d.getTime(); //时间戳格林威治时间起至现在的总毫秒数
console.log(ret);
// 计时器方法setinterval
setInterval(function(){
var d=new Date();
var hours=d.getHours();
var minutes=d.getMinutes();
var seconds=d.getSeconds();
console.log(hours+":"+minutes+":"+seconds);
},1000)
</script>
</body>
</html>
十.正则表达式
<!-- 正则表达式用来匹配字符串 -->
<!-- 通过正则表达式,实现字符串的截取或按规则替换和验证字符串内容-->
<!-- 1.验证邮箱格式
2.字符串"2020-01-01",将数字部分截取出来
3."123a456b789c",去掉字符串中的所有字母(replace("a","1"))-->
<!-- 正则表达式的语法
^:开头 $:结尾 []:范围 {}:位数 ():分组
+:匹配1位或多位,同{1,} ?:0位或1位,同{0,1}
.:匹配所有 \:转义 \d:数字 同[0-9]
\w:数字,字母,下划线 \s:空格或换行
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var reg1=new RegExp("123");//创建正则表达式 var reg=/123/
var str1="123";
var result1 =reg1.test(str1); //返回值为布尔
console.log(result1);
//中括号表示范围 一位小写字母
var reg2 =/^[a-z]$/; //规定固定的格式
var str2="a";
var result2=reg2.exec(str2); //返回值为匹配的内容/null
console.log(result2);
var reg3=/^[0-9]{11}$/; //{11}为位数
var str3="18888888888";
var result3=reg3.test(str3);
console.log(result3);
var reg4=/^[a-z0-9]+$/; //字母数字
var str4="en8535";
var result4=reg4.test(str4);
console.log(result4);
var reg5=/^\w$/; //相当于/^[a-z0-9A-Z_]$/ 字母数字大小写下划线
var reg6=/^.+$/; //一位或多位 匹配所有
var reg7=/^1\+$/ //+表示普通加号,非表示一位或多位
</script>
</body>
</html>