Day1 排序、定时器、简单的轮播图
数组的排序
手写冒泡排序:
var arr=[5,52,1,88,94,465,59898,564];
for(var j = 0;j<arr.length;j++){
for(var i = 0;i<arr.length-j;i++){
if(arr[i]>arr[i+1]){
var change;
change = arr[i];
arr[i] = arr[i+1];
arr[i+1] = change;
}
}
}
console.log(arr);
但是,这样书写比较的麻烦,因此引入数组的 sort()方法
arr.sort(); 数组排序API 会改变原数组,且拥有固定搭配
var arr=[5,52,1,88,94,465,59898,564];
arr.sort(function(a,b){
//a,b为回调函数的形参,回调函数会自行执行,无需调用,这里a-b代表升序,b-a代表降序。
//a表示后一个数字,b表示前一个数字
return a - b;
})
console.log(arr);
这段代码和上面结果相同
定时器的使用
1.设置定时器
var timer = setInterval(function(){
每次时间执行的操作;
},定时器时间间隔)
2.清除定时器
定时器所在.触发事件 = function(){
clearInterval(定时器名字);
}
3.重新开启定时器
定时器所在.触发事件 = function(){
//注意这里这个timer需要他出现全局污染的现象,如果加var会创建好多好多个定时器
timer = setInterval(function(){
每次时间执行的操作;
},定时器时间间隔)
}
渐入渐出的轮播图
//轮播图有很多种,这里其中一个简单的渐入渐出的轮播图
var imgs = document.getElementsByTagName("img"),
lis = document.getElementsByTagName("li"),
btns = document.getElementsByTagName("button"),
Div = document.getElementsByTagName("div")[0],
j = 0;
// TODO 设置左右箭头
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
if (this.innerHTML == " 》") {
move(1);
} else {
move(-1);
}
}
}
// TODO 设置小下标
for (let j = 0; j < lis.length; j++) {
lis[j].onclick = function () {
set(j);
}
}
// TODO 设置定时器
var timer = setInterval(function () {
move(1);
}, 2000)
Div.onmouseover = function () {
clearInterval(timer);
}
Div.onmouseout = function () {
timer = setInterval(function () {
move(1);
}, 2000)
}
// TODO 封装函数
function move(num) {
if (num == 1) {
j++;
j == lis.length && (j = 0);
set(j);
} else {
j--;
j == -1 && (j = lis.length - 1);
set(j);
}
}
// TODO 封装设置
function set(m) {
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
imgs[i].className = "";
}
imgs[m].className = "show";
lis[m].className = "show1";
}
Day2 字符串的只读API、创建页面元素并渲染
字符串的只读API
1. “\” 不能算是一个字符串的API,有一些作用
转义字符: \n换行, \t大空格
消除页面中双引号冲突问题 arr = "我的名字是:\"何蓬"\"; 这里不加\会报错,双引号不可以套双引号
输出Unicode码: \u****; 补充, 第一个汉字的ASCII码为:19968; 最后一个汉字的ASCII码为40869
2.字符串的大小写转换 在书写验证码时需要用到
转大写: str.toUpperCase();
转小写: str.tolowerCase();
//一个简单的验证码功能
var arr=[];
function add(a,b){
for(var i=a;i<=b;i++){
arr.push(String.fromCharCode(i));
}
}
// 添加 0--9的数字
add(48,57);
// 添加英文字母(小写和大写)
add(65,90);
add(97,122);
// 输出验证一下 arr
console.log(arr);
// 根据arr来生成随机数的一个四位验证码
var code = "";
while (code.length < 4) {
// 生成随机数作为下标
var m = parseInt(Math.random() * (arr.length));
// 判断如果code中没有重复的就向其中添加
if (code.indexOf(arr[m]) == -1) {
code += arr[m];
}
}
// 请用户输入验证码 并 同时转换为大写或小写对比判断是否输入正确
var user = prompt("请输入验证码" + code);
if(user.toUpperCase() == code.toUpperCase()){
console.log("验证通过");
}else{
console.log("验证失败");
}
获取字符串中的指定 字符 直接用str[i]就好,不推荐这个方法
语法:str.charAt(i);
获取字符串中指定位置的ASCII码 以及 根据ASCII码转原文
str.charCodeAt(i) 借助循环可以遍历字符串中的每个字符的ASCII码
String.fromCharCode(需要转的ASCII码) 固定写法String为一个构造函数
字符串的检索方法 str.indexOf()
str.indexOf("关键字",开始检索的下标);
不写开始下标就从头开始检索
找不到返回 -1
数组也可以使用此方法,但是老浏览器可能无法使用。但是字符串使用indexOf新老浏览器都能用
如何获取所有重复的关键字
Day3 正则表达式
正则表达式基础概念
regexp:限制字符串的规则的表达式
使用场景:切割字符串、替换字符串、验证、表单等位置
最简单的正则表达式
var reg = /^原文$/gi;
备选字符集
语法:var reg = /^[0-9A-Za-z_]$/; [^5]除了5之外的
注意:
验证正则表达式: reg.test(待验证字符串)
一个中括号代表输入一个字符,要控制输入字符的数量需要用
{m,n}最少m个,最多n个
{m,}最少m个,最多不限制
{m}只能输入m个
?: 可有可无,只能写一个
*: 可有可无,个数不限
+: 最少一个,多了不限
** 特别注意这些有一定意义的符号 ? * + . 在使用时要配合转义字符\使用
预定义字符集
\d: 表示一位0-9的数字
\w: 表示 [0-9A-Za-z]
\s: 表示 [空格、换行、制表符
. : 表示 [除了换行之外的都可以]
选择和分组
选择:| 当使用|分开字符集表示自动选择一个满足的进行判断(或) 注意|会打断^$的完全匹配,一般需要配合分组 () 使用
分组:() 将多个选择临时组成一个 规则 整体
密码强度验证
语法:(?![限制正则语句]+$)
举例:
/^(?![0-9])\w{4}$/ => 必须输入四位数字、字母、或下划线,,但不能是纯数字
/^(?![0-9A-Za-z]\w{4})$/ => 必须输入至少包含一个下划线
注意:预判公式方括号内部的就是不能让用户触发的
支持字符串正则的API
split 字符串切割
可以通过和正则结合切割,在切割字符串时切割不同的字符
举例:
var str="tom@##jinx!Aike";
// 消除字符串中的 @ # ! 至少消除一个多了不限制
str=str.split(/[@#!]+/g);
console.log(str)
replace 字符串替代
1.基本替换 直接替换,缺点是替换的新内容只能固定
var str = "卧槽,我操,我草,我滴妈,我裂开";
// 合理运用+号处理多个以上的替换情况。
str = str.replace(/[我卧][滴操槽草裂开妈]+/g, "**");
console.log(str);
2.高级替换 通过调用回调函数来达到替换不同的内容
var str2 = "卧槽,我操,我草,我滴妈,我裂开,我我我妈";
str2 = str2.replace(/[我卧滴操槽草裂开妈]+/g, function (a) {
// a为一个类数组,他的数组长度为正则 比如说第一个卧槽 这时候a的长度就为2
return a.length == 2 ? "**" : a.length == 3 ? "***" : "****"
})
console.log(str2)
3.字符串格式化
var str = "卧槽,我操,我草,我滴妈,我裂开,我我我妈";
var reg = /[卧槽]{2}([,我操]{3})([,我草,我滴妈]{7})([,我裂开,我]{6})[我妈]{3}/;
str = str.replace(reg,function(a,b,c,d){
return b+c+d;
})
console.log(str);
Day3 Math对象和Date对象
Math对象
1.随机数 Math.random()*(max-min+1)+min;
+1是为了能获得最大值;因为Math.random()的取值范围为 [0,1),+min是为了获得最小值
网页中只要存在随机功能就需要用到随机数。
2.Math.PI 固定用法 获取圆周率 π
3.取整的Math方法
向上取整:Math.ceil();
向下取整:Math.floor();
四舍五入:Math.round(); 都会取到整数;
常用取整方法 parseInt(num.toFixed(0)); 保留0位小数
手敲toFixed(n)的底层方法
var num = prompt("请输入需要处理的数字");
var n = prompt("请输入需要保留的位数");
num *= Math.pow(10,n);
num = Math.round(num);
num /= Math.pow(10,n);
console.log(num);
4.绝对值 Math.abs();
5.乘方 开方 Math.pow(底数,冥); Math.sqrt(); 开方只能开平方根
6.最大最小值 该方法不支持对数组进行最大最小获取
Math.max()
Math.min()
固定搭配来使用最大最小值获取数组的最大最小值
var 最大/最小 = Math.max/min.apply(Math,数组名);
Date()对象
1.创建事件对象的五种方法
var time = new Date(); 创建一个实时事件
var time = new Date(2016/12/10 时:分:秒); 创建一个自定义时间
var time = new Date(2016,12,10,时,分,秒); 创建一个自定义时间,但是月份需要 -1,因为计算机底层月份是 0-11 不是现实中的 1-12
var time = new Date(待复制时间名); 复制一个时间。 因为时间的API都会修改原数组,所以操作时需要对复制的时间进行操作
var time = new Date(毫秒值); 时间的底层是毫秒值;
2.时间对象的API
FullYear Month Date Day 年、月、日、星期
Hours Minutes Seconds Miliiseconds 小时、分钟、秒、毫秒
每一个都有set和get方法,除了Day星期没有set方法
Day4 Error对象 和函数重载、回调和自调
Error对象 浏览器自带的一种对象,会在代码发生错误时报错,终止后续代码执行
1. SyntaxError - 出现语法、符号错误
2. ReferrnceError - 使用未声明的变量或方法
3. TypeError - 方法类型使用错误。使用了不属于自己的方法
4. RangeError - 只有toFixed()会出先的错误
错误的处理 : 产品正式上线后,当代码发生错误我们不想终止,而是发出错误提醒,后续代码继续执行
try{}catch(err){}方法
try{
可能发生错误的代码;
}catch(err){
错误提示信息;
或者扔出一个错误: throw new Error;
}
if(){}else{}
函数重载、回调和自调
函数重载
指一个同名函数根据输入的实参不同执行不同的功能。JS不支持同名函数同时存在,但是提供arguments方法。该方法会默认以一个类数组的形式存储用户输入的实参。
匿名函数的自调(立即执行函数)
立即执行函数不需要调用,只执行一次,执行完毕后立即释放其中的无占用变量。
立即执行函数不会释放时间,常用于替代全局代码,有利于节约内存空间
(
function (){
函数体;
}
)();
匿名函数回调 匿名函数中除了自调函数就是回调函数。
回调函数一般作为一个实参传入其他使用该回调函数的方法。
elem.onclick=function(){}也是一个回调函数