JS 第一天

作者: knot98 | 来源:发表于2018-10-11 15:37 被阅读0次

JS第一天

一、JS语言介绍

1、概念

浏览器脚本语言
可以编写运行在浏览器上的代码程序
属于解释性、弱语言类型编程语言

2、组成

ES语法：ECMAScript、主要版本ES5和ES6
DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

二、三种存在位置

HTML代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>三种存在位置</title>
</head>
<!-- 1.行间式:js代码块需要出现在事件中 -->
<!-- <body id="body" onload="body.style.backgroundColor='red'"> -->
<!-- <body id="body" onload="alert('hello wolrd')"> -->
<body id="body">
    <!-- 2.内联式:js代码块需要出现在script标签中 -->
    <script type="text/javascript">
        body.style.backgroundColor='orange'
    </script>

    <!-- 3.外联式:js代码块出现在外部js文件中,需要通过script标签src属性进行链接 -->
    <script type="text/javascript" src="./js/01.js"></script>

    <!-- 总结 -->
    <!-- 三种方式不存在优先级,谁在逻辑下方,谁起作用 -->

</body>
</html>

JS代码示例：

body.style.backgroundColor='pink'

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代码位置

HTML代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js位置</title>
    <!-- 位置② -->
    <!-- 出现在head标签底部：依赖型JS库 -->
    <!-- <script>
        bd.style.backgroundColor = '#0ff';
    </script> -->

    <script>
        var color = "cyan";
    </script>
</head>
<!-- 内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内 -->
<!-- 外联使用场景:适用于团队开发,js代码具有复用性 -->

<!-- js为解释性语言 -->
<body id="bd">
    <!-- 位置① -->
    <!-- <script>
        bd.style.backgroundColor = '#0ff';
    </script> -->

    <!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 -->
    <!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 -->
    <div id="div">123</div>
    <!-- 需要使用color变量这个资源 -->
    <script>
        div.style.backgroundColor = color;
    </script>

</body>
<!-- 位置③ -->
<!-- 出现在body标签底部：功能型JS脚本 -->
<!-- <script>
    bd.style.backgroundColor = '#0ff';
</script> -->

<!-- 完成需求1 -->
<script>
    div.style.color = 'red';
</script>

<!-- 外联出现位置同内联 -->
<!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 -->
<script src="js/02.js">
    alert(123)
</script>

</html>

出现在head标签底部：依赖型JS库
出现在body标签底部：功能型JS脚本

四、变量的定义

HTML代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>变量的定义</title>
</head>
<body>
    变量的定义
</body>
<script>
    // script标签内,代表js,采用的是js语法

    // 1.简单规范
    // 单行注释
    /*
    多行注释
    */

    // 语句以分号结尾

    // 2.变量的定义: 声明 + 初始化

    // ES5变量的定义

    // 注:ES5标准下无块级作用域,只有方法可以产生实际的局部作用域
    // 无块级作用域的局部变量
    var a = 10;
    // alert(a);
    // 全局变量
    b = 20;
    // alert(b);

    // eg:验证
    // 方法的自调用,就会产生一个局部作用域
    (function () {
        var x = 10;
        y = 20;
    })()

    // alert(x) 报错,x只能在局部作用域中使用
    // alert(y); 正常使用


    // 块级作用域
    {
        var n = 10; // 无视块级作用域
        m = 20;  // 全局变量,更无视块级作用域
    }
    // alert(n)  // 可以
    // alert(m)  // 可以


    // ES6变量的定义

    // 有块级作用域的局部变量
    let aa = 100;
    // alert(aa);
    // 有块级作用域的常量
    const bb = 200;
    // alert(bb);

    {
        let xx = 100;
        const yy = 200;
    }
    // alert(xx);  // 无法访问
    // alert(yy);  // 无法访问
    // 函数产生的局部作用域同该情况

    let nn = 100;
    nn = 200;
    // alert(nn);  // 200

    // 命名规范:常量名全大写
    const MM = 1000;
    // MM = 2000;  // 常量值不允许更改
    // alert(MM);

    // 3.变量名的命名规范
    // ① 可以由字母,数字,_,$组成,但是不能以数字开头(可以包含中文,采用驼峰命名法)
    // ② 区分大小写
    // ③ 不能与关键字保留字重名
    

</script>
</html>

1、ES5定义变量

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

2、ES6定义变量

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

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

由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
区分大小写
不能出现关键字及保留字


abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

五、三种弹出框

HTML代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>三种弹出框</title>
</head>
<body>
    三种弹出框
</body>
<script>
    // 弹出框: 一个弹出框只能弹出一条信息
    // alert("普通弹出框", "呵呵");  // 呵呵被忽略了

    // 确认框
    // var res = confirm("你是男的吗?");  // true | false
    // alert(res);

    // 输入框
    // var res = prompt("请输入你的小名!");  // 确定为输入值, 取消为null
    // alert(res);  

</script>
</html>

alert：普通弹出框
confirm：确认框
prompt：输入框

六、四种调试方式

HTML代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>四种调试方式</title>
</head>
<body>
    四种调试方式
</body>
<script type="text/javascript">
    var a = 10;
    var b = 20;

    // 四种查看变量的值的方式
    // alert(a);
    // alert(b);

    // console.log(a);
    // console.log(b);

    // document.write(a);
    // document.write(b);

    // 断点调试
</script>
</html>

alert()
console.log()
document.write()
浏览器断点调试

七、数据类型

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
    数据类型
</body>
<script type="text/javascript">
    // 一. 值类型
    // 1.number:数字类型
    var a = 10;
    // typeof()查看类型,可以省略()
    console.log(a, typeof a);
    // 判断
    console.log(typeof a == 'number');

    a = 3.14;
    console.log(a, typeof a);

    a = 314e2
    console.log(a, typeof a);


    // 2.string:字符串类型
    var a = '字符串';
    console.log(a, typeof a);

    a = "字符串";
    console.log(a, typeof a);

    // ES6会检测变量的重复定义,报错
    // let x = 10;
    // let x = '10';

    // 3.boolean:布尔类型 true|false
    a = true;
    console.log(a, typeof a);

    // 4.undefined:未定义类型
    var b;
    console.log(b, typeof b);
    var c = undefined;
    console.log(c, typeof c);

    // 二.引用类型
    // 5.function:函数类型
    var m = function () {};
    console.log(m, typeof m);

    // 6.object:对象类型
    var obj = {};
    console.log(obj, typeof obj);

    obj = new Object();
    console.log(obj, typeof obj);
    // 判断
    // instanceof:对象类型判断
    console.log(obj instanceof Object);

    // 三.特殊的Object
    // Number() String() Boolean() Math
    // 7.null:空对象
    var o = null;
    console.log(o, typeof o);
    // 判断
    console.log(o == null);

    // 8.Array:数组对象
    o = new Array(1, 2, 3, 4, 5);
    console.log(o, typeof o);
    console.log(o instanceof Object);
    // 判断
    console.log(o instanceof Array);

    // 9.Date:时间对象
    o = new Date();
    console.log(o, typeof o);

    // 10.RegExp:正则对象
    o = new RegExp();
    console.log(o, typeof o);

</script>
</html>

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()进行判断

数据类型转换代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>类型转换</title>
</head>
<body>
    类型转换
</body>
<script>
    // 类型转换针对 值类型
    // number string boolean

    // 一.显性转化
    // 1. num,bool => str
    var a = 10;
    var b = true;

    // var c = new String(a);
    // console.log(c, typeof c); // '10', object

    var c = String(a);
    console.log(c, typeof c); // '10', string
    c = String(b);
    console.log(c, typeof c); // 'true', string

    c = a.toString();
    console.log(c, typeof c); // '10', string
    c = b.toString();
    console.log(c, typeof c); // 'true', string

    // 2.bool,str => num
    var aa = true;
    var bb = '10';

    var cc = Number(aa);
    console.log(cc, typeof cc); // 1 number
    cc = Number(bb);
    console.log(cc, typeof cc); // 10 number

    cc = + aa;
    console.log(cc, typeof cc); // 1 number
    cc = + bb;
    console.log(cc, typeof cc); // 10 number

    // 针对字符串
    cc = parseFloat('3.14.15.16abc');
    console.log(cc, typeof cc); // 3.14
    cc = parseInt('10.35abc');  // 10
    console.log(cc, typeof cc);

    // 字符串以非数字开头,结果为NaN
    // 1.非数字类型
    // 2.不与任何数相等,包含自己
    // 3.通过isNaN()进行判断
    var res = parseInt("abc10def");
    console.log(res, isNaN(res))


    // 二.隐性转换(自动转换)
    // 5 + null  // 5
    // "5" + null  // "5null"
    // "5" + 1  // "51"
    // "5" - 1  // 4
    console.log("5" - 1);
    
    // "" + ? // "?"
    

</script>
</html>

八、运算符

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
    运算符
</body>
<script type="text/javascript">
    // 一.算数运算符

    var a = 5;
    var res = a / 2;
    // 只存在number类型运算
    console.log(res);  // 2.5

    var res = a % 2;
    console.log(res); // 商为2余1  1


    // 自增自减

    // 总结:
    // 1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1
    // 2.++/--在前先自运算,再他运算
    // 1.++/--在后先他运算,再自运算

    // a=5
    var res = a++;
    console.log("res:" + res + ", a:" + a);  // 5, 6

    // a=6
    var res = ++a;
    console.log("res:" + res + ", a:" + a);  // 7, 7

    // 二.赋值运算符


    // 三.比较运算符
    console.log('5' == 5);   // true, 值相等即可
    console.log('5' === 5);  // false, 值与类型均要相等

    console.log('5' != 5);  // fasle
    console.log('5' !== 5);  // true

    // 四.逻辑运算符
    // 运算结果为true|false
    var a = 10;
    var b = 20;
    var c = 30;
    var res = a < b && c == 30;
    console.log(res);
    // 真,真 => 真
    // 真,假 => 假
    // 假,真 => 假  短路
    // 假,假 => 假  短路
    // &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路

    // 短路
    var res = a > b && ++c;
    console.log(res, c);  // c=30


    // ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
    // 真,真 => 真  短路
    // 真,假 => 真  短路
    // 假,真 => 真
    // 假,假 => 假

    // !运算,真则假,假则真,负负得正
    console.log(!1, !!1);


    // 三目运算符(三元运算符)
    // 结果 = 条件表达式 ? 结果1 : 结果2;
    // 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,
    var tq = prompt("天气(晴|雨)")
    var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
    console.log(res);

</script>
</html>

1、算数运算符

前提：n = 5

算术运算符.jpg

2、赋值运算符

前提：x=5，y=5

运算符	例子	等同于	运算结果
=	x=y		5
+=	x+=y	x=x+y	10
-=	x-=y	x=x-y	0
*=	x*=y	x=x*y	25
/=	x/=y	x=x/y	1
%=	x%=y	x=x%y	0

3、比较运算符

前提：x=5

运算符	描述	比较	结果
==	等于	x=="5"	true
===	绝对等于	x==="5"	false
!=	不等于	x!="5"	fales
!==	不绝对等于	x!=="5"	true
>	大于	x>5	false
<	小于	x<5	false
>=	大于等于	x>=5	true
<=	小于等于	x<=5	true

4、逻辑运算符

前提：n=5

运算符	描述	例子	结果
&&	与	x=n>10&&++n	x=false,n=5（短路）
\|\|	或	x=n<10\|\|n--	x=true,n=5（短路）
!	非	x=!n	x=false,x=5

5、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'

JS 第一天

JS第一天

目录：

一、JS语言介绍

1、概念

2、组成

二、三种存在位置

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

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

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

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

四、变量的定义

1、ES5定义变量

2、ES6定义变量

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

五、三种弹出框

六、四种调试方式

七、数据类型

1、值类型

2、引用类型

3、具体的对象类型

4、类型转换

八、运算符

1、算数运算符

2、赋值运算符

3、比较运算符

4、逻辑运算符

5、ES6语法解构赋值

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读