python(javascript)

什么是javascript

1). java和javascript没有关系(雷锋和雷峰塔);
2). html: 机器人的框架; css: 给机器人涂色，穿个衣服; js: 让机器人可以动起来.

登陆信息的校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            // # 1. 获取用户名提交的内容;[object HTMLInputElement]
            var user = document.getElementById('user').value;
            // alert(user);


            //    2. 判断用户名是否为6～8个字符;
            var userLen = user.length;
            // alert(userLen >=6 && userLen<=8);
            if (userLen <= 6 || userLen >= 8) {
                alert("用户名不合法");
                return false;

            }


        }


    </script>
</head>
<body>

<!--
1. 需求:
    1). 用户登录时， 会填写一些信息, 如果所有的请求都提交给服务器处理， 服务端压力较大;
    2). 在前端先校验， (防君子不防小人);
    - 后端也需要校验


-->

<!--
2. 实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容；
        2). if判断用户名是否为空?
        3). 如果数据合法， 继续执行， 提交表单；
        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert


-->

<!--当提交信息的时候， 执行函数checkForm()-->
<form onsubmit="return checkForm()">
    <input type="text" name='user' id="user" placeholder="用户名(6~8个字符)">
    <input type="password" name='passwd' id="passwd" placeholder="密码(6位)">
    <input type="submit" value="登录">
</form>


</body>
</html>

聚焦与离焦事件的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkUser() {
            // # 1. 获取用户输入夫人用户名;
            var user = document.getElementById('user').value;
            //  2. 判断用户名长度;
            var userLen = user.length;
            if (userLen <= 6 || userLen >= 8) {
                // document.getElementById('userTip').innerText = "用户名不合法";
                document.getElementById('userTip').innerHTML = "<span style='color: red'>用户名不合法</span>"


            } else {
                document.getElementById('userTip').innerHTML = ""
            }


        }


        function checkPwd() {
            // # 1. 获取用户输入密码;
            var pwd = document.getElementById('passwd').value;
            //  2. 判断密码长度;
            var pwdLen = pwd.length;

            // === 值和类型都相等时返回true; == ---> '8' == 8 (true)
            if (pwdLen !== 6) {
                // document.getElementById('userTip').innerText = "用户名不合法";
                document.getElementById('pwdTip').innerHTML = "<span style='color: red'>密码不合法</span>"


            }
            else {
                document.getElementById('pwdTip').innerHTML = ""
            }


        }


        function showUserTip() {

            document.getElementById('userTip').innerHTML = '<span style="color: darkgray"> ' +
                '用户名为6～8位</span>'
        }


        function showPwdTip() {
            document.getElementById('pwdTip').innerHTML = '<span style="color: darkgray"> ' +
                '密码必须为6位</span>'
        }

    </script>


</head>
<body>


<form>
    <!--onblur---离焦事件-->
    <input type="text" name='user' onfocus="showUserTip()" onblur="checkUser()" id="user" placeholder="用户名(6~8个字符)">
    <span id="userTip"></span><br/>
    <input type="password" name='passwd' onfocus="showPwdTip()" onblur="checkPwd()" id="passwd" placeholder="密码(6位)">
    <span id="pwdTip"></span>
    <br/>
    <input type="submit" value="登录">
</form>

</body>
</html>

实现图片的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;

        function changeImg() {
            // # 获取图片对象;
            var imgObj = document.getElementById('img');
            // 2. 当点击下一页的时候， i+1, 图片变成img2.jpg;
            i += 1;

            //3. 修改图片对象里面的src属性;img/img2.jpg
            imgObj.src  = 'img/img' + i + '.jpg';

            //4. 如果轮播图片结束， 从头开始轮播;
            if (i===6){
                i = 0;
            }
        }
    </script>

</head>
<body>


<div>

    <!--
    思路:
        1). 确定事件的类型onclick事件;
        2). 并给对应的事件绑定函数changeImg();
    -->
    <img id='img' src="img/img1.jpg"><br/>
    <input type="button" onclick="changeImg()" value="下一页">


</div>

</body>
</html>

实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;

        function changeImg() {
            // # 获取图片对象;
            var imgObj = document.getElementById('img');
            // 2. 当点击下一页的时候， i+1, 图片变成img2.jpg;
            i += 1;

            //3. 修改图片对象里面的src属性;img/img2.jpg
            imgObj.src  = 'img/img' + i + '.jpg';

            //4. 如果轮播图片结束， 从头开始轮播;
            if (i===6){
                i = 0;
            }
        }




    </script>

</head>
<body "setInterval('changeImg()', 1000);">
<div>

    <!--
    思路:
        1). 确定事件的类型onload事件;
        2). 并给对应的事件绑定函数changeImg();
    -->
    <img id='img' src="img/img1.jpg"><br/>
    <!--<input type="button" onclick="changeImg()" value="下一页">-->


</div>

</body>
</html>

表格的全选和全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            //1. 获取全选框对象;
            var checkAllEle = document.getElementById('checkAll');

            // alert(checkAllEle.checked);
            //2. 判断当前的复选框状态;
            //    如果状态为选中, 设置所有的单选框为选中;
            var checkOnes = document.getElementsByName('checkOne');
            if (checkAllEle.checked) {

                // 依次遍历所有的单选框， 设置状态为选中;
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = true;

                }
            } else {
                // 依次遍历所有的单选框， 设置状态为选中;
                for (var j = 0; j < checkOnes.length; j++) {
                    checkOnes[j].checked = false;

                }
            }
        }


    </script>

</head>
<body>

<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>

        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>


</body>
</html>

动态添加城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity() {
            //  1). 获取用户在input表单输入框中填写的信息;
            var city = document.getElementById('city').value;
            if (city) {

                //    2. 创建一个城市的文本节点;
                var textNode = document.createTextNode(city);  // "shanghai"
                //    3. 创建一个li的元素节点;
                var liEleNode = document.createElement('li');   // <li></li>
                //    4. 将文本节点添加到li元素节点里面去;
                liEleNode.appendChild(textNode);    // <li>Shanghai</li>

                //    5. 将li的整体对象添加到ul标签里面去;
                var ulEleNode = document.getElementById("ul_city");
                ulEleNode.appendChild(liEleNode);
            }
        }


    </script>
</head>
<body>
<!--
1. 需求:
    点击一个按钮， 动态实现添加城市;

2. 实现步骤:
    1. 确定事件类型onclick
    2. 对于事件绑定一个函数addLiElement()
        1) 获取到用户在input输入框中填写的信息;
            city  = document.getElementById("city").value
            city  = document.getElementsByName("city")[0].value
        2). 创建一个城市的文本节点；document.createTextNode('xxxx')
        3). 创建一个li的元素节点; document.createElement('xxxx')
        4). 将文本节点添加到li元素节点里面去;
        5). 将整体添加到ul标签里面去;
            使用appendChild()来添加子节点;
-->

<div class="main">
    <form>
        <!--required表单必须填写内容-->
        <input type="text" id='city' placeholder="请输入添加的城市" required>
        <input type="button" value="添加城市" onclick="addCity()">

    </form>


    <ul id="ul_city">
        <li>上海</li>
        <li>北京</li>
        <li>西安</li>
    </ul>


</div>

</body>
</html>

省市信息的二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        function changeCity() {
            // 1. 如何存储省份与城市之间的关系(数组);
            // cites = [["xian", ""], [], []]
            var provinces = new Array(3);
            provinces[0] = new Array("西安", "咸阳", "宝鸡");
            provinces[1] = new Array("成都", "乐山", "绵阳");
            provinces[2] = new Array("济南", "青岛", "威海");


            // 2. 获取用户选择的省份;
            var choiceProvince = document.getElementById('province').value;


            //    8. 获取用户选择的城市的select节点;
            var selectEleNode = document.getElementById('city');
            //  3.遍历用户选择省份对应的城市;
            //  0 1 2

            // 9. 清空上一次对于城市添加的所有option元素;
            selectEleNode.length = 0;
            for (var i = 0; i < provinces.length; i++) {
                // 4. 判断用户选择的省份;
                // alert(type(choiceProvince), type(i));
                if (choiceProvince == i) {
                    // 如果相同， 便利该省份下的所有城市;
                    for (var j = 0; j < provinces[i].length; j++) {

                        // 5. 创建城市文本节点;
                        var textNode = document.createTextNode(provinces[i][j]);

                        // 6. 创建option的元素节点;
                        var optionEleNode = document.createElement("option");


                        // 7. 将城市的文本节点追加到option节点中;
                        optionEleNode.appendChild(textNode);

                        // 9. 添加option节点到select城市节点中;
                        selectEleNode.appendChild(optionEleNode);
                    }


                }


            }


        }


    </script>


</head>
<body>


<!--

1. 需求:
    点击一个按钮， 动态实现添加城市;

[root@foundation0 day25]# cat /tmp/hello
## 1. 需求分析
    省市的二级联动
## 2. 技术分析
## 3. 步骤实现
- 1). 确定事件类型onchange, 并为其绑定一个函数;
- 2). 修改下拉列表内容;
- 2-1). 获取用户选择的省份;
- 2-2). 创建一个二维数组， 用来存储省份和城市的对应关系;
- 2-3). 遍历二维数组中的省份；
- 2-4). 遍历时省份编号和用户选择的省份编号进行比较，
- 2-5). 如果相同， 遍历该省份下的所有城市;
        - 将每一个城市以<option>城市名</option>添加到select里面去;
- 2-6). 如果不相同， 继续循环遍历省份;
-->
<div class="main">
    <form>
        <span>籍贯： </span>
        <select id="province" onchange="changeCity()">
            <option>---选择省份---</option>
            <option value="0">陕西省</option>
            <option value="1">四川省</option>
            <option value="2">山东省</option>
        </select>
        <!--选择城市-->
        <select id="city">
            <option>---选择城市---</option>
            <!--<option>"西安"</option>-->

        </select>
    </form>
</div>


</body>
</html>

js的总结

1. ECMAScript(基础语法)

1). 定义变量:
var a = 1; — 局部变量;
a = 2; — 全局变量;

2). 使用的数据结构: (string, number, boolean<true, false>, array, null, undefined)

3). 比较:
== : 不判断数据类型 5 == ‘5’ (返回true) 5 == 5(返回true)
=== ：判断数据类型 5 === ‘5’ (返回false) 5 === 5(返回true)

4). 如何定义函数?
function 函数名{
函数体;
}
匿名函数: “setInterval(‘changImg()’, 1000);”

5). if . for, while,

2. BOM对象

Windows: alert(), setInterval(), clearInterval()
location: href() – 跳转到指定界面

3. DOM对象

事件: onload, onsubmit, onclick, onfocus, onblur, onchange,
警告信息实现的方式:
alert();
document.getElementById(’’).innerHtml = “error”
Document: 整个html文件；
Element: 所有的标签都可以称为Element;
Attribute: 标签里面的属性
Text:标签里面的内容
Node: 上面提到的所有名词都可以称为节点;