2018-09-21-总结

作者: fanzl | 来源:发表于2018-09-21 17:40 被阅读0次

一、认识js

1，什么是js

js是javascript的缩写，是一门专门用来控制网页内容的行为的脚本语言
js就是web标准中行为标准

2，在哪写js代码

a，写到标签的行为相关的属性中，比如按钮的onclicked

<button id="p1" onclick="window.alert('你好，python')"</button>
<input type="text" onfocus="这也可以写代码" />

b，写到script标签中（script标签可以放在html中任意位置，但是一般情况还是放在head或者body中）

c，写在外部js文件中,然后通过script标签来导入，然后通过设置src属性为js文件的路径

<script type="text/javascript" src="js/01-js基础语法.js">

3，js能做些什么事情

a,js可以在网页中插入html代码

<script type="text/javascript">
    document.write("<p>中秋节快乐</p>")
</script>

b,可以修改标签内容

<!--修改标签内容-->
<script type="text/javascript">
    document.getElementById("p1").innerHTML="教师节快乐"
</script>

c，可以修改标签样式

二、js基础语法

1，注释

//：单行注释
/* 多行注释*/

2.标识符

要求是由数字、字母、下划线和$字符组成，数字不能开头

var abc

3，js中大小写敏感

4,基本数据类型

a，常用类型

Number（数字-包含所有数字）
Boolean（布尔类型）
String（字符串）
Array（数组）
Object（对象）

注意：js中没有元祖和集合

b，常用的特殊的值：NaN(表示不存在的数字)，null（空，一般用来清空变量内容），undefined（变量没有赋值的时候，默认是undefined）

console.log(10*"abc")  //相当于print函数

5，字面量

Number字面量；所有的数字（支持科学计数法，但不支持复数）
Boolean字面量：只有true和false
String字面量：由单引号或双引号引起来的字符集，支持转义字符（和python一样）
Array字面量：js中数组就相当于列表
console.log(['adxa',123,'dvdvc'])
Object对象字面量：相当于python中字典+对象
注意：key相当于属性，value相当于属性的值
var dict= {a:100,name:'cecec'}
console.log(dict)

typeof：查看数据类型

console.log(typeof(100),typeof(dict))

6,js中的语句“

a，一条语句结束后可以写分号，也可以不写。如果一行写写多条语句就必须写分号
b，js中没有缩进语法的要求，需要使用代码的时候使用{}

三、js中变量的声明

1，js中变量的声明

语法：var 变量名或者 var 变量名=初值
a，var：是js中声明变量的关键字
b，变量名：标识符，不能是js中关键字；规范：驼峰式命名（第一个单词首字母小写，后边每一个单词首字母大写），见名知义
c，初值：声明的时候可以赋初值，也可以不赋

var age=21
console.log(age)

var studentCount=100

//a，同时声明多个变量
var age;var name
var age1,name1,studyId1
var age2=10,name2,studyId2
var Number=10
console.log(Number)

//b,一个变量可以存储多种类型的值
var name = "张三"  //声明变量（在内存中开辟空间存储数据）
name=100   //修改变量的值
console.log(name)

四、js中的运算符

js中的运算符包含：数学运算符、比较运算符、逻辑运算符、赋值运算符、三目运算符、（位运算）

1，数学运算符:+、-、*、/、%、**（js7才有）、++、--

其中：+、-、、/、%、*和python中的功能一模一样，js中没有整除对应的操作
注意：js中没有整除对应的操作，但是多了++和--

a，++（自加）：自加1
语法:变量++，++变量------>让变量的值加1

var num=10
num++
console.log(num)
++num
console.log(num)

//b，--（自减1操作）
//语法:变量--，--变量------>让变量的值减1
var num=10
num--
console.log(num)
--num
console.log(num)

//c,赋值时，++写在变量后面，是先赋值，然后在让变量自加；写变量前面，就先自加，在赋值
var a1=10,a2=10,b,c
b=a1++
c=++a2
console.log(a1,a2,b,c)

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，赋值运算符：=，+=，-=，*=，/=，%=等，和python一样

5，三目运算符

//语法：表达式1？值1：值2--->判断表达式1的值是否为真，为真整个运算符结果为“值1”，否则为“值2”

var value=10>20?10:20
console.log(value)

//练习，求三个数的最大值
var a=10,b=20,c=15
var num
num=a>b?a:b
num=num>c?num:c
console.log(num)

6,运算顺序：和python基本一致（数学>比较>逻辑>赋值），也可以通过加括号来改变运算顺序

五、分支结构

if语句，switch

1，if语句

if结构
if （条件语句）
{
代码段
}
执行过程：先判断条件语句是否为true，为true就执行代码段

if-else结构
if （条件语句）{
代码段
}
else{
代码段2
}

if-else if-else：（这的else if相当于elif）
if （条件语句1）{
代码段1
}
else if （条件语句2）{
代码段2
}
else{
代码段3
}

判断一个数是否是偶数，是就打印“偶数”

var num=14
if (num%2==0){
    console.log("偶数")
}

2，switch

a，结构

switch（表达式）{
    case 值1：{
        代码段1
        break
    }
    case 值2：{
        代码段2
        break
    }
    ......
    default：{
        
    } 
}

b执行过程：先计算表达式的值，然后再用这个值去和后边case关键字后面的值一一比对，看是否相等。
找到第一个和表达式的值相等然后将这个case作为入口，依次执行后面所有的代码
直到遇到break或者switch结束。如果没有找到和表达式的值相等的case就执行default后面的代码
注意：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-星期天，1-星期一

var week=1
switch (week){
    case 0:
        console.log('星期天')
        break
    case 1:
        console.log('星期1')
        break
    case 2:
        console.log('星期2')
        break
    case 3:
        console.log('星期3')
        break
    case 4:
        console.log('星期4')
        break
    case 5:
        console.log('星期5')
        break
        
    case 6:
        console.log('星期6')
        break
}

练习2，分等级；1-5，不及格；6，及格；7-8，良好；9-10，优秀

var score=6
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('成绩不对') 
}

六、循环结构

js中循环结构分为：for循环和while循环
1，for-in循环：（和Python的for循环一样）

 for （var 变量 in 序列）
 {
    循环体
 }

执行过程：依次从序列中取元素对应的索引，取完为止，没取一个执行一次循环体

遍历字符串，取的是字符对应的下标
遍历数组，取的是元素对应的下标
遍历对象，取的是属性名

for (var i in 'abcd')
{
    console.log('abcd'[i])
}

2，for循环：（和c语言的for循环一样）

 for（表达式1;表达式2;表达式3）{
    循环体
 }

执行过程：先执行表达式1，然后在判断表达式2的结果是否为true，如果为true，就执行循环体。执行完循环体在执行表达式3.
然后在判断表达式2的结果是否为true，如果为true，就执行循环体。执行完循环体在执行表达式3.
依次循环，直到表达式2的结果为false为止

计算1+2+3.。。+100

var num=0

for (var i=1;i<=100;i++)
{
    num+=i
}
console.log(num)

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，循环就结束

sum=0
i=1
do{
    sum+=i
    i+=1
}
while(i<=100)
console.log(sum)

七、js函数

1,函数的声明

 function 函数名（参数列表）{
    函数体
 }

说明：
a，function：是js中声明函数的关键字
b，函数名：标识符，不能是关键字；见名知义，驼峰式命名
c，参数列表：参数名1，参数名2.。。。；形参：将数据从函数外面传到函数里面
d，函数体：实现函数的功能
注意：函数体只有在函数调用的时候才执行

function sum(num1,num2){
   console.log(num2,10000)
   console.log(num1+num2)
}

function sum2(num1,num2){
   console.log(num2)
   console.log(num1+num2)
}

2,函数的调用：和python一样

函数的调用的时候要保证每个参数都有值
支持位置参数、关键字参数、参数设置默认值（js6）
js中不支持不定长参数

sum(num2=20,num1=10)

3，函数的返回值

js中函数如果没有遇到return，函数的返回值是undefined
注意：js中不能同时返回多个值（有元祖语法的语言才支持返回多个值）

function func1(){
    console.log("func1")
    return 100,'abc'
}
console.log(func1())

4，js中，函数也可以作为变量

5，另外一种声明函数的方式

 var 变量=function（参数列表）{
    函数体 
 }

var func2=function(){
    console.log('这是函数类型的数据')
}

func2()

八、数据类型

new 类型名（值）----》可以将其他类型的数据转换成相应类型的值

1，数字类型（Number）：所有数字对应的类型

不能转换的结果是NaN

var num1=100
var num2=new Number('12')
console.log(num2+100,num1)

2,布尔：true和false

数字-->布尔：只有0，和NaN是false，其他是true
字符串--->布尔：空串是false，其他是true
总结：所有为0为空的转换成布尔是false，NaN，null,undefined都是false；其他都是true

var bool=new Boolean(NaN)
console.log(bool)

3，字符串（String）

a，获取单个字符：通过字符串[下标]
b，注意：

js中不支持切片
js中的下标只支持0-长度减一，不支持负值

var str1='abcde'
console.log(str1[1])

c，长度

console.log(str1.length)

d，运算符：比较和+
比较和python一样，用Unicode码
+：如果其他数据类型和字符串相加，都是先将其他数据类型转换成字符串，然后做字符串拼接操作

console.log('abc'+'123')
console.log(123+'abc')

e，其他的方法

4，数组（相当于Python中的列表）

a，有序，可变的，元素的类型可以是任意类型的数据

var array=[1,'as',true,[1,2,3]]

查

console.log(array[1])

增

array.push('aa')
console.log(array)

删

array.pop()    //删除最后一个元素
console.log(array)
array.shift()  //删除第一个元素
console.log(array)

//splice(删除的开始下标，删除的元素的个数)
var array=[1,'as',true,[1,2,3]]
array.splice(1,1)
console.log(array)


//splice(被删除的下标/添加的开始下标，添加元素的个数，添加元素列表)
var array=[1,'as',true,[1,2,3]]
array.splice(4,2,'aa','bb')
console.log(array)

d，改

var array=[1,'as',true,[1,2,3]]
array[0]=100
console.log(array)