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

JavaScript 学习

news 2026/5/17 2:18:54

一、输出

为方便调试可以输出内容，但是用户是看不到的。要在开发者模式中看。

console . log ( "Hello" )；

二、外部文件引用

可以直接在html中写JS

<head>

console.log("hello")

</script>

</head>

也可以外部引用，先写一个JS文件，然后加载到html中。

三、变量

命名规则：

名称可包含字母、数字、下划线（_）和美元符号（$），不以数字开头
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

声明：

用var。声明之后，变量是没有值的。（技术上，它的值是 undefined。）

赋值：

var carName;

carName = "porsche";

var carName = "porsche";

var person = "Bill Gates", carName = "porsche", price = 15000;

这些方式都可以。

作用范围：

局部变量，在函数内声明，只能在函数内使用。

// 此处的代码不能使用 carName

function myFunction() {

var carName = "Volvo";

// 此处的代码可以使用 carName

}

// 此处的代码不能使用 carName

全局变量，在函数外声明，全局访问。

PS：和java不一样，js没有代码块概念。

if(b){

var num=10;

}

console.log(num);

在java中，这样是不行的，在js中，可以。num是全局变量。

四、数据类型

1.number类型：

1/0在java中会出错，这边表示负无穷大。

NaN就字符串转换数字的时候出错了，转不了。

转换：

可以将数字字符串转换Number类型，比较严谨不想parseFloat，“11a”也会转成11

var n = Number("123")；

也可以用parseInt和parseFloat，功能比较全。都会输出123

console.log(parseInt("123"));

console.log(parseInt("123agsdg"));

console.log(parseInt("123aaaa456"));

console.log(parseInt(" 123 "));

2.boolean类型：

就是true和false比较简单。

转换：

当value为0、-0、null、""、false、undefined、NaN时，那么Boolean()转换成Boolean类型的值为false，其他都是true。

var b = Boolean(0)；

3.undefined类型：

声明了变量，但是没用赋值就是这个值。

4.string类型：

不区分单引号和双引号，都是字符串。

转换：

可以把这些转成string

var s1 = String(11);

var s2 = String(true);

var s3 = String(undefined);

var s4 = String(null);

var s5 = String(NaN);

5.null类型：

好比java中，声明了对象，没创建对象。

但是JS中，输出null的时候会是object类型。

五、运算符

1.算术运算符（+ - * / % ++ --）

/ 除法，有余数和java不一样

%取余数

++ -- 自增自减

单独使用在前在后没区别

组合使用，在前先自增，再将自增结果带入运算；在后先把原来值带入运输，再自增。

var num = 1;

var num2 = ++num;

console.log(num);

console.log(num2);

都是2

var num = 1;

var num2 = num++;

console.log(num);

console.log(num2);

num为2，num2为1

2.赋值运算符（= += *= /= %=）

3.条件运算符（=== == > < >= <= !=）

4.字符串运算符（+ +=）

5.逻辑运算符（&& || !）

6.三元运算符（表达式1？表达式2：表达式3）

六、条件/循环语句

和Java差不多

七、函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数

由函数执行的代码被放置在花括号中：{}

var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x

function myFunction(a, b) {

return a * b; // 函数返回 a 和 b 的乘积

}

八、常用内置对象

可以去这查看 JavaScript 教程

关键是如何去查看文档，学习对象和方法。

1.字符串对象 JavaScript String 参考手册

用“”，‘’就可以创建字符串对象。如果字符串中要输出“，‘，\，要用\来转义。

常用方法：

charAt() 返回指定位置处的字符。

indexOf() 返回值在字符串中第一次出现的位置。

2.数组

创建

常见操作

3.Math对象

主要是数学相关

4.日期对象

JavaScript Date 参考手册

5.正则对象

匹配字符串个数为6-12的字符串。

九、对话框

警告（window可以省略）

window.alert("这是警告");

询问

var key = prompt("请输入密码");

console.log(key);

确认

var flag = confirm("确认登陆吗？");

if(flag){

console.log("确认登陆");

}else{

console.log("取消登陆");

}

十、定时器

每2s执行一次，10s后执行一次（之后不执行）

十一、自定义对象

用new关键字创建

var obj = new Object();

obj.name = "Mike";

obj.fun = function (age) {

console.log("Hello " + this.name + age);

}

//使用对象

console.log(obj.name);

obj.fun(1);

字面量创建

var obj = {

name: "Mike",

fun: function (age) {

console.log("Hello " + this.name + age);

}

//使用对象

console.log(obj.name);

obj.fun(1);

构造方法创建对象

十二、DOM操作

把文档加载进去，然后把每个部分封装成对象，我们可以操作这些对象，实现动态的改变整个页面。

1.Document对象

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

查找HTML元素：

getElementById

根据id属性获取，返回单个Element对象
getElementsByTagName

根据标签名获取，返回Element对象数组
getElementsByClassName

根据class属性获取，返回Element对象数组
getElementsByName

根据name属性获取，返回Element对象数组

<body>

<p id="intro">Hello World!</p>

<p>此示例演示了 <b>getElementsById</b> 方法。</p>

var myElement = document.getElementById("intro");

document.getElementById("demo").innerHTML =

"介绍段落的文字是" + myElement.innerHTML;

</script>

</body>

改变HTML元素：

属性	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加删除元素：

document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件：

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

2.Element对象

3.插入删除节点

插入

删除 - 父删子，不能自己删自己

4.DOM表单操作

<div>

姓名：<input type="text" name="username" id="username"><br>

女<input type="radio" name="sex" value="female" id="female" checked="true">男<input type="radio" name="sex" value="male"

id="male"><br>

故乡：<select name="city" id="city">

</select><br>

</form>

</div>

</body>

// 获取/设置表单的value信息

var username = document.getElementById("username");

username.value = "张三";

console.log(username.value);

//获取单选框选择状态，或设置选择状态

var sexObj = document.getElementsByName("sex")

for (var i = 0; i < sexObj.length; i++) {

console.log(sexObj[i].value + " " + sexObj[i].checked);

}

//设置下拉框

var select = document.getElementById("city");

select.selectedIndex = 2;

//设置禁用

var sex = document.getElementById("male");

sex.disabled = true;

5.常见DOM事件

单击事件

var btn = document.getElementById("btn");

btn.onclick = function(){

var ele = document.getElementById("h1");

ele.style.color="red";

}

焦点事件

<div>

用户名：<input type="text" id="username"><span id="info"></span>

</div>

var userEle = document.getElementById("username");

var info = document.getElementById("info");

//获得焦点

userEle.onfocus = function () {

info.innerHTML = "请输入6-8位"

}

//失去焦点

userEle.onblur = function () {

var reg = /^\w{6,8}$/;

var result = reg.test(userEle.value)

if (result) {

info.innerHTML = "验证成功"

} else {

info.innerHTML = "验证失败"

}

改变事件

</select>

var city = document.getElementById("city");

city.onchange = function () {

console.log(this.value);

}

鼠标移入移出事件

<head>

<style>

.red {

background-color: red;

}

.blue {

background-color: blue;

}

</style>

</head>

<body>

<div id="test" class="red">Hello World</div>

</body>

var ele = document.getElementById("test");

//移入

ele.onmouseover = function () {

ele.setAttribute("class", "blue");

}

//移出

ele.onmouseout = function () {

ele.setAttribute("class", "red");

}

页面加载事件

<head>

window.onload = function(){

//正常是无法拿到，因为在元素没加载完成，但是在这可以

var ele = document.getElementById("test");

console.log(ele);

console.log("页面加载完成");

}

</script>

</head>

<body>

<div id="test">Hello World</div>

</body>

表单事件

<body>

</form>

<button id="submit">submit</button>

<button id="reset">resest</button>

</body>

var form = document.getElementById("form");

var submit = document.getElementById("submit");

var reset = document.getElementById("reset");

submit.onclick = function () {

form.submit();

}

reset.onclick = function () {

form.reset();

}

6.BOM常用对象

Window

Location

History

history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮

十三、原型

原型

有时，您希望向所有给定类型的已有对象添加新属性（或方法）。

有时，您希望向对象构造器添加新属性（或方法）。

function Person(first, last, age, eyecolor) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.eyeColor = eyecolor;}

Person.prototype.nationality = "English";

function Person(first, last, age, eyecolor) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.eyeColor = eyecolor;}

Person.prototype.name = function() {

return this.firstName + " " + this.lastName;};

十四、JS版本

JS2015（es6）

const

const 语句允许您声明常量（具有常量值的 JavaScript 变量）。

常量类似于 let 变量，但不能更改值。

JavaScript 学习

一、输出为方便调试可以输出内容，但是用户是看不到的。要在开发者模式中看。 console . log ( "Hello" )； 二、外部文件引用可以直接在html中写JS <head> <meta charset"utf-8"> <script> console.log("he…...

编程日记 2024/9/27 4:40:23

【算法】分治：归并之 912.排序数组（medium)

系列专栏双指针模拟算法分治思想目录 1、题目链接 2、题目介绍 3、解法解决方案选择解题步骤 4、代码 1、题目链接 912. 排序数组 - 力扣（LeetCode） 2、题目介绍给你一个整数数组 nums，请你将该数组升序排列。你必须在 …...

编程日记 2024/9/27 4:39:22

Cocos 3.8.3 实现外描边效果（逃课玩法）

本来想着用Cocos 的Shader Graph照搬Unity的思路来加外描边，发现不行，然后我就想弄两个物体不就行了吗，一个是放大的版本，再放大的版本上加一个材质，这个材质面剔除选择前面的面剔除就行了，果不其然还真行。…...

编程日记 2024/9/27 4:38:21

著名建筑物检测与识别系统源码分享

著名建筑物检测与识别检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comp…...

编程日记 2024/9/27 4:37:20

使用php生成图片

可以用这方法生成图片水印字体可以在资源绑定下载，如果字体路径不对，则不会输出文字图片 public function generateImage($text,$id) { header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:0…...

编程日记 2024/9/27 4:36:19

C++ 数据类型分类

在C中，数据类型可以大致分为内置类型（Built-in Types）、标准库类型（Standard Library Types）和自定义类型（User-Defined Types）三大类。内置类型（Built-in Types） 内置…...

编程日记 2024/9/27 4:35:18

背景，已经安装成功，但是环境还是java1.8 java -version openjdk version "11.0.23" 2024-04-16 LTS OpenJDK Runtime Environment (Red_Hat-11.0.23.0.9-2.el7_9) (build 11.0.23+9-LTS) OpenJDK 64-Bit Server VM (Red_Hat-11.0.23.0.9-2.el7_9) (build 11.0.…...

编程日记 2024/9/27 4:30:10

Java.动态代理

1.创建一个接口 package Mydynamicproxy1;public interface Star {public abstract String sing(String str);public abstract void dance(String str); }2.创建一个BigStar类，要实现Star这个接口 package Mydynamicproxy1;public class BigStar implements Star{…...

编程日记 2024/9/27 4:28:06

SpringBoot自定义异常

前言在前后端开发中，后端接口返回的数据都是JSON格式的，但是后端可能会出现一些可以未知从异常，在后端抛出这些异常的时候，也需要返回相同格式的JSON数据，这时候就需要我们设置全局异常处理器。在后端开发中&#xf…...

编程日记 2024/9/27 4:27:06

华为源NAT技术与目的NAT技术

1）源NAT对报文源地址进行转换，分为NAT NO-PAT，NAPT,EASY-IP,三元组NAT； （1）NAT NO-PAT原理： no-port address translation:非端口地址转换：只转换地址，不转换端口&…...

编程日记 2024/9/27 4:23:02

人工智能与机器学习原理精解【25】

文章目录正则化概述一、正则化的种类二、正则化的定义三、正则化的计算四、正则化的性质五、正则化的例子公式与计算一、正则化的种类Dropout正则化一、基本思想二、实现方法三、作用机制四、使用注意事项五、总结Dropout正则化的例子和公式。一、Dropout正则化的例子二、Dro…...

编程日记 2024/9/27 4:19:58

一篇文章讲清楚synchronized关键字的作用及原理

概述在应用Sychronized关键字时需要把握如下注意点： 一把锁只能同时被一个线程获取，没有获得锁的线程只能等待； 每个实例都对应有自己的一把锁(this),不同实例之间互不影响；例外：锁对象是*.class以及synchronized修…...

编程日记 2024/9/27 4:18:57

深度学习模型之BERT的24个小模型源码与预训练紧凑模型的重要性

原始信息论文： Well-Read Students Learn Better: On the Importance of Pre-training Compact Models作者：Iulia Turc, Ming-Wei Chang, Kenton Lee, Kristina Toutanova地址：arxiv.org/pdf/1908.08…中文：阅读良好的学生学得更…...

编程日记 2024/9/27 4:17:55

【HarmonyOS】深入理解@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

【HarmonyOS】深入理解Observed装饰器和ObjectLink装饰器：嵌套类对象属性变化前言之前就Observed和ObjectLink写过一篇讲解博客【HarmonyOS】多层嵌套对象通过ObjectLink和Observed实现渲染更新处理！ 其中就Observe监听类的使用，Object…...

编程日记 2024/9/27 4:16:54

Java笔试面试题AI答之设计模式（1）

文章目录 1. 简述什么是设计模式 ？2. 叙述常见Java设计模式分类 ？3. Java 设计模式的六大原则 ？4. 简述对 MVC 的理解， MVC 有什么优缺点？MVC 的三个核心部分：MVC 的优点：MVC 的缺点&#xff1a…...

编程日记 2024/9/27 4:14:50

java调用opencv部署到centos7

1、官网下载opencv https://opencv.org/releases/ 2、下载opencv并解压 unzip opencv-3.4.7.zip cd opencv-3.4.7 mkdir build cd build/ 3、安装cmake yum remove cmake -y ; yum install -y gcc gcc-c make automake openssl openssl-devel wget https://cmake.org/files/…...

编程日记 2024/9/27 4:12:48

【python qdrant 向量数据库完整示例代码】

测试一下python版本的dqrant向量数据库的效果，完整代码如下： 安装库 !pip install qdrant-client>1.1.1 !pip install -U sentence-transformers导入 from qdrant_client import models, QdrantClient from sentence_transformers import SentenceT…...

编程日记 2024/9/27 4:11:47

初识C语言(三)

感兴趣的朋友们可以留个关注，我们共同交流，相互促进学习。文章目录前言八、函数九、数组 （1）数组的定义 （2）数组的下标和使用十、操作符 （1）算数操作符 （2&#xff…...

编程日记 2024/9/27 4:10:46

用通义灵码如何快速合理解决遗留代码问题？

本文首先介绍了遗留代码的概念，并对遗留代码进行了分类。针对不同类型的遗留代码，提供了相应的处理策略。此外，本文重点介绍了通义灵码在维护遗留代码过程中能提供哪些支持。什么是遗留代码与过时技术相关的代码： 与不再受支持的…...

编程日记 2024/9/27 4:09:45

新书推荐——《Python贝叶斯深度学习》

在过去的十年中，机器学习领域取得了长足的进步，并因此激发了公众的想象力。但我们必须记住，尽管这些算法令人印象深刻，但它们并非完美无缺。本书旨在通过平实的语言介绍如何在深度学习中利用贝叶斯推理，帮助读者掌握开…...

编程日记 2024/9/27 4:07:42

学生综合素质评价系统设计实现【附程序】

✨ 长期致力于综合素质评价、AHP层次分析、BP神经网络、遗传算法研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）三层指标体系构建与AHP动态权重分配&…...

编程新知 2026/5/17 0:52:18

嵌入式核心板小型化设计：从邮票孔到板对板连接器的技术演进与应用

1. 项目概述：当“小”成为一种刚需在嵌入式硬件开发领域，我们常常面临一个经典的权衡：性能、成本与体积。过去，为了追求极致的稳定性和丰富的接口，核心板往往做得比较大，通过邮票孔或高密度连接器与底板固定…...

编程新知 2026/5/16 23:28:32

GPU Burn压力测试实战指南：企业级GPU稳定性验证解决方案

GPU Burn压力测试实战指南：企业级GPU稳定性验证解决方案【免费下载链接】gpu-burn Multi-GPU CUDA stress test 项目地址: https://gitcode.com/gh_mirrors/gp/gpu-burn 在当今高性能计算和人工智能应用日益普及的背景下，GPU稳定性已成为企业数据…...

编程新知 2026/5/16 22:26:35

从布列松决定性瞬间到AI生成：Midjourney黑白摄影风格构建方法论（附可复用的5层Prompt结构模板）

更多请点击： https://intelliparadigm.com 第一章：从布列松决定性瞬间到AI生成的范式迁移亨利卡蒂埃-布列松提出的“决定性瞬间”强调在精确的时间、空间与形式三重统一中捕捉不可复制的真实。这一美学范式统治摄影近百年，其内核是人类对意…...

编程新知 2026/5/16 20:58:07

GHelper终极指南：如何用3个步骤彻底释放华硕笔记本性能潜能

GHelper终极指南：如何用3个步骤彻底释放华硕笔记本性能潜能【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenboo…...

编程新知 2026/5/16 18:42:48

如何快速上手专业3D点云标注工具：完整入门指南

如何快速上手专业3D点云标注工具：完整入门指南【免费下载链接】labelCloud A lightweight tool for labeling 3D bounding boxes in point clouds. 项目地址: https://gitcode.com/gh_mirrors/la/labelCloud 在自动驾驶、机器人视觉和三维重建等领域&#x…...

编程新知 2026/5/16 18:13:47

GitHub中文界面极速解锁指南：5分钟告别英文困扰的终极方案

GitHub中文界面极速解锁指南：5分钟告别英文困扰的终极方案【免费下载链接】github-chinese GitHub 汉化插件，GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 你是否曾经面对…...

编程新知 2026/5/16 17:16:23