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 = hobby
console.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').value
t1 = '进行加密了...' + t1
document.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>