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

JavaWeb笔记2-JavaScriptVueAjax

1. JavaScript

1.1 基础介绍

  • JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言,是用来控制网页行为,实现页面的交互效果。JavaScript和Java是完全不同的语言,但基本语法类似
  • 组成
    • ECMAScript: 规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。

    • BOM:浏览器对象模型,用于操作浏览器本身,如:页面弹窗、地址栏操作、关闭窗口等。

    • DOM:文档对象模型,用于操作HTML文档,如:改变标签内的内容、改变标签内字体样式等。

1.2 引入方式

  • JS有两种引入方式,分为内部脚本和外部脚本

    • 内部脚本:将JS代码定义在HTML页面中
      • JavaScript代码必须位于<script></script>标签之间
      • 在HTML文档中,可以在任意地方,放置任意数量的<script></script>
      • 一般会把脚本置于<body>元素的底部,可改善显示速度
        • HTML页面是从上往下解析的,如果JS代码过多,影响页面显示速度
        • JS代码中,可以操作HTML标签,如果标签还没渲染出来[在JS代码下面,没加载出来],就可能会报错
    • 外部脚本:将JS代码定义在外部 JS文件中,然后引入到 HTML页面中
      • 外部JS文件中,只包含JS代码,不包含<script>标签
      •  引入外部js的<script>标签,必须是双标签
          

内部脚本引入

<script>

js代码;

</script>

<body><script>//1.内部脚本alert('Hello,World');</script>
</body>

外部脚本引入

<script src="外部文件路径"></script>

HTML代码
<body><script src="hello.js"></script>
</body>
js代码
alert('外部引入');

  • 细节: 
    • demo.js中只有js代码,没有<script>标签
  • JS书写规范
    • 结束符:每行js代码,结尾以分号结尾,而结尾的分号可有可无。(建议在一个项目中保持一致,要么全部都加,要么全部都不加)
    • 注释:单行注释,多行注解的写法, 与java中一致。

1.3 JS基础语法 

  • 1.31 变量&常量
  • JS中主要通过 let 关键字来声明变量的。( 弱类型语言,变量是可以存放不同类型的值的。)

  • 变量名需要遵循如下规则:
    • 组成字符可以是任何字母、数字、下划线(_)或美元符号($),且数字不能开头[与java相同]
    • 变量名严格区分大小写,name和Name是不同的变量
    • 不能使用关键字作为变量名,如:let、var、if、for等
  • JS中用 const 关键字声明常量
    • 在早期js中,声明变量还能用var,但不严谨(不推荐)
      • var声明的变量可以重复声明
      • var声明的作用域为全局作用域
  • 一旦声明,常量的值就不能改变(不能重新赋值)
<body><script>let a=10;a="hello";b=true;alert(a);alert(n);</script>
</body>

  • 拓展[输出方式]:
    • alert()                弹出警告框
    • console.log()      输出到控制台
    • document.write() 输出到body区域,在页面中显示(不常用)
1.32 数据类型
  • JavaScript的数据类型分为:基本数据类型和引用数据类型(对象)
  • 基本数据类型
number数字(整数、小数、NaN(not a Number))
boolean

布尔。true,false

null对象为空,JavaScript是大小写敏感的,因此null、Null、NULL是完全不同的
undefined声明的变量未初始化时,该变量的默认值是undefined
string字符串、单引号、双引号、反引号皆可,推荐单引号

数据类型可以用 typeof 去检测 

示例

<body><script>console.log(typeof 1)console.log(typeof 1.3)console.log(typeof true)console.log(typeof null)console.log(typeof 'asd')console.log(typeof "asd")console.log(typeof `asd`)</script></body>

演示

模板字符串语法[字符串反引号的应用场景]

  • 模板字符串的使用场景:拼接字符串和变量。

  • 模板字符串的语法:

    • `...` :反引号 (英文输入模式下键盘 tab 键上方波浪线 ~ 那个键)

    • 内容拼接时,使用 ${ } 来引用变量

    <script>let name ='张三';let age = 18;let info = `大家好,我是新入职的${name},今年${age}岁`;let info1 = `大家好,我是新入职的`+name+`,今年`+age+`岁`;console.log(info);console.log(info1);</script>

1.33 函数 
  • 介绍
    • 函数(function)是被设计用来执行特定任务的代码块,方便程序的封装复用。
  • 定义
    • JavaScript中的函数通过function关键字进行定义,语法为:
function functionName(参数1,参数2....){执行代码
}let result = add(10,20);
alert(result);
  • 调用 :函数名称(实际参数列表)

注:JS为弱类型语言,形参、返回值都不需要指定类型,在调用函数时,实参个数和形参个数可以不一致,但建议一致 

<body><script>function add(a,b){return a+b;}alert(add(20,10));</script>
</body>

1.34 匿名函数
  • 匿名函数是一种没有名称的函数,可以通过两种方式定义:函数表达式和箭头函数。

函数表达式
let add=function(a,b){retutn a+b;
}箭头函数
let add =add(a,b) =>{return a+b;
}
  •  匿名函数定义后,可以通过变量名直接调用

let result = add(10,20);

alert(result);

    <script>let add=function(a,b){return a+b;}let del=(a,b)=>{return a-b;}console.log(add(1,2));console.log(del(1,2));</script>

 1.35 自定义对象
  • 定义格式

let 对象名 ={

        属性名1:属性值1,

        属性名2:属性值2,

        属性名3:属性值3,

        方法名:function(形参列表){ }

}

    <script>let user={name:'zhangsan',age:18,gender:'男',toString(){return `姓名:${this.name},年龄:${this.age},性别:${this.gender}`}}console.log(user.toString())</script>

细节 :如果使用箭头函数,this不指向当前对象,指向当前对象的父级【不推荐】

1.36 json
  • 概念:
    • JavaScript Object Notation,JavaScript对象标记法(JS对象标记法书写的文本)
    • 由于语法简单,层次结构鲜明,多用于作为数据载体,在网络中进行数据传输。
  • 方法
    • JSON.parse() :将json文本转换成JS对象
    • JSON.stringify():将JS对象转换成json文本
    <script>let user={name:'zhangsan',age:18,gender:'男',toString:function(){return `姓名:${this.name},年龄:${this.age},性别:${this.gender}`}}console.log(JSON.stringify(user));let personJson='{"name":"zhangsan","age":18,"gender":"男"}'console.log(JSON.parse(personJson));</script>

 

细节:json格式的文本所有的key必须使用双引号引起来 

1.4 DOM

  • 1.41 概念
  • DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
    • Document:整个文档对象

    • Element:元素对象   [如<html><head>,<body>等]

    • Attribute:属性对象   [如<href>等]

    • Text:文本对象   [如<h1>文本</h1>中的文本]

    • Comment:注释对象   [就是注释]

  • 1.42 操作
    • DOM操作核心思想:
      • 将网页中所有的元素当作对象来处理(标签的所有属性在该对象上都可以找到)
    • 操作步骤:
      • 获取要操作的DOM元素对象
      • 操作DOM对象的属性或方法(查文档或AI)
    • 获取DOM对象
      • 根据CSS选择器来获取DOM元素,获得匹配到的第一个元素:document.querySelector('选择器')
      • 根据CSS选择器来获取DOM元素,获得匹配到的所有元素:document.querySelectorAll('选择器')
        • 注:得到的是一个NodeList节点集合,是一个伪数组(有长度、有索引的数组)
      • 其他方式(了解,已经用的很少了)
        • document.getElementById('id')
        • document.getElementsByTagName('div')
        • document.getElementsByClassName('cls')
<body><h1 id="title">111</h1><h1 id="title1">222</h1><h1 id="title1">333</h1><script>//1.获取DOM对象let h1=document.querySelector('#title');let h2=document.querySelectorAll('#title1');//2.调用DOM对象中的属性或方法h1.innerHTML='修改文本';h2[1].innerHTML='修改文本2';</script>
</body>

1.5 事件监听 

  • 1.51 概念
    • 事件:HTML事件是发生在HTML元素上的"事情"。比如:
      • 按钮被点击
      • 鼠标移动到元素上
      • 按下键盘按键
    • 事件监听:JavaScript可以在事件触发时,立即调用一个函数做出相应,也成为事件绑定注册事件
  • 1.52 事件监听
    • 语法: 事件源.addEventListener('事件类型’,事件触发执行的函数);
    • 事件监听三要素
      • 事件源:哪个dom元素触发了条件,要获取dom元素
      • 事件类型:用什么方式触发,比如:鼠标单击 click
      • 事件触发执行的函数:要做什么事
<body><input type="button" id="btn1" value="按钮1"><input type="button" id="btn2" value="按钮2"><script>var btn1 =document.querySelector("#btn1").addEventListener("click",function(){console.log("第一个按钮点击成功")});</script>
</body>

早期版本写法(了解):

  • 事件源.on事件 = function() {...} 
  • 缺点:on方式会被覆盖,addEventListener方式可以绑定多次,拥有更多特性,推荐使用
1.53 常见事件
  • 鼠标事件
    • click:鼠标点击
    • mouseenter:鼠标移入
    • mouseleave:鼠标移出
  • 键盘事件
    • keydown:键盘按下触发
    • keyup:键盘抬起触发
  • 焦点事件
    • focus:获得焦点触发
    • blur:失去焦点触发
  • 表单事件
    • input:用户输入时触发
    • submit:表单提交时触发

2. Vue

2.1 概述

  • Vue,是一款用于构建用户界面渐进式的JavaScript框架(官方网站:https://cn.vuejs.org)。

  • 构建用户界面
    • 构建用户界面是指,在Vue中,可以基于数据渲染出用户看到的界面。
  • 渐进式
    • 渐进式中的渐进呢,字面意思就是 "循序渐进"。Vue生态中的语法呢是非常多的,比如声明式渲染、组件系统、客户端路由(VueRouter)、状态管理(Vuex、Pinia)、构建工具(Webpack、Vite)等等。
  • 框架
    • 就是一套完整的项目解决方案,用于快速构建项目。
    • 优点:大大提升前端项目的开发效率
    • 缺点:需要理解记忆框架的使用规则。

2.2 准备工作

  • 准备
    • 引入Vue模块(官方提供)
    • 创建Vue程序的应用实例,控制视图的元素
    • 准备元素(div),被Vue控制
<body><div id="app"></div><script type="module">//引用官方模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.global.js'//控制视图元素createApp({}).mount('#app');    //调用mount方法,接管app区域[其实就是CSS选择器]</script></body>
  • 数据驱动视图
    • 准备数据
    • 通过插值表达式渲染页面
<body><div id="app"><!--    通过插值表达式渲染页面 --><h1>{{msg}}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({//定义方法[准备数据]data(){return{msg:'hello vue'}}}).mount('#app');    </script></body>

细节

  • Vue中定义数据,必须通过data方法来定义,data方法返回值是一个对象,在这个对象中定义数据。

  • 插值表达式中编写的变量,一定是Vue中定义的数据,如果插值表达式中编写了一个变量,但是在Vue中未定义,将会报错 。

  • Vue应用实例接管的区域是 '#app',超出这个范围,就不受Vue控制了,所以vue的插值表达式,一定写在 <div id="app">...</div> 的里面 。

2.3 常用指令

  • 指令:HTML标签上带有 v-前缀的特殊属性,不同的指令有不同的含义,可以实现不同的功能
  • 常用指令
指令作用
v-for列表渲染,遍历容器的元素或者对象的属性
v-bind为HTML标签绑定属性值,如设置 href , css样式等
v-if/v-else-if/v-else条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
2.31 v-for
  • 作用:列表渲染,遍历容器的元素或者对象的属性 

  • 语法:

<tr v-for="(item,index) in items" : keys="item.id"> {{item}}</tr>​​​​​​​
  • 参数
    • items 为遍历的数组

    • item 为遍历出来的元素

    • index 为索引/下标,从0开始 ;可以省略,省略index语法: v-for = "item in items"

  • key:
    • 作用:给元素添加的唯一标识,便于vue进行列表项的正确排序复用,提升渲染性能

    • 推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)

    • 注:遍历的数组,必须在data中定义; 要想让哪个标签循环展示多次,就在哪个标签上使用 v-for 指令。

2.32 v-bind
  • 动态为HTML标签绑定属性值,如设置href,src,style样式等。
  • 语法:
v-bind:属性="变量"//简化版:属性="变量"<td><img class="avatar" v-bind:src="e.image" alt="令狐冲"></td>
  • 注:v-bind 所绑定的数据,必须在data中定义/或基于data中定义的数据而来。
2.33 v-if & v-show
  • 作用:这两类指令,都是用来控制元素的显示与隐藏的
  • v-if:
    • 语法:v-if="表达式",表达式值为 true,显示;false,隐藏

    • 原理:基于条件判断,来控制创建或移除元素节点(条件渲染)

    • 场景:要么显示,要么不显示,不频繁切换的场景

    • 其它:可以配合 v-else-if / v-else 进行链式调用条件判断

    • 注意: v-else-if必须出现在v-if之后,可以出现多个;v-else 必须出现在v-if/v-else-if之后

<td><span v-if="e.job==1">班主任</span><span v-else-if="e.job==2">讲师</span><span v-else-if="e.job==3">学工主管</span><span v-else-if="e.job==4">教研主管</span><span v-else-if="e.job==5">咨询师</span><span v-else>其他</span>
</td>
  • v-show:

    • 语法:v-show="表达式",表达式值为 true,显示;false,隐藏

    • 原理:基于CSS样式display来控制显示与隐藏

    • 场景:频繁切换显示隐藏的场景

<td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">讲师</span><span v-show="e.job == 3">学工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨询师</span>
</td>
v-if 与 v-show的区别 
  • v-if: 条件不成立,直接不渲染这个元素(不频繁切换的场景)
  • v-show:通过css样式,来控制元素的展示与隐藏(频繁切换的场景)
2.34 v-model
  • 作用:在表单元素上使用,双向数据绑定。可以方便的 获取设置 表单项数据
  • 语法:v-model="变量名"
  • 这里的双向数据绑定,是指 Vue中的数据变化,会影响视图中的数据展示 。 
createApp({data() {return {此处数据searchForm:{name: '',gender: ''job: '',},empList: [...]
}}}.mount(...)

注意:v-model 中绑定的变量,必须在data中定义。 

2.35 v-on 
  • 作用:为html标签绑定事件(添加时间监听)
  • 语法:
语法
v-on:时间名="方法名"
简写为   @时间名="..."<button type="button" v-on:click="search">查询</button>
<button type="button" @click="clear">清空</button>
  • 方法需定义,与data平级 

3. Ajax 

  • 介绍: Asynchronous JavaScript And XML,异步 的JavaScript和XML
  • 作用:
    • 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
    • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等。

XML:(英语:Extensible Markup Language) 可扩展标记语言,本质是一种数据格式,可以用来存储复杂的数据结构

3.1 同步与异步

  • 同步请求

浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操 作 

  • 异步请求

浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。 

 3.2 Axios

  • 介绍: Axious 是对原生的Ajax进行了封装,简化书写,快速开发。
  • 官网:Axious
  • 步骤:
    • 引入Axious的js文件(参考官网)
    • 使用Axious发送请求,并获取响应结果
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',method:'get'}).then(function(res) {console.log(res.data);}).catch(function(err) {console.log(err);})

 method:请求方式 GET/POST

url:请求路径

data:请求数据(POST)

params:发送请求时携带的url参数,如:...?key=val

http://www.lryc.cn/news/607527.html

相关文章:

  • 备案主体更换期间网站可以访问吗
  • opencv-python的GPU调用
  • 树莓派GPIO介绍 + LED控制
  • 智能Agent场景实战指南 Day 28:Agent成本控制与商业模式
  • xcode swift项目运行、连接真机运行报错,引入文件夹失败
  • [2025CVPR-图象生成方向]ODA-GAN:由弱监督学习辅助的正交解耦比对GAN 虚拟免疫组织化学染色
  • python PIL图片转base64字符串
  • 练习javaweb+mysql+jsp
  • 告别“AI味”图像!最新开源AI模型FLUX.1-Krea实现真实光影生成
  • [CISCN 2022 初赛]online_crt
  • 【PHP 自动加载机制详解】
  • 四、基于SpringBoot,MVC后端开发笔记
  • Qwen2 RotaryEmbedding 位置编码仅仅是第一层有吗
  • 提问总结2
  • Eden 和 Survivor 比例可以调整么,参数是什么?还用到了哪些参数?
  • SpringCloud(一)微服务基础认识
  • U-Net vs. 传统CNN:为什么医学图像分割需要跳过连接?
  • 04 基于sklearn的机械学习-梯度下降(上)
  • Linux内核构建系统中的auto.conf与autoconf.h:原理与作用解析
  • ARM Cortex-M 处理器的应用
  • NDI开发指南
  • LeetCode 热题100:206. 反转链表
  • 深入讲讲异步FIFO
  • 向华为学习——IPD流程体系之IPD术语
  • Java函数式编程之【Stream终止操作】【下】【三】【收集操作collect()与分组分区】【下游收集器】
  • 从零开始:Python编程快速入门指南
  • 实战指南:如何将Git仓库中的特定文件夹及其历史完整迁移到另一个仓库
  • vue+element 实现下拉框共享options
  • 智能客服系统实战:多轮对话与知识库检索完整实现
  • 《n8n基础教学》第三节:模拟一个自动化场景