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

js 0.0

Browse Source
This commit is contained in:
asd 2021-01-28 09:06:45 +08:00
parent f230cfc37f
commit 5d39890424
18 changed files with 1380 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
csspress/demo/baifenbi.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<!-- -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 900px;
height: 600px;
background:orange;
}
.item1{
width: 40%;
height:80%;
background: paleturquoise;
float: left;
}
.item2{
width:40%;
height: 80%;
background: blue;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
</div>
</body>
</html>

76
csspress/demo/rem.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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);
</script>
<style>
*{
padding:0;
margin: 0;
}
.nav{
width:2.7rem;
height: 2.5rem;
background: skyblue;
}
</style>
</head>
<body>
<div class="nav"></div>
</body>
</html>

255
csspress/demo/rem2.html Normal file
View File

@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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);
</script>
<style>
*{
padding:0;
margin: 0;
}
body{
background-color: #F0EEEF;
}
.nav{
height: 1.375rem;
background: #DE3548;
color: white;
font-size: 0.37rem;
text-align: center;
line-height: 1.675rem;
}
.car{
height: 2.95rem;
background: white;
border-top: 1px solid white;
/* padding-top: 0.54rem;
padding-left: 0.55rem; */
box-sizing: border-box;
margin-bottom: 0.19rem;
}
.carinfo{
width: 4.28rem;
height: 0.96rem;
display: flex;
justify-content: space-between;
margin-top: 0.54rem;
margin-left: 0.55rem;
}
.left{
width: 0.96rem;
height: 0.96rem;
background: skyblue;
}
.right{
width:2.76rem;
height: 0.95rem;
border-left: 0.02rem solid #D9D9D9;
padding-left: 0.32rem;
font-size: 0.22rem;
color: #999999;
display: flex;
flex-direction: column;
justify-content: center;
}
.line{
/* width:; */
height: 0.02rem;
background: #D9D9D9;
margin-top:0.49rem;
}
.btns{
display: flex;
justify-content: space-around;
align-items: center;
height: 0.94rem;
}
.btn{
width:2.03rem;
height:0.54rem;
border:0.02rem solid #DF3348;
color: #DF3348;
line-height: 0.54rem;
text-align: center;
}
.add{
width: 7.17rem;
height: 0.82rem;
background: #E03547;
color: white;
font-size: 0.34rem;
text-align: center;
line-height: 0.82rem;
font-weight: bold;
}
.addw{
width: 100%;
background: white;
height: 1.07rem;
position: fixed;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="nav">我的车库</div>
<div class="carlist">
<div class="car">
<div class="carinfo">
<div class="left"></div>
<div class="right">
<div>江淮安驰-小公主</div>
<div>2019款2.9T 手自一体 </div>
</div>
</div>
<div class="line"></div>
<div class="btns">
<div class="btn">设为默认</div>
<div class="btn">设为默认</div>
</div>
</div>
<div class="car">
<div class="carinfo">
<div class="left"></div>
<div class="right">
<div>江淮安驰-小公主</div>
<div>2019款2.9T 手自一体 </div>
</div>
</div>
<div class="line"></div>
<div class="btns">
<div class="btn">设为默认</div>
<div class="btn">设为默认</div>
</div>
</div>
<div class="car">
<div class="carinfo">
<div class="left"></div>
<div class="right">
<div>江淮安驰-小公主</div>
<div>2019款2.9T 手自一体 </div>
</div>
</div>
<div class="line"></div>
<div class="btns">
<div class="btn">设为默认</div>
<div class="btn">设为默认</div>
</div>
</div>
<div class="car">
<div class="carinfo">
<div class="left"></div>
<div class="right">
<div>江淮安驰-小公主</div>
<div>2019款2.9T 手自一体 </div>
</div>
</div>
<div class="line"></div>
<div class="btns">
<div class="btn">设为默认</div>
<div class="btn">设为默认</div>
</div>
</div>
<div class="car">
<div class="carinfo">
<div class="left"></div>
<div class="right">
<div>江淮安驰-小公主</div>
<div>2019款2.9T 手自一体 </div>
</div>
</div>
<div class="line"></div>
<div class="btns">
<div class="btn">设为默认</div>
<div class="btn">设为默认</div>
</div>
</div>
<div class="car">
<div class="carinfo">
<div class="left"></div>
<div class="right">
<div>江淮安驰-小公主</div>
<div>2019款2.9T 手自一体 </div>
</div>
</div>
<div class="line"></div>
<div class="btns">
<div class="btn">设为默认</div>
<div class="btn">设为默认</div>
</div>
</div>
<div class="addw">
<div class="add">设为默认</div>
</div>
</div>
</body>
</html>

43
csspress/demo/zishiying1.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
body{
background: gold;
}
}
@media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
body{
background: pink;
}
}
@media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
body{
background: pink;
}
}
@media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
body{
background: blue;
}
}
@media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
body{
background:gray
}
}
</style>
</head>
<body>
</body>
</html>

50
csspress/demo/zishiying2.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0;
}
html , body{
width:100% ;
height: 100%;
}
.box{
width: 100%;
height: 60%;
border: 1px solid black;
}
.content{
width: 60px;
height: 60px;
background: pink;
margin: 30px;
}
/* @media (max-width: 780px) {
.box{
width: 600px;
}
.content{
background: skyblue;
}
}
@media (max-width: 600px) {
.box{
width: 500px;
}
.content{
background: rgb(135, 235, 202);
}
} */
</style>
</head>
<body>
<div class="box">
<!-- <div class="content"></div> -->
</div>
</body>
</html>

147
csspress/demo2/rem.html Normal file
View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.dingdan {
width: 100%;
}
body{
background: #EEEEEE;
}
.dingdanqueren {
/* width: 1.49rem; */
height: 1.37rem;
font-size: 0.37rem;
font-family: PingFang SC;
font-weight: 800;
color: #222222;
line-height: 1.37rem;
text-align: center;
background: white;
}
.dingdanxinxi{
height: 1.65rem;
display: flex;
justify-content: space-between;
border-bottom: 1px solid gray;
padding-bottom: 0.38rem;
padding-left: 0.3rem;
padding-right: 0.25rem;
background: white;
}
.tubiao{
width: 0.17rem;
height: 0.31rem;
background: blue;
margin:auto 0
}
.dizhi{
width: 5.3rem;
}
.nameandphonen{
display: flex;
justify-content: space-between;
}
</style>
<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>
</head>
<body>
<div class="dingdan">
<div class="dingdanqueren">
<p>订单确认</p>
</div>
</div>
<div class="dingdanxinxi">
<div class="dizi">
<div class="nameandphonen">
<div class="name">
<img src="" alt="">
<p>张三</p>
</div>
<div class="phonen">
<img src="" alt="">
<p>12345678910</p>
</div>
</div>
<div class="zhuzhi">
<img src="" alt="">
<p>山东省泰安市宁阳县文庙街道XX小区</p>
</div>
</div>
<div class="tubiao"></div>
</div>
<div>
</div>
<div></div>
<div></div>
<div></div>
</body>
</html>

50
csspress/demo2/zishiying2.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0;
}
html , body{
width:100% ;
height: 100%;
}
.box{
width: 100%;
height: 60%;
border: 1px solid black;
}
.content{
width: 60px;
height: 60px;
background: pink;
margin: 30px;
}
/* @media (max-width: 780px) {
.box{
width: 600px;
}
.content{
background: skyblue;
}
}
@media (max-width: 600px) {
.box{
width: 500px;
}
.content{
background: rgb(135, 235, 202);
}
} */
</style>
</head>
<body>
<div class="box">
<!-- <div class="content"></div> -->
</div>
</body>
</html>

11
git/git.md Normal file
View File

@ -0,0 +1,11 @@
# git
1. 初始化 git init
2. 查看是否绑定远程库 git remote -v
3. 绑定远程库 git remote add origin +仓库url
4. 拉取 git pull origin +分支 过程需要输入用户名和密码
5. 如需要用自己的分支 新建或者切换到自己的分支上
6. 查看更改 并提交
7. 推送 过程需要输入用户名和密码

46
js/demo/day1.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var lanzi="苹果"
// var lanzi ---第一步 变量声明 问系统要个篮子 用来放东西
// lanzi="苹果" --第二步 赋值 把苹果放到篮子里
document.write('明世隐')
var a=1,b=2,c=3,d=4,e; // 声明多个变量
document.write(a,b,c,d,e)
var no=1;
var num=no
num=3;
console.log(no,num)
var obj={name:'蔡文姬',age:20}
var obj1=obj
obj1.name='明世隐'
console.log(obj)
console.log(obj1)
//检测数据类型
console.log(typeof "king")
console.log(typeof obj) //object
console.log(typeof [1,2,3]) //array--> object
console.log(typeof function(){}) //object
console.log(Number('2AAAAA')) //NAN
console.log(Number('2')) //2
console.log('2aaaaa'+4) //2aaaaa4
console.log("4"+4) //44
console.log("4"-4) //0
console.log(true+5) //6
</script>
</head>
<body>
</body>
</html>

70
js/demo/day2.html Normal file
View File

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var a=1;
a+=2;
// a=+3
// console.log(a)
// var b=1;
// console.log(b++) //1 先执行 后增加
// console.log(b) //2
// console.log(++b) //3 先增加 后执行
// console.log(true>2)
// console.log(false>true)
// console.log(undefined ==null )
// console.log(undefined === null)
function s(){
console.log("hello world")
return false
}
function r(){
console.log("js")
return true
}
function e(){
console.log('queen')
return true
}
// q=s()||r()||e()
// q=fasle||true
// s false r true
// s hello world r js
// true
var time=1;
var date=2
df=r()&&s()&&e()
// df2=r()&&e()
// console.log(df,df2)
// console.log(time==1 && date==2)
// console.log(time==1&& date==='2')
var ad=(2>1)?1:2
// function abc(){
// console.log('abc')
// return 1
// }
// var abc=function(){
// console.log("abc1")
// return 2
// }
var abc=()=>{
console.log("abcn")
return 3
}
abc()
</script>
</head>
<body>
</body>
</html>

36
js/demo/day3-1.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=[1,2,3] //字面量
// console.log(arr[1])
// for(let i in arr){
// console.log(arr[i]) // i指代的是数组的下标
// }
arr.push(4)
// var q=arr.pop() //pop 返回的是被删除的那个元素
// console.log(arr)
// console.log(q)
arr.shift() //删除第一个元素
arr.unshift(6) //往数组首位添加元素
console.log(arr)
var str=arr.join(',')
console.log(str)
console.log(str.split(','))
// arr.splice(2,1)
arr.splice(2,2,9,0)
console.log(arr)
// splice() 3 2删除 3修改
</script>
</head>
<body>
</body>
</html>

53
js/demo/day3.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// var obj={}// 定义一个对象 字面量
var obj =new Object() // 构造函数
// var order=new Number(3)
obj.name="暖暖" //增加一个属性
obj.age=19
obj.color="pink"
obj.say=function(e){ // 增加一个方法
console.log(e)
}
console.log(obj)
obj.say("我是暖暖") //对象里面方法调用
function changeage(){
obj.age=20;
console.log(obj,"new")
}
function del(){
delete obj.age // 删除属性
console.log(obj)
}
// 自定义一个 构造函数
function Person(name,age,color){
this.name=name
this.age=age
this.color=color
this.sayhi=function(){
console.log('hi')
}
}
var nuan=new Person('暖暖',20,'pink')
console.log('we' in nuan)
console.log('name' in nuan) // in 前面一定是属性的名字
// for in 遍历对象
for(let i in nuan){
console.log(i,nuan[i]) //i 是属性名 nuan[i] 属性值
}
</script>
</head>
<body>
<button onclick="changeage()">change</button>
<button onclick="del()">del</button>
</body>
</html>

1
js/demo/url.js Normal file
View File

@ -0,0 +1 @@
document.write('蔡文姬')

112
js/kejian/day2.md Normal file
View File

@ -0,0 +1,112 @@
# 运算符
## 术语
**运算元** ——运算符应用的对象 比如说 5*2 有两个运算元 左运算元5 和 右运算元2
如果一个运算符只对应一个运算元 那么就是一元运算符 如果一个运算符 对应两个运算元 那么他就是二元运算符
## 数学运算符
* 加 +
* 减 -
* 乘 *
* 除 /
* 取余 %
### +
1. 用来做加的数学运算
2. 如果被应用于字符串 就用来字符串连接
3. 作为一元运算符的时候 确定数值正负
## 运算符优先级
下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
|运算符|优先级|
| ---- | ----|
|. [] ()|字段访问、数组下标、函数调用以及表达式分组|
|++ -- - ~ ! delete new typeof void|一元运算符、返回数据类型、对象创建、未定义值|
|* / %| 乘法、除法、取模|
|+ - +| 加法、减法、字符串连接|
|<< >> >>>|移位|
|< <= > >= instanceof|小于、小于等于、大于、大于等于、instanceof|
|== != === !==|等于、不等于、严格相等、非严格相等|
|&| 按位与|
|^| 按位异或|
|\|| 按位或|
|&&|逻辑与|
| \|\| |逻辑或|
|?:| 条件|
|=、+=、-=、*=、/=、%=、&=、\|=、^=、<、<=、>、>=、>>=| 混合赋值运算符 |
|,|逗号运算符|
## 赋值运算符 =
```=``` 是一个运算符 会返回一个值
``` x=5 ``` 的执行分为两步
把5给x
返回x的值
思考 ```let a=1; let b=2; let c=3-(a=b+1)``` 的执行过程
<details>
<summary>点击查看答案</summary>
根据运算符优先级规则，先运算()里面的a=b+1
对于 a=b+1, +的优先级大于=， 所以先运算b+1
b的值为2 所以=把b+1 也就是2+1的结果给a 并返回赋值后a的值 3
接下来，运算c=3-(...) 加减运算优先级大于赋值运算,所以 ()里运算的结果为3 所以 3-3=0
最终执行c=0 即把后面运算的结果0给c 然后 返回赋值后的c的值 0
注： 为了代码的可读性 应不要写这样的代码
</details>
### 链式赋值
```
a = b = c = 2 + 2;
```
链式赋值从右到左进行计算。首先，对最右边的表达式 2 + 2 求值，然后将其赋给左边的变量：c、b 和 a。最后，所有的变量共享一个值。
上面的代码和下面的是一样的:
```
c = 2 + 2;
b = c;
a = c;
```
## 运算同时赋值
这是把运算符和赋值两个操作的缩写形式
原来的：
```
let n = 2;
n = n + 5;
n = n * 2;
```
现在可以用+=，-+, *=, /=, %= ...来对上面的代码进行缩写
现在：
```
let n=2
n+=5
n*=2
alert(n)
```
这类运算符的优先级与普通赋值运算符的优先级相同，所以它们在大多数其他运算之后执行：
```
let n = 2;
n *= 3 + 5;
alert( n ); // 16 （右边部分先被计算，等同于 n *= 8）
```
## 自增、自减
* 自增
* 自减

250
js/kejian/javascriptday1.md Normal file
View File

@ -0,0 +1,250 @@
# javascript Day1
### 主流浏览器（内核）
| 浏览器 | 内核 |
| ------- | ------------- |
| IE | trident |
| Chrome | webkit/ blink |
| Firefox | gecko |
| Opera | presto |
| Safari | webkit |
## 简介
javascript 主要是由
- ECMAScript
- DOM
- BOM
> 其中 dom 与 bom 由 浏览器提供
> dom指的是html页面上的标签
> bom 是浏览器提供的接口
## Js 特点
- js是一种解释性语言
- js是单线程语言
单线程：同一时间只能做一件事情
## ECMAScript
ECMAScript 是一种语言规范 javascript就是基于这个规范来编写的。
使用语言的时候必须遵循这个规范来进行开发
他包括
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 对象
## DOM
文档对象模型 是由浏览器提供的一个接口 能在javascript中可以操作页面
## BOM
浏览器对象模型 是浏览器提供的一些对于浏览器与用户界面的一些接口 比如可以操作浏览器高度 宽度 与位置等等
## 如何引入js
- html 内嵌<script></script>
<script type="text/javascript></script>
- 外部引入 <script src="url"></script>
javascript 文件后缀名为 .js
为符合web标I准（w3c标准中的一项） 需要 结构，样式，行为相分离
#### 结构样式行为相分离：
结构： html
样式： css
行为：js
思考：引入js的时候，能不能用一个script 标签 里面写入src属性引入外部js 又在里面写js代码 ？
类似：
html:
```
<script src="./day1.js">
document.write("我们开始学javascript啦！")
</script>
```
day1.js
```
document.write("这是我们学js的第一天哦")
```
思考一下这样运行出来的页面上会显示什么内容
<details>
<summary>点此查看答案</summary>
<p>这是我们学js的第一天哦</p>
<p>原因： 当内嵌和外部引入同时使用的时候，只有外部引入的js会起作用</p>
</details>
## js 基本语法
### js 和 html css区别：
html 和css 严格来讲不叫编程语言 编程语言有个特点必须有变量，函数，数据结构可以进行基本运算
### 变量（varible）
概念：用于装程序中用到的数据的一个篮子
- 变量声明
- 声明，赋值分解
- 单一 var
- 命名规则
- 变量名必须以字母，_，$开头
- 变量名可以包括字母，数字，_，$开头
- 不可以用系统的关键字 ，保留字作为变量名
变量声明赋值过程
1. 跟系统要一个篮子 声明
2. 把东西放到篮子里 赋值
```
var a; 声明
a=100
```
同时声明多个变量：
```
var a=1,
b=2,
c=3;
```
## 数据类型：
#### 原始值
Number String Boolean undefined null
#### 引用值
object (array 和 function 是 object 的实例 不算是单独的数据类型)
**根据数据类型的的不同，有的变量存储在栈中，有的存储在堆中。**
- 原始变量类型及他们的值存储在栈中，当把一个原始变量传递给另一个原始变量时，是把一个一段栈空间的内容复制到另一段栈空间，这两个原始值互相不影响。
- 引用值是把引用变量的名称存储在栈中，但是把其实际对象存在堆中，且存在一个指针有变量名指向存储在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针，此时，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变;但若不通过方法，而是通过重新赋值 此时 相当于 重新开了一段内存 该值的原指针改变 ，则另外一个 值 不会随他的改变而改变。
　总结：
　　Number、Stirng、Boolean、Null、Underfined这些基本数据类型，他们的值直接保存在栈中;
　　Object、（Function、Array、Date、RegExp）这些引用类型，他们的引用变量储存在栈中，通过指针指向储存在堆中的实际对象
### 检测数据类型以及数据类型的转换
#### 检测数据类型
**typeof** 返回数据类型 ，返回值包括 number boolean symbol string undefined function
其中 原始值数据类型直接返回， 引用值除了function 返回的是function 其他的引用值返回的是 object
**instanceof** A instanceof B 用来判断 A是否为B的实例
例：
```
var arr=[1,2,3]
console.log(arr instanceof Array)
```
Object.prototype.toString.call(要检测的值)
toString() 是Object的原型方法，调用该方法会返回当前对象的[[class]] 这是一个内部属性 格式为 [object XXX] 其中 XXX就是检测目标的数据类型
```
Object.prototype.toString.call(1234) //"[object Number]"
Object.prototype.toString.call('') //"[object String]"
Object.prototype.toString.call([9,8,4]) // "[object Array]"
```
数据类型转换：
数据转换分为显示转换和隐式转换
- ☀️显示转换：常见的️显式转换方法有：Boolean()、Number()、String()等等
- 🌛隐式转换：常见的隐式转换方法：四则运算(加减乘除) 、== 、判断语句(if)等
字符串转数字
- Number()
- parseInt()
- parseFloat
- +‘...字符串内容’
- +’234‘ ==》 234
Number 转String
- toString()
- +'' 加空字符串
Number 转Boolean
除了 0和NAN 对应的是false 其他的数值对应的都是true
Boolean 数据转换
除了下面6个转完是 false 其他的都是true
- undefined
- null
- false
- 0
- NAN

4
js/kejian/javascriptday2.md Normal file
View File

@ -0,0 +1,4 @@
# javascript Day2
## 运算符

140
js/note/day1.html Normal file
View File

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
1.五大主流浏览器 以及内核
<table>
<tr>
<th>浏览器</th>
<th>内核</th>
</tr>
<tr>
<td>Ie</td>
<td>trident</td>
</tr>
<tr>
<td>Firefox</td>
<td>gecko</td>
</tr>
<tr>
<td>Chrome</td>
<td>Webkit/blink</td>
</tr>
<tr>
<td>Safari</td>
<td>Webkit</td>
</tr>
<tr>
<td>Opera</td>
<td>presto</td>
</tr>
</table>
</p>
<div>
2.js 特点
<ul>
<li>是一种解释性语言 写完不需要编译 可以直接运行</li>
<li>是单线程的 单线程 同一个时间只能做一件事</li>
</ul>
</div>
<div>
3.js 构成
<ul>
<li>ECMAscript 语言规范</li>
<li>dom 节点树 对节点操作</li>
<li>bom 浏览器暴露的接口 window.location.href</li>
</ul>
</div>
<div>
4.规范：
<p>结构 样式 行为相分离</p>
<P>引入方式上 尽量选择外部引入</P>
<table>
<tr>
<td>结构</td>
<td>HTML</td>
</tr>
<tr>
<td>样式</td>
<td>CSS</td>
</tr>
<tr>
<td>行为</td>
<td>JS</td>
</tr>
</table>
</div>
<hr/>
<div>
5.js 引入
（一） html 文件内嵌
<script>
// js代码
</script>
（二） 外部引入
<script src="url"></script>
<script src="url">
document.write("明世隐")
</script>
<!--
url.js
document.write('蔡文姬')
-->
<p>
<b>总结：如果同时使用内嵌和外部引入的方式引用 js 那么只有外部引入的方式能起作用</b>
</p>
</div>
<div>
6. 变量和常量
区别：变量的值能改变 常量的值不能改变
<p>
6-1. 变量（varible）
声明变量 var
var a=1;
var a;
a=1
<p>
声明多个变量
var a=1,b=2,c=3;
</p>
</p>
</div>
<div>
7.数据类型
原始值
number
string
undefined
boolean
null
<p></p>
引用值
object
<p>原始值和引用值的区别： 原始值在栈里 如果赋给另一个变量 另一个变量的值发生了改变 这个变量值不变</p>
<p>引用值在堆里 如果赋给另一个变量 另一个变量的值发生了改变 这个变量值也会变</p>
</div>
<div>
String() toString() 把目标转成字符串
Number() 把目标转成数字
parseInt() 转成整数
parseFloat() 转成小数
</div>
</body>
</html>

0
js/note/day2.html Normal file
View File