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

JavaScript 学习

news 2026/3/28 0:03:39

一、输出

为方便调试可以输出内容，但是用户是看不到的。要在开发者模式中看。
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

MCP项目笔记六（PluginsLoader）

C 插件加载器&#xff1a;从目录扫描、动态库加载、实例创建&#xff0c;到安全卸载的设计思路与实现细节。一、整体架构概览 这段代码实现了一个完整的运行时插件系统&#xff08;Runtime Plugin System&#xff09;。所谓插件系统&#xff0c;就是让主程序在编译完成后&#…...

编程新知 2026/3/27 23:50:55

uniApp离线打包实战避坑指南

1. 离线打包前的环境准备 第一次接触uniApp离线打包时&#xff0c;我踩过的第一个坑就是环境配置。当时以为只要安装了Android Studio就能万事大吉&#xff0c;结果编译时各种报错接踵而至。后来才发现&#xff0c;离线打包对开发环境的版本匹配要求极为严格&#xff0c;差一个…...

编程新知 2026/3/27 21:48:00

OpenClaw备份方案：GLM-4.7-Flash自动化任务容灾保护

OpenClaw备份方案&#xff1a;GLM-4.7-Flash自动化任务容灾保护 1. 为什么需要备份OpenClaw自动化任务 去年冬天&#xff0c;我的硬盘突然崩溃&#xff0c;导致辛苦配置的OpenClaw自动化任务全部丢失。那一刻我才意识到&#xff0c;当AI助手成为日常工作的"数字员工&quo…...

编程新知 2026/3/27 21:21:48

python基于微信小程序的旅游攻略分享平台

目录需求分析与功能规划技术架构设计数据库设计接口开发小程序前端开发部署与测试运营与迭代注意事项项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与功能规划 明确平台核心功能&#xff1a;用户注册登录、攻略发布与…...

编程新知 2026/3/27 20:45:38

Realtek RTL8125 2.5GbE网卡驱动安装与优化全指南：从识别到调优的完整解决方案

Realtek RTL8125 2.5GbE网卡驱动安装与优化全指南&#xff1a;从识别到调优的完整解决方案 【免费下载链接】realtek-r8125-dkms A DKMS package for easy use of Realtek r8125 driver, which supports 2.5 GbE. 项目地址: https://gitcode.com/gh_mirrors/re/realtek-r8125…...

编程新知 2026/3/27 20:25:32

7大应用场景：如何用计算机视觉技术彻底改变足球比赛分析？

7大应用场景&#xff1a;如何用计算机视觉技术彻底改变足球比赛分析&#xff1f; 【免费下载链接】sports computer vision and sports 项目地址: https://gitcode.com/gh_mirrors/sp/sports 在当今数字化体育时代&#xff0c;足球场精准定位技术正以前所未有的方式改变…...

编程新知 2026/3/27 19:59:04

解锁论文写作新姿势：书匠策AI，你的毕业论文“智囊团”！

在学术的浩瀚海洋中&#xff0c;毕业论文无疑是一座巍峨的灯塔&#xff0c;它不仅是对我们多年学习成果的总结&#xff0c;更是通往未来职业道路的一块重要敲门砖。然而&#xff0c;面对堆积如山的资料、错综复杂的逻辑框架&#xff0c;以及那令人头疼的格式要求&#xff0c;不…...

编程新知 2026/3/27 18:44:37

OpenClaw任务编排：GLM-4.7-Flash多步骤自动化设计

OpenClaw任务编排&#xff1a;GLM-4.7-Flash多步骤自动化设计 1. 为什么需要任务编排 上周我需要整理一批技术文档&#xff0c;这个任务包含多个步骤&#xff1a;从不同文件夹收集Markdown文件、统一格式、生成摘要、最后打包发送给团队成员。手动操作不仅耗时&#xff0c;还…...

编程新知 2026/3/27 18:28:32

AutoUnipus：重新定义U校园学习效率的智能解决方案

AutoUnipus&#xff1a;重新定义U校园学习效率的智能解决方案 【免费下载链接】AutoUnipus U校园脚本,支持全自动答题,百分百正确 2024最新版 项目地址: https://gitcode.com/gh_mirrors/au/AutoUnipus 还在为U校园平台上堆积如山的网课任务而焦虑吗&#xff1f;每天花费…...

编程新知 2026/3/27 18:08:09

22：L应用区块链+AI：蓝队的分布式安全

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-19 主要来源平台&#xff1a; GitHub 摘要&#xff1a; 区块链的不可篡改特性与AI的智能分析能力相结合&#xff0c;为蓝队防御带来了新的可能性。L深入研究区块链AI的融合应用&#xff0c;构建了一个分布式、透明、…...

编程新知 2026/3/27 17:52:04