1.认识js
1.什么是js
js是javascript的缩写，是一门专门用来处理网页中的行为的脚本语言，也是web标准中的行为标准
javascript和java没有关系
2.在什么地方写js代码
（window.alert()）--网页上面弹出一个对话框
内联的：写在标签事件相关的属性中，例如onclick属性，属性值是js代码
内部的js:写在script标签的内容中,script标签理论上是可以放在整个html文件的任意位置，
但是一般放在head或body中
外部的js:写在外部的一个js文件中（后缀是.js的文件）中，然后再通过script标签设置src设置的值为js文件地址来导入
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 内部js -->
<script type="text/javascript">
window.alert('script标签中的js')
</script>
<script type="text/javascript" scr="js/index.js">
</script>
</head>
<body>
<!-- 内联js -->
<button onclick="window.alert">点一下</button>
</body>
</html>
3.js能做什么事情
a.js可以去修改标签中的内容
b.修改标签中的样式
c.插入html代码
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- 插入html代码 -->
<script type="text/javascript">
document.write('<p>插入段落</p>')
</script>
<p id="p1">python基础</p>
<!-- 修改标签中内容 -->
<button onclick="document.getElementById('p1').innerHTML =' js基础'">修改</button>
<!-- 修改标签的样式 -->
<button onclick="document.getElementById('p1').style.color = 'red'">修改样式</button>
</body>
</html>
2.js基础语法
<script type="text/javascript">
//1.注释(和c注释一样）)
//单行注释
/*
多行注释
多行注释
多行注释
2.标识符
标识符就是用来命名的是由字母，数字，下划线和
console.log()-->在控制台打印括号中的内容
console.log(abc)
3.常用数据类型
数字类型(Number),布尔(Boolean),字符串(String),数组(Array),对象(Object),函数(functipn)等
数字类型(Number):包含所有的数字(整数和小数)支持科学奇数法,不支持虚数
*/
100
12.3
-100
-23.3
console.log(2e2)
//布尔(Boolean):true和false
true
false
//字符串(String):用双引号或者单引号括起来的
'abc'
"abc"
//数组(Array):相当于Python中列表
[12,22,34,'abc',[1,2]]
//对象(Object):python中对象和字典的结合
var p1= {
name:'王秋容',
age:20,
sex:'女'
}
//函数(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(一般用来清空变量)
//4.格式:js没有缩进的要求
</script>
3.变量
/*
语法：
var 变量名
变量名 = 值
说明：
var-是js关键字，声明变量的时候用,var可以省略，省略的时候变量名必须赋值，
不省略的时候变量名后可以赋值，也可以不赋值，不赋值的时候默认值是underfined
变量名-标识符，不能是关键字，驼峰式命名规范
*/
//声明一个变量
<script type="text/javascript">
var name1
console.log(name1)
var name2 = '小明'
console.log(name1)
name3 = 'abc'
console.log(name1)
//同时声明多个变量
var age=18, sex,score=100
console.log(age,sex,score)
age1 =10, sex1='男'
console.log(sex1,age1)
//变量中的值
age = '少年'
console.log(age)
</script>
4.运算符
<script type="text/javascript">
//js中支持:数学运算符,比较运算符,逻辑运算符,赋值运算符,位运算符
//1.数学运算符:+,-,,/,%,(js7),++,--
//+,-,,/,%,和Python一样,但是js中不支持整除(//)
console.log(20+10,20-10,2010,5/2,5%2,5*2)
//++(自加1),--(自减1)
//变量++,++变量,变量--,--变量(注意：变量必须要有值)
//注意赋值的时候++和--写在变量的前面和后面对应的效果不一样
var number = 10
number++ //让number的值加1, number += 1
//++number 让number的值加1 number +=1
console.log(number)
number--
//--number
console.log(number)
var number1 = 1, number2
number2 = number1++ //相当于:number2=number1, number+=1
console.log(number1,number2) //2,1
var number11 = 1, number22
// number22 = ++numbe11 //相当于:number11+=1, number22=number11
console.log(number11,number22) //2,2
//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一样
console.log(1&2,1|2,1^2,~1,2>>1,2<<1)
</script>
5.分之结构
<script type="text/javascript">
//js中的分之结构有两个,分别是if和switch语句
/*
1.if语句
结构：
if（条件语句）{
代码段
}
说明：
if-是关键字
（）{}-固定写法
执行过程：判断条件语句是否为true，为true就执行{}中的代码（不管缩进问题）
number = 10
if(number %2 == 0){
console.log('是偶数')
console.log('====')
}
b.if-else结构：
if(条件语句){
代码段1
}else{
代码段2
}
number2 = 10
if(number2 %2==0){
console.log(number2, '是偶数' )
}else{
console.log(number2 ,'是奇数' )
}
c.if-else if-else结构
if(条件语句){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}else{
代码段4
}
else if 相当于Python中的elif
/
/
2.switch语句
结构：
switch(变量、表达式){
case 值1：{
代码段1
}
case 值2{
代码段2
}
case 值3{
代码段3
}
.....
default:{
代码段4
}
}
执行过程：先计算表达式的值，然后从上往下，一一和case后面的值进行比较，然后找到第一个和表达式相等的case
然后将这个case作为结果，依次执行后边所有的代码段，直到执行完或者遇到 break为止
如果没有哪个和case的值和表达式的值一样，就直接执行default后面的代码段
default可以省略
num = 10
switch(num){
case 1:
console.log('1')
case 2:
console.log('2')
case 10:
console.log('10')
case 11:
console.log('11')
default:
console.log('default')
}
//练习:从服务器获取到的星期对应的值是0-6,在程序中对应打印出其对应的星期值(周一到周天)
week = 1
switch(week){
case 0:
console.log('星期一')
break
case 1:
console.log('星期二')
break
case 2:
console.log('星期三')
break
case 3:
console.log('星期四')
break
case4:
console.log('星期五')
break
case 5:
console.log('星期六')
break
case 6:
console.log('星期日')
}
//练习:有一个变量存的是绩点(整数：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('优秀')
break
default:
console.log('成绩有误')
}
</script>
6.for循环
<script type="text/javascript">
js中的循环有for和while循环
1.for循环
a.for-in和Python的for循环的执行过程一样
for 变量 in 序列{
循环体
}
注意：取出来的是元素的下标或者key（属性名）
序列可以是字符串，数字和对象
str1 = 'abc'
for( i in 'str1'){
console.log(str1[i])
}
arr = [12,23,45]
for (i in arr ){
console.log(i, arr[i])
}
Object1 = {name:'小明', age:18}
for (i in Object1){
console.log(i, Object1[i])
}
b.c的for循环结构：
for（表达式1；表达式2，表达式3）{
循环体
}
执行过程：先执行表达式1，再判断表达式2的结果是否为true，为true就执行循环体，执行完循环体再判断表达式3
再判断表达式2是否为true，为true执行循环体，执行完循环体再执行表达式3，依次类推，直到表达式2的结果为false，整个循环结束
指导思想：语句1-里面写循环开始前的准备工作
表达式2-控制循环次数的
语句3-改变循环次数
*/
//计算:1+2+3+....10
for(num1 = 1, sum1 = 0;num1<=100;num1+=1){
sum1+=num1
}
console.log(sum1)
</script>
7.函数
<script type="text/javascript">
//js函数分为声明和调用,声明的时候不会执行函数体,只有调用的时候才会执行函数体
/*
1.函数的声明
a.和Python相同的声明方式
function 函数名 （参数列表）{
函数体
return 返回值
}
说明：
function-声明函数的关键字
函数名-驼峰式命名，见名之义
参数列表-参数如果没有设置默认值，相当于设置默认值为undefined
返回值-没有return返回值是undefined
b.以声明函数变量的形式声明函数
函数名 = function （参数列表）{
函数体
return 返回值
}
function sum1(num1 = 1, num2 = 2){
console.log('求两个数的和',num1,num2)
return num1+num2
}
mul = function (num1, num2){
console.log('求两个数的乘积',num1,num2)
return num1*num2
}
sum1(10,20)
sum1 ()
console.log(mul(2,3))
</script>
/*函数的调用
函数名（实参列表）
调用的时候保证每个参数都有值
只能通过位置参数传参
js中不支持不定长参数
7.字符串
<script type="text/javascript">
字符串：由单引号或者双引号括起来的
1.转义字符：和Python一样
2.字符串的长度：字符串.length
3.获取单个字符：字符串[下标]
注意：下标的取值范围是0-长度-1，超出范围取到的是 undefined
js中没有切片语句
//转义字符
console.log('abc\n123')
console.log('\tabc\'123')
//字符串长度
console.log('abc'.length)
//获取单个字符
str1 = 'abcdf'
console.log(str1[1])
4.相关运算符
+--将两个字符串拼接在一起产生一个新的字符串
注意：如果是一个字符串加上其他的数据，会先将其他数据转换成字符串再相加
js不支持*运算符
比较运算（>,<,==,!==,===,!===）
,<-->和Python一样，函数比字符编码值的大小
console.log('abc'+'123')
console.log('abc'+100,'abc'+[1,2,3],'abc'+true)
str1 = new String([10,20,30])
console.log(str1)
// console.log('abc'*3) NaN-->是数字类型中的特殊值,表示一个不存在的数字
//console.log(10/0) Infinty-->无穷大
console.log('abc' > 'abbbbb' )
//5.相关方法(看菜鸟的表)
//match(正则表达式)-根据正则表达式的匹配结果
str1 = 'afd466fgdgfdssdddvddf3243'
result = str1.match(/[a-z]+/)
console.log(result)
result = str1.replace(/\d/m, '*' )
console.log(result)
</script>
8.数组
<script type="text/javascript">
/*
数组就是Python中的列表
1.数组是有序，可变的,里面的元素可以是任意类型
2.增删改查
/
/
a.查(获取数组中的元素)
数组[下标]
数组.slice(开始下标，结束下标)--切片
arr1 = [1,2,3,'abc']
console.log(arr1[3])
result = arr1.slice(0,3)
console.log(result,arr1)
//获取数组的长度
console.log(arr1.length)
b.增（添加元素）
数组.push(元素)-将元素添加到数组的最后
arr1.push('hello')
console.log(arr1)
c.删（删除元素）
数组.pop()-删除最后一个元素
数组.splice(开始删除下标，删除的歌)--从数组指定的下标开始删除指定个数元素
arr1.pop()
console.log(arr1)
arr1.splice(0,1)
console.log(arr1)
d.改（修改元素的值）
数组[下标]=新值-修改指定下标的元素
arr1 = [1,2,3,4,5, 'abc' ]
arr1[0] = 10
console.log(arr1)
arr1.splice(1,2,'a','b')
console.log(arr1)
</script>
9.对象
<script type="text/javascript">
//js中没有Python的类,只有对象和构造方法
/*
1.对象的字面量
{属性名：属性值，属性名2：属性值2...}
p1={
//对象属性
name:'小明',
age:18,
tel:243365687,
//对象方法
eat:function(){
console.log('吃饭')
}
}
/*
2.使用对象属性
对象 [属性名]
对象.属性
*/
console.log(p1['name'],p1.name)
p1.eat()
/*
3.构造方法-用来创建对象的
function 类名（参数列表）{
this.属性1 = 属性值1
this.属性2 = 属性值2
....
return this
}
这儿的this类似Python中的self，表示当前对象
*/
function Person(name, age = 18){
this.name = name
this.age = age
this.tel = ''
this.sex = '男'
//对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
return this
}
p2 = Person('小明')
p2.tel= '12345678'
p2.eat('面条')
网友评论