JavaScript基本语法（JavaScript代码嵌入方式与声明和使用变量）

、JavaScript代码嵌入方式

#①HTML文档内

JavaScript代码要写在script标签内
script标签可以写在文档内的任意位置
为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

可以参考简化版的HelloWorld

<!-- 在HBuilderX中，script标签通过打字“sc”两个字母就可以直接完整生成 -->

<script type="text/javascript">

	// 下面是同样实现HelloWorld功能的简化版代码

	document.getElementById("helloBtn").onclick = function() {

		alert("Hello simple");

	};

</script>

#2、声明和使用变量

#①JavaScript数据类型

基本数据类型
- 数值型：JavaScript不区分整数、小数
- 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
- 布尔型：true、false
  
  在JavaScript中，其他类型和布尔类型的自动转换。
  
  true：非零的数值，非空字符串，非空对象
  
  false：零，空字符串，null，undefined
  
  例如："false"放在if判断中
```
// "false"是一个非空字符串，直接放在if判断中会被当作『真』处理

if("false"){

	alert("true");

}else{

	alert("false");

}
```
  1
  2
  3
  4
  5
  6
引用类型
- 所有new出来的对象
- 用[]声明的数组
- 用{}声明的对象

#②变量

关键字：var
- 数据类型：JavaScript变量可以接收任意类型的数据
- 标识符：严格区分大小写
- 变量使用规则
  - 如果使用了一个没有声明的变量，那么会在运行时报错
    
    Uncaught ReferenceError: b is not defined
  - 如果声明一个变量没有初始化，那么这个变量的值就是undefined
#

2、声明和使用变量

#①JavaScript数据类型

基本数据类型
- 数值型：JavaScript不区分整数、小数
- 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
- 布尔型：true、false
  
  在JavaScript中，其他类型和布尔类型的自动转换。
  
  true：非零的数值，非空字符串，非空对象
  
  false：零，空字符串，null，undefined
  
  例如："false"放在if判断中
```
// "false"是一个非空字符串，直接放在if判断中会被当作『真』处理

if("false"){

	alert("true");

}else{

	alert("false");

}
```
  1
  2
  3
  4
  5
  6
引用类型
- 所有new出来的对象
- 用[]声明的数组
- 用{}声明的对象

#②变量

关键字：var
数据类型：JavaScript变量可以接收任意类型的数据
标识符：严格区分大小写
变量使用规则
- 如果使用了一个没有声明的变量，那么会在运行时报错
  
  Uncaught ReferenceError: b is not defined
- 如果声明一个变量没有初始化，那么这个变量的值就是undefined

#3、函数

#①内置函数

内置函数：系统已经声明好了可以直接使用的函数。

#[1]弹出警告框

alert("警告框内容");

#[2]弹出确认框

用户点击『确定』返回true，点击『取消』返回false

var result = confirm("老板，你真的不加个钟吗？");

if(result) {

	console.log("老板点了确定，表示要加钟");

}else{

	console.log("老板点了确定，表示不加钟");

}

1
2
3
4
5
6

#[3]在控制台打印日志

console.log("日志内容");

#②声明函数

写法1：

		function sum(a, b) {

			return a+b;

		}

1
2
3

写法2：

		var total = function() {

			return a+b;

		};

1
2
3

写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

#③调用函数

JavaScript中函数本身就是一种对象，函数名就是这个『对象』的『引用』。而调用函数的格式是：函数引用()。

		function sum(a, b) {

			return a+b;

		}

		var result = sum(2, 3);

		console.log("result="+result);

1
2
3
4
5
6

或：

		var total = function() {

			return a+b;

		}

		var totalResult = total(3,6);

		console.log("totalResult="+totalResult);

1
2
3
4
5
6

#4、对象

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。

#①使用new关键字创建对象

		// 创建对象

		var obj01 = new Object();

		// 给对象设置属性和属性值

		obj01.stuName = "tom";

		obj01.stuAge = 20;

		obj01.stuSubject = "java";

		// 在控制台输出对象

		console.log(obj01);

1
2
3
4
5
6
7
8
9
10

#②使用{}创建对象

		// 创建对象

		var obj02 = {

			"soldierName":"john",

			"soldierAge":35,

			"soldierWeapon":"gun"

		};

		// 在控制台输出对象

		console.log(obj02);

1
2
3
4
5
6
7
8
9

#③给对象设置函数属性

// 创建对象

var obj01 = new Object();

// 给对象设置属性和属性值

obj01.stuName = "tom";

obj01.stuAge = 20;

obj01.stuSubject = "java";

obj01.study = function() {

	console.log(this.stuName + " is studying");

};

// 在控制台输出对象

console.log(obj01);

// 调用函数

obj01.study();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

或：

// 创建对象

var obj02 = {

	"soldierName":"john",

	"soldierAge":35,

	"soldierWeapon":"gun",

	"soldierShoot":function(){

		console.log(this.soldierName + " is using " + this.soldierWeapon);

	}

};

// 在控制台输出对象

console.log(obj02);

// 调用函数

obj02.soldierShoot();

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#④this关键字

this关键字只有两种情况：

在函数外面：this关键字指向window对象（代表当前浏览器窗口）
在函数里面：this关键字指向调用函数的对象

// 直接打印this

console.log(this);

// 函数中的this

// 1.声明函数

function getName() {

	console.log(this.name);

}

// 2.创建对象

var obj01 = {

	"name":"tom",

	"getName":getName

};

var obj02 = {

	"name":"jerry",

	"getName":getName

};

// 3.调用函数

obj01.getName();

obj02.getName();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#5、数组

#①使用new关键字创建数组

// 1.创建数组对象

var arr01 = new Array();

// 2.压入数据

arr01.push("apple");

arr01.push("orange");

arr01.push("banana");

arr01.push("grape");

// 3.遍历数组

for (var i = 0; i < arr01.length; i++) {

	console.log(arr01[i]);

}

// 4.数组元素反序

arr01.reverse();

for (var i = 0; i < arr01.length; i++) {

	console.log(arr01[i]);

}

// 5.数组元素拼接成字符串

var arrStr = arr01.join(",");

console.log(arrStr);

// 6.字符串拆分成数组

var arr02 = arrStr.split(",");

for (var i = 0; i < arr02.length; i++) {

	console.log(arr02[i]);

}

// 7.弹出数组中最后一个元素

var ele = arr01.pop();

console.log(ele);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

#②使用[]创建数组

// 8.使用[]创建数组

var arr03 = ["cat","dog","tiger"];

console.log(arr03);

1
2
3

#6、JSON

#①JSON格式的用途

在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选。

#②JSON格式的说明

JSON数据两端要么是{}，要么是[]
{}定义JSON对象
[]定义JSON数组
JSON对象的格式是：

{key:value,key:value,...,key:value}

JOSN数组的格式是：

[value,value,...,value]

key的类型固定是字符串
value的类型可以是：
- 基本数据类型
- 引用类型：JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

{

	"stuId":556,

	"stuName":"carl",

	"school":{

		"schoolId":339,

		"schoolName":"atguigu"

	},

	"subjectList":[

		{

			"subjectName":"java",

			"subjectScore":50

		},

		{

			"subjectName":"PHP",

			"subjectScore":35

		},

		{

			"subjectName":"python",

			"subjectScore":24

		}

	],

	"teacherMap":{

		"aaa":{

			"teacherName":"zhangsan",

			"teacherAge":20

		},

		"bbb":{

			"teacherName":"zhangsanfeng",

			"teacherAge":108

		},

		"ccc":{

			"teacherName":"zhangwuji",

			"teacherAge":25

		}

	}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#③JSON对象和JSON字符串互转

#[1]JSON对象转JSON字符串

var jsonObj = {"stuName":"tom","stuAge":20};

var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object

console.log(typeof jsonStr); // string

1
2
3
4
5

#[2]JSON字符串转JSON对象

jsonObj = JSON.parse(jsonStr);

console.log(jsonObj); // {stuName: "tom", stuAge: 20}