JavaScript

Javascript ：客户端的一个脚本语言
js是一门弱类型语言，变量的数据类型由后面赋的值决定
数据类型：
1. 基本数据类型：数值，字符，布尔。。。
2. 引用数据类型：new 出来的对象，数组。。

js的定义方法类似于python，没有返回值类型，没有参数类型，也不确定有没有返回值

function hello(num1,num2,name) {
            if(num1>num2){
                return "hello to"+name;
            }else{
                alert("Hello")
            }
            
        }

<script language="JavaScript">
    var str = "hello world";
    // 打印
    alert(str)
    // 引用数据类型
    var persion = new Object();
    persion.pid = "p001";
    persion.pname = "xiaowang"
    alert(persion.pname)

    // js方法
    function hello1(name){
        return "hello to"+name;
    }
    function hello(num1,num2,name) {
        if(num1>num2){
            return "hello to"+name;
        }else{
            alert("Hello")
        }
    }
</script>

初学时候，html中会混杂着和JS的绑定，代码如下：

涉及到的css在上一章

javascript-01.js

// 当鼠标悬浮时，显示背景颜色
function showBGColor(){
    // event：当前发生的事件
    //event.srcElement事件源
    // alert(event.srcElement );
    // alert(event.srcElement.tagName);
    if(event && event.srcElement &&event.srcElement.tagName=="TD"){
        var td = event.srcElement;
        //td.parentElement 获取td的父元素
        var tr = td.parentElement;
        // 如果想要通过js代码设置某节点的样式 则需要 .style
        tr.style.backgroundColor = "navy";
        //tr.ceils 表示获取这个tr中的所有单元格
        var tds = tr.cells;
        for(var i=0;i<tds.length;i++){
            tds[i].style.color="white";
        }
    }
}
// 当鼠标离开时，恢复原始样式
function clearBGColor(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor="transparent";
        var tds = tr.cells;
        for(var i=0;i<tds.length;i++){
            tds[i].style.color="threeddarkshadow";
        }
    }
}

// 当鼠标悬浮在单价单元格时候，显示手势
function showHand(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td = event.srcElement;
        td.style.cursor="hand";
    }
}

html代码

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css-demo02.css">
    <script type="text/javascript" src="javascript-01.js"></script>
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
            <table id="tbl_fruit">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
<!--            onmouseover： 当鼠标放在这个上面时候-->
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td>苹果</td>
                    <td onmouseover="showHand()">100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>删除</td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td>香蕉</td>
                    <td onmouseover="showHand()">100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>删除</td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td>鸭梨</td>
                    <td onmouseover="showHand()">100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>删除</td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td>西瓜</td>
                    <td onmouseover="showHand()">100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>删除</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">2500</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

接下来对上面的进行优化，使html中仅有html代码去掉多余的绑定

去掉html文件中的绑定事件
在JS中增加如下代码：

// window 代表当前窗口
//当窗口加载的时候执行这个匿名函数
window.onload=function (){
    // 当页面加载完成的时候 我们需要绑定各种事件
    // 根绝 ID 获取表格
    var fruitTbl = document.getElementById("tbl_fruit");
    // 获取表格中的所有行
    var rows = fruitTbl.rows;
    for(var i=0;i<rows.length;i++){
        var tr = rows[i];
        //1.绑定鼠标悬浮设置背景颜色
        tr.onmouseover=showBGColor;
        tr.onmouseout=clearBGColor;

        // 获取tr 这一行所有的单元格
        var cells = tr.cells;
        var priceID = cells[1];
        //2.绑定鼠标悬浮在单价单元格变收拾的事件
        priceID.onmouseover=showHand;

    }
}

更新单价

//3.绑定鼠标点击单价单元格的事件
priceID.onclick=editPrice;

//当鼠标点击单元格时进行价格编辑
function editPrice(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var priceTD = event.srcElement;
        // 判断 当前 priceTD 有子节点且为文本节点 TextNode对应的是3 ElementNode对应的是1
        if(priceTD.firstChild && priceTD.firstChild.nodeType==3) {
            //innerText 表示设置或者获取当前节点的内部文本
            var oldPirce = priceTD.innerText;
            // innerHTML 表示设置当前节点的内部HTML
            priceTD.innerHTML="<input type='text' size='4'/>"
            var input = priceTD.firstChild;
            if(input.tagName=="INPUT"){
                input.value = oldPirce;
                // 选中输入框文本
                input.select();
                //4.绑定输入框失去焦点，更新单价
                input.onblur=updatePrice;
            }
        }
    }
}

function updatePrice(){
    if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
        var input = event.srcElement;
        var newPrice = input.value;
        //input节点的父节点是td
        var priceTD = input.parentElement;
        priceTD.innerText=newPrice;

        // 更新当前行的小计这一个格子的值
        // priceTD.parentElement td 的父元素是tr
        updateXJ(priceTD.parentElement);
    }
}

// 更新指定行的小计
function updateXJ(tr){
    if(tr && tr.tagName=="TR"){
        var tds = tr.cells;
        var price = tds[1].innerText;
        var count = tds[2].innerText;

        var xj = parseInt(price)*parseInt(count);
        tds[3].innerText = xj;
        // 更新总计
        updateZJ();
    }
}

function updateZJ(){
    var fruitTbl = document.getElementById("tbl_fruit");
    var rows = fruitTbl.rows;
    var sum = 0;
    for(var i=1;i<rows.length-1;i++){
        var tr = rows[i];
        var xj = parseInt(tr.cells[3].innerText);
        sum = sum + xj;
    }
    rows[rows.length-1].cells[1].innerText = sum;
}

删除某条记录操作

// 7. 绑定删除小图标的点击事件
var img = cells[4].firstChild;
if(img && img.tagName=="IMG"){
    // 绑定单击事件
    img.onclick=delFruit;
}

在editPrice()中加入如下

//8. 在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
input.onkeydown=ckInput;

function delFruit(){
    if(event && event.srcElement && event.srcElement.tagName=="IMG"){
        // alert 表示弹出一个对话框，只有确定按钮，
        if(window.confirm("是否确认删除当前库存记录")){
            var img = event.srcElement;
            var tr = img.parentElement.parentElement;
            var fruitTbl = document.getElementById("tbl_fruit");
            fruitTbl.deleteRow(tr.rowIndex);
            updateZJ();
        }

    }
}

// 检验键盘摁下的值的方法
function ckInput(){
    var kc = event.keyCode;
    // 0 ~ 9
    // console.log(kc)
    if(!((kc>=48 && kc<=57) || kc==8 || kc==13)){
        event.returnValue=false;
    }
    if(kc==13){
        event.srcElement.blur();
    }
}