Java Web开发（Day2）

icharacteristic

已于 2023-04-25 01:02:31 修改

阅读量93

点赞数

分类专栏： JavaWeb 文章标签：前端 javascript vue.js 学习

于 2023-04-25 01:00:12 首次发布

本文链接：https://blog.csdn.net/icharacteristic/article/details/130352171

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

系列文章：

前言

昨天由于忙于学业作业，暂停学习一天，今天继续学习完了该课程的Day2。

一、JavaScript

什么是JavaScript？

在上一篇Java Web开发（Day1）中我们提到过Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。其中的三个组成部分之一的JavaScript是负责网页的行为（交互效果）。

JavaScript（简称：JS）是一种用于网页开发的高级编程语言，是一门跨平台、面向对象的脚本语言。它是一种动态语言，运行时会解释执行，而不是编译执行。 JavaScript与HTML和CSS结合使用，可以实现网页的交互性和动态性。

很多不了解的人会把Java和JavaScript当成是类似的或者是子类语言，但其实JavaScript 和 Java 是完全不同的语言，不论是概念上还是设计上。但是他们的基础语法有类似的地方。

JavaScript最初由Netscape公司的Brendan Eich开发，最早用于Netscape Navigator浏览器。之后，Microsoft开发了JScript，这是它自己的JavaScript实现。ECMAScript（JavaScript的标准规范）随后也得到了发展。现在，JavaScript已成为 web 开发中广泛使用的一种语言，并且也用于其他领域，如桌面应用程序、游戏等等。

JavaScript被广泛用于网页开发中，通过各种库（如jQuery和React）和框架（如Vue.js和AngularJS）的支持，使其成为创建现代 Web 应用程序的主要工具之一。JavaScript也可以在后端执行，如Node.js平台，可以实现服务器端的编程。

1、引入方式

内部脚本：将JS代码定义在html页面的<script></script>中

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

建议：将<script></script>放在<body>的底部

外部脚本：将JS代码定义在js文件中，通过<script></script>标签引入

  <script src="js/demo.js"></script>

注意：通过<script>标签引入外部js文件时，标签不可以自闭合

2、基础语法

很多都是与Java语言类似

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

//判断
if(count == 3){
    alert(count);
}

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 console.log() 写入浏览器控制台

<script>
    window.alert("Hello JavaScript"); //浏览器弹出警告框
    document.write("Hello JavaScript"); //写入HTML,在浏览器展示
   console.log("Hello JavaScript"); //写入浏览器控制台
</script>

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

// var定义变量
// 特点一： 作用域比较大。全局变量
// 特点二： 可以重复定义
var a = 10;
a = "张三"

变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

var：声明变量，全局作用域/函数作用域，允许重复声明

let：声明变量，块级作用域，不允许重复声明

const：声明常量，块级作用域，一旦声明，常量的值不能改变

数据类型中分为：原始类型 和引用类型。使用 typeof 运算符可以获取数据类型：

var a = 20;
alert(typeof  a);

原始数据类型：

number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

有个特殊一点的运算符：===。== 会进行类型转换，=== 不会进行类型转换

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

类型转换：

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

其他类型转为boolean：

Number：0 和 NaN为false，其他均转为true。
String：空字符串为false，其他均转为true。
Null 和 undefined ：均转为false。

3、函数

JavaScript 函数通过 function 关键字进行定义，语法为：lJavaScript 函数通过 function 关键字进行定义，语法为：

function functionName(参数1,参数2..){
    //要执行的代码
}

注意：

形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称(实际参数列表)

function add(a , b){
    return a + b;
}
var result = add(10,20);
alert(result)

JS中，函数调用可以传递任意个数的参数。

4、对象

Array

Array对象用于定义数组：

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

访问定义：

arr[ 索引 ] = 值;

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

属性：length：设置或返回数组中元素的数量。

方法：

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

  //forEach:遍历数组中有值的元素
  arr.forEach(function (e){
  console.log(e);
  })

  //ES6 箭头函数: (...) => {...}
  arr.forEach((e) => {
    console.log(e);
  })

String

String字符串对象：

var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二

属性：length：字符串的长度。

方法：

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

JSON

JavaScript Object Notation，JavaScript对象标记法。JSON 是通过 JavaScript 对象标记法书写的文本。

{
    "name":"Tom",
    "age":20,
    "gender":"male"
}

定义方式：

var 变量名 = '{"key1": value1, "key2": value2}';
var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}';

JSON字符串转为JS对象：

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM

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

组成：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

在这里学习的时候主要学的还是Window和Location。

Window：浏览器窗口对象。获取方式是直接使用window，其中 window. 可以省略。

  window.alert("Hello BOM");
  alert("Hello BOM Window");

属性

history：对 History 对象的只读引用。请参阅 History 对象。
location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。

方法

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。

  //方法
  //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);

Location：地址栏对象。使用 window.location 获取，其中 window. 可以省略。

属性：href：设置或返回完整的URL。

  //location:地址栏信息
  alert(location.href);
  location.href = "https://www.itcast.cn";

DOM

Document Object Model ，文档对象模型。

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

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

DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。Document对象中提供了以下获取Element元素对象的函数：

    //1.1 获取元素-根据ID获取
     var img = document.getElementById('h1');
     alert(img);

    //1.2 获取元素-根据标签获取 - div
     var divs = document.getElementsByTagName('div');
     for (let i = 0; i < divs.length; i++) {
         alert(divs[i]);
     }

    //1.3 获取元素-根据name属性获取
     var ins = document.getElementsByName('hobby');
     for (let i = 0; i < ins.length; i++) {
         alert(ins[i]);
     }

    //1.4 获取元素-根据class属性获取
     var divs = document.getElementsByClassName('cls');
     for (let i = 0; i < divs.length; i++) {
         alert(divs[i]);
     }

5、事件监听

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

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

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

事件绑定

方式：

// 方式一：通过 HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){
        alert('我被点击了!');
    }
</script>
// 方式二：通过 DOM 元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

常见事件：

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

二、Vue

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

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

官网： Vue.js

新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型：

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

编写视图：

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

1、常用命令

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

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

v-bind & v-model：

<div id="app">
    <a v-bind:href="url">传智教育</a>
    <a :href="url">传智教育</a>
    <input type="text" v-model="url">
</div>

<script>
  new Vue({
     el: "#app",
     data: {
        url: "https://www.baidu.com"
     }
  })
</script>

v-on：

<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

<script>
    new Vue({
        el: "#app",
        data: {
	//...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>

v-if & v-show：

    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>

两种渲染出来的结果是相同的，但是运行内核会有所差异，v-if是条件性的渲染某元素，判定为true时渲染,否则不渲染；而v-show是切换的是display属性的值。

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

<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

data: {
   . . .
   addrs: ['北京','上海','广州','深圳','成都','杭州']
},

2、生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态	周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

主要掌握的是mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>