1.认识js
1)js是JavaScript的缩写，是一门脚本语言，专门用来负责网页上的行为(可以直接写到网页上)
2)js代码的位置
- 可以写在script标签(理论上可以放到HTML中的任何位置，实际开发的时候一般放在header和body中)
- 写到标签的事件属性中(例如：onclick)
- 写到外部的js文件夹中
3)js在网页的作用
- 在网页不同的位置插入HTML代码
- 修改某个标签的内容
- 修改标签的样式
4)js语法
注意：一个HTML中可以在多个位置插入script标签
2.js基础知识
1)js中的注释
//单行注释
/*
*多行注释
*/
2)语句
一条语句结束需要加分号(现在的js版本也可以不用使用分号)
多条语句在一行，语句之间必须用分号隔开
console.log()在控制台中打印括号中的内容，（）里面的任何内容,()里面的单引号是字符串的标志，而不是内容，console.log()可以同时打印多个内容，多个内容之间用逗号隔开。打印的时候，多个内容之间默认是用空格隔开的。
3)js中没有缩进问题，用{}表示一个块
4）基本数据类型
Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)--列表、Object(对象)---字典、Function(函数)、null\undefined
5)字面量
数字字面量
字符串字面量
布尔字面量
数组字面量
对象字面量
6)标识符
- 由字母、数字、下划线和$符组成，数字不能开头
- 不能是关键字
- 大小写敏感，y和Y不一样
- 规范：见名知意，
console.log('hello world');
console.log('python');
//数字字面量
78;
100;
20.34;
3e5;
//字符串字面量
"abc";
'df';
//布尔字面量
true;
false;
//数组字面量
[1,2,5,true,'bin'];
[];
//对象字面量
var dict={s:'dfs',d:'jk'};
console.log(dict.s,dict.d,dict['s'],dict['d'])
//标识符
var _3df_3;
hello world
28 python
45 dfs jk dfs jk
3.声明变量
1)语法
- var 变量名；
- 说明：var是关键字
- 变量名：标识符，不能随意使用_或者$开头；驼峰式命名规则(第一个单词首字母小写，后面每个单词的首字母大写)
//声明变量
var userName;
//给变量赋值
userName='wang';
console.log(userName);
var number=100;
console.log(number);
var name,age,sex;
var name='df',age=20,sex
console.log(name,age)
结果：
wang
100
df 20
4.js运算符
1)数学运算符：+，-，*，/，%，++，--
2)比较运算符：>=,<=,>,<,==(相等),!=,===(完全等于),!==,>==,<==
比较结果都是布尔值
==：判断值是否相等
===:判断值和类型是否相等
3)逻辑运算符:与(&&)，或(||)，非(!)
4)赋值运算符：=，+=，-=，*=，/=，%=
赋值运算符的左边必须是变量，和python的语法一样
5)运算符的优先级和python基本一致，可以通过括号来改变运算符顺序
6)三目运算符
语法：
条件语句？ 值1：值2
结果：先判断条件语句的结果是否为true，如果是true，表达式的结果是值1，否则是值2
//a.+，-，*，%
var i=10+20;
var b=20-10;
var c=10*20
var d=7%2
//b./和数学中的除一样
var e=5/2
console.log(e)
//c.++,--(单目运算符)
/*
* ++：自加1，++在变量之前，先自加再使用它，在变量之后，先使用它再自加1
* --：自减1，--在变量之前，先自减再使用它，在变量之后，先使用它再自减1
*/
var a1=10
a1++
console.log(++a1,a1++)
a1--
console.log(a1)
//比较运算符
console.log(10>20)
console.log(10<20)
//==
console.log(5==5)
console.log(5=='5')
//==
console.log(5===5)
console.log(5==='5')
//逻辑运算符
//&&
console.log(true && true,false && true)
console.log(false || false,false || true)
console.log(!true ,!false)
//赋值运算符
var a=10
a+=1
a-=1
a*=10
a/=10
a%=10
console.log(a)
//三目运算符
console.log(10>30 ? 10:30)
结果：
2.5
12 12
12
false
true
true
true
true
false
true false
false true
false true
0
30
5.分支结构
1)if语句
- 结构：
if(条件语句){
满足条件要执行的代码块
}
if(条件){语句块}else{语句块}
if(条件){语句块}else if(条件){语句块}else{语句块}
2)switch语句
结构：
switch(变量){
case 值1:
语句1；
break；
case 值2：
语句2；
break；
...
default:
语句n；
break;
}
执行过程：使用变量的值依次和每个case后面的值进行判断，看是否相等(完全相等)
- 如果相等就执行该case中的语句，如果所有case的值都和变量值不相等，
- 就执行default中的语句
//结构1
var age=18
if (age>=18){
console.log('成年')
}
//结构2
if(age>=18){
console.log('成年');
}
else{
console.log('未成年')
}
//结构3
if(age<18){
console.log('未成年');
}
else if(age<40){
console.log('青年');
}
else{
console.log('老年');
}
var num=3;
switch(num){
case 1:
console.log('A');
break;
case 2:
console.log('B');
break;
case 3:
console.log('C')
break;
case 4:
console.log('D')
break;
default:
break
}
//练习：10分制分数：0-5：不及格，6-7：及格，8-9：良好，10：优秀
var score=8;
switch(score){
case 0:
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;
}
结果：
成年
成年
青年
C
良好
6.循环结构
js中循环分为for循环和while循环
1)for循环
-
for in( 变量取的值是下标或键值)
结构：for(变量 in 数组或对象){函数体}
for：关键字
变量：和申明变量时的要求是一样的，功能是存储值
in :关键字，在什么里的意思
函数体：需要重复执行的代码块
执行过程：使用变量去序列中取数据，一个一个的取取完为止。每取一次值，执行一次循环体。
注意：如果for中的变量不需要在循环体中使用，这个变量命名时可以用'_'命名 -
for(表达式1；表达式2；表达式3){循环体}
执行过程：先执行表达1，再判断表达式2的结果是否为true，如果是true就执行循环体；
执行完循环体，再执行表达式3；执行完表达式3，再判断表达式2的结果是否为true，如果是true就执行循环体，如此循环，直到表达式的结果为false。
2)while循环
结构1：while(条件语句){循环体}--和python一样
结构2：do-while循环：do{循环体}while(条件语句)
执行过程：先执行循环体，然后判断条件是否成立，如果成立再执行循环体...，依次类推，直到条件不成立，循环结束
3)break和continue
break和continue两个关键字，都是作用于循环，用来结束循环的。
continue是关键字，在循环体中遇到continue，就结束本次循环，直接进入下一次循环判断(如果是for循环，就让变量直接去取下一个值。如果是while循环就去判断while后边的条件语句是否为True)
break是关键字，在循环体中遇到break，就直接结束整个循环，直接执行循环后边的其它语句
注意：break结束的是距离它本身最近的那个循环。
var arr=[1,2,3,'sf'];
for (var x in arr) {
console.log(arr[x]);
}
for (var _ in arr) {
console.log('穿在');
}
var obj={naem:'dfds',age:45};
for (var o in obj){
console.log(o);
}
var str='sdfs5353fs';
for (var s in str){
console.log(s,str[s]);
}
//计算1+2+3+...+100
var sum=0;
for(var x=1;x<101;x++){
sum+=x
}
console.log(sum)
//while结构1
sum=0;
var x=1;
while(x<101){
sum+=x;
x++;
}
console.log(sum)
//结构2
sum=0
x=1
do{
sum+=x;
x++;
}
while(x<=100)
console.log(sum)
结果：
1
2
3
sf
穿在
naem
age
0 s
1 d
2 f
3 s
4 5
5 3
6 5
7 3
8 f
9 s
5050
5050
5050
7.函数
1)函数的声明
function 函数名(参数列表){函数体}
function-关键字
函数名-驼峰式：见名知意
参数：参数可以有默认值，且需写在后面，传参的时候，只能位置传参，保证每个参数都有值
函数体：实现函数的功能，只能在调用的时候才执行
函数没有return的时候，函数的返回undefined
2)函数的调用
函数名(实参列表)
调用过程：
1.使用实参给形参赋值
2.执行函数体
3.函数体执行完成后，回到函数调用的位置
注意：
1.函数只有在调用的时候才会执行
2.函数调用的时候一定要保证每个形参都有值
3.函数的调用一定要在函数声明的后面
4.一个函数可以多次调用
3)作用域
全局变量：声明在函数体外面的变量(从声明到文件结束)
局部变量：声明在函数体里面的变量(从变量声明到函数结束,函数的参数也是局部变量)
*/
function sum1(num1,num2=1){
console.log('求两个数的和');
return num1+num2;
}
console.log(sum1(10));
//全局变量
var a=10;
function func(){
//局部变量
var b=100
//函数中可以修改全局变量的值
a=20
console.log(a,b)
function func1(){
b=200
console.log(b)
return b
}
func1()
console.log(a,b)
return func1
}
//可以将函数作为变量
var a=func
console.log(a()())
结果：
求两个数的和
11
20 100
200
20 200
200
200
8.数据类型
数字、字符串、布尔、列表、对象
1)数字：包括整数和小数(支持科学计数法，不支持负数)
2)字符串：
''和""括起来的字符集
转义字符:
可以用来表示一些有特殊功能或者是特殊意义的字符(通过在固定的字符前加),转义字符在计算字符串长度时，转义字符代表一个字符。
\’-->'
\\ -->\
\n -->换行
\t -->制表符
\" -->"
字符编码是Unicode编码
获取字符串长度(变量名.length)
获取字符串下标：范围0~长度-1，越界，不报错，但结果为undefined，js中的字符不能切片
运算符：js中只支持+操作，不支持*操作(字符串1+字符串2---拼接)
+：js中字符串可以和其他任何类型的数据进行加操作，其效果都是字符串拼接(会将其他
类型的数据转换成字符串)
字符串方法:
3)对象、构造方法
var num1=10;
var num2=new Number();
console.log(num1+num2) ;
//字符串
var str1='dfs';
//转义字符
var str2='\n';
//获取长度
console.log(str1.length);
//获取下标
console.log(str1[0])
//运算符
console.log('123'+'dfs','abc'+100)
//对象，构造方法
var obj1={name:'dfs',age:34}
console.log(obj1.name,obj1['name'])
//构造方法
function Person(name='',age=0,sex=''){
this.name='abc'
this.age=23
this.sex='女'
}
var p1=new Person();
p1.name='nnn';
p1.age=33;
console.log(p1,typeof(p1))
结果：
10
3
d
123dfs abc100
dfs dfs
Person {name: "nnn", age: 33, sex: "女"} "object"
网友评论