JavaScript从入门到入门（三）

最新推荐文章于 2024-07-22 19:31:15 发布

xk_005

最新推荐文章于 2024-07-22 19:31:15 发布

阅读量132

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xiaokan_001/article/details/105314853

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

二、JavaScript语言基础

上一篇链接《JavaScript从入门到入门（二）》

02.JavaScript变量与函数

2.1 JavaScript变量

变量来源于数学，是计算机语言中能储存计算结果或能表示值抽象概念。其主要作用是存取数据、提供存放信息的容器。而JS是一种若检测语言。它对变量的定义并不需要声明变量类型，通过赋值的形式，可以将各种类型的数据赋值给同一个变量。

2.1.1 命名规则

JS中的变量命名与其他计算机语言非常相似，主要有一下三点：

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
变量名区分大小写，如:A与a是两个不同变量。
不允许使用JavaScript关键字和保留字做变量名。

2.1.2 变量的声明与赋值

前面已经提到JS中变量不需要声明变量类型，但是JS中可以用var作变量声明，当然也可以不用，这就是显示声明可隐式声明。

var i = 56;     //显示声明 在程序中需要创建局部变量，必须要用var声明
i = 56;         //隐式声明 JS会自动用该变量名创建一个全局变量

当然，var可以用逗号隔开声明多个变量。如

var a,b,c=23;

2.1.3 变量的作用域

在JS变量的定义并不是以代码块作为作用域的，而是以函数作为作用域。JS变量作用域可分为：全局变量和局部变量

全局变量是指定义在所有函数之外的变量
局部变量是指在某个函数中定义的变量
注：
在声明变量时凡是没有var关键字，而直接复制的变量均为全局变量。而在使用时根据需要将变量声明为全局变量或者局部变量。
当全局与局部变量名一样且调用（函数中调用变量）时，函数域优先于全局域。
具体可参考博文《js中变量的作用域》

2.2 JavaScript函数

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。

2.2.1 函数的定义

JS函数是使用function关键字实现的，语法如下：

function 函数名(形参) {             // function定义函数的关键字,"函数名"你为函数取的名字
    函数代码;                       // 函数代码是替换为完成特定功能的代码
    }

2.2.2 函数的调用

函数定义好后，只是让浏览器知道有这样一个函数，是不能自动执行的，所以需调用它,只有在函数被调用的时候，代码才会真正的被执行，只需直接在需要的位置写函数就可以了，当然如果需要传参，则要把相应参数传进去后执行。而与其他的JS一样，函数也必须位于<script></script>标记对之间，且对于返回值，JS函数可以有也可以没有，如果需要返回值，可通过return实现。示例如下

<script>
    function add(x,y) {    sum = x + y;    document.write(sum); }
    var a = 1,b = 2;
    add(a,b)        //显示3
</script>

当然JS函数也可以嵌入到HTML的按钮等等功能中，后续将讲到……

2.2.3实现美景图片转换代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Scenery picture exhibition</title>
		<style>
			#s_img{
				display: block;
				width: 960px;
				height: 400px;
				margin: 50px auto;
			}
			#next{
				margin-left: 750px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.png" id="s_img"/>
		<button id="next">next</button>
		<button id="prev">prev</button>
		<script>
			var s_img = document.getElementById('s_img')
			var next = document.getElementById('next')
			var prev = document.getElementById('prev')
			var nowImg = 1;
			var count_Img = 7;
			next.onclick = function(){
				nowImg = nowImg + 1 > count_Img?1:nowImg+1;
				s_img.src = "img/" + nowImg + ".png";
			}
			prev.onclick = function(){
				nowImg = nowImg - 1 < 1?count_Img:nowImg-1;
				s_img.src = "img/" + nowImg + ".png";
			}
		</script>
	</body>
</html>

具体效果可自己测试，截图无法展示next和prev的功能。
持续更新中……
原创不易，如果觉得不错，就点个赞吧！