一、js基础
1.什么是js
js是JavaScript的缩写。是一门专门用来处理网页中的行为的脚本语言，也是web标准中的行为标准。
JavaScript和Java没有关系。
2.在什么地方写js代码
window.alert() -> 在网页上弹出一个对话框
内联的js：写在标签事件相关的属性中，例如：onclick属性，属性值是js代码。
内部的js：写在script标签的内容中，script标签理论上是可以放在整个html文件的任意位置，但是一般放在head或者body中。
外部的js：写在外部的一个js文件(后缀是.js的文件)中，然后再通过script标签设置src属性的值为js文件地址来导入。
代码
<!-- 内联的js -->
<button onclick="window.alert('按钮被点了！')">点我啊</button>
<!-- 内部的js -->
<script type="text/javascript">
window.alert('script标签中的js')
</script>
<!-- 外部的js -->
<script type="text/javascript" src="js/index.js">
3.js能做什么事情
a.可以修改标签中的内容。
b.可以修改标签的样式。
c.插入html代码。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js基础语法</title>
<!-- 内部的js -->
<!--<script type="text/javascript">
window.alert('script标签中的js')
</script>-->
<!-- 外部的js -->
<!--<script type="text/javascript" src="js/index.js">-->
</script>
</head>
<body>
<!-- 内联的js -->
<!--<button onclick="window.alert('按钮被点了！')">点我啊</button>-->
<p id='p1'>python基础</p>
<!-- 修改标签中的内容 -->
<button onclick="document.getElementById('p1').innerHTML='js基础'">修改内容</button>
<!-- 修改标签的样式-->
<button onclick="document.getElementById('p1').style.color='red'">修改样式</button>
<!-- 插入html代码 -->
<script type="text/javascript">
document.write('<p>插入的段落</p>')
</script>
</body>
</html>
测试结果
二.js基础语法
1.注释(和c的注释一样)
代码
//当行注释
/*多行注释
*多行注释
*/
2.标识符
标识符就是用来命名的(给变量命名，函数名，对象命名)。
js中要求标识符是由数字、字母、下划线和$符组成，数字不能开头。
注意：js中大小写敏感。
代码
var abc,ab12,ab_123,$abc
//console.log() --> 在控制台打印括号中的内容
console.log(abc)
3.常用数据类型
a.数字类型(Number)、布尔(Boolean)、字符串(String)、数组(Array)、对象(Object)、函数(Function)等。
(1)数字类型(Number)：包含所有的数字(整数和小数)，支持科学计数法，不支持复数。
100
13.9
-200
-12.34
2e2
(2)布尔(Boolean):true和false
true
false
(3)字符串(String)：用双引号或者单引号括起来的
'abc'
"abc"
(4)数组(Array)：相当于python中的列表
[12,23,'abc',[1,2]]
(5)对象(Object):python中对象和字典的结合
var p1 = {
name:'yh',
age:18,
sex:'男'
}
(6)函数(Function):相当于python中的函数
function function_name(){
console.log('函数体')
}function_name()
b.typeof(数据类型) -> 获取数据类型
console.log(typeof(100))
console.log(typeof([1,2,3]))
c.new 类型名(数据) -> 将数据转换成指定的类型
var a = new Boolean(100)
console.log(a)
d.常用的特殊值：undefined(相当于python中的None)，null(一般用来清空变量)
格式：js没有缩进的要求。
三、变量
1.变量的使用
语法：
var 变量名
变量名 = 值说明：
var -> 是js关键字，声明变量的时候用。var可以省略，省略的时候变量名后面必须赋值。不省略的时候变量名后可以赋值，也可以不赋值，不赋值的时候默认值是undefined。
变量名 -> 标识符，不能是关键字。驼峰式命名规范
代码
<script type="text/javascript">
//声明变量
var name1
console.log(name1)
name2 = '小明'
console.log(name2)
var name3 = '小花'
console.log(name3)
//同时声明多个变量
var age=18,sex,score=100
console.log(age,sex,score)
age1 = 10, sex1 = '男'
console.log(age1,sex1)
//变量中的值：可以赋任何其他类型的值
age = '老年'
console.log(age)
//注意：不支持这种写法
//x,y = 10,20
</script>
测试结果
四、运算符
js中支持：数学运算符，比较运算符，逻辑运算符，赋值运算符，位运算符。
1.数学运算符：+，-，，/，%，*(js7),++,--
+，-，，/，%，*和python一样，但是js中不支持整除(//)
++(自加1)，--(自减1)
变量++，++变量，变量--，--变量
注意：
a.变量必须要有值。
b.赋值的时候，++和--写在变量的前面和后面对应的效果不一样。
代码
<script type="text/javascript">
console.log(20+10, 20-10, 20*10, 5/2, 5%2, 5**2)
var number = 10
number++
++number
number--
--number
console.log(number)
var number1 = 1,number2
number2 = number1++
console.log(number1, number2)
var number11 = 1,number22
number22 = ++number11
console.log(number11, number22)
</script>
测试结果
2.比较运算符：>,<,==,!=,>=,<=,===,!==
比较运算符的返回值都是布尔值。
==(相等)：判断值是否相等。
===(完全相等)：判断值和类型是否相等。
代码
<script type="text/javascript">
console.log(5==5) //true
console.log(5=='5') //true
console.log(5===5) //true
console.log(5==='5') //false
console.log(5!='5') //false
console.log(5!=='5') //true
</script>
测试结果
3.逻辑运算符：&&(与) ||(或) !(非)
运算规则和python中的and，or，not一模一样。
4.赋值运算符：=，+=，-=，*=，/=，%=
和python一样。
5.位运算：&,|,^,~,>>,<<
代码
<script type="text/javascript">
console.log(1&2,1|2,1^2,~1,2>>1,2<<1)
</script>
测试结果
五、分支结构
js中的分支结构有两个，分别是if语句和switch语句。
1.if语句
a.if结构:
if (条件语句){代码段
}
说明：
if -> 是关键字
(){} -> 固定写法执行过程：判断条件语句是否为true，为true就执行{}中的代码(不管缩进问题)
b.if-else结构：
if(条件语句 ){代码段1
}else{
代码段2
}
c.if- else if- else结构
if (条件语句1){代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}else{
代码段4
}
else if 相当于python中的elif
代码
<script type="text/javascript">
number = 10
if (number % 2 ==0){
console.log('是偶数')
}
number2 = 11
if (number2 %2 == 0){
console.log(number2,'是偶数')
}else{
console.log(number2,'是奇数')
}
</script>
测试结果
2.switch语句
结构：
switch(表达式){case 值1:
代码段1
case 值2:
代码段2
case 值3:
代码段3
...default:
代码段4
}
执行过程：先计算表达式的值，然后从上往下一一和case后面的值进行比较，找到第一个和表达式相等的case；然后将这个case作为入口，依次执行后面的所有的代码段，直到执行完或者遇到break为止。如果没有哪个case的值和表达式的值一样，就直接执行default后面的代码段。
default可以省略。
代码
<script type="text/javascript">
num = 10
switch (num){
case 1:
console.log('1')
case 2:
console.log('2')
case 10:
console.log('10')
case 11:
console.log('11')
//break
default:
console.log('default')
}
</script>
测试结果
练习1：从服务器获取到的星期对应的值是0-6，在程序中对应打印出其对应的星期值
练习2：有一个变量存绩点(整数：0-5)，0：不及格，1-3：及格，4-5：优秀
代码
<script type="text/javascript">
week = 1
switch (week){
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('周天')
}
score = 3
switch (score){
case 0:
console.log('不及格')
break;
case 1:
case 2:
case 3:
console.log('及格')
break;
case 4:
case 5:
console.log('优秀')
break
default:
console.log('成绩有误')
</script>
测试结果
六、循环结构
js中的循环有for循环和while循环。
1.for循环
a.for-in：和python的for循环一样
for 变量 in 序列{循环体
}
注意：
a.取出来的是元素的下标或者key(属性名)
b.序列可以是字符串、数组和对象b.C的for循环结构：
for(语句1;表达式2;语句3){
循环体}
执行过程：先执行表达式1，再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再执行语句3； 再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再执行语句3；依次类推，直到表达式2的结果为false，整个循环就结束。
指导思想：语句1 -> 里面写循环开始前的准备工作
表达式2 -> 控制循环次数
语句3 -> 改变循环次数
2.while循环
a.while循环：和python的while循环一样
while(条件语句){循环体
}
b.do-while循环：
do{循环体
}while(条件语句)
执行过程：先执行循环体，然后再判断条件语句是否为true；为true执行循环体，执行完又判断条件语句是否为true； 以此类推，直到条件语句的结果为false，循环就结束。
3.break和continue
和python一样。
代码
<script type="text/javascript">
str1 = 'abc'
for(x in str1){
console.log(str1[x])
}
arr = [10,20,30]
for (x in arr){
console.log(x,arr[x])
}
object1 = {name:'小明',age:18}
for (x in object1){
console.log(x,object1[x])
}
//计算：1+2+...+100
for(num=1,sum=0;num<=100;num++){
sum += num
}
console.log(sum)
//死循环
/*
for(;true;){
}
while(true){
}
</script>
测试结果
七、函数
函数分为声明和调用，声明的时候不会执行函数体，只有调用函数才会执行函数体。
1.函数的声明
a.和python相同的声明方式
function 函数名(参数列表){
函数体
return 返回值}
说明：
function -> 声明函数的关键字
函数名 -> 驼峰式命名，见名知意
参数列表 -> 参数如果没有设置默认值，相当于设置默认值为undefined
返回值 -> 没有return返回值是undefined
b.以声明变量的形式声明函数
函数名 = function (参数列表){
函数体
rerurn 返回值}
2.函数的调用：
函数名(实参列表)
调用的时候，保证每个参数都有值，只能通过位置参数传参，js中不支持不定长参数。
代码
<script type="text/javascript">
function sum(num1=1,num2=2){
console.log('求两个数的和：',num1,num2)
return num1+num2
}
sum(10,20)
console.log(sum(10,20))
sum()
var mul = function (num1,num2){
console.log('求两个数的乘积：',num1,num2)
return num1*num2
}
console.log(mul(10,4))
</script>
测试结果
八、字符串
字符串：由单引号或者双引号括起来的。
1.转义字符：和python一样
代码
<script type="text/javascript">
//转义字符
console.log('abc\n123')
console.log('\tabc\'123')
</script>
测试结果
2.字符串长度：字符串.length
代码
<script type="text/javascript">
//字符串长度
console.log('123abc'.length)
</script>
测试结果
3.获取单个字符：字符串[下标]
注意： 下标的取值范围是0~长度-1；超出范围取到的是undefined；js中没有切片的语法。
代码
<script type="text/javascript">
//获取单个字符
str1 = 'hello world'
console.log(str1[1])
</script>
测试结果
4.相关运算符
+ -> 将两个字符串拼接在一起产生一个新的字符串
注意：如果是一个字符串加上其他的数据，会先将其他数据转换成字符串再相加;js不支持*运算符。
比较运算(>，<，==，!=，===，!==)
>、< -> 和python一样，还是比较字符编码值的大小
代码
<script type="text/javascript">
//相关运算
console.log('abc'+'def')
console.log('abc'+'def','abc'+true,'abc'+[1,2,3])
//str1 = new String([10,20,30])
//console.log(str1)
//console.log('abc'*3) //NAN -> 是数字类型中的一个特殊值，表示一个不存在的数字
//console.log(10/0) //Infinity -> 无穷大
console.log('abc' > 'abaaaa')
</script>
测试结果
5.相关方法(参考菜鸟教程)
match(正则表达式) -> 根据正则表达式匹配结果
注意：js中的正则表达式是写在//之间的。
代码
<script type="text/javascript">
//相关方法
str1 = 'abc123def456'
result = str1.match(/[a-z]+/)
console.log(result)
result = str1.replace(/\d/,'*')
console.log(result)
</script>
测试结果
九、数组
1.数组是有序，可变的，里面的元素可以是任意类型的数据
数组就是python中的列表。
2.增删改查
a.查(获取数组中的元素) -> 不支持切片
数组[下标]
数组.slice(开始下标，结束下标) -> 切片b.增(添加元素)
数组.push(元素) -> 将元素添加到数组的最后c.删(删除元素)
数组.pop() -> 删除最后一个元素
数组.splice(开始删除的下标，删除的个数) -> 从数组指定的下标开始删除指定的个数元素d.改(修改元素的值)
数组[下标] = 新值 -> 修改指定下标的元素
数组.splice(开始下标,个数,多个其他参数) -> 用其他参数替换开始下标开始后的指定个数个元素
代码
<script type="text/javascript">
arr1 = [1,2,3,'abc']
console.log(arr1[3])
arr1 = [1,2,3,'abc']
result = arr1.slice(0,2)
console.log(result)
//获取数组的长度
arr1 = [1,2,3,'abc']
console.log(arr1.length)
arr1 = [1,2,3,'abc']
arr1.push('hello')
console.log(arr1)
arr1 = [1,2,3,'abc']
arr1.pop()
console.log(arr1)
arr1 = [1,2,3,'abc']
result = arr1.splice(0,2)
console.log(arr1)
arr1 = [1,2,3,'abc']
arr1[0] = 10
console.log(arr1)
arr1 = [1,2,3,'abc']
arr1.splice(1,2,'a','b','c')
console.log(arr1)
</script>
测试结果
十、对象
js中没有python的类，只有对象和构造方法。
1.对象的字面量
对象名 = {属性名1:属性值1,属性名2:属性值2...}
2.使用对象属性
对象[属性名]
对象.属性
代码
<script type="text/javascript">
p1 = {
//对象属性
name:'xiaoming',
age:30,
tel:'18108773625',
//对象方法
eat:function (){
console.log('吃饭')
}
}
console.log(p1['name'],p1.name)
p1.eat()
</script>
测试结果
3.构造方法
function 类名(参数列表){
this.属性1 = 属性值1
this.属性2 = 属性值2
...return this
}
这儿的this类似python中的self，表示当前对象。
代码
<script type="text/javascript">
function Person(name1,age1){
this.name = name1
this.age = age1
this.tel = ''
this.sex = '男'
this.eat = function (food){
console.log(this.name+'在吃'+food)
}
return this
}
p2 = Person('小明',18)
p2.tel = '18108773125'
p2.eat('面条')
p3 = Person('小花',20)
p3.sex = '女'
p3.eat('面包')
</script>
测试结果
练习：声明一个狗的对象对应的构造方法，拥有属性名字，颜色，年龄，品种；拥有方法：吃和叫
代码
<script type="text/javascript">
function Dog (name,color,age,kind){
this.name = name
this.color = color
this.age = age
this.kind = kind
this.eat = function (food){
console.log(this.name+'在吃'+food)
}
this.cry = function (){
console.log(this.name+'在叫')
}
return this
}
p = Dog('大黄','yellow',2,'dog')
console.log(p.name)
console.log(p.color)
console.log(p.age)
console.log(p.kind)
p.eat('肉')
p.cry()
</script>
测试结果
