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

JavaScript 学习

news 2025/11/13 2:50:02

一、输出

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

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/12 15:12:42

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/11/11 17:15:08

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/11/10 18:35:01

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/11/12 6:42:27

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/9/12 8:21:45

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/11/12 15:22:23

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/11/12 20:42:44

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56