1.变量
1.1.我们使用var来定义一个变量，var就是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，我们可以给变量任意的取名字。
图片.png1.2.变量的命名规范
只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。下列的单词，叫做保留字，就是说不允许当做变量名，不用记：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、gotot、 implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile,大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。
2.变量的类型
2.1变量里面能够存储数字、字符串。变量会自动的根据存储的东西类型不同，来决定自己的类型。也就是说变量有类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = 100; //存放了一个数字
var b = "传智播客"; //存放了一个字符串
console.log(a); //输出变量a
console.log(b); //输出变量b
</script>
</body>
</html>
2.2.数值型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = 100; //类型都是number
var b = 234234234324324324; //类型都是number
var c = 3.234234234324324; //类型都是number
var d = -23423432432432432; //类型都是number
var e = -34.3423423432; //类型都是number
var f = 0.324234234; //类型都是number
console.log(typeof a); // number
console.log(typeof b); // number
console.log(typeof c); // number
console.log(typeof d); // number
console.log(typeof e); // number
console.log(typeof f); // number
</script>
</body>
</html>
2.3.字符串型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = "This is a pig"; //有引号，字符串
var b = "传智播客"; //有引号，字符串
var c = "123123"; //有引号，字符串
var d = "哈"; //有引号，字符串
var e = ""; //有引号，字符串
console.log(typeof a); // string
console.log(typeof b); // string
console.log(typeof c); // string
console.log(typeof d); // string
console.log(typeof e); // string
</script>
</body>
</html>
2.4.连字符和加号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
</script>
</body>
</html>
2.5.js中boolean值得特殊用法
########一个字符型号的变量，如果不为空串就可以当做true值使用，否则就是false值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var username="1";
var pwd="1";
if(username&&pwd){
console.log("1");
}else{
console.log("2");
}
</script>
</body>
</html>
3.变量值的传递+变量的声明类型
3.1.变量值的传递
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// var a = 1; //定义a，并且赋值1
// var b = 2; //定义b，并且赋值2
// a = b; //就是将b的值给a，b的值不变。所以a就是2了，b是2不变。
// console.log(a); //2
// console.log(b); //2
// var a = 1;
// var b = 2;
// b = a; //将a的值给b，a的值不变，所以b就是1了，a还是1不变
// console.log(a);
// console.log(b);
// var a = 1; //定义a变量，值是1
// var b = 2; //定义b变量，值是2
// a = b + 3; //将5赋值给a，b的值还是2。
// b = a + 4; //将9赋值给b，a的值还是5
// console.log(a); //5
// console.log(b); //9
// //a b c
// var a = 1; //1
// var b = 2; //1 2
// var c = 3; //1 2 3
// a = b + c; //5 2 3
// b = c - a; //5 -2 3
// c = a * b; //5 -2 -10
// console.log(a);
// console.log(b);
// console.log(c);
// //a b c
// var a = 1;
// var b = 2;
// var c = 3; //1 2 3
// a = a + b; //3 2 3
// b = b + a; //3 5 3
// c = c + b; //3 5 8
// console.log(a); //3
// console.log(b); //5
// console.log(c); //8
// //a b
// var a = "1";
// var b = 2; //"1" 2
// a = a + b; //"12" 2
// b = b + a; //"12" "212"
// console.log(a); //输出12
// console.log(b); //输出212
// var a = "1+2"; //字符串
// var b = 3;
// a = a + b; //拼接
//console.log(a); //输出1+23
//a b
var a = "1";
var b = 2;
a = b + a; //"21" 2
b = b + a; //"21" "221"
console.log(a); //21
console.log(b) //221
</script>
</body>
</html>
3.2.变量声明的的三种类型
在JavaScript中有三种声明变量的方式：var、let、const。
var：声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。
for(var i=0;i<=1000;i++)
{ var sum=0;
sum+=i;
}
alert(sum);
声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果
let：声明块级变量，即局部变量。 在上面的例子中，跳出for循环，再使用sum变量就会报错
注意：必须声明'use strict'后才能使用let声明变量否则浏览并不能显示结果
const：用于声明常量，也具有块级作用域 const PI=3.14;
4.运算符和表达式
4.1.数学运算符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// var a = 1 + 2 * 3;
// console.log(a) //先乘除后加减
// var a = 12 / 2 * 3 + 2;
// console.log(a);
// var a = (1 + 2) * 3 + 3 * 5
// console.log(a);
// var a = ((1 + 2) * 3 + 3) * 5
// console.log(a);
var a = (6 + ((1 + 2) * 3 + 3)) * 5
console.log(a);
var a = (1 + 2) % 4 * 3 + 5 //3*3+5
console.log(a); //14
</script>
</body>
</html>
4.2.乘方和开根号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = Math.pow(3,4);
console.log(a);
var a = Math.pow(3,4*5);
console.log(a);
var a = Math.pow(3,Math.pow(2,2));
console.log(a);
var a = Math.pow(Math.pow(3,2),4);
console.log(a);
var a = Math.sqrt(81);
console.log(a);
</script>
</body>
</html>
5.变量格式转换
5.1.用户的输入,无论怎么样，得到的都是字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = prompt("请输入第1个数字");
var b = prompt("请输入第2个数字");
var result = a + b;
alert(result);
</script>
</body>
</html>
图片.png
图片.png
5.2.字符串→数字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = "123"; //字符串
var b = parseInt(a); //转为了数字
console.log(b); //输出数字
console.log(typeof b); //输出类型
console.log(parseInt("365天每天都爱你10000次"));
console.log(parseInt(5.8));
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
var a = parseInt(5.8 + 4.7);
console.log(a);
</script>
</body>
</html>
图片.png
6.Js隐藏样式
Display: none display: block ; 显示的意思
Visibility: hidden; visibility: visible 显示的意思
Display 隐藏不占位置
Visibility:hidden 隐藏占有位置 停职留心
Overflow:hidden; 隐藏超出的部分。
7.Js入口函数
window.onload = function(){
内部放js
}
这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。
就是说等 页面的结构 样式 节点等加载完毕,所以，这句话也可以页面的顶端即可:
<script>
window.onload = function(){
/*要做事，先找人*/
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic3 = document.getElementById("pic3");
pic1.onclick = function(){
document.body.style.backgroundImage = "url(images/1.jpg)";
}
pic2.onclick = function(){
document.body.style.backgroundImage = "url(images/2.jpg)";
}
pic3.onclick = function(){
document.body.style.backgroundImage = "url(images/3.jpg)";
}
}
</script>
8.模态框
图片.png#mask {
width: 100%;
height: 100%;
background:rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: none;
}
#box {
display: none;
width: 400px;
height: 250px;
background-color: #fff;
position: fixed;
top:50%;
left:50%;
margin:-125px 0 0 -200px;
z-index: 1000;
}
#box span {
position: absolute;
top:10px;
right:10px;
width:15px;
height:15px;
font-size:15px;
cursor: pointer;
}
<script type="text/javascript">
window.onload = function(){
//事件源: 登录
var login = document.getElementById("login");
var mask = document.getElementById("mask");
var box = document.getElementById("box");
login.onclick = function(){
// 当我们点击登录，会弹出灰色的大盒子和白色的小盒子
mask.style.display = "block";
box.style.display = "block";
}
// 事件源 span x
var close_all = document.getElementById("close_all");
close_all.onclick = function(){
mask.style.display = 'none';
box.style.display = "none";
}
var jd_close = document.getElementById("jd_close"); // 得到a
var topBanner = document.getElementById("top_banner"); // 得到大的
//事件源.事件 = function(){}
jd_close.onclick = function(){
topBanner.style.display = "none";
}
}
</script>