菜鸟之路Day23一一JavaScript 入门

菜鸟之路Day23一一JavaScript 入门

作者：blue

时间：2025.3.10

0.概述

内容学习至黑马程序员BV1m84y1w7Tb

1.JS的引入方式

内部脚本：将JS代码定义在HTML页面中

1.JS的代码必须位于script标签之间

2.在html文档中，可以在任意地方，放置任意数量的script标签

3.一般会把脚本置于body元素的底部，可以改善显示速度

<script>alert('Hello JS');
</script>

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

1.外部的JS文件中，只包含JS代码，不包含script标签

2.script标签不能自闭合

2.JS的基础语法

2.1输出语句

<script>window.alert("Hello World"); //浏览器弹出警告框document.write("Hello World"); //写出HTML，在浏览器中显示console.log("Hello World"); //在控制台输出
</script>

2.2变量

var

JavaScript中用var关键字，来声明变量。

JavaScirpt是一门弱类型的语言，变量可以存放不同类型的值

特点1：作用域比较大，相当于一个全局变量

特点2：同名变量，可以被重复定义

<script>//代码块{var a = 10;a = "zhangsan";var a = "zhangsan";//可以被重复定义}alert(a);//作用域大
</script>

let

let关键字来定义变量，只在let关键字所在的代码块中有效，且不允许重复声明

<script>//代码块{let a = 10;//let a = 20;//报错}salert(a);//作用域,只在本代码块中有用
</script>

const

用来声明一个只读的常量，一旦声明，常量的值就不能改变

<script>const pi = 3.14;//pi = 3.15; //报错
</script>

2.3数据类型

JavaScript中分为原始类型和引用类型

原始类型：number：数字（整数，小数，NaN（Not a Number））

​ string：字符串，单双引号都可以

​ boolean：布尔

​ null：对象为空

​ undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

<script>var a = 10;alert(typeof a);//numbervar b = "10";alert(typeof b);//stringalert(typeof true);//booleanalert(typeof null);//objectalert(typeof c);//undefined
</script>

2.4运算符

总体来说运算符是和java一样的，不过有一个特殊的运算符 "==="全等运算符

==会进行类型转换

===不会进行类型转换

<script>var a = 10;alert(a=="10"); //truealert(a==="10"); //falsealert(a===10);//true
</script>

2.5类型转换

字符串类型转为数字：

​ 将字符串字面值转为数字。如果字面值不是数字，则转为NaN

<script>alert(parseInt("12")) //12alert(parseInt("12A34")) //12,截至到第一个字面值非数字alert(parseInt("A12")) //NaN
</script>

其他类型转为boolean：

​ Number：0和NaN为false，其他转为true

​ String：空字符串为false，其他转为true

​ Null 和 undefined：均转为false

3.函数

JS中的函数定义(共有两种方式)

//定义方式1
function functionName(参数1，参数2){//要执行的代码
}//定义方式2
var functionName = function(参数1，参数2){//要执行的代码
}

注意：形式参数不需要类型。因为JavaScript是弱类型语言

​ 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

<script>//方式1function add(a,b){return a+b;}//方式2var sub = function(a,b){return a-b;}alert(add(1,2));//3alert(sub(1,2));//-1
</script>

4.JS对象

4.1Array对象

JavaScript中Array对象用于定义数组

定义：

var 变量名 = new Array(元素列表); //方式一var 变量名 = [元素列表];	//方式二

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

Array对象相关属性或方法

属性：

​ length:设置或返回数组中元素的数量

方法：

​ forEach() 遍历数组中每一个有值的元素

​ push() 将新元素添加到数组末尾，并返回新的长度

​ splice() 从数组中删除元素

    <script>var arr = new Array(1,2,3,4);console.log(arr);arr[10] = "你好";//for循环直接遍历整个数组for (var i = 0; i < arr.length; i++) {//其中没有值的位置是undefined类型console.log(arr[i]);}console.log("=======================");//forEach()遍历数组中有值的位置arr.forEach(function(e){console.log(e);});console.log("=======================");//利用箭头函数来简化这个过程，类似于lambda表达式arr.forEach(e => {console.log(e)});console.log("=======================");arr.push("我不好");console.log(arr[arr.length-1]);console.log("=======================");arr.splice(0,1);//参数一：从那个索引开始删除//参数二：删除几个</script>

4.2String对象

<script>var str = new string("   hello world  ");console.log(str.length);//长度属性console.log(str.charAt(0));//返回在指定位置的字符console.log(str.indexOf("l"));//查找字符串第一次出现的位置var s = str.trim();console.log(s);//删除字符串两边空格console.log(str.substring(1,3));//提取指定两个索引之间的字串，包头不包尾</script>

4.3Js自定义对象

<script>var stu = {name:"张三",age:18,sex:"男",eat:function(){alert("吃东西");}};//调用格式alert(stu.name);stu.eat();
</script>

4.4JSON对象

JSON是通过JavaScript对象标记法书写的文本

由于其语法简单，层次结构鲜明，现多用于做数据载体，在网络中进行数据传输

//定义,注意在此处键一定要用双引号括起来
var 变量名 = '{"key1":value1,"key2":value2}'

value 的数据类型为:

数字(整数或浮点数)

字符串(在双引号中)

逻辑值(true 或 false)

数组(在方括号中)

对象(在花括号中)null

两个常用的方法

//JSON字符串转为JS对象
var jsObj  = JSON.parse(uerStr);//JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObj);

示例一：

<script>var jsonStr = '{"name":"张三","age":18,"sex":"男"}';var stu = JSON.parse(jsonStr);alert(stu.name);
</script>

示例二：

<script>var stu = {name:"张三",age:18,sex:"男",eat:function(){alert("吃东西");}};var jsonStr = JSON.stringify(stu);alert(jsonStr);
</script>

4.5BOM对象

BOM对象：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

Window:浏览器窗口对象

Navigator:浏览器对象

Screen:屏幕对象

History:历史记录对象

Location:地址栏对象

主要了解其中两个（粗体）对象

1.Window对象

<script>//alert():显示带有一段消息和一个确认按钮的警告框。window.alert("hello world");
</script>

<script>//显示带有一段消息以及确认按钮和取消按钮的对话框var flag = window.confirm("是否确定删除？");alert(flag);
</script>

<script>//setlnterval():按照指定的周期(以毫秒计)来调用函数或计算表达式，var i = 0;window.setInterval(function(){i++;console.log("函数运行了"+i+"次");},2000);
</script>

<script>//setTimeout():在指定的毫秒数后调用函数或计算表达式，window.setTimeout(function(){alert("hello world");},3000);
</script>

2.Location:地址栏对象

<script>alert(location.href);location.href = "https://www.baidu.com/?a=1";//令浏览器，跳转到百度
</script>

4.6DOM对象

概念:Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象:

​ Document:整个文档对象
​ Element:元素对象
​ Attribute:属性对象
​ Text:文本对象
​ Comment:注释对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document对象中提供了以下获取Element元素对象的函数:

1.根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName("hobby');

4.根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

DOM对象的方法，我们可以通过查阅文档来使用JavaScript HTML DOM 文档 (w3school.com.cn)

4.7JS事件监听

事件监听:JavaScript可以在事件被侦测到时执行代码

两种事件绑定的方式：

方式一：通过 HTML标签中的事件属性进行绑定

方式二：通过 DOM 元素属性绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS_demo06</title>
</head>
<body><input type="button" onclick="on()" value="按钮1"><input type="button" id="btn" value="按钮2">
</body>
<script>function on(){//方式一：alert("按钮1被点击了");//方式二：document.getElementById("btn").onclick = function(){alert("按钮2被点击了");}}
</script>
</html>

常见事件

事件	描述
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

5.Vue

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

官网:https://v2.cn.vuejs.org/

5.1Vue引入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_demo01</title><!-- 使用 CDN 引入 Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><!-- 编写视图 --><div id="app"><input type="text" v-model="msg">{{msg}}</div>
</body>
<script>new Vue({el: "#app",data: {msg: "Hello Vue!"}})
</script></html>

5.2Vue指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href，css样式等,v-bind可以直接省略为：
v-model	在表当元素上创建双向数据绑定

注意事项：通过v-bind或者v-model绑定的变量，必须在数据模型中声明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_demo02</title><script src="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>new Vue({el:"#app",//绑定vue实例data:{url:"https://www.baidu.com"}})
</script>
</html>

指令	作用
v-on	为HTML标签绑定事件，可以简写成@

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_demo02</title><script src="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"><input type="button" value="按钮1" v-on:click="handle()"><input type="button" value="按钮2" @click="handle()"></div>
</body>
<script>new Vue({el:"#app",//绑定vue实例data:{url:"https://www.baidu.com"},methods:{handle(){alert("按钮被点击了");}}})
</script>
</html>

指令	作用
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	同上
v-else	同上
v-show	根据条件展示某元素，区别在于切换的是display属性的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_demo03</title><script src="JS/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判断为<span v-if = "age<=35">年轻人</span><span v-else-if = "age>35&&age<60">中年人</span><span v-else>老年人</span><br></br>年龄<input type="text" v-model="age">经判断为<span v-show = "age<=35">年轻人</span><span v-show = "age>35&&age<60">中年人</span><span v-show = "age>60">老年人</span></div>
</body>
<script>new Vue({el:"#app",data:{age:18}})
</script>
</html>

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_demo04</title><script src="JS/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></div>
</body>
<script>new Vue({el:"#app",data:{addrs:["北京","上海","广州","深圳"]}})
</script>
</html>

age:18
}
})

```

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue_demo04</title><script src="JS/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></div>
</body>
<script>new Vue({el:"#app",data:{addrs:["北京","上海","广州","深圳"]}})
</script>
</html>