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

黑马JavaWeb-day02

news 2025/7/7 0:35:33

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/5 21:21:36

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/7/6 5:08:27

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/7/4 0:18:53

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/7/4 12:04:41

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/7/6 0:48:46

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/7/6 0:01:32

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/7/6 18:56:26

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/7/7 0:14:49

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/6/21 22:37:01