javaweb开发Day2(宝藏级干货冲冲冲)

已于 2023-08-02 20:09:23 修改
阅读量225 收藏 1
点赞数 1
分类专栏： javaweb 文章标签： javascript 开发语言 ecmascript
于 2023-07-24 20:51:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73735007/article/details/131890013
版权

目录

个人笔记梳理---仅供参考

js-引入方式

js书写语法

js输出语句

js变量

js数据类型

js运算符​编辑

js流程控制语句

js函数

js对象：Array、String、JSON、BOM、DOM

Array

String

JSON

 BOM

DOM

js事件监听

Vue

Vue生命周期

个人笔记梳理---仅供参考

JavaScript：负责网页的行为（交互效果）

js-引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-引入方式</title>
    <!-- 内部脚本 -->
<!-- <script>
    alert('Hello JS')
</script> -->
<!-- 外部脚本 -->
<script src="js效果演示/Demo.js"></script>
</head>
<body>
    
</body>
</html>

js书写语法

js输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
</head>
<body>
  <script>
    //方式一：弹出警告框
    window.alert("Hello!JS");
    //方式二：写入html页面
    document.write("Hello！");
    //方式三：控制台输出
    console.log("hello!js");
  </script>  
</body>
</html>

js变量

js数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //原始数据类型
        alert(typeof 3);//number
        alert(typeof 3.14);//number
       
        alert(typeof "A");//string
        alert(typeof 'Hello');//string
    
        alert(typeof true);//boolean
        alert(typeof false);//boolean
      
        alert(typeof null);//object

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

js运算符

 

js流程控制语句

 

js函数

 

 

 注意：js中，函数调用可以传递任意个数的参数

js对象：Array、String、JSON、BOM、DOM

 注意：JavaScript中的数组相当于java中集合，数组的长度是可变的，而JavaScript弱类型，所以可以存储任意的类型的数据

Array

 

箭头函数（ES6）：是用来简化函数定义语法的。具体形式为：（...）=>{...},
如果需要给箭头数起名字：var  xxx=(...)=>{...}

String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str=new String("Hello String");
    var str="Hello String";
    console.log(str);
    //length
    console.log(str.length);
    //charAt
    console.log(str.charAt(4));
    //indexOf
    console.log(str.indexOf("lo"));
    //trim
    var s=str.trim();
    console.log(s);
    //substring(start,end)---开始索引，结束索引（含头不含尾）
    console.log(s.substring(0,5));
</script>
</html>

JSON

 

 BOM

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //获取
        window.alert("Hello BOM");
        alert("Hello BOM Window");
        //方法
        //confirm-对话框--确认：true，取消：false
        //var flag = confirm("你确认删除该条记录吗?");
        // alert(flag); 
        //定时器-setInterval--周期性的执行某一个函数
      /*  var i = 0;
        setInterval(function () {
            i++;
            console.log("定时器执行了" + i + "次");
        }, 2000);*/
        //定时器-setTimeout--延迟指定时间执行一次
        setTimeout(function()
        {
            alert("JS");
        },3000);
    </script>
</body>

</html>

 

DOM

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="h1" src="图片素材/off.gif"> <br><br>
    <div class="cls">宇宙ing</div><br>
    <div class="cls">脱水ing</div><br>
    <input type="checkbox" name="hobby">天堂
    <input type="checkbox" name="hobby">人生
    <input type="checkbox" name="hobby">地狱
</body>
<script>
    //1获取Element元素
    //1.1获取元素-根据id获取
    /* var img=document.getElementById('h1');
     alert(img)*/
    //1.2获取元素-根据标签获取-div
    /*var div=document.getElementsByTagName('div');
    for(let i=0;i<ins.length;i++){
        alert(ins[i]);
    }
    //1.4获取元素-根据class属性获取
    var div = document.getElementsByClassName('cls');
    for (let i = 0; i < div.length; i++) {
        alert(div[i]);
    }*/
    //点亮灯泡：src属性值
    var img = document.getElementById('h1');
    img.src = "图片素材/on.gif";
    //2.将所有div标签的内容后面加上：yyds（红色字体）--<font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>yyds</font>";
    }
    //3/使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }
</script>

</html>

js事件监听

 

 

Vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-入门</title>
    <script src="D:\html\js文件\vue.js"></script>
</head>

<body>
    <div id="app">
       <a v-bind:href="url">链接1</a>
       <a :href="url">链接2</a>
       <input type="text" v-model="url">
    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el: "#app",//vue接管区域
        data: {
            url:"https://www.baidu.com"
        }
    })
</script>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if和v-show</title>
    <script src="D:\html\js文件\vue.js"></script>
</head>

<body>
    <div id="app" style="text-align: center;">
        年龄<input type="text" v-model="age">经判定,为: 
        <span v-if="age<=35">阳光开朗的少年(age<=35)</span>
        <span v-else-if="age > 35 && age < 60">意气风发的中年(35-60)</span>
        <span v-else>容光焕发的老年</span>

        <br><br>
    </div>

</body>
<script>//定义Vue对象
    new Vue({
        el: "#app",//vue接管区域
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

</html>

 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令v-for</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>/*索引从1开始*/
    </div>
</body>
<script>
    new Vue({
el:"#app",
data:{
    addrs:["北京" , "上海","西安","成都","深圳"]
},
methods:{

}
    })
</script>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
  

</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender==1">男</span>
                    <span v-if="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-if="user.score>=60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vue=new Vue({
        el: "#app",
        data: {
            users: [{
                name: "AA",
                age: 20,
                gender: 1,
                score: 89
            }, {
                name: "BB",
                age: 19,
                gender: 2,
                score: 78
            }, {
                name: "CC",
                age: 23,
                gender: 1,
                score: 88
            }]
    },
    methods:{

    },
    })
</script>

</html>

Vue生命周期

 ·mounted:挂载完成，Vue初始化成功，html页面渲染成功。（发送请求到服务端，加载数据）

爱吃java的羊儿
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃java的羊儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值