day25 js基础语法
1就是简介
1.1 什么是js
js是JavaScript的缩写。是web标准中的行为标准。负责网页中变化的部分
1.2在哪儿写js代码
a.写在标签的事件相关属性中,例如按钮的oncliked属性
<button onclick="window.alert('你好!')">点我</button>
b.写在script标签中(将js代码作为script标签的内容)
注意:script标签理论上可以放在html中的任何位置,但是一般放在head或者body中
c.写在js文件中,在html中通过script标签将文件导入(src属性值就是要导入的js文件的路径)
<script type="text/javascript" src="js/index.js"></script>
1.3js能做什么
1.在网页的指定位置插入标签
2.修改网页中标签的内容
<!--b.修改标签内容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerHTML='我是JavaScript'">修改内容</button>
3.修改标签样式
<!--c.修改标签的样式-->
<button onclick="document.getElementById('p1').style='color:red;font-size:30px;'">修改样式</button>
<!--换图片-->
<img id="img1" src="img/l-icon.png"/>
<button onclick="document.getElementById('img1').src='img/pwd-icons-new.png'">换图片</button>
1.4怎么写js代码
JavaScript是一门编程语言,和python一样是动态语言也是脚本语言。但和Java没有关系
补充:window.alert(信息)-js代码,在浏览器上弹出一个对话框,对话框显示指定的信息
2基本语法
2.1控制台输出
console.log(输出的内容) - 和print的功能一样
2.2注释
//单行注释
/*多行注释
多行注释
*/
2.3标识符
由字母数字下划线和$组成,数字不能开头。
2.4 行和缩进
从语法角度,js代码怎么换行和缩进都无所谓。js中通过{}来确定代码块
2.5常见的数据类型
a.数字(Number,包含所有的数字,包括整数和小数,支持科学计数法,不支持虚数)
b.布尔(Boolean)-只有两个值true和false,这两个值是关键字
c.字符串(String)-使用单引号或双引号引起来的字符集
d.数组(Array)-相当于python中的列表,[12,‘zbc’,true]
e.对象(Object)-相当于python中的字典和对象,{}
f.函数(Function)-相当于python中的函数
js中两个特殊的值-undefined(没有,空)和null(清空);
3变量
3.1变量的声明
语法1:变量名=值
变量名-标识符,不能是关键字;驼峰式命名(第一个单词首字母小写,后面每个单词首字母大写);见名知义。
语法二:var 变量名=值 或 var 变量名
var-声明变量的关键字
区别:声明的时候加var,变量可以不用赋值,默认是undefined;不加var就必须赋值,否则报错
变量需先声明才能使用
同时声明多个变量,赋一样的值
a1=a2=a3=10
同时声明多个变量,赋不同的值
var b1=1,b2=2,b3=3
4运算符
4.1数学运算符:+,-,*,/,%,++,--
前面五个运算符和python一模一样
++,--都是单目运算符,使用方式变量++/--,++/--变量
a.++ - 自加1运算;让变量本身的值加1
b.-- - 自减1运算;让变量本身的值减1
用一个变量单独使用++/--的时候,++/--放前面和放后面效果一样
如果是使用++/--运算的结果给另一个变量赋值,++/--放前面是先自加/自减在赋值,放后面是先赋值在自加/自减
4.2比较运算符 >,<,==,!=,>=,<=,===,!==
结果是布尔值
比较大小的和python一样
a.==:相等(判断值是否相等)
b.===:完全相等(判断值和类型是否完全相等),相当于python中的==,!==相当于python中的不等
console.log(5==5) // true
console.log(5=='5') // true
console.log(5!=5) // false
console.log(5!='5') // false
console.log(5===5) // true
console.log(5==='5') // false
console.log(5!==5) // false
console.log(5!=='5') // true
4.3逻辑运算符 &&(逻辑与)、||(逻辑或)、!(逻辑非)
运算规则和使用方式和python的逻辑运算义一模一样
4.4 赋值运算符:=,+=,-=,*=,/=,%=
和python一模一样
4.5三目运算符
条件语句?值1:值2 - 判断条件语句的值是否为true,为true整个表达式的结果是值1否则是值2
age=18
console.log(age>=18?'成年':'未成年')
4.6运算顺序
数学>比较>逻辑>赋值
如果有括号,先算括号里面的
5 分支结构
js中的分支结构有两种:if和switch
5.1 if语句
a.if(条件语句){
满足条件会执行的代码
}
b.if-else
if(条件语句){
代码段1
}else{
代码段2
}
c.if -else if -else
if(条件语句){
代码段1
} else if(条件语句){
代码段2
} else{
代码段3
}
执行过程和python一模一样
5.2 switch语句
a.结构:
switch(表达式){
case 值1:
代码段1
case 值2:
代码段2
default:
代码段3
}
b.执行过程:
使用表达式的值依次和case后面的值进行比较,找到第一个和表达式的值相等的case,
将这个case作为入口,依次执行后面所有的代码,直到执行完成或者遇到break为止。
如果每个case的值都和表达式的值不相等,就执行default后面的代码
注意:case后面必须是一个有结果的表达式
num=11
switch(num){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('不及格')
break
case 6:
console.log('及格')
break
case 7:
case 8:
console.log('良好')
break
case 9:
case 10:
console.log('优秀')
break
default:
console.log('成绩有误')
}
6 循环结构
js中有for循环和while循环两种
6.1 for循环
a.for -in
for(变量 in序列){
循环体
}
执行过程和python一样,但是变量取到的不是元素,而是下标/key(属性名)
序列-字符串,数组,对象
b.c的for循环
for(表达式1;表达式2;表达式3){
循环体
}
执行过程:先执行表达式1;判断表达式2的值是否为true,如果为true执行循环体,执行完循环体在执行表达式3,在重复上述步骤
for (i=1,sum1=0;i<=100;i++) {
sum1 += i
}
console.log(sum1)
6.2while循环
a.while循环
while(条件语句){
循环体
}
执行过程和python一模一样
b.do-while循环
do{
循环体
}while(条件语句)
区别:do-while的循环体至少会执行一次
sum1=0
a=1
do{
sum1+=a
a++
}while ( a<=100 )
console.log(sum1)
7 函数
7.1 函数的声明
function 函数名(参数列表){
函数体
}
js中的函数除了声明的关键字不一样,其他的都一样
参数可以设置默认值,也可以通过关键字参数来调用函数
function sum(num1,num2=8){
console.log('求两个数的和')
return num1+num2
}
console.log(sum(5))
console.log(sum(num1=2))
js中所有的函数都有返回值,默认是undefined
7.2匿名函数
函数名=function(参数列表){函数体}
func2=function(a,b){
console.log(a,b)
return a*b
}
func2(3,4)
7.3变量的作用域
a.全局变量:只要声明在函数外面的变量就是全局变量;在函数中以‘变量名=值’的形式声明的变量也是全局的
b.局部变量:以var关键字声明在函数中的变量才是局部变量
var1=1000 //这是一个全局变量
var var2='abc'
function abc(){
var3=111 //这是一个全局变量
var var4=222 //这是一个局部变量
console.log(var1,var2)
}
abc()
console.log(var3)
8字符串
8.1 字符串字面量
a.使用双引号或者单引号括起来的字符集
b.除了普通字符以外还可以是转义字符:\n,\t,\,',"
c.\U4位16进制值对应的Unicode编码,\u4e00
str1='abc\"123\u4e02'
console.log(str1)
8.2获取字符
字符串[下标]-获取单个字符
下标-范围是0-长度-1;下标如果越界取到的值是undefined
js中没有切片语法
8.3相关运算
支持字符串和其他任何数据相加(将其他数据全部转换成字符串,然后再拼接)
不支持*,in,not in等操作
NaN - js中一个特殊的值,类似undefined、null,用来表示一个不存在的数值
str2='abc'
console.log(str2+'123')
console.log(str2+[1,'abc',2])
js中数据类型转换: 类型名()
num_str=String(123)
str_num=Number('23.45')
arr_str=String([1,true,'abc'])
console.log(arr_str)
8.4字符串长度
console.log('hello world'.length)
str3='abc' //string类型
str4=new String('abc') //object类型
console.log(str3[1],str4[1])
console.log(str3==str4,str3===str4)
8.5字符串相关方法
function y_print(aa){
console.log(aa)
}
y_print('abc'.charAt(2)) //c
y_print(String.fromCharCode(65)) //将编码转换成字符
result='abcd12abc23hhh123'.match(/\d+/)
for(index in result){
y_print(index)
}
8.6数组
js中的数组只需要关注:a.怎么获取数组中的元素 b.数组对应的方法 c.元素可以是任何类型
arr=[1,'abc',true]
y_print(arr)
arr1=[1,27,5,8]
new_arr1=arr1.sort(function(a,b){return b-a})
y_print(new_arr1)