js
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.可以修改标签的样式
3.js基础语法
//1.注释
//单行注释就是在前面加'//'
/*这个是多行注释
* skhfoia
* shifshlkf
*
*/
//2.标识符
//要求是由数字,字母,下划线和$符组成,但是数字不能开头
var abc
var $as
//3.js中大小写敏感
//4.基本数据类型
//Number(数字-包含所有的数字),Boolean(布尔类型),string字符串,Array(数组),Object(对象)....
//注意:js中没有元组和集合
//b.常用的特殊的值:NaN(表示不存在的数字),null(空,一般用来清空变量中的内容),undefined(变量没有赋值的时候,默认是undefined)
console.log() //相当于python中print函数,作用是在控制台打印()中的内容
//5.字面量
//number字面量:所有的数字(支持科学计数法,不支持复数)
10
12.5
-100
+12.5
console.log(12e2)
//Boolean字面量:只有true和false
//String字面量:用单引号或者双引号引起来的字面量,支持转义字符(和python一样)
'abc'
"abc"
//Array字面量:js中数组相当于python的列表
console.log([12,"abc"])
//Object对象字面量:相当于python中的字典+对象
//注意:key相当于属性,value相当于属性的值
var dict={a:100,name:200
}
console.log(dict)
//typeof:查看数据类型
console.log(typeof(100),typeof('abc'))
//6.js中的语句:
//a.一条语句结束后可以写分号,也可以不写.如果一行写多条语句就必须写分号
//b.js中没有缩进语法的要求,需要使用代码的时候使用{}
3.js中变量
//1.js中变量的声明
/*语法:var 变量名 或者var 变量名=初值
* 说明:
* a.var:是js中声明变量的关键字
* b.变量名;标识符,不能是js中的关键字,驼峰式命名(第一个单词首字母小写,后面每个单词首字母大写),见名知义
* c.初值:声明的时候可以赋初值,也可以不赋
*
*/
var age
var age = 10
console.log(age)
var studentCount = 100
//a.同时声明多个变量
var age; var name
var age1,name,studyId
var age = 10,name2
//b.一个变量可以存储多种类型的值
var name = '张三'
name = 100
console.log(name)
3.js中的运算符
//js中的运算符包含:数学运算符,比较运算符,逻辑运算符,赋值运算符,三目运算符,(位运算)
//1.数学运算符:+,-,*,/,%,**(js7中才有),++,--
//其中:+,-,*,/,%,**(js7中才有)和python中的功能一模一样
//注意:js中没有整除的运算符
//a.++(自加):自加1
//语法:变量++,++变量---->让变量的值加1
var num = 10
num++
num++
console.log(num)
//b.--(自减1操作)
//语法:变量--,--变量 ---->让变量的值减一
//c.赋值的时候,++/--写在变量的后面,是先赋值,然后再让变量的值加1/减1,++/--写变量的前面,就先加1/减1,然后再赋值
var a=10,a2=10,b,c
b=a++
c=++a
console.log(b,c)
//2.比较运算符:>,<,==,!=,===,!==,>=,<=,<==,>==
//结果都是布尔值
//==:只判断值是否相等
//===:判断值和类型是否相等
console.log(5==5)
console.log('5'=='5')
console.log('5'==5)
console.log(5===5)
console.log('5'==='5')
console.log('5'===5)//false
//3.逻辑运算符:&&(与),||(或),!(非)
//js逻辑运算符除了形式其他和python一样
//4.赋值运算符:=,+=,-=,*=,/=,%=等,和python一样
//三目运算符:?:
//语法:表达式1?值1:值2 ---判断表达式1的值是否为真,为真整个运算符的结果就是值1,否则是值2
var value = 10>2?10:2
console.log(value)
//练习:求三个数的最大值,使用三目运算符
var a=10,b=20,c=15
var d = (a>b?a:b) > c ? (a>b?a:b):c
console.log(d)
//运算顺序:和python基本一致(数学>比较>逻辑>赋值),也可以通过加括号来改变运算顺序
4.分支结构
//js中的分支结构:if语句,switch语句
//1.if语句
/*结构:
* a.if(条件语句)
* {
代码段
* }
执行过程:先判断条件语句是否为true,为true就执行代码段
*b.if-else结构:
* if(条件语句){
* 代码段1
* }
* else{
* 代码段2
* }
* c.if else-if else:(这儿的else if 相当于python中的elif)
* if(条件语句1){
* 代码段1
* }
* else if(条件语句2){
代码段2
*
* }
* else{
* 代码段3
* }
* */
//判断一个数是否是偶数,如果是就打印'偶数'
var num = 11
if(num%2==0){
console.log('偶数')
}
if(num%2==0){
console.log('偶数')
}
else{
console.log('是奇数')
}
//2.switch
/*
*a.结构:
switch(表达式){
case 值1:{
代码段1
break
}
case 值2:{
代码段2
break
}
...
default:{
break
}
}
b.执行过程:先计算表达式的值,然后再用这个值去和后边case关键字后面的值一一对比,看是否相等.
找到第一个和表达式的值相等的case,然后将这个case作为入门,依次执行后面的代码
直到遇到break或者switch结束.如果没有找到和表达式的值相等的case就执行finally后面的代码
c.注意:default可有可无,case可以有若干个
* */
var num1=100
switch(num1){
case 100:
console.log('A')
case 10:
console.log('B')
case 'abc':
console.log('C')
default:
console.log('D')
}
//练习:0-6,根据数字对应的值不一样,打印不同的结果:0--星期天,1--星期一
var week = 1
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('星期六')
break
}
}
//练习2:根据分数等级:1-5:不及格,6:及格,7,8:良好,9,10:优秀
var score = 2
switch(score){
case 9 :{
console.log('优秀')
break
}
case 10:{
console.log('优秀')
break
}
case 7:{
console.log('良好')
break
}
case 8:{
console.log('良好')
break
}
case 6:{
console.log('及格')
break
}
default:{
console.log('不及格')
}
}
5.循环结构
//js中的循环结构分为:for循环和while循环
//1.for-in循环:(和python的for循环一样)
/*
for var 变量 in 序列{
循环体
}
执行过程:依次从序列中取元素对应的索引,取完为止,每取一次执行依次循环体
*/
//变量字符串,取得是字符对应的下标
var str = 'abcd'
for (var i in str){
console.log(str[i])
}
//遍历对象,取得是属性名(key)
for(var x in{a:'abc',name:'小明'}){
console.log(x)
}
//2.for循环:(和C语言的for循环一样)
/*
for(表达式1;表达式2;表达式3){
循环体
}
执行过程:先执行表达式1,然后再判断表达式2的结果是否为true,就执行循环体,执行完循环体再执行表达式3
然后再判断表达式2的结果是否为true,如果为true,又执行循环体,执行完循环体再执行循环体3,依次循环,直到表达式2的结果是false为止
*/
//计算1加到100
for(var i=1,sum = 0;i<=100;i++){
sum +=i
}
console.log(sum)
//3.while循环:(和python一样)
/*
while(条件语句){
循环体
}
*/
var sum = 0
var i = 1
while(i<=100){
sum += i
i+=1
}
console.log(sum)
//4.do-while:
/*
do{
循环体
}while(条件语句)
执行:先执行一次循环体,然后再判断条件语句是否为true,为true又执行循环体,依次类推,直到条件语句为false,循环就结束
*/
var sum = 0
var i = 1
do{
sum +=i
i++
}while(i<=100)
console.log(sum)
6.函数
//1.函数的声明
/*
function 函数名(参数列表){
函数体
}
说明:
a.function:是js中声明函数的关键字
b.函数名:标识符,不能是关键字;见名知义,驼峰式命名
c.参数列表:参数名1,参数名2...;形参:将数据从函数的外面传到函数中
d.函数体:实现函数的功能
注意:函数体只有在函数调用的时候才执行
*/
function sum(num1,num2){
console.log(num1+num2)
}
function sum2(num1,num2=10){
console.log(num1+num2)
}
//函数调用:和python一样
//函数调用的时候要保证每个参数都有值!
//支持位置参数,关键字参数,参数设置默认值(js6)
//注意:js中不支持不定长参数
sum(1,2)
sum(num2=10,num1=20 )
sum2(23)
//3.函数的返回值
//js中如果没有遇到return,函数的返回值是undefined
//注意:js中不能同时返回多个值
function func1(){
console.log('func1')
return 100,'abc'
}
console.log(func1())
//4.js中,函数也可以作为变量
var na = func1
na()
//5.另外一种声明函数的方式
/*
var 变量 =function(参数列表){
函数体
}
*/
var func2 = function(num){
console.log('这是一个函数类型的数据',num)
}
func2(23)
var foucs = [
function(){
console.log('aaa')
},100
]
foucs[0]()
7.数据类型
//new 类型名(值) --->可以将其他的类型的数据转换成相应类型的值()
//1.数字类型(Number):所有的数字对应的类型
//不能转换的结果是NaN
console.log(typeof(10))
var num1 = 100
var num2 = new Number('12')
console.log(num2+100,num1)
//2.布尔:true和false
//数字->布尔 NaN和0是false
//总结:所有为0为空的转换成布尔是false
var bool = new Boolean(NaN)
console.log(bool)
//3.字符串(String):Unicode编码
//a.获取单个字符:通过字符串[下标]
//b.注意:
// js中的下标支持0到长度-1,不支持负值
// js中不支持切片
var str1='abcde'
console.log(str1[1])
//c.长度:字符串.length
console.log(str1.length)
//d.运算符:比较和+
//比较和python一样
//+:如果是其他的数据类型和字符串相加,都是先将其他数据类型转换成字符串,然后做字符串拼接操作
console.log('abc'+'123') //abc123
console.log(123+'abc') //123abc
//e.其他的方法(自己查)
//String对象方法:字符串.方法()
//4.数组(相当于python中的列表)
//a.有序,可变的,元素的类型可以是任意类型的数据
var array = [1,'abc',true,[1,2,3]]
//查
console.log(array[1])
//增
array.push('aa')
console.log(array)
//删除
//pop():删除最后一个元素
array.pop()
console.log(array)
//shift():删除第一个元素
array.shift()
console.log(array)
//splice(删除的开始下标,删除的元素的个数)
var array = [1,'abc',true,[1,2,3]]
array.splice(1,1)
console.log(array)
//splice(被删除的下标/添加的开始下标,添加个数,被添加的元素列表)
var array = [1,'abc',true,[1,2,3]]
array.splice(0,2,'aa','bb')
console.log(array)
//改
var array = [1,'abc',true,[1,2,3]]
array[0]=100
console.log(array)