HTML基础之JS

HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。

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

引入JavaScript代码，类似于Python的import

head中引入JS与body中引入JS区别

html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在html body的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

单行注释通过 // 多行通过 /* */

js变量：

name = 'qq'; // 默认全局变量 
function func() {
    var name = 'weixin'; // 局部变量 
}
 

// alert有预解析，let 定义的变量没有预解析
alert(num1);
let num1 = 1;
alert(num1);
//    const 也没有变量预解析 const 定义的程序不可以修改 常量
const num2 = 2;  
alert(num2);
num2 = 3
##

举例：input绑定一个onclick事件，输出日志到console：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
    <input type="button" onclick="demo()" value="login">
    <script>    //写或者引入js代码
        function demo() {
//            console.log('denglu')  /* 输出到console,相当于python中的打印*/
//            alert('提示框')       /*弹出提示框*/
            flag=confirm('确认要提交吗')   /*弹出确认框，取消返回false，确认返回true*/
            console.log(flag)
        }
    </script>
    
</body>
</html>

引入js文件:把上例中的demo写一个js文件，然后导入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入js的位置可以在head中，也可以在body中， 放到这里由于代码从上至下执行，所以会卡在head这里，影响体验，所以一般放置body下面-->
    //<script src="j.js"></script>
</head>
<body>
    <input type="button" onclick="demo()" value="login">
    <script src="j.js"></script>
</body>
</html>

　判断语句：

if判断：

<body>
    <input type="text" placeholder="请输入用户名" id="username">
    <input type="password" placeholder="请输入密码" id="passwd">
    <input type="button" onclick="login()" value="login">
    <script>
        function login() {
            var username = 'lll';
            var password = '123';
            /*
            * 1、获取用户名、密码
            * 2、if判断
            * */
            var user = document.getElementById('username');   //定位到输入的用户名
            var passwd = document.getElementById('passwd');   //定位到输入的密码
            console.log('username--->'+user);   //拼接
            console.log('passwd--->'+passwd);
            if (username == user && password==passwd){
               console.log('登录成功')
            }else if(username != user){
                console.log('用户名错误')
            }else if(password !=passwd){
                console.log('密码错误')
            }else {
                console.log('都错了')
            }

        }
    </script>
</body>



##
补充、js中的想要数据类型和值完全匹配，要用===（python中是==）
if(1=='1')  //这个为true
if(1==='1')  //这个才能判断int好人字符串不匹配，校验不通过

swith判断：
//swith是js特有的，可用于多个业务逻辑，case1干什么，case2干什么；但是需要完全匹配
        switch (a) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            default:
                console.log('啥也不是')
}

　　for循环

<!--str和list循环一样；字典不能用第二种循环方法-->
//      list两种声明方式
//       var l1=[1,2,3,4]
//       var l2 = new Array(1,2,3,4)

       /*for循环*/
        function test() {
            var l = ['奔驰','宝马','奥迪','凯迪拉克']; // 声明数组
            for (var i in l) {
                console.log(l[i])

                for (var i = 0; i < l.length; i++) {
                    console.log(l[i])
                }
            }
        }
        var m ={"id":1,"name":'ksk'}
        for (var k in m){
            console.log(k)
            console.log(m[k])
        }
        e = document.getElementById('dd')
        e.onclick = function () {
            console.log('测试匿名函数')   <!--匿名函数可以稍微保护代码不被泄露-->

        }
    </script>
</body>

　　匿名函数

<body>
    <input type="button" value="匿名函数" id="i1">
    <script>
        e = document.getElementById('i1')
        e.onclick = function () {
            console.log('测试匿名函数')   <!--匿名函数可以稍微保护代码不被泄露-->

        }
    </script>
</body>

posted @ 2019-12-07 17:02 哈哈一笑~~~ 阅读(372) 评论(0) 收藏举报

刷新页面返回顶部

哈哈一笑

HTML基础之JS

公告