欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

第一章：JavaScript函数基础知识回顾

程序员文章站 2022-06-15 13:46:34
...

目录

内部属性

基本类型和引用类型

全局函数

案例练习

删除确认提示框

动态创建元素

动态添加事件

防止按钮连击

综合练习

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

内部属性

  • 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 组件。

三种编码方式的区别：

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

 

相关标签： JavaScript进阶 javascript

上一篇： 【JavaScript学习】面向对象的程序设计（3）：原型链继承

下一篇： ftpClient文件上传成功但总是返回false

推荐阅读