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

    编程语言，由浏览器编译并运行

    、存在形式：

    、放置位置

        body内部最下面

    、变量

        var a = ; 局部变量

        a = ;     全部变量 *****

        ===》

            var a = ;

参考博客：https://pythonav.com/wiki/detail/5/63/