HTML基础之JS

Posted 2020-11-24 塔塔~

在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，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

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

JS变量

es5
name = ‘dsx‘; // 默认全局变量 
function func() {
    var name = ‘niulaoshi‘; // 局部变量 
}
 
es6
// let 定义的变量没有 预解析，let可以用来定义局部变量
alert(num1);
let num1 = 1;
alert(num1);

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

JS定义函数是用function，定义变量是用var

1、普通函数
function 函数名(形参, 形参, 形参) {
    执行代码块
}
函数名(形参, 形参, 形参);

function demo() {
//        console.log(‘aaaa‘) //相当于print()
//        alert(‘提示框！！！！‘) //提示框
        flag=confirm(‘确认要登陆吗？？‘) //确认框
        console.log(flag)
    }
 
2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递
<input type="button"  value="匿名函数" id="i1">

    element=document.getElementById(‘i1‘);
    element.onclick=function () {
        console.log(‘测试匿名函数‘)
    }

JS条件判断语句

if (条件) {
    执行代码块
} else if (条件) {
    执行代码块
} else {
    执行代码块
};
 
 if(username == user && password ==passwd){
             console.log(‘登陆成功‘)
        }else if(username != user){
            console.log(‘用户名错误‘)
        }else{
            console.log(‘用户名或密码不正确‘)
        }

简单的数值匹配可以用switch判断，其中(a)里填写的是一个结果
switch (a) {
    case 1:
        console.log(111);
        break;
    case 2:
        console.log(222);
        break;
    default:
        console.log(333)
}

//JS中条件判断时只要数值相同就算条件成立，如果想要数值和类型完全一样才成功要用===。
if(1==‘1‘){
        console.log(条件成立)
}
if(1===‘1‘){
    console.log(条件不成立)
}

JS循环语句

列表循环
第一种循环：循环的是角标

        var l = [‘奔驰‘,‘宝马‘,‘奥迪‘,‘凯迪拉克‘]; // 声明数组

        for (var i in l ){
            console.log(l[i])
        }

第二种循环：这种方式不支持字典的循环
  for (var i=0;i<l.length;i++){
            console.log(l[i])
        }

第三种循环
while (1 == 1) {
    console.log(111) //死循环
}

字典循环

var m={‘name‘:‘aa‘,‘pwd‘:123}

for (var k in m ){
     console.log(k); //取得是key
     console.log(m[k])  //取得是value
}

字符串循环  
          var s=‘测试循环字符串‘;
//          第一种方式
          for(var i in s){
              console.log(s[i])
          }
//          第二种方式
          for(var i=0;i<s.length;i++){
              console.log(s[i])
          }