2018-08-21JavaScript
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.修改标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--内部的js-->
<script type="text/javascript">
//在这儿也可以写js代码
window.alert('你好，Python')
</script>
<!--外部的的js-->
<script type="text/javascript" src="index.js">
</script>
</head>
<body>
<p id="p1">中秋节快乐</p>
<!--内联的js-->
<button onclick="window.alert('你好，Python')">点我</button>
<!--<input type="text" onfocus="window.alert('你好，input')"/>-->
<!--插入html代码-->
<script type="text/javascript">
document.write('<p>中秋节快乐</p>')
</script>
</body>
</html>
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一样
