01-基础
1.什么是js
js是Javascript的缩写,是一门专门用来控制网页内容的行为的脚本语言
js就是web标准中的行为标准
2.在哪儿写js代码
- a.写在标签的行为相关的属性中,比如按钮的onclicked
- b.写在script标签中吗,(script标签可以放在html中的任何位置,但是一般情况下还是放在head或者body中)
+c.写在外部的js文件中,然后通过script标签导入,通过设置src属性为js文件的路径
3.js能做些什么事情 - a.js可以在网页中插入html代码
- b.可以修改标签内的内容
- c.修改标签的样式
中秋节快乐
02-基础语法
//1.注释
//单行注释就是在前面加“//”
/这个是多行注释/
//2.标识符
//要求是由字母,数字,下划线和12
//3.js中大小写敏感
//4.基本数据类型
//a.Number(数字-包含所有的数字)、Boolean(布尔类型)、String(字符串)、Array(数组 )Object(对象)。。。。
//注意:js中没有元组和集合
//b.常用的特殊的值:NaN(表示不存在的数字),null(空,一般用来清空变量中的内容),undefined(变量没有赋值的时候,默认就是undefined)
console.log() //相当于Python中print函数,作用是在控制台打印()中的内容
//5.字面量
//Number字面量:所有的数字(支持科学计数法,不支持复数)
10
1e2
//Boolean字面量:只有true和false
true
false
//String字面量:用单引号或者双引号引起来的字符集,支持转义字符(和Python一样)
"ssad",'afda'
'sda'
console.log('sad')
console.log('123\n12')
//Array字面量:js中数组相当于Python中的列表
console.log(['s','1','asd',true])
//Object对象字面量:相当于Python中的字典+对象
//注意:key相当于属性,value相当于属性的值
var dict = {a:123,true:name}
console.log(dict)
//typeof:查看数据类型
console.log(typeof(true),typeof('asd'))
//js中的语法:
//a.一条语句结束后,可以写分号,也可以不写.如果一行写多条语句就必须写分号
//b.js中没有缩进语法的要求,需要使用代码块的时候,使用大括号
03-js变量
//1.js中的变量声明
//变量必须先声明再使用
/*语法:var 变量名 或者var 变量名=值
- 说明:
- a.var:是js中声明变量的关键字
- b.变量名:标识符,不能是js中的关键字;驼峰式命名(第一个单词的首字母小写,后面每个单词的首字母大写),见名知义
- c.初值:声明的时候可以赋初值,也可以不赋
*/
var studentCount = 100
//同时声明多个变量
var age; var name
var age1, name, studyId
var age2=10, name2 //声明变量
name2 = 100 //修改变量中的值
name2 = [1,'aa'] //修改变量中的值
console.log(name2)
04-js中的运算
//js中的运算符包含:数学运算符、比较运算符、逻辑运算符、赋值运算符、三目运算符、(位运算)
//1.数学运算符:+、-、、/、%、(js7才有的)、++、--
//其中:+、-、、/、%、**和Python中的功能一样
//注意:js中没有整除对应的运算符
//a.++(自加):自加一
//语法:变量++,++变量-----》让变量的值加一
var num = 1
num++ //相当于Python中的 变量 += 1
++num
console.log(num)
//b.--(自加):自减一
//语法:变量--,--变量-----》让变量的值减一
var num1 = 1
num1-- //相当于Python中的 变量 -= 1
--num1
num1 -= 1
console.log(num1)
//c.赋值的时候,++/--写在变量的后面,是先赋值,然后再让变量值加1/减1,++/--写在变量的前面,就是先加1/减1,然后再赋值
var num2 = 10,num3 = 10,b,c
b = num2++
c = ++num3
console.log(b,c,num2,num3)
//2.比较运算符:>,<,==,!=,>=,<=,===,!==,>==,<==
//结果值是布尔值
//==(相等,只判断值是否相等),===(完全相等。判断值和类型是否相等)
console.log(5==5) //true
console.log('5'==5) //true
console.log('5'=='5') //true
console.log(5===5) //true
console.log('5'===5) //false
console.log('5'==='5') //true
//3.逻辑运算符:&&(与),||(或),!(非)
//js的逻辑运算符,除了表示不一样,其他的与Python中一样
//4.赋值运算符:=, +=, -=, *=, /=, %=,ect,和Python中的一样
//5.三目运算符:?:
//语法:表达式1?值1:值2-----》判断表达式1的值是否为真,如果为真整个运算的结果就是值1,否则是值2
var value = 10>20?5:0
console.log(value)
//练习:求三个数的最大值,(使用三目运算符)
var a = 10, b = 20, c = 30
var max = (a>b?a:b)>c?(a>b?a:b):c
console.log(max)
//6.运算顺序:和Python基本一样(数学>比较>逻辑>赋值),也可以通过加括号来改变顺序
05-分支结构
//js中的分支结构:if语句,switch语句
//1.if语句
/*结构:
a.if(条件语句)
{
(条件成立执行)代码段
}
执行过程:先判断条件语句是否为true,为true就执行代码段
b.if-else结构:
if(条件语句){
代码段1
}else{
代码段2
}
c.if-elif-else:(这儿的else if相当于Python中的elif)
if(条件语句1){
代码段1
}else if(条件语句2){
代码段2
}else{
代码段3
}
*/
//判断一个数是否是偶数,如果是就打印偶数
var num = 10
if(num%2==0){
console.log('偶数')
}
//2.switch
/*
a.结构:
switch(表达式){
case 值1:{
代码段1
// break(可要可不要)
}
case 值2:{
代码段2
// break
}
...
default:{
}
}
b.执行过程:先计算表达式的值,然后再用这个值和后边case关键字后面的值一一比对,
看是否相等,找到第一个和表达式相等的case,
然后将这个case作为入口,依次执行后边所有的代码,
直到遇到break或者switch结束。
如果没有找到和表达式的值相等的case就执行default后面的代码
c.注意:default可有可无,case可以有很多个
*/
//练习:根据数字对应的值的不同,打印不同的结果:0-->星期天 1-->星期一 ....
var week = 4
switch(week){
case 0:
console.log('星期天')
break
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('星期六')
default:
console.log('值不对')
}
//练习:根据分数分等级:1-5:不及格, 6:及格, 7,8:良好 9,10:优秀
var score = 9
switch(score){
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('值不对')
}
06-循环结构
//js中的循环结构分为:for循环和while循环
//1.for-in循环:(和Python的for循环一样)
/*
for var 变量 in 序列
{
循环体
}
执行过程:依次从序列中取元素对应的索引,取完为止,每取一次执行一次循环体
a.遍历字符串,取的是字符对应的下标
b.遍历数组,取的是元素对应的下标
c.遍历对象,取的是属性名(key)
*/
var str= 'asdf'
for(var i in str){
// i 取的是str的下标
console.log(str[i])
}
//2.for循环:(和C语言的for循环一样)
/*
for(表达式1;表达式2;表达式3){
循环体
}
执行过程:先执行表达式1,然后再判断表达式2的结果是否为true,
如果为true,就执行循环体,执行完循环体再执行表达式3,
然后再判断表达式2的结果是否为true,
如果为true,又执行循环体,执行完循环体再执行表达式3,
依次循环,直到表达式2的结果为false为止
*/
//3.while循环:(和Python一样)
/*
while(条件语句){
循环体
}
*/
//4.do-while:
/*
do{
循环体
}while(条件语句)
执行过程:先执行一次循环体,然后再判断条件语句是否为true,
为true又执行循环体,以此类推,直到条件语句为false,循环结束
*/
07-函数
//1.函数的声明
/*
function 函数名(参数列表){
函数体
}
说明:
a.function:是js中声明函数的关键字
b.函数名:标识符,不能是关键字,见名知义,驼峰式命名
c.参数列表:参数名1,参数名2....;形参:给函数传值
d.函数体:实现函数的功能
注意:函数体只有在函数调用的时候才执行
*/
function sum(num1=5,num2=12){
console.log(num1+num2)
}
//2.函数的调用:和Python一样
//注意:js中不支持不定长参数
sum(1,9)
sum(sum1=10)
sum(num2=5)
sum(20)
//3.函数的返回值
//js中函数没有遇到return,函数的返回值就是undefined
//注意:js中不能同时返回多个值(有元组语法的语言才支持多个返回值)
function func1(){
console.log('func1')
// return 100,'abc'
}
console.log(func1())
//逗号表达式:多个值之间用逗号隔开,整个表达式的结果是第一个值
var nums
nums = 100,'abc',true
console.log(nums)
//4.js中,函数也可以作为变量
//5.另外一种声明函数的方式
/*
var 变量 = function(参数列表){
函数体
}
*/
08-数据类型
//new 类型名(值)---->可以将其他类型的数据转换成相应类型的值,不能转换的,结果是NaN
//1.数字类型(Number):所有的数字对应的类型
var num1 = new Number
console.log(num1+10)
//2.布尔(Boolean):true false
//Nan和0是false,空串的是true
//3.字符串(String)
//a.获取单个字符,通过字符串[下标]
//b.注意:js中不支持切片
// js中所有的下标,只支持0-长度减一,不支持负值
//c.长度:字符串.length
// console.log(str1.length)
//d.运算符:比较和+
//+:如果是其他的数据类型和字符串相加,js是先将其他类型转换成字符串,再相加
console.log(123+'acb')
//4.数组(相当于Python中的列表)
//splice(删除的开始下标,删除的元素个数)
//splice(被删除的下标/添加的开始下标,添加个数,被添加的元素列表)
//查,通过下标获取元素
//增,push(''):增加元素
//删 pop():删除最后一个元素;shift():删除第一个元素
//改和Python一样