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
<script src="public.js" type="text/javascript"></script>
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>