JavaWeb笔记_02

最新推荐文章于 2024-07-31 17:34:40 发布

i挽风i

最新推荐文章于 2024-07-31 17:34:40 发布

阅读量65

点赞数 1

分类专栏： JavaWeb笔记文章标签：前端

本文链接：https://blog.csdn.net/Pull_Wind/article/details/128942088

版权

JavaWeb笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

WebDay02总结

1.JS函数

1.1 定义格式

function 函数名称(形参) {
    return 返回值;
}

1.2 调用格式

let 返回值 = 函数名称(实参);

1.3 特点

JS函数参数没有类型,返回值也没有类型
形参的个数和实参的个数可以不一致
JS函数不存在重载

2.JS对象

2.1 Array

创建
```
let arr = [元素1,元素2....];
```
访问
```
arr[索引]
```
常用功能
- var 变量名 = new Array(元素列表);
  - var arr = new Array(1,23,4);
- var 变量名 = [元素列表];
  - var arr = [1,2,3];
访问元素：通过索引
- arr[0];
- 遍历：同java
- for(let i = 0; i < arr.length; i++){alert(arr[i]);}
特点：
- 长度可变
  - arr[5] = 0;
- 类型可变
  - arr[6] = “ads”;
Array数组的属性：
- length：设置或返回数组中元素的数量
Array数组的方法
- push(obj) ：把对象obj添加到数组
  - obj可以是任何类型的对象
- forEach(Consumer<T&#62)
  - 消费型接口，lambda表达式实现连接箭头用=> 表示
  - eg：forEach(e=>alert(e));
- splice(index, count);
  - index 从哪个元素索引开始删除
  - count 删除几个元素

方法方法	描述
forEach()	遍历数组中的每个有值得元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

2.2 String

常用功能
- var 变量名 = new String(字符串);
  - var arr = new Array(“addas”);
- var 变量名 = “字符串”;
  - var arr = ‘aaa’;
String 字符串的属性：
- length 获取字符串的长度
String 字符串的方法：
- charAt(index)：获取指定索引的字符
- indexOf(ch)：获取字符ch的索引
- trim(str)：去除字符串str两端的空格
- substring(startIndex, endIndex)：截取索引为 [stratIndex, endIndex) 的字符串

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

2.3 JSON

定义语法
- var 对象名 = {属性n:属性值，函数名：function(形参列表){}}
- 属性:属性值 — key:value
举个栗子

var person = {
	name:"张彪",
	age:66,
	//key如果被引号包裹，必须为双引号
	"gender":"female",
	//若value为数组，则值需用 [] 包裹
	addr:["cs", "bj"],
	say:function(){
		alert(this.name + "是大衰哥");
		},
	//定义函数时，其中【:function】
	action(){
		alert(this.name + "在吃💩");
	}
}

获取JSON中的值
- json对象名.key
- json对象名.函数名()
举个栗子

    var jsonObj = {
        "name":"张彪",
        "age":132,
        "gender":"女",
        "class":{
            "className":"白马不一班",
            "number":666
        }
        "action"(){
			alert(this.name + "在吃💩");
		}
    }

    console.log("姓名：" + jsonObj.name + "\t班级：" + jsonObj.class.className); //姓名：张彪	班级：白马不一班
    jsonObj.action();//张彪在吃💩

2.4 BOM

window常用功能
- 定义任务
- 弹窗：可省略window，以下两行同义
  - window.alert(“💩”);
  - alert(“💩”);
confirm(“你真的要吃💩吗？”)弹窗：有返回值
- 用户点击确定返回 true
- 用户点击取消返回 false
setInterval(fn,毫秒值)：周期性的执行某个功能，一直循环执行
- fn:函数，需要周期性执行的功能代码
- 毫秒值：间隔时间
举个栗子：张衰彪再控制台每两秒顿一次坑

var i = 0;
setInterval(function(){
     i++;
     console.log("张衰彪蹲坑第"+i+"次");
},2000);

setTimeout(fn,毫秒值) ：会在一段时间后执行一次功能。
举个栗子：张衰彪两秒后再控制台蹲了一次坑

setTimeout(function(){
	console.log("张衰彪两秒后在控制台蹲了一次坑");
},2000);

注释掉之前的代码，添加代码如下：

location：指代浏览器的地址栏对象
- location.href 用于获取或者设置浏览器的地址信息
举个栗子：两秒后跳转到百度首页

setTimeout(function(){
	location.href = "https://www.baidu.cn";
},2000);

2.5 DOM

获取元素
- document.getElementById(“id”);
- document.getElementsByTagName(“tname”);
- document.getElementsByclassName( “cls”);
- document.getElementsByName( “name” ');

函数	描述
document.getElementById()	根据id属性值获取，返回单个Element对象
document.getElementsByTagName()	根据标签名称获取，返回Element对象数组
document.getElementsByName()	根据name属性值获取，返回Element对象数组
document.getElementsByClassName()	根据class属性值获取，返回Element对象数组

操作元素
- 获取/设置属性
- 举个栗子：把页面的【我是张(′д｀ )…彡…彡彪】改为【我是张衰彪】

<body>
    <div class="cls">
        我是张(′д｀ )…彡…彡彪
    </div>
</body>
<script>
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    div1.innerHTML = "我是张衰彪";
</script>

获取/设置标签体内容

3.JS事件

说明： HTML事件是发生在HTML元素上的 “事情”
事件绑定两种方式
第一种

	<input type="button" id="btn1" value="事件绑定1" onclick="on()">
	<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>

第二种

<input type="button" id="btn2" value="事件绑定2">
	<script>
	document.getElementById("bnt1").onclick=function name(params) {
        alert("按钮2被点击了...");
    }
</script>

常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

练习
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="lightOn()"> 
    <input type="button"  value="熄灭" onclick="lightOff()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkALl()"> 
    <input type="button" value="反选" onclick="reserver()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    let light = document.getElementById("light");
    function lightOn(){
        light.src="img/on.gif";
    }
    function lightOff(){
        light.src="img/off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    let str = document.getElementById("name");
    function lower(){
        str.value = str.value.toLowerCase();
    }
    
    function upper(){
        str.value = str.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    let hobby = document.getElementsByName("hobby");
    function checkALl(){
        hobby.forEach(e => {
            e.checked=true;
        });
    }

    function reserver(){
        hobby.forEach(e => {
            e.checked=false;
        });
    }



</script>
</html>

4.Vue入门

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- 框架：即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
vue的使用

导入 vue.js 文件
编写<script>标签来引入vue.js文件
在js代码区域定义vue对象
- - el: 用来指定哪儿些标签受 Vue 管理
- data: 用来定义数据模型
- methods: 用来定义函数
在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="asd">
        <input type="text" V-MODEL="name">
        <br>
        <textarea name="aaa" cols="30" rows="10" v-model="name"></textarea>
    </div>
    
</body>
<script>
    new Vue({
        el: "#asd",
        data: {
            name: "张无鸡"
        }
    })
</script>
</html>

5.Vue指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="asd">
        <!-- v-bind，为HTML标签绑定属性值，在使用的过程中可以省略不写，一下两个超链接同义 -->
        <a v-bind:href="url" @click="ddd()">去百度</a>=====
        <a :href="url" @click="ddd()">去百度</a>
        <img :src="src" width="10%" height="10%">
        <hr>
        <!-- v-model 在表单元素上创建双向数据绑定-->
        <input type="text" v-model="url">
        <hr>
        <hr>

        <input type="button" v-on:click="on()" value="你点我啊">
        <hr>

        年龄：<input type="text" v-model="age">
        <div v-if="age >= 18 && age < 200">{{age}}岁可以噶腰子</div>
        <div v-else-if="age < 18 && age > 0">{{age}}的你只会吃席</div>
        <div v-else>你tm不是人哇</div>
        <!-- v-show与v-if同义 -->
        <div v-show="age">{{age}}岁</div>
        <hr>

        <!-- 遍历容器的元素或者对象的属性 -->
        <div v-for="item in city">{{item}}</div>
        <hr>
        <div v-for="(item, index) in city">{{index}}-{{item}}</div>
    </div>
    

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#asd",
        data: {
            url: "http://www.baidu.com",
            src: "../../../../day01-HTML-CSS-JavaScript/aa.jpg",
            msg: "去百度",
            age: 18,
            city: ["金星", "木星", "水星", "火星", "土星", "地球"]
        },
        methods: {
            ddd: function () {
                alert("dianwo")
            },
            on: function () {
                alert("有🐕点我了");
            }
        }
    });
</script>
</html>