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

黑马JavaWeb-day02

news 2025/7/6 15:18:23

什么是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

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/6/21 13:23:32

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/7/5 6:10:04

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/4 19:13:43

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/7/6 14:00:15

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/7/5 15:39:29

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/6/21 15:51:18

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/7/2 11:24:03

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/7/2 3:21:22

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/7/2 15:38:04

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/6/20 15:06:56