1. 什么是js
- js是JavaScript的缩写，是一门唯一的用来控制网页内容的脚本语言；是web标准中的行为标准，用来控制网页内容的变化
2. js写在什么位置
- 内联：将js代码写在标签的事件相关属性中，例如：onclick属性
- 内部：将js代码写在script标签中（既可以放在head标签中也可以放在body标签）
- 外部：将js代码写在js文件中，然后通过script标签导入
3. js能做什么事情
- 修改标签内容
- 修改标签属性
- 修改标签样式
- 添加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--1.内联js-->
<button onclick="alert('内联js')">点我啊</button>
<!--2.内部js-->
<!--<script type="text/javascript">
//弹出警告框
alert('内部js')
</script>-->
<!--3.外部js-->
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--修改标签内容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerText = 'hello js'">修改内容</button>
<br /><br />
<!--修改标签属性-->
<img src="img/luffy.jpg" id="img1"/>
<button onclick="document.getElementById('img1').src = 'img/luffy1.png'">修改图片</button>
<br /><br />
<!--修改标签样式-->
<p id="p2">我是一段文字</p>
<button onclick="document.getElementById('p2').style='color:red;font-size:25px;'">修改样式</button>
<!--网页中添加内容-->
<script type="text/javascript">
for(x=1;x<=10;x++){
document.write('<h1>我是标题'+x+'</h1>')
}
</script>
</body>
</html>
4. js语法基础
1）注释（和c语言注释一样）
2）标识符
- 由字母、数字、下划线和$符组成，数字不能开头（注意：$不轻易使用，在JQ中有特殊意义）
3）关键字
- for、if、var、while、func、true、false等....
4）数据类型
4.1）类型：Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)、Object(对象)
- 类型名首字母都是大写的
-
Number：包含所有的数字(包括整数和小数),例如: 100, 0.23, -23, 2e5
-
String：用双引号或者单引号引起来的字符集, 支持转义字符和编码字符
-
Boolean：只有true和false两个值，分别代表真和假
-
Array：相当于python中的列表, 用中括号括起来的多个元素。[12, 'abc', true, [1, 2, 3]]
-
Object：类似python中字典和对象的结合
4.2）typeof函数
4.3）类型名（数据）：类型转换
- parseFloat（数据）：将数据转换成浮点数
- parseInt（数据）：将数据转换成整数
- Math.random()：返回 0（包含） ~ 1（不包含） 之间的一个随机数
console.log(parseInt(Math.random()*10)) // 返回0~10之间的随机整数（不包含10）
5）语句
- 一行一般情况下只写一条语句，语句结束后可以有分号也可以没有；如果一行有多条语句，语句之间必须有分号
- 缩进无要求
- 大小写敏感
6）打印
-
console.log(内容)：在控制台打印，相当于python的print
5. 变量
1）语法
- 语法1：变量名 = 值
- 语法2：var 变量名 / var 变量名 = 值
- 函数外两种声明无差别，函数内，加var代表局部变量
- 补充：
var：函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量
const：const 声明一个只读的常量，一旦声明，常量的值就不能改变
let：let 声明的变量只在 let 命令所在的代码块内有效
function func1(){
//全局变量
a = 100
//局部变量
var b = 200
}
func1()
2）说明
- 变量名：标识符、不能是关键字; 采用驼峰式命名
- 声明变量如果没有给变量赋值(语法2才支持)，变量的默认值是undefined
num = 100
console.log(num)
var num2
console.log(num2)
studentName = '小明'
//同时声明多个变量，赋相同的值
a = b = c = 10
console.log(a,b,c)
//同时声明多个变量，赋不同的值
var a1, b1=10, c1=30
console.log(a1, b1, c1)
6. 运算符
- js支持数学运算符、比较运算符、逻辑运算符、赋值运算符、(位运算)
1）数学运算符：+，-，*，/，**，%，++，--
- +，-，*，/，**，%和python一样
- 不支持整除运算（//），会跟注释符混淆
- 自加1运算：变量++, ++变量
- 自减1运算：变量--, --变量
- 自加自减的坑：不要在自加或自减的时候赋值给另一个变量
num = 10
num2 = num++ // num2 = num; num+=1
console.log(num2)
num = 10
num2 = ++num // num+=1; num2=num
console.log(num2)
2）比较运算符：>，<，==，!=，>=，<=，===，!==
- 比较大小和python一样
- ==：判断值是否相等（不管类型）
- ===：同时判断值和类型是否相等(python中的==)
- 支持表示范围的连续写法
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(5 != '5') //false
console.log(5 !== '5') // true
3）逻辑运算符：&&（与）、| |（或）、！（非）
console.log(true && true, true && false)
console.log(true || true, true || false)
console.log(!true)
4）赋值运算符：=，+=，-=，*=，/=，%=
5）复合运算
6）三目运算符：表达式？值1：值2
- 判断表达式的值是否为true，如果为true整个运算的结果是值1，否则是值2
age = 16
reslut = age>18?'成年':'未成年'
console.log(reslut)
7. 分之结构
1）if分之
1.1）结构1：if
js写法:
if(条件语句){
满足条件执行的代码块
}
python写法:
if 条件语句:
满足条件执行的代码块
1.2）结构2：if-else
js写法:
if(条件语句){
满足条件执行的代码块
}else{
不满足条件执行的代码块
}
python写法:
if 条件语句:
满足条件执行的代码块
else:
不满足条件执行的代码块
1.3）结构3：if-else if-...else
js写法:
if(条件语句1){
满足条件1执行的代码块
}else if(条件语句2){
满足条件2执行的代码块
}
...
python写法:
if 条件语句1:
满足条件1执行的代码块
elif 条件语句2:
满足条件2执行的代码块
...
2）switch分之
2.1）语法
switch(表达式){
case 值1:
代码块1
case 值2:
代码块2
case 值3:
代码块3
...
default:
代码块N
}
2.2）执行过程
- 先计算表达式的结果，然后让这个结果按顺序从前往后和每个case后面的值进行比较
- 如果哪个case后面的值和表达式的结果相等，就将这个case作为入口，依次执行后面所有的代码块，直到执行完最后一个（包括default）代码块或者遇到break为止
- 如果每个case后面的值都和表达式的结果不相等，直接执行default后面的代码块（default可以不写，没有就不执行）
switch(2){
case 1:
console.log('表达式1')
case 15:
console.log('表达式15')
case 10:
console.log('表达式10')
case 8:
console.log('表达式8')
default:
console.log('表达式d')
}
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 7:
console.log('周日')
break
}
grade = 2
switch(grade){
case 0:
console.log('不及格')
break
case 1:
case 2:
case 3:
console.log('及格')
break
case 4:
case 5:
console.log('优秀')
break
}
8. 循环结构
1）for循环
1.1）for-in循环
for(变量 in 序列){
循环体
}
- 执行过程：
让变量依次获取序列中元素的下标(下标 / 属性名：相当于key)，一个一个取，取完为止，每取一个值执行一次循环体
str1 = 'abc'
for(x in str1){
console.log(x, str1[x])
}
1.2）支持C中的for循环
for(表达式1;表达式2;表达式3){
循环体
}
相当于python中的以下结构:
表达式1
while 表达式2:
循环体
表达式3
- 执行过程：
先执行表达式1，再判断表达式2的值是否为true;如果为true执行循环体，执行完循环体再执行表达式3；
再判断表达式2是否为true,如果为true执行循环体，执行完循环体再执行表达式3；再判断表达式2是否为true,如果为true执行循环体，执行完循环体再执行表达式3；
依此类推，直到表达式2的结果为false，循环结束
sum1 = 0
for(num=1;num<=100;num++){
sum1 += num
}
console.log(sum1)
2）while循环
2.1）while循环
while(条件语句){
循环体
}
2.2）do-while循环
do{
循环体
}while(条件语句)
相当于python中的以下结构:
循环体
while(条件语句){
循环体
}
- 执行过程：
执行循环体，判断条件语句是否为true,为true再执行循环体
执行完循环体又判断条件语句是否为true
以此类推，直到条件语句为false循环结束
sum1 = 0
for(num=1;num<=100;num++){
sum1 += num
}
console.log(sum1)
sum1 = 0
num = 1
while(num<=100){
sum1 += num
num++
}
console.log(sum1)
sum1 = 0
num = 1
for(;num<=100;){
sum1 += num
num++
}
console.log(sum1)
3）练习
//练习: 打印所有的水仙花数
//153 == 1**3+5**3+3**3
console.log('===========================')
for (num=100;num<=999;num++) {
ge = num % 10
shi = parseInt(num/10)%10
bai = parseInt(num/100)
if (ge**3 + shi**3 + bai**3 == num){
console.log(num)
}
9. 函数
1）语法
function 函数名(参数列表){
函数体
}
2）位置参数有效
3）关键参数不报错，但是顺序无效
4）参数可以设置默认值(有默认值的参数要在后面)
function sum(num1, num2=20){
console.log(num1, num2, num1+num2)
}
错误写法：
function sum1(num1=10, num2){
console.log(num1, num2, num1+num2)
}
sum1(20) // 20 undefined NaN(无效数字)
5）不支持不定长参数
6）声明函数其实就是声明一个类型是Function的变量
function sum3(num1, num2){
return num1+num2
}
console.log(sum3(23, 45))
//声明函数其实就是声明一个类型是Function的变量
x = sum3
console.log(typeof(x))
console.log(x(90, 9))
7）匿名函数
function (参数列表){
函数体
}
func1 = function(x, y){
console.log(x, y, x+y)
return x+y
}
func1(1, 2)
a = function(x, y){
console.log(x, y, x+y)
return x+y
}(10, 20)
console.log(a) // 30
10. 字符串
- 单引号或者双引号引起来的字符集，支持转义字符和编码字符
1）获取字符
- 字符串[下标]
- js中不支持[ ]对应的切片语法，但是有相应的方法
- 注意:
下标只有正值，没有负的;
下标越界不会报错，获取到的值是undefined
2）相关操作
- 加法运算：支持字符串和任何数据相加, 如果另外一个数据不是字符串就先转换成字符串再进行拼接操作
console.log('abc'+'hello') //abchello
console.log('abc'+123) // abc123
- 比较运算：和python一样
- 字符串长度：字符串.length
console.log(str2.length)
3）相关方法
- 字符串.charCodeAt(下标)：获取指定下标字符对应的编码值
- 字符串.match(正则表达式)：查看字符串与正则表达式是否匹配，相当于python中的re.match（同：正则表达式.test(字符串)，这个的返回值是布尔值）
- 字符串.slice(开始下标,结束下标)：切片，结束下标取不到
// 创建一个对象可在控制台显示相关方法列表
str2 = new String('hello world')
console.log(str2)
//1)字符串.charCodeAt(下标)
console.log(str2.charCodeAt(0))
//2)字符串.match(正则表达式),相当于python中的re.match
re = /\d{3}[a-z]{3}/
console.log('234abc====='.match(re))
//3)字符串.slice(开始下标,结束下标)
console.log(str2.slice(0, 3))
4）字符串占位符
name = '小明'
age = 18
str1 = `我叫${name}，今年${age}岁` // 注意外面这个不是单引号，是tab键上面那个键
console.log(str1)
11. 数组
1）查
- 获取单个元素：数组[下标]
- 不支持切片；下标越界不会报错，获取到的值是undefined
- 遍历：遍历的是下标不是元素，且返回的该下标是字符串类型
arr1 = [10, 2, 30, 4, 5]
for(index in arr1){
console.log('index:'+index, arr1[index])
}
补充：
allData.forEach(function(item,index,arr){
console.log(item) // 打印元素
console.log(index) // 打印下标
console.log(arr) // 打印数组
})
2）增
-
数组.push(元素)：在数组的最后添加元素
-
数组.splice(下标，0，元素)：在指定的下标前插入指定的元素
-
数组.splice(下标，0，元素1，元素2)：在指定的下标前插入多个元素
3）删
-
数组.pop()：取出数组中的最后一个元素
-
数组.shift()：取出数组中的第一个元素
- 数组.splice(开始删除的下标，删除的个数)
4）改
5）排序
- 数组.sort（函数对象）
- 函数对象：函数，有两个参数，代表数组中的两个元素，返回值代表排序方法
nums = [90 ,23, 56, 7, 89, 70]
//数组元素从大到小排序
nums.sort(function(a,b){return b-a})
console.log(nums)
//数组元素从小到大排序
nums.sort(function(a,b){return a-b})
console.log(nums)
students = [
{name:'小明', age:18, score:90},
{name:'小花', age:20, score:70},
{name:'小红', age:15, score:78},
{name:'小李', age:30, score:60}
]
//将数组元素按照元素的age属性从小到大排序
students.sort(function(a,b){return a.age - b.age})
console.log(students)
//将数组元素按照元素的score属性从大到小排序
students.sort(function(a,b){return b.score - a.score})
console.log(students)
12. 对象
1）什么是对象
- 和python类的对象一样，主要由对象属性和对象方法组成
2）创建对象
2.1）对象值
obj1 = {
name: '余婷',
age: 18,
gender:'女'
}
console.log(typeof(obj1), obj1)
2.2）new 类型()
obj2 = new Object()
console.log(typeof(obj2), obj2)
obj2.name = '小明'
console.log(obj2)
2.3）构造方法：一个用来创建对象的函数
- 函数名相当于类名，首字母要大写
- 函数的功能是通过this添加对象属性和对象方法（这儿的this就相当于self）
- 返回值是this
function Person(name, age, gender='男'){
// 通过new的方式调用, this：Person {}
// 直接调用, this： Window
console.log(this)
//添加对象属性
this.name = name
this.age = age
this.gender = gender
//添加对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
return this
}
=================== js中每个普通函数都有默认的this和window ==================
function func1(){
console.log('普通函数')
console.log(this)
}
func1() //window.func1()
num = 100 // window.num=100
console.log(num, window.num)
3）使用构造方法创建对象
p1 = new Person('小花', 20, '女')
p2 = new Person('小明', 35)
4）通过对象使用对象属性和调用对象方法
p1.name = '小花花'
console.log(p1.name, p1['name']) #p1['name']这种方法使用对象属性必须加引号
p1.eat('面条')
p2.eat('面包')
5）添加/修改属性
p1.height = 160
console.log(p1, p2)
