JS语言基础
什么是js？js能做什么？
<!DOCTYPE html>
<!--1.什么是js
js是javascript的缩写，是一门唯一的用来控制网页内容的脚本语言；
是web标准中的行为标准-用来控制网页内容的变化
2.js写在什么位置
内联 - 将js代码写在标签的事件相关属性中 例如：onclick属性
内部 - 将js代码写在script标签中，既可以放在head中也可以放到body中
外部js - 将js代码写在js文件中，然后通过script标签导入
3.js在网页中能做什么
a.修改标签内容
b.修改标签属性
c.修改标签样式
d.添加内容
4.怎么写js代码
js语法
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入js文件 -->
<!-- <script src="js/index.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<!-- 1.内联 -->
<button onclick="alert('这是一个内联js!')">按钮</button>
<!--2.内部js -->
<!-- <script type="text/javascript">
alert('这是一个内部js！')
</script>
-->
<!-- 3.外部js文件 -->
<!-- <script src="js/index.js" type="text/javascript" charset="utf-8"></script> -->
<!-- a.修改属性 -->
<p id="p1">我是段落1</p>
<button onclick="document.getElementById('p1').innerText='hello js!'">修改内容</button>
<br>
<!-- b.修改标签属性 -->
<img src="img/aaa.ico" id="img1"><br>
<button onclick="document.getElementById('img1').src='img/fuffy.jpg'">修改图片</button>
<br>
<!-- c.修改标签样式 -->
<p id="p2">哈哈</p>
<button onclick="document.getElementById('p2').style='font-size:25px; color:red;'">修改标签样式</button>
<br>
<!-- d.添加内容 -->
<script type="text/javascript">
for(x=1;x<=4;x++){
document.write('<h1>我是标题'+x+'</h1>')
}
</script>
</body>
</html>
js语法基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 1.注释
// 单行注释:在注释文字前加//
/* 多行注释1
多行注释2
*/
// 2.标识符
// 由字母/数字/下划线和$组成,数字不能开头(注意$不轻易使用,在jq中有特殊意义)
num = 30
// alert(num)
console.log('num='+num) // 在控制台打印,相当于python的print
// 3.关键字
// for.if.var.while......
// 4.数据类型(类型名首字母大写)
/*
1.类型
Number(数字) - 包括所有整数和小数,支持科学计数法
String(字符串) - 既可以是单引号也可以是双引号引起来的字符集，也支持转义字符和编码字符
Boolean(布尔) - 只有true和false
Array(数组) - 相当于python中的列表，用中括号括起来的多个元素
Object(对象) - 类似python对象和字典的结合
*/
// 2.typeof()函数-获取数据对应的类型
console.log(typeof(num))// 输出数字
str1 = '你好！'
console.log(str1) // 输出字符串
list1 = [15,26,28,40]
console.log(list1) // 输出数组
console.log(typeof(list1))
obj1 = {
'name':'小明',
'age':18,
'sex':'男'
}
console.log(obj1, typeof(obj1))
console.log(obj1['name'], obj1.name)
// 3.类型名(数据) - 数据转换
// parseFloat() - 数据转换成小数
// parseInt() - 数据转换成整数
console.log(String(100), typeof(String(100)))
// 5.语句
/*
一般情况下一行只写一条语句,语句结束可以有分号也可以没有分号;
如果一行有多条语句,语句之间必须加分号
缩进无要求
大小写敏感
*/
</script>
变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.声明变量的语法
/*
1).语法1
变量= 值
2).语法2
var 变量名/ var 变量名= 值
3).说明
变量名 - 标识符、不能是关键字；采用驼峰式命名
声明变冷了如果没有给变量赋值（语法2才支持），变量的默认值是undefined
*/
num1 = 100
console.log(num1)
var num2
console.log(num2)
studentName = '张三'
console.log(studentName)
//同时声明多个变量赋相同的值
a = b = c = 10
console.log(a,b,c)
//同时声明多个变量,赋不同的值
var a1, b = 10, c = 30
console.log(a1,b,c)
</script>
运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js支持的运算符/比较运算符/逻辑运算符/赋值运算符/位运算符
//1.数学运算符:+,-,*,/,%,++,--
console.log(10+20, 30-10, 5*4, 2/4, 10%20)
//2.自加自减运算
//a.自加1运算: 变量++, ++变量
num = 10
num++ //num += 1
console.log(num) // 11
++num
console.log(num) // 12
//b.自减1运算: 变量-- ,--变量
num = 10
num-- //num -= 1
console.log(num) // 9
--num
console.log(num) // 8
// 3.自加自减的坑
num = 10
num2 = num++ // 先赋值 再+1
console.log(num2)
num = 10
num2 = ++num// 先+1 再赋值
console.log(num2)
//3.比较运算符:>,<,==,!=,>=,<=,===,!==
//比较大小和python一样
// == 判断值是否相同(不管类型)
// === 同时判断值和类型是否相等(python中的==)
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(5 != '5') // false
console.log(5 !== '5') // true
//支持表示范围的连续写法
num = 10
resault = 0 < num < 100
console.log(resault)
//4.逻辑运算: &&(逻辑与运算).||(逻辑或运算).！(逻辑非运算)
//和python中and . or .not功能一样
console.log(true && true, true && false)
console.log(true || true, true || false)
console.log(!true)
//5.赋值运算符:=, +=, -=, *=, /=, %=
//和python一样
//6.符合运算和python一样
//7.三目运算符 - 条件表达式？值1:值2
//表达的结果成立值为1,不成立为值2
console.log(5>3?'嗯！是的':'不是的！')
</script>
分支结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js有if和switch分支结构
//1.if分支结构
/*
1）.结构1: if
if(条件语句){
满足条件执行的代码块
}
2）.结构2：if - else
if(条件语句){
满足条件执行
}else{
不满足条件执行
}
3）.结构3：if-else if-else
if（条件语句1）{
满足条件1执行的代码块
}else if（条件语句2）{
满足条件2执行的代码块
}else{
都不满足执行的代码块
}
//2.switch
1）.语法：
switch（表达式）{
case 值1：
代码块1
case 值2：
代码块2
case 值3：
代码块3
.....
default:
代码块n
}
2).执行过程
先计算表达式的结果，然后让这个既然如果按顺序一一和每个case比对，如果case的值和表达式相等，就将这个case
作为入口，执行对应case后面的代码块，直到代码执行完或者遇到break为止，如果每个case的值和表达式不想等，则
执行default对应的代码，没有default则什么都不执行
*/
switch (3){
case 1:
console.log('表达式1')
case 2:
console.log('表达式2')
case 3:
console.log('表达式3')
break
case 4:
console.log('表达式4')
case 5:
console.log('表达式5')
default:
console.log('啥都没有')
}
</script>
循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中的循环分为for循环和while循环
//1.for循环
/*
1.for - in循环
for（变量 in 序列）{
循环体
}
让变量依次获取序列中元素的下标（下标/属性名），一个个取，去完位置，每取一次执行一次循环体
*/
str1 = 'abc'
for(x in str1){
console.log(x, str1[x])
}
/*
2.C中的for循环
for（表达式1；表达式2；表达式3）{
循环体
}
执行过程：先执行表达式1，再判断表达式2的值是否为true；如果为true执行循环体
执行完循环体再执行表达式3
...
以此类推，直到表达式2的结果为false，循环结束
*/
sum1 = 0
for (x=1;x<=100;x++) {
sum1 += x
}
console.log(sum1)
/*
2.while循环
1）.while循环
while（条件语句）{
循环体
}
执行过程和python一样
2）.do - while循环
do{
循环体
}while（条件语句）
执行过程：先执行循环体，在进行条件判断，直到条件不满足为止
*/
sum1 = 0
y = 1
while(y<=100){
sum1 += y
y++
}
console.log(sum1)
//练习:打印所有的水仙花数
console.log('三位数的水仙花数有：')
for (x=100; x<=999;x++) {
ge = x % 10
shi = parseInt(x /10)%10
bai = parseInt(x / 100)
if(ge**3 + shi**3 + bai**3 == x){
console.log(x)
}
}
</script>
函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
/*
1.语法
function 函数名（参数列表）{
函数体
}
*/
function sum(num1, num2=20){
console.log(num1,'+',num2,'的和=',num1+num2)
}
//位置参数有效
sum(5,6)
//参数可以设置默认值
sum(10)
//不支持不定长参数
x = sum //声明函数其实就是声明一个类型是Function的变量
/*
2.匿名函数
function（参数列表）{
函数体
}
*/
func1 = function(x,y){
console.log(x,'+',y,'的和=',x+y)
return x+y
}
func1(3,6)
a = function(x,y){
console.log(x,'+',y,'的和=',x+y)
return x+y
}(8,9) // 声明完立即调用
console.log(a)
</script>
字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.字符串
//单引号或者双引号引起来的字符集,支持转义字符和字符编码
str1 ='hello world'
//2.获取字符
/*字符串[下标] ：
a.下标只有0-长度-1的正值,没有负值
b.下标越界不会报错,获取到的值是undefined位置
*/
console.log(str1[0])
//js中不支持[]对应的切边方法,但是有相应的方法
//3.相关操作
// 1).加法运算:支持字符串和任何数据相加,如果另外一个数据不是字符串就先转化成字符出啊安再进行拼接操作
console.log('abc'+100) // abc100
//2.比较运算:和python一样
//3.字符串长度:字符串.length
str2 = 'dhbsjdbsdhb'
console.log(str2.length)
str3 = new String('hello world')
console.log(str3)
//相关方法
//1.字符串.charCodeAt(下标)
console.log(str3.charCodeAt(0))
//2.字符串.mach(正则表达式)
re = /[a-zA-Z]+ [a-zA-Z]+/
console.log(str3.match(re))
//3.字符串.slice(开始下标，结束下标)
console.log(str3.slice(0,3))
</script>
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中的数组相当于python中的列表
//数组的相关操作
//1.查
arr1 = [10, 2, 30, 4, 5]
// a.获取单个元素:数组[下标]
console.log(arr1[3])
//b.遍历
for(index in arr1){
console.log(index,arr1[index])
}
//2.增
//数组的push(元素) - 在数组的最后添加元素
arr1.push(100)
console.log(arr1)
//数组.splice(下标，0 ，元素1，元素2...) - 在指定的下标前插入指定的元素
//3.删
//数组.pop() - 取出数组中的最后一个元素
re = arr1.pop()
console.log(arr1, re)
//数组.shift() - 删除数组中的第一个元素
//数组.splice(开始下标，删除的个数)
//4.改
//数组[下标] = 值
arr1[0] = 200
console.log(arr1)
// 5.排序
//sort(函数对象) - 函数,有两个参数(代表数组中的两个元素),返回值代表排序方法
nums = [5, 32, 78, 23, 9]
nums.sort(function(a,b){return a-b}) //数组元素从小到大排序
console.log(nums)
nums.sort(function(a,b){return b-a}) //数组元素从大到小排序
console.log(nums)
students =[
{name:'张三',age:18,score:80},
{name:'李四',age:23,score:76},
{name:'王二',age:59,score:33},
{name:'小明',age:98,score:12}
]
students.sort(function(a, b){return a.age - b.age}) // 按照年龄从小到大排序
console.log(students)
students.sort(function(a, b){return a.score - b.score}) // 按照分数从小到大排序
console.log(students)
</script>
对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.什么是对象
//和python类的对象一样,主要由对象属性和对象方法组成
//2.创建对象
// 1).对象值
obj1 = {
name: '张三',
age: 18,
gender: '女'
}
console.log(typeof(obj1), obj1)
// 2). new 类型()
obj2 = new Object()
console.log(typeof(obj2), obj2)
//3.构造方法 - 一个用来创建对象的函数
// 1).函数名相当于类名,首字母要大写
// 2).函数的功能是通过this添加对象属性和对象方法(这儿的this相当于self)
function Person(name,age,gender){
this.name = name
this.age = age
this.gender = gender
//添加对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
return this
}
//4.使用构造方法创建对象
// 对象 = 构造方法
p1 = new Person('张三',18,'女')
//5.通过对象调用对象 方法
p1.eat('屎')
//6.添加/修改属性
//对象.属性 = 值
p1.height = 160
console.log(p1)
</script>
