内部属性

基本类型和引用类型

全局函数

案例练习

这一章我们主要来回顾函数的一些基础知识和巩固一些简单的案例。

内部属性

arguments.length 检测函数的参数（实参）个数
在函数外部使用this，就指的是window对象
全局变量可以看做window对象的属性

<script type="text/javascript">
		function sum() {
			alert(arguments.length);
			var result=0;
			for(var i=0;i<arguments.length;i++){
			  	result+=arguments[i]
			}
			return result;
		}
		alert(sum(12,3,5,10,5,3))
</script>

    <script>
		//在函数外部使用this,this就指的是window对象
		alert(this)

		//全局变量可以看做window对象的属性
		var x=1;
		alert(window.x)
		alert(this.x)
		
	</script>

基本类型和引用类型

基本类型值有：undefined，NUll，Boolean，Number和String
- 这些类型分别在内存中占有固定的大小空间，例如：数值型在内存中占有八个字节，布尔值只占有一个字节......
  他们的值保存在栈空间，我们通过按值来访问的。
引用类型：对象、数组、函数
- 引用类型内存中占有的空间不固定，但是内存地址大小是固定的，因此存储的实际上是数据的内存地址。

所以，在变量复制时候，基本类型复制的是值本身，而引用类型复制的是地址。另外，函数的参数都是按值传递的。

全局函数

全局函数和属性可用于所有内建的 JavaScript 对象。全局函数又叫顶层函数或系统函数。

parseInt() 函数可解析一个字符串，并返回一个整数。
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
isNaN() 函数用于检查其参数是否是非数字值。
String() 函数把对象的值转换为字符串。
Number() 把对象的值转换为数字。
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。（该方法只接受字符串作为参数，要计算的字符串中必须含有要计算的 JavaScript 表达式或要执行的语句。）
escape() 对字符串进行编码。
- 返回值:已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
- 该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。
unescape() 对由 escape() 编码的字符串进行解码。
encodeURI() 把字符串编码为 URI。（URI ：Uniform Resource Identifier，统一资源标识符）
decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURIComponent() 把字符串编码为 URI 组件。

三种编码方式的区别：

escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z（主要是为了防止特殊字符造成计算错误时候应用）
encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z（防止特殊字符串造成URI的传递错误，一般用于页面跳转的时候。）
encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z（防止URI参数中特殊字符串造成参数读取错误，一般用来传递参数。）

isFinite() 检查某个值是否为无穷大的数：如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。

Infinity无穷大（系统定义常量）
-Infinity无穷小（系统定义常量）

案例练习

删除确认提示框

防止用户小心单击了“删除”按钮，在用户单击“删除”按钮后，给出一个提示，让用户确认此次操作是否正确。

    <input id="Button1" type="button" value="删除" οnclick="del()"><br>
	<script>
	        //var r=confirm("确实要删除吗?")
		    function del(){
			    if(confirm("确实要删除吗?")){
				    alert("已经删除！");
			    }else{
				    alert("已经取消了删除操作");
			     }
		  }
	</script>

动态创建元素

通过JS的DOM对象，实现元素的动态创建。

createElement() 通过指定名称创建一个元素，是DOM对象创建元素的方法，创建完元素后，指定元素的类型、值和方法，最后使用“appendChild”方法，将元素添加到body中。
appendChild() 方法向节点添加最后一个子节点。
及时解除不再使用的变量引用,即将其赋值为 null。

    <input id="Button1" type="button" value="删除" οnclick="del()"><br>
	<input id="Button2" type="button" value=" 测试" οnclick="addInput()"> <br>
	<script type="text/javascript">
		var i=0;
		function addInput(){
			//使用DOM的创建元素方法
			var o=document.createElement("input"); 
			o.type = "button" ; 
			o.value = "按钮" + i++ ;
			o.addEventListener("click",addInput);   
			document.body.appendChild(o);
			o = null;//及时解除不再使用的变量引用,即将其赋值为 null;  
		}
		addInput() 
	</script>

动态添加事件

前一个案例是如何在网页中动态添加元素，有时候我们需要添加事件。有时候需要动态的为元素添加事件。重点是如何为元素绑定事件。绑定元素时需要知道此元素的唯一标识（ID或Name）。

<input id="Button1" type="button" value="Button1">
<input id="Button2" type="button" value="动态添加事件" οnclick="addClick(Button1)">
<script type="text/javascript">
     //添加事件的参数，参数为元素的标识
	function addClick(obj){
		obj.οnclick=function(){
			alert('动态添加事件成功 ');
		}
	}
</script>

防止按钮连击

当页面提交的数据特别多时，页面会反应比较迟钝，此时如果用户等不及而连续单击按钮，就会导致数据重复提交。所以这个案例就是为了防止数据重复提交。重点是如何判断页面的状态。

readyState 属性返回当前文档的状态,该属性返回以下值:

uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

<input type=button value="提交" onClick="check()">
<script type="text/javascript">
	function check(){
		if (window.document.readyState == 'complete'){
			alert("加载完毕，可以继续"); 
			return true;
		}else{
			alert("正在处理，请等待！");
			return false; 
		}
	}
</script>

综合练习

现在我们开始一个综合性的练习，除了们JS知识外，还用到了HTML的表格，表单等相关知识。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				margin: 20px auto;
				border: 2px solid orange;
			}
			select,input{
				width: 200px;
				height: 40px;
				font-size: 18px;
			}
			[type=radio]{
				width: 30px;
				height: 30px;
			}
			[type=submit],[type=reset]{
				width: 100px;
				border-radius: 25px;
				font-size: 20px;
				outline: none;
			}
			td{
				height: 40px;
				line-height: 40px;
				padding: 5px;
				width: 200px;
				background: rgba(100,50,10,0.3);
				text-align: left;
				font-size: 24px;
			}
			.right{
				text-align: right;
				width: 150px;
			}
			input:focus{
				background: rgba(0,150,25,0.3);
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td class="right" >用户名：</td>
				<td><input type="text" id="st1"></td>
			</tr>
			<tr>
				<td class="right">联系电话：</td>
				<td><input type="text" id="st2"></td>
			</tr>
			<tr>
				<td class="right">密码：</td>
				<td><input type="text" id="st3"></td>
			</tr>
			<tr>
				<td class="right">确认密码：</td>
				<td><input type="text" id="st4" οnblur="check()"></td>
			</tr>
			<tr>
				<td class="right">性别：</td>
				<td>
					<input type="radio" name="sex" id="sex1">男
					<input type="radio" name="sex" id="sex2">女
				</td>
			</tr>
			<tr>
				<td class="right">学历：</td>
				<td>
					<select id="select">
						<option value="高中">高中</option>
						<option value="大专">大专</option>
						<option value="本科">本科</option>
						<option value="本科以上">本科以上</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
					<input type="submit" value="提交" οnclick="test()">
					<input type="reset" value="重置">
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			function $(x){//自定义通过id获取元素的函数
				return document.getElementById(x);
			}
			function check(){
				if($('st3').value==$('st4').value){
					return true;
				}else{
					alert('密码不正确！');
				}
			}
			function test(){
				var str='';
				str+="\n用户名：";
				str+=$('st1').value;
				str+="\n联系电话："
				str+=$('st2').value;
				str+='\n性别：';
				str+=$('sex1').checked?'男':'女'
				str+='\n 学历：';
				str+=$('select').value;
				alert('用户信息：\n'+str);
			}
		</script>
	</body>
</html>

hsLiao@

发布了31 篇原创文章 · 获赞 36 · 访问量 7278

私信关注

JS函数基础知识

内部属性

基本类型和引用类型

全局函数

案例练习

删除确认提示框

动态创建元素

动态添加事件

防止按钮连击

综合练习

猜你喜欢