web前端_js

在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释

1.js的导入，建议将大的js的文件放到body内部的最下边，这样先加载静态信息，然后加载js
2.不可在导入的js标签内写js代码<script></script>
3.const 定义常量，var定义变量有预解析,let也可以定义变量没有预解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    onclick点击事件，绑定了js中的f()函数-->
    <input type="text" placeholder="输入用户名" id="user">
    <input type="password" placeholder="输入密码" id="pwd">
    <input type="button" onclick="f()" value="login">
    <br>
    <input type="button" onclick="f1()" value="for循环">
    <br>
    <input type="button" onclick="f2()" value="switch循环">
    <br>
    <input type="button" value="匿名函数测试" id="i1">
    <br>
    <input type="button" onclick="f4()" value="变量" >

<!--绑定js文件-->
<!--    <input type="submit" onclick="f1()" value="跳转">-->
<!--<script>-->
<!--    function f() {-->
<!--        // console.log('2312')//打印-->
<!--        //alert('1232')//提示框-->
<!--        confirm('确认框')//确认框-->
<!--    }-->
<!--</script>-->
    <script>
        function f() {
            var user = 'mh';
            var pwd = '123456';
            var u = document.getElementById('user').value;
            var p = document.getElementById('pwd').value;
            if (user==u && pwd==p){
                alert('登录成功')
            }
            else {
                alert('用户名或密码错误')
            }
        }
        function f1() {
            // 打印数组
            var l = ['a','b','c','d']
            // for (var i in l){
            //     console.log(l[i])
            // }
            // for (var i=0;i<l.length;i++){
            //     console.log(i)
            // }
            // 打印字典
            var d = {'name':'mg','age':18}
            // for (var k in d){
            //     console.log(d[k])
            // }
            //打印字典
            var str = '没吃药'
            // for (var i=0;i<str.length;i++){
            //     console.log(str[i])
            // }
        }
        function f2() {
            var uname = document.getElementById('user').value
            switch (uname) {
                case 'mh':
                    console.log('shimh');
                    break;
                case 'hh':
                    console.log('shihh');
                    break;
                default:
                    console.log('xxxx')
            }
        }
        //匿名函数测试
        e = document.getElementById('i1')
        e.onclick = function () {
            f2()
        }
        function f3() {
            var name = 'hh'
            console.log(name)
        }
        function f4() {
            console.log(name)
        }
    </script>
<!--引入js文件-->
<!--    <script src="6_demo.js"></script>-->
</body>
</html>

 

posted @ 2019-12-04 17:32  小马哥007  阅读(128)  评论(0)  编辑  收藏  举报