2018-09-22JS基础

一、认识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.可以在网页中插入html代码
• b.可以修改标签的内容
• c.可以修改标签的样式

    
        
        
        
        
        
        
    
    
        
        点我
        
    

二、js基础语法

1.注释

• 单行注释加//
• 多行注释加/*

2.标识符

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

3.js中大小写敏感

4.基本数字类型

• a.Number(数字-包含所有的数字)、Bollean(布尔类型)、String(字符串)、Array(数组)、object(对象....)
• b.常用的特殊的值：NaN(表示不存在的数字)，null(空，一般用来清空变量中的内容),undefined(变量没有赋值的时候，默认是undefined)

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

5.字面量

• Number字面量：所有的数字（支持科学计数法，不支持复数）

• Boolean字母量：只有true和false

• String字面量：用单引号或者双引号引起来的字符集，支持转义字符（和python相同）

• Array字面量：js中数组相当于python的列表

• Object对象字面量：相当于python中字典+对象（key相当于属性，value相当于属性的值）

• typeof：查看数据类型

6.js中的语句

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

三、js中的变量

1.js中变量的声明

• 语法：var 变量名 或者 var 变量名 = 初值
• a.var:是js中声明变量的关键字
• b.变量名：标识符，不能是js中的关键字；驼峰式命名(第一个单词首字母小写，后面每个单词首字母大写)见名知义
• c.初值：声明的时候可以赋初值，也可以不赋
  注意：变量名一定先声明在使用

四、js中的运算符

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

1.数学运算符：+、-、、/、%、*(js7中才有)、++、--

• 其中：+、-、/、、%、*和python相同
• 注意：js中整除对应的运算符

a.++：自加一
语法：变量++，++变量(让变量的值加1)

b.--:自减1
语法：变量--，--变量(让变量的值减1)

c.赋值的时候，++/--写在变量的后面，是先赋值，然后再让变量的值加1/减1
++/--写在变量的前面，就先加1/减1然后在赋值

2.比较运算符：>,<,==,!=,>=,<=,===,!==,>==,<==

• 结果都是布尔值
• 相等(==)：只判断值是否相等
• 完全相等(===)：判断值和类型是否相等

3.逻辑运算符：&&(与)、||(或)、!(非)

• 逻辑运算符除了形式不同，其他都和python一样

4.赋值运算符：=、+=、-=、*=、/=、%- 等和python一样

5.三目运算符：?：

语法：表达式1?值1:值2 ---> 判断表达式1的值是否为真，为真整个运算的结果就是值1，否则就是值2

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

五、js中的分支结构

js中的分之结构：if语句，switch语句

1.if语句

a.结构：
 * if(条件语句)
 * {
 *  代码段
 * }
 * 执行过程：先判断条件语句是否为true，为true就执行代码段

b.if-else结构：
if(条件语句){
    代码段1
}else{
    代码段2
}
c.if-else if-else:(相当于python的elif)

if(条件语句1){
    代码段1
}else if(条件语句2){
    代码段2
}else{
    代码段3
}

2.switch语句

a.结果：
 switch(表达式){
    case 值1{
        代码段1
    }
    case 值2{
        代码段2
    }
    ……
    defalut:{
        
    }
}

b.执行过程：先计算表达式的值，然后再用这个值去和后边case关键字后面的值一一对比，看是否相等。 找到第一个和表达式的值相等的case，然后将这个case作为入口，一次执行后边所有的代码，直到遇到break或者switch结束。如果没有找到和表达式的值相等的case就执行finally后面的代码
注意：default可有可无，case可以有若干个

六、js中的循环结构

js中的循环结构分为：for和while

1.for-in循环(和python相同)

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

• 执行过程：依次从序列中去元素对应的索引，取完为止，每取一个执行依次循环体
• 遍历字符串，取得是字符对应的下标
• 遍历数组，取得是元素对应的下标
• 遍历对象，取得是属性名(key)

2.for循环(和C语言一样)

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

七、js中的函数

1.函数的声明

function 函数名(参数列表){
    函数体
 }

说明

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

2.函数的调用(和python相同)

• 函数调用的时候要保证每个参数都有值
• 支持位置参数、参数设置默认值(js6)
  注意：js不支持不定长参数

3.函数的返回值

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

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

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

var 变量 = function(参数列表){
    函数体
 }

八、js中的数据类型

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,其他的都是true
• 字符串 --->：空串是false，其他的是true
  总结：所有的0为空的转换成布尔是false，NaN，null和undefind都是false；其他的都是true

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

3.字符串(String)

• a.获取单个字符：通过字符串[下标]
• b.
  js不支持切片
  js所有的下标只支持0-长度减1，不支持负值

var str1 = 'dasdas'
console.log(str1[2])

• c.长度:字符串.length

console.log(str1.length)

• d.运算符：比较和+
• 比较和python一样
• +:如果是其他的数据类型和字符串相加，都是现将其他数据类型转换成字符串，然后做字符串加操作

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

• e.其他的方法（自己查）
• String对象方法：字符串.方法

console.log('wdqdw'.charCodeAt(1))

4.数组（相当于python中的列表）

• 1.可变的，元素的类型可以是任意类型的数据

array = [1,'abc',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,'abc',true,[1,2,3]]
array.splice(1,1)
console.log(array)

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