【JavaScript】javaScript基础知识回顾

最新推荐文章于 2022-06-19 20:57:17 发布

光仔December

最新推荐文章于 2022-06-19 20:57:17 发布

阅读量1.2k

点赞数

分类专栏： JavaScript JavaScript的基础与DOM编程文章标签： javascript

本文链接：https://blog.csdn.net/acmman/article/details/47806539

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 9 订阅

订阅专栏

JavaScript的基础与DOM编程

27 篇文章 21 订阅

订阅专栏

我们首先对JavaScript的基础进行回顾。

1.浏览器的对象树
总浏大纲，还是要先看浏览器的对象树:
如1.1浏览器的对象树.png

2.window对象常用方法
alert(‘信息’)：消息框
prompt(‘提示信息’,默认值)：标准输入框
confirm( )：确认框
open( )：打开一个新窗口
close( )：关闭窗口

3.Form表单对象
访问表单的方式:
* document.forms[n]
* document.表单名字
表单对象常用的属性
action <from action=”xxx”> 表单提交的目的地址
method <form method=”xxx”> 表单提交方式
name <form name=”xxx”> 表单名称

例子1:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
		<form name="form1" action="test1.html" method="post">
			<input type="text" name="username" value="zhang"/>
			<input type="button" name="ok" value="保存1"/>
		</form>
		<form name="form2" action="test2.html" method="post">
			<input type="text" name="username" value="zhang2"/>
			<input type="button" name="ok2" value="保存2"/>
		</form>
		
		<script language="javascript">
			//使用两种方式输出表单的action值/method值（使用表单的名称，使用表单数组forms）
			//方法1
			var formElement=document.form1;
			alert(formElement.action);
			alert(formElement.method);
			
			//方法2
			var formElement=document.forms[0];
			alert(formElement.action);
			alert(formElement.method);
		</script>
	</body>


</html>

测试结果成功输出表单的action值/method值javaScript定义函数的三种方式。

例子2:解决多个按钮提交表单的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
		<form name="form1" action="" method="post">
			患者姓名<input type="text" name="username" value="zhang"/>
			<input type="button" name="ok" value="打印患者信息" οnclick="printPerson()"/>
			<input type="button" name="ok2" value="查询患者信息" οnclick="selectPerson()"/>
		</form>
		
		<script language="javascript">
			//通过javaScript函数方式访问printPerson.html和selectPerson.html
			function printPerson(){
				var forElement=document.forms[0];
				forElement.action="printPerson.html";
				forElement.method="post";
				forElement.submit();
			}
			
			function selectPerson(){
				var forElement=document.forms[0];
				forElement.action="selectPerson.html";
				forElement.method="get";
				forElement.submit();
			}
		</script>
	</body>


</html>

3.javaScript定义函数的三种方式
(1)正常方法

function print(msg){
    document.write(msg);
}

对函数进行调用的几种方式：
函数名（传递给函数的参数1，传递给函数的参数2，….）
变量 = 函数名（传递给函数的参数1，传递给函数的参数2，….）
对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=“ + square(2,3));
不指定任何函数值的函数，返回undefined。

(2)构造函数方法 new Function();
//构造函数方式定义javascript函数注意Function中的F大写
var add=new Function('a','b','return a+b;');

//调用上面定义的add函数
var sum=add(3,4);
alert(sum);
注:接受任意多个字符串参数，最后一个参数是函数体。如果只传一个字符串，则其就是函数体。

(3)函数直接量定义函数
//使用函数直接量的方式定义函数
var result=function(a,b){return a+b;}

//调用使用函数直接量定义的函数
var sum=result(7,8);
alert(sum);
注:函数直接量是一个表达式，它可以定义匿名函数

三种定义函数方法测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
		
		<script language="javascript">
			//方法1
			//使用普通方法
			function add1(a,b){
				return a+b;
			}
			
			alert(add1(1,2));
			
			//方法2
			//构造函数方式定义javascript函数
			var add2=new Function('a','b','return a+b');
			alert(add2(3,4));
			
			//方法3
			//使用函数直接量的方式定义函数
			var add3=function(a,b){
				return a+b;
			}
			alert(add3(5,6));
			
		</script>
	</body>


</html>

以上就是Js的基础知识的大致回顾

转载请注明出处：http://blog.csdn.net/acmman/article/details/47806539

光仔December

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】javaScript基础知识回顾

我们首先对JavaScript的基础进行回顾。1.浏览器的对象树总浏大纲，还是要先看浏览器的对象树:如1.1浏览器的对象树.png2.window对象常用方法alert(‘信息’)：消息框prompt(‘提示信息’,默认值)：标准输入框confirm( )：确认框open( )：打开一个新窗口close( )：
复制链接

扫一扫