JS Advanced Case Summary

JS advanced stage

• How to create classes and methods
• Learn constructor, an object instance, object prototype and prototype object
• Explore the new array ES5 method to find the product case, is the application of an array of methods
• Click on this transmission method change point code verification
• recursive function
• Application of regular expressions

JS Senior Day

tab switch

Requirements: Click test one, two, three, display a picture, two, three

Use the Create class methods:

        var that;
        // 利用构造函数的方法
        class Tab {

            constructor(id) {
                // 构造函数里放的是属性,用于接收参数，返回对象,这里的实参是DOM中的需要添加切换的盒子的id

                that = this;

                this.main = document.querySelector(id);
                // 通过document获取元素，但是这里需要获取的是盒子里的li
                // this.lis = document.querySelectorAll('li');
                this.lis = this.main.querySelectorAll('li');

                // this.sections = document.querySelectorAll('section');
                this.sections = this.main.querySelectorAll('section');

                // 类的方法需要调用，而构造函数里的内容会自动执行，所以可以在这里调用方法
                this.liCli();

            }

            // 添加方法
            liCli() {
                // 给每个li添加事件
                for (var i = 0; i < this.lis.length; i++) {
                    // 添加了点击事件之后，里面的功能是切换，所以可以添加到创建的类
                    // 给li添加属性，记录下标
                    this.lis[i].index = i;
                    this.lis[i].onclick = this.tabToggle;
                }

            }
            tabToggle() {
                // 需要添加清除类名功能
                that.clearClass();

                this.classList.add('liactive');

                that.sections[this.index].classList.add('conactive');
            }

            clearClass() {
                for (var j = 0; j < that.lis.length; j++) {

                    that.lis[j].classList.remove('liactive');

                    that.sections[j].classList.remove('conactive');
                }

            }

        }


        var obj = new Tab("#tab");

• this refers to class, and method call for class, would like to use this point to the method of the class, so in this case with an awkward, so that = this, when the class method calls another method, pointing to the problem Clear
• this.tabToggle instead this.tabToggle (); here is the method name, if in parentheses, on the implementation of the contents inside

JS senior next day

no

JS Senior Day

Search products

Analysis: 1. Open the page will display all the products in the page

2. Enter the content, search text box merchandise

3. Filter drop-down menu to display the product screened

Display merchandise

• forEach iterate

        // 将data中的数据渲染到界面中
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        },];

        // 功能一：将产品信息渲染到页面中
        // 获取节点

        var tbody = document.querySelector('tbody');
        // 遍历数组
        // 后面需要用到遍历数组，所以需要封装该函数
        showPro(data);

        function showPro(arr) {
            arr.forEach(function (elm) {
                // 页面中生成tr
                var tr = document.createElement('tr');

                tr.innerHTML = '<th>' + elm.id + '</th>\
                <th>'+ elm.pname + '</th>\
                <th>'+ elm.price + '</th>';

                tbody.appendChild(tr);
            });
        }

• Another method for inserting a node: insertAdjacentElement ( 'beforeend', tr);

 tbody.insertAdjacentElement('beforeend', tr);

• The syntax compatibility poor

Search products

        // 功能二：价格查询，筛选数组
        var btn = document.querySelector('.search-price');
        // 注册事件
        btn.onclick = function () {
            // 在此处获取表单内容，一上来就获取，用户还没有输入，内容为空
            var lowPrice = document.querySelector('.start').value;

            var highPrice = document.querySelector('.end').value;

            var arr1 = data.filter(function (elm) {
                // 判断条件，返回符合条件的elm
                return elm.price > lowPrice && elm.price < highPrice;
            })
            // 在显示搜索结果前，需要清空tbody内容
            tbody.innerHTML = '';

            showPro(arr1);
        }

• filter traversal
• Gets the value of the form is value

Search drop-down menu

        // 功能三：根据下拉菜单筛选
        var sele = document.querySelector('#sele');
        // 此时的事件是变化事件
        sele.onchange = function () {
            // 需要知道选择菜单此时选择的是谁
            var pro = sele.value;

            // 寻找id== pro的商品，渲染出来
            var arr2 = data.filter(function (elm) {
                // pro是字符串，三个等号时候要转换成number类型
                return elm.id === +pro;
            })
            // 展示前先清空tbody
            tbody.innerHTML = '';
            showPro(arr2);
            // 问题：如果选“请选择商品名称”，没有符合的内容，页面应该显示所有商品
            if (pro == 0) {
                showPro(data);
            }

        }

• Analyzing the data values ​​and select values ​​for equality
• filter traversal

Additional knowledge:

<select name="citys">
			
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">天津</option>
			<option value="4">广州</option>
			<option value="5">深圳</option>

		</select>
<!--
select 如果没有value值
当option有value值, select使用option的value值
当option没有value值,select使用option的内容作为value值 
-->

Click to send a verification code

After clicking the button, the button is disabled, every few seconds, recovery

• Use the bind () method

<body>
    <input type="button" value="点击发送验证码">
    <script>
        var btn = document.querySelector('input');
        btn.onclick = function () {

            this.disabled = true;
            // 定时器
            window.setTimeout(function () {
                this.disabled = false;

            }.bind(this), 2000);
//改变this的指向, 在定时器里,this指向window
        }
    </script>
</body>

• At this time, a one-time timer is set, because once you click only once, if it is permanent, but also need to clear the timer

Closures practice - subscript

var lis = document.querySelectorAll('li');
		for (var i = 0; i < lis.length; i++) {
			// lis[i].onclick = function () {
			// 	console.log(i);
			// }
			(function (index) {
				// var index = i;
				lis[index].onclick = function () {
					console.log(index);
				}
			})(i);
		}

• This method is cumbersome, but can also be achieved corresponding to the index

Recursion - factorial

• It requires two points: Recursive point, exit point

function jc(n) {
            if (n == 1) {
                return 1;
            }
            return n * jc(n - 1);
        }

        jc(3);
        console.log(jc(3));

Recursive - Fibonacci number

• Find recursive point, exit point
• Look law, the value n = n-1 entry and entry item and the n-2

// 1、1、2、3、5、8、13、21...
        // fn(n-1) + fn(n-2)
        // 递归点:前面n-1项的和
        // 出口点: 在1月或者2月的时候的值为1
        function fn(n) {
            if (n == 1 || n == 2) {
                return 1;
            }
            return fn(n - 1) + fn(n - 2);
        }
        fn(8);
        console.log(fn(8));

JS Senior Day

form validation

Requirements: Registration check user registration information in the correct format, correct, prompt green icon; wrong, then red icon; submit a registration time, to verify if all are correct, you can submit, or pop tips

window.onload = function () {
	// 大量验证
	// 验证表单
	// 失去焦点的时候，验证，
	// 如果错误的话，给span添加类名error，span里面有i标签i标签具有类名，还有文字提示
	// 如果正确的话，span里面也要添加类名，提示也要有i，i也要有类名，还有文字提示 

	// 获取元素
	var tel = document.querySelector('#tel');
	var qq = document.querySelector('#qq');
	var nc = document.querySelector('#nc');
	var msg = document.querySelector('#msg');
	var pwd = document.querySelector('#pwd');
	var surepwd = document.querySelector('#surepwd');
	var over = document.querySelector('.over');
	var inps = document.querySelectorAll('.inp');

	// 手机正则
	var regtel = /^[1][3|4|5|6|7|8|9][0-9]{9}$/;
	// qq正则
	var regqq = /^[1-9][0-9]{4,10}$/;
	// 昵称正则
	var regnc = /^[\u4e00-\u9fa5]{2,6}$/;
	// 短信正则
	var regmsg = /^[0-9]{4}$/;
	// 密码正则
	var regpwd = /^[a-z0-9_-]{6,18}$/;

	// 注册事件，封装
	function jiance(element, reg) {
		element.onblur = function () {
			// 判断：正确错误
			if (reg.test(this.value)) {
				this.nextElementSibling.className = 'success';
				this.nextElementSibling.innerHTML = '<i class="success_icon"></i>输入正确';
				return true;
			} else {
				this.nextElementSibling.className = 'error';
				this.nextElementSibling.innerHTML = '<i class="error_icon"></i>输入错误';
				return false;
			}
		}
	}

	// 调用函数
	jiance(tel, regtel);
	jiance(qq, regqq);
	jiance(nc, regnc);
	jiance(msg, regmsg);
	jiance(pwd, regpwd);

	surepwd.onblur = function () {

		if (this.value == pwd.value && this.value.length > 0) {
			this.nextElementSibling.className = 'success';
			this.nextElementSibling.innerHTML = '<i class="success_icon"></i>输入正确';
			return true;
		} else {
			this.nextElementSibling.className = 'error';
			this.nextElementSibling.innerHTML = '<i class="error_icon"></i>输入错误';
			return false;
		}

	}

	// 点击提交
	over.onclick = function () {
		// 假设值
		var flag = true;
		// 自动触发事件:元素.事件();
		// 遍历inps
		for (var i = 0; i < inps.length; i++) {
			var result = inps[i].onblur();
			if (result == false) {
				flag = false;
			}
		}
		// 查看flag
		if (flag) {
			// 允许
			location.href = 'http://www.baidu.com';
		} else {
			// 不允许
			alert('你好好好写，别乱来');
		}
	}
}

Sensitive word shield

Requirements: message board shield off some sensitive words.

		// 获取元素
		var txt = document.getElementById('txt');
		var btn = document.querySelector('input');
		var ul = document.querySelector('ul');

		// 添加事件
		btn.onclick = function () {
			// 创建li
			var li = document.createElement('li');
			// 追加到页面中
			ul.appendChild(li);
			// 获取value值
			var val = txt.value;
			// 替换
			val = val.replace(/搞基|gay/gi,'**');
			// 追加内容
			li.innerHTML = val;
			// 清除内容
			txt.value = '';
		}