44 JavaScript

主要内容:

1 . html 及 css 和jss的区别

　　html :文档的结构

　　css : 修改文档的外观结构

　　javascrip: 实现页面上的动态效果

2 . JS的历史及ECMAScript

　　1 ) javascript的概述 :

　　　　javascript是脚本语言, 是一种较轻量级的编程语言; 是可插入HTML页面的编程代码;JavaScript插入HTML页面的编程代码.

　　2 ) JAVAScript(雷峰塔) Java(雷锋)没有实质性的关系

　　3 ) ECMAScript 一个标准 ES5/ES6

　　4 ) node.js 跑在服务端的js

3 . javascript的引入方式

    <script>console.log(123);</script>   # script标签内写代码
    <script src="script.js"></script>    # 引入额外的js文件

　　注释方式:
　　\ 单行注释    /*多行注释*/
　　结束符: 
　　JavaScript中的语句要以分号(;)为结束符.

4 . 变量的命名规范:

　　1) JavaScript的变量名可以使用_ 数字字母 $组成, 不能以数字开头.

　　2 ) 声明变量使用var变量名的格式进行声明.(变量名区分大小写, 建议使用驼峰式命名规则)

5. JavaScript的数据类型

　　1 ) 数值类型 (Number) : javascript 不区分整型和浮点型, 就只有一种数据类型.

var num = 1
undefined
var b = 13.5
undefined
typeof num
"number"
typeof b
"number"

　　 a : NaN : 是number类型, 表示不是一个数字

parseInt('123')       //返回123
parseInt('abc')       //返回nan 
typeof NaN
"number"
parseFloat('123.456') //返回123.456

　　2 ) 字符串( string )

　　　　a : .length 返回长度

var s = 'lililii'
undefined
s.length
7

　　　 b : .trim() 移除空白

　　　　　.trimLeft(), .trimRight() 移除左边的空白和右边的空白

var s = 'libai   '
undefined
s.trim()
"libai"

　　　c : .charAt(n) 返回第n个字符

var s = 'dufu '
undefined
var t = s.charAt(3)
console.log(t)               // u

　　 d : .concat(n1, ) 拼接

　　　+ 使用+号也可以实现拼接,较为常用

var s = 'tian'
s.concat('tt')
"tiantt"

　　利用+实现的拼接

s = 'lili'
v = 'uuuu'
console.log(s+v)        // liliuuuu

　　 e :. indexof 子序列的位置

s = 'qwert yuiop'
s.indexOf('q')           // 0
s.indexOf('q', 2)        //-1            如果找不到返回-1

　　 f : .substring 根据索引获取子序列

s = 'li si ai bi'
s.substring(1, 4)           //"i s"
s.substring(1, -1)          //"l"  如果后面负数的比前面的小, 把后面的变成0, 然后换位置
s.substring(4, 1)           //"i s"把后面的数字和前面的数字换位置　　h

h : .slice() 切片

s = 'li uu tt uu'
s.slice(1, -1)             //"i uu tt u"   按正常切
s.slice(1, 4)              //"i u"
s.slice(4, 1)              //""            取到空字符

　substring和slice的区别

　　　　substirng()的特点：

　　　　　　　　　　　　如果 start > stop ，start和stop将被交换

　　　　　　　　　　　　如果参数是负数或者不是数字，将会被0替换

　　　　silce()的特点：

　　　　　　　　　　　　如果 start > stop 不会交换两者

　　　　　　　　　　　　如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)

　　　　　　　　　　　　如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

　　 i : .toLowerCase(), .toUpperCase() 大小写

　　 j : .split () 切割

s = 'li uu tt uu'
s.split(' ')                    // ["li", "uu", "tt", "u  u"]

k : $ 符格式化

var name = 'lili'
var hobby = 'read book'
var s = `我叫${name}`
console.log(s)        // 我叫lili

　　 3 ) 布尔值(Boolean)区别于python,ture或false都是小写

var a = true
var b = false
undefined
typeof a             // "boolean"

　　''(空字符串) 0 null undefined NaN 都是false

　　 4 ) null和undefined

　　　　null表示值是真空, 一般是在需要指定或清空一个变量时才会使用,如name=null

　　　　undefined表当声明一个变量但未初始化时, 该变量的默认值是undefined.还有就是当函数没有明确的返回值时,返回的也是undefined

name = 'alex'
"alex"
name = null
null
name
"null"

　　 5 ) : 数组: 数组对象的作用: 使用单独的变量名来存储一系列的值. 类似于python中的列表

　　　　a: .length 获取数组的长度

var li = [11, 22, 33, 44]
undefined
console.log(li.length)         //4

　　 b : .push() 尾部追加元素 .pop() 获取尾部的元素

　　　　 c: unshift() 头部插入元素 .shift() 头部移除元素

var li = [11, 22, 33, 44]
li.push(55)
5
li
(5) [11, 22, 33, 44, 55]
li.pop()
55
li.unshift(9)
5
li
(5) [9, 11, 22, 33, 44]
li.shift()
9
li
(4) [11, 22, 33, 44]

　　 d : slice() 切片; .reverse() 翻转 . join() 将数组元素连接成字符串

li = ['a', 'b', 'n']
li.slice(1, 4)          //["b", "n"]
li.reverse()           // ["n", "b", "a"]
li.join('+')            //"n+b+a"

　　　　e : sort排序

var li = [2 , 11, 33, 14]
li.sort()                  //[11, 14, 2, 33]  按照ascii值进行排序
function sortNumber(a, b){
	return a - b}
li.sort(sortNumber)        //[2, 11, 14, 33]  按照数字大小进行排序

　　　　f : splice 删除元素, 并向数组添加新的元素

var li = [11, 22, 33, 44]
li.splice(1, 1)                   //[22]    从第一个位置开始删除一个元素
li.splice(1, 2)                   // [33, 44]从第一个位置开始删除两个元素
li.splice(1)                      //[]       不写第二个参数默认删除一个

li.splice(1, 1, 'aaa')            // [11, "aaa"] 在第一个位置删除一个元素, 并把aaa加到元祖删除的位置中.
li.splice(1, 1, 'aaa', 'bbb')     // [11, "aaa", "bbb"]

6 ) 类型查询typeof: 它是一个一元运算符,不是一个函数,也不是一个语句

var li = [1, 2, 3]
s = 'juishi'
typeof li              //"object"
typeof s               //"string"
typeof null            //"object"
typeof NaN             //"number"

6 . 运算符

　　1 ) 算术运算符 + - * / % ++ --

　　2 ) 比较运算符 > >= < <= != == === !==

2 == '2'
true               #  弱等于 , 判断值是否相等
2 === '2'
false              #  强等于 , 既要判断值相等不相等, 还判断类型是否相等

　　3 ) 逻辑运算符 && || !

true || false
true
!1            //false
!99           //false
!!1           //true        快速的把一个变量转换成布尔值.

　4 ) 赋值运算符　 = += -= *= /=

7 . 流程控制

　　1 ) if- else

var age = 19;
if (age>18){
	console.log('耶, 成年了');
}else{
	console.log("啦啦啦啦");
}

　　2 ) if - else if - else

vara = 10;
if (a > 5){
	console.log('a>5');
}else if (a<5){
	console.log('a<5');
}else {
	console.log('a=5')}

　　3 ) switch

var today = 2;
switch (today) {
    case 1 :
	console.log('今天吃红烧肉');
	break;
    case 2 :
	console.log ('宫保鸡丁');
	break;
    case 3 :
	console.log ('清蒸鲈鱼');
	break;
	default :
	console.log('吃泡面!')
}

　　4 ) for

for(var i = 0;i < 10; i ++ ){
	console.log(i);
}

　　for循环操作列表

var li = [11, 22, 33, 44]
for (var i = 0 ; i < li.length; i++){
	console.log(li[i])
}

　　5 ) while

var n = 0;
while (n < 10){
	console.log(n);
	n ++
}

　　6 ) 三元运算

var a = 100;
var b = 130;
var c = a > b ? a : b

　　　　Python中的三元运算

a = 12
b = 13
c = a if a > b else b
print(c)