初识JavaScript
1.js是JavaScript的缩写，是一门脚本语言，专门用来负责网页上的行为，（可以直接写到网页中）
2.在哪儿写js代码
(1)可以写在script标签中（理论上script标签可以放到HTML文件中的任何位置,实际开发的时候一般放在head或者body中）
(2)写在标签的事件属性中（例如：onelick）
(3)可以写在html外部的js文件中（.js）3.js在网页中能做什么事情
(1)在网页的不同的位置插入html代码
(2)修改某个标签的内容
(3)修改标签的样式
注意：一个HTML中，可以在多个位置插入script标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--导入外部的js文件
(一个html中可以在多个位置插入script标签)-->
<script src="index.js"></script>
<script src="01-js基础语法.js"></script>
<script src="02-声明变量.js"></script>
<script src="03-运算符.js"></script>
<script type="text/javascript">
//在script中写js代码（注释是双斜杠）
window.alert('你好js')
</script>
</head>
<body>
<h1 id="hh">君不见黄河之水天上来</h1>
<button onclick="document.getElementById('hh').innerHTML='窗前明月光'">点击按钮</button>
<button onclick="window.alert('按钮被点击')">点击按钮</button>
</body>
</html>
效果如下：
js基础语法
1、注释
1.js中的注释
//这是单行注释
/这是多行注释/
2.语句
一条语句结束，需要加分号；(现在的js版本可以不用写)
一行写多条语句必须使用分号;隔开
3.js中没有缩进问题，用{}表示一个块
4.基本数据类型(首字母大写)--8个
Number(数字)
String(字符串)
Boolean(布尔)
Array(数组)---列表
Object(对象)---字典
null ---空
undefined---未定义
Function(函数)
5.字面量
(1)数字字面量
100;
10.22;
3e5;
(2)字符串的字面量
'aaa';"bbb"
(3)布尔字面量
true，false
(4）数组字面量
[1,2,'奥倒计时',true]
(5)对象的字面量
对象的key值,又是属性,不可以加引号
var dict={a:'rw',b:'wef'};
console.log(dict.a,dict.b)
（6）标识符
<1>标识符是用来给函数命名的
<2>由字母,数字,和下划线组成,数字不能开头($也可以)
<3>不能是关键字(var for )
<4>大小写敏感,y和Y不一样
<5>规范:(1)见名知意
声明变量
在js中可以通过声明变量来保存数据
1.语法
var 变量名；
var 变量名=初值；
<1>var：是关键字
<2>变量名：标识符，命名时不能随意使用_或者$开头
<3>驼峰式命名规则（第一个单词首字母小写，后面每个单词的首字母大写）
(1)声明变量
var userName
(2)给变量赋值
userName='dog'
console.log(userName) //结果：dog
var score=100
console.log(score) //结果：100
（3）同时声明多个变量
var name1,age,sex;
var name1="11",age1=18,sex;
(4)一个变量可以存储任意类型的值，声明变量的时候，变量没有赋值，默认是nudefined
var a="abc"
a=100
运算符
1.数学运算符：+，-，*，/,%,++,--（JS无整除//操作）
(1)+,-,*,%与数学中的求和，求差，求乘积,取余是一样的)
var a=1+1 //2
var b=2-1 //1
var c=1*3 //3
var d=7%2 //1
(2) / :除法与数学里面的除是一样的(js里面没有整除的操作)
var e=5/2
console.log(e)
(3)++,--(单目运算符)
语法：
变量++（先赋值，在自加），
变量--(先赋值，再自减)；
++变量（先自加，再赋值），
--变量（先自减，在赋值）
++:自加1
--：自减1
var a1=10
var b1=10
a1++
++b1
console.log(a1,b1) //11,11
a1--
--b1
console.log(a1,b1) //10,10
var c1=a1++ //++或者--写在后面的时候，先赋值，再自加或自减
var c2=++b1 //++或者是--写在前面的时候，先自加或自减，在赋值
console.log(c1,c2) //10,11
2.比较运算符：>,<,==（相等）,!=,>=,<=,===（完全相等）,!==,>==,<==
(1)比较运算符结果都是布尔值
console.log(10>20) //false
console.log(10<20) //true
(2)==:判断值是否相等
console.log(5==5) //true
console.log(5=="5") //true
(3)===:判断是否完全相等（值和类型）
console.log(5===5) //true
console.log(5==='5') //false（即值和类型完全相等是结果才为true）
console.log(5!=5,5!='5') //false false
console.log(5!==5,5!=='5') //false true
3.逻辑运算符：&&（与），||（或），！（非）
python中的逻辑运算符是：and（与）， or（或），not（非）
console.log('与：',true&&true,true&&false) //与：true false (全是真结果才为真)
console.log('或：',true||false,false||false) //或：true fals（全是假结果才为假）
console.log('非：',!true,!false) //非： false true （取反）
4.赋值运算符：=，+=，-=，*=，/=，%=
赋值运算符的左边必须是变量
var a=100
a+=10
a-=10
a*=1
a/=1
a%=1
console.log(a) //100
5.三目运算符
（1） 格式：
条件语句？值1：值2
（2）判断条件语句的结果是否为true，如果是true，那么表达式的结果就是值1，否则是值2
var b=10>20?10:20
console.log(b) //20(因为10大于20是假的，所以值就为后者)
练习：求两个数之间的最大值
var a1=80
var a2=100
console.log(a1>a2?a1:a2) //100
6.运算符的优先级
运算符的优先级和python中基本一样，如果不确定运算顺序，可以加括号来改变运算顺序，有括号的先算括号里面的
赋值运算符<逻辑运算符<比较运算符<算数运算符
优先级最低的是赋值运算符
数学运算：从左往右，先乘除，后加减
算数运算符中：
(1)**幂运算最高，最先算
(2)* / % //同一级，从左往右算
(3)+ -同一级，从左往右算
if语句
js中的分之结构有两种：if语句，switch语句
1.if语句
(1) if(条件语句){满足条件要执行的代码块}
var age=18
if(age>=18){
console.log('成年')
}
//结果:成年
（2）if（条件）{语句块1}else{语句块2}
if(age>=18){
console.log('成年')
}else{
console.log('未成年')
}
（3）if-else if-else--->相当于python中的if-elif-else
if (age<18){
console.log('未成年')
}else if(age<40){
console.log('青年')
}else{
console.log('老年')
}
2.switch语句--->判断是否完全相等
**格式：**
switch(变量){
cass 值1：
语句1；
break；
Cass 值2：
语句2；
break；
...
default:
语句3；
break；
}
执行过程：使用的变量的值依次和后边每个case后面的值进行判断，看是否相等如果相等就执行那个case后面对应的语句，如果前面的每个case后面的值和变量的值都不相等，就执行default后边的语句
注意：如果没写break，那么只要满足条件之后的所有条件内容都会打印
var score=10;
switch(score){
case 1:
console.log('f');
break;
case 4:
console.log('d');
break;
case 8:
console.log('b');
break;
default:
console.log('A');
break;
}
//结果：A
练习：10分制分数：0-5不及格，6-7：及格，8-9：良好，10：优秀
score=9
switch(score){
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('不及格');
break;
case 6:
case 7:
console.log('及格')
break
case 8:
case 9:
console.log('良好')
break
case 10:
console.log('优秀')
break
default:
console.log('成绩有误')
}
//结果：良好
循环结构
js中的有4种循环，分为for循环两种和while循环两种
1.for循环
（1）for-in （和python中for循环一样）
for(变量 in 数组/对象){函数体}
var arr1=[1,2,'ab']
//遍历x取的是下标
for(var x in arr1){
console.log(arr1[x])
}
//结果：1
// 2
// ab
var obj1={name:'流量',age:30}
//key取到的是属性名
for(var key in obj1){
console.log(key,obj1[key])
}
//结果: name 流量
// age 30
（2）for（表达式1；表达式2；表达式3）{循环体}
执行过程：先执行表达式1，然后再判断表达式2的结果是否是true，如果是true就执行循环体，执行完循环体后在执行表达式3；执行完表达式3，再判断表达式2 的结果是否是true，如果是true有执行循环体；再执行表达式3，一次类推，直到表达式2的结果是false，循环就结束
练习：计算1+2+3+...+100
var sum=0
for(var i=1;i<101;i++){
// console.log(i)
sum+=i
}
console.log(sum)
//结果：5050
var sum1=0
var i=0
for(;i<101;){
sum1+=i
i+=1
}
console.log(sum1)
//结果：5050
2.while循环
(1) while(条件语句){循环体} --->和python一样
var sum2=0
var i=0
while(i<101){
sum+=i
i++
}
console.log(sum2)
//结果：5050
(2)do-while循环：
do{循环体}while(条件语句)
执行过程：先执行循环体，然后判断条件是否成立，如果成立再执行循环体，以此类推，直到条件不成立，循环结束
和while间的区别：do-while至少执行一次
var sum1=0
var i=0
do{
sum1+=i;
i++;
}while(i<101);
console.log(sum1)
//结果：5050
3.break和continue(和python中一模一样)
break和continue两个关键字，都是作用于循环当中，用来结束循环，只能放在循环语句中，放在其他地方会报错
（1）continue:关键字，
在循环体中遇到continue和break就结束当次循环，直接进入下一次循环的判断（如果是for循环，就让变量去取下一个值，如果是while循环就判断while后面的条件语句是否为True）
（2）break:关键字，
在循环体中遇到break，就直接结束整个循环，直接执行循环体后边的其他语句
函数
1.函数的声明
格式：function 函数名（参数列表）{函数体}
（1） function:是关键字
（2）函数名：驼峰式命名，见名知意
（3）参数列表：参数可以有默认值，有默认值的参数要写在最后，调用函数传参的时候是按位置参数来传参，保证每个参数都有值（不支持个数不定的参数即*num不支持）
（4）函数体：实现函数的功能，只有在调用的时候才执行
（5）函数没有return的时候，返回的值是undefined
2.函数的调用
函数名（实参列表）---调用过程和python中一样
3.作用域：全局变量和局部变量
（1）全局变量（函数外面声明的变量）--作用从变量声明到文件结束
（2）局部变量（函数里面声明的变量）--作用在函数中从变量声明到函数结束，只能在函数里面用
（3）函数中可以修改全局变量的值
（4）函数中可以声明函数
（5）可以将函数作为变量
function sum1(num1,num2){
console.log('求两个数的和')
return num1+num2
}
console.log(sum1(1,20))
//结果：
//求两个数的和
//21
//aa就是全局变量
var aa = 10
function func2(){
//bb就是局部变量
var bb = 100
console.log(bb,aa)
//函数中可以修改全局变量的值
aa =20
//函数中可以声明函数
function func3(){
bb = 30
console.log(bb)
}
}
console.log(aa)
func2()
//可以将函数作为变量
var a = func2
a()
//个数不定参数，js不支持
数据类型
数据类型主要包括：数字、字符串、布尔、列表、对象
1.数字：
包含整数和小数（支出科学计数法，但不支持复数）
var num1 = 10
var num2 = new Number()
console.log(num2+10)
2.字符串
（1）''和""括起来的字符集
（2）转义字符（和python一样）
（3）字符编码是unicode编码
（4）获取字符串的长度：字符串.lenght
（5）获取单个字符：字符串[下标]
（6）下标：范围0-长度-1;如果越界,不报错,但是结果是undefined
（7）js中字符串不能切片
var str1 = 'hfiqhghqu'
var str2 = '\n' //换行符，字符串长度为1
var str3 = '\\'
console.log(str1.length)
console.log(str2,str2.length)
console.log(str3,str3.length)
//结果：
9
1
\ 1
（8）运算符
<1>JS中字符串只支持加（+）操作，不支持乘（*）操作
<2>字符串1+字符串2--->字符串的拼接
<3>js中字符串可以和其他任何数据进行+操作，器效果都是字符串连接（会将其他数据转换成字符串）
console.log('123'+'abc','123'*3,'abc'+100) //123abc NaN abc100
（9）字符串的相关方法（查）
（10）对象，构造方法（相当于python中的类）
var obj1={name:'法尔',age:10}
console.log(obj1.name,obj1['name']) //两种写法
//结果：法尔 法尔
（11）声明构造方法
function Person(){
this.name='abc'
this.age=10
this.sex='女'
}
var p1=new Person()
p1.name='name'
p1.age=20
console.log(p1,typeof(p1))
//结果：Person {name: "name", age: 20, sex: "女"} "object"
