1、js基础语法
<script type="text/javascript">
1.注释
单行注释
多行注释
*/
//
2.标识符
标识符就是用来命名的（给变量命名、函数命名、对象命名）
js中要求标识符由字符、数字、下环线和$符组成，数字不能开头
js中大小写敏感
console.log() --在控制台打印括号中的内容
console.log(abc)
3.常用数据类型
a.数字类型（Number）、布尔（Boolean）、字符串(String)、数组(Array)、对象（Object）、function（函数）
数字类型（Number）：包含所有的数字（整数和小数）,支持科学技术法，不支持虚数
//布尔（Boolean）：true和false
//字符串（String）：用双引号或者单引号括起来
//数组（Array）：相当于python中的列表
//对象（Object）：python中对象和字典的结合
var p1 = {
}
//Function(函数)：相当于python中的函数
function funcyion_name(){
console.log('函数体')
}
//b.typeof(数据) - 获取数据类型
console.log(typeof(100))
console.log(typeof([1, 2, 3]))
//c.new 类型名（数据） - 将数据转换成指定的类型
//d.常用的特殊值：undefined(相当于python，None), null(一般用来清空变量)
//4.格式：js没有缩进的要求
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
2、变量
<script type="text/javascript">
语法：
var 变量名
说明：
var - 是js关键字，声明变量的时候用。var可以省略，省略的时候变量名后面必须赋值。
不省略的时候变量名后可以赋值，也可以不赋值，不赋值的时候默认值是undefined
变量名 - 标识符，不能是关键字。驼峰式命名规范
*/
//声明一个变量
var name1
console.log(name1)
name2 = 'uzi'
console.log(name2)
var name3 = '吉吉'
console.log(name3)
//同时声明多个变量
var age=18, sex, score=222
console.log(age, sex, score)
//变量中的值:可以赋任何其他类型的值
age = '贱贱'
console.log(age)
//注意:不支持这种写法
// x, y = 10, 20
</script>
3、运算符
<script type="text/javascript">
js中支持:数学运算符/比较运算符/逻辑运算符/赋值运算符/位运算符
1.数学运算符:+, -, *, /, %, **(js7), ++, --
+, -, *, /, %, **和python一样,但是js中不支持整除(//)
++(自加1),--(自减1)
变量++, ++变量, 变量--, --变量 (注意：变量必须要有值)
注意赋值的时候, ++和--写在变量的前面和后面对应的效果不一样
var number = 10
number++ //让number加1
console.log(number)
2.比较运算符:>, <, ==, !=, >=, <=, ===, !==,
比较运算符返回结果是布尔值
==(相等):判断内容是否相等
===(完全相等):判断值和类型是否相等
console.log(5==5) //true
console.log(5=='5') //true
console.log(5===5) //true
console.log(5==='5') //false
3.逻辑运算符:&&(与), ||(或), !(非)
运算规则和python中的and,or,not一模一样
4.赋值运算符: =, +=, -=, *=, /=, %=
和python一样
5.位运算: &, |, ^, ~, >>, <<
和python一样
6.复合运算:数学>比较>逻辑>赋值
可以通过加（）来改变运算顺序
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
4、分支结构
<script type="text/javascript">
js中的分支结构有两个,分别是if语句和switch语句
1.if语句
结构：
if（条件语句）{
代码段
}
说明：
if - 关键字
（）{} - 固定写法
执行过程：判断条件语句是否为true，为true就执行{}中的代码（不光缩进问题）
*/
// number = 10
// if(number % 2 == 0){
// console.log('ajshdyugsa')
// }
/*
b.if-else结构
if（条件语句）{
代码一
}else{
代码段二
}
*/
/*
c.if - else if - else结构
if（条件语句1）{
代码1
}else if（条件语句2）{
代码段2
}else if（条件语句3）{
代码段3
}else{
代码段4
}
else if 相当于python中的elif
*/
/*
2.switch语句
结构：
switch（变量/表达式）{
case 值1：{
代码段1
}
case 值2：{
代码段2
}
...
default:{
代码段3
}
}
执行过程：先计算表达式的值，然后从上往下一一和case后面的值进行比较，然后找到第一个和表达式相等的case
然后将这个case作为入口，依次执行后面的所有代码段，直到执行完或者遇到break为止。
如果没有哪个case的值和表达式的值一样，就直接执行default后面的代码段
default可以省略
*/
//练习1:从服务器获取到的星期对应的值是0-6,在程序中对应打印出其对应的星期值:周1-周天
week = 1
switch(week){
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
case 0:
console.log('星期天')
default:
console.log('祝您今天一切顺利！！！')
}
//练习2:有一个变量存绩点(整数：0-5),0:不及格, 1-3:及格, 4-5:优秀
score = 3
switch(score){
case 0:
console.log('抱歉：不及格')
break
case 1:
case 2:
case 3:
console.log('及格')
break
case 4:
case 5:
console.log('优秀')
default:
console.log('输错了')
}
</script>
5、循环结构
<script type="text/javascript">
//js循环有for循环和while循环
/*
1.for循环
a.for-in:和python的for循环的执行过程一样
for(变量 in 序列){
循环体
}
注意：取出来的是元素下标或者key（属性名）
序列可以是字符串，数组和对象
*/
/*
b.C的for循环
for（表达式1；表达式2；表达式3）{
循环体
}
执行过程：先执行表达式1，再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再执行表达式3，
再判断表达式2是否为true，为true就执行循环体，执行完循环体再执行表达式3，
以此类推，直到表达式2的结果为false，整个循环结束
指导思想：语句1 - 里面循环开始前的准备工作
表达式2 - 控制循环次数的
语句3 - 改变循环次数
//死循环
for(;true;)
/*
2.while循环
a.while循环：和python的while循环一样
while(条件语句){
循环体
}
b.do-while循环
do{
循环体
}while(条件语句)
执行过程：先执行循环体，然后再判断条件语句是否为true
为true执行循环体，执行完然后再判断条件语句是否为true
以此类推，直到条件语句为false，循环结束
*/
/*
3.break和continue
和python一样
*/
</script>
6、函数
<script type="text/javascript">
//函数分为声明和调用,声明的时候不会执行函数体,只有调用函数才会执行函数体
1.函数的声明
a.和python相同的声明方式
function 函数名（参数列表）{
函数体
return 返回值
}
说明：
function - 声明函数的关键字
函数名 - 驼峰式命名，见名知义
参数列表 - 参数如果没有设置默认值，相当于默认值为undefined
返回值 - 没有return返回值是undefined
b.以声明变量的形式声明函数
函数名 = function (参数列表){
函数体
return 返回值
}
*/
function sum11(num1,num2){
return num1+num2
}
console.log(sum11(10,20))
mul = function (num1, num2){
console.log('求两个数的乘积',num1,num2)
return num1*num2
}
console.log(mul(10,20))
2.函数的调用：
函数名（实参列表）
调用的时候，保证每个参数都有值
只能通过位置参数传参
jd中不支持不定长参数
</script>
7、数据类型
<script type="text/javascript">
1.字符串：由单引号或者双引号括起来的
a.转义字符：和python一样
b.字符串长度：字符串.length
c.获取单个字符：字符串[下标]
注意：下标取值范围是0 ~ 长度减1；超出范围取到的是undefined
js中没有切片语法
console.log('123\n456')
str1 = 'aaabbb'
console.log(str1[0],str1[9])
4.相关运算符
+ - 将两个字符串拼接在一起产生一个新的字符串
（注意：如果是一个字符串加上其他数据，会先将其他数据转换成字符串再相加）
js中字符串不支持*运算
比较运算（>, <, ==, !=, ===, !==）
>,< -- 和python一样，比较编码值的大小
//console.log('123'*3) NaN:是不存在的数字,是一个特殊值
//console.log(10/0) - 无穷大
5.相关方法（看菜鸟的表）
match（正则表达式） - 根据正则表达式匹配结果。
js中的正则表达式是写在//之间的
*/
str1 = 'csd32fsd23552fs2d'
result = str1.match(/[a-z]+/)
console.log(result[0])
result = str1.replace(/\d/,'*')
console.log(result)
</script>
8、数组
<script type="text/javascript">
数组就是python中的列表
1.数组是有序，可变的，里面的元素可以是任意类型的数据
2.增删改查
a.查(获取数字中的元素) - 不支持切片
数字[下标]
数组.slice(开始下标，结束下标) - 切片
arr1 = [1, 2, 3, 'jjj']
console.log(arr1[3])
//获取数组长度
console.log(arr1.length)
result = arr1.splice(1,2)
console.log(result, arr1)
/*
b.增（添加元素）
数组.push（元素），将元素添加到数组最后
*/
arr1.push('hhh')
console.log(arr1)
删（删除元素）
数组.pop（）- 删除最后一个元素
数组.slice(开始删除个数的下标，删除的) - 从数组中的的下标开始删除指定个数元素
arr1.pop()
console.log(arr1)
arr1.splice(1,2)
console.log(arr1)
d.改（修改元素的值）
数组[下标] = 新值 - 修改指定下标的元素
数组.splice(开始下标，个数，多个其他参数) - 用其他参数替换开始下标开始后的指定个数的元素
arr1 = [1, 2, 3, 4, 'abb']
arr1[0] = 5
console.log(arr1)
arr1.splice(1,2,'a','b','b')
console.log(arr1)
</script>
9、对象
<script type="text/javascript">
js中没有python的类,只有对象和构造方法
1.对象的字面量
对象名 = {属性名：属性值，属性名2：属性值2...}
p1 = {
name:'xiaohu',
age:99,
tel:12332112333211,
//对象方法
eat:function (){
console.log('吃烤串')
}
}
2.使用对象属性
对象[属性名]
对象.属性
console.log(p1['name'],p1.name,p1.age)
p1.eat()
3.构造方法 - 用来创建对象的
function 类名（参数列表）{
this.属性1 = 属性值1
this.属性2 = 属性值2
...
return this
}
这儿的this类似python中的self，表示当前对象
function Person(name, age){
//对象属性
this.name = name
this.age = age
this.tel = ''
//对象方法
this.eat = function (food){
console.log(this.name+'在撸'+food)
}
return this
}
p2 = Person('uzi', 22)
p2.eat('羊肉串')
//声明一个狗的对象对应的方法,拥有属性,颜色,年龄,品种; 拥有方法:吃和叫
function Dog(color,age,great){
this.color = color
this.age = age
this.great = great
this.bb = function (food, jiao){
console.log('发现一只'+this.color+'的狗，年龄：'+this.age+' ，品种：'+this.great+'，正在'+food+'和'+jiao)
}
return this
}
p3 = Dog('黑色',3,'藏獒')
p3.bb('吃饭','叫唤')
</script>
网友评论