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

JavaScript 学习

news 2025/7/7 17:20:45

一、输出

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/7/7 0:30:36

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/7/7 1:17:02

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/7/7 0:39:27

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/7/7 14:33:26

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/7/6 23:59:47

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/6/26 4:10:00

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/7/5 14:21:47

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/6/17 5:04:55

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/7/4 12:14:45