JS基本语法

小北5342024-07-30 22:28

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

如点击按钮调用方法：

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

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

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

声明变量

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

  1. let关键字用于声明一个局部变量，作用域限制在当前的代码块内。使用let声明的变量可以被重新赋值，也可以在相同作用域内重新声明。

  2. const 关键字用于声明一个常量，表示其值是不可变的。一旦被赋值后，不能再重新赋值。const声明的变量必须在声明时进行初始化。

  3. var关键字用于声明一个变量，其作用域可以是全局的或函数内部 的。使用var声明的变量可以被重新赋值，也可以在相同作用域内重新声明。

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

对象操作

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

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

删除属性 delete

javascript 复制代码 
				//删除属性
				delete obj.sex;

方法调用

javascript 复制代码 
			//程序运行阶段赋值的函数只有在后面才能调用
			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

javascript 复制代码 
            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);

javascript 复制代码 
            //数组添加元素
			//从头部添加，其他元素后移
			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 定义函数

javascript 复制代码 
            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属性以及标签名

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

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

定时器

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

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

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

javascript 复制代码 
        // function easymethod(){}
		// setInterval(easymethod);
		
		 var interval = setInterval(function(){
		 	console.log(Math.random());
		 }
		 ,300);//每隔300毫秒执行一次

		 setTimeout(function(){
            clearInterval(interval);
		 	console.log(Math.random());
		 },1000)//延迟一秒执行

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

html 复制代码 
<!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代码实现：

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

javascript 复制代码 
<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="";
					//输入框删除readonly
					txt.removeAttribute("readonly");
					//状态改为false
					start=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 方法，用于从元素中移除指定的属性。这里用于取消输入框的只读模式。

相关推荐
Dragon Wu5 分钟前
TailwindCss 总结
前端·css·前端框架
cdut_suye7 分钟前
C++11新特性探索：Lambda表达式与函数包装器的实用指南
开发语言·数据库·c++·人工智能·python·机器学习·华为
桃园码工15 分钟前
第一章：Go 语言概述 1.什么是 Go 语言？ --Go 语言轻松入门
开发语言·后端·golang
bpmf_fff15 分钟前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
努力更新中22 分钟前
Python浪漫之画一个音符♪
开发语言·python
泰山小张只吃荷园27 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
Mr_Xuhhh30 分钟前
程序地址空间
android·java·开发语言·数据库
凤枭香39 分钟前
Python Selenium介绍（二）
开发语言·爬虫·python·selenium
疯狂吧小飞牛41 分钟前
C语言解析命令行参数
c语言·开发语言
z2023050844 分钟前
linux之调度管理(13)- wake affine 唤醒特性
java·开发语言
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02玄机平台应急响应—webshell查杀03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总0404 - matlab m_map地学绘图工具基础函数 - 设置网格05Docker 夺命连环 15 问06PyTorch机器学习实现液态神经网络07鸿蒙LiteOS+Hi3861智能家居网关设计：MQTT协议实现与代码示例08支付宝短视频平台创作分成激励项目09RAG 实践- Ollama+RagFlow 部署本地知识库10编译原生安卓aosp源码，实现硬改以及定位