1.作用域和闭包
//作用域
// var a =3
//
// function test(a){
// var a = 1;
// console.log('函数内部',a)
// }
// test(2)
//
// console.log(a)//闭包
// function jiami(){
// function encrypt(){
// console.log('在这里进行加密了')
// }
// perry = encrypt
// }
// jiami()
// perry()//自运行方式：
// (function jiami(){
// function encrypt(){
// console.log('在这里进行加密了')
// }
// perry = encrypt
// })()
//
// perry()perry = (function jiami(){function encrypt(){console.log('在这里进行加密了')}return encrypt
})()perry()
2.面向对象
2.1面向对象上
//构造器创建实例对象
//先执行实例对象后原型对象
function Teacher(name,age,major){this.name = name;this.age = age;this.major = major;this.teach = function () {console.log(`${this.name}教${this.major}`)}
}
//原型对象
Teacher.prototype.sport = function (hobby){this.hobby = hobbyconsole.log(`${this.name}喜欢${this.hobby}`)
}csq = new Teacher('Csq',21,'Python')
Lily = new Teacher('Lily',18,'Java')
// console.log(csq.teach())
console.log(Lily.teach('游泳'))
所有对象源头： 进行原型对象查询 __proto__
2.2面向对象下
浏览器中的window全局对象
this在node.js环境：
// window -->> global
// name = 'csq'
// console.log(global.name === name)// console.log(this)// var name = 'csq'
// function test(){
// console.log(this.name)
// }
// test()//对象
t = {name:'csq',teach:function (){console.log(this)}
}console.log(t.teach())
3.常见的js方法
通过call方法可以改变this指向的对象
4.HTML与JS方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS逆向真简单</title>
</head>
<body>HTML和JS交互
<!-- <script>-->
<!-- function btn_click(){-->
<!-- alert('这是一个弹窗')-->
<!-- }-->
<!-- </script>--><!-- <script src="button_click.js"></script>--><!-- <script>-->
<!-- window.onload = function (){-->
<!-- document.getElementById('b1').onclick = function (){-->
<!-- alert('通过页面加载绑定')-->
<!-- }-->
<!-- }-->
<!-- </script>--><script>window.onload = function (){document.getElementById('b1').addEventListener('click',function (){// alert('通过事件绑定JS')var t1 = document.getElementById('t1').valuet1 = '进行加密了...' + t1document.getElementById('d1').innerHTML = "<span>"+t1+"</span>"console.log(t1)})}</script><input id="t1"> <button id="b1" >输入密码</button><div id="d1"></div>
</body>
</html>制作简单的动态网页，理解到动态网页是如何形成的
5.jQuery
学习链接：jQuery 教程 | 菜鸟教程 (runoob.com)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>了解jQuery</title>
</head>
<body><script src="jquery-1.10.1.min.js"></script><script>$(function (){$('#b1').click(function (){alert('这是jQuery')var content = $('#t1').val()content = '这里进行加密'+content$('#d1').append(content)})})</script><input id="t1"><button id="b1">了解jQuery</button><br>
<div id="d1"></div>
</body>
</html>
