JavaScript-编写方式和语法规则
JavaScript-编写方式和语法规则
代码存在形式
1.Script代码块，只能在当前页面使用。
应用场景：所有功能仅当前页面需要（如果代码太多也推荐放入js文件）。
<script type="text/javascript">
// 内部编写JavaScript代码
</script>
2.独立js文件，可以被多个引入之后使用。
应用场景：多个页面公共功能可以放入文件，避免重复编写。
<script type="text/javascript" src="JavaScript文件路径"></script>
各个代码推荐写入位置
推荐把js代码都放在body标签的底部。
JS放在下面可以让用户快速看到页面上的 HTML和CSS效果，但JS的效果必须还要等耗时操作处理完才能用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<!-- CSS代码推荐位置 -->
<link rel="stylesheet" href="CSS文件路径">
<style>
/* 内部编写CSS代码 */
</style>
</head>
<body>
<h1>HTML标签和样式</h1>
<!-- JavaScript代码推荐位置 -->
<script type="text/javascript" src="JavaScript文件路径"></script>
<script type="text/javascript">
// 内部编写JavaScript代码
</script>
</body>
</html>
JavaScript语法规则
变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
// 全局变量
name = '武沛齐';
function func(){
// 局部变量
var age = 18;
// 全局变量
gender = "男"
}
func();
console.log(gender); // 男
console.log(name); // 武沛齐
console.log(age); // 报错：age是fun的局部变量，外部无法获取。
注释：js中单行注释用 // ；多行注释用 /* */
数据类型
查看数据类型： typeof(“xx”)
数字(Number)
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2"); // 将某值转换成数字，不成功则NaN
parseFloat("1.2"); // 将某值转换成浮点数，不成功则NaN
/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/
字符串(String)
定义：
// 声明
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
方法：
// 常用方法
var name = "wupeiqi";
var value = names[0] // 索引
var value = name.length // 获取字符串长度
var value = name.trim() // 去除空白
var value = name.charAt(index) // 根据索引获取字符
var value = name.substring(start,end) // 根据索引获取子序列
布尔类型(Boolean)
布尔类型仅包含真假，与Python不同的是其首字母小写。
var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
*/
数组(Array)
JavaScript中的数组类似于Python中的列表。
定义：
// 声明
var names = ['武沛齐', '肖峰', '于超']
var names = Array('武沛齐', '肖峰', '于超')
方法：
// 常见方法
var names = ['武沛齐', '肖峰', '于超']
names[0] // 索引
names.push(ele) // 尾部追加元素
var ele = names.obj.pop() // 尾部移除一个元素
names.unshift(ele) // 头部插入元素
var ele = obj.shift() // 头部移除一个元素
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
names.slice(start,end) // 切片
names.reverse() // 原数组反转
names.join(sep) // 将数组元素连接起来以构建一个字符串
names.concat(val,..) // 连接数组
names.sort() // 对原数组进行排序
对象(Object)
类似于Python中的字典
定义：
// 声明
info = {
name:'武沛齐',
"age":18
}
方法：
// 常用方法
var val = info['name'] // 获取
info['age'] = 20 // 修改
info['gender'] = 'male' // 新增
delete info['age'] // 删除
null
null是JavaScript语言的关键字，它表示一个特殊值，
常用来描述“空值”，相当于Python的None。
undefine
undefined是一个特殊值，表示只是声明而变量未定义。
var name;
console.log(typeof(name));
条件语句
if,else
if,else，用于判断。
var age = 18;
if(age <18){
}else if(age>=18 and 1 == 1){
}else if(age>=30){
}else{
}
switch,case
switch,case，用于判断等于某些值。
var num = 18;
switch(num){
case 10:
console.log('未成年');
break;
case 18:
console.log('成年');
break;
case 35:
console.log('油腻老男人');
break;
case 100:
console.log('....');
break;
default:
console.log('太大了');
}
循环语句
for(var i in [])
默认生成索引，适用于：字符串、数组、对象。
var names = ['武沛齐', '肖峰', '于超']
for(var index in names){
console.log(index, names[index])
}
for(var i=0;i<10;i++)
自定义索引并设置增加步长，适用于：字符串、数组。（字典索引非有序）
var names = ['武沛齐', '肖峰', '于超']
for(var i=0;i<names.length;i++){
console.log(i, names[i])
}
异常处理
1.主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
2.catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
var name = ''
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
函数
函数
function func(arg){
return arg + 1;
}
匿名函数
function (arg){
return arg + 1;
}
// 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)
自执行函数
(function(arg){
console.log(arg);
})('wupeiqi')
数据隔离示例
funcList = [];
(function () {
var name = '武沛齐';
function f1() {
console.log(name);
}
funcList.push(f1);
})();
(function () {
var name = 'Alex';
function f2() {
console.log(name);
}
funcList.push(f2);
})();
funcList[0]()
json序列化
JavaScript提供了json序列化功能，即：将对象和字符串之间进行转换。
JSON.stringify(object) ，序列化
var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)
console.log(infoStr) //'{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
JSON.parse(str)，反序列化
var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
var info = JSON.parse(infoStr)
console.log(info)
