JavaScript-CSDN博客

本文链接：https://blog.csdn.net/Friendy89/article/details/11480987

-------android培训、java培训、期待与您交流！ ---------

JavaScript：
是Netspace公司的语言，基于对象和时间驱动。
和java的不同之处：
1，所属公司不一样，java是sun公司，现在是Orcale公司。
2，js是基于对象，java是面向对象。
3，js是由浏览器解释并执行，java是由jvm解释并执行。
4，js是非严谨的，java是严谨的。
javascript运行在客户端。
特点：

1，交互性（它可以做的就是信息的动态交互）

2，安全性（不允许直接访问本地硬盘）

3，跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

javascript和html相结合的方式：
1，将javascript代码封装到<script>标签中

例如：<script type="text/javascript">
alert("hello javascript");
</script>
2，将javascript代码封装到js文件中，并通过<script>的src属性进行导入
注意：如果<script>标签中使用src属性，那么该标签中封装的javascript代码不会被执行。
所以通常导入js文件时都用单独的<script>标签来完成

例如：<script type="text/javascript" src="demo.js"></script>

javascript的基本语法：
1，变量。
通过var关键字定义变量，该变量可以赋予不同类型的变量。
var x = 3 ;
x = "abc";
特殊的常量：undefine
2，语句。
if,switch,while,do while,for
使用逻辑运算符进行布尔表达式连接时，需要使用 && ||
因为在js中，非0即为true，0为false，非null为true，null为false

js特有的语句：
with(对象){}:可以确定对象所使用的范围，在范围内，可以直接使用对象的属性和行为，而不用对象. 的形式调用，
简化了对象的操作。
for(变量 in 对象): 可以对对象的属性及行为进行遍历。

示例（打印99乘法表）：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		/*
		 *练习：在页面中显示一个99乘法表
		 */
		document.write("<table>")
		for(var x=1;x<=9;x++){
			document.write("<tr>")
			for(var y=1;y<=x;y++){
				document.write("<td>"+y+"*"+x+"="+y*x+"</td>");
			}
			document.write("</tr>")
		}
		document.write("</table>")
	</script>
</body>
</html>

运行结果：

3，数组。
对于js的数组特点在于：该数组的长度是可变的，相当于java中的集合。
该数组中可以存放的元素类型可以不同。

定义格式：
var arr = [2,true,"abc"];
var arr = new Array();
var arr = [[2,"xcd",3],[2,3,4]];//二维数组
操作形式和java一样，都是通过for进行遍历，同时也使用了指针思想。

示例：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	   <script type="text/javascript">
	   	/*
	   	 *综合练习：
	   	 *1，定义功能，完成对数组的最值获取。
	   	 *
	   	 *2，对数组排序。
	   	 *
	   	 *3，对数组查找。
	   	 *
	   	 *4，对数组元素反转。
	   	 */
	   	 
	   	 var arr = [14,22,8,21,15,12,6];
	   	
	   	 //取最值。
	   	 function getMax(arr){
	   		var max = 0 ;
	   		for(var x=1;x<arr.length;x++){
	   			if(arr[x]>arr[max]){
	   				max = x ;
	   			}
	   		}
	   		return arr[max];
	   	}
	   	 var maxValue = getMax(arr);
	 //	 alert("maxValue="+maxValue);
	   	 
	   	 //排序。
	   	 function sortArray(arr){
	   		 for(var x=0;x<arr.length-1;x++)
	   			 for(var y=x+1;y<arr.length;y++){
	   				 if(arr[x]>arr[y]){
	   					 swap(arr,x,y);
	   				 }
	   			 }
	   	 }
	   	 function swap(arr,x,y){
	   		 var temp = arr[x];
	   		 arr[x] = arr[y];
	   		 arr[y] = temp ;
	   	 }
	   	 function print(value){
	   		 document.write(value+"<br/>");
	   	 }
//	   	 document.write("排序前："+arr);
		 print("排序前："+arr);
	   	 sortArray(arr);
//	   	 document.write("排序后："+arr);
		 print("排序后："+arr);
	   	 
	   </script>
	</body>
</html>

运行结果：

4，函数。
通过function关键字定义函数。
a）一般函数
格式：function 函数名(形式参数)
{
执行语句;
return 返回值;
}
通常提供代码复用可以将代码封装成函数。
两个明确：
1，明确该功能实现后的结果。
2，该功能在实现过程中是否有未知内容参与运算。
b）动态函数
使用的function对象。
var show = new Function("x","y","return x+y");
动态函数的特点：可以将参数列表和方法体作为参数传递。
c）匿名函数
一般函数的简写形式。
function(){}
匿名函数通常可以用于事件的处理。
如：
window.onload = function(){alert('onload over');}//加载结束

在函数使用时需要注意的部分：
function show(){
return "show run";
}
var method = show();
var method = show;
两句代码都是正确的，
第一句表示的是show方法运行后的结果赋值给method变量。
第二句表示的是show指向的对象的地址赋值给method。那么method也指向了该对象。
那么就可以通过method();的形式来调用这个show方法。

示例（函数的细节问题）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		/*
		 *函数的细节
		 *
		 */
		 function getSum(){
			return 100;
		}
		//var sum = getSum();//getSum函数运行，并将返回的结果赋值给sum
		var sum = getSum;//getSum本身是一个函数名，而函数本身在js中就是一个对象。getSum就是这个函数对象的引用。
						  //将getSum这个引用的地址值赋给了sum，这时sum也指向了这个函数对象。
						  //相当于这个函数对象有两个函数名称。
		alert("sum="+sum);//打印的时候如果sum指向的是函数对象，那么会将该函数对象的字符串表现形式打印出来。
							//就是该函数的代码定义格式。
	
	
	
	</script>
   
</body>
</html>

运行结果：根据结果可知var sum = getSum();与var sum = getSum;打印结果不同，开发中要注意

5，对象

js可以通过对象形式将数据进行封装。
首先对对象进行描述，通过函数来完成。例如，

function Person(name,age){
		this.name = name ;
		this.age = age ;
	}
	var p = new Person("lisi",30);
	alert(p["name"]+"..."+p.age);
	p.show = function(){//给person赋一个方法
		alert("show run");
	}

6，用于操作对象的语句

1） with语句。

格式：with(对象){}

应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。例如，

var p = new Person(“zhangsan”,20);
alert(p.name+”,”+p.age);
可以写成：
var p = new Person(“zhangsan”,20);
with(p)
{
    alert(name+”,”+age);
}

with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。

2）for...in语句：用于遍历对象属性。

var p = new Person(“zhangsan”,20);
	for(x in p)
	{
		alert(x);//结果是两个对话框，一个是name，一个是age。
		alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通									过指定的元素名获取元素的值。
	}

对于数组而言：

for(s in arr)

{

alert(s);//打印出的是角标

alert(arr[s]);//打印出的才是元素

}

7,Javascript中的已定义好的一些对象。

常见的有：String,Math,Date,Array,Function

这些对象都有一个属性叫做prototype 原型。
prototype可以获取指定的对象引用。
可以通过该引用给已有的对象赋予一些新的功能。

例如取出字符串两端的空格：代码如下，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript" src="out.js"></script>
	<script type="text/javascript">
		/*
		 *演示string对象
		 *表现形式：
		 *var str = new String("abc");
		 *var str = "abc";
		 */
		 
		 var str = "abcde";
		 println(str);
		 println(str.bold);//加粗。
		 println(str.fontcolor("red"));
		 println(str.link("www.baidu.com"));//将字符串变成超链接
		 println(str.substr(1,3));//1是开始，3是长度。 bcd
		 println(str.substring(1,3));//1是开始，3是结尾。bc
		 
		 /*
		  *发现js中的string对象方法有限，想要对字符串操作的其它功能
		  *比如：去除字符串两端的空格，只是只能自定义
		  */
		  //去除字符串两端的空格
		  function trim(str){
		  	//定义两个变量，一个记录开始的位置，一个记录结束的位置
			//对开始的位置的字符进行判断，如果是空格，就进行递增，直到不是空格为止。
			//对结束的位置的字符进行判断，如果是空格，就进行递减，直到不是空格为止。  
			 // 必须要保证开始<=结束 ,这样才可以进行截取
			 
			 var start,end;
			 start = 0 ;
			 end = str.length-1 ;
			 while(start<=end && str.charAt(start)==" "){
				 start++;
			 }
			 while(start<=end && str.charAt(end)==' '){
				 end--;
			 }
			 return str.substring(start,end+1);
		  }
		  var s = "      ab c   ";
		 // alert("--"+s+"--");
		 alert("--"+trim(s)+"--");
	</script>
</body>
</html>

注：详细可以参考 JScript 手册中 JScript 对象

-------android培训、java培训、期待与您交流！ ----------