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

JavaScript 学习

news 2026/2/7 12:28:05

一、输出

为方便调试可以输出内容，但是用户是看不到的。要在开发者模式中看。
console . log ( "Hello" )；

二、外部文件引用

可以直接在html中写JS
    <head>
        <meta charset="utf-8">
        <script>
            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>
<h2>通过 Id 查找 HTML 元素</h2>
<p id="intro">Hello World!</p>
<p>此示例演示了 <b>getElementsById</b> 方法。</p>
<p id="demo"></p>
<script>
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>
        <form action="#" method="get">
            姓名：<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">
                <option value="1" id="shanghai">上海</option>
                <option value="2" id="beijing">北京</option>
                <option value="3" id="suzhou">苏州</option>
                <option value="4" id="guangzhou">广州</option>
            </select><br>
            <input type="submit">
        </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 name="city" id="city">
        <option value="suzhou">苏州</option>
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
    </select>
var city = document.getElementById("city");
city.onchange = function () {
    console.log(this.value);
}
  • 鼠标移入移出事件
<head>
    <meta charset="utf-8">
    <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>
    <meta charset="utf-8">
    <script>
        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 action="#" id="form">
        <input type="text" name="user" id="user" placeholder="Please enter user name...">
        <input type="text" name="password" id="password" placeholder="Please enter password...">
    </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）
  • let
  • const
const 语句允许您声明常量（具有常量值的 JavaScript 变量）。
常量类似于 let 变量，但不能更改值。

相关文章：

JavaScript 学习

一、输出 为方便调试可以输出内容&#xff0c;但是用户是看不到的。要在开发者模式中看。 console . log ( "Hello" )&#xff1b; 二、外部文件引用 可以直接在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. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 2、题目介绍 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 你必须在 …...

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

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

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

编程日记 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生成图片

可以用这方法生成图片 水印 字体可以在资源绑定下载&#xff0c;如果字体路径不对&#xff0c;则不会输出文字图片 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中&#xff0c;数据类型可以大致分为内置类型&#xff08;Built-in Types&#xff09;、标准库类型&#xff08;Standard Library Types&#xff09;和自定义类型&#xff08;User-Defined Types&#xff09;三大类。 内置类型&#xff08;Built-in Types&#xff09; 内置…...

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

java安装更新jdk11后设置环境JAVA_HOME

背景，已经安装成功，但是环境还是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类&#xff0c;要实现Star这个接口 package Mydynamicproxy1;public class BigStar implements Star{…...

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

SpringBoot自定义异常

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

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

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

1&#xff09;源NAT对报文源地址进行转换&#xff0c;分为NAT NO-PAT&#xff0c;NAPT,EASY-IP,三元组NAT&#xff1b; &#xff08;1&#xff09;NAT NO-PAT原理&#xff1a; no-port address translation:非端口地址转换&#xff1a;只转换地址&#xff0c;不转换端口&…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文章目录 1. 简述什么是设计模式 &#xff1f;2. 叙述常见Java设计模式分类 &#xff1f;3. Java 设计模式的六大原则 &#xff1f;4. 简述对 MVC 的理解&#xff0c; MVC 有什么优缺点&#xff1f;MVC 的三个核心部分&#xff1a;MVC 的优点&#xff1a;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向量数据库的效果&#xff0c;完整代码如下&#xff1a; 安装库 !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语言(三)

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

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

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

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

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

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

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

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

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2026/2/5 5:24:23

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2026/2/1 18:11:41

深度解析云存储：概念、架构与应用实践

在数据爆炸式增长的时代&#xff0c;传统本地存储因容量限制、管理复杂等问题&#xff0c;已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性&#xff0c;成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理&#xff0c;云存储正重塑数据存储与…...

编程新知 2025/10/30 6:08:18

Ray框架：分布式AI训练与调参实践

Ray框架&#xff1a;分布式AI训练与调参实践 系统化学习人工智能网站&#xff08;收藏&#xff09;&#xff1a;https://www.captainbed.cn/flu 文章目录 Ray框架&#xff1a;分布式AI训练与调参实践摘要引言框架架构解析1. 核心组件设计2. 关键技术实现2.1 动态资源调度2.2 …...

编程新知 2026/2/6 0:58:36