6、JS基础

6、JS基础

一、JS语言介绍

1、概念

• 浏览器脚本语言

• 可以编写运行在浏览器上的代码程序

• 属于解释性、弱语言类型编程语言

2、组成

• ES语法:ECMAScript、主要版本ES5和ES6

• DOM:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。

• BOM:浏览器对象模型(Browser Object Model),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;且由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

二、三种存在位置

1、行间式:存在于行间式事件中

<body id="body" onload="body.style.backgroundColor='#0ff'">
    
</body>

2、内联式:存在于页面script标签中

<body id="body">
    <script type="text/javascript">
        body.style.backgroundColor='#0ff'
    </script>
</body>

3、外联式:存在于外部JS文件,通过script标签的src属性链接

index.js文件
body.style.backgroundColor='#0ff'

index.html文件
<script src="./js/index.js"></script>

三、解释性语言特性决定JS代码位置

出现在head标签底部:依赖型JS库

出现在body标签底部:功能型JS脚本

四、JS语法规范

注释

// 单行注释

/* 
多行注释
*/

以分号作为语句结尾(允许省略)

五、变量的定义

1、ES5定义变量

var num = 10;  // 无块级作用域变量
num = 10;  // 全局变量

2、ES6定义变量

let num = 10;  // 局部变量
const NUM = 10;  // 常量

3、变量(标识符)的命名规范

由字母,数字,_,$组成,不能以数字开头(可以包含中文字符)

区分大小写

不能出现关键字及保留字

六、三种弹出框

alert:普通弹出框

confirm:确认框

prompt:输入框

七、四种调试方式

alert()

console.log()

ocument.write()

浏览器断点调试

八、数据类型

1、值类型

number:数字类型

var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'number')

string:字符串类型

var a = '10';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string')

boolean:布尔类型

var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')

undefined:未定义类型

var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)

2、引用类型

function:函数类型

var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'function')

object:对象类型

var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)

3、具体的对象类型

null:空对象

var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)

Array:数组对象

var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)

Date:时间对象

var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)

RegExp:正则对象

var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)

4、类型转换

数字|布尔 转换为 字符串

var a = 10 or true

String(a)

a.toString()

布尔|字符串 转换为 数字

var a = true or '10'

Number(a)

+ a

parseFloat()
parseInt()

字符串|数字 转换为 布尔

var a = 10 or '10'
Boolean(a)

自动转换

5 + null  // 5
"5" + null  // "5null"
"5" + 1  // "51"
"5" - 1  // 4

特殊产物

// NaN: 非数字类型
// 不与任何数相等,包含自己
// 利用isNaN()进行判断

九、运算符

1、算数运算符

前提:n = 5

2、赋值运算符

前提:x=5,y=5

4、逻辑运算符

前提:n=5

5、三目运算符

// 结果 = 条件表达式 ? 结果1 : 结果2;

// eg:
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);

6、ES6语法解构赋值

数组的解构赋值

let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]

对象的解构赋值

let {key: a} = {key: 10}
// a=10

字符串解构赋值

let [a,b,c] = 'xyz'
// a='x',b='y',c='z'

 

posted @ 2018-12-17 18:11  Maple_feng  阅读(149)  评论(0编辑  收藏  举报