Javaweb中JS相关知识_javaweb js如何运行-CSDN博客

本文链接：https://blog.csdn.net/weixin_56633661/article/details/130135199

JavaScript

1.什么是JavaScript：

JavaScript（简称JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似
JavaScript在1995年由Brendan Eich发明，并于1997年称为ECMA标准
ECMAScript6（ES6）是最新的JavaScript版本（发布于2015年）

JS的引入方式

1.内部脚本：将JS代码定义在HTML页面中。注意点：

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

<script>
    alert("Hello JavaScript")
</script>

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

外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合

demo.js：alert("Hello JavaScript")

引入方式：<script src="js/demo.js"></script>

不能自闭合：<script src="js/demo.js"/> 无效

JS基础语法

1.书写语法：

区分大小写：与Java一样，变量名、函数名以及其它一切东西都是区分大小写的
每行结尾的分号可有可无（建议写上）
注释：与Java一样，单行注释 //注释内容；多行注释 /* 注释内容 */
大括号表示代码块

2.输出语句：

使用window.alert()写入警告框（window可省略）
使用document.write()写入HTML页面输出
使用console.log()写入浏览器控制台

    <script>
        window.alert("hello js");
        document.write("hello js");
        console.log("hello js");
    </script>

3.变量：

JavaScript中可用var、let、const关键字（variable的缩写）来声明变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
使用var定义的变量作用域比较大，是全局变量，且可以重复定义
let定义的关键字只在所在的代码块内有效，且不允许重复声明
const用来声明一个只读的常量，一旦声明，常量的值就不能改变
变量名需要遵循如下规则：

组成字符可以食任何字母、数字、下划线(_)或美元符号($)；

数字不能开头；

建议使用驼峰命名。

4.数据类型：JavaScript中分为原始类型（基本数据类型）和引用类型：

虽然JavaScript是弱类型语言，但是一样有数据类型。

原始类型：

number：数字(整数、小数、NaN(Not a Number))

string：字符串，小写s，单双引号皆可

boolean：布尔。true，false

null：对象为空

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

使用typeof运算符可以获取数据类型，用法：typeof a

5.运算符：

基本上与Java一致，只有===不一样，==会进行类型转换，===不会进行类型转换

6.类型转换：

字符串类型转为数字：使用parseInt(number)将字符串字面值转为数字。如果字面值不是数字，则转为NaN。比如"12"可以转为12，"12A12"可转为12，"A12"转为NaN
其他类型转为boolean：Number 0 和 NaN 为false，其它均转为true；String：空字符串为false，其它均转为true；Null 和 undefined ：均转为false

JS的函数

1.函数（方法）是被设计为执行特定任务的代码块，相当于Java中的方法。

2.定义：

JavaScript函数通过function关键字进行定义，有两种定义方法：

方法一：

function functionName(参数1.参数2...){

// 要执行的代码

}

方法二：

var functionName = function(参数1，参数2..){

//要执行的代码

}

注意点：

1）形参不需要类型，因为JavaScript是弱类型语言

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

调用：函数名称（实际参数列表）

3）在调用函数时（通过函数名调用）可以传任意个参数，但是只会接收对应形参的个数

JS对象

1.Array：

JavaScript中Array对象用于定义数组。

定义：

方法一：var 变量名 = new Array(元素列表); 例：var arr = new Array(1,2,3,4);

方法二：var 变量名 = [元素列表]; 例：var arr = [1,2,3,4];

访问：

arr[索引] = 值; 例：arr[10] = "hello";

特点：长度可变，类型可变(可以直接越过数组长度赋值，比如说上面的arr长度为4，但是可以 arr[6] = "abc";这个arr[6]是合法的，正常使用，但是arr[4]和arr[5]仍是undefined)；

属性：

属性	说明
length	设置或返回数组中元素的数量

方法：

方法	说明
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数（传入的参数为一个函数，该函数可以不起名字）
push()	将新元素添加到数组的末尾(可添加多个)，并返回新的长度
splice()	从数组中删除元素（第一个参数为开始索引，第二个参数为删除个数）

    // forEach遍历    
    <script>
        var arr = [1,2,3,4];
        arr.forEach(function(e){
            console.log(e);
        })
    </script>
    // 或者省略掉function也可以，使用箭头函数(...) => {...}
     <script>
        var arr = [1,2,3,4];
        arr.forEach((e) => {
            console.log(e);
        })
    </script>   
    // 输出1 2 3 4

2.String：

几个方法跟Java中使用一致

3.JSON：

先介绍一下JavaScript中自定义对象：

定义格式：

var 对象名 = {

属性名1：属性值1，

属性名2：属性值2，

属性名3：属性值3，

函数名称：function(形参列表){}

}

函数可以简化为：函数名称(形参列表){}

调用格式：

对象名.属性名;

对象名.函数名();

JSON介绍：

概念：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript对象标记法书写的文本。由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

JSON的定义：得先用单引号引起来，其它基本和对象一致，只是将JavaScript中的对象中的属性名全都用双引号引起来了。比如：

JS对象：

var student = {

name:"Tom",

age:20

};

JSON(不能换行):

var jsonstr = '{"name":"Tom","age":20}';

但是对于属性值其实也不是没有要求，要求如下：

JSON对象不能像JS自定义对象那样调用属性值，需要先把JSON转为JS对象，同时JS对象也可以转为JSON字符串，使用的是JSON对象的方法：

方法名	说明
JSON.parse(JSON字符串)	将JSON字符串转化为JS对象，返回一个JS对象
JSON.stringify(JS对象)	将JS对象转为JSON字符串，返回一个JSON字符串

    <script>
        var object = {
            name:"Tom",
            age:20
        };
        var jsonstr = '{ "name":"Tom", "age":20}';
        console.log(jsonstr.name);// 控制台输出undefined
        console.log(JSON.parse(jsonstr).name);// 控制台输出Tom
        console.log(JSON.stringify(object));// 控制台输出{"name":"Tom","age":20}
    </script>

4.BOM（Browser Object Model）：

浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象
组成：Window，浏览器窗口对象；Navigator：浏览器对象；Screen：屏幕对象；History：历史记录对象；Location：地址栏对象

作为Java程序员，先主要了解Window和Location对象。

Window（浏览器窗口对象）：

获取：直接使用window，其中window.可省略。比如window.alert()可以写成alert.()

属性：

1）history：获取History对象，对History对象的只读使用，具体参阅History对象；

2）location：获取Location对象，用于窗口或框架的Location对象，具体参阅Location对象；

3）navigator：获取Navigator对象，对Navigator对象的只读引用，具体参阅Navigator对象。

方法：

1）alert()：显示带有一段消息和一个确认按钮的警告框，传入对话框中显示的字符串；

2）confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框，传入对话框中显示的字符串，返回用户的选择，确认是true，取消是false；

3）setlnterval：按照指定的周期（以毫秒算）来调用函数或计算表达式，需要传入一个函数以及间隔的周期，在每个间隔周期执行一次该函数；

4）setTimeout()：在指定的毫秒数后调用函数或计算表达式，需要传入一个函数以及延迟时间，在延迟时间后执行一次该函数。

Location（地址栏对象）：

获取：使用window.location获取，其中window.可以省略。

比如：window.location.属性; location.属性;

属性：href：设置或返回完整的URL，如果是设置了URL，则会跳转到对应的网页中。

5.DOM（Document Object Model 文档对象模型）：

DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分
第一部分：Core DOM - 所有文档类型的标准模型
第二部分：XML DOM -XML文档的标准模型
第三部分：HTML DOM - HTML文档的标准模型
将标记语言的各个部分封装为对应的对象，所有文档类型的标准模型：Document，整个文档对象；Element，元素对象；Attribute，属性对象；Text：文本对象；Comment，注释对象

JavaScript通过DOM，就能对HTML进行操作：

1）改变HTML元素的内容；

2）改变HTML元素的样式（CSS）；

3）对HTML DOM事件作出反应；

4）添加和删除HTML元素。

获取元素对象Element：

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

对象获取的。

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

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

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

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

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

3）根据name属性值获取，返回Element数组：

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

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

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

获取到对应的元素对象之后，每一个元素对象都有很多的方法和属性，可以参考官方文档去改变该元素对象的文本内容或者其它的属性等。

    <img src="img/off.gif" id="image"><br><br>
    <div>船只教育</div><br>
    <div>黑马程序员</div><br>
    <label><input type="checkbox" name="hobby">电影</label>
    <label><input type="checkbox" name="hobby">旅游</label>
    <label><input type="checkbox" name="hobby">游戏</label>

    <script>
        // 通过Id获取元素，要注意这里的d是小写的
        var image = document.getElementById('image');
        // 设置属性值，或者可以通过image.src = "img/on.gif";
        image.setAttribute("src","img/on.gif");
        // 通过标签名来获取元素，获取到的是一个数组
        var divs = document.getElementsByTagName('div');
        for (let index = 0; index < divs.length; index++) {
            const element = divs[index];
            // 通过div的innerHTML属性增加文本内容
            element.innerHTML += "<font color='red'> very good</font>";
        }
        // 通过name属性获取元素，获取到的是一个数组
        var labels = document.getElementsByName('hobby');
        for (let index = 0; index < labels.length; index++) {
            const element = labels[index];
            // 通过input对象的checked属性来改变是否选中
            element.checked = true;
        }
    </script>

事件监听

1.事件：HTML事件是发生在HTML元素上的“事情”。比如：

按钮被点击
鼠标移动到元素上
按下键盘按键

2.事件监听：JavaScript可以在事件被侦测到时执行代码。

3.事件绑定：

方式一：通过HTML标签中的时间属性进行绑定，当按钮被点击时调用JS中同名函数

<input type="button" οnclick="on()" value="按钮1">

<script>

function on(){

alert('我被点击了');

        }

</script>

方式二：通过DOM元素属性绑定，当按钮被点击时调用JS中同名函数

<input type="button" id="btn" value="按钮2">

<script>

document.getElementById('btn').οnclick=function(){

                alert('我被点击了');

        }

</script>

常见事件

Vue

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

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

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

4.使用Vue的几个步骤：

新建HTML页面，引入Vue.js文件
在JS代码区域，创建Vue核心对象，定义数据模型
编写示图

    <!-- 1.引入vue.js -->
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 3.编写视图 -->
    <div id="app">
        <!-- v-model是引用data中的message内容的指令 -->
        <input type="text" v-model="message">
        <!-- 插值表达式，格式：{{表达式}}，内容可以是变量、三元运算符、函数调用、算术运算 -->
        {{message}}
    </div>
</body>
<script>
    // 2.创建Vue核心对象
    new Vue({
        // Vue管理区域
        el:"#app",
        // 数据管理区域，注意不要写成了data方法
        data:{
            message:"Hello Vue"
        }
    })
</script>

Vue常用指令

1.指令：HTML标签上带有v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...

2.常用指令：

通过v-bind或者v-model绑定的变量，必须在数据模型中声明
v-for只需要在需要循环写出的同一个标签中写即可，比如说表格标签中有四行，直接在第一个<tr>标签中写v-for即可

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind -->
        <a v-bind:href="url">链接1</a>
        <!-- 可省略v-bind -->
        <a :href="url">链接2</a>
        <!-- v-model -->
        <input type="text" name="text" v-model="url">
        <!-- v-on -->
        <input type="button" value="点击" v-on:click="handle()">
        <!-- 可省略v-on:，直接用@代替 -->
        <!-- 可绑定其它事件，把click换掉 -->
        <input type="button" value="你再点" @click="handle()">
        <br><br>
        <!-- v-if、v-else-if、v-else -->
        <span v-if="age <=  35">年轻人</span>
        <span v-else-if="age > 35 && age < 60">中年人</span>
        <span v-else>老年人</span>
        <!-- v-show -->
        <span v-show="age <= 35">年轻人</span>
        <input type="text" name="age" v-model="age">
        <!-- v-for -->
        <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:{
            url:"https://www.baidu.com",
            age:20,
            addrs:['上海','北京','广州','深圳','成都','杭州']
        },
        methods: {
            handle:function(){
                alert("你点了我一下...");
            }
        }
    })
</script>