到DOM中,你可以利用JavaScript来控制该节点并且赋予样式,尽管它从未出现在你的HTML中。
这里提供了一个简单的例子,通过JavaScript是如何改变某个DOM元素里的内容来展示基本的JavaScript与DOM树的交互,首先需要选择到对应DOM节点
var container = document.getElementById(“container”);
然后使用该DOM节点的属性来改变其内容
container.innerHTML = 'New Content!';
这只是一个简单的例子,你还可以用JavaScript DOM API干更多的事情,你可以阅读以下的MDN的教程来进行了解, The Document Object Model.
Events
使用DOM进行Web与XML开发示例
怎么创建一个DOM树
DOM介绍
利用选择器来定位DOM节点
老生常谈了,不能舍本逐末,还是要专注于理解概念而不是简单地表达式使用,要在心中默问自己几个问题:
DOM是什么鬼?
怎么查询元素?
怎么进行事件监听?
怎么改变DOM节点的属性?
对于常见的JavaScript与DOM之间的交互, 可以参考PlainJS出品的 JavaScript Functions and Helpers 。这个站点会给你提供很多的例子,譬如 如何操作DOM元素样式 或者 怎么添加键盘事件响应等等。如果你希望再深入一点,同样推荐Eloquent JavaScript中的DOM介绍的章节。
Inspector
在浏览器中,我们可以用开发者工具来调试客户端运行的JavaScript代码,譬如Firefox的Firebug和Chrome的开发者工具,可以帮你审视网页源代码,追踪JavaScript的执行过程和结果,打印出调试语句,还能瞅瞅譬如网络请求、Cookie等等资源。这个 tutorial 是关于如何使用Chrome的开发者工具,如果你是火狐的话,瞅瞅这个 tutorial。
Practicing the basics
上面聊完了基础的语法和交互操作,但是对于不知道有多少个坑的JS而言不过沧海一粟,不过我把一些新的东西放到了最后一节介绍,这边先放松放松,做点小实验玩玩。
Experiment 1
实验1里让我们把目光投向 AirBnB, 打开你浏览器的 page inspector, 然后点击 console tab。这样你就可以在页面上执行一些JavaScript脚本了,你可以尝试着控制一些界面元素,改个字体样式啥的。
我选用airbnb的网站作为介绍是因为它的CSS类命名比较直接,并且没有被编译器混淆过,当然,你也可以看看百度啊之类的调试。
如果你在那边卡住了,别忘了去看看JavaScript Functions and Helpers 指南,我在这边也给一个小小的例子:
var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'
这个实验的主要目的就是回顾下你学到的JavaScript的基本语法以及一些DOM操作的知识。
Experiment 2
第二个实验使用 CodePen-JonathanZWhite编写一个较大较复杂的JavaScript交互项目,会用到一些programmatic logic 。这个实验的关注点会综合你在前端攻略-从路人甲到英雄无敌中学到的关于HTML与CSS的知识,这边有几个参考项目:
More JavaScript
看过了基础知识,动手做了几个小实验,下面我们会进入一些更有难度的概念的学习。这边的列举的概念可能之间并么有什么必然的练习,不过我还是把它们放在了一起是因为它们能有助于你通往专家的道路,并且也能有助于你理解下面关于框架部分的讲解。
Language
实际上JavaScript并不是一门浅薄的语言,虽然它只用了短短一周时间就创建出来了,它包含了很多高级的概念与用法(并且因为历史版本问题存在着大量的Polyfill)。这里是列举出了常见的概念,同样地 Eloquent JavaScript也攘括了这些点:
原型与继承
作用域
闭包
回环
事件冒泡
Apply, call, and bind
Callbacks and promises
变量与提升
Currying
Imperative vs. Declarative(命令式VS声明式)
就如同常见的两种编程方式,JavaScript与DOM交互的方式也分为命令式与声明式。一般来说,声明式编程关注于发生了啥,而命令式则同时关注与咋发生的。
var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {
var newChild = document.createElement(‘p’)
newChild.appendChild(document.createTextNode(‘Hello world!’))
newChild.setAttribute(‘class’, ‘text’)
newChild.setAttribute(‘data-info’, ‘header’)
hero.appendChild(newChild)
})
}
上面这个小例子就是典型的命令式编程,我们手动地查找到某个元素,然后将UI状态存储在DOM中,换言之,就是关注于如何达成某个目标。命令式编程的优势在于很直观,不过缺点也很明显,整个程序的健壮性很差,也不易于扩展。譬如如果某人把那个元素的类名从hero
变成了villain
,那么事件监听器就永远不会被调用了。
声明式编程可以较好地解决这个问题,刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理,这样就能让开发者专注于发生了啥,这里推荐一波 The State Of JavaScript — A Shift From Imperative To Declarative 与 Three D’s of Web Development #1: Declarative vs. Imperative。本指南并没有一上来先给你看Angular或者React的HelloWord,而是告诉你命令式的做法和声明式的区别在哪,这样你就能更好地理解为啥我们会需要框架。
响应式与声明式也可以看看笔者在我的前端之路里面提到的从以DOM操作为核心到数据流驱动的页面,关注发生了啥本质上就是关注状态与数据,而不是额外的操作。
Ajax
虽然已经有了很多关于Ajax的教程指南,还是建议你阅读下官方的Ajax 介绍。Ajax即是一个允许Web页面通过JavaScript与服务端完成交互的技术,Ajax也是前后端分离的一个基石。
譬如,如果你要去提交一个表单,那么就要先收集下输入的内容然后通过HTTP请求发送到服务端。你在发Twitter的时候,就是Twitter客户端发送HTTP请求到Twitter的服务器,然后根据服务端响应来修正页面状态。推荐阅读下 What is Ajax来深入理解Ajax,如果还是觉得有些疑惑,那可以看看 Explain it like i’m 5, what is Ajax,要是还不够,那就回到eloquentjavascript chapter 关于HTTP的章节吧。
早期,笔者是习惯用jQuery的$.ajax来进行Ajax操作,不过现在已经慢慢统一到了标准的 Fetch,你可以看看由 Dan Walsh写的文章来多了解下Fetch,它涵盖了Fetch的工作原理与基本的用法。因为Fetch在部分低版本浏览器上还不能使用,因此我们会选择一些Fetch polyfill ,文档是 这里。
jQuery
一些jQuery使用技巧
也需要你压根用不到jQuery
到这里,咱们一直是用单纯的JavaScript来进行节点操作,怪麻烦的说,而且在不同的浏览器里还有写不同的Polyfill。实际上,已经有了大量的DOM节点的操作库来帮我们简化常用代码,其中最著名的就是jQuery,一个当年前端程序猿的标配。要记住,jQuery是一个典型的命令式的操作库,它编写与前端井喷之前,在那个年代有着无可比拟的先进行。虽然今天,我们应该用像Angular、React这样的声明式编程的框架来进行复杂UI界面的编写,但是仍然是推荐学习下jQuery,毕竟还有大量的项目仍然是基于jQuery的。
jQuery官方提供了一个Learning Center,是不错的基础学习的教程,它会一步一步带你学习重要的概念,譬如animations 与 event handling。如果你想要更多的学习资源,那么可以参考Codecademy的 jQuery course。
不过一定要记住,jQuery并不是唯一的进行DOM操作的库, PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代码怎么实现常见的jQuery中的操作。
ES5 vs. ES6
在现代的前端开发中,另一个绕不过去的概念就是 ECMAScript。现在主要有两个常用的JavaScript版本,分布是ES5和ES6,它们呢都是JavaScript使用的ECMAScript标准。你可以把它们看做不同版本的JavaScript,ES5是在2009年定稿,然后使用至今。而ES6, 也叫作ES2015,是一个新的标准,它提供了很多譬如常量, 类, 以及 模板字符串等等特性。ES6是兼容ES5的,不像Python3和Python2,并且很多ES6带来的语法特性都是在ES5的封装的基础上,譬如ES6中的类是基于JavaScript prototypal inheritance的syntactical sugar。
这里推荐一个不错的ES6的教程ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的Getting Started with ES6 — The Next Version of JavaScript.。看完了这些,你也可以看看ES5和ES6特性的详细列表: ES6 Features以及 Github repository 。
More Practice
恭喜你,成功到达存档点,你已经学了不少关于JavaScript的知识了,下面让我们来温习一波。
Experiment 3
Experiment 3 着重于如何利用jQuery进行常见的DOM节点操作,本实验中,我们会以一种更加结构化的方式。我是选择了Flipboard的主页作为范本,你可以参考下Codecademy的Flipboard’s home page and add interactivity with JavaScript 教程。
Experiment 4
按照惯例,实验4呢又把你学过的HTML和CSS的知识跟JavaScript的知识混杂到了一起进行锻炼,这是一个关于钟的实验,各种各样的钟。在动手之前推荐你看看 Decoupling Your HTML, CSS, and JavaScript来了解下JavaScript混入的情况下基本的CSS类名命名规范。同样的,我也准备了一系列的CodePen来当做你的教材:
Flat Clock
jQuery Wall Clock
Fancy Clock
Retro Clock
Simple JavaScript Clock
如果你要更多的例子,请在CodePen上搜索 clock 。你可以选择先写基本的HTML与CSS样式然后再加上JavaScript逻辑,也可以先写JavaScript逻辑代码然后再放入到样式中。你可以选择用jQuery,不过尽量还是用纯粹的JavaScript代码吧。
JavaScript Frameworks
小怪清完了,下面开始刷BOSS了,拿起你的剑吧勇士,美丽的公主就在前方。我们在这一章节会开始介绍常用的JavaScript框架。我们不提倡重复造轮子,但是一定要理解轮子并且能给它上上油或者换换螺丝钉,这些JavaScript框架可以帮你更好地组织你的代码。它们为前端开发者提供了可复用的解决方案,就好像所谓的设计模式一样,它可以用来解决状态管理、路由以及性能优化等等,正是因为有了这些框架,我们才能更好地构建web apps。
贪多嚼不烂,我不打算介绍所有的JavaScript框架,不过还是列个目录下来,这些框架包括但不限于 Angular, React + Flux, Ember, Aurelia,Vue, 以及 Meteor。你并不需要学习所有的框架,选择一个然后深入,最合适自己的才是最好的。
便如译者在文首所说,我们并不能盲目地追赶框架,而是要理解框架背后的思想与原则。另一个在译者自己的实践中,会尽可能的基于ES6进行抽象,这样保证了即使换框架也能有很好地兼容于复用。
Architectural Patterns
在学习框架之前,首先要了解下常用的架构模式:
model-view-controller
model-view-viewmodel
model–view–presenter
这些模式可以用来创建清晰的多层应用关注分离 。关注分离是一个设计原则,即是讲一个巨石型应用切分到不同的领域专注层,譬如前面我们都是在HTML中保留应用状态,而你可以使用一个JavaScript对象,或者说是Model层来存储应用状态。如果你想要了解地更多,可以先看下Chrome Developers里对于MVC的讲解,然后阅读Understanding MVC And MVP (For JavaScript And Backbone Developers)。阅读这篇文章的时候不要在意有没有学过Backbone,只要关注MVC与MVP比较的部分。 Addy Osman也写了另一篇关于MVVM的文章Understanding MVVM — A Guide For JavaScript Developers。如果你想了解MVC的源起,可以参考Martin Fowler的 GUI Architectures。最后,阅读这篇JavaScript MV* Patterns, Learning JavaScript Design Patterns也是个很不错的在线免费电子书。
Design Patterns
JavaScript的框架也并没有重复造轮子,很多还是基于已有的设计模式,你可以认为设计模式是在软件开发中用于解决通用问题的可复用的方法。尽管理解设计模式并不是学习一个框架的前提,不过我还是建议你可以先了解一些:
Decorator
Factory
Singleton
Revealing module
Facade
Observer
理解这些设计模式不仅会让你变成一个更好地设计师,也能有助于你更好地理解这些框架。
AngularJS
AngularJS 是一个 JavaScript MVC框架,不过有时候也是一个 MVVM框架。它由在2010年由Google进行维护并且迅速在社区刮起了一波浪潮。
Angular是一个典型的声明式框架,这里推荐一个阅读,可以帮你理解命令式编程到声明式编程的转变: How is AngularJS different from jQuery。如果你希望了解更多关于Angular的知识,可以参考Angulardocumentation。还有一个叫做 Angular Cat 的渐进教程。 angular2-education 是一个由 Tim Jacobi.整理的完整的关于angular2的教程,另外,还有John Papa编写的 最佳实践指南 。
React + Flux
Angular帮助开发者解决了很多前端系统构建中遇到的问题,不过Angular 1存在着极大的性能问题。今年才出的Angular 2也是组件化思维,不过太过庞大。另一个常用的小而美的工具就是 React,专注于用户交互的构建。React可以认为是MVC层中的View层,React只是一个Library,通常与 Flux或者Redux一起结合起来使用。
Facebook最早设计React与Flux是为了解决MVC中的一些缺陷与扩展问题,可以参考著名的Hacker Way: Rethinking Web App Development at Facebook演讲,这里介绍了Flux的起源。首先,我们来学习React,推荐是直接看React 官方文档,然后看看React.js Introduction For People Who Know Just Enough jQuery To Get By 来帮你从jQuery思维转移到React思维。
可以参照译者的React Introduction来获取更多关于React参考资料的东东
在你对React有了基本的了解之后,下面就可以开始学习Flux了,同样的首先推荐官方Flux文档。然后你可以看看Awesome React, 这里包含了很多你可以慢慢咀嚼的内容。
Practicing with Frameworks
又到了实践环节了,现在你已经对于JavaScript框架与架构模式有了基本的了解,是时候带一波节奏了。在这两个实验中,注意体会架构设计的理念,首先要保证 DRY, 然后有一个 清晰的分层概念, 最后要注意 单一职责原则.
Experiment 5
实验5是不用框架重构著名的TodoMVC,换言之,就是用最基础的JavaScript代码来实现一个TodoMVC。本实验的目的就是为了向你展示在没有框架介入的情况下怎么构建一个完整的MVC应用
你可以参考 TodoMVC,第一步就是创建一个新的本地项目然后建立三个基本的组件,你可以参考Github repository这里的完整代码。如果你觉得现在的自己能力还不足以Hold住整个项目,表担心,先把它们下载下来,然后慢慢实践。
Experiment 6
Experiment 6 就是跟着Scotch.io的教程来实现一个下面这样的站点:
Build an Etsy Clone with Angular and Stamplay 会教你怎么基于Angular来构建一个网站,提供APIs并且在一个大型的项目中进行架构组织。学完了这些之后,你要能理解以下这些问题:
啥是web app?
怎么用Angular实践 MVC/MVVM?
API是啥,肿么用?
怎么组织与管理一个大型的CodeBase?
将一个UI切分为声明式组件的好处在哪?
如果这个教程还不够,那还可以看看Build a Real-Time Status Update App with AngularJS & Firebase。
Experiment 7
第7个实验是将React与Flux综合使用,即利用React来构建一个TODOMVC。你可以参考Facebook’s Flux documentation site这个教程,它会教你一步一步地从零开始构建界面然后将Flux应用到整个Web项目中。通过了第一关,就可以移步到 怎么利用React、Redux与Immutable.js构建一个TodoMVC 以及 利用Flux与React构建一个微博客。
Stay current
就像前端一样,JavaScript也永远不会停下前进的步伐。
下面列举了一系列博客,多读读,能够随时了解最新的发展与消息:
Smashing Magazine
JavaScript Weekly
Ng Weekly
Reddit JavaScript
JavaScript Jabber
Learn by example
Styleguides
Codebases
Lodash
Underscore
Babel
Ghost
NodeBB
KeystoneJS
Further Reading
你可能感兴趣的:(前端,javascript,测试)
力扣hot100:15.轮转数组
star-yp
力扣hot100 leetcode 算法 java 日常记录
题目描述第一次:纯暴力复杂度太高:O(N^2),未通过测试classSolution{publicvoidrotate(int[]arr,intk){for(inti=0;i0;j--){arr[j]=arr[j-1];}arr[0]=flag;}}}第二次:反转三次复杂度降低:O(N),通过测试classSolution{publicvoidrotate(int[]arr,intk){if(ar
Ubuntu使用Docker部署Nginx并结合内网穿透实现公网远程访问
鸭鸭渗透
eureka 云原生
目录1.安装Docker2.使用Docker拉取Nginx镜像3.创建并启动Nginx容器4.本地连接测试5.公网远程访问本地Nginx5.1内网穿透工具安装5.2创建远程连接公网地址5.3使用固定公网地址远程访问在开发人员的工作中,公网远程访问内网是其必备的技术需求之一。对于运维人员和开发者来说,能够通过公网远程访问内部的服务和应用,能够极大地提升工作效率和便利性。本文将介绍如何利用Ubuntu
开源瑰宝:全方位深度揭秘“随机数据生成器”
虞亚竹Luna
开源瑰宝:全方位深度揭秘“随机数据生成器”common-random简单易用的随机数据生成器。生成各种比较真实的假数据。一般用于开发和测试阶段的数据填充模拟。支持各类中国特色本地化的数据格式。Aneasy-touserandomdatagenerator.Generallyusedfordatafilling,simulation,demonstrationandotherscenariosint
一篇文章带你了解-selenium工作原理详解
程序员笑笑
软件测试 selenium 测试工具 软件测试 自动化测试 功能测试 程序人生 职场和发展
前言Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7,8,9,10,11),MozillaFirefox,Safari,GoogleChrome,Opera等。主要功能包括:测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能
Selenium工作原理详解
天才测试猿
selenium 测试工具 自动化测试 软件测试 测试用例 python 职场和发展
Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7,8,9,10,11),MozillaFirefox,Safari,GoogleChrome,Opera等。主要功能包括:测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用
.gitlab-ci.yml 配置文件详解
程序媛夏天
Git gitlab ci/cd .gitlab-ci.yml
个人主页:不爱吃糖的程序媛♂️作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀!✨系列专栏:前端面试宝典、JavaScript进阶、vue实战资料领取:前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明:https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht
如何使用YOLOv8在AI-TOD数据集上进行遥感目标检测,从安装依赖项、准备数据集、配置YOLOv8、训练和评估模型以及构建GUI应用程序展示检测
计算机C9硕士_算法工程师
人工智能 YOLO 目标检测 遥感
如何使用YOLOv8在AI-TOD数据集上进行遥感目标检测,从安装依赖项、准备数据集、配置YOLOv8、训练和评估模型以及构建GUI应用程序展示检测文章目录1.安装依赖2.数据准备3.配置YOLOv83.1加载预训练模型或自定义模型4.训练模型5.评估模型6.构建GUI应用程序(可选)以下文字及代码仅供参考。遥感目标检测,AI-TOD数据集aitod,训练集11214张,测试集集14018,验证集
渗透测试-越权测试、sql注入
夜晚打字声
笔记
越权访问简介(BrokenAccessControl,简称BAC):web应用程序中常见漏洞,存在范围广、危害大,被OWASP列为web应用十大安全隐患第二名。该漏洞是指应用在检查授权时存在纰漏,使得攻击者在获得低权限用户账户后,利用一些方式绕过权限检查,访问或者操作其他用户或者更高权限。越权漏洞的成因主要是因为开发人员在对数据进行增、删、改、查询时对客户端请求的数据过分相信而遗漏了权限的判定越权
华为OD机试 - 相对开音节 - 正则表达式(Python/JS/C/C++ 2024 E卷 100分)
哪 吒
华为od 正则表达式 python
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述相对开音节构成的结构为辅音+元音(aeiou)+辅音(r除外)+
华为OD机试 - 数列描述 - 动态规划(Python/JS/C/C++ 2024 B卷 100分)
哪 吒
华为od 动态规划 python
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述有一个数列a[N](N=60),从a[0]开始,每一项都是一个数
华为OD机试 - 输出单向链表中倒数第k个结点 - 双指针(Python/JS/C/C++ 2024 B卷 100分)
哪 吒
华为od 链表 python
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述输入一个单向链表,输出该链表中倒数第k个结点,链表的倒数第1个结
华为OD机试 - 图片整理(Python/JS/C/C++ 2024 B卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述Lily上课时使用字母数字图片教小朋友们学习英语单词,每次都需要
华为OD机试 - 宜居星球改造计划 - 图的多源BFS(Python/JS/C/C++ 2023 B卷 100分)
哪 吒
华为od 宽度优先 python
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述2XXX年,人类通过对火星的大气进行宜居改造分析,使得火星已在理
华为OD机试 - 红黑图(Python/JS/C/C++ 2023 B卷100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述众所周知红黑树是一种平衡树,它最突出的特性就是不能有两个相邻的红
华为OD机试 - DNA序列(Python/JS/C/C++ 2023 B卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述一个DNA序列由A/C/G/T四个字母的排列组合组成。G和C的比
华为OD机试 - 书籍叠放 - 逻辑分析(Python/JS/C/C++ 2024 B卷 200分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述书籍的长、宽都是整数对应(l,w)。如果书A的长宽度都比B长宽大
华为OD机试 - 购买水果最便宜的方案 - 数组(Python/JS/C/C++ 2024 C卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述有m个水果超市在1-n个小时的不同时间段提供不同价格的打折水果,
华为OD机试 - 目录删除 - 深度优先搜索dfs算法(Python/JS/C/C++ 2024 B卷 200分)
哪 吒
算法 华为od 深度优先
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述某文件系统中有N个目录,每个目录都有一个独一无二的ID。每个目录
华为OD机试 - 寻找最富裕的小家庭(Python/JS/C/C++ 2024 D卷 100分)
哪 吒
华为od python javascript
华为OD机试2024E卷题库疯狂收录中,刷题点这里专栏导读本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。一、题目描述在一棵树中,每个节点代表一个家庭成员,节点的数字表示其个人的财富
学习111
麋鹿叔叔
学习
项目名称项目简介主要功能技术原理GitHub地址browser-use智能浏览器工具,让AI像人类一样操作浏览器,实现网页自动化网页浏览与操作、多标签页管理、视觉识别与内容提取、操作记录与重复执行、自定义动作支持、主流LLM模型支持为大语言模型服务的创新Python工具库GitHubEkoFellouAI推出的生产就绪型JavaScript框架,基于自然语言驱动创建智能代理支持所有平台,提供统一便
前端如何实现一个五星评价,鼠标滑动,前边星星颜色的变黄,后边的不变;
修心光
前端
直接上代码.star-rating{display:flex;padding:10px0;}.star{position:relative;width:40px;height:40px;}.half{position:absolute;top:0;width:20px;height:40px;overflow:hidden;font-size:40px;color:#e0e0e0;cursor:p
DeepSeek-R1 API评测深度解析:揭秘7大常见误区
耶耶Norsea
网络杂烩 服务器 网络 运维
摘要随着SiliconCloud等平台推出DeepSeek-R1服务,市场涌现出大量关于API评测的内容。然而,这些评测中存在7个常见误区,如测试方法缺陷和内容质量参差不齐等问题,影响了用户对DeepSeek-R1的准确理解。本文旨在揭示这些问题,帮助用户更全面地了解该服务。关键词DeepSeek-R1,API评测,常见误区,SiliconCloud,内容质量一、一级目录11.1DeepSeek-
前端如何实现鼠标移上这个元素,另外一个元素变色
=^_^=银爪
css 前端 javascript
1、使用CSS选择器和伪类来实现这个效果具体步骤如下:获取要修改样式的元素使用CSS选择器选中要操作的元素,并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如,如果您有一个元素ID为“target”,需要将其颜色更改为红色,当鼠标移到ID为“trigger”的元素上时,可以使用以下代码:#trigger:hover#target{color:red;}这段代码指定
Maven简介
z迦在线
maven java
Maven简介Maven是Apache软件基金会的一个开源项目,是一个优秀的项目构建工具,它用来帮助开发者管理项目中的jar,以及jar之间的依赖关系、完成项目的编译(.java--->.class)、测试、打包(源代码--->.jar文件)和发布等工作。Maven是如何管理项目中的jar文件的?Maven简化了Java项目中的JAR文件管理,主要通过以下几个关键点:POM文件:Maven使用po
个人学习编程(3-21) leetcode刷题
Rsecret2
编程笔记 学习 leetcode 算法
链接列表的中间值:测试用例1:创建链表[1,2,3,4,5],调用middleNode,预期返回值是3。测试用例2:创建链表[1,2,3,4,5,6],调用middleNode,预期返回值是3。判断长度,然后length/2structListNode*middleNode(structListNode*head){intlength=0;for(structListNode*curr=head;
[每周一更]-(第137期):Go + Gin 实战:Docker Compose + Apache 反向代理全流程
ifanatic
每周一更 容器 Go golang gin docker
文章目录**1.Go代码示例(`main.go`)****2.`Dockerfile`多段构建**3.构建Docker镜像**4.`docker-compose.yml`直接拉取镜像****5.运行容器****6.测试API**7、配置域名访问**DNS解析:将域名转换为IP地址****DNS寻址示例**8.错误记录访问路径ip+端口:端口可以了,但是小程序中不支持该格式,还需要配置nginx代理
推荐开源项目:FastAPI Best Architecture — 极致的后端架构设计
蓬玮剑
推荐开源项目:FastAPIBestArchitecture—极致的后端架构设计项目地址:https://gitcode.com/gh_mirrors/fa/fastapi_best_architecture项目简介在寻找一款基于FastAPI构建的强大且灵活的后端解决方案吗?那么,你已经找到了——FastAPIBestArchitecture。这是一个遵循前端与后端分离原则的中间件层解决方案,采
HarmonyOS Next~HarmonyOS应用开发工具之AppGallery Connect
Bruce_xiaowei
总结经验 编程 笔记 harmonyos 华为
HarmonyOS应用开发工具之AppGalleryConnect一、AppGalleryConnect概述1.1定位与核心价值AppGalleryConnect(AGC)是华为面向HarmonyOS开发者打造的全生命周期服务平台,作为HarmonyOS应用开发的核心工具链,提供从开发、测试、上架到运营的全流程支持。其核心价值体现在:服务集成化:聚合40+云端服务能力开发效率提升:平均缩短30%开
在 Spring Boot 结合 MyBatis 的项目中,实现字段脱敏(如手机号、身份证号、银行卡号等敏感信息的部分隐藏)可以通过以下方案实现
冷冷清清中的风风火火
笔记 springboot spring boot mybatis 后端
在SpringBoot结合MyBatis的项目中,实现字段脱敏(如手机号、身份证号、银行卡号等敏感信息的部分隐藏)可以通过以下方案实现。以下是分步说明和完整代码示例:一、实现方案选择1.方案一:自定义注解+Jackson序列化脱敏适用场景:数据返回给前端时动态脱敏,数据库存储原始数据。优点:无侵入性,通过注解灵活控制脱敏字段,与业务逻辑解耦。核心实现:利用Jackson的JsonSerialize
如何使用DeepSeek编写测试用例?
海姐软件测试
deepseek 大数据 测试工具
一、DeepSeek在测试用例设计中的定位DeepSeek作为AI工具,并非直接替代测试设计,而是通过以下方式提升效率:快速生成基础用例框架(等价类、边界值等)智能补充易遗漏场景(如特殊字符、异常流)自动化脚本片段生成(Python/pytest/JUnit等)测试数据构造建议(符合业务规则的Mock数据)二、四步法实战:AI协作编写测试用例Step1:明确需求输入输入质量决定输出质量,需向Dee
312个免费高速HTTP代理IP(能隐藏自己真实IP地址)
yangshangchuan
高速 免费 superword HTTP代理
124.88.67.20:843
190.36.223.93:8080
117.147.221.38:8123
122.228.92.103:3128
183.247.211.159:8123
124.88.67.35:81
112.18.51.167:8123
218.28.96.39:3128
49.94.160.198:3128
183.20
pull解析和json编码
百合不是茶
android pull解析 json
n.json文件:
[{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]
pull.xml文件
<?xml version="1.0" encoding="utf-8"?>
<stu>
<name>java
[能源与矿产]石油与地球生态系统
comsci
能源
按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....
那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
类与对象浅谈
沐刃青蛟
java 基础
类,字面理解,便是同一种事物的总称,比如人类,是对世界上所有人的一个总称。而对象,便是类的具体化,实例化,是一个具体事物,比如张飞这个人,就是人类的一个对象。但要注意的是:张飞这个人是对象,而不是张飞,张飞只是他这个人的名字,是他的属性而已。而一个类中包含了属性和方法这两兄弟,他们分别用来描述对象的行为和性质(感觉应该是
新站开始被收录后,我们应该做什么?
IT独行者
PHP seo
新站开始被收录后,我们应该做什么?
百度终于开始收录自己的网站了,作为站长,你是不是觉得那一刻很有成就感呢,同时,你是不是又很茫然,不知道下一步该做什么了?至少我当初就是这样,在这里和大家一份分享一下新站收录后,我们要做哪些工作。
至于如何让百度快速收录自己的网站,可以参考我之前的帖子《新站让百
oracle 连接碰到的问题
文强chu
oracle
Unable to find a java Virtual Machine--安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案
作者:草根IT网 来源:未知 人气:813标签:
导读:安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径,找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
Swing中按ctrl键同时移动鼠标拖动组件(类中多借口共享同一数据)
小桔子
java 继承 swing 接口 监听
都知道java中类只能单继承,但可以实现多个接口,但我发现实现多个接口之后,多个接口却不能共享同一个数据,应用开发中想实现:当用户按着ctrl键时,可以用鼠标点击拖动组件,比如说文本框。
编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口,重写方法。定义一个全局变量boolea
linux常用的命令
aichenglong
linux 常用命令
1 startx切换到图形化界面
2 man命令:查看帮助信息
man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分
name:对命令的简单说明
synopsis:命令的使用格式说明
description:命令的详细说明信息
options:命令的各项说明
3 date:显示时间
语法:date [OPTION]... [+FORMAT]
eclipse内存优化
AILIKES
java eclipse jvm jdk
一 基本说明 在JVM中,总体上分2块内存区,默认空余堆内存小于 40%时,JVM就会增大堆直到-Xmx的最大限制;空余堆内存大于70%时,JVM会减少堆直到-Xms的最小限制。 1)堆内存(Heap memory):堆是运行时数据区域,所有类实例和数组的内存均从此处分配,是Java代码可及的内存,是留给开发人
关键字的使用探讨
百合不是茶
关键字
//关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final 类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖,但可以继承 final 变量 只能有一次赋值,赋值后不能改变 final 不能用来修饰构造方法*///this()
JS中定义对象的几种方式
bijian1013
js
1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象):
<html>
<head>
<title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title>
</head>
<script>
var obj = new Object();
表驱动法实例
bijian1013
java 表驱动法 TDD
获得月的天数是典型的直接访问驱动表方式的实例,下面我们来展示一下:
MonthDaysTest.java
package com.study.test;
import org.junit.Assert;
import org.junit.Test;
import com.study.MonthDays;
public class MonthDaysTest {
@T
LInux启停重启常用服务器的脚本
bit1129
linux
启动,停止和重启常用服务器的Bash脚本,对于每个服务器,需要根据实际的安装路径做相应的修改
#! /bin/bash
Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo);
Ops=(Start, Stop, Restart);
currentDir=$(pwd);
echo
【HBase六】REST操作HBase
bit1129
hbase
HBase提供了REST风格的服务方便查看HBase集群的信息,以及执行增删改查操作
1. 启动和停止HBase REST 服务 1.1 启动REST服务
前台启动(默认端口号8080)
[hadoop@hadoop bin]$ ./hbase rest start
后台启动
hbase-daemon.sh start rest
启动时指定
大话zabbix 3.0设计假设
ronin47
What’s new in Zabbix 2.0?
去年开始使用Zabbix的时候,是1.8.X的版本,今年Zabbix已经跨入了2.0的时代。看了2.0的release notes,和performance相关的有下面几个:
:: Performance improvements::Trigger related da
http错误码大全
byalias
http协议 javaweb
响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行。
响应码分五种类型,由它们的第一位数字表示:
1)1xx:信息,请求收到,继续处理
2)2xx:成功,行为被成功地接受、理解和采纳
3)3xx:重定向,为了完成请求,必须进一步执行的动作
4)4xx:客户端错误,请求包含语法错误或者请求无法实现
5)5xx:服务器错误,服务器不能实现一种明显无效的请求
J2EE设计模式-Intercepting Filter
bylijinnan
java 设计模式 数据结构
Intercepting Filter类似于职责链模式
有两种实现
其中一种是Filter之间没有联系,全部Filter都存放在FilterChain中,由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下:
package com.ljn.filter.custom;
import java.util.ArrayList;
修改jboss端口
chicony
jboss
修改jboss端口
%JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml
中找到
<!-- The ports-default bindings are obtained by taking the base bindin
c++ 用类模版实现数组类
CrazyMizzz
C++
最近c++学到数组类,写了代码将他实现,基本具有vector类的功能
#include<iostream>
#include<string>
#include<cassert>
using namespace std;
template<class T>
class Array
{
public:
//构造函数
hadoop dfs.datanode.du.reserved 预留空间配置方法
daizj
hadoop 预留空间
对于datanode配置预留空间的方法 为:在hdfs-site.xml添加如下配置
<property>
<name>dfs.datanode.du.reserved</name>
<value>10737418240</value>
 
mysql远程访问的设置
dcj3sjt126com
mysql 防火墙
第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况,my.cnf放置于在以下目录: /etc/mysql/my.cnf (Debian linux) /etc/my.cnf (Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf,修改内容从以下行: [mysqld] 你所需要: 1
ios 使用特定的popToViewController返回到相应的Controller
dcj3sjt126com
controller
1、取navigationCtroller中的Controllers
NSArray * ctrlArray = self.navigationController.viewControllers;
2、取出后,执行,
[self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
Linux正则表达式和通配符的区别
eksliang
正则表达式 通配符和正则表达式的区别 通配符
转载请出自出处:http://eksliang.iteye.com/blog/1976579
首先得明白二者是截然不同的
通配符只能用在shell命令中,用来处理字符串的的匹配。
判断一个命令是否为bash shell(linux 默认的shell)的内置命令
type -t commad
返回结果含义
file 表示为外部命令
alias 表示该
Ubuntu Mysql Install and CONF
gengzg
Install
http://www.navicat.com.cn/download/navicat-for-mysql
Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html
Step2:进入下载目录,解压压缩包:tar -zxvf navicat11_mysql_en.tar.gz
批处理,删除文件bat
huqiji
windows dos
@echo off
::演示:删除指定路径下指定天数之前(以文件名中包含的日期字符串为准)的文件。
::如果演示结果无误,把del前面的echo去掉,即可实现真正删除。
::本例假设文件名中包含的日期字符串(比如:bak-2009-12-25.log)
rem 指定待删除文件的存放路径
set SrcDir=C:/Test/BatHome
rem 指定天数
set DaysAgo=1
跨浏览器兼容的HTML5视频音频播放器
天梯梦
html5
HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 How to enable <video> and <audio> tags in
Bundle自定义数据传递
hm4123660
android Serializable 自定义数据传递 Bundle Parcelable
我们都知道Bundle可能过put****()方法添加各种基本类型的数据,Intent也可以通过putExtras(Bundle)将数据添加进去,然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity
把数据放到Intent
C#:异步编程和线程的使用(.NET 4.5 )
powertoolsteam
.net 线程 C# 异步编程
异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程,可使用线程也可以不用。将异步与线程同时讲,将有助于我们更好的理解它们的特征。
本文中涉及关键知识点
1. 异步编程
2. 线程的使用
3. 基于任务的异步模式
4. 并行编程
5. 总结
异步编程
什么是异步操作?异步操作是指某些操作能够独立运行,不依赖主流程或主其他处理流程。通常情况下,C#程序
spark 查看 job history 日志
Stark_Summer
日志 spark history job
SPARK_HOME/conf 下:
spark-defaults.conf 增加如下内容
spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true
spark-env.sh 增加如下内容
export SP
SSH框架搭建
wangxiukai2015eye
spring Hibernate struts
MyEclipse搭建SSH框架 Struts Spring Hibernate
1、new一个web project。
2、右键项目,为项目添加Struts支持。
选择Struts2 Core Libraries -<MyEclipes-Library>
点击Finish。src目录下多了struts