java技术栈快速复习02_前端基础知识总结

前端基础

经典三件套： html（盒子）+css（样式）+JavaScript（js：让盒子动起来）

html & css

  • HTML全称：Hyper Text Markup Language(超文本标记语言)，不是编程语言

    • 超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素（超出文本的范畴）；
    • 标记：标签，不同的标签实现不同的功能
    • 语言：人与计算机的交互工具

  • CSS (Cascading Style Sheets，层叠样式表），就是添加样式

  • 资料：

    • https://www.runoob.com/html/html-tutorial.html
    • https://www.runoob.com/css/css-tutorial.html

JS

  • 手册：https://www.techbrood.com/jsref?p=jsref-tutorial

  • JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。

  • js组成

    • ECMAScript：规定了JS的核心语法，是一种在国际认可的标准的脚本语言规范。如语法， 数据类型，关键字，保留字，运算符，对象等。
    • BOM：浏览器对象模型（Browser Object Model），BOM赋予了JavaScript操作浏览器的能力，即Window操作。
    • DOM：文档对象模型（Document Object Model），DOM赋予了JavaScript操作 HTML 的能力，即Document操作；

  • js语言基础=》和java相似，只说不一样的地方

    • 变量var a

    • 数据类型：6种数据类型，5 种简单数据类型：Undefined（未定义）、Null（空值）、String、Number 、Boolean。还有一种复杂数据类型—Object

      • Undefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量，但没有对其初始化时，这个变量的值就是 undefined。
      • Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object
      • 有个要说明的是：undefined 是派生自 null 的，因此 undefined 和 null 两个值的比较是相等的，所以，未初始化的变量和赋值为 null 的变量会相等。这时，可以采用 typeof 变量的类型进行比较。

    • 数组

      • 数组定义：var arr = [“123”, 1, “111”];
      • 常用方法：concat数组合并、reverse数组逆序、push()数组末尾添加新元素、pop()删除数组最后的元素
      • js数组和java数组的区别
      • javascript是弱类型语言，js数组可以自动扩容，不会出现数组越界的情况， 所以js数组中可以存放任意数据类型；
      • java数组是强类型一旦定义长度，不可以更改，java数组中的数据类型必须一致

    • 对象 ： 类似于map，var obj = {}

    • 常见弹窗

      • alert("你好");这是一个只能点击确定按钮的弹窗
      • confirm("你好");这是一个可以点击确定或者取消的弹窗
      • prompt("你爱学习吗？","爱");这是一个你可以输入文本内容的弹窗

  • BOM

    • BOM： 浏览器对象模型（Browser Object Model，简称 BOM），它提供了很多对象，用于访问浏览器的功能

    • BOM体系图

      • img

    • 常用BOM对象

      • Location 对象

        • assign(URL)：载入一个新的文档，相当于window.location.href=“url”;当前页面会转为新页面内容，可以点击后退返回上一个页面。
        • reload()：重新载入当前文档，reload() 方法类似于你浏览器上的刷新页面按钮。
        • replace(newURL)：用新的文档替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
        • href：返回完整的URL
        • …

      • History 对象

        • back()：加载 history 列表中的前一个 URL
        • forward()：加载 history 列表中的下一个 URL
        • go(number|URL)：加载 history 列表中的某个具体页面，该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

      • 定时器

        • setInterval(‘调用函数’,毫秒时间)：每间隔固定毫秒值就执行一次函数
        • setTimeout(‘调用函数’,毫秒时间)：在固定时间之后执行一次调用函数

  • DOM

    • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM 模型被构造为对象的树。
    • dom体系图
      • img

    • 获取元素

      • 通过css选择器选取元素：querySelectorAll()和querySelector（）
      • getElememtById(‘元素ID值’);
      • getElementsByClassName(“类名”);
      • getElementsByName(‘元素name值’);
      • getElementsByTagName(‘标签名称’);

    • 元素内容操作

      • innerText和innerHTML

        • innerText:只对文本处理
        • innerHTML:可以解析HTML标签

      • 获取值

        • var strValue = document.getElementById(‘元素ID值’).innerText;
        • var strValue = document.getElementById(‘元素ID值’).innerHTML;

      • 赋值（显示动态值）

        • document.getElementById(‘元素ID值’).innerText = 动态值;
        • document.getElementById(‘元素ID值’).innerHTML = 动态值;

    • 表单内容操作

      • 从元素获取值：var strValue = document.getElementById(‘表单元素id值’).value;
      • 给元素赋值(显示动态值)： document.getElementById(‘表单元素id值’).value = 动态值;
      • 注意：从表单元素中获取的值都是字符串类型，如需要数值计算需要进行数据类型转换

    • 属性操作

      • 获取属性 getAttribute(“属性名”); allp[index].getAttribute("id")
      • 设置属性 setAttribute(“属性名”,“属性值”);allp[index].setAttribute("class", "pclass");

    • 元素操作

      • createElement() 创建元素节点
      • appendChild() 新元素作为父元素的最后一个子元素进行添加
      • removeChild() 删除子节点
      • replaceChild() 替换子节点
      • insertBefore() 在指定的子节点前面插入新的子节点
      • createTextNode() 创建文本节点

    • 操作css

      • document.getElementById(‘元素的id’).style.color=“red”

    • DOM 事件

      • onclick 鼠标点击某个对象
      • onload 加载完成
      • 。。。

    • 正则表达式-RegExp 对象 )

      • var reg1 = /1$/; console.log(reg1.test(“a”));//false

ES6基本语法

  • var=》let；const

    • var声明的变量，没有局部作用域 let声明的变量 ，有局部作用域

  • 解构赋值

    • let [x, y, z] = [12, 24, 36] 
let { name, age } =  {name: 'Peter', age: 28}

  • 模板字符串 ：这是一段文字 ${变量名}文字

  • 声明对象简写 ：const person2 = {age, name} =》相当于const person2 = {age:age, name:age}

  • 定义方法简写

    • var obj = {// 传统demo1: function () {console.log("demo")},// es6demo2() {console.log("demo")}
}
obj.demo1() // demo
obj.demo2() // demo

  • 对象拓展运算符

    • 拓展运算符…用于取出参数对象所有可遍历属性然后拷贝到当前对象。

    • var oldObj = {age:20,name:"张三"}
var newData= {name:"李四",sex:"nan"}
var newObj1 = {...oldObj}
var newObj2 = {...oldObj,name:"王五"}
var newObj3 = {...oldObj,...newData}
console.log(newObj1) // {age: 20, name: '张三'}
console.log(newObj2) // {age: 20, name: '王五'}
console.log(newObj3) // {age: 20, name: '李四', sex: 'nan'}

  • 箭头函数：箭头函数多用于匿名函数的定义，类似Java8的Lambda表达式。基本语法是：参数 => 函数体

    • // 箭头函数
let fn = (name) => {// 函数体return `Hello ${name} !`;
};// 等同于
let fn = function (name) {// 函数体return `Hello ${name} !`;
};

Jquery

  • jQuery是一个快速、简洁的JavaScript代码库。
  • https://www.jq22.com/chm/jquery/index.html

AJAX

  • AJAX = Asynchronous (异步) JavaScript and XML（异步的JavaScript和XML）；

    • 同步 — 客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作；
    • 异步 — 客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。

  • AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术；

  • 使用ajax有很多方案，原生方法，jquery，axios，使用的一般都是封装起来

    • //  1请求地址 2参数 3，请求方式
const request = (url, params = {}, method = "get") => {return new Promise((resolve, reject) => {$.ajax({url,method,data: params,success: function (res) {resolve(res)},contentType: "application/json;charset=UTF-8",error: function (res) {// alert("ajax获取数据失败")console.log("ajax获取数据失败", res, url, params, method);// reject(res)resolve("路径【" + url + "】没有找到文件；" + "<a href=\"javascript:history.back(-1)\">返回上一页</a>\n")}})})
}
// 使用
var data = await request("demo.txt",{"name":"张三"},"post")

JSON

  • JSON

    • JSON(JavaScript Object Notation, JS对象标记，JavaScript对象表示法) 是一种轻量级的数据交换格式。
    • json数据是由键值对构成的
    • 键用引号(单双都行)引起来，也可以不使用引号
    • 值的取值类型：
      • 数字（整数或浮点数）{ "age":30 }
      • 字符串（在双引号中）{ "name":"Bill" }
      • 逻辑值（true 或 false）{ "sale":true }
      • 数组（在方括号中） {"persons":[{},{}]}
      • 对象（在花括号中） {"address":{"province"："山东"....}}JSON 中作为值的对象必须遵守与 JSON 对象相同的规则。
      • null { "sale":true }

  • 数据由逗号分隔：多个键值对由逗号分隔

json和js直接的转化

将JSON转换为JS对象
var json = '{"name":"张三", "age":36}';//定义一个JSON
var obj = JSON.parse(json);//调用parse()将json解析为一个JS对象
console.log(obj);//输出：{name: "张三", age: 36}将JS对象转换为JSON
var obj = {name:"张三", age:36};//定义一个JS对象
var json = JSON.stringify(obj);//调用stringify()将一个JS对象转换为JSON
console.log(json);//输出：{"name":"张三","age":36}

JSON和Java直接的转化

在日常实践中通常会对JSON数据和Java对象进行相互转换，转换需要用到JSON解析器，常见的解析器如下：

  • Json-lib（最古老、使用范围广，需要较多第三方包，性能最差。不推荐！）
  • Gson（Google）
  • Jackson（SpringMVC默认集成）
  • Fastjson（Alibaba）

本质上就是一些工具类。效率：FastJson>Jackson>Gson>Jsonlib

Vue

  • 资料：
    • Vue.js (vuejs.org)官网
    • vue思维导图](https://www.processon.com/view/link/6426f2c6f967315e33eb353c)

  • vue概述

    • Vue是一套用于构建用户界面的渐进式JavaScript框架
    • 形成Vue渐进式框架的核心概念为：MVVM，组件化，响应式，和生命周期。
    • Vue一切是数据为核心，使用数据来驱动视图刷新，我们不建议去操作dom

  • MVC与MVVM

    • MVC是模型(model)－视图(view)－控制器(controller)的缩写，是**后端的分层开发概念；**MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。

    • MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的mvc的View 层的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。因此主要是前端视图层的概念，主要关注与视图层分离，也就是说MVVM将前端视图层分成三部分Model、View、ViewModel

    • vue快速入门&生命周期

  <!DOCTYPE html><html><head><meta charset="utf-8"/><title>vue快速入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="container">从vm中获取的数据为：{{str}}</div><script type="text/javascript">var vm = new Vue({el: "#container",data: {str: "从前有座山"}});</script></body></html>

  • 常见指令

    • v-clock => 解决屏幕闪烁
    • v-text、v-html、v-pre= 》 渲染文本内容
    • v-bind_属性绑定
    • v-on_事件绑定
    • v-model_表单双向数据绑定
    • v-for_遍历
    • v-if_v-show_显示隐藏
    • 自定义指令（全局、私有）

  • 事件修饰符(.stop、.prevent、 .capture 、.self)

  • 按键修饰符 （@keyup.键盘码）

  • class与style绑定

  • 生命周期（钩子函数）：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！其中整个流程分三个阶段，创建（1-5）、运行（6）、销毁（7-8）；步骤如下：

    1. 创建一个vue实例对象

    2. 初始化 一些默认的声明周期函数和默认的事件 => beforeCreate()

      这时候，data和methods中的数据都没初始化

    3. 初始化 数据 => created（）

      data和methods中的数据都被初始化好了

    4. 编译模板 => beforeMount()

      即<div id="app">{{msg}} </div> => 在内存中生成一个编译好的最终模板字符串 -> 把这个模板字符串渲染为内存中dom

      注意：只是在内存中渲染好了模板，并没有把模板挂载到页面上去，此时 页面还是旧的, 简单的说 结果就是在内存中渲染了一个 <div id="app">ok</div> 的dom元素,但是页面上还是 <div id="app">{{msg}} </div>

    5. 将编译好的模板真实提换到页面中去 => mounted()

      即 将内存中渲染好的dom元素即 < div id="app">ok< /div>已经 提换了页面上的 < div id="app">{{msg}} < /div>

    6. 当数据改变时 即完成data(model层) ->view(视图层)的更新

      1. 先在内存中渲染一份最新的dom树 => beforeUpdate()

        页面上的数据还是旧的，但是data中的数据都是最新的，页面和最新的数据尚未保存同步

      2. 将最新的dom树重新渲染到真实的页面上去 => updated()

        页面上的数据和data中的数据都是最新的，页面和最新的数据保存同步

    7. 销毁之前，实例上的data和所有methods，以及过滤器、指令。。。都处于可用状态，还未真正销毁 => beforeDestroy()

    8. 销毁，实例上的data和所有methods，以及过滤器、指令。。。都处于不可用状态，还未真正销毁 => destroyed()

  • 过滤器

  • 计算属性和侦听器(监听器)

  • axios快速入门使用

  • 组件

  • 路由

  1. 0-9 ↩︎

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/5578.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

不科学上网使用Hugging Face的Transformers库

不科学上网使用Hugging Face的Transformers库

参考 Program Synthesis with CodeGen — ROCm Blogs (amd.com) HF-Mirror - Huggingface 镜像站 https://huggingface.co/docs/transformers/v4.40.1/zh/installation#%E7%A6%BB%E7%BA%BF%E6%A8%A1%E5%BC%8F 准备 apt show rocm-libs -a pip install transformers python …
阅读更多...
计算机网络—数据链路层

计算机网络—数据链路层

一、数据链路层的基本概念 结点&#xff1a;主机、路由器 链路&#xff1a;网络中两个结点之间的物理通道&#xff0c;链路的传输介质主要有双绞线、光纤和微波。分为有线链路、无线链路 数据链路&#xff1a;网络中两个结点之间的逻辑通道&#xff0c;把实现控制数据协议的…
阅读更多...
ABAP 查找第二代增强

ABAP 查找第二代增强

文章目录 ABAP 查找第二代增强第一种方法-根据包去查找第二种方法-通过MODX_FUNCTION_ACTIVE_CHECK重要的表MODSAP表TFDIR表TFTIT表 ABAP 查找第二代增强 第一种方法-根据包去查找 第二种方法-通过MODX_FUNCTION_ACTIVE_CHECK 第二代增强&#xff08;基于函数模块的增强&…
阅读更多...
git如何将多个commit合并成一个?

git如何将多个commit合并成一个?

我们使用git进行版本控制&#xff0c;在本地开发完某个功能时&#xff0c;需要提交commit&#xff0c;然后push至开发分支。简单的功能还好&#xff0c;几个commit可能就好了。但是如果功能比较复杂&#xff0c;commit多达十几甚至几十个时&#xff0c;commit管理就会很冗长。比…
阅读更多...
【IC设计】CRC（循环冗余校验）

【IC设计】CRC（循环冗余校验）

目录 理论解读CRC应用CRC算法参数解读常见CRC参数模型 设计实战校招编程题分类串行输入、并行计算、串行输出**串行计算、串行输出&#xff08;线性移位寄存器&#xff09;LSFR线性移位寄存器&#xff08;并转串&#xff09;(并行计算)模二除 总结——串行、并行计算的本质参考…
阅读更多...
成功解决STM32-No ST-LINK detected问题！

成功解决STM32-No ST-LINK detected问题！

本文目录 一、原因二、解决方法一&#xff1a;有复位按键方法二&#xff1a;没有复位按键 一、原因 在之前一直都用的好好的&#xff0c;突然出现这个问题&#xff0c;原因只有两个&#xff1a; 接线松了&#xff0c;或者杜邦线损坏&#xff0c;换新的线试一下。上一次下载到…
阅读更多...
【AI赋能演示力】：纯新人食用指南！ChatPPT万字实测报告

【AI赋能演示力】：纯新人食用指南！ChatPPT万字实测报告

引言 随着科技的日新月异&#xff0c;人工智能已经深入到我们工作生活的方方面面&#xff0c;尤其是在提高效率与创新设计方面发挥着越来越重要的作用。 追溯至2023年3月&#xff0c;一款名为ChatPPT的人工智能驱动的PPT设计工具震撼登场并开启公测&#xff0c;标志着办公智能…
阅读更多...
ORACLE 性能优化 高水位调节

ORACLE 性能优化 高水位调节

当我需要去做优化时,有一个固定的优化思路:SQL优化->索引优化->分区优化->优化器hints优化 SQL 语句优化 1. 选用适合的 ORACLE 优化器 ORACLE 的优化器共有 3 种 : a. RULE ( 基于规则 ) b. COST ( 基于成本 ) c. CHOOSE ( 选 择性) 设置缺省的优化器, 可以通…
阅读更多...
C语言贪吃蛇项目

C语言贪吃蛇项目

今天给大家带来一款简单的贪吃蛇游戏&#xff0c;一起随我来看看吧 游戏效果&#xff1a; 实现基本的功能&#xff1a; • 贪吃蛇地图绘制 • 蛇吃⻝物的功能&#xff1a;&#xff08;上、下、左、右⽅向键控制蛇的动作&#xff09; • 蛇撞墙死亡 • 蛇撞⾃⾝死亡 • 计算得分…
阅读更多...
paddleocr C++生成dll

paddleocr C++生成dll

目录 编译完成后修改内容: 新建ppocr.h头文件 注释掉main.cpp内全部内容&#xff0c;将下面内容替换进去。ppocr.h需要再环境配置中包含进去头文件 然后更改配置信息&#xff0c;将exe换成dll 随后右击重新编译会在根目录生成dll,lib文件。 注意这些dll一个也不能少。生成…
阅读更多...
第七篇：专家级指南：Python异常处理的艺术与策略

第七篇：专家级指南：Python异常处理的艺术与策略

专家级指南&#xff1a;Python异常处理的艺术与策略 1 引言 在编程的世界中&#xff0c;异常处理是一门必修的艺术。它不仅涉及到程序的错误处理&#xff0c;更广泛地影响着软件的稳定性、健壮性和用户体验。本篇文章将深入探讨Python中的异常处理&#xff0c;展示如何通过精心…
阅读更多...
深度学习之基于YOLOv5智慧交通拥挤预警检测系统

深度学习之基于YOLOv5智慧交通拥挤预警检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着城市化进程的加速和人口规模的不断增长&#xff0c;交通拥挤问题日益严重。传统的交通拥挤预警方…
阅读更多...
C++Day 7 作业

C++Day 7 作业

1、lambda #include <iostream>using namespace std;int main() {int a 100;int b 90;int temp;auto fun [&]()mutable->int {temp a;ab;btemp;};fun();cout<<a<<endl;return 0; } 2、vector #include <iostream> #include <vector>…
阅读更多...
控制台主机不能运行，切换终端实现RPG运行

控制台主机不能运行，切换终端实现RPG运行

鄙人转载&#xff0c;主要是移植过程中使用小熊猫C2.25.1 过程中&#xff0c;字符集不同&#xff0c;导致某些空格 从bilibili专栏粘贴导致出现符号不匹配&#xff0c;但是编辑器不能替换 用原来的devc 5.11 发现问题&#xff0c;读出额外的英文&#xff1f; 使用文件替换&…
阅读更多...
延时任务通知服务的设计及实现（二）-- redisson的延迟队列RDelayedQueue

延时任务通知服务的设计及实现（二）-- redisson的延迟队列RDelayedQueue

一、接着上文 RDelayedQueue作为redisson封装的一个分布式延迟队列&#xff0c;直接拿来使用还是比较简单的。 本文主要包括以下几部分&#xff1a; 保存至延迟队列&#xff08;生产者&#xff09;读取延迟队列&#xff08;消费者&#xff09;从延迟队列移除任务 二、rediss…
阅读更多...
什么品牌的洗地机好用性价比高？高性价比洗地机品牌推荐！

什么品牌的洗地机好用性价比高？高性价比洗地机品牌推荐！

随着科技的发展&#xff0c;智能家居产品逐渐走入我们的生活&#xff0c;洗地机作为其中的代表之一&#xff0c;备受消费者关注。然而&#xff0c;面对市场上众多品牌的扫地机器人&#xff0c;消费者往往难以抉择。那么&#xff0c;洗地机哪个牌子好&#xff1f;为了给大家一个…
阅读更多...
Unity 实现新手引导遮罩

Unity 实现新手引导遮罩

Unity 复写OnPopulateMesh 实现新手引导遮罩、包含点击事件触发区域判断 https://download.csdn.net/download/shenliang34/89247117
阅读更多...
2024五一数学建模竞赛A题思路讲解

2024五一数学建模竞赛A题思路讲解

五一数学建模思路 具体思路如下&#xff1a; 提高钢板下料切割过程中的工作效率&#xff0c;是模具加工企业降低成本和增加经济效益的重要途径&#xff0c;其中钢板切割的路径规划是钢板切割过程的一个关键环节。 钢板切割就是使用特殊的切割技术&#xff0c;基于给定的下料切…
阅读更多...
MouseBoost PRO for Mac激活版：强大的 鼠标增强软件

MouseBoost PRO for Mac激活版：强大的 鼠标增强软件

在追求高效工作的今天&#xff0c;MouseBoost PRO for Mac成为了许多Mac用户的得力助手。这款功能强大的鼠标增强软件&#xff0c;以其独特的智能化功能和丰富的实用工具&#xff0c;让您的电脑操作更加便捷、高效。 MouseBoost PRO for Macv3.4.0中文激活版下载 MouseBoost PR…
阅读更多...
PotatoPie 4.0 实验教程(33) —— FPGA实现摄像头视频图像叠加

PotatoPie 4.0 实验教程(33) —— FPGA实现摄像头视频图像叠加

链接直达 https://item.taobao.com/item.htm?ftt&id776516984361 什么是视频水印&#xff1f; 视频水印就是图像叠加&#xff0c;跟画中画&#xff0c;或者是OSD是一样的原理&#xff0c;都是在视频的行场数据流上进行替换操作&#xff0c;比如叠加可以直接用水印图的数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023