当前位置：首页 > news >正文

菜鸟之路Day23一一JavaScript 入门

news 来源：原创 2025/5/18 8:27:37

菜鸟之路Day23一一JavaScript 入门

作者：blue

时间：2025.3.10

文章目录

菜鸟之路Day23一一JavaScript 入门
- 0.概述
- 1.JS的引入方式
- 2.JS的基础语法
- - 2.1输出语句
  - 2.2变量
  - 2.3数据类型
  - 2.4运算符
  - 2.5类型转换
- 3.函数
- 4.JS对象
- - 4.1Array对象
  - 4.2String对象
  - 4.3Js自定义对象
  - 4.4JSON对象
  - 4.5BOM对象
  - 4.6DOM对象
  - 4.7JS事件监听
- 5.Vue
- - 5.1Vue引入
  - 5.2Vue指令

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;//报错
    }s
    alert(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);//number

    var b = "10";
    alert(typeof b);//string

    alert(typeof true);//boolean

    alert(typeof null);//object

    alert(typeof c);//undefined
</script>

2.4运算符

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

==会进行类型转换

===不会进行类型转换

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

2.5类型转换

字符串类型转为数字：

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

<script>
    alert(parseInt("12")) //12
    alert(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>
    //方式1
    function add(a,b){
        return a+b;
    }

    //方式2
    var sub = function(a,b){
        return a-b;
    }

    alert(add(1,2));//3

    alert(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>