theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

aaaa

Browse Source
This commit is contained in:
asd 2021-06-03 10:52:41 +08:00
parent c5f18c6051
commit 907511778b
54 changed files with 3540 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
teaching/heshubao/flex.html Normal file
View File

@ -0,0 +1,44 @@
<!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>
<style>
/*
flex
*/
*{
margin:0;
padding: 0;
}
.item{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid white;
}
.box{
display: flex; /*声明一个弹性盒子*/
/*内联元素display的默认值是 inline 块级元素的display默认值是block */
/* flex-direction: row<shuiping>/column(shuzhi); 定义主轴方向 */
/* justify-content: start; 定义排列方式*/
/* flex-direction: column; */
/* justify-content: center; */
/* align-items:center; */
/* justify-content: space-around; */
justify-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>

48
teaching/heshubao/float.html Normal file
View File

@ -0,0 +1,48 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
}
.box{
overflow: auto;
}
.item {
width: 100px;
height: 100px;
background-color: black;
border-right: 1px solid white;
float: left;
}
.item1 {
width: 100px;
height: 150px;
background-color: red;
border-right: 1px solid white;
/* float: left; */
/* clear:both; */
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- <div style="clear:both"></div> -->
</div>
<div class="item1"></div>
</body>
</html>

58
teaching/heshubao/float1.html Normal file
View File

@ -0,0 +1,58 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
}
.item {
width: 100px;
height: 100px;
background: blue;
border: 1px solid yellow;
/* float: left; */
display:inline-block
}
.box{
width: 500px;
background-color: white;
border: 0;
}
.item1{
width: 200px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<!-- <div class="item"></div> -->
<div class="item"></div>
<div class="item"></div>
<!-- <div class="item1"></div> -->
<p>浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮
</p>
</div>
<!--
form =》 表单
css
width height margin padding float flex position absolute relative
fixed staicy
-->
</body>
</html>

40
teaching/heshubao/form.html Normal file
View File

@ -0,0 +1,40 @@
<!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>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--
action 提交地址
method 请求方式 get/post
-->
<form action="">
商品名称 ：<input type="text" value=""> <br/>
商品价格： <input type="text"> <br />
商品数量： <input type="text"> <br/>
活动价： <input type="text"> <br/>
商品简介： <textarea name="" id="" cols="30" rows="10"></textarea> <br/>
是否上架：<input type="radio" name="shangjia" id="on"> <label for="on">是</label> <input type="radio" name="shangjia" id="off"> <label for="off">否</label> <br/>
类别：<input type="checkbox" id="shi"> <label for="shi">食品</label> <input type="checkbox" id="dian"> <label for="dian">电器</label> <input type="checkbox" id="ri"> <label for="ri">日用品</label> <br/>
产地：<select name="" id="">
<option value="">济南</option>
<option value="">青岛</option>
<option value="">潍坊</option>
<option value="">泰安</option>
</select> <br />
<button>提交</button>
<input type="button" value="保存">
<input type="submit" value="err"> <!-- 提交按钮 -->
<input type="reset"> <!-- 重置 -->
</form>
</body>
</html>

21
teaching/heshubao/git.html Normal file
View File

@ -0,0 +1,21 @@
<!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>
<!--
git 操作代码仓库的一个工具
代码仓库：github(国外) gitee (码云)
git init 初始化
git remote -v 检测是否已经连接远程库
git remote add origin url 添加远程库
git pull origin master
-->
</body>
</html>

29
teaching/heshubao/login.html Normal file
View File

@ -0,0 +1,29 @@
<!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>
<!--
html (结构)
css(样式)
js(交互)
-->
<script>
function save(){
var account=document.getElementById("account").value
var pwd=document.getElementById("pwd").value
// document.write(account)
console.log(account)
console.log(pwd)
// alert('hello 贺树宝')
}
</script>
</head>
<body>
帐号：<input type="text" id="account" value="">
密码：<input type="password" id="pwd">
<button onclick="save()">提交</button>
</body>
</html>

39
teaching/heshubao/margin.html Normal file
View File

@ -0,0 +1,39 @@
<!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>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width:200px;
height: 200px;
background: blue;
margin-bottom: 100px;
}
.box2{
width:200px;
height: 200px;
background:yellow;
/* margin-top: 50px; */
padding-top: 50px;
}
.box{
/* border-bottom: 1px solid white; */
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>

36
teaching/heshubao/position.html Normal file
View File

@ -0,0 +1,36 @@
<!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>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 500px;
background: blue;
margin-top: 50px;
margin-left: 90px;
position:sticky;
}
.item{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>

94
teaching/heshubao/zishiying.html Normal file
View File

@ -0,0 +1,94 @@
<!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>
<script>
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
; (function (designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
/*
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
*/
</script>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background: blue;
}
.box2{
width: 1rem;
height: 1rem;
background: yellow;
}
/*
@media (max-width:1000px) {
body {
background: blue;
}
} */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

48
teaching/lhj/kejian/js/bibao.html Normal file
View File

@ -0,0 +1,48 @@
<!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>
<script>
var y=2
function fn(){
var x=1
// console.log(x+y) //3
function fn1(){
x=x+32
console.log(x+y)
}
return fn1
}
function m(){
var p=0
console.log(y)
return y
}
var z=fn()
z()
var w=m() //w=undefined
console.log(fn())
// var z=fn()
// console.log(z.toString())
// z() //从全局访问函数fn中的变量 x =====> 闭包
// 闭包： 有权访问另一个函数作用域中变量的函数
// 闭包形式：函数嵌套函数 并且返回内层的函数体
// 闭包作用：1. 可以读取函数内部的变量
// 2.让这些变量的值始终保持在内存中
// 造成的问题 1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
// 2. 不要随便改变父函数内部变量的值。(闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value）)
</script>
</head>
<body>
</body>
</html>

52
teaching/lhj/kejian/js/digui.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<script>
//递归 : 函数中 自己调用自己
function jiecheng(n){
var jieguo=1
for(var i=n;i>0;i--){
jieguo=jieguo*i
}
return jieguo
}
// console.log(jiecheng(5))
// 阶乘 5 =〉5*4*3*2*1
function jc(m){
if(m<=1){
return 1
}else{
return m*jc(m-1)
}
}
// function jc1(m){
// if(m<=1){
// return 1
// }else{
// return m*jc(m-1)
// }
// }
// 5*jc(4)
// 4*jc(3)
// 3*jc(2)
// 2*jc(1)
// 2*1
// console.log(jc(5))
var jc1=jc
jc=null;
console.log(jc1(5))
</script>
</head>
<body>
</body>
</html>

43
teaching/lhj/kejian/js/dom.html Normal file
View File

@ -0,0 +1,43 @@
<!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>
<p id="greet1" class="greet">hello world</p>
<p id="greet2" class="greet">hello world
<span id="yu">asd</span>
</p>
<div id="draw"></div>
<script>
// // 获取元素
// var greet= document.getElementById("greet1") //id
// var greet1=document.getElementsByClassName("greet")
// // var gre=document.getElementsByName("xxx")
// // var gre1=document.getElementsByTagName 标签
// // 除了id之外的获取方式 其他的获取结果都是数组 id的获取方式是单个元素
// console.log(greet1)
// // div.parentsibling
//创建节点
var squeare=document.createElement("div");
squeare.innerHTML="我是div"
squeare.style.color="red"
squeare.setAttribute("name","mydiv") //setattribute 设置属性 第一个参数是属性名 第二个参数是属性值
var draw=document.getElementById("draw")
draw.append(squeare)
console.log(squeare)
var greet2=document.getElementById("greet2")
var span=document.getElementById("yu")
greet2.remove(yu)
// greet2.removeChild(yu) //删除子元素
</script>
</body>
</html>

66
teaching/lhj/kejian/js/domlianxi.html Normal file
View File

@ -0,0 +1,66 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="text" id="name" value="">
<button onclick="add()">添加</button>
<table id="biao">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</table>
<script>
var table1 = document.getElementById("biao");
var info = [{ name: "张三", sex: 1, age: 23 }, { name: "刘亦菲", sex: 2, age: 38 }, { name: "蔡徐坤", sex: 1, age: 24 }]
function show() {
console.log(info.length)
var len=info.length
for (let i = 0; i < info.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + info[i].name + "</td><td>" + info[i].sex + "</td><td>" + info[i].age + "</td><td><button onclick='del("+i+")'>删除</button></td>";
table1.append(tr)
}
// for (let i = 0; i < info.length; i++) {
// var tr = document.createElement("tr");
// tr.innerHTML = "<td>" + info[len-1].name + "</td><td>" + info[len-1].sex + "</td><td>" + info[len-1].age + "</td><td><button onclick='del("+(len-1)+")'>删除</button></td>";
// table1.append(tr)
// }
}
show()
function add() {
table1.innerHTML="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>"
var name=document.getElementById("name").value;
console.log(name)
info.push({name:name,sex:2,age:18})
show()
}
function del(e){
console.log(e)
table1.innerHTML="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>"
info.splice(e+1,1)
// e+1
show()
}
</script>
</body>
</html>

48
teaching/lhj/kejian/js/domshijian.html Normal file
View File

@ -0,0 +1,48 @@
<!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>
<style>
.btn{
background:blue
}
</style>
</head>
<body>
<button>点我弹窗</button>
<script>
// 绑定事件的方式
// 1. 在html元素里面直接注册事件 <button onclick="tijiao()">提交</button>
// 2. 从js script标签里面 先选中目标元素 然后通过选中元素.事件注册 来完成注册事件：
// btn[0].ondblclick=function (){
// alert("asd")
// }
// 3. 从js script标签里面 先选中目标元素 然后通过选中元素.事件注册 在注册事件的时候直接使用 addeventlistener
window.onload=function(){
console.log("我再加载")
}
var btn=document.getElementsByTagName("button")
// btn[0].ondblclick=function (){
// alert("asd")
// }
btn[0].addEventListener("click",tanchu)
btn[0].style.width="200px"
console.log(btn[0].style.width)
btn[0].className="btn"
console.log(btn[0].style.background)
function tanchu(){
// alert("asd")
console.log(event)
}
// keypress 长按 键盘事件
</script>
</body>
</html>

133
teaching/lhj/kejian/js/note/24-闭包.md Normal file
View File

@ -0,0 +1,133 @@
## 闭包的引入
我们知道，变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以访问全局变量和局部变量。
- 函数外部只能访问全局变量，不能访问局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁。
比如下面这样的代码：
```js
function foo() {
let a = 1;
}
foo();
console.log(a); // 打印报错：Uncaught ReferenceError: a is not defined
```
上方代码中，由于变量 `a` 是函数内的局部变量，所以外部无法访问。
但是，在有些场景下，我们就是想要在函数外部访问函数内的局部变量，那要怎么办呢？这就需要引入闭包的概念。
## 闭包的概念和代码举例
### 闭包的概念
**闭包**（closure）：指有权**访问**另一个函数作用域中**变量**的**函数**。
上面这个概念，出自《JavaScript 高级程序设计（第 3 版）》这本书。上面的概念中指出，闭包是一种函数；当然，你可以**把闭包理解成是一种现象**。具体解释如下。
简单理解就是：如果**这个作用域可以访问另外一个函数内部的局部变量**，那就产生了闭包（此时，你可以把闭包理解成是一种现象）；而另外那个作用域所在的函数称之为**闭包函数**。注意，这里强调的是访问**局部变量**哦。
### 闭包代码举例
代码举例：
```js
function fn1() {
let a = 10;
function fn2() {
console.log(a);
}
fn2();
}
fn1();
```
打印结果：
```
10
```
上方代码中，函数 fn2 的作用域 访问了 fn1 中的局部变量，那么，此时在 fn1 中就产生了闭包，fn1 称之为闭包函数。
### 在 chrome 浏览器控制台中，调试闭包
上面的代码中，要怎么验证，确实产生了闭包呢？我们可以在 chrome 浏览器的控制台中设置断点，当代码执行到 `console.log(a)`这一行的时候，如下图所示：
![](http://img.smyhvae.com/20200703_2055.png)
上图中， Local 指的是局部作用域，Global 指的是 全局作用域；而 Closure 则是**闭包**，fn1 是一个闭包函数。
## 闭包的作用：可以读取函数内部的变量
我们来看看下面这段闭包的代码：
```js
function fn1() {
let a = 20;
function fn2() {
console.log(a);
}
return fn2;
}
const foo = fn1(); // 执行 fn1() 之后，会得到一个返回值。foo 代表的就是 fn2 函数
foo();
```
上方代码中，foo 代表的就是整个 fn2 函数。当执行了 `foo()` 语句之后（相当于执行了 ），fn1 函数内就产生了闭包。
一般来说，在 fn1 函数执行完毕后，它里面的变量 a 会立即销毁。但此时由于产生了闭包，所以 **fn1 函数中的变量 a 不会立即销毁，因为 fn2 函数还要继续调用变量 a**。只有等所有函数把变量 a 调用完了，变量 a 才会销毁。
而且，可以看出， 在执行 `foo()`语句之后，竟然能够打印出 `20`，这就完美通过闭包实现了：全局作用局成功访问到了局部作用域中的变量 a。
因此，我们可以看出，闭包的主要作用就是：延伸了变量的作用范围。
上面的代码也可以简写成：
```js
function fn1() {
let a = 20;
return function () {
console.log(a);
};
}
const foo = fn1(); // 执行 fn1() 之后，会得到一个返回值。这个返回值是函数
foo();
```
## 闭包的作用：让这些变量的值始终保持在内存中，不会在函数调用后被自动清除。
```
function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000
```
解释：
> 在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
> 为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

BIN
teaching/lhj/kejian/js/note/原型链.assets/image-20210513162836369.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
teaching/lhj/kejian/js/note/原型链.assets/image-20210513165237126.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

74
teaching/lhj/kejian/js/note/原型链.md Normal file
View File

@ -0,0 +1,74 @@
# 原型链和原型继承
在学习原型和原型链之前 我们先来复习一下 通过构造函数来创建对象的方式
### 构造函数
任何函数都可以做为构造函数使用
构造函数和普通函数的区别主要在于 调用的时候的差异
普通函数：
```
function create(){
this.role="admin"
}
create()
```
构造函数：
```
function create(){
this.role="admin"
}
var juese=new create()
```
此处的new 也属于运算符的一种 作用是创建一个用户定义的对象类型或具有构造函数的内置对象的实例
* new 操作符的过程
new 关键字会进行如下的操作：
1. 创建一个空的简单JavaScript对象（即{}）；
2.链接该对象（设置该对象的constructor）到另一个对象 ；
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。
* 分析 ```new foo() ``` 的执行过程
1. 一个继承自 Foo.prototype 的新对象被创建。
2. 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
3.由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
接下来我们把上面创建的对象打印一下看看会出现什么结果
![image-20210513165237126](E:\web\lessons\课件\teaching\lhj\kejian\js\note\原型链.assets\image-20210513165237126.png)
然后我们会发现在我们定义的role属性下面多了一个```__proto__``` 属性 这个```__proto__```属性指的就是我们当前对象的原型
### 原型对象
无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。普通对象没有 prototype，但有``` __proto__``` 属性。
```
function Person() {
}
Person.prototype.name = 'Perty';
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
delete person.name
console.log(person.name) // Perty
```

40
teaching/lhj/kejian/js/object.html
View File

@ -48,14 +48,13 @@
// 对象 键值对（无序） 数组（有序） // 对象 键值对（无序） 数组（有序）
// name sex age 这种类似于变量的东西叫属性 // name sex age 这种类似于变量的东西叫属性
// sayzao saywan这种对象中的函数 叫方法 // sayzao saywan这种对象中的函数 叫方法
// 添加属性
var obj={ var obj={
name:"qwe", name:"qwe",
sex:"男", sex:"男",
age:22, age:22,
sayzao:function(){ sayzao:function(){
alert("早安") alert("早安")
}, },
saywan:function(){ saywan:function(){
alert("晚安") alert("晚安")
@ -65,47 +64,10 @@
// obj.sayzao() // obj.sayzao()
// sayzao() // sayzao()
// 新增属性 obj（对象的名字）.属性名=属性值
// 新增方法 obj(对象名).方法名=匿名函数
console.log(obj.name) console.log(obj.name)
obj.height=185; obj.height=185;
obj.face="好看" obj.face="好看"
obj.zhuangkuang="单身" obj.zhuangkuang="单身"
obj.xiaozhushou=function(){
alert("多喝岩浆")
}
obj.cooking=function(time){
if(time==7){
alert("我正在做早饭");
}else if(time==11){
alert("我正在做午饭")
}else if(time==18){
alert("我在做晚饭")
}
}
obj.clean=function(){
alert("我在打扫卫生")
}
obj.wash=function(){
alert("我在把衣服扔到洗衣机里")
}
obj.changename=function(){
this.name="张三"
}
// obj.cooking(7)
// obj.sayzao()
// obj.clean()
// obj.xiaozhushou()
// obj.cooking(11)
// obj.wash()
// obj.cooking(18)
delete obj.saywan
console.log(obj)
</script> </script>
</body> </body>

62
teaching/lhj/kejian/js/this.html Normal file
View File

@ -0,0 +1,62 @@
<!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>
<script>
// "use strict";
// this
// 1. 谁调用 就指向谁 指向目标是一个对象
// 2. 如果没有对象调用他 就指向全局对象（window）
var a=1
// var name;
// console.log(a)
// console.log(window.a)
// console.log(this.a) //1
// var name="华晨宇"
var obj={
name:"asd",
echoname:function(){
console.log(this.name)
}
}
// obj.echoname()
function a(){
var user = "追梦子";
console.log(this.user);
console.log(this); // window
}
// a();
function myFunction() {
"use strict";
console.log(this);
}
// myFunction()
// function fnza(){
// console.log(this.name)
// }
// fnza()
// fnza.name="asd"
// window.name="qwe"
// console.log(fnza.name)
function foo() {
console.log( this.a ,"jkjkjkjkjk");
}
var obj = {
a: 2,
foo: foo
};
var a = "xxxxx"
setTimeout( obj.foo ,100);
</script>
</head>
<body>
</body>
</html>

58
teaching/lhj/kejian/js/yuanxing.html Normal file
View File

@ -0,0 +1,58 @@
<!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>
<script>
// 构造函数
function create(){
this.role="admin"
}
// create()
var obj= new create()
// new 关键字的操作过程：
// 1. 创建一个空对象
// 2. 构造函数中的this指向这个 空对象
// 3. 执行构造函数中的代码 给新对象添加属性和方法
// 4. 返回这个新对象
// 只要是个函数 都有prototype 属性
// 只要是个对象 都有__proto__ 属性（左右两边都是两个下划线）
// 这两个访问的都是对象的原型
// animal cat
function animal(){
this.run=function(){
console.log("我跑得起来")
}
}
var all=new animal()
function cat(kind,hasmao,food){
this.kind=kind;
this.hasmao=hasmao;
this.food=food;
this.jiao=function(sheng){
console.log(sheng)
}
}
var miao=new cat("哺乳类",1,"鱼")
cat.prototype=all
miao.run()
// 顺序
// 先写父级的构造函数
// 创建父级对象
// 写子级的构造函数
// 指定子级的原型
// 创建子级对象
</script>
</head>
<body>
</body>
</html>

105
teaching/lhj/kejian/this.md Normal file
View File

@ -0,0 +1,105 @@
# this
　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上** this的最终指向的是那个调用它的对象 **
例1
```
function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a();
//判断this跟this所处的函数没有关系，结果取决于哪个对象调用的他 最外层的对象是window
```
例2
```
var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();
// fn外部是对象O，访问的是this.user 即o.user => o.user的值是“追梦子”
```
例3
```
var user="pplok
var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();
```
例4
```
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();
```
总结：
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。
　　情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
　　情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
例5
```
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); // undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
```
判断this时，需要看函数调用的位置，而不是我们定义函数的位置
this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的
this 遇到return 时
```
function fn()
{
this.user = '追梦子';
return
}
var a = new fn;
console.log(a.user); //undefined
```
函数return的值为对象时，this就指向 这个被return的对象

50
teaching/wanzhaoyi/hanshu.html Normal file
View File

@ -0,0 +1,50 @@
<!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 jiemi(arr){
var newarr=[]
if(arr.length==4){
for(let i=0;i<arr.length;i++){
arr[i]=parseInt(arr[i])
arr[i]=(arr[i]+5)%10
}
console.log(arr)
newarr[0]=arr[3]
newarr[1]=arr[2]
newarr[3]=arr[0]
newarr[2]=arr[1]
}
console.log(newarr,"new")
}
function check(str){
var arr=str.split('.')
var res;
if(arr.length==4){
for(let i=0;i<arr.length;i++){
if(Number(arr[i])>0 && Number(arr[i])<255){
res=true
}else{
res=false
}
}
if(res){
console.log("是ipv4")
}else{
console.log("不是ipv4")
}
}else{
console.log("不合规")
}
}
</script>
</body>
</html>

58
teaching/wanzhaoyi/js/chuangjianduixiang.html Normal file
View File

@ -0,0 +1,58 @@
<!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>
// 1. 字面量创建对象
var ahuang = {
kind: "dog",
food: "杂食",
kanjia: function () {
console.log("汪汪汪")
},
chaijia: function () {
console.log("二哈的胜利！")
}
}
// 2.工厂模式
function create(kind,food,kanjia,chaijia){
var newobj={}
newobj.kind=kind
newobj.food=food
newobj.kanjia=kanjia
newobj.chaijia=chaijia
return newobj
}
var fugui=create("dog","啥都吃",function(){
console.log("汪汪队立大功")
},function (){
console.log("狗肉店见")
})
console.log(ahuang)
console.log(fugui)
// 3.构造函数
function creator(kind,food,kanjia,chaijia){
this.kind=kind;
this.food=food;
this.kanjia=kanjia;
this.chaijia=chaijia
}
var dali= new creator("dog","杂食",function(){console.log("dali会看家")},function (){console.log("大力不拆家")})
console.log(dali)
</script>
</body>
</html>

39
teaching/wanzhaoyi/js/digui.html Normal file
View File

@ -0,0 +1,39 @@
<!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>
<script>
// 递归 就是在函数内 调用自身
// 阶乘的函数
// 5的阶乘 = 5*4*3*2*1
// n的阶乘 = n*（n-1）*(n-2)*(n-3)...*1
// n*(n-1)*(n-1-1)*(n-1-1-1)*(n-1-1-1-1)....*1
function jc(n){
if(n==1){
return 1;
}else{
return n*jc(n-1)
}
}
// 4
// 4*jc(4-1) 4*jc(3)
// 4*jc(3) 4*3*jc(3-1)
// 4*3*jc(2)
// 4*3*2*jc(2-1)
// 4*3*2*jc(1)
// 4*3*2*1
var jiecheng=jc
jc=null
var res=jiecheng(5)
console.log(res)
</script>
</head>
<body>
</body>
</html>

42
teaching/wanzhaoyi/js/dom.html Normal file
View File

@ -0,0 +1,42 @@
<!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>
<!--
dom
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName("div")
-->
<div class="box">
<p>hello</p>
<span>aaa</span>
</div>
<script>
var box=document.getElementsByTagName("div")
console.log(box[0].innerText)
console.log(box[0].innerHTML)
// innerHtml => 带着html代码来的 解析html 代码
// box[0].innerText="前端"
console.log(box[0].children)
var zi=document.getElementsByTagName("span")
console.log(zi[0].parentNode)
// 创建节点
var ele=document.createElement("div")
ele.innerHTML="消灭人类暴政，世界属于三体"
console.log(ele)
ele.setAttribute("style","color:red")
box[0].append(ele) //插入元素
zi[0].remove() //删除元素
</script>
</body>
</html>

48
teaching/wanzhaoyi/js/duixiang.htm Normal file
View File

@ -0,0 +1,48 @@
<!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>
<script>
// 对象
var obj={
name:"刘亦菲",
age:28,
sex:"女",
hobby:["看电影","听音乐","做美食"],
waimao:"长头发大眼睛小嘴巴",
zuofan:function(){
console.log("我在做饭")
},
shuawan:function(){
console.log("我在刷碗")
},
xuexi:function(){
console.log("我在学习")
}
}
// 属性：name age sex hobby waimao
// 方法 zuofan shuawan xuexi
obj.kandianying=function(){
console.log("看电影啦")
}
console.log(obj)
obj.name="杨幂"
obj.shuawan=function(){
console.log("你去刷碗")
return 123
}
var t=obj.shuawan()
console.log(t,9990)
delete obj.xuexi
</script>
</head>
<body>
</body>
</html>

40
teaching/wanzhaoyi/js/hanshu.html Normal file
View File

@ -0,0 +1,40 @@
<!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>
<script>
// 创建一个函数
function add(x,y){
return x+y
}
// 2 函数表达式
// x,y ===> 形参
var add=function (x,y){
console.log(arguments.length) //函数参数的个数
console.log(arguments.callee)
return x+y
}
// add(1,1)
// add // => 函数体
// add(1,2) // => 函数执行 并返回执行结果（返回值）
// 1,2 是add函数的实参
// 立即执行函数
(function (e){
console.log("我是匿名函数啦啦啦啦啦啦")
}(34))
// 立即执行函数 的执行括号加在里面！！！！！
</script>
</head>
<body>
</body>
</html>

22
teaching/wanzhaoyi/js/jisuanqi.html Normal file
View File

@ -0,0 +1,22 @@
<!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>
<script>
function add(){
var num=document.getElementsByClassName("num")
console.log(num[0].value,'+',num[1].value)
console.log(Number(num[0].value)+Number(num[1].value))
}
</script>
</head>
<body>
<input type="text" value="" class="num">
<input type="text" value="" class="num"><br/>
<button onclick="add()">加</button>
</body>
</html>

44
teaching/wanzhaoyi/js/jsjichu.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" contrent="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./jsjichu.js"></script> 外部引入-->
<script>
//js代码
// 单行注释
/*
多行注释
hivskj
*/
// js 组成
// ESMAScript(核心)
// DOM(文档对象模型) 操作dom节点
// BOM(浏览器对象模型) 浏览器相关信息
</script>
</head>
<body>
<span>hello</span>
<script>
// alert("这是弹窗")
// 带输入框的弹窗 带确定取消的弹窗
document.write("你好") //打印在页面上
console.log("javascript")
// 变量： 值可以改变 var let
// 常量： 值不能改变 定义的时候需要赋初始值 const
// 变量命名规则
// 1. 只能包含 数字 字母 下划线 $
// 2. 不能用数字开头
// 3. 不能用js关键字保留字
var span=7
console.log(span)
</script>
</body>
</html>

42
teaching/wanzhaoyi/js/shujuleixing.html Normal file
View File

@ -0,0 +1,42 @@
<!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>
<script>
// js 数据类型
// 基本数据类型 ：number string boolean undefined null
// 复杂数据类型: object
// var arr=new Array()
// var fn=new Function()
// 基本数据类型和复杂数据类型的区别
// 检测数据类型
// 由低到高 typeof instanceof Object.prototype.tostring.call
// typeof instanceof Object.prototype.toString.call
var a=9
var type=Object.prototype.toString.call(a)
console.log(Object.prototype.toString.call([1,2,3,4]))
console.log(Object.prototype.toString.call(9),"mmmn")
console.log(type)
console.log(9 instanceof Number)
console.log(new Number(9) instanceof Number)
console.log([1,2,3,4] instanceof Array)
console.log(function fn(){} instanceof Function)
// instanceof 用法 被检测的值 instanceof 猜测的数据类型
// 返回的是true/false
var key=123
console.log(typeof key)
console.log(typeof null)
console.log(typeof undefined)
console.log(typeof [4,3,1])
console.log(typeof function fm(){})
</script>
</head>
<body>
</body>
</html>

55
teaching/wanzhaoyi/js/shuzu.html Normal file
View File

@ -0,0 +1,55 @@
<!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>
<script>
// 数组 =》集合
// 创建数组
var arr=[1,2,3,4,5,6] //数组的标志是[]
arr.splice(2,1)
arr.splice(2,0,3)
var arr1=[[11,12,13],[22,23],[[333,444,555]]]
// console.log(arr[0])
// console.log(arr1[0][1])
// 数组访问元素 数组名 +[下标] 下标从0开始 依次递加
// 遍历所有的数组元素
// 1.for循环
// for(var i=0;i<arr.length;i++){
// console.log(arr[i])
// }
// for(var i=0;i<arr1.length;i++){
// console.log(arr1[i] instanceof Array)
// if(arr1[i] instanceof Array){
// for(var m=0;m<arr1[i].length;m++){
// console.log(arr1[i][m])
// if(arr1[i][m] instanceof Array){
// console.log("xia")
// for(var n=0;i<arr1[i][m].length;n++){
// console.log(arr1[i][m][n])
// }
// }
// }
// }
// }
// 2. for in 循环
for(var key in arr){
console.log(key,arr[key])
}
// key 键 0 1 2...
// arr[key]值 1 2 3..
//数组方法
</script>
</head>
<body>
</body>
</html>

45
teaching/wanzhaoyi/js/yuanxinglian.html Normal file
View File

@ -0,0 +1,45 @@
<!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>
<script>
function timi(){
this.start=function(){
console.log('timi')
}
}
var tianmei=new timi()
function create(age,name,hobby){
this.age=age;
this.name=name;
this.hobby=hobby
}
create.prototype=tianmei
create.prototype.run=function(){
console.log("我会跑")
}
// create.prototype.timi=new timi();
console.log(create.prototype)
var zhansan = new create("24","zhansan","book")
var xiaoqiao=new create("18","小乔","蹲草")
console.log(zhansan)
zhansan.run()
xiaoqiao.run()
// console.log(zhansan.__proto__)
// 对象访问原型是通过 __proto__ 属性
// 函数访问 原型是通过 prototype属性
</script>
</head>
<body>
</body>
</html>

34
teaching/wanzhaoyi/shijian.html Normal file
View File

@ -0,0 +1,34 @@
<!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>
<!-- <div onclick="keyuo()"></div> -->
<script>
var shenti = document.getElementsByTagName("body")[0]
// document.body => 选中body
console.log(shenti);
// document 首字母不大写
var ele = document.createElement("div");
// setattribute
// 不要在html里面用关于样式的属性
ele.setAttribute("style","width:100px;height:100px;background-color:red")
ele.innerHTML="hello"
console.log(ele)
shenti.append(ele)
// ele.onclick=function(){
// alert("world")
// }
ele.addEventListener("click",function(){
alert("world")
})
</script>
</body>
</html>

239
teaching/wanzhaoyi/suning.html Normal file
View File

@ -0,0 +1,239 @@
<!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>
<style>
*{
margin: 0;
padding:0
}
.nav{
background: #f5f5f5;
height: 35px;
}
.daohang{
width: 1190px;
margin:0 auto;
}
.nav-item{
float: left;
width:85px;
/* height:35px; */
list-style: none;
text-align: center;
cursor:pointer;
line-height: 35px;
color:#666;
font-size: 12px;
/* background: gold; */
}
.nav-item:hover{
background-color: white;
}
.right li{
float:right
}
.nav_bottom{
width:93%;
margin:0 auto;
border: 1px solid #666;
overflow: auto;
display: none;
/* visibility: hidden; //可见还是不可见 */
}
.nav_b_1l{
float: left;
padding-left: 20px;
}
.nav_b_1r{
margin-top: 21px;
float: left;
margin-left:30px;
}
.title{
font-weight: bold;
}
.nav_b_1 dd{
margin-top: 5px;
}
.nav_b_1{
padding-right: 30px;
border-right: 1px solid red;
overflow: auto;
float: left;
font-size: 12px;
}
</style>
<style>
.tab{
width: 450px;
overflow: auto;
/* padding-bottom: 10px; */
border-bottom: 1px solid #666;
}
.tab-item{
float: left;
margin-left: 40px;
cursor: pointer;
padding-bottom: 10px;
border-bottom: 2px solid #666;
}
.selected{
border-bottom: 2px solid red;
}
</style>
<script>
function enter(){
// console.log("enter")
var frame=document.getElementsByClassName("nav_bottom");
console.log(frame)
frame[0].setAttribute("style","display:block")
}
function out(){
// console.log("enter")
var frame=document.getElementsByClassName("nav_bottom");
console.log(frame)
frame[0].setAttribute("style","display:none")
}
function xz(e){
console.log(e)
var tablist=document.getElementsByClassName("tab-item")
for(var i=0;i<tablist.length;i++){
console.log(tablist[i],11)
tablist[i].setAttribute("class","tab-item")
}
tablist[e].setAttribute("class","tab-item selected")
// setAttribute(属性名,属性值) 给选中元素加属性
// 不能用for in 循环 他会把对象多余的属性或者方法都取出来
}
</script>
</head>
<body>
<div class="nav">
<div class="daohang">
<ul class="left">
<li class="nav-item" onmouseover="enter()" onmouseout="out()">网站导航</li>
<li class="nav-item">网站导航</li>
<li class="nav-item">网站导航</li>
</ul>
<ul class="right">
<li class="nav-item ">网站导航6</li>
<li class="nav-item">网站导航5</li>
<li class="nav-item">网站导航4</li>
<li class="nav-item">网站导航3</li>
<li class="nav-item">网站导航2</li>
<li class="nav-item">网站导航1</li>
</ul>
</div>
</div>
<div class="nav_bottom">
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
<div class="nav_b_1">
<dl class="nav_b_1l">
<dt class="title">特色购物</dt>
<dd>电视机</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
<dl class="nav_b_1r">
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
<dd>冰箱22222222</dd>
</dl>
</div>
</div>
<div class="tab">
<p class="tab-item selected" onclick="xz(0)">全部</p>
<p class="tab-item" onclick="xz(1)">待付款</p>
<p class="tab-item" onclick="xz(2)">待发货</p>
<p class="tab-item" onclick="xz(3)">待收货</p>
<p class="tab-item" onclick="xz(4)">待评价</p>
</div>
</body>
</html>

155
teaching/wanzhaoyi/yubianyi.html Normal file
View File

@ -0,0 +1,155 @@
<!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>
<script>
// var a=1
// function fn(e){
// var b=1
// c=0
// var a="l"
// console.log(window.a)
// }
// fn("a")
// console.log(e)
// console.log(c)
// console.log(b)
// a 全局变量 全局作用域
// b 局部变量（局部作用域）
// GO{
// a:undefined,
// fn:function(){}
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:undefined
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:"a"
// }
// AO{
// b:undefined,
// c:undefined,
// a:undefined,
// e:"a"
// }
// js 运行三部曲：语法分析 预编译 解释执行
// function fn1(){
// console.log(a) //window.a
// var a=1 //window.a
// // console.log(a)
// }
// fn1()
//AO{}
//AO{
// a：undefined==> 1
// }
// GO{
// fn:function
// }
// 预编译
// 1.分为 全局（GO）和局部 (AO)
// 2.发生什么（AO）
// 1. 创建AO对象
// 2. 去找形参 变量声明 =>undefined
// 3. 形参实参相统一
// 4. 找函数声明 值赋予函数体
// function fn(a) {
// console.log(a); function a() { }
// var a = 666;
// console.log(a); 666
// function a() { }
// console.log(a); 666
// var b = function () { };
// console.log(b); function() { }
// function c() { }
// }
// fn(1);
// AO{}
// AO{
// a:undefined,
// b:undefined,
// }
// AO{
// a:1,
// b:undefined,
// }
// AO{
// a:Function,
// b:undefined,
// c:function
// }
var a = 1;
console.log(a);
function test(a) {
console.log(a);
var a = 123;
console.log(a);
function a() { }
console.log(a);
var b = function () { }
console.log(b);
function d() { }
}
var c = function () {
console.log("I at C function");
}
console.log(c);
test(2);
// AO{}
// AO{
// a:undefined,
// b:undefined,
// c:undefined
// }
// AO{
// a:2,
// b:undefined,
// c:undefined
// }
// AO{
// a：function，
// d:function,
// b:undefined,
// c:undefined
// }
</script>
</head>
<body>
</body>
</html>

41
teaching/林锦绣/duixiang.html Normal file
View File

@ -0,0 +1,41 @@
<!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 obj={
shopname:"西红柿",
price:1.00,
kucun:"30个",
chandi:"寿光",
eat:function(){
console.log("我可以被生吃")
},
cook:function(){
console.log("可以炒着吃")
},
zhazhi:function(){
console.log("我可以被榨汁")
}
}
console.log(obj)
obj.eat()
obj.cook();
obj.zhazhi();
console.log(obj.shopname);
obj.gaoguang=function(){
console.log("火山下大雪")
}
obj.gaoguang()
obj.shopname="火山"
delete obj.kucun
console.log(obj)
</script>
</body>
</html>

22
teaching/林锦绣/form.html Normal file
View File

@ -0,0 +1,22 @@
<!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>
<input type="text" value="">
<script>
// 1.选中目标元素 2. 取出value的值
// 1.选中目标元素 除了通过id来取之外，其他取出来的值都是一些集合（数组）
// id具有唯一性 所以通过id来取的结果 就是单个元素
var info=document.getElementsByTagName("input")
console.log(info)
document.write("值为"+info[0].value)
alert(info[0].value)
prompt("fdgf")
</script>
</body>
</html>

79
teaching/林锦绣/js.html Normal file
View File

@ -0,0 +1,79 @@
<!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>
<script>
// javascript
// js 组成：ECMAscript BOM DOM
// 数据类型：两种 简单数据类型：
// Number String Boolean null undefined
// 复杂数据类型
// Object
// Array Function
// var arr=new Array()
// var fun=new Function()
// 所以array 和function 都是object的实例
// 检测数据类型
// typeof instanceof object.prototype.tostring.call
var a=0
var s=Object.prototype.toString
console.log(s.call(a))
// 变量
// 命名规则 1. 只能包含字母数字下划线 $ 2. 数字不能开头 3. 不能有关键字 保留字
// 变量用var 声明
// const 常量 常量的值不能改变 所以在声明的时候 就应该给他附初始值
// 交互
// 1. console.log 输在控制台上 document.write 输出在页面上 alert() 弹窗
// 补充： 带着确认取消的弹窗 带着输入框的弹窗
// 运算符
// 分类： 按元来分 能操作几个数就是几元运算符
// 一元运算符： a++ a-- --a ++a 自增自减 !a 逻辑非
// 三元运算符 三目运算 ?:
// 二元运算符：+ - * / % || && ! > < == === >= <= = += -= /= *= %=
// == === 区别 相等的时候 不会比较数据类型 (会发生隐式类型转换) 全等的时候 不会发生隐式类型转换 在比较的时候会比较数据类型
// 运算符优先级
// ()
// .(对象属性访问) [](数组元素访问) new<带参数> ()<函数调用>
// new<不带参数>
// ++(后置 ) --（后置）
// ! +( 一元 正) -（一元 负） ++（前置） --（前置） tyoeof delete
// * / %
// 、 + - （加减）
// > < >= <= in instanceof
// == != === !==
// &&
// ||
// ?: = += -= *= /= %=
// ，
var age=10
console.log(age=="10")
console.log(age==="10")
var str=""
// if (age>18){
// str="欢迎光临"
// }
// else{
// str="拒绝进入"
// }
str=age>18?"欢迎光临":"拒绝进入"
document.write(str)
</script>
</head>
<body>
</body>
</html>

46
teaching/林锦绣/xunhuan.html Normal file
View File

@ -0,0 +1,46 @@
<!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>
// while
// for
// for in
// do while
// 1.while
// var a=0
// while(a<=100){
// console.log(a)
// a++
// }
// 2. do while
// var a=0
// do{
// console.log(a)
// a++
// }while(a<=100)
// 3. for
// for(var a=0;a<=100;a++){
// console.log(a)
// }
// var arr=[1,2,3,4,5]
// for(var i in arr){
// console.log(i,arr[i])
// }
// while(true){
// }
</script>
</body>
</html>

92
zuoye/js/a.html
View File

@ -1,16 +1,86 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>性格测试</title>
<title>Document</title> <style type="text/css">
#no1ul{
list-style:none;
margin:0px;
padding:0px;
}
.close{
display:none;
}
.show{
color:#990000;
}
</style>
<script type="text/javascript">
function showTestResult(){
var radioNodes = document.getElementsByName("answer");
var resultNodes = document.getElementsByName("result");
//健壮性判断
var flag = false;
for(var x=0;x<radioNodes.length;x++){
if(radioNodes[x].checked){
flag = true;
showOne(resultNodes[x]);
break;
}
}
if(!flag){
showOne(resultNodes[4]);
}
}
//我们希望只显示一个测试结果
function showOne(node){
var resultNodes = document.getElementsByName("result");
for(var x=0;x<resultNodes.length;x++){
//先全部close
resultNodes[x].className = "close";
}
//再显示这个节点
node.className = "show";
}
</script>
</head> </head>
<body> <body>
<script> <h2>性格测试</h2>
var time=1 <div>
var newtime=time++ <h3>问题</h3>
console.log(time,newtime) <span>每天下班回家一进门，你会怎样脱掉鞋子?</span>
</script> <ul id="no1ul">
　 <li><input type="radio" name="answer" value="1"/>A、很随意的脱下鞋子，不在乎如何摆放。</li>
<li><input type="radio" name="answer" value="2"/>B、脱下鞋后，把鞋尖朝向门外的方向整齐排好。</li>
<li><input type="radio" name="answer" value="3"/>C、脱下鞋后，把鞋尖朝屋内的方向整齐排好。</li>
<li><input type="radio" name="answer" value="4"/>D、不自己脱鞋，而是由同住在一起的人帮你脱下鞋子。</li>
</ul>
</div>
<div>
<input type="button" value="查看测试结果" onclick="showTestResult()"/>
<hr/>
<div id="a" name="result" class="close">
A：这样的人，比较喜欢自由，认为生活舒适即可，不在意细节，完全不考虑社会体制和规则的类型，以追求自我欲望为中心。
较冲动，喜欢自由奔放的生活方式。比较自我的人，这种人是为了追求欲望而行动的类型，仍然持续幼儿时期的性格。
如果往好的方向发展，当然很好；但是，如果往坏的方向发展，结果会很令人惊叹。
</div>
<div id="b" name="result" class="close">
B：这样的人很能吃苦，用自己的辛勤来享受生活。凡事都要准备得万全，是追求完美的人。容易在社会上树敌很多，对于同事也毫不放松。
他们会压抑感情，喜怒不形于色，遵守社会规范而行动。但是，这种人的心里面防卫防备很严，即使认为是为了社会公益而做的事情，也会引起很多的误解。
你的道德心和伦理感相当强烈，建议最好不要给自己过多的负担以免吃不消。
</div>
<div id="c" name="result" class="close">
C：这样的人有自己的思考方式，有自己的做事风格，会适当地考虑方式方法，是办事周到的人。这样的人骄傲，但是又适度，所以会给人以成熟自信的感觉。
</div>
<div id="d" name="result" class="close">
D：这样脱鞋方式的人，不用多说，一定是比较任性的人，与其说是任性，倒不如说是被完全惯坏了，因为周围的人都宠她，她要做的事情，都会由别人帮她做的很好，
不是说她自己没由能力，是因为她的依赖性很强，所以这样的人必须注意与周围环境的协调，否则终有一天吃大亏。
</div>
<div id="e" name="result" class="close">
E：你很皮！
</div>
</div>
</body> </body>
</html> </html>

BIN
zuoye/js/dom.assets/image-20210519165912729.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
zuoye/js/dom.assets/image-20210519165917810.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

37
zuoye/js/dom.md Normal file
View File

@ -0,0 +1,37 @@
# dom
1. 点击按钮时，显示和隐藏盒子。
2. 鼠标悬停时，显示二维码大图
3. 点击按钮禁用文本框/解禁文本框
4. 文本框获取焦点/失去焦点（淘宝 京东的搜索框效果）
5. 用户注册信息错误时，输入框失去焦点后，高亮显示。
6. 全选和反选（仿京东购物车）
7. 电子时钟 （时间会更新）
![img](https://images2018.cnblogs.com/blog/1413464/201806/1413464-20180623141505286-330103200.png)
8. 随机点名 通过math.radom取随机数实现随机点名 名字集合放在数组里
![img](https://images2018.cnblogs.com/blog/1413464/201806/1413464-20180623141252328-1912615846.png)
9. 获取验证码，并验证
html部分：在输入框输入验证码，验证是否一致，点击更换验证码内容
验证：获取输入框内容，与验证码内容匹配
10. 性格测试
类似于这样 四个选项对应不同的结果
![image-20210519165917810](E:\web\lessons\课件\zuoye\js\dom.assets\image-20210519165917810.png)
11. 仿写 todolist的备忘录功能 实现要做项的增删改查
12. 在html上写一个表格 包括姓名 年龄 性别 住址 职业 通过js 做信息的增删改查

BIN
zuoye/js/js/dom.pdf Normal file
View File

Binary file not shown.

BIN
zuoye/js/pdfs/预编译作用域.pdf Normal file
View File

Binary file not shown.

199
zuoye/js/thislx.md
View File

@ -145,4 +145,203 @@ function fn(){
} }
fn.name = 'xxx' fn.name = 'xxx'
fn() fn()
```
13. 下面代码的执行结果是什么 为什么
```
function foo() {
var a = 2;
this.bar();
}
function bar() {
console.log( this.a );
}
foo();
```
14. 下面代码的执行结果是什么 为什么
```
function foo(){
console.log(this.a)
}
var a = 2
foo()
```
15. 下面代码的执行结果是什么 为什么
```
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo();
```
14. 下面的fn中的this指向谁
```
obj1.obj2.obj3.fn()
```
15. 下面代码的执行结果是什么 为什么
```
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函数别名!
var a = "xxxxx"
bar();
```
16. 下面代码的执行结果是什么 为什么
```
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var a = "xxxxx"
setTimeout( obj.foo ,100);
```
17. 下面代码的执行结果是什么 为什么
```
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments );
};
}
var obj = {
a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b );
```
18. 下面代码的执行结果是什么 为什么
```
const test = {
prop: 42,
func: function() {
return this.prop;
},
};
console.log(test.func());
```
19. 下面代码的执行结果是什么 为什么
```
console.log(this === window);
a = 37;
console.log(window.a);
this.b = "MND";
console.log(window.b)
console.log(b)
```
20. 下面代码的执行结果是什么 为什么
```
function f1(){
return this;
}
//在浏览器中：
f1() === window; //在浏览器中，全局对象是window
//在Node中：
f1() === globalThis;
```
21. 下面代码的执行结果是什么 为什么
```
function f2(){
"use strict"; // 这里是严格模式
return this;
}
f2() === undefined;
```
22. 下面代码的执行结果是什么 为什么
```
var obj = {a: 'Custom'};
var a = 'Global';
function whatsThis() {
return this.a;
}
whatsThis();
whatsThis.call(obj);
whatsThis.apply(obj);
```
23. 下面代码的执行结果是什么 为什么
```
function C(){
this.a = 37;
}
var o = new C();
console.log(o.a);
function C2(){
this.a = 37;
return {a:38};
}
o = new C2();
console.log(o.a);
```
24. 下面代码的执行结果是什么 为什么
```
<button onclick="alert(this.tagName.toLowerCase());">
Show this
</button>
``` ```

232
zuoye/js/原型链题目.md Normal file
View File

@ -0,0 +1,232 @@
# 原型链题目
## 1 、prototype和__proto__的概念（简答题）
prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。
__proto__是一个对象拥有的内置属性，是JS内部使用寻找原型链的属性。
## 2、prototype和__proto__的区别？
prototype是函数的内置属性，__proto__是对象的内置属性
## 3、js中的原型链以及最顶端是什么？（填空题）
Object.prototype
## 4、以下代码会输出什么？（）（）（）（）（）（填空题）
```
function Foo() {
getName = function() {
alert(1)
};
return this;
}
Foo.getName = function() {
alert(2)
};
Foo.prototype.getName = function() {
alert(3)
};
var getName = function() {
alert(4)
};
function getName() {
alert(5)
};
Foo.getName(); //2
getName(); //4
Foo().getName() // 1
getName(); //1
new Foo.getName(); //2
```
答案：2 4 1 1 2
注释： getname() 在调用的时候 ，前面声明了两个getname函数 一个是function通过函数声明 另一个是通过 var 也就是函数表达式声明函数
根据预编译的过程 ，函数表达式和函数声明都会发生变量提升
var getname=function(){alert(4)}
function getname(){alert(5)}
过程：
var getname;
funciton getname(){alert(5)}
getname=function(){alert(4)}
## 5、以下代码会输出什么？（）（填空题）
```
function A() {
this.do = function() {
return 'foo'
}
}
A.prototype = function() {
this.do = function() {
return 'bar'
}
}
var x = new A().do()
console.log(x)
```
答案：foo
## 6、以下代码会输出什么？（）（填空题）
```
function C1(name) {
if (name) {
this.name = name;
}
}
function C2(name) {
this.name = name;
}
function C3(name) {
this.name = name || 'join';
}
C1.prototype.name = 'Tom';
C2.prototype.name = 'Tom';
C3.prototype.name = 'Tom';
console.log((new C1().name)+'/' + (new C2().name)+'/' + (new C3().name));
```
答案：Tom/undefined/join
new c1().name 已知 c1中没有name属性（实例化的时候没传参数） 所以在访问name属性的时候 会访问c1原型中的name属性 即后面赋值原型的语句 C1.prototype.name = 'Tom'; c2在访问name属性的时候 会先从c2内部找 已知 c2内部已经有 this.name=name了 虽然在实例化的时候没有传入参数作为name的值 但是this.name赋值的步骤没有经过任何条件判断 所以会赋值为 undefined new c3().name c3.name会先从c3的实例对象找 已知 c3的实例对象中this.name也是没有任何条件判断必然会执行 他的值是如果name有值就是传入的name的值 如果没有传入参数name的值 就是join 实例化的时候没有传参数 所以是join
## 7、以下代码会输出什么？（）（）（）（填空题）
```
function A() {};
function B(a) {
this.a = a;
}
function C(a) {
if (a) {
this.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);
```
答案：1 undefined 2
分析：首先看当前构造函数是否定义这个属性，若有直接输出，否则在其原型链上依次查找。
A：原型链查找到 a=1；B：函数本身有 a属性；C：函数先判断参数；若参数的布尔值为真则输出 a的值,否则输出原型链上a的值
## 8、以下代码会输出什么？（）（）（）（）（填空题）
```
var F = function() {};
Object.prototype.a = function() {
console.log("a()");
};
Function.prototype.b = function() {
console.log("b()");
};
var f = new F();
F.a();
F.b();
f.a();
f.b();
```
答案：a() b() a() 报错
分析：
函数内部和函数原型上没有 a，沿着其原型链查找属性。
f.b()，f 的构造函数是 F 而非 Function ，从上述原型链图观察，f 的原型链查找不到 Function的原型。
F.a() 因为F是 函数 继承自 Function Function又继承自 Object 所以a属性不在F中时会按顺序查找到object.prototype.a的结果为 a()
F.b同理
f.a() 因为f是通过F函数构造出的对象 所以 他属于object 能访问object.prototype 但是不属于 function 所以不能访问 function.prototype
所以 f.b()报错
## 9、以下代码会输出什么？（）（）（）（）（填空题）
```
var A=function(){}
A.prototype.n=1
var b=new A()
A.prototype={
n:2,
m:3
}
var c=new A()
console.log(b.n,b.m,c.n,c.m)
```
答案：1 undefined 2 3
## 10、f有方法a吗？有方法b吗？（）（）（填空题）
```
var F = function () {}
Object.prototype.a = function () {}
Function.prototype.b = function () {}
var f = new F()
```
答案：有a 没有b
## 11、以下代码会输出什么？（）（）（）（）（填空题）
```
function Person(){}
Person.prototype.n=1
var p1=new Person()
Person.prototype={
n:2,
m:3
}
var p2=new Person()
console.log(p1.n,p1.m,p2.n,p2.m)
```
答案：1 undefined 2 3

BIN
zuoye/js/原型链题目.pdf Normal file
View File

Binary file not shown.

178
zuoye/js/基础 - 副本.md Normal file
View File

@ -0,0 +1,178 @@
# js 基础练习
* 写出三种种js引入方式并举例
1. 外部引入 ```<script src="./main.js"></script>```
2. 内部引入 ```<script>alert("hello world)</script> ```
3. 在dom元素上使用script ``` <button onclick="save()">提交</button> ```
* 下面两段代码，说明js文件的加载顺序并解释原因
demo1:
```
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
```
demo2
```
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
```
第一个（async 修饰的） 没法判断加载顺序
第二个（defer修饰的） 先加载 jquery.js 然后是 script2.js 最后是 script3.js
* 如果浏览器不支持javascript的语法需要在页面上提示您的浏览器不支持javascript 运行 如何实现
在html 文件中写
```<noscript>您的浏览器不支持javascript 运行</noscript>```
* 列举几种js 交互方式
consol.log() document.write() alert() prompt() confirm()
* js的组成
ECMAScript DOM BOM
* JavaScript 如何与 HTML 和 CSS 协同工作
html(结构) css（样式） js(行为)
* 在外部文件中放置js脚本有什么优势
①简化HTML代码：将HTML代码中的JavaScript代码独立成外部文件，可以简化HTML文档中的代码，让HTML代码看起来更直观、清楚。
②编程模块化：可以将多个HTML文档中相同的JavaScript代码独立成外部文件，方便在多个HTML文档里引用。此时外部脚本文件相当于程序中的一个模块，如果修改该脚本文件的内容，所有引用该脚本文件的HTML文档中的部分也会被修改。
③代码易于维护：将JavaScript代码独立成外部文件，如果需要修改其中功能，只需要修改外部文件中的代码。如果所有JavaScript代码都嵌入HTML代码之中，那么即使要修改相同部分的内容，也必须修改所有HTML文件，修改的工作量较大。
④增加安全性：将JavaScript代码独立成外部文件，在查看HTML源代码时看不到JavaScript代码的内容，无形之中减少了受攻击的机会。
⑤加速浏览：浏览器会自动缓存网络中的文件。当一个外部脚本文件使用之后，浏览器会将其放入缓存中。如果另外一个HTML文档引用该外部脚本文件，浏览器就可以直接从缓存中读取该文件，而不需要从网络中下载，因此，会加快加载网页的速度。
⑥引用其他服务器上的文件的脚本文件：script元素中的src属性值是一个标准的URL，因此在HTML文档中除了可以引用当前服务器中的脚本文件，还可以引用其他服务器中的脚本文件。
主要是1，2，3
变量和常量
* 如何交换两个变量的值
* 字面量和变量的关系及区别
1.字面量是指由字母，数字等构成的字符串或者数值，它只能作为右值出现,(右值是指等号右边的值，如：int a=123这里的a为左值，123为右值。)
2.常量和变量都属于变量，只不过常量是赋过值后不能再改变的变量，而普通的变量可以再进行赋值操作。
* 变量命名规则
* 下面代码执行结果为 原因是
```
var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name);
```
结果是 Nicholas
原因（简单数据类型和复杂数据类型的区别）
1.内存的分配不同
基本数据类型存储在栈中
复杂数据类型存储在堆中，栈中存储的变量 是指向堆中的引用地址
2.访问机制不同
基本数据类型是按值访问
复杂数据类型是按引用访问
* 用一行语句声明5个变量 其中值包有一个只声明不赋值 其他分别为null 数值 字符串 布尔
数据类型
* 数据类型可以分为哪几类 有什么区别
* 如何实现功能 当浏览器不支持javascript脚本的时候 给用户在页面上提示“您的浏览器不支持javascript 脚本，请尽快升级浏览器”
* typeof 检测数据类型的返回值都有什么 分别代表什么意思
* 类型转换相关
1. 输入两个数字，点求和弹出两个数字相加的结果。
1. 输入框的默认value进行相加，结果是进行了字符串相加，而非数字相加。
2. 将value的值进行parseInt，之后再相加，就是数字相加的结果了。
如果输入12+abc，会是什么结果？ 你得到了什么结论
3.isNaN，检测输入框的内容是不是NaN。true为真，false为假。
4.写出下面的执行结果
1 + '1' 11
true + 0 1
{}+[]
4 + {}
4 + [1]
'a' + + 'b'
console.log ( [] == 0 )
console.log ( ! [] == 0 )
console.log ( [] == ! [] )
console.log ( [] == [] )
console.log({} == !{})
console.log({} == {})
1. 定义一个变量存储数据1234，分别输出个位，十位，百位，千位数字
2. 输入两个数字，相减四舍五入（.toFixed() 把保留几位小数写在括号里）
3. 从弹框中输入一个字符，判断这个字符是否是英文字母，数字，汉字（4e00-9fa5）
4. 下面代码的输出结果
console.log(10 + " cats");
console.log(10 * " cats");
Boolean([])
console.log(10 + "2");
console.log(10 - "2");
Number("3")
console.log(10 / "2");
console.log(10 * "2");
String(false)
console.log(10 * " 2");
console.log("10" * "2");
console.log(Object(undefined));
console.log(Object(null));
5. 下面代码的执行结果
var str = "abc";
str[0] = "d";
console.log(str[1]="e");
console.log(str[0]);
console.log(str);
var num = [1,2,3];
num[0] = "a";
console.log(num);
1. 下面代码的执行结果
var obj1 = {age: 22};
var obj2 = obj1;
console.log(obj1 === obj2);
obj2.age = 18;
console.log(obj1 === obj2);
2. 解释10，11结果出现的原因 并归纳基本数据类型和引用数据类型的区别
3. 下面代码的输出结果
var obj1 = {age: 22};
var obj2 = obj1;
console.log(obj1 === obj2);
obj2.age = 18;
console.log(obj1 === obj2);
console.log("1" instanceof String);
console.log(("1").constructor === String);
console.log((1).constructor === Number);
console.log((true).constructor === Boolean);
console.log(([]).constructor === Array);
console.log((function() {}).constructor === Function);
console.log(({}).constructor === Object);
console.log(1 instanceof Number);
console.log(true instanceof Boolean);
console.log([] instanceof Array);
console.log(function(){} instanceof Function);
console.log({} instanceof Object);
var test = Object.prototype.toString;
console.log(test.call("str"));
console.log(test.call(1));
console.log(test.call(true));
console.log(test.call(null));
console.log(test.call(undefined));
console.log(test.call([]));
console.log(test.call(function() {}));
console.log(test.call({}));

220
zuoye/js/运算符 - 副本.md Normal file
View File

@ -0,0 +1,220 @@
# 运算符相关
1. 两个自定义变量进行相等对比，弹出运算结果。 （分别放两个按钮 第一个弹出==的比较结果 第二个弹出 ===的比较结果）
2. 完成计算器的功能 输入两个数 输出计算结果 具体计算功能包含 加减乘除成方取余 每个计算方式分别放按钮 点击输出计算结果
3. 用js 取模实现表格的隔行换色
4. 求商取模应用于秒转时间 输入框单位为秒
思路：不管输入框获取到的数字是多少，都执行除60取分钟，除600取小时，最后取模为秒数。通过parseInt取整数
5. 判断是否为两位数
6. 写出运算符优先级
7. 计算年龄案例：输入生日输出年龄 并且判断是否能进入网吧
8. 运算符的优先级
9. 下面代码的执行结果为
```
var age = 29;
var anotherAge = --age + 2;
alert(age);
alert(anotherAge);
var time=1
var newtime=time++
console.log(time,newtime)
```
11. 下面代码的执行结果为
```
<script>
var a =1;
function test(){
alert(a);
var a = 2;
alert(a);
}
test();
alert(a);
</script>
```
12. 下面代码的执行结果为
```
var x = 7;
x += 8;
console.log(x)
var y=7
y=+8;
console.log(y)
```
13. 下面代码的执行结果为：
```
txt1 = "Hello ";
txt1 += "Kitty!";
console.log(txt1)
console.log(x = 7 + 8;)
console.log(y = "7" + 8;)
console.log(z = "Hello" + 7;)
```
14. 已知 x=5 分别写出下列语句的打印结果
x == 8
x == 5
x == "5"
x === 5
x === "5"
x != 8
x !== 5
x !== "5"
x !== 8
x > 8
x < 8
x >= 8
x <= 8
15. 已知 x=6 y=3 分别写出下列语句的打印结果
x < 10 && y > 1
x == 5 || y == 5
!(x == y)
16. 已知现有fish="23"
var cat = (fish < 18) ? "再来一筐锦鲤":"吃饱啦";
最后的cat 打印结果为
17. 写出下面的打印结果
2 < 12
2 < "12"
2 < "John"
2 > "John"
2 == "John"
"2" < "12"
"2" > "12"
"2" == "12"
18. 写出下面的打印结果
```
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
console.log(txt3)
var x = 1;
x = -x;
alert( x );
var x = 1, y = 3;
alert( y - x );
```
19. 写出下面的打印结果
```
alert( 5 % 2 );
alert( 8 % 3 );
alert( 2 ** 2 );
alert( 2 ** 3 );
alert( 2 ** 4 );
alert( 4 ** (1/2) );
alert( 8 ** (1/3) );
alert( '1' + 2 );
alert( 2 + '1' );
alert(2 + 2 + '1' );
var x = 1;
alert( +x );
var y = -2;
alert( +y );
// 转化非数字
alert( +true );
alert( +"" );
var apples = "2";
var oranges = "3";
alert( apples + oranges );
alert( Number(apples) + Number(oranges) );
```
20. 运算符优先级
21. 下面代码的执行结果为
```
let a = 1;
let b = 2;
let c = 3 - (a = b + 1);
alert( a );
alert( c );
```
```
let a, b, c;
a = b = c = 2 + 2;
alert( a );
alert( b );
alert( c );
let n = 2;
n += 5;
n *= 2;
alert( n );
let n = 2;
n *= 3 + 5;
alert( n );
```
22. 下面代码的打印结果为
```
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false
```
```
alert( 1 || 0 );
alert( null || 1 );
alert( null || 0 || 1 );
alert( undefined || null || 0 )
var firstName = "";
var lastName = "";
var nickName = "SuperCoder";
alert( firstName || lastName || nickName || "Anonymous");
```
23. 下面代码会执行嘛 为什么
```
true || alert("not printed");
false || alert("printed");
```
24. 下面代码的执行结果
```
alert( 1 && 0 );
alert( 1 && 5 );
alert( null && 5 );
alert( 0 && "no matter what" )
alert( 1 && 2 && null && 3 )
alert( 1 && 2 && 3 )
alert( !!"non-empty string" );
alert( !!null );
alert( Boolean("non-empty string") );
alert( Boolean(null) );
alert( null || 2 || undefined );
alert( alert(1) || 2 || alert(3) )
alert( alert(1) && alert(2) );
alert( null || 2 && 3 || 4 );
```
附加
游戏开始时，显示12个图像的背面，用鼠标点击其中任意一张，即可显示图像的正面，如果点击了两张，则显示出两张图像的正面。如果点击过的两张图像是相同的图像，则将图像从界面中移除

178
zuoye/js/闭包.md Normal file
View File

@ -0,0 +1,178 @@
# 闭包
1. 什么是闭包
2. 简述闭包的作用
3. 下面代码的执行结果是什么 为什么
```
function fn1() {
var name = 'iceman';
function fn2() {
console.log(name);
}
fn2();
}
fn1();
```
4. 下面代码的执行结果是什么 为什么
```
function fn1() {
var name = 'iceman';
function fn2() {
console.log(name);
}
return fn2;
}
var fn3 = fn1();
fn3();
```
5. 下面代码的执行结果是什么 为什么
```
function fn1() {
var name = 'iceman';
function fn2() {
console.log(name);
}
fn3(fn2);
}
function fn3(fn) {
fn();
}
fn1();
```
6. 下面代码的执行结果是什么 为什么
```
function waitSomeTime(msg, time) {
setTimeout(function () {
console.log(msg)
}, time);
}
waitSomeTime('hello', 1000);
```
7. 下面代码的执行结果是什么 为什么
```
for (var i = 1; i <= 10; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
```
8. 怎么才能在第7题中输出 1-10
9. 下面代码的执行结果是什么 为什么
```
function module() {
var arr = [];
function add(val) {
if (typeof val == 'number') {
arr.push(val);
}
}
function get(index) {
if (index < arr.length) {
return arr[index]
} else {
return null;
}
}
return {
add: add,
get: get
}
}
var mod1 = module();
mod1.add(1);
mod1.add(2);
mod1.add('xxx');
console.log(mod1.get(2));
```
10. 下面代码的执行结果是什么 为什么
```
var a = 10
function foo(){
console.log(a)
}
function sum() {
var a = 20
foo()
}
sum()
```
11. 下面代码的执行结果是什么 为什么
```
var n = 10
function fn(){
var n =20
function f() {
n++;
console.log(n)
}
f()
return f
}
var x = fn()
x()
x()
console.log(n)
```
12. 简述闭包形成的原因
13. 下面代码的执行结果是什么 为什么
```
var a = 0
function foo(){
var b =14
function fo(){
console.log(a, b)
}
fo()
}
foo()
```
14. 下面代码的执行结果是什么 为什么
```
var n = 10
function fn(){
var n =20
function f() {
n++;
console.log(n)
}
return f
}
var x = fn()
x()
```
15. 下面代码的执行结果是什么 为什么
```
var a = '林一一'
function foo(){
var a = 'foo'
function fo(){
console.log(a)
}
return fo
}
function f(p){
var a = 'f'
p()
}
f(foo())
```

215
zuoye/js/预编译作用域.md Normal file
View File

@ -0,0 +1,215 @@
# 预编译作用域练习
1. 下面代码的执行结果是什么为什么
```
console.log(x)
x=5
```
2. 下面代码的执行结果是什么为什么
```
console.log(x)
var x=5
```
3. 下面代码的执行结果是什么 为什么
```
var x = 5;
console.log(x+""+y)
var y=5
```
4. 下面代码的执行结果是什么 为什么
```
"use strict";
x = 3.14;
```
5. 下面代码的执行结果是什么 为什么
```
"use strict";
myFunction();
function myFunction() {
y = 3.14; // 报错 (y 未定义)
}
```
6. 为什么要使用严格模式
7. 总结严格模式的限制
8. 下面代码的执行结果是什么 为什么
```
var x = 0.1;
var y = 0.2;
var z = x + y
console.log(z==0.3)
```
9. js有几种类型的作用域 分别是啥
10. 下面代码的执行结果是什么 为什么
```
function myFunction() {
var carName = "porsche";
console.log(carName)
}
```
11. 下面代码的执行结果是什么 为什么
```
function myFunction() {
var carName = "porsche";
}
console.log(carName)
```
12. js运行三部曲是
13. 任何变量如果未经声明就赋值 此变量是
14. 一切声明的全局变量 全是 的属性
15. 分析下面代码 的预编译执行过程
```
var x = 1,
y = z = 0;
function add (n) {
return n = n + 1;
}
y = add(x);
function add (n) {
return n = n + 3;
}
z = add(x)
```
16. 函数预编译的步骤
17. 全局预编译的步骤
18. 分析下面代码的预编译执行过程
```
function fn(a){
console.log(a);
var a = 123;
console.log(a);
function a(){};
console.log(a);
var b = function(){};
console.log(b);
function d(){};
}
//调用函数
fn(1);
```
18. 分析下面代码的预编译执行过程
```
var a = 1;
console.log(a);
function test(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
}
var c = function (){
console.log("I at C function");
}
console.log(c);
test(2);
```
19. 为什么会发生变量提升
20. 下面代码的执行结果是什么 为什么
```
fun();
console.log(b);
var b = function fun(){
var a = 456;
console.log(a);
}
```
21. 下面代码的执行结果是什么 为什么
```
console.log(b);
var b = function fun(){
var a = 456;
console.log(a);
}
fun();
```
22. 什么是执行期上下文
23. js中有哪几种执行期上下文 分别介绍
24. 分析下面代码的预编译执行过程
```
global = 100;
function fn() {
console.log(global);
global = 200;
console.log(global);
var global = 300;
}
fn();
var global;
```
25. 分析下面代码 预编译执行过程
```
function test() {
console.log(b);
if (a) {
var b = 100;
}
c = 234;
console.log(c);
}
var a;
test();
a = 10;
console.log(c);
作者：前端布吉岛
链接：https://juejin.cn/post/6933756598678454280
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
```

BIN
实战项目/web前端（初级）掌握的技术.xmind
View File

Binary file not shown.