一、JavaScript
简称：JS
一门基于对象和事件驱动的脚本语言
布兰登 艾奇 JavaScript--->3天
JavaScript分成三部分：
1.ECMAJscript
2.DOM浏览器对象模型，这里提供了所有浏览器的API接口
3.BOM文档对象模型，这里提供了所有文档的API接口
基本使用：
1.JavaScript的解析器， 内置到了浏览器里面，所以我们不需要单独安装解析器，直接安装浏览器
python：编译型（开发者代码编译--->编译成一个文件，去执行）
Java：解析型(开发者代码--->（解析到）内存)
2.JavaScript是解析型脚本语言，弱类型 3.JavaScript类似css，有三种引入网页的方式 a.嵌入式<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
alert(888)
</script>
</body>
</html>
b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="test/index.js">
alert("不要再便携src属性的script标签中写代码，浏览器会忽略")
</script>
</body>
</html>
<!DOCTYPE html>注：typescript/coffiscript 通过JavaScript演变而来 二、ECMAJscript 1.变量：一个数据在内存中的代表地址
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 onclick="alert(1)">大标题</h1>
</body>
</html>
//单行注释
/*
多行注释
*/
//js中申明变量的方式var mobile = "123123123" 变量的命名规则参考python： 1.不能是关键字/保留字 2.必须是由数字，字母和下划线，并且不能以数字开头 var 3m=300
//当变量第二次赋值，就不是声明变量，而是修改变量的值
3.变量名必须清晰易懂，能代表这个数据
变量代表的就是数据，每一种数据都有不同的作用和用途，
根据不同的作用和用途可以把js中数据分为7种不同类型
2.数据类型
a.数值型[Number] 整数，浮点数
NaN 代表一个非数字[Not A Number]
b.字符串[string] 文本
c.布尔类型[Boolean] true，false
d.数组[Array] 代表一串类型一致的数据
e.对象[Object] 代表就是一个事物的相关数据
f.未知类型[undefine]
g.空类型[null]
typeof 关键字，作用是可以识别后面的变量数据类型
【数值型】
var num=100
alert(typeof num) //number 数值
var num=3.14
alert(typeof num) //number 数值
var num=3.14*100
alert(typeof num)
var num="变量" *3
alert(num) //NaN 当使用数值和非数值进行运算的时候，就会用到day14
alert(typeof num) //NaN 属于number
【字符串】
//字符串，一串文本字符，主要用于代表一段不需要进行任何操作的内容
//字符串一共有三种不同的格式：
/* //1.单行字符串，两端使用单引号圈起来
var str='单引号字符串'
alert(str)
//2.单行字符串，两端使用双引号圈起来
var str2="双引号字符串"
alert(str2)
alert(typeof str2)*/
//3.文档字符串，使用反引号(``)圈起来
var str3=`文档字符串，我可以换行
多行使用文档字符串
`
alert(str3)
//文档字符串里面还可以输出变量,单行字符串内部不能嵌入输出变量
var mobile='134565767'
var str4=`my phonenumber:${mobile}`
alert(str4)
//布尔值 boolean
var boo3=true
alert(boo3)
alert(typeof boo3)
var boo2=false
alert(boo2)
alert(typeof boo2)
//数组
//数组两种声明方式
//1。通过 new Array(成员1,成员2.....)
var arr1=new Array("apple","balana","bear")
alert(arr1)
alert(typeof arr1) //数组的数据类型=对象object
//2。通过中括号进行声明[成员1,成员2.....]
var arr2=["apple2","balana2","bear2"]
alert(arr2)
alert(typeof arr2)
//获取数组中的成员，可以勇敢下标索引来进行获取
//数组中的成员索引，从左往右逐一递增，从0开始
alert(arr2[2])
【对象】
//对象 object
//对象有属性和方法[属性是变量，方法是函数]
//1。通过 new object 来创建一个空对象，然后给空对象设置属性和方法
var obj1=new Object()
console.log(obj1) //表示在终端下面输出变量的值
//可以给对象设置属性
obj1.name='xiaoming'
console.log(obj1)
//可以对象的属性值
obj1.name='小米'
console.log(obj1)
//可以对象的方法
obj1.say=function () {
alert("对象的方法")
}
//执行对象的方法
obj1.say()
//2。通过花括号来创建对象，这种对象我们一半称之为json对象
var obj2={
"name":"xiaogang",
"age":23,
"say":function () {
alert("小刚说话了！")
}
}
console.log(obj2)
//读取对象的属性值
console.log(obj2)
console.log(obj2.name)
console.log(obj2.say())
【未定义和空类型】
//未定义类型
//1。当使用了一个没有定义的变量,这个变量的类型就是undefined
// console.log(num) 无法输出值
//2。创建了一个变量，但是没有给变量设置明确的值
var num2
console.log(num2) //undefined
console.log(typeof num2) //undefined
//3。当给一个变量明确赋值为undefined，该变量的类型就是undefined
var num4=undefined
console.log(num4) undefined
console.log(typeof num4) undefined
//4。当一个变量被删除以后，变量类型就是undefined ----有争议[delete使用]
var num1=100
console.log(num1)
console.log(typeof num1)
delete num1
console.log(num1)
console.log(typeof num1)
//空类型 null
//1。当一个变量被明确赋值为null，则类型就是null
var num2=null
console.log(num2) //null
console.log(typeof num2) //object
3.运算符
//1.算术运算符
//+-*/ %
/*var num1=10,num2=4
console.log(num1 % num2)
//计算机中小数的运算都是最近似值的运算，没有绝对的结果，很多数值在处理的过程中，一定要注意的就是检查值是否正常
var num3=7.1,num4=0.8
console.log(num3 + num4) */ //丢失精度：7.8999999999999995
//2.比较运算符
//> < >= <= == ===
//=== 全等于，判断两边的变量或者数据是否值相等并且数据类型一致
//== 等于，判断两边的变量或者数据是否值相等
var num5=100,num6="100",num7=50 //当一个字符串里面全都有数字构成，这种我们称之为"数字字符串"
console.log(num5==num6) //true 表示相等
console.log(num5==num7) //false 表示不相等
console.log(num5===num6) //false,类型不一样
console.log(num5===100) //true
//一个等号，不是判断，是赋值，指代是吧右边的数据或者变量，在接下来的程序中可以使用左边的变量来代表它
//3.赋值运算符
// =
// +=
// -=
// *=
// /=
// %=
var num8=5
num8 += 10 //var num8=num8+10
console.log(num8) //15
var num9=10 //var num9=num9 % 3
num9 %= 3
console.log(num9) //1
//4.逻辑运算符
//当出现对歌判断或者比较的时候，希望这几个判断条件进行关联，就可以使用逻辑运算符来
//and && 判断两边的表达式的运算结果是否是真
//or ?? 判断两边的表达式的运算结果是否又一个为真
//not ! 判断两边的表达式的运算结果进行取反
/* var test1=true
var test2=true
console.log(test1 && test2) //true
console.log(test1 && test2 &&false) //false
console.log(test1 || false ||false) //true
console.log(false ||false) //false
console.log(!test1) //false
console.log(!false) //true
//5.高级用法
//使用 && 和 || 在某种特殊情况下，出现短路现象
//使用 && 出现短路条件是：左边的条件是true，程序会吧右边的表达式直接结果返回
var test3=100
var test=true
var test4=test && test3
console.log(test4) //100
//使用 || 出现短路现象条件是：左边的条件是false，程序会直接结果返回
var test5=100
var test7=false
var test6=test7 || test5
console.log(test6) //100
//查看数据的布尔性
//可以使用 ！ 对数据进行布尔值转换
var test8=10
console.log(!!test8) //true
console.log(!!0) //false
console.log(!!"") //false
console.log(!!-1) //true
console.log(!!null) //false
console.log(!!undefined) */ //false
//在运算符中，如果2个字符串相减或者字符串和别的数据类型相减，则默认值=字符串
var ret1='str'+100
console.log(ret1) //str100
var ret2=1+true //2
console.log(ret2) //数字和布尔值相加，把true当成1，false当成0
var ret3='str'+false
console.log(ret3) //strfalse
//特殊的赋值符号，在js中叫自增自减运算符
//++ 在原来的数据基础上加1，用法：a++ 和 ++a
//-- 在原来的数据基础上减1，用法：a-- 和 --a
var num1=10
console.log(++num1) //11
num2=8
console.log(num2++) //8
console.log(num2) //9
//三元表达式
// 条件?结果1:结果2
//条件为true，则表达式的结果为结果1
//条件为false，则表达式的结果为结果2
var ret2=15
ret3=ret2>10?"ret2大于10":"ret2小于等于10"
console.log(ret3)
ret4=ret2%2==0?"ret2为偶数":"ret2为基数"
console.log(ret4)
//运算符中，有多种不同的运算符写在一起的时候，要考虑运算符的优先级
4.数据类型
var ret1=100+""
console.log(ret1)
console.log(typeof ret1)
var ret2=ret1+20
console.log(ret2) //10020
// javascript 是一门弱类型语言
// 这种语言的特征就是：会根据当前语句所在的环境通过改变自身类型来导致改变运算的结果
var ret3=2019+"-"+10+"-"+15
console.log(ret3) //2019-10-15
var ret4="100"-5 //解析器执行的时候，会把100自动转换成数字
console.log(ret4) //95
// JavaScript 也提供了强制转换类型的方法
// 通过基本类型函数来转成不同的数据类型
// Number(参数) 表示把参数转成数值
// boolean(参数) 表示把参数转成布尔值
// string(参数) 表示把参数转成字符串
var ret5=100
var ret6=Boolean(ret5)
console.log(ret6) //true
console.log(typeof ret6) //boolean
var ret5=100
var ret6=String(ret5)
console.log(ret6) //100
console.log(typeof ret6) //string
var ret7="100kg"
console.log(Number(ret7)) //NaN
//把数值转成整数parseInt(参数)
//把数值转成小数parseFloat(参数)
var ret8="3.14"
var ret9=parseInt(ret8)
console.log(ret9) //3
console.log(typeof ret9) //number
var ret10=parseFloat(ret8)
console.log(ret10) //3.14
console.log(typeof ret10) //number
//把一个字符串减去0，也可以实现转换成数据类型的
var ret11=new Date()
console.log(ret11) //Sat Nov 30 2019 19:56:41 GMT+0800 (中国标准时间)
console.log(ret11-0) //1575115001750 时间戳
5.三大流出控制语句
//判断逻辑语句 if.. if...else.. if...else if...else switch...case...case
//中断语句 break continue
//循环语句 for... while....
//代码1
var ret=100
if(ret<50){
//条件为true，代码会被执行
console.log("ret<50!")
}
//代码2
var ret=100
if(ret<50){
//条件为false，代码会被执行
console.log("ret<50!")
}else{
//条件为true，代码会被执行
console.log("ret>50!")
}
//判断今天是星期几（if...else if...else）
var date=new Date().getDay()
console.log(date)
if(date==0){
console.log("今天是周日")
}else if(date==1){
console.log("今天是周一")
}else if(date==2){
console.log("今天是周二")
}else if(date==3){
console.log("今天是周三")
}else if(date==4){
console.log("今天是周四")
}else if(date==5){
console.log("今天是周五")
}else{
console.log("今天是周六")
}
switch (date) {
case 0:
console.log("今天是周日")
break
case 1:
console.log("今天是周一")
break
case 2:
console.log("今天是周二")
break
case 3:
console.log("今天是周三")
break
case 4:
console.log("今天是周四")
break
case 5:
console.log("今天是周五")
break
case 6:
console.log("今天是周六")
break
}
// 循环语句
/* while(条件){
// 条件为真的时候,执行这里的代码
}*/
//代码1
// var num = 1
// while(num<10){
// console.log("循环里面的代码被执行了")
// console.log(num)
// // 让条件发生变化
// num++
// }
//代码2
// var num = 1
// while(num<10){
// console.log("循环里面的代码被执行了")
// console.log(num)
// // 让条件发生变化
// num+=2 // 条件自增量
// }
/*
for(循环初始化;循环的判断条件;条件自增量){
// 循环里面的代码被执行了
}
*/
// for(var num = 1; num<10; num+=2){
// console.log("循环里面的代码被执行了")
// console.log(num)
// }
// for还可以用于遍历输出数组成员[这里的用法和python里面几乎一样]
// var arr2 = ["广州","深圳","桂林","韶关"]
// for(index in arr2){ // index 是我们自定义的变量，代表的是循环中每一个成员的下标索引
// console.log(index,arr2[index])
// }
//* 行号*2-1
//***
//*****
var max=3
for(var i=1;i<=max;i++){
str="*"
for(var k=1;k=i*2-1;k++){
str+="*"
}
console.log(str)
}
6.函数，就是一段 具有功能性的代码段
/*
* 函数的声明有三种：
* 1。普通函数
* function 函数吗(参数1,参数2....,){
* 函数代码段
* return "函数结果"
* }
* 2。匿名函数
* var 变量名=function(参数1,参数2....,){
* 函数代码段
* return "函数结果"
* }
* 3。匿名函数[箭头函数]
* var 变量名(参数1,参数2....,)=>{
* 函数代码段
* return "函数结果"
* }
*/
//调用函数，不管上面三种的声明方式不同，通用方式是一模一样的
// var 变量名=(参数1,参数2....,)
/*function show() {
alert("函数内部的代码")
}
show()*/
// var show = function() {
// alert("函数内部的代码")
// }
var show = ()=> {
alert("函数内部的代码");
}
7.作用域
作用域：指代一个变量从声明到被内存回收这段声明周期里的使用有效范围
变量根据声明分为两种：
全局变量：使用var关键字或者不使用var直接声明的变量就是全局变量
全局变量的使用范围：全局通用
局部变量：在函数、对象方法，语句中使用let声明的就是局部变量
局部变量：只能在当前函数，对象方法，语句执行过程中使用，或者他们的子语句中
var num1=200
num2=100
function func(){
console.log(`函数中：num1=${num1}`)
console.log(`函数中：num2=${num2}`)
num1+=100
}
func()
console.log(`num1=${num1}`)
console.log(`num2=${num2}`)*/
function func() {
let num1=100;
console.log(`函数中：num1=${num1}`)
function func2(){
//函数的子语句中可以使用
console.log(`函数func2中：num1=${num1}`)
}
func2()
}
func()
console.log(`函数中：num1=${num1}`) //num1 is not defined
for(let i=1;i<=5;i++){
console.log(i)
}
//闭合函数/入口函数，让程序处于一个局部范围内
(function() {
var num=200
}
)()
// console.log(num) //num is not defined
8.BOM
BOM：browser object model 浏览器对象模型
console.log(window) //当前浏览器的页面窗口
console.log(window.innerHeight) //窗口高度
console.log(window.innerWidth) //窗口宽度
console.log(window.open("http://www.baidu.com"))
//获取地址栏对象
console.log(window.location.href) //window 可省略，后面的直接省略
console.log(location)
console.log(location.search)
console.log(location.host)
console.log(location.hostname)
console.log(location.port)
// location 一些方法给我们
// location.assign("新网页地址")
// location.assign("http://www.baidu.com")
//刷新当前页面
// location.reload()
//浏览器对象
console.log(navigator)
console.log(navigator.appCodeName) //浏览器内核信息
浏览器历史对象
console.log(history)
console.log(history.length) //当前浏览器访问页面数量
console.log(history.back()) //返回上一页
console.log(history.forward()) //返回下一页
console.log(history.go(1)) //参数为正数，则表示前往指定数量的页面，如果参数为负数，则表示返回指定数量的页面
window下面还提供来定时器，让我们可以设置定时执行指定函数的代码
定时多次 var 定时器序号= setInterval(函数名，间隔时间(毫秒))
定时一次 var 定时器序号= setTimeout(函数名，间隔时间(毫秒))
取消定时器
clearInterval(定时器序号)
clearTimeout(定时器序号)
function func() {
alert(1)
}
setTimeout(func,5000)
function func2() {
let date=new Date()
alert(date-0)
}
setInterval(func2,2000)
//定时器的第一个参数除了写函数名以外，也可以写匿名函数
var timer=10
var t=setInterval(()=>{
if(timer<1){
location.href="http://www.baidu.com"
// alert("time is on")
clearInterval(t) //取消关闭定时器
}else {
timer--;
console.log(timer)
}
},1000)
9.DOM document object model文档对象型
//提供了一系列操作文档的方法和属性
// console.log(document)
// document.write("<h1>大标题</h1>")
//提供六种直接操作元素的方式
1.通过元素的id属性获取元素,id只出现一次
var box=document.getElementById("box");
console.log(box)
//修改元素内容
box.innerHTML="hello"
//修改元素的css样式
box.style.backgroundColor="green"
box.style.color="#fff"
box.style.fontSize="22px"
2.通过元素的class属性获取元素,返回值是一个元素的集合[类似数组的对象，我们可以使用数组的方式操作]，class出现多次，所以用Elements
var box_list=document.getElementsByClassName("p1");
//获取集合中的成员
var box2=box_list[0];
console.log(box_list);
console.log(box2);
box2.style.backgroundColor="green";
3.通过元素的标签名tagName来获取元素，返回值是一个元素的集合
var box_list=document.getElementsByTagName("div");
console.log(box_list);
var box3=box_list[0];
console.log(box3);
box3.style.backgroundColor="orange"
4.通过元素的标签名name来获取元素，返回值是多个元素的集合[标签里面编写name属性一般只是表单里面的标签]
var box_list=document.getElementsByName("de");
console.log(box_list);
var box4=box_list[0];
console.log(box4);
box4.style.backgroundColor="orange"
5.通过document的子方法querySelector()来获取一个指定css选择符的元素
var box5=document.querySelector("#box");
console.log(box5);
box5.style.backgroundColor="orange"
6.通过document的子方法querySelectorAll()来获取多个css选择符的元素,返回值是多个元素的集合
var box_list=document.querySelectorAll(".p1");
console.log(box_list);
for (index in box_list){
console.log(box_list[index]);
box_list[index].style.backgroundColor="gray"
box_list[index].style.marginLeft="30px"
box_list[index].style.marginTop="30px"
box_list[index].style.width="150px"
box_list[index].style.height="150px"
}
10.事件[event]使用dom下面的一部分
所谓的事件：用户和浏览器之间进行的一次交互，例如用户点击了一下鼠标，刷新页面等
常用事件：
窗口事件
window.onload=function () {//页面加载
//事件触发时，执行的代码
alert("页面加载完成了！")
}
window.onmousewheel=function(){
console.log("鼠标滚轮了！")
}
// window.onclose
//鼠标事件
onmousewheel 鼠标滚轮事件
onclick 鼠标点击
onmouseover 鼠标浮动
onmouseout 鼠标移开
onmousedown 鼠标按下
onmouseup 鼠标松开
//键盘事件
onkeyup 键盘按键松开
onkeydown 键盘按键按下
//表单事件
onsubmit 表单事件
onblur 表单元素失去焦点
onfocus 表单元素获取焦点
onchange 表单元素值改变
onselect 表单下拉框选择事件