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>
