day 42 JavaScript 基础知识部分
一. JavaScript存放位置
<script type="text/javascript" src="JavaScript文件路径"></script> <!-- JavaScript代码推荐位置 --> <link rel="stylesheet" href="CSS文件路径"> <!-- CSS代码推荐位置 -->
二. 常见数据类型
1.数字：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) 来判断。 */
扩展：可以用 typeof(“xx”) 查看数据类型。
2. 字符串(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) // 根据索引获取子序列
3. 布尔类型（Boolean）
布尔类型仅包含真假，与Python不同的是其首字母小写
var status = true; var status = false; /* 在js中进行比较时，需要注意： == 比较值相等 != 不等于 === 比较值和类型相等 !=== 不等于 || 或 && 且 */
4. 数组（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() // 对原数组进行排序
5. 字典（对象Object）
JavaScript中其实没有字典类型，字典是通过对象object构造出来的。
// 声明 info = { name:'武沛齐', "age":18 }
// 常用方法 var val = info['name'] // 获取 info['age'] = 20 // 修改 info['gender'] = 'male' // 新增 delete info['age'] // 删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<style>
table{
/*边框合并*/
border-collapse: collapse;
}
table th,table td{
border: 1px solid #ddd;
padding: 8px;
}
table th{
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script type="text/javascript">
var userList = [
{id:1,name:'武沛齐',gender:'男'},
{id:2,name:'吴老板',gender:'男'},
{id:3,name:'肖老板',gender:'男'}
];
// 笨方法
for(var i in userList){
var row = userList[i];
var trNode = document.createElement('tr');
var tdNodeId = document.createElement('td');
tdNodeId.innerText = row.id;
trNode.appendChild(tdNodeId);
var tdNodeName = document.createElement('td');
tdNodeName.innerText = row.name;
trNode.appendChild(tdNodeName);
var tdNodeGender = document.createElement('td');
tdNodeGender.innerText = row.gender;
trNode.appendChild(tdNodeGender);
var bodyNode = document.getElementById('body');
bodyNode.appendChild(trNode);
}
// 简便方法
/*
for(var i in userList){
var row = userList[i];
var trNode = document.createElement('tr');
for(var key in row){
var tdNode = document.createElement('td');
tdNode.innerText = row[key];
trNode.appendChild(tdNode);
}
var bodyNode = document.getElementById('body');
bodyNode.appendChild(trNode);
}
*/
</script>
</body>
</html>
6. 其他（null、undefine）
-
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”，相当于Python的None。
-
undefined是一个特殊值，表示只是声明而变量未定义。
var name; console.log(typeof(name));
三、条件
if,else，用于判断。
var age = 18; if(age <18){ }else if(age>=18 and 1 == 1){ }else if(age>=30){ }else{ }
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.lenght;i++){ console.log(i, names[i]) }
双重循环
for(var i = 0; i < 5; i++){ //控制行数 for(var j = 0; j < 10; j++){//控制的每行的*数 document.write('*'); } document.write('<br>'); }
五、异常处理
在JavaScript的异常处理中有两个注意事项：
- 主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
- catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 var name = '' } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 }
六、函数
1、函数
function func(arg){ return arg + 1; }
2、匿名函数
function (arg){ return arg + 1; } // 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)
这里的function(){}是没有函数名的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。
3、自执行函数，自动触发执行
(function(arg){ console.log(arg); })('wupeiqi')
<!--【可选部分】一般用于做数据隔离使用，因为JS中是以函数为作用域，所以当js代码比较多时，通过自执行函数做数据隔离(闭包)。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
</head>
<body>
<script type="text/javascript">
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]()
</script>
</body>
</html>
七、json 序列化
JavaScript提供了json序列化功能，即：将对象和字符串之间进行转换。
1、JSON.stringify(object) ，序列化
var info = {name:'alex',age:19,girls:['钢弹','铁锤']} var infoStr = JSON.stringify(info) console.log(infoStr) # '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
2、JSON.parse(str)，反序列化
var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}' var info = JSON.parse(infoStr) console.log(info)
应用场景：网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。（以后学习ajax会经常使用）。
JavaScript 编程语言，由浏览器编译并运行 1、存在形式： 2、放置位置 body内部最下面 3、变量 var a = 123; 局部变量 a = 123; 全部变量 ***** ===》 var a = 123;
浙公网安备 33010602011771号