JavaScript 函数相关内容、条件语句

最新推荐文章于 2024-05-27 10:37:20 发布
最新推荐文章于 2024-05-27 10:37:20 发布
阅读量101 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/119679585
版权

JavaScript 函数相关内容

在这里插入图片描述
在这里插入图片描述

1、JavaScript函数的定义：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数调用和定义</title>
    <script type="text/javascript">

        function fnMyalert() {
            alert("hello world");
        }


        function fnChange() {
            var oDiv=document.getElementById('div1');
            oDiv.style.color='red';
            oDiv.style.fontSize='30px';
        }

    </script>
</head>
<body>
    <div id="div1" onclick="fnMyalert();">这是一个div元素</div>
    <input type="button" name="" value="改变div" onclick="fnChange();">
</body>
</html>

显示效果如下所示：
在这里插入图片描述

1、提取行间事件

在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload=function () {

            var oBtn=document.getElementById("btn01");

            //将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
            oBtn.onclick=fnChange;

            function fnChange() {
                var oDiv=document.getElementById('div1');
                oDiv.style.color='red';
                oDiv.style.fontSize='30px';
            }
        }

    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">

</body>
</html>

显示小果盘如下所示：
在这里插入图片描述

2、匿名函数：

在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数</title>
    <script type="text/javascript">

        window.onload=function () {
            var  oBtn=document.getElementById('btn01');

            // 转换成匿名函数的写法
            oBtn.onclick=function () {
                var oDiv=document.getElementById("div");
                oDiv.style.color='red';
                oDiv.style.fontSize='30px'
            }
        }

    </script>
</head>
<body>
    <div id="div">这是一个div元素</div>
    <input type="button" name="" id="btn01" value="改变">
</body>
</html>

显示效果如下所示：
在这里插入图片描述

1、练习：网页换肤

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换肤</title>
    <link rel="stylesheet" type="text/css" href="skin_css/skin.css" id="body">
    <script type="text/javascript">

        window.onload=function () {
            var oBj=document.getElementById("body");
            var oNe=document.getElementById("one");
            var oTw=document.getElementById('two');


            oNe.onclick=function () {
                oBj.href="skin_css/skin.css";
            }

            oTw.onclick=function () {
                oBj.href="skin_css/skin_1.css";
            }
        }

    </script>
</head>
<body >
    <input name="" type="button" value="第一个皮肤" id="one">
    <input name="" type="button" value="第二个皮肤" id="two">
</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、函数和变量的预解析

在这里插入图片描述

4、函数测传递

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){

			function fnMyalert(a){
				alert(a);
			}
			fnMyalert('hello world!');

			function fnChangestyle(mystyle,val){
				var oDiv = document.getElementById('div1');
				oDiv.style[mystyle] = val;
			}

			fnChangestyle('fontSize','30px');
			fnChangestyle('color','red');
			fnChangestyle('backgroundColor','pink');

		}
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>

5、return关键字：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>return关键字</title>
    <script type="text/javascript">
        function fnAdd(a,b) {
            var c=a+b;
            return c;
        }
        var iResult = fnAdd(14,15);
        alert(iResult);

    </script>
</head>
<body>

</body>
</html>

2、加法运算

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加法运算</title>
    <script type="text/javascript">

        window.onload=function () {
            var oInput01=document.getElementById("input01");
            var oInput02=document.getElementById("input02");

            var oBtn=document.getElementById("btn");
            oBtn.onclick=function () {
                var iValue01=parseInt(oInput01.value);      //将字符串转为int性数据
                var iValue02=parseInt(oInput02.value);

                alert(iValue01+iValue02);
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" id="input01">+
    <input type="text" name="" id="input02">

    <input type="button" name="" value="相加" id="btn">
</body>
</html>

在这里插入图片描述

3、条件语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">		
		var iNum01 = 2;
		var sNum01 = '2';
		/*
		用“==” 弹出相等
		if(iNum01==sNum01){
			alert('相等');
		}
		else{
			alert('不相等');
		}

		*/

		if(iNum01===sNum01){
			alert('相等');
		}
		else{
			alert('不相等');
		}

		if(3!=4)
		{
			alert(true);
		}
		else
		{
			alert(false);
		}

		// 将逻辑运算的结果取反，比如运算是true，取反后就是false
		if(!4>3){
			alert('大于')
		}
		else
		{
			alert('不大于')
		}
		// 多个条件运算，都是true，最终结果才是true
		if(4>3 && 5>6)
		{
			alert('都是大于')
		}
		else
		{
			alert('不是都大于')
		}

		// 多个条件运算中只要有一个是true，最终结果就是true
		if(4>3 || 5>6)
		{
			alert('只有部分大于')
		}
		else
		{
			alert('都不大于')
		}
	</script>
</head>
<body>
	
</body>
</html>

4、switch

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 3;
			var oBody = document.getElementById('body01');

			/*if(iWeek==1){
				oBody.style.backgroundColor = 'gold';
			}
			else if(iWeek==2)
			{
				oBody.style.backgroundColor = 'green';
			}
			else if(iWeek==3){
				oBody.style.backgroundColor = 'pink';
			}
			else if(iWeek==4){
				oBody.style.backgroundColor = 'yellowgreen';
			}
			else if(iWeek==5){
				oBody.style.backgroundColor = 'lightblue';
			}
			else{
				oBody.style.backgroundColor = 'lightgreen';
			}*/

			switch (iWeek){
				case 1:
					oBody.style.backgroundColor = 'gold';
					break;
				case 2:
					oBody.style.backgroundColor = 'green';
					break;
				case 3:
					oBody.style.backgroundColor = 'pink';
					break;
				case 4:
					oBody.style.backgroundColor = 'yellowgreen';
					break;
				case 5:
					oBody.style.backgroundColor = 'lightblue';
					break;
				default:
					oBody.style.backgroundColor = 'lightgreen';
			}
		}
	</script>
</head>
<body id="body01">
	
</body>
</html>

1、练习：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮切换元素显示</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 400px;
            background-color: goldenrod;
            /*display: none;*/
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {
            var oBtn=document.getElementById("btn");
            var oBox=document.getElementById("box");
            oBtn.onclick=function () {
                if(oBox.style.display=="block"||oBox.style.display==''){
                    oBox.style.display="none";
                }
                else {
                    oBox.style.display="block";
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" name="" value="切换" id="btn">
    <div class="box" id="box" ></div>
</body>
</html>

显示效果如下：在这里插入图片描述

郭庆汝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript条件语句
m0_69120706的博客
04-03 1093
本关任务：根据成绩判断考试结果。 相关知识： 在编程中，我们常常根据变量是否满足某个条件来执行不同的语句。 JavaScript中利用以if关键字开头的条件语句达到以上目的，根据if后面括号内表达式的计算结果来进行分支控制。 编程要求： 本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下： 根据分数a（百分制）返回考试结果； a小于60分返回unpass，否则返回pass； 本题考察非嵌套的if-else语句； 具体请参见后续测试样例。
javascript 用函数语句和表达式定义函数的区别详解
10-26
JavaScript提供了两种主要的函数定义方式：函数语句（Function Declaration）和函数表达式（Function Expression）。这两种方式虽然都能创建函数对象，但在作用域、提升（Hoisting）和执行时机上存在一些显著差异。 ...
JavaScript条件语句和函数的定义
LA7388的博客
01-25 250
一、导语 跟大多数语言一样，js也有条件语句和函数，那我们今天就来看看，js的if条件判断语句和python的有啥不一样。 二、条件判断语句 2.1 语法 1、单独的if条件 if(条件){ //js代码 } 2、if....else使用 if(条件){ //js代码 }else { ...
Javascript关键字，条件语句，函数及函数相关知识
爱是与世界平行
05-29 1190
关键字 条件语句 作用域 回调 关键字 根据规定，关键字是保留的，不能用作变量名或函数名。 下面是一些ECMAScript关键字的完整列表。 break ,case,catch,continue,default,delete,do,else,finally. for,function,if,iInstanceof,new,return,switch,t...
细说JavaScript函数（JavaScript函数详解）
zhishunet
01-15 1066
自定义函数就是开发者自己定义的函数，其代码处理逻辑有开发者指定，用来满足项目开发中一些特性的需求。
关于JavaScript中函数作为if语句条件的问题
front_endxiaobaia的博客
03-20 1754
一、若function函数体中没有return返回值，则函数作为if条件相当于undefined,而undefined对应布尔类型的false。 二、若function函数体中存在return返回值，则根据函数体内返回值的真假判断函数作为if条件的真假。例如 function myMethod () { let a = 1; return a; } if(myMethod()) { cons...
10 JavaScript学习：函数
热门推荐
百锦再的博客
04-23 7万+
使用 function 关键字：// 函数体使用函数表达式：// 函数体使用箭头函数（ES6）：// 函数体// result 等于 5// result 等于 6。
JavaScript基础（变量、函数、条件语句、数组、循环及操作元素属性）
我的个人博客
04-21 1104
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等前端三大块HTML：页面结构CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能JavaScript嵌入页面的方式1、行间事件（主要用于事件）
CASE WHEN函数语句多条件下使用详解
weixin_67450855的博客
04-11 2万+
CASE WHEN函数语句，实现简单CASE函数和CASE搜索函数两种格式。同时配合 SUM以及COUNT方法的使用。
JavaScript语言基础：JS条件语句
m0_60416689的博客
12-28 1413
第1关：if-else类型 任务描述 本关任务：根据成绩判断考试结果。 相关知识 在编程中，我们常常根据变量是否满足某个条件来执行不同的语句。 JavaScript中利用以if关键字开头的条件语句达到以上目的，根据if后面括号内表达式的计算结果来进行分支控制。 if语句 一段完整的JavaScript语句相当于一条主干路，从第一句开始执行直到最后一句。而if语句是一条连接在干路上的支路，满足某个条件时程序进入支路中执行，执行完后回到干路。如下所示： 条件成立指if后面的括号内的表达式的计
一文读懂 javascript 函数返回值
weixin_40348267的博客
05-27 699
JavaScript 中的函数可以通过 return 语句来返回一个值。函数可以返回任何数据类型，包括基本数据类型（如数字、字符串、布尔值）和复杂数据类型（如对象、数组、函数）。// 输出 7。
高性能JavaScript循环语句和条件语句
11-22
在JavaScript编程中，循环语句和条件语句是不可或缺的部分，尤其在处理大量数据或执行复杂逻辑时。本文主要探讨了高性能的JavaScript循环语句，包括for、while、do-while，以及相对低效的for-in和forEach。通过分析...
JavaScript程序设计条件语句共3页.pdf.zip
11-19
本资料"JavaScript程序设计条件语句共3页.pdf.zip"似乎详细介绍了这一主题，尽管实际内容无法在此直接展示，但我可以为你详细解析JavaScript中的条件语句。 1. **条件语句的种类**： - **if...else语句**：这是最...
javascript 函数介绍
12-12
1. 函数的定义和调用 在JavaScript中，定义函数最常用的方法就是调用function语句。该语句是由function关键字构成的，它后面紧跟的是： Ø 函数名 Ø 一个用括号的参数列表，参数是可选的，参数是用逗号分隔开 Ø ...
GEE数据集-高分辨率全球树冠高度地图（1 米）Meta 公司.pdf
07-17
绘制植被结构图对于了解全球碳循环以及监测基于自然的气候适应和减缓方法至关重要。通过对这些数据的重复测量，可以观察现有森林的砍伐或退化情况、森林的自然再生以及农林业等可持续农业实践的实施情况。高空间分辨率的树冠高度和树冠投影面积评估对于监测碳通量和评估基于树木的土地利用也很重要，因为森林结构在空间上可能高度异质，特别是在农林系统中。极高分辨率的卫星图像（地面采样距离小于一米）使提取树木层面的信息成为可能，同时还能进行大尺度监测。本文介绍了第一份同时为多个次国家辖区制作的高分辨率树冠高度图。具体来说，我们为加利福尼亚州和圣保罗州制作了非常高分辨率的树冠高度地图，与之前基于哨兵/GEDI 的全球树冠高度地图的十米（10 米）分辨率相比，分辨率有了显著提高。这些地图是通过在 2017 年至 2020 年的 Maxar 图像上训练的自监督模型中提取特征，并根据航空激光雷达地图训练密集预测解码器生成的。我们还引入了一个后处理步骤，使用在 GEDI 观测数据上训练的卷积网络。我们利用预留验证激光雷达数据以及与其他遥感地图和实地收集的数据进行比较，对所提出的地图进行了评估，发现我们的模型产生的平均绝对
Matlab下载安装、仿真实验方法.docx
07-17
通过以上步骤，你可以完成Matlab的安装、仿真实验的进行以及撰写详细的实验报告。这些步骤将帮助你建立一个清晰、系统的仿真实验流程。
遗传算法及其MATLAB实现
07-17
遗传算法（Genetic Algorithm, GA）最先是由美国Mic- hgan大学的John Holland于1975年提出的。遗传算法是 模拟达尔文的遗传选择和自然淘汰的生物进化过程的计算 模型。它的思想源于生物遗传学和适者生存的自然规律， 是具有“生存+检测”的迭代过程的搜索算法。遗传算法 以一种群体中的所有个体为对象，并利用随机化技术指 导对一个被编码的参数空间进行高效搜索。其中，选择、 交叉和变异构成了遗传算法的遗传操作；参数编码、初始 群体的设定、适应度函数的设计、遗传操作设计、控制参 数设定等5个要素组成了遗传算法的核心内容。 下面是遗传算法的基本步骤以及基本程序流程简介附带有实现程序，可供参考与加深学习。
TI TMS570光盘HERCUle 安全MCU控制器
最新发布
07-17
TI TMS570光盘HERCUle 安全MCU控制器 开发板全套资料 百度网盘下载链接见附件，资源1.43G
成都信息工程大学，考研复试专业课(所有专业都有)，历年真题及答案、备考资料题库、高分笔记教程.pdf
07-17
成都信息工程大学，考研复试专业课(所有专业都有)，历年真题及答案、备考资料题库、高分笔记教程.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值