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

黑马JavaWeb-day02

news 文章来源：https://blog.csdn.net/weixin_61426225/article/details/143135874 2025/5/10 17:55:01

什么是JavaScript？

JavaScript：简称Js,是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互

JavaScript和Java是完全不同的语言，无论是概念还是设计。但是基础语法类似。

JavaScript



JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中

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

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

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



JS基础语法

  • 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。
  • 每行结尾的分号可有可无,但是结尾的分号建议写上。
  • 注释：单行注释：//注释内容，多行注释：/**/
  • 大括号代表代码块 if(count==3){alert(count)}

JS输出语句

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

JS变量

  • JavaScript中用var关键字（variable的缩写）来声明变量
  • JavaScript是一门弱类型语言，变量可以存放不同类型的值
  • 变量名需要遵循如下规则
    1. 组成字符可以是任何字母、数字、下划线（_）、或者美元符号（$）
    2. 数字不能开头
    3. 建议使用驼峰命名

通过var定义的变量的特点：

  1. 作用域比较大，全局变量
  2. 可重复定义

注意事项；新增let关键字来定义变量，用法和var类似，但是let所声明的变量只在let关键字所在代码块内有效，且不允许重复声明。
const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。



JavaScript的数据类型

JS中的数据类型分为原始数据类型和引用数据类型：

  • 原始数据类型
    1. number：数字（整数、小数、NaN）
    2. string：字符串，单双引皆可
    3. boolean：布尔。true，false
    4. null：对象为空
    5. undefined：当声明的变量未初始化时，该变量的默认值时undefined

使用typeof可以获取数据的数据类型



JS中的运算符
1729478658599.png

==:会先进行类型比较，如果类型不一样，先将类型转化一致，再进行比较

=== ：不会进行类型转换




类型转换：

  • 字符串转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN
  • 其他类型转为boolean：
    • Number：0和NaN为false，其他均为true
    • String：空字符串为false，其他均为true
    • Null和undefined：均转为false



函数：是被设计为执行特定任务的代码块。

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

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

注意：

  • 形参不需要类型。因为JS是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
  • 调用：函数名称(实参列表)
<script>//定义函数function add(a, b) {return a + b;}result = add(10, 20);alert(result);
</script>

定义方式二：

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



JS中的对象

Array：
JS中Array对象使用了定义数组的。
定义：

var 变量名=new Array(元素列表);
var 变量名=[元素列表]；

var arr=new Array(1,2,3,4);
var arr=[1, 2, 3, 4];

Js中的数组类似Java中的集合，长度可变，类型可变。

1729480585836.png

for循环和for-Each的区别；for循环遍历所有元素，for-each只遍历数组里面有值的元素.

ES6中对于函数的简化如下:

var arr - [1, 2, 3, 4]
arr.forEach(function(e){console(e);
})
arr.forEach((e) => {console(e);
})



String对象

和Array对象类似,创建String对象也有两种方式

var 变量名 = new String("..."); //方式一
var 变量名 = ""; //方式二var str = new String("小明");
var str = "小明";

1729481333133.png



JSON对象

Javascript自定义对象:
定义格式:

var 对象名 = {属性名1: 属性值1,属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}
};var user = {name:'Tom',age:20,gender:"male",eat:function() {alert("用膳");}/*这样定义方法也是可以的ear () {}*/
};

JSON:JavaScript Object Notation,JavaScript对象标记法,json就是通过JavaScript对象标记法书写的文本.

json中所有的key必须使用""(双引号)引起来

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

json语法简单,层次结构鲜明,多用于数据载体,在网络中进行数据传输.



json基础语法:

定义:

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对象

  • 介绍:浏览器窗口对象
  • 获取:直接使用window,其中window可以省略.window.alert(“Hello world”); alert(“Hello world”);
  • 属性:
    1. history:对History对象的只读引用.
    2. location:用于窗口或框架的Location对象.
    3. navigator:对Navigator对象的只读y引用.
  • 方法
    1. alert():显示带有一段消息和一个确认按钮的警告框.
    2. confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.
    3. setInterval():按照指定的周期来调用函数或计算表达式.
    4. setTimeout():在指定数毫秒后调用函数或计算表达式.

Location对象:
地址栏对象
获取:

window.location.属性;
location.属性

属性:

  • href:设置或返回完整的url



DOM对象:

概念:Document Object Model,文档对象模型

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

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

1729486270050.png

JavaScript通过DOM,就能够对HTML进行操作:

  • 改变HTML元素的内容
  • 改变HTML元素的样式(CSS)
  • 对HTML DOM事件作出反应
  • 添加,删除HTML元素

DOM是W3C的标准,定义了访问HTML和XML的标准,分为3个不同的部分:

  1. Core DOM:所有文档类型的标准
    • Document:整个文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • comment:注释对象
  2. XML DOM-XML文档的标准模型
  3. HTML DOM-HTML 文档的标准模型

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

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

1729515765453.png

<script>// 获取元素通过idvar img = document.getElementById("h1");alert(img);// 获取元素通过标签名var divs = document.getElementsByTagName('div')for(let i=0;i<divs.length;i++){alert(divs[i]);}// 获取元素通过namevar ins = document.getElementsByName('hobby');for(let i=0;i<ins.length;i++){alert(ins[i]);}// 获取元素通过类名var cls = document.getElementsByClassName('cls');for(let i=0;i<cls.length;i++){alert(cls[i]);}//通过获取到的对象操作htmlvar divs = document.getElementsByTagName('div')divs[0].innerHTML = "传智播客";
</script>



事件:HTML事件是发生在HTML元素上的事情.比如:

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

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

事件绑定:

两种方式:

方式一:通过HTML标签中的事件属性进行绑定
方式二:通过DOM元素属性绑定

1729515715314.png

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-事件绑定</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2"></body>
<script>on = function(){alert("事件绑定1");}document.getElementById("btn2").onclick = function(){alert("事件绑定2");}</script>
</html>

js中的常见事件

1729516226000.png



Vue:Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写.基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上.

1729517102659.png

Vue快速入门

1729517440440.png

插值表达式:形式:{{表达式}},内容可以是:变量,三元运算符,函数调用,算数运算



Vue的常见指令:

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

1729517733971.png

v-bind:为html标签绑定属性值,如设置href,css样式等

<a v-bind:href="url">传智教育</a>//简写形式
<a :href="url">传智教育</a>

v-model:

<input type="text" v-model="url">

注意如果通过v-bind或者v-model绑定变量,必须在数据模型中声明.

v-on:为HTML标签绑定事件

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

1729522373832.png

1729522431193.png



Vue的生命周期

  • 生命周期:指一个对象从创建到销毁的过程
  • 生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
    1729522831135.png

1729523195521.png

主要是mounted方法:通常我们是在mounted这个方法中发送请求到服务端获取数据.

1729523284563.png

相关文章：

黑马JavaWeb-day02

什么是JavaScript&#xff1f; JavaScript&#xff1a;简称Js,是一门跨平台、面向对象的脚本语言。是用来控制网页行为的&#xff0c;它能使网页可交互 JavaScript和Java是完全不同的语言&#xff0c;无论是概念还是设计。但是基础语法类似。 JavaScript JavaScript引入方式…...

编程日记 2024/10/22 6:46:31

laravel清除不同缓存

1、清除应用程序缓存&#xff1a; php artisan cache:clear2、清除路由缓存&#xff1a; php artisan route:cache3、清除配置缓存&#xff1a; php artisan config:cache4、清除编译后的视图文件&#xff1a; php artisan view:clear5、清除事件和监听器缓存&#xff1a; ph…...

编程日记 2024/10/22 6:44:29

【Git】解决分支冲突、分支合并、版本回退、版本管理

解决本地冲突 1. 合并分支 假设你正在 main 分支上&#xff0c;想要合并 feature 分支。 git checkout main git merge feature如果两个分支都对同一文件做了不同的修改&#xff0c;Git 会提示你有冲突&#xff0c;并显示冲突文件。 2. 查看冲突文件 使用以下命令查看冲突…...

编程日记 2024/10/22 6:43:28

linux file结构体与inode结构体

在 Linux 系统中&#xff0c;inode 结构体和 file 结构体都是与文件系统相关的重要数据结构。它们各自承担着不同的角色&#xff0c;帮助操作系统管理文件和目录。以下是它们的异同点&#xff1a; inode 结构体 1.定义&#xff1a;inode&#xff08;索引节点&#xff09;是文件…...

编程日记 2024/10/22 6:42:27

探索迷宫的奥秘：用 C++ 打造你的迷宫游戏之旅！

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/10/22 6:39:24

JSON 注入攻击 API

文章目录 JSON 注入攻击 API"注入所有东西"是"聪明的"发生了什么? 什么是 JSON 注入?为什么解析器是问题所在解析不一致 JSON 解析器互操作性中的安全问题处理重复密钥的方式不一致按键碰撞响应不一致JSON 序列化(反序列化)中的不一致 好的。JSON 解析器…...

编程日记 2024/10/22 6:37:21

MyBatis入门程序之客户添加、更新与删除

【图书介绍】《SpringSpring MVCMyBatis从零开始学&#xff08;视频教学版&#xff09;&#xff08;第3版&#xff09;》-CSDN博客 《SpringSpring MVCMyBatis从零开始学 视频教学版 第3版整合开发实战快速开发与项目实战框架技术精讲与整合案例 计算机与互联网 编程语言与程序…...

编程日记 2024/10/22 6:36:19

查缺补漏----数据结构树高总结

① 对于平衡二叉树而言&#xff0c;树高的规律&#xff1a; 高度为h的平衡二叉树的含有的最少结点数&#xff08;所有非叶节点的平衡因子均为1&#xff09;&#xff1a; n01&#xff0c;n11&#xff0c;n22 含有的最多结点数&#xff1a; (高度为h的满二叉树含有的结点数) ②…...

编程日记 2024/10/22 6:33:16

jenkins添加新服务

jenkins添加新服务 新建item 添加流水线 node{def envname "ENVIRONMENT:1234-dev"def projectGitUrl http://xxxxx/xxxxxx/12345.gitdef imageServer harbor.xxxxx.com //镜像仓库地址def projectAppName 12345-applicationdef projectGitBranch dev//git分…...

编程日记 2024/10/22 6:31:14

网络连接设备的功能与应用概述

目录 一、集线器 二、交换机 三、网桥 四、路由器 五、集线器、交换机、网桥与路由器的比较 备注 一、集线器 定义&#xff1a; 集线器&#xff08;Hub&#xff09;是一种物理层设备&#xff0c;它提供多个端口&#xff0c;用于将多个计算机或其他网络设备连接在一起&am…...

编程日记 2024/10/22 6:28:11

【SpringCloud】04-Gateway网关登录校验

1. 网关请求处理流程 2. 网关过滤器 3. 网关实现登录校验 Component // 参数构造器 RequiredArgsConstructor public class AuthGlobalFilter implements GlobalFilter, Ordered {private final AuthProperties authProperties;private final JwtTool jwtTool;private final A…...

编程日记 2024/10/22 6:25:07

FFmpeg 库的简要说明

FFmpeg 库的简要说明&#xff1a; libavutil 功能&#xff1a;提供一系列通用工具函数&#xff0c;旨在简化开发流程。 主要用途&#xff1a; 随机数生成器&#xff1a;用于生成随机数&#xff0c;适用于各种应用。 数据结构&#xff1a;提供常用的数据结构&#xff08;如链表…...

编程日记 2024/10/22 6:24:06

Go：error处理机制

文章目录 本篇总结的是Go中对于错误的处理机制 Go 语言的函数经常使用两个返回值来表示执行是否成功&#xff1a;返回某个值以及 true 表示成功&#xff1b;返回零值&#xff08;或 nil&#xff09;和 false 表示失败 而实际上来说&#xff0c;是需要对于第二个参数进行判断的…...

编程日记 2024/10/22 6:23:05

Python机器学习中的主成分分析（PCA）全面解析与应用

&#x1f3af; Python机器学习中的主成分分析&#xff08;PCA&#xff09;全面解析与应用 &#x1f4d6; 目录 &#x1f31f; 主成分分析 (PCA) 的概念和原理&#x1f50e; PCA的数学基础&#x1f6e0; Python 实现 PCA 的步骤详解&#x1f4ca; 如何选择适合的主成分数量⚙️…...

编程日记 2024/10/22 6:22:03

MySQL 安装和基本使用

MySQL 介绍 MySQL 的特性 MySQL 是基于开源协议发布的&#xff0c;可以免费使用&#xff0c;也可以基于源码进行二次开发。 MySQL 使用标准 SQL 语言进行管理。 MySQL 可以运行于多个系统上&#xff0c;具有跨平台特性&#xff0c;并且支持多种语言。 MySQL 使用插件式存储…...

编程日记 2024/10/22 6:20:02

RequestBody接收参数报错com.fasterxml.jackson.databind.exc.MismatchedInputException

目录&#xff1a; 1、错误现象2、解决办法3、最终验证 1、错误现象 报错的现象和代码如下&#xff1a; 2、解决办法 查了很多都说参数类型对不上&#xff0c;最后只有换接收方式后验证是可以的&#xff1b;最终想了一下&#xff0c;觉得是请求的是json&#xff0c;需要用json接…...

编程日记 2024/10/22 6:19:01

大数据治理的关键技术：构建稳固的数据基石

在这个信息爆炸的时代&#xff0c;数据已经成为企业最宝贵的资产之一。然而&#xff0c;随着数据量的爆炸性增长&#xff0c;如何有效治理这些数据成为了一个巨大的挑战。今天&#xff0c;我们就来聊聊大数据治理的关键技术&#xff0c;看看如何构建一个稳固的数据基石&#xf…...

编程日记 2024/10/22 6:16:59

OS管理和进程的学习

1.冯诺依曼体系结构 1.1 输入设备&#xff1a;键盘&#xff0c;鼠标&#xff0c;键盘&#xff0c;网卡&#xff08;网络接受&#xff09;&#xff0c;磁盘... 输出设备&#xff1a;显示器&#xff0c;磁盘&#xff0c;网卡&#xff08;网络发送&#xff09; .... 存储器&…...

编程日记 2024/10/22 6:14:57

Linux 部署 Harbor 镜像仓库详解

文章目录 安装 Docker安装 Harbor访问 Harbor 安装 Docker 本次部署流程使用的是1台阿里云ECS&#xff0c;Ubuntu 22.04&#xff0c;2核4G。 首先需要做的是在当前服务器上&#xff0c;安装好 Docker&#xff0c;参考链接如下&#xff1a; https://blog.csdn.net/weixin_4659…...

编程日记 2024/10/22 6:12:55

怎么把flv格式转换成mp4？将flv格式换成MP4格式的简单方法

怎么把flv格式转换成mp4&#xff1f;flv这一昔日网络视频领域的璀璨明星&#xff0c;凭借其小巧的文件体积与卓越的流媒体传输性能&#xff0c;曾在网络视频时代初期大放异彩&#xff0c;成为无数网络视频爱好者的首选。然而&#xff0c;随着科技的日新月异与多媒体设备的多元化…...

编程日记 2024/10/22 6:11:54

原型模式和建造模式的区别

原型模式&#xff08;Prototype Pattern&#xff09;和建造者模式&#xff08;Builder Pattern&#xff09;虽然都是创建型设计模式&#xff0c;但它们的应用场景和实现方式有着显著的区别。以下是二者的详细对比&#xff1a; 1. 意图和应用场景 原型模式&#xff1a; 意图&a…...

编程日记 2024/10/22 6:10:53

最新 client-java 调用 k8s ApiServer

创建权限绑定 sa-role.yaml apiVersion: v1 kind: ServiceAccount metadata:name: my-admin #账号名namespace: kube-system--- apiVersion: rbac.authorization.k8s.io/v1 kind: ClusterRole metadata:annotations:rbac.authorization.kubernetes.io/autoupdate: "true…...

编程日记 2024/10/22 6:08:51

TCP单包数据大于1460字节会被拆包的问题

关于TCP单包数据大于1460字节会被拆包的问题 1、问题背景&#xff1a; 最近在用STM32W5500做项目&#xff0c;需要STM32通过TCP协议发送数据到上位机并显示。当数据量小的时候上位机显示正常&#xff0c;一旦数据量大过大上位机就会出现数据丢失的情况&#xff0c;甚至数据直接…...

编程日记 2024/10/22 6:07:49

苏宁关键字搜索接口技术解析与实战

在当今的电商领域&#xff0c;搜索功能无疑是用户寻找心仪商品的最重要途径之一。苏宁作为国内知名的电商平台&#xff0c;其提供的API接口服务为开发者提供了丰富的商品数据。本文将详细介绍如何使用苏宁的关键字搜索接口&#xff0c;通过编写代码实现商品搜索功能。 接口概述…...

编程日记 2024/10/22 6:06:47

Java学习教程，从入门到精通，Java 基本数据类型详解（5）

Java 基本数据类型详解 Java是一种强类型语言&#xff0c;这意味着在Java程序中&#xff0c;每个变量都必须明确声明其数据类型。Java提供了八种基本数据类型&#xff08;Primitive Data Types&#xff09;&#xff0c;这些类型都是预先定义好的&#xff0c;并且每种类型都占用…...

编程日记 2024/10/22 6:05:46

使用Flask实现本机的模型部署

前言 模型部署是指将大模型运行在专属的计算资源上&#xff0c;使模型在独立的运行环境中高效、可靠地运行&#xff0c;并为业务应用提供推理服务。其目标是将机器学习模型应用于实际业务中&#xff0c;使最终用户或系统能够利用模型的输出&#xff0c;从而发挥其作用。 一、设…...

编程日记 2024/10/22 6:04:45

基于SSM的校园跑腿网站的设计与实现

文未可获取一份本项目的java源码和数据库参考。 课题来源及研究的目的和意义 随着网络技术的不断完善与发展&#xff0c;各种互联网公司不断如雨后春笋般不断涌现&#xff0c;丰富了人们生活的各个方面。近年来由于 Online To 0ffline即线上到线下(020)模式的发展和兴起&…...

编程日记 2024/10/22 6:03:43

【Java】正则表达式详解

目录 引言 一、基本概念 1.1 元字符 1.2 预定义字符类 1.3 边界匹配符 1.4 数量标识符 1.5 捕获与非捕获分组 二、Java中的正则表达式支持 三、正则表达式的使用示例 3.1 匹配字符串 3.2 替换字符串 3.3 分割字符串 3.4 使用Pattern和Matcher 3.5 捕获组和后向…...

编程日记 2024/10/22 6:02:42

Java知识巩固(七)

目录 面向对象 面向对象三大特征 封装 继承 多态 多态 深拷贝和浅拷贝区别了解吗?什么是引用拷贝? 浅拷贝 深拷贝 面向对象 万物皆为对象&#xff0c;也就是描述某个事物解决问题的过程中所发生的事情。 面向对象三大特征 封装 封装是指把一个对象的状态信息&…...

编程日记 2024/10/22 5:59:40

Ubuntu22.04 更换源

Ubuntu22.04 更换网易163源 1、编辑/etc/apt/sources.list文件 1 sudo nano /etc/apt/sources.list 2、清空文件内容&#xff0c;拷贝下列163源到文本。 1 2 3 4 5 6 7 8 deb http://mirrors.163.com/ubuntu/ jammy main restricted universe multiverse deb http://mirro…...

编程日记 2024/10/22 5:58:39