HTML_03(javaScript(01))_html实现sum=a+b-CSDN博客

本文链接：https://blog.csdn.net/my_kudy/article/details/7985845

一. Js和html结合的方式:
二.
1,将javaScript代码封装到<script>标签中.
2,将javaScript代码封装到js文件中,并且通过<script>中的src属性进行导入..
需要注意的:
a:导入的语句是会自动执行的
b:可以导入多个
c:script标签最好写在body标签里面

三. javaScript的语法:
四.
通常高级程序设计语言所包含的语法内容:
1,关键字:该种语言中被赋予了特殊含义的单词.
2,标识符:用于标识数据和表达式的符号,通过可以理解为在程序中自定义的名字,比如变量名,函数名.
3,注释:注释说明解释程序,用于调试程序.
4,变量:用于标识内存中的一片空间,用于存储数据,该变量中的数据是可以变化的.
5,运算符:可以让数据进行运算.
6,语句:用于对程序的运行流程进行控制的表达式.
7,函数:对于功能代码的封装,使代码有更好的阅读性,
8,数组:是存储数据的一个容器,可以对多个数据进行存储.
9,对象:只要是基于对象的语言,或者是面向对象的语言,就存在对象的概念,对象只是一个封装体.既可以封装数据也可以封装函数.

以上内容都是高级语言所共同拥有的特性,只不过各种语言对这些内容的表现形式不同而已.

 <script type="text/javascript">
    	var  a = 234;
		var b = "45";
		var d = true;
		var e = "您好";
		var f = '哈哈';
		alert(b+"---"+d+"---"+"----"+e+"----"+f);
</script>

三.运算符

1,算术运算符.
+ - * / % ++ --
2,赋值运算符
= += -= *= /= %=
3,比较运算符:运算的结果要不是false就是true
 < >= <= != ==
4,逻辑运算符
! && ||
5,位运算符
& | ^ >> << >>>
6,三元运算符
? :
小细节:
A):undefined:未定义,其实就是一个常量..
B):要想获取具体值的类型,可以通过typeof来完成

	var y ;
		alert(y==undefined);//说明:如果没有被定义,里面是一个常量.
		*/
		var a = '2';
		var b = 32.2;
		var c = 23;
		var d = true;
		alert(typeof(a)+"----"+typeof(b)+"----"+typeof(c)+"-----"+typeof(d));//这个可以用来测试一个类型.

总体代码显示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <script type="text/javascript">
	/*
		var x = 3712;
		var y = x/1000*1000;  //类型为Number 小数类型
	//		alert(y);
		//alert("12"+1);//与字符集连接会自动拼接
		//alert("12"-1);//11 有一个自动转换
		alert(true+1); //在js里面.true为1,false为零.  
		var n = 9;
		n--;
		alert(n);//先赋值.后运算/所以结果为8

		var i = 3;
		i+=5; //i= i+5;
		alert(i);

		var z = 3;
		alert(z!=4); //true
		
		alert(z>2&&z<5);//true
		alert(!false);

		var x = 3>5?"大于":"小于";
		alert(x);
		
		var y ;
		alert(y==undefined);//说明:如果没有被定义,里面是一个常量.
		*/
		var a = '2';
		var b = 32.2;
		var c = 23;
		var d = true;
		alert(typeof(a)+"----"+typeof(b)+"----"+typeof(c)+"-----"+typeof(d));
		
    </script>
</body>
</html>

四.语句
1,顺序结构
2,判断语句
3,选择语句
4,循环语句
5,其他语句
Break:跳出当前的循环
Countine:跳过本次循环.

五.数组
特点:
1,长度是可变的
2,元素的类型是任意的.
Js中的数组定义的两种方式:
Var arr = new Array();//数组
Var arr = [12,34,54,55];
Var arr = [5];//定义长度为5

代码:

	<script type="text/javascript">
	/*
    		var arr = [23,44,"您好",true];
			for(var x=0; x<arr.length; x++)
			{
				alert(arr[x]);
			}
	*/	
			var arr = new Array();
			arr[0] = "33";
			arr[6] = 8;
			for(var x=0 ; x<arr.length; x++)
			{
				alert(arr[x]);  //未定义的内容出来啦
			}
</script>

六.js函数的表现形式:

动态函数:使用的是js中内置的一个对象Function.
原理: 其实就是创建了一个动态的函数.函数名为Add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
	/*
    	var add = new Function("a,b","var sum; sum=a+b; return sum;");
		var sum = add(23,4);
	*/
	
	//当您如果这样打印.会打印它的地址..相当于直接打印了toString(java 比喻)
		var sum =  function()
		{
			return 10;	
		}
		var num = sum();
		alert(num);
		
		var xixi = function()
		{
			alert("haha");
		}
		xixi();
		
		
    </script>
</body>
</html>

函数再次补充:
1,函数:就是对功能实现封装.
定义功能通常需要两个明确.
1,功能的结果.
2,功能的实现中参与运算的未知内容.
Js中定义函数的格式
3,参数没有类型的.
Function show(a,b)
{
函数体
Return 10;//如果没有返回值,这个return语句可以不写.
}

演示代码:

<body>
	<script type="text/javascript">
	/*
    		var arr = [23,44,"您好",true];
			for(var x=0; x<arr.length; x++)
			{
				alert(arr[x]);
			}
	*/	
	/*
			var arr = new Array();
			arr[0] = "33";
			arr[6] = 8;
			for(var x=0 ; x<arr.length; x++)
			{
				alert(arr[x]);  //未定义的内容出来啦
			}
	*/
		function show()
		{
			alert("hello");
		}
		show();
		
		var happy = function()
		{
			alert("happy");
		}
		happy();
		
		function sum(a,b)
		{
			return a+b;
		}
		var sum = sum(2,3);
		alert(sum);
		
		function say()
		{
			alert("oh了吧!!");
		}
		var aa = say;//现在没有输出去...也就是说say的地址已经和aa的地址一样
		aa();//其实就是调用了say函数
    </script>
</body>

函数细节:
1,只要是使用了函数的名称就是对这个函数的调用.
2,函数只有一个数组在对传入的参数进行存储.这个数组就是arguments

<body>
	<script  type="text/javascript">
		 
    	 function show()
		 {
		 	for(var x=0; x<arguments.length; x++)
			{
				alert(arguments[x]);
			}
			alert("哦!然来参数类型不匹配也可以传入进去.但是一般我们不这样做..不符合逻辑规则嘛,只知道这样是没有错误就可以了");
		 }
		 show("1",3,4,5,6,7);
		 var info = show();//就是表示对函数的调用
		 var info = show;//这个就是表示了show的地址给了info…  当如果我再次调用info方法.其实就是调用了show方法.
    </script>
</body>

题目与锻炼:


1,九九乘法表:
document.write("<table>"); //从页面显示出来的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>嘻嘻,,哈哈,,嘿嘿,,哦哦,</title>
<style>
	table
	{
		color:#FF0000;
		background-color:#003399;
		width:600px;
		border:dotted;
		
		
	}
</style>
</head>
<body>
	<script type="text/javascript">
    	document.write("<table>");
		for(var i=1; i<=9; i++)
		{
			document.write("<tr>");
			for(var j=1;j<=i;j++)
			{
				document.write('<td>'+i+"*"+j+"="+i*j+'</td>');
			}
			document.write("</tr>")
		}
		document.write("</table>");
    </script>
</body>
</html>

2,求一个最大值,并且排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
    	//获取一个最大值
		var arr = [23,56,3,2,4,66];
		var println = function()
		{
			document.write("<br/>");
		}
		 //获取一个最大值
		function max(arr)
		{
			max = arr[0];
			for(var x=0; x<arr.length; x++)
			{
				if(max<arr[x])
					max = arr[x];
			}
			return max;
		}
		var max = max(arr);
		document.write("方法一的求最大值:"+max);
		println();
		
		//方法二:
		function getMax(arr)
		{
			var max = 0;
			for(var x=1; x<arr.length;x++)
			{
				if(arr[max]<arr[x])
					max = x;
			}
			return arr[max];
		}
		document.write("最大值为:"+getMax(arr));
		
		//排序:
		function button(arr)
		{
			for(var x=0; x<arr.length; x++)
			{
				for(var j=0;j<arr.length-x-1; j++)
				{
					if(arr[j]<arr[j+1])
					{
						swap(arr,j,j+1);
					}
				}
			}
		}
		//打印数组
		function show(arr)
		{
			//如果我打印arr.那么就是打印这个数组.并且以,隔开
			document.write(arr);
		}
		//交换两个数字的位置
		function swap(arr,i,j)
		{
			var temp = arr[i];
			arr[i] = arr[j];
			arr[j] = temp;
		}
		
		println();//换行
		document.write("排序之前:");
		show(arr);
		println();
		document.write("排序之后:");
		button(arr);
		//排完再打印出去..冲凉一次.
		show(arr);
		
    </script>
</body>
</html>

3,查找一个数字的出现的位置..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
		//对数组查找,,对数组进行反转
		var arr = [23,45,67,332,1111,111133];
		
		//查找
		function getkey(arr,key)
		{
			for(var x=0; x<arr.length; x++)
			{
				if(arr[x]==key)
					return x+1;
			}
			return -1;
		}
		var value = getkey(arr,33);
	//	document.write(value);
		//document.write("<br/>");
		
		//折半查找
		function binarySearch(arr,key)
		{
			var max,min,mid;
			min = 0;
			max = arr.length-1;
			while(min<=max)
			{
				mid = (max+min)>>1;
				if(key>arr[mid])
					min = mid+1;
				else if(key<arr[mid])
					max = mid-1;
				else
					return mid+1;//代表中了
			}
			return -1;
		}
		var x = binarySearch(arr,332);
		document.write(x);
    </script>
</body>
</html>

4.反转数字:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
    	var arr = [12,34,56,77,88];
		function reverseArray(arr)
		{
			for(var start=0,end=arr.length-1;start<end;start++,end--)
			{
				//一个自+,一个自-
				swap(arr,start,end);
			}
		}
		function swap(arr,start,end)
		{
			var temp = arr[start];
			arr[start] = arr[end];
			arr[end] = temp;
		}
		document.write("之前:"+arr);
		reverseArray(arr);
		document.write("之后:"+arr);
		//必须要让其值一样.要不然就是相当于拷贝一份的问题啦
		
    </script>
</body>
</html>

心得:

今天总体来说还是不错的,,,这个就当复习啦..明天复习的内容..画图理解一下这个函数的问题/..和折半查找..和反转数字…