网页设计练习第五次作业（JavaScript）

DZY--小小的世界

已于 2023-12-30 00:55:37 修改

阅读量354

点赞数 8

文章标签： javascript 前端开发语言

于 2023-12-28 18:41:12 首次发布

本文链接：https://blog.csdn.net/2301_79602950/article/details/135276124

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <script>
        alert(parseInt("12"));
        alert(parseInt("34A45"));
        alert(parseInt("A789"));//输出结果是NaN
        var age=20;
        var _age="20";
        var $age=20;
        alert(age==_age);
        alert(age===_age);
        alert(age==$age);
    </script> 
    <script src="index.js"></script>
    <script>
        alert('hello world');
    </script>
    <script src="外部JS文件.html"></script>
    <script>
        window.alert("hello js");
        document.write("hello js");
        console.log("hello js");
    </script>
    <script>
        var a=10;//全局变量var型变量作用域很大；可以重复定义
        a="张三";
        alert(a);
        //let是局部变量尽在方法块里面有效
        //const定义的是常量，不能被改变
        alert(typeof 3);
        alert(typeof 3.14);
        alert(typeof true);
        alert(typeof "a");
        alert(typeof 'a');

        var a;
        alert(typeof a);
    </script>
</body>
</html>

Array数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象</title>
</head>
<body>
    <script>
        //定义数组
      //var arr=new Array(1,2,3,4);
      var arr=[1,2,3,4];
     
      console.log(arr[0]);
      console.log(arr[2]);
      //快捷方法就是直接输入log
      //特点长度可变类型可变
      var arr=[1,2,3,4];
      arr[10]=50;
      console.log(arr[10]);
      console.log(arr[6]);
      arr[9]=true;
      arr[5]="A";
      console.log(arr);
     var arr=[1,2,3,4];
     for (let i = 0; i < arr.length; i++) {
       console.log(arr[i]);
     }
     //遍历foreach只遍历有值的数字
     arr.forEach(function(e){
        console.log(e);
     })
     //箭头函数
     arr.forEach((e)=>{
        console.log(e);
     })
     //push添加元素在数组的尾部
     arr.push(7,8,9);
     console.log(arr);
     //splice删除
     arr.splice(2,2);//从角标位置开始删除几个
     console.log(arr);
    </script>
</body>
</html>

Sting数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String</title>
</head>
<body>
    <script>
        //创建字符串
        var str="hello world";
        console.log(str);

        //length属性
        console.log(str.length);

        //charat方法
        console.log(str.charAt(3));

        //indexOf方法
        console.log(str.indexOf("lo"));

        //trim方法去除空格
        var s=str.trim();
        console.log(s);

        //substring(star,end)
        console.log(s.substring(0,5));
    </script>
    
</body>
</html>

JSON对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
</head>
<body>
   <script>
    var user={
        name:"tom",
        age:18,
        gender:"boy",
       // eat:function(){
        //    alert("用膳~");
        //}
        eat(){
            alert("用膳~")
        }
    }
    alert(user.name);
    user.eat(  );

    //定义JSON
    var JSONstr='{"name":"tom","age":18,"addr":["北京","武汉","杭州"]}';
    //json转化为字符串--js对象
    var obj=JSON.parse(JSONstr);
    alert(obj.name);

    //js对象转化为JSON字符串
   alert(JSON.stringify(obj)); 
   </script>
</body>
</html>

BOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM</title>
</head>
<body>
    <script>
        //获取window
        window.alert("hello world");
        alert("hello 世界");

        var flag= confirm("您确认删除吗？");
        alert(flag);

        var i=0;
        setInterval(function(){
            i++;
            console.log("定时器执行了"+i+"次");
        },2000);

       setTimeout(function(){
            alert("js")
       },3000);

       alert(location.href);
       location.href="https://blog.csdn.net/wyhwust?type=blog";
    </script>
</body>
</html>

练习1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第五次作业</title>
</head>
<body>
    <img id="photo" src="../../img/off.gif">
    <br><br>

    <div class="a">武汉科技大学</div>
    <br><br>

    <div class="b">信息管理系</div>
    <br><br>
    
    <input type="checkbox" name="hobby">网页设计
    <input type="checkbox" name="hobby">Java程序设计
    <input type="checkbox" name="hobby">数据结构
    
    <script>
        var img= document.getElementById('photo');
        img.src="../../img/on.gif";

        var divs =document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i];
            div.innerHTML+="<font color='red'>very good</font>";
        }

        var ins= document.getElementsByName('hobby');
       for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked=true;
       }
    </script>
</body>
</html>