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

JS基本语法

news 2025/7/7 15:59:42

JS代码写在body结束标签的上面

如点击按钮调用方法：

在浏览器的控制台打印测试数据 console.log()

<body><button type="button" onclick="easymethod()">点击我</button><script>//JS代码，写在body标签的上面function easymethod(){//在浏览器的控制台打印测试数据console.log("this is easymethod");//打印}</script></body>

在浏览器中右键点检查，查看控制台输出

声明变量

JavaScript是一种弱类型语言。这意味着在JavaScript中，变量的数据类型可以随时改变，不需要事先声明或指定。可以在同一个变量中存储不同类型的数据，而不会引发错误。这使得JavaScript非常灵活，但也可能导致一些类型相关的错误。

let关键字用于声明一个局部变量，作用域限制在当前的代码块内。使用let声明的变量可以被重新赋值，也可以在相同作用域内重新声明。
const关键字用于声明一个常量，表示其值是不可变的。一旦被赋值后，不能再重新赋值。const声明的变量必须在声明时进行初始化。
var关键字用于声明一个变量，其作用域可以是全局的或函数内部的。使用var声明的变量可以被重新赋值，也可以在相同作用域内重新声明。

                //弱类型语言:变量可以指向任意类型的对象//局部变量let obj={};//大括号就是一个对象//常量const username="张三";var sex="男";

对象操作

给对象添加属性和方法，直接在点后面跟上即可：

                obj.name="李四";obj.study=function(){}obj["sex"]="男";var proName="sex";obj[proName]="nv";

删除属性 delete

				//删除属性delete obj.sex;

方法调用

			//程序运行阶段赋值的函数只有在后面才能调用var method=function(a,b){//只需要声明传入几个形参，跟实参的个数没有关系if(a){console.log(true);}else{console.log(false);}console.log(a+"-----");console.log(b+"-----");console.log(arguments);//当做传入实参的数值，可变参数}

在 JavaScript 中，函数可以赋值给变量，并且可以作为参数传递和返回值。在这段代码中，函数赋值给了 method 变量。

在这个函数中，形参数量是 (a, b)，但是实际传入的参数数量可以是任意个数。在函数体内，可以通过 arguments 对象来访问传入的所有实参。arguments 对象是一个类数组对象，包含了调用函数时传入的所有实参。

判断类型

typeof 返回这个变量的类型名称：字符串类型 string小写、数字类型 number

            var str="123";console.log(typeof str);//typeof obj返回这个变量的类型名称小写num=123;console.log(typeof num);//打印number

数组操作

5个方法：

1.从头部添加，其他元素后移 arr.unshift("头部");
2.从尾部添加 arr.push("尾部");
3.从头部删除 arr.shift();
4.从尾部删除 arr.pop();
5.删除并插入：
        删除下标位置以及其后所有元素 arr.splice(1);
        删除下标位置以及删除个数 arr.splice(1,2);
       删除下标位置，删除个数（只加不删就是0），添加元素 arr.splice(1,0,33,44,55);

            //数组添加元素//从头部添加，其他元素后移arr.unshift("头部");console.log(arr);//从尾部添加arr.push("尾部");console.log(arr);//从头部删除arr.shift();console.log(arr);//从尾部删除arr.pop();console.log(arr);//删除并插入arr=[1,2,3,4];arr.splice(1);//删除下标位置以及其后所有元素console.log(arr);arr=[1,2,3,4];arr.splice(1,2);//删除下标位置以及删除个数console.log(arr);arr=[1,2,3,4];arr.splice(1,0,33,44,55);//删除下标位置，删除个数（只加不删就是0），添加元素console.log(arr);

DOM

（Document Object Model）

DOM（文档对象模型）是 HTML 文档的编程接口，它可以使 JavaScript 与 HTML 文档进行交互。通过使用 DOM，可以动态地修改 HTML 元素的结构、样式和内容，以及响应用户的交互事件。

DOM 是一个树状结构，它由多个节点组成。每个节点代表 HTML 文档中的一个元素、属性、文本或注释。

在 JavaScript 中，可以通过 DOM 方法和属性来操纵 HTML 元素。

修改组件内容样式：

box.innerHTML="<h1>标题</h1>" 修改内容作为html标签

box.innerText="文本内容" 修改内容作为文本

function 定义函数

            let num=0;function clickme(){console.log("Ok");let box=document.getElementById("box");num++;//box.innerHTML="<h1>大家很帅</h1>"//作为html标签box.innerText="点击次数："+num;//作为文本}//clickme();

获取dom组件对象：通过id、class、name属性以及标签名

            //获取dom组件对象var btn=document.getElementById("btn");btn.onclick=clickme;document.getElementsByClassName("");//通过class属性获取document.getElementsByName("");//通过name属性获取document.getElementsByTagName("");//通过标签名

在js中，Math方法如随机数、下取整等与java类似

定时器

定时执行 setInterval 每隔多少毫秒执行一次

延迟执行 setTimeout 延迟多少毫秒执行

这种计时独立于主线程之外执行，clearInterval() 用于清空计时

        // function easymethod(){}// setInterval(easymethod);var interval = setInterval(function(){console.log(Math.random());},300);//每隔300毫秒执行一次setTimeout(function(){clearInterval(interval);console.log(Math.random());},1000)//延迟一秒执行

综合案例：抽号网页JS实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.maxBox {padding: 4px 6px;font-size: 16px;color: #3EAFE0;}.clickBtn {border: 1px solid #3EAFE0;background-color: #3EAFE0;color: #FFF;font-size: 14px;padding: 4px 6px;}.result {font-size: 80px;color: #3EAFE0;font-weight: bold;padding: 30px;}.txt_center {text-align: center;}.exist {border: 1px solid #EEE;padding: 20px;margin: 20px auto;width: 600px;min-height: 100px;text-align: left;}.exist span {display: inline-block;padding: 2px 10px;margin: 4px;border-radius: 3px;background-color: #3EAFE0;color: #FFFFFF;}.info {border: 1px solid blue;color: #000;font-weight: 500;padding: 20px;margin: 20px auto;width: 600px;}</style>
</head><body><div class="txt_center"><div class="result"><span class="" id="result">0</span></div><input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值！"><input class="clickBtn" type="button" id="btn" value="抽号"><div class="exist"><div>已抽取：</div><div id="exist"><span>23</span><span>65</span><span>12</span></div></div></div><!--练习说明--><div class="info">1、在文本框中输入抽号最大值<br/> 2、点击按钮，开始抽号，随机生成1~最大值之间的整数<br/> 3、已经抽取的号码存入一个数组<br/> 4、为了保证号码的唯一性，每次生成一个号码，跟数组中的已抽取的号码比对<br/> 5、如果已存在，重新生成号码<br/> 6、如果不存在，放入数组中保存，并显示出来<br/> 7、将号码结果放入result中显示出来<br/> 8、将已经生成的号码（数组）存入exist中显示出来<br/> 9、给抽号按钮添加一个3s倒计时，倒计时结束前不可点击按钮</div><script></script>
</body></html>

<br/>标签是HTML语言中的一个空标签，用于在页面中插入一个换行符。它不需要闭合标签，直接写为<br/>即可。它常用于段落之间、列表项之间或需要强制换行的其他情况。

<span>标签是HTML语言中用来定义文本样式的标签之一。它可以用来改变文本的颜色、字体、大小等样式。在HTML中，<span>标签是一个行内元素，它可以嵌套在其他标签之中，或者包裹一部分文本。嵌套在<span>标签中的文本可以使用CSS样式表的选择器来定义样式，从而改变其外观。通过使用<span>标签，可以对文本进行灵活的样式设计，使页面看起来更加美观、有层次感。

下面是JS代码实现：

这里我将代码做了些许调整，改为了一个简易的抽卡模拟器，逻辑大致相同

<script>const btn=document.getElementById("btn");const txt=document.getElementById("txt");const result=document.getElementById("result");const exist=document.getElementById("exist");const arr=[];//const不能赋值但是可以修改里面的内容var start=false;btn.onclick=method;//将函数当做变量赋给这个属性，没有小括号function method(){//获取输入框中的内容（数字）var val=txt.value;//如果输入框内没有数据，就提示填入数据if(!val){alert("请输入内容");}else{//如果有数据if(!start){//初始化//如果不是开始状态就要初始化//初始化，设置开始start=true;txt.setAttribute("readonly","readnoly");//准备数组for(let i=1;i<=val;i++){arr[i-1]=i;}console.log(arr);//清空之前抽取出来的部分exist.innerText="";}//如果是启动状态，并且数组中没有可选元素//恢复可填入状态if(start&&arr.length==0){//输入框清空txt.value="";//输入框删除readonlytxt.removeAttribute("readonly");//状态改为falsestart=false;//结束方法return;}//数字跳动起来，计时独立于主线程之外var interval = setInterval(function(){let ranIndex=Math.floor(Math.random()*(arr.length));let num=arr[ranIndex];//将内容显示在result中result.innerText=num;btn.disabled=true;},50);setTimeout(function(){//清空之前计时显示clearInterval(interval);////如果是开始状态就开始抽号//随机下标let ranIndex=Math.floor(Math.random()*(arr.length));//取值[0,51)向下取整//console.log(ranIndex);//获取下标位置的内容let num=arr[ranIndex];//将内容显示在result中result.innerText=num;//追加到exist组件中if(num>val*0.9){exist.innerHTML=exist.innerHTML+"<span style=\"background-color:#F1C40F\">"+num+"</span>";}else if(num<val*0.3){exist.innerHTML=exist.innerHTML+"<span style=\"background-color:#BA68C8\">"+num+"</span>";}else{exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>"}//将该位置的元素删除掉arr.splice(ranIndex,1);//要有一个数组，如果没有数据，提示已经抽完，并且将状态改为false//console.log(arr);btn.disabled=false;},1000);}}</script>

其中：

setAttribute("readonly", "readonly") 是一个 DOM 方法，用于将指定属性设置为指定的值。这里用于将输入框设置为只读模式。

removeAttribute("readonly") 也是一个 DOM 方法，用于从元素中移除指定的属性。这里用于取消输入框的只读模式。

JS基本语法

声明变量

对象操作

方法调用

判断类型

数组操作

DOM

定时器

综合案例：抽号网页JS实现

相关文章：

JS基本语法

LSTM详解总结

制品库nexus

2022.11.17 阿里钉钉数据开发岗位一面

【无标题】Git(仓库，分支，分支冲突)

访问控制列表(ACL)

自用git命令(待完善)

突破•指针四

深入解析Python `requests`库源码，揭开HTTP请求的神秘面纱！

day1 服务端与消息编码

部署WMS仓储管理系统项目后的注意事项

跨网段 IP 地址通信故障分析

存储引擎MySQL和InnoDB（数据库管理与高可用）

探索局域网传输新境界 | 闪电藤 v2.2.7

Tiling Window Management

9. kubernetes资源——pv/pvc持久卷

2024西安铁一中集训DAY27 ---- 模拟赛（(bfs，dp) + 整体二分 + 线段树合并 + (扫描线 + 线段树)）

STM32F401VET6 PROTEUS8 ILI9341 驱动显示及仿真

抖音视频素材网站有哪些？非常好用的5个抖音视频素材库分享

【数据结构】链式二叉树的实现和思路分析及二叉树OJ

idea大量爆红问题解决

【JavaSE】绘图与事件入门学习笔记

多模态大语言模型arxiv论文略读（108）

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

【学习笔记】深入理解Java虚拟机学习笔记——第4章虚拟机性能监控，故障处理工具

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

laravel8+vue3.0+element-plus搭建方法

raid存储技术

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱？分层思维来救场！

第22节 Node.js JXcore 打包